/* ---------------------------------------------------------------
   WordPress adaptation layer.

   The generated per-page stylesheet is a verbatim copy of the mockup's
   own CSS, prefixed with .mewaio three times so it outranks Elementor's
   inline widget CSS. Anything needed ONLY because the page is rendered
   by Elementor lives here, and only here.

   SPECIFICITY: because the generated sheet carries three .mewaio classes,
   every rule here that must beat it needs at least as much weight. Rules
   written with one .mewaio (or none) silently LOSE even though this file
   loads later -- that has now broken the mobile nav links and the editor
   reveal once each. The convention: match the three, or don't bother.

   The exception is section 1, which sets only custom properties that the
   mockup never touches, so it cannot collide.
   --------------------------------------------------------------- */

/* --- 1. Every generated container carries `mk`, so one rule neutralises
   Elementor's container defaults for all of them -- including the ones the
   mockup leaves unclassed. Only the custom PROPERTIES are set, never the
   CSS: `.e-con{display:var(--display)}` is one class, so wherever the
   mockup states a display (`.wrong{display:grid}`, `.sec2{display:grid}`)
   its own rule wins at four classes and this default never applies.

   An earlier version listed container classes by name and silently missed
   sec2, asec, fb and the unclassed wrappers, which left them flex and threw
   column widths out across four pages. ---------------------------- */
.e-con.mk{
  --display:block;--width:100%;--content-width:none;--gap:0;--text-align:inherit;
  --padding-block-start:0;--padding-block-end:0;
  --padding-inline-start:0;--padding-inline-end:0;
}

/* --- 2. site-2 styles cards as `.wrong article`; Elementor emits a div,
   so the same treatment is offered under .card. These DO restate mockup
   values, deliberately -- they are the substitute for a selector that can
   never match. ---------------------------------------------------- */
.mewaio.mewaio.mewaio .e-con.card{display:block;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:26px 28px;box-shadow:var(--sh1)}
.mewaio.mewaio.mewaio .wrong .card h3{color:var(--ink);font-size:17.5px;margin-bottom:10px}
.mewaio.mewaio.mewaio .wrong .card p{font-size:14.5px;color:var(--ink-2);line-height:1.58;margin:0}
.mewaio.mewaio.mewaio .wrong .card .n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.12em;color:var(--cyan);display:block;margin-bottom:10px}
.mewaio.mewaio.mewaio .wrong .card .n>*{font:inherit;color:inherit;letter-spacing:inherit;margin:0}
/* The card is always white, so its heading is always --ink -- including
   inside a navy band, where rule 3 below would otherwise inherit #fff.
   Needs more weight than `body.mewaio x3 .elementor h3{color:inherit}`. */
.mewaio.mewaio.mewaio .wrong article h3,
.mewaio.mewaio.mewaio .wrong .card h3,
.mewaio.mewaio.mewaio .wrong .card h3.elementor-heading-title{color:var(--ink)}
/* A line of air above the link / THE CATCH block. */
.mewaio.mewaio.mewaio .wrong article .fix,
.mewaio.mewaio.mewaio .wrong .card .fix{margin-top:16px}

/* --- 3. Astra and Elementor both colour headings explicitly; the mockup
   expects them to inherit --ink (and #fff inside a navy band). Elementor's
   widget-heading CSS loads after this file, so this needs the extra weight
   to win. --------------------------------------------------------- */
body.mewaio.mewaio.mewaio .elementor-widget-heading .elementor-heading-title{color:inherit}
body.mewaio.mewaio.mewaio .elementor h1,body.mewaio.mewaio.mewaio .elementor h2,
body.mewaio.mewaio.mewaio .elementor h3,body.mewaio.mewaio.mewaio .elementor h4,
body.mewaio.mewaio.mewaio .elementor h5,body.mewaio.mewaio.mewaio .elementor h6{color:inherit}

/* --- 3b. Elementor rebuilds .wrap as a flex container, which adds a 20px
   gap and stops the blocks' own margins collapsing, so every stacked gap
   comes out larger than designed. Block display restores both. -------- */
.mewaio.mewaio.mewaio .wrap{display:block}

/* --- 4. Elementor wraps every widget; don't let the wrapper add space. */
.mewaio.mewaio.mewaio .elementor-widget:not(:last-child){margin-block-end:0}

/* --- 4b. Rule 4 above strips margin-block-end from every non-last widget,
   which also removes the eyebrow's own margin. Put it back. Must sit after
   rule 4: the selectors tie on specificity, so source order decides. */
.mewaio.mewaio.mewaio .sec2 > .eyebrow{margin-block-end:14px}
.mewaio.mewaio.mewaio .shead .eyebrow{margin-block-end:13px}
/* Same story for the hero eyebrows, which rule 4 also strips. Values mirror
   the authored cascade: .hero .eyebrow is 20px, .dash-copy .eyebrow 15px. */
.mewaio.mewaio.mewaio .hero .eyebrow{margin-block-end:20px}
/* Home hero runs tighter at 10px; must follow the .hero rule above, which it
   ties with on specificity. Mirrors .hero-bleed .eyebrow in index.html. */
.mewaio.mewaio.mewaio .hero-bleed .eyebrow{margin-block-end:10px}
/* Below 940 the home hero is a flex column with a 32px gap, which carries the
   spacing on its own; rule 4 already zeroes the widget, so just do not put the
   10px back. Mirrors .hero-bleed .eyebrow{margin-bottom:0} in index.html. */
