/* OAM managed — client_app.builder_setup.ensure_builder_settings */
@layer oam-base, oam-global, oam-page;

/* @import url("/assets/client_app/css/oam-tokens.css?v=cfe2796480") layer(oam-base); */
@import url("/assets/client_app/css/oam-pages.css?v=cfe2796480") layer(oam-base);
@import url("/assets/client_app/css/oam-chrome.css?v=cfe2796480") layer(oam-base);

@layer oam-global {
	/* Site-wide overrides for Builder pages. Authored inside the layer so a per-page
	   Client Script (@layer oam-page) beats it, and a per-block style beats both. */
}

/* Undo /assets/builder/reset.css — unlayered, so it must be answered unlayered. */
h1 { font-size: var(--fs-h1); font-weight: 700; margin-bottom: var(--head-gap); }
h2 { font-size: var(--fs-h2); font-weight: 700; margin-bottom: var(--head-gap); }
h3 { font-size: var(--fs-h3); font-weight: 500; margin-bottom: var(--head-gap); }
h4 { font-size: var(--fs-h4); font-weight: 600; margin-bottom: var(--head-gap); }
h5 { font-size: var(--fs-h4); font-weight: 600; margin-bottom: var(--head-gap); }
h6 { font-size: var(--fs-h6); font-weight: 600; margin-bottom: var(--head-gap); }
p + p, .oam-p + .oam-p { margin-top: var(--para-gap); }

/* `a { color: inherit; text-decoration: inherit }` in the reset kills the link colour our
   layered rules set, so links inherit the surrounding text colour and stop reading as links. */
/* Matched through :is(…) so these reach `.__text_block__ a` too. Builder's reset carries
   `.__text_block__ a { text-decoration: underline }` — and `.__text_block__` is on EVERY text
   block Builder renders — so a bare `a` rule at (0,0,1) loses to it and every link on the site
   came out underlined. :is() takes the highest specificity of its arguments, which lifts these
   to (0,1,1) and lets them win. */
:is(a, .__text_block__ a) { color: var(--oam-brand); text-decoration: none; }
:is(a, .__text_block__ a):hover { color: var(--oam-brand-700); }

/* Contextual link colours have to be restated here as well: being unlayered, the rule above
   beats `.oam-footer a` in @layer oam-base at any specificity, so without these every link on
   a dark or coloured surface was repainted brand burgundy and became unreadable. */
.oam-footer :is(a, .__text_block__ a) { color: #e7edf2; }
.oam-footer :is(a, .__text_block__ a):hover { color: #fff; }
:is(.oam-step, .oam-block, .anno) :is(a, .__text_block__ a) { color: inherit; }
/* The navbar and its dropdowns carry their own colours from oam-chrome.css; lifting the base
   link rule to (0,1,1) started overriding them and repainted the whole nav burgundy. */
.hdr2 :is(a, .__text_block__ a) { color: inherit; }
.anno :is(a, .__text_block__ a) { text-decoration: underline; text-underline-offset: 2px; }

/* `img,video { max-width:100%; height:auto }` in the reset overrides any layered height, so
   the footer logo rendered at its natural size — several times too large. */
.oam-footer img { height: 38px; width: auto; }
.nav2__logo img { height: 46px; width: auto; }

/* `button,input,optgroup,select,textarea { margin:0; padding:0 }` in the reset zeroes the
   padding on any CTA authored as a <button> — the text ends up wrapped tight against the
   border while the identical <a class="oam-btn"> beside it looks right. Restated with the
   class so it beats the reset's element selector on specificity as well as layer. */
.oam-btn { padding: .95rem 1.6rem; }
.oam-btn--lg { padding: 1.1rem 2rem; }

/* The reset zeroes list styling and then RE-ENABLES it — `menu,ol,ul { list-style:none }`
   followed by `ol,ul { list-style:revert; padding:revert }`. The second wins, so our layered
   `list-style: none` lost and every verse list grew bullets, sitting hard left while the text
   stayed centred. */
.oam-verse ul, .oam-verse ol { list-style: none; margin: .4rem 0 0; padding: 0; }


/* Manually inserted oam-tokens.css here - Alex, 11 Aug 2026 */

/* ==========================================================================
   OAM brand tokens + fonts — client_app, injected site-wide via
   hooks.web_include_css (loaded before oam-pages.css). Bench-served from
   client_app/public → stable /assets/client_app/… URLs, bypassing dfp
   external storage (which serves uploads at /file/<hash>/…).

   SAFE-GLOBAL: this file + oam-pages.css use ONLY :root vars and namespaced
   .oam-* / .hdr2 / .navband classes. The universal reset + bare-element
   selectors that would fight the webshop's Bootstrap DOM (cerebrum
   Do-Not-Repeat 2026-07-02) are scoped under :where(.oam-site) in oam-pages.css
   — every marketing page wraps its body in <div class="oam-site …">.
   ========================================================================== */

/* --- Self-hosted brand fonts (served from client_app/public/fonts) --- */
@font-face { font-family:"Roca"; src:url("/assets/client_app/fonts/Roca-Bold.woff2") format("woff2"), url("/assets/client_app/fonts/Roca-Bold.woff") format("woff"); font-weight:700; font-style:normal; font-display:swap; }
/* Only Roca-Bold is web-licensed, so it is the ONLY Roca face embedded.
   ⚠ A rule asking for any other Roca weight will therefore render BOLD here, whatever it looks
   like in the mockups. That is not hypothetical: the testimonial quotes asked for weight 400,
   the mockup had an (unlicensed) Roca-Light 300 to fall back to, and the deployed site did not —
   so they shipped bold. Anything needing a lighter weight must use --font-body. framework#115. */
@font-face { font-family:"Manrope"; src:url("/assets/client_app/fonts/Manrope-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("/assets/client_app/fonts/Manrope-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("/assets/client_app/fonts/Manrope-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("/assets/client_app/fonts/Manrope-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Square Peg"; src:url("/assets/client_app/fonts/SquarePeg-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }

/* --- Brand tokens (Brand Guide 2026) — intentional, never decoration -------
   DEFAULTS ONLY, declared at ZERO specificity via :where(). This file is a fallback,
   never an authority: whoever sets a token last must win, regardless of load order.

   Without :where() the client's brand controls are silently dead (bug-205). On a Builder
   page frappe emits /builder_assets/variables.css — the client's Builder Variables, at
   `:root` — and THEN this file. Equal specificity, later wins, so all 30 shared tokens
   were overridden: the client could set burgundy to bright red, variables.css would say
   #ff0000, and the browser would still compute #7c1b55. Invisible, because our defaults
   happened to match the variables' seeded values.

   :where(:root) is (0,0,0), so `:root` in variables.css (0,1,0) and in /oam_brand.css
   (0,1,0) both win, and source order stops mattering. Applied to the WHOLE block, not
   just today's colours, so any token later exposed as a client control works by default. */
:where(:root) {
  --oam-ink:        #2d4b65;   /* navy — text                                */
  --oam-ink-soft:   #51616f;   /* softened navy — secondary text             */
  --oam-muted:      #4a6178;   /* navy-toned supporting text (never grey)    */
  --oam-line:       #ece4e9;   /* warm hairline                              */
  --oam-bg:         #ffffff;
  --oam-bg-alt:     #faf6f8;   /* warm, pink-tinted off-white                */
  --oam-bg-warm:    #f6efe9;   /* warm sand (alt sections)                   */
  --oam-brand:      #7c1b55;   /* burgundy — action                          */
  --oam-brand-700:  #5e0e40;   /* darker burgundy — hover                    */
  --oam-brand-100:  #f4e6ef;   /* soft pink tint                             */
  --oam-pink:       #b36795;
  --oam-mint:       #6db8a3;
  --oam-accent:     #439399;   /* turquoise                                  */

  --font-head:   "Roca", "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:   "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-accent: "Square Peg", "Segoe Script", cursive;

  --fs-hero:    clamp(2.5rem, 5.2vw, 4rem);
  --fs-h1:      clamp(2.25rem, 4vw, 3rem);
  --fs-h2:      clamp(1.875rem, 3vw, 2.25rem);
  --fs-h3:      clamp(1.5rem, 2.2vw, 1.75rem);
  --fs-h4:      1.375rem;
  /* 2026 mockup: H6 is the small burgundy label that opens a section (Manrope SemiBold 36),
     and the Square Peg accent line scales between 30 and 48. */
  --fs-h6:      2.25rem;
  --fs-accent:  clamp(2rem, 4vw, 3rem);
  --fs-body-lg: 1.25rem;
  --fs-body:    clamp(1.0625rem, 0.6vw + 0.9rem, 1.125rem);
  --fs-small:   1rem;
  --fs-caption: 0.875rem;

  --measure:     68ch;
  --lh-body:     1.65;
  --lh-head:     1.12;
  --para-gap:    1.5rem;
  --head-gap:    1.4rem;
  --section-gap: clamp(2.5rem, 4.5vw, 3.75rem);

  --maxw:      1180px;
  --gutter:    clamp(1.25rem, 5vw, 3rem);
  --radius:    16px;
  /* Section panels (2026 mockup): sections may render as inset cards with generous rounding
     instead of full-width colour bands. One value governs every panel on the site. */
  --oam-panel-radius: 28px;
  --oam-panel-inset:  clamp(1rem, 4vw, 3rem);
  --radius-sm: 10px;
  /* Brand palette (OAM Brand Colours Web.jpg) — five hues x three tones. Named so a section's
     background is a CHOICE FROM THE BRAND, never an arbitrary colour. */
  --oam-burgundy:      #7c1b55;  --oam-burgundy-mid: #c397b1;  --oam-burgundy-pale: #efe2ea;
  --oam-rose:          #b36795;  --oam-rose-mid:     #efe0e9;  --oam-rose-pale:     #efe2ea;
  --oam-green:         #6db8a3;  --oam-green-mid:    #a8e4da;  --oam-green-pale:    #e6f7f5;
  --oam-teal:          #439399;  --oam-teal-mid:     #a2d8db;  --oam-teal-pale:     #d1eced;
  --oam-navy:          #2d4b65;  --oam-navy-mid:     #abb8c2;  --oam-navy-pale:     #ebeef1;

  --shadow:    0 1px 2px rgba(45,75,101,.05), 0 18px 40px rgba(45,75,101,.10);
  --shadow-sm: 0 1px 2px rgba(45,75,101,.06), 0 6px 18px rgba(45,75,101,.07);
  --transition: 200ms cubic-bezier(.2,.6,.2,1);
}

/* Global baseline: zero the browser's default body margin so the sticky header /
   announcement bar sits flush to the top (the mockup's `* { margin:0 }` did this;
   our reset is scoped under .oam-site, and body is outside it). Safe site-wide —
   Bootstrap/Frappe already zero body margin, so this only fixes bare renders.

   :where() for the same reason as the token block, plus one of its own: this is the only
   bare-element selector we ship, and the Builder EDITOR loads this sheet into its own
   document so the canvas shows the real design. At (0,0,0) it cannot fight Builder's UI. */
:where(body) { margin: 0; }