/*
Theme Name: BMN Well-Made Trip
Theme URI: https://wellmadetrip.com
Author: The Well-Made Trip
Description: Premium multi-national travel guide. RTL-capable from the first line, GA4-tagged,
  paid-placement slot with disclosure baked into the component, price stamps enforced.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.2
Text Domain: bmn-wellmadetrip
*/

/* ---------------------------------------------------------------------------
   The palette, type scale and shell come from assets/house-system.css. Nothing below
   redeclares a token; this file only adds components specific to this title.
   RTL: logical properties only (margin-inline / padding-inline / text-align:start).
   --------------------------------------------------------------------------- */

/* featured partner slot: disclosure is IN the component, never sponsor copy  */
.featured-partner{border:1px solid var(--line);border-inline-start:4px solid var(--brass);
  border-radius:6px;background:var(--panel);padding:16px 18px;margin-block:26px}
.featured-partner .fp-label{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);font-weight:700;margin-block-end:6px}
.featured-partner .fp-empty{color:var(--muted);font-size:15px;margin:0}
.featured-partner .fp-disclosure{font-family:var(--sans);font-size:12px;color:var(--muted);
  margin-block-start:8px;padding-block-start:8px;border-block-start:1px dashed var(--line)}

/* price stamps — a price without a date fails the build; render it visibly */
.price{font-weight:700;white-space:nowrap}
.price .as-of{font-family:var(--sans);font-weight:400;font-size:12px;color:var(--muted);
  margin-inline-start:6px}

/* stay module + transit block — required inside 300 words on every food page  */
.stay-module,.transit-block{border:1px solid var(--line);border-radius:6px;background:var(--panel);
  padding:16px 18px;margin-block:22px}
.stay-module h3,.transit-block h3{font-size:17px;margin-block-end:6px}
.stay-module p,.transit-block p{margin:0;color:var(--muted);font-size:15.5px}

footer.site{margin-block-start:64px;border-block-start:3px double var(--line);
  padding-block:24px 48px;font-size:14px;color:var(--muted)}
footer.site .disclosure{max-width:68ch}

/* the logo is a link but must not read as one */
.topbar .logo,.topbar .logo:hover,.topbar .logo:focus-visible{text-decoration:none;color:inherit}
.topbar .logo .wm{text-decoration:none}
/* cards render without a photo until real imagery exists */

/* Trust labels need AA contrast at small sizes; brand token untouched for display type. */
.eyebrow,.verif,.capnote{color:#6f5620}
@media (prefers-color-scheme:dark){.eyebrow,.verif,.capnote{color:#e0bd72}}
/* independence/disclosure line must NOT vanish on phones — that is where travel is read */
.indep{display:inline !important;font-size:.62rem}
@media (max-width:640px){.indep{display:block !important;margin-block-start:.25rem}}

/* consent banner */
.consent{position:fixed;inset-inline:0;bottom:0;z-index:9000;display:flex;flex-wrap:wrap;
  gap:10px 16px;align-items:center;justify-content:center;padding:12px 16px;
  background:var(--ink);color:var(--ground);font-family:var(--sans);font-size:13.5px}
.consent p{margin:0;max-width:60ch}
.consent button{font:inherit;font-weight:600;padding:.4rem .9rem;border-radius:6px;
  border:1px solid var(--brass);background:var(--brass);color:#1a1613;cursor:pointer}
.consent button.ghost{background:transparent;color:var(--ground)}

/* keyboard access: the theme shipped with no authored focus styles at all */
a:focus-visible,button:focus-visible,.cardlink:focus-visible{
  outline:3px solid var(--claret);outline-offset:2px;border-radius:3px}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:9999;
  background:var(--ink);color:var(--ground);padding:.6rem 1rem}
.skip:focus{inset-inline-start:0}

/* The independence claim measured 1.44:1 in dark mode and was display:none below 820px — the
   one sentence a sceptical reader most needs, invisible exactly where travel is read. */
/* .indep lives INSIDE the dark topbar, so it must take the BAR foreground, not the page
   foreground. Setting it to var(--fg) made it dark ink on a dark bar — invisible in light mode
   and barely legible in dark. The original bug was contrast; my first fix swapped one contrast
   failure for another. */
.indep{color:var(--bar-fg) !important;opacity:.82;font-size:.66rem;letter-spacing:.08em}
@media (max-width:820px){
  .mainnav{display:flex !important;flex-wrap:wrap;gap:.5rem 1rem;width:100%;
    order:3;padding-block-start:.5rem;border-block-start:1px solid var(--bar-line)}
  .indep{display:block !important;order:4;width:100%;padding-block-start:.35rem}
  .bar-in{flex-wrap:wrap}
}

/* ============================================================================
   CONTAINERS — the house recipe, taken from the Locatrs system rather than
   invented. Every wrapper there (.bar-in, .feed, .utility, .ib-in, .foot-in,
   .fine) is the same shape:
       max-width:1240px; margin:0 auto; padding:<vertical> clamp(16px,4vw,40px)
   .hero and .feed inherited it. The article body, the FAQ block and page bodies
   never had a container at all, so copy ran flush to the viewport edge and the
   measure was unbounded on wide screens.
   ============================================================================ */
.article .body,
.page .body,
.article > .prose,
.hero-copy{
  max-width:1240px;
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,40px);
}

/* Reading measure. 1240px is the SHELL width; running prose at 1240px is
   unreadable, so the text column is capped while the container stays aligned
   with the masthead and the card grid above it. */
.article .body > *,
.page .body > *{
  max-width:72ch;
}
.article .body,
.page .body{
  padding-block:clamp(1.5rem,3vw,2.4rem) clamp(2rem,4vw,3.2rem);
  font-size:1.05rem;
  line-height:1.72;
}
.article .body p{margin:0 0 1.15em}
.article .body h2{
  margin-block:2.2em .5em;
  font-size:clamp(1.35rem,2.4vw,1.75rem);
  line-height:1.25;
}
.article .body h3{margin-block:1.8em .4em;font-size:clamp(1.1rem,1.8vw,1.28rem)}
.article .body ul,.article .body ol{margin:0 0 1.15em;padding-inline-start:1.4em}
.article .body li{margin-block:.35em}
.article .body a{text-underline-offset:.18em}

/* the Q&A block was inheriting nothing — same container, visually separated */
.article .body .faq{
  margin-block-start:2.6rem;
  padding-block-start:1.6rem;
  border-block-start:1px solid var(--line);
}
.article .body .faq h2{margin-block-start:0}

/* provenance line sits under the body, not floating against the edge */
.article .body .provenance{
  color:var(--muted);
  font-size:.94rem;
  font-style:italic;
}

/* the related feed already uses .feed, which carries the house recipe — just
   give it a rule above it so it reads as a separate zone */
.feed.related{border-block-start:1px solid var(--line);margin-block-start:1rem}

/* hero copy on articles and pages needs the same left edge as everything else */
.hero .hero-copy{padding-inline:0}
.hero{padding-inline:clamp(16px,4vw,40px)}

/* ----------------------------------------------------------------------------
   .hero in the house system is `grid-template-columns:1.02fr 1fr` — built for
   copy beside a photograph. This publication has no photography yet, so the
   second column sat empty and squeezed every headline into roughly half the
   available width, then wrapped it over three lines. Single column until there
   is an image to put beside it.
   ---------------------------------------------------------------------------- */
.article .hero,
.page .hero,
body:not(.home) .hero{
  grid-template-columns:1fr;
  padding-block:clamp(1.8rem,4vw,2.8rem) 0;
}
.article .hero .hero-copy,
.page .hero .hero-copy{max-width:none}

/* Headline should use the measure, not the full 1240px shell — but it was being
   held to roughly 40%. Give it a real line length. */
.article .hero h1,
.page .hero h1{max-width:20ch;margin-block-end:.35em}
.article .hero .dek{max-width:52ch;font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted)}

/* the byline was floating in ~100px of dead space created by the hero's bottom
   padding stacking with the body's top padding */
.article .hero .capnote{margin-block-start:.9rem}
.article .body{padding-block-start:clamp(1rem,2vw,1.5rem)}
.page .body{padding-block-start:clamp(1rem,2vw,1.5rem)}

/* About and the other standalone pages read as documents, not as feeds */
.page .hero h1{max-width:24ch}
.page .body > *{max-width:70ch}

/* headline was centring while its own body copy ran left — the two must share an edge */
.article .hero .hero-copy,
.page .hero .hero-copy{margin-inline:0;text-align:start}
.article .hero h1,.page .hero h1,
.article .hero .dek,.page .hero .dek,
.article .hero .eyebrow,.page .hero .eyebrow,
.article .hero .capnote{margin-inline-start:0;text-align:start}
.page .hero{padding-block-end:0}
/* About and Privacy already state the monetisation position in full; the footer repeating it
   two inches lower reads as duplication rather than as reinforcement. */
.foot-terse .foot-in p:not(.capnote){display:none}