@media(max-width:940px){.mewaio.mewaio.mewaio .hero-bleed .eyebrow{margin-block-end:0}}
.mewaio.mewaio.mewaio .dash-copy .eyebrow{margin-block-end:15px}
/* Below the breakpoint the card heroes stack and sit alongside the plain
   ones, whose eyebrow is 20px. Match, so the two hero types read the same.
   Has to live here: the page sheet's rule ties on specificity and loses to
   the 15px above on source order. */
@media(max-width:980px){
  .mewaio.mewaio.mewaio .dash-copy .eyebrow{margin-block-end:20px}
}
/* .shead--offset is the only head variant with a grid row-gap (20px), so the
   eyebrow margin above would add to it and give 33px. Pull it back to 13. */
.mewaio.mewaio.mewaio .shead--offset .eyebrow{margin-block-end:-7px}
@media(max-width:820px){.mewaio.mewaio.mewaio .shead--offset .eyebrow{margin-block-end:0}}

/* --- 5. The editor canvas does not run site.js, so every .rv element sits
   at opacity:0 and the page looks empty while editing. Reveal them for the
   editor only; the frontend keeps the real scroll animation.
   .elementor-editor-active and .mewaio are both on <body>, so they chain
   without a space -- giving 4 classes + an element, which beats the
   generated sheet's `.mewaio.mewaio.mewaio .rv` at 4 classes. ------- */
body.elementor-editor-active.mewaio.mewaio.mewaio .rv{opacity:1;transform:none;transition:none}
body.elementor-editor-active.mewaio.mewaio.mewaio .heat .hc{opacity:1}
body.elementor-editor-active.mewaio.mewaio.mewaio .growmap circle{opacity:1;transform:none}

/* Script-off is handled by the <noscript> block printed from functions.php,
   not here: nothing ever put a `no-js` class on <body>, so the rule that used
   to sit at this line never matched anything. */

/* ---- an Elementor widget wrapper is a containing block --------------------
   Elementor sets position:relative on every widget wrapper. Anything inside
   one that is absolutely positioned therefore resolves against the WRAPPER,
   not against the section. The navy band's background texture is
   `.tex{position:absolute;height:100%}`, and the wrapper has no height of its
   own, so 100% resolved to 0 and the texture vanished -- present in the DOM,
   correct in every other respect, zero pixels tall.

   Making that one wrapper transparent to positioning puts .tex back on
   .band--navy, which is position:relative in the mockup's own stylesheet. */
body.mewaio.mewaio.mewaio .band--navy > .elementor-widget-html{position:static}

/* ---- .fb.rev: order has to go on the grid ITEM --------------------------
   `.fb` is a grid of two children. In the mockup those children are
   .fb-copy and .fb-media, so `.fb.rev .fb-media{order:-1}` flips them.

   In WordPress .fb-copy converts to a native container and keeps its class,
   but .fb-media is carried as an HTML widget -- so the grid item is
   Elementor's `.elementor-widget-html` wrapper and .fb-media sits inside it.
   The mockup's rule then sets `order` on something that is not a grid item
   and does nothing at all, silently: every reversed block rendered the
   wrong way round. Put the order on the wrapper instead. */
body.mewaio.mewaio.mewaio .fb.rev > .elementor-widget-html{order:-1}

/* ---- .shead--offset: grid placement has to go on the wrappers -----------
   The Continuity block places its children explicitly -- heading in column 1
   row 2, then three paragraphs staggered across rows 3 and 4. In WordPress
   each child is wrapped in an Elementor widget, so the grid items are the
   wrappers and the mockup's `h2` and `p:nth-of-type()` rules place nothing.
   The block silently fell back to auto-placement: a plain 2x2 grid.

   Addressed by position rather than by type, because the eyebrow is also a
   heading widget and would otherwise be caught by `.elementor-widget-heading`.
   Children in order: 1 eyebrow (its own rule works -- gen_pages puts the
   class on the wrapper), 2 heading, 3-5 paragraphs. */
body.mewaio.mewaio.mewaio .shead--offset > .elementor-element:nth-child(2){grid-column:1;grid-row:2}
body.mewaio.mewaio.mewaio .shead--offset > .elementor-element:nth-child(3){grid-column:1;grid-row:3 / span 2}
body.mewaio.mewaio.mewaio .shead--offset > .elementor-element:nth-child(4){grid-column:2;grid-row:3}
body.mewaio.mewaio.mewaio .shead--offset > .elementor-element:nth-child(5){grid-column:2;grid-row:4}
/* The reset needs :nth-child(n) to match the specificity of the four
   placement rules above -- a media query adds none, so without it the
   reset loses, the children keep grid-column:2, and the grid invents a
   second ~119px column at phone width: one word per line, and items
   sharing a row drawn on top of each other. */
@media(max-width:820px){
  body.mewaio.mewaio.mewaio .shead--offset > .elementor-element:nth-child(n){grid-column:auto;grid-row:auto}
}

/* --- 9. .boundary is a claim + caveat pair: the first paragraph carries the
   weight, the last is the quiet qualifier. Elementor gives every <p> its own
   widget container, so BOTH paragraphs satisfy .boundary p:last-child and the
   claim line silently loses its treatment. Restore it on every paragraph but
   the one in the last widget. --------------------------------------------- */
.mewaio.mewaio.mewaio .boundary .elementor-widget:not(:last-child) p{
  font-weight:700;letter-spacing:-.02em;font-size:clamp(17px,2vw,21px);
  line-height:1.4;max-width:46ch
}