/* ============================================================
   PMW Plus - global brand foundation
   Tokens + reset + base elements + shared page-section components, ported from
   html/assets/brand-dark.css (dark direction). Loaded site-wide via
   includes/scripts-styles.php. This is now the site's BASE stylesheet: the
   inherited Danish dist/css/styles.css is no longer enqueued (it hardcoded
   Nunito + its own reset/container and fought the ported section styling).
   Nav is styled by pmw-header.css; footer is still on the inherited markup and
   is pending its own reskin.
   Class names are snake_case per house convention (docs/coding-conventions.md).
   ============================================================ */

:root{
  --navy:#2C3949; --navy-deep:#1f2935; --navy-soft:#3a4858;
  --ecru:#F1EDE2; --ecru-deep:#e8e3d3; --paper:#F8F5EC;
  --smoke:#556579; --smoke-light:#8794a4;
  --sky:#A7B5C6; --sky-soft:#cdd5df;
  --copper:#AF5A2F; --copper-light:#d68e5f; --copper-deep:#7a3e20; --copper-pale:#f3d9c7;
  --copper-gradient:linear-gradient(225deg,#cb7f58 0%,#f3b491 25%,#af5a2f 50%,#f3b390 75%,#a8572d 100%);
  --copper-gradient-bright:linear-gradient(225deg,#d88e6a 0%,#f9c4a4 25%,#c06d3e 50%,#f9c3a3 75%,#b9633c 100%);
}

/* ---- Reset + base elements (verbatim from brand-dark.css).
   Previously supplied by the inherited dist/css/styles.css, which is no longer
   enqueued - this is now the foundation layer. Global on purpose so nav, footer
   and page content share ONE baseline (wp-admin is excluded upstream by the
   is_admin() guard in includes/scripts-styles.php, so this never hits the editor). */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--navy);color:var(--ecru);font-family:'Poppins',sans-serif;font-weight:300;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none}

/* Poppins site-wide. Reasserts Poppins on the specific element selectors the
   inherited skin used to hardcode to Nunito, in case any of that CSS lingers in
   a plugin/widget. Harmless now that styles.css is dequeued. */
body, html, input, select, option, label, textarea, li, p, span, a,
body h1, body h2, body h3, body h4, body h5, body h6,
body button, body input[type=submit]{
  font-family:'Poppins', sans-serif;
}

/* Page canvas - scoped to the flex-content wrapper so wp-admin, nav and footer
   (still on the inherited skin until reskinned) are unaffected. */
.page_wrapper{background:var(--navy);color:var(--ecru);font-family:'Poppins',sans-serif;font-weight:300;line-height:1.55;-webkit-font-smoothing:antialiased}
.page_wrapper img{max-width:100%;display:block}
.page_wrapper a{color:inherit;text-decoration:none}

/* Container - matches the design's full-bleed sections (brand-dark.css uses
   `section{padding:120px 48px}` with NO max-width cap; its `.container` class is
   never used in the markup). So .container = full width + 48px side padding
   (24px on mobile); it is NOT centred to 1280. Per-element max-widths (lead
   copy, centred CTA blocks, etc.) live in the individual section CSS, exactly
   as the mockups do. The ACF padding system in page.php targets > .container. */
.page_wrapper .container{width:100%;padding-left:24px;padding-right:24px}
.page_wrapper .container_small{width:100%;max-width:820px;margin:0 auto;padding-left:24px;padding-right:24px}
@media(min-width:901px){
  .page_wrapper .container,.page_wrapper .container_small{padding-left:48px;padding-right:48px}
}

/* Headings - em spans render as the soft sky accent, not italic */
.page_wrapper h1{font-size:clamp(48px,6vw,92px);font-weight:600;line-height:1;letter-spacing:-0.03em;color:var(--ecru)}
.page_wrapper h1 em{font-style:normal;color:var(--sky);font-weight:300}
.page_wrapper h2{font-size:clamp(36px,4.2vw,60px);font-weight:600;line-height:1.06;letter-spacing:-0.025em;color:var(--ecru)}
.page_wrapper h2 em{font-style:normal;color:var(--sky);font-weight:300}
.page_wrapper h3{font-size:22px;font-weight:500;color:var(--ecru);letter-spacing:-0.01em;line-height:1.25}

