/* Our own rules, on top of Elementor's. */

/* A field kept for the CMS but not printed (a post's categories as a word
   list, its summary). Elementor's list styles set display on spans, which
   beat the hidden attribute, so the categories showed twice. */
[data-phx][hidden] { display: none !important; }

/* The header stays at the top while the page scrolls, as Elementor's sticky
   setting did with JavaScript. */
.elementor-location-header { position: sticky; top: 0; z-index: 99; }

/* A post's picture behind the title strip. Elementor drew it as a CSS
   background, fixed to the window on a desktop screen; it is a real picture
   here so each article can have its own. */
.be-hero > .be-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (min-width: 1025px) {
  .be-hero-fixed { clip-path: inset(0); }
  .be-hero-fixed > .be-hero-img { position: fixed; width: 100vw; height: 100vh; }
}

/* The CMS's pager, drawn as Elementor's: the page numbers in a centred line,
   fifteen pixels apart (five each side and the space between WordPress's links), the current one as plain text and the rest in the link
   colour. Under /blog/ it reads "« Previous 1 2 3 4 Next »", with the word
   that leads nowhere left as plain text; on a category page only numbers. */
nav.phx-pager:empty { display: none; }
.elementor-widget-posts nav.phx-pager,
.elementor-widget-archive-posts nav.phx-pager {
  font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
  font-weight: var(--e-global-typography-secondary-font-weight);
  text-align: center; font-size: 16px; line-height: 24px;
}
nav.phx-pager button {
  all: unset; display: inline; cursor: pointer; margin: 0 7.5px;
  font: inherit; color: var(--e-global-color-accent, #0366b0);
}
nav.phx-pager button:first-child { margin-left: 0; }
nav.phx-pager button:last-child { margin-right: 0; }
nav.phx-pager button[aria-current] { color: inherit; cursor: default; }
nav.phx-pager button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.elementor-widget-posts nav.phx-pager button[aria-label="Previous page"],
.elementor-widget-posts nav.phx-pager button[aria-label="Next page"] { font-size: 0; line-height: 0; display: inline-block; vertical-align: top; }
.elementor-widget-posts nav.phx-pager button[aria-label="Previous page"]::after { content: "\00ab  Previous"; font-size: 16px; line-height: 24px; }
.elementor-widget-posts nav.phx-pager button[aria-label="Next page"]::after { content: "Next \00bb"; font-size: 16px; line-height: 24px; }
.elementor-widget-posts nav.phx-pager:not(:has([aria-label="Previous page"]))::before { content: "\00ab  Previous"; margin-right: 15px; }
.elementor-widget-posts nav.phx-pager:not(:has([aria-label="Next page"]))::after { content: "Next \00bb"; margin-left: 15px; }

.elementor-widget-archive-posts nav.phx-pager button[aria-label="Previous page"],
.elementor-widget-archive-posts nav.phx-pager button[aria-label="Next page"] { display: none; }
.elementor-widget-archive-posts nav.phx-pager button[aria-label="Previous page"] + button { margin-left: 0; }
.elementor-widget-archive-posts nav.phx-pager button:has(+ [aria-label="Next page"]) { margin-right: 0; }

/* /travel-guide/ lists the six newest articles that are not Food. */
.be-not-food > [data-phx-category~="food"] { display: none; }
.be-not-food > [data-phx-collection-item]:nth-child(n+7 of :not([data-phx-category~="food"])) { display: none; }

/* Pictures in an article. WordPress showed its "large" size, at most 1024
   pixels either way, each in a <figure> with 16px under it; the CMS keeps the
   whole picture inside a paragraph. This draws them the same. */
.elementor-widget-theme-post-content p > img {
  display: block; width: auto; height: auto;
  max-width: min(100%, 1024px); max-height: 1024px;
}
.elementor-widget-theme-post-content p:has(> img) { margin-bottom: 16px; }

/* A long address written out as a link in an article (two posts have them)
   could not break, and pushed the page sideways on a phone, as it did on the
   WordPress site. It breaks where it must now; on a wider screen nothing moves. */
.elementor-widget-theme-post-content a { overflow-wrap: anywhere; }