/* ==========================================================================
   chrome.css — shared v3a chrome + design-system layer (SINGLE SOURCE).
   Linked after oammethod.css by every navband page. Holds: the navband header
   + announcement bar, the key.jpeg type/colour system, landing components,
   the members-area (account) layout, and the open-acceptance pathway.
   The header/footer MARKUP + nav JS live in chrome.js.
   ========================================================================== */

/* ---- page-home only ---- */
    .page-home__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
    .page-home__deck { display: grid; place-items: center; gap: 1rem; }

    /* ================= NEW HEADER (v3a nav concept) ================= */
    /* --navband-radius: adjust the roundness of all navband corners here (single source). */
    .hdr2 { position: sticky; top: 0; z-index: 500; background: var(--oam-bg);
            border-bottom: 1px solid var(--oam-line); --navband-radius: 12px; }

    /* --- Layer 1: turquoise announcement bar (hides on scroll down, returns at top) --- */
    .anno { background: var(--oam-accent); color: #fff; text-align: center;
            font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 600;
            letter-spacing: .015em; line-height: 1.3; overflow: hidden; max-height: 2.6rem;
            padding: .5rem 1rem; transition: max-height .3s ease, padding .3s ease, opacity .25s ease; }
    .anno a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
    /* small-print page tag on the announcement banner — flags which page this banner is */
    .anno__page { font-weight: 700; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-right: .15rem; }
    body.anno-hidden .anno { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }

    /* --- Layer 2: sticky nav row: left links / centre logo / right (Journal + icons) --- */
    .nav2 { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
            min-height: 74px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
    .nav2__left { display: flex; align-items: center; gap: clamp(.7rem, 1.5vw, 1.5rem); }
    .nav2__logo { justify-self: center; display: inline-flex; }
    .nav2__logo img { height: 46px; display: block; }
    /* Journal hugs the logo (left of this column); the icons group hugs the far right */
    .nav2__right { display: flex; align-items: center; justify-content: space-between; gap: clamp(.7rem, 1.5vw, 1.5rem); }
    .nav2__icons { display: flex; align-items: center; gap: .4rem; }

    .navlink { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small);
               color: var(--oam-ink); letter-spacing: .01em; display: inline-flex; align-items: center;
               gap: .3rem; padding: .5rem 0; cursor: pointer; background: none; border: 0; white-space: nowrap; }
    .navlink:hover { color: var(--oam-brand); }
    /* caret: hidden by default, fades in on hover (keeps its space, so no layout shift) */
    .navlink__caret { flex: 0 0 auto; width: 14px; height: 14px; opacity: 0; transition: opacity var(--transition); }
    .hasmenu.is-open > .navlink .navlink__caret { opacity: 1; }

    .nav2__icon { color: var(--oam-ink); display: inline-flex; align-items: center; justify-content: center;
                  width: 40px; height: 40px; border-radius: 10px; transition: color var(--transition), background var(--transition); }
    .nav2__icon:hover { color: var(--oam-brand); background: var(--oam-bg-alt); }
    .nav2__icon svg { width: 22px; height: 22px; }

    /* ================= THE NAVBAND (mega-menu; content-width, centred under its trigger) ================= */
    /* Brand-mapped from the howfarfromhome grey band:
         band bg   -> #ecf6f3 (pale mint tint of the brand's turquoise/mint family, NOT cold grey)
         top edge  -> 2px turquoise accent ; dividers -> navy @ 14%
         headings  -> navy UPPERCASE BOLD ; links -> navy, burgundy on hover
       Width = content ("only as wide as necessary"); corners rounded via --navband-radius (on .hdr2);
       horizontal position (centred under the trigger, clamped on-screen) is set by JS at the bottom. */
    .hasmenu { position: static; display: inline-flex; align-items: center; }
    .navband { position: absolute; top: 100%; left: 1rem;  /* left is overridden by JS (centre-under-trigger) */
               width: max-content; max-width: calc(100vw - 16px);
               background: #ecf6f3; border: 1px solid rgba(45,75,101,.08); border-top: 2px solid var(--oam-accent);
               border-radius: var(--navband-radius); box-shadow: var(--shadow); z-index: 20;
               opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
               transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
    /* opened via JS (.is-open) with a small close-delay, so the mouse can cross the
       gap between the button and the panel without it snapping shut */
    .hasmenu.is-open > .navband { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

    .navband__inner { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, max-content);
                      padding: 1.5rem 1.7rem 1.7rem; }
    .navband__col { padding-inline: 1.4rem; border-left: 1px solid rgba(45,75,101,.14); min-width: 0; }
    .navband__col:first-child { border-left: 0; padding-left: 0; }
    /* client rule: navband column headers are ALWAYS uppercase + bold */
    .navband__h { font-family: var(--font-body); font-weight: 700; font-size: .8rem;
                  letter-spacing: .12em; text-transform: uppercase; color: var(--oam-ink);
                  margin: 0 0 1rem; }
    .navband__links { display: flex; flex-direction: column; gap: .55rem; }
    .navband__links a { font-family: var(--font-body); font-size: var(--fs-small); color: var(--oam-ink);
                        width: fit-content; padding: .1rem 0; line-height: 1.35; }
    .navband__links a:hover { color: var(--oam-brand); text-decoration: underline;
                              text-decoration-color: var(--oam-accent); text-underline-offset: 4px; }

    @media (max-width: 860px) {
      .nav2 { grid-template-columns: auto 1fr auto; }
      .nav2__left { display: none; }            /* mobile nav = a later pass */
      .navband__inner { display: flex; flex-direction: column; gap: 1.4rem; }
      .navband__col { border-left: 0; padding-left: 0; padding-inline: 0; }
    }

    /* ================= LANDING COPY COMPONENTS (index-v2 §1–§8) ================= */
    /* Verse — the brand's short-line, meditative body copy. Tighter than default
       paragraphs; stanzas are <p>, in-stanza breaks are <br>. */
    .oam-verse { max-width: 48ch; margin: var(--head-gap) auto 0; }
    .oam-verse p { color: var(--oam-ink-soft); max-width: none; }
    .oam-verse p + p { margin-top: var(--para-gap); }
    .oam-verse .soft { color: var(--oam-muted); }
    .oam-verse em { font-style: italic; color: var(--oam-ink); }
    .oam-verse ul { list-style: none; margin: .4rem 0 0; padding: 0; }
    .oam-verse ul li { color: var(--oam-ink-soft); }
    .oam-verse ul li + li { margin-top: .25rem; }

    /* Sub-headline that closes a copy block ("This is how you experience OAM.") */
    .oam-subhead { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3);
                   color: var(--oam-ink); margin-top: 2.5rem; }

    /* Blocks (table) — rounded, mint-tinted cards laid horizontally across the page.
       Mint/turquoise family (the doc renders the "Blocks (table)" label in that colour);
       navy bold title on a pale mint fill = WCAG-AA. Text blocks are NEVER numbered. */
    .oam-blocks { display: grid; gap: 1rem; margin-top: 2.5rem;
                  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
    .oam-block { background: color-mix(in srgb, var(--oam-mint) 12%, #fff);
                 border: 1px solid color-mix(in srgb, var(--oam-mint) 26%, #fff);
                 border-radius: var(--radius); padding: 1.4rem 1.3rem;
                 display: flex; flex-direction: column; gap: .5rem; text-align: left; }
    .oam-block__t { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h4);
                    color: var(--oam-ink); line-height: 1.2; }
    .oam-block p { color: var(--oam-ink-soft); font-size: var(--fs-small); max-width: none; margin: 0; }

    /* Testimonial placeholder table — one column, one testimonial per row. */
    .oam-testi-table { max-width: 720px; margin: 2.5rem auto 0; background: var(--oam-bg);
                       border: 1px solid var(--oam-line); border-radius: var(--radius); overflow: hidden;
                       box-shadow: var(--shadow-sm); text-align: left; }
    .oam-testi-row { padding: 1.4rem 1.7rem; }
    .oam-testi-row + .oam-testi-row { border-top: 1px solid var(--oam-line); }
    /* Manrope, not Roca: Roca ships only a Bold web face, so asking for weight 400 here rendered
       the quotes bold on any site without the (unlicensed) Light face. framework#115. */
    .oam-testi-row p { margin: 0; max-width: none; font-family: var(--font-body);
                       font-size: var(--fs-body-lg); font-weight: 400; color: var(--oam-ink); }
    .oam-testi-row cite { display: block; margin-top: .5rem; font-style: normal;
                          font-family: var(--font-body); font-weight: 600; font-size: var(--fs-caption);
                          letter-spacing: .05em; color: var(--oam-accent); }

    /* ===== key.jpeg type + colour system (index-v2 only; scoped so index.html stays untouched) ===== */
    /* Section anchor — the nav-link string that leads to this page ("Start Here"), mint Roca. */
    .oam-anchor { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.25rem);
                  line-height: 1.3; color: var(--oam-mint); margin-bottom: 1.1rem; }
    /* Hero H1 — pink, emphasis word in burgundy (Roca Bold ~64 / 1.18). */
    .page-home main h1 { color: var(--oam-pink); line-height: 1.18; }
    .page-home main h1 em { font-style: normal; color: var(--oam-brand); }
    /* Section H2 — teal, emphasis word in pink (Roca Bold ~48 / 1.2). */
    .page-home main h2 { color: var(--oam-accent); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; }
    .page-home main h2 em { font-style: normal; color: var(--oam-pink); }
    /* Hero subheadline — teal Manrope Medium ~28 / 1.2. */
    .page-home__sub { font-family: var(--font-body); font-weight: 500; max-width: 34ch;
                      font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.25; color: var(--oam-accent);
                      margin-top: var(--head-gap); }
    /* CTA buttons (buttons.png): outline by default, fill on hover. CTA = burgundy, Secondary CTA = teal. */
    .oam-btn.btn-cta { background: #fff; color: var(--oam-brand); border-color: var(--oam-brand); border-width: 1.5px; }
    .oam-btn.btn-cta:hover { background: var(--oam-brand); color: #fff; border-color: var(--oam-brand); }
    .oam-btn.btn-sec { background: #fff; color: var(--oam-accent); border-color: var(--oam-accent); border-width: 1.5px; }
    .oam-btn.btn-sec:hover { background: var(--oam-accent); color: #fff; border-color: var(--oam-accent); }
    /* anchored sections clear the sticky header */
    .oam-section { scroll-margin-top: 5.5rem; }

/* ===== account (members) area ===== */
    .acct-bar { background: var(--oam-bg-alt); border-bottom: 1px solid var(--oam-line); }
    .acct-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
                       padding-block: .6rem; font-size: var(--fs-small); color: var(--oam-ink-soft); }
    .acct-bar strong { color: var(--oam-ink); }
    .acct-logout { font: inherit; font-weight: 600; color: var(--oam-brand); background: none; border: 0; cursor: pointer; padding: .3rem .2rem; }
    .acct-logout:hover { color: var(--oam-brand-700); text-decoration: underline; }
    .acct-layout { display: grid; grid-template-columns: 240px 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-block: clamp(2.5rem,5vw,4rem); align-items: start; }
    .acct-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: .1rem; }
    .acct-side__group { font-family: var(--font-body); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oam-accent); margin: 1.1rem 0 .35rem; }
    .acct-side a { font-family: var(--font-body); font-size: var(--fs-small); color: var(--oam-ink-soft); padding: .45rem .7rem; border-radius: 8px; }
    .acct-side a:hover { background: var(--oam-bg-alt); color: var(--oam-ink); }
    .acct-side a[aria-current="page"] { background: var(--oam-brand-100); color: var(--oam-brand); font-weight: 600; }
    .acct-content > p { max-width: var(--measure); }
    .acct-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); margin-top: 1.75rem; }
    .acct-card { display: block; text-decoration: none; background: var(--oam-bg); border: 1px solid var(--oam-line); border-radius: var(--radius); padding: 1.3rem; transition: box-shadow var(--transition), transform var(--transition); }
    .acct-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); border-color: var(--oam-accent); }
    .acct-card__t { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h4); color: var(--oam-ink); }
    .acct-card p { margin: .3rem 0 0; color: var(--oam-ink-soft); font-size: var(--fs-small); max-width: none; }
    .acct-login { max-width: 420px; margin-inline: auto; }
    .acct-login label { display: block; font-weight: 600; font-size: var(--fs-small); color: var(--oam-ink); margin-bottom: .9rem; }
    .acct-login input { display: block; width: 100%; margin-top: .35rem; font: inherit; padding: .8rem 1rem; border: 1px solid var(--oam-line); border-radius: 12px; background: #fff; }
    .acct-login input:focus { outline: none; border-color: var(--oam-brand); box-shadow: 0 0 0 3px var(--oam-brand-100); }
    @media (max-width: 860px) { .acct-layout { grid-template-columns: 1fr; } .acct-side { position: static; flex-flow: row wrap; gap: .3rem .5rem; margin-bottom: 1rem; } }

/* ===== open-acceptance.html additions ===== */
    /* Flow pathway (§4 How OAM Works) — Recognition -> ... -> Change */
    .oam-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem; margin-top: 2.5rem; }
    .oam-flow__step { background: color-mix(in srgb, var(--oam-mint) 12%, #fff);
                      border: 1px solid color-mix(in srgb, var(--oam-mint) 26%, #fff); border-radius: var(--radius);
                      padding: .8rem 1.15rem; font-family: var(--font-body); font-weight: 700; color: var(--oam-ink); }
    .oam-flow__arr { color: var(--oam-accent); font-weight: 700; }
    /* Clickable pathway blocks (§7) + buttons / "Best for:" inside blocks (§8-§10) */
    .oam-block--link { text-decoration: none; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
    .oam-block--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--oam-accent); }
    .oam-block .oam-btn { align-self: flex-start; margin-top: .4rem; }
    .oam-block__best { color: var(--oam-ink-soft); font-size: var(--fs-small); max-width: none; margin: 0; }
    /* anchored sections (navband links) stop just below the sticky header */
    .oam-section { scroll-margin-top: 5.5rem; }