/* Eyebrow kicker with leading gradient dash */
.page_wrapper .eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--copper-light);font-weight:500;display:inline-flex;align-items:center;gap:14px}
.page_wrapper .eyebrow::before{content:"";width:32px;height:1px;background:var(--copper-gradient)}

/* Lead paragraph */
.page_wrapper .lead{font-size:19px;line-height:1.65;color:rgba(241,237,226,0.72);font-weight:300;max-width:540px}

/* Copper gradient text (accent words / hero dot) */
.page_wrapper .copper_grad_text,.page_wrapper .copper_dot{background:var(--copper-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}

/* Buttons - keep the theme's snake_case class names, span-wrapped labels */
.page_wrapper .btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:60px;font-size:14px;font-weight:500;letter-spacing:.03em;transition:all .25s;border:1px solid transparent;cursor:pointer}
.page_wrapper .btn_primary{background:var(--copper-gradient);color:var(--ecru);border-color:transparent;box-shadow:0 4px 14px rgba(175,90,47,0.35)}
.page_wrapper .btn_primary:hover{background:var(--copper-gradient-bright);transform:translateY(-2px);box-shadow:0 8px 22px rgba(175,90,47,0.5)}
.page_wrapper .btn_secondary{background:transparent;color:var(--ecru);border-color:rgba(241,237,226,0.25)}
.page_wrapper .btn_secondary:hover{border-color:var(--ecru);background:rgba(241,237,226,0.05)}
.page_wrapper .btn .arrow{display:inline-block;transition:transform .25s}
.page_wrapper .btn:hover .arrow{transform:translateX(4px)}

/* Breadcrumb */
.page_wrapper .breadcrumb{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(241,237,226,0.6);font-weight:400;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page_wrapper .breadcrumb a{color:rgba(241,237,226,0.6);transition:color .2s}
.page_wrapper .breadcrumb a:hover{color:var(--copper-light)}
.page_wrapper .breadcrumb .sep{opacity:.4}
.page_wrapper .breadcrumb .current{color:var(--copper-light)}
/* Yoast breadcrumb output: current item = .breadcrumb_last; links may be span-wrapped. */
.page_wrapper .breadcrumb .breadcrumb_last{color:var(--copper-light)}
.page_wrapper .breadcrumb span a{color:rgba(241,237,226,0.6)}
.page_wrapper .breadcrumb span a:hover{color:var(--copper-light)}

/* Badge (overlaid on hero imagery) */
.page_wrapper .badge{background:var(--ecru);color:var(--navy);padding:14px 20px;border-radius:4px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.page_wrapper .badge strong{display:block;width:fit-content;font-size:28px;line-height:1;letter-spacing:-0.02em;margin-bottom:4px;text-transform:none;background:var(--copper-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Card - shared by the card-grid sections (feature_cards etc.) */
.page_wrapper .card{position:relative;overflow:hidden;background:rgba(241,237,226,0.04);border:1px solid rgba(241,237,226,0.1);border-radius:10px;padding:34px 30px;transition:all .3s}
.page_wrapper .card::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--copper-gradient);transition:width .4s}
.page_wrapper .card:hover{transform:translateY(-4px);background:rgba(241,237,226,0.07);border-color:rgba(167,181,198,0.25)}
.page_wrapper .card:hover::before{width:100%}
.page_wrapper .card_icon{width:56px;height:56px;border-radius:50%;background:var(--copper-gradient);color:var(--ecru);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;margin-bottom:24px}
/* Off-canvas panels: the journey-roadmap plan-summary panel is styled by its
   section CSS which is injected in the BODY (after the element has painted), so
   without a head-level hidden state it flashes/slides in on first paint. Hide it
   here (head stylesheet, pre-paint); the section CSS then takes over with the
   matching transform so there is nothing to animate on load. */
.plan-summary{transform:translateX(100%);visibility:hidden}
.plan-summary-overlay{opacity:0;visibility:hidden}
.page_wrapper .card h3{margin-bottom:12px;font-size:21px;color:var(--ecru)}
.page_wrapper .card p{font-size:14.5px;color:rgba(241,237,226,0.65);line-height:1.65}
.page_wrapper .card .more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:13px;color:var(--copper-light);font-weight:500;letter-spacing:.04em}
.page_wrapper .card .more .arrow{transition:transform .25s}
.page_wrapper .card .more:hover .arrow{transform:translateX(4px)}

/* Deep-navy section background helper */
.page_wrapper .section_deep{background:var(--navy-deep)}