/* ============================================================================
   OSMORA — SHARED SITE HEADER / NAVIGATION  (Academy V3 — website-match)
   Served at: /academy/assets/academy-nav.css
   Rebuilt to match the main Osmora website: warm cream header (NOT dark green),
   infinity + OSMORA wordmark on the left, forest-green navigation text with
   generous spacing, right-side account/cart, subtle gold underline for the
   active section. Frontend only.
   ========================================================================== */

:root {
  --sage: #DCE4DB;
  --cream: #F5F0E7;          /* Ivory — matches homepage header */
  --cream-2: #FAF7F2;
  --gold-soft: #C6A24A;      /* Muted gold */
  --forest-deep: #173F32;    /* Forest green */
  --stone: #D8CDBA;          /* Warm stone */
  --divider: #E6DED0;        /* Soft divider */
}

/* ---- Header: slim, warm ivory, homepage-matched ---- */
.osm-header { background: var(--cream, #F5F0E7); color: var(--forest-deep, #173F32); border-bottom: 1px solid var(--divider, #E6DED0); }
.osm-header__inner {
  max-width: 1320px; margin: 0 auto;
  padding: 8px 36px;
  display: flex; align-items: center;
  min-height: 84px; gap: 24px;
}
/* Three visual zones: 17% / 66% / 17% */
.osm-header__inner > .osm-brand { flex: 0 0 17%; justify-content: flex-start; }
.osm-header__inner > .osm-nav { flex: 1 1 66%; justify-content: center; }
.osm-header__inner > .osm-actions { flex: 0 0 17%; justify-content: flex-end; }

/* ---- Brand lockup: real logo at ~165px, left-aligned, vertically centered ----
   Real asset expected at /academy/assets/osmora-logo.png. If missing, the
   typographic fallback renders so the header is never broken. */
.osm-brand { display: inline-flex; align-items: center; text-decoration: none; }
.osm-brand__img { width: 165px; height: auto; display: block; }
.osm-brand__fallback { display: none; flex-direction: column; align-items: center; justify-content: center; width: max-content; text-align: center; line-height: 1; }
.osm-brand__fallback svg.mark { width: 58px; height: auto; display: block; margin: 0 auto 2px; }
.osm-brand__fallback .word { font-family: var(--font-display, Georgia, serif); font-size: 1.35rem; letter-spacing: 0.30em; text-indent: 0.30em; color: var(--forest-deep, #173F32); margin-top: 3px; }
.osm-brand__fallback .sub { font-family: var(--font-body, Arial, sans-serif); font-size: 0.55rem; letter-spacing: 0.42em; text-indent: 0.42em; color: var(--gold-soft, #C6A24A); margin-top: 4px; }
.osm-brand.is-fallback .osm-brand__img { display: none; }
.osm-brand.is-fallback .osm-brand__fallback { display: flex; }

/* ---- Desktop navigation: one line, centered ---- */
.osm-nav { display: flex; align-items: center; gap: 20px; flex-wrap: nowrap; }
.osm-nav a {
  position: relative;
  font-family: var(--font-body, Arial, sans-serif);
  font-size: 13px; font-weight: 500; letter-spacing: 0.8px;
  text-transform: uppercase; white-space: nowrap;
  color: var(--forest-deep, #173F32); text-decoration: none;
  padding: 6px 4px; transition: color 0.15s ease;
}
.osm-nav a:hover { color: var(--gold-soft, #C6A24A); }
.osm-nav a:focus-visible { outline: 2px solid var(--gold-soft, #C6A24A); outline-offset: 4px; }
.osm-nav a[aria-current="page"] { color: var(--forest-deep, #173F32); }
.osm-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -1px; height: 1px; background: var(--gold-soft, #C6A24A); }

/* ---- Right-side account + cart ---- */
.osm-actions { display: flex; align-items: center; gap: 16px; }
.osm-actions a { color: var(--forest-deep, #173F32); text-decoration: none; display: inline-flex; align-items: center; }
.osm-actions a:hover { color: var(--gold-soft, #C6A24A); }
.osm-actions a:focus-visible { outline: 2px solid var(--gold-soft, #C6A24A); outline-offset: 3px; }
/* Account: forest person icon inside a very thin muted-gold ring */
.osm-account {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--gold-soft, #C6A24A);
  background: transparent; box-shadow: none;
  justify-content: center;
}
.osm-account svg { width: 17px; height: 17px; display: block; }
/* Cart: compact understated utility pill with muted-gold quantity badge */
.osm-cart {
  height: 36px; box-sizing: border-box;
  border: 1px solid var(--divider, #E6DED0); border-radius: 2px;
  background: transparent; box-shadow: none;
  padding: 0 12px; gap: 8px;
  font-family: var(--font-body, Arial, sans-serif);
  font-size: 13px; letter-spacing: 0.4px; color: var(--forest-deep, #173F32);
}
.osm-cart svg { width: 15px; height: 15px; }
.osm-cart .osm-cart__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--gold-soft, #C6A24A); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1;
}

/* ---- Hamburger ---- */
.osm-nav__toggle { display: none; background: transparent; border: 1px solid rgba(30,50,41,0.25); border-radius: 4px; color: var(--forest-ink, #1E3229); padding: 9px 12px; font-size: 0.95rem; cursor: pointer; line-height: 1; }
.osm-nav__toggle:focus-visible { outline: 2px solid var(--gold-soft, #B79A5B); outline-offset: 2px; }

/* ---- Back-to-Academy ---- */
.osm-backbar { max-width: 820px; margin: 0 auto; padding: 20px 24px 0; }
.osm-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body, Arial, sans-serif); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--gold-soft, #B79A5B); text-decoration: none; }
.osm-back:hover { color: var(--forest-ink, #1E3229); }
.osm-back:focus-visible { outline: 2px solid var(--gold-soft, #B79A5B); outline-offset: 3px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .osm-header__inner { padding: 8px 20px; min-height: 64px; position: relative; flex-wrap: nowrap; }
  .osm-header__inner > .osm-brand { flex: 1 1 auto; }
  .osm-header__inner > .osm-actions { flex: 0 0 auto; }
  .osm-brand__img { width: 132px; }
  .osm-nav__toggle { display: inline-block; order: 3; }
  .osm-actions { order: 2; gap: 12px; }
  .osm-nav {
    display: none; order: 4;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--cream, #F5F0E7);
    border-bottom: 1px solid var(--divider, #E6DED0);
    padding: 8px 20px 18px; z-index: 40;
  }
  .osm-nav.is-open { display: flex; }
  .osm-nav a { padding: 12px 0; width: 100%; font-size: 14px; }
  .osm-nav a[aria-current="page"]::after { display: none; }
  .osm-nav a[aria-current="page"] { color: var(--gold-soft, #C6A24A); }
  /* keep cart label hidden on very small screens to stay compact */
  .osm-cart .osm-cart__label { display: none; }
}
@media (max-width: 420px) {
  .osm-brand__img { width: 118px; }
  .osm-cart .osm-cart__price { display: none; }
}

html, body { max-width: 100%; overflow-x: hidden; }

/* ---- Publication & Review card (carried from V2.1, retinted to blend) ---- */
.pubcard { max-width: 760px; margin: 64px auto 96px; background: var(--cream-2, #FAF7F2); border: 1px solid rgba(30,50,41,0.10); border-top: 2px solid var(--gold-soft, #B79A5B); border-radius: 10px; padding: 26px 30px; }
.pubcard h2 { font-family: var(--font-display, Georgia, serif); color: var(--forest-ink, #1E3229); font-size: 1.2rem; font-weight: 400; margin: 0 0 4px; }
.pubcard .pubcard__note { font-family: var(--font-body, Arial, sans-serif); color: #6a6a6a; font-size: 0.9rem; margin: 0 0 18px; max-width: 60ch; }
.pubcard__rows { display: grid; grid-template-columns: max-content 1fr; gap: 11px 22px; margin: 0; }
.pubcard__rows dt { font-family: var(--font-body, Arial, sans-serif); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--forest, #2C5F4F); font-weight: 600; margin: 0; }
.pubcard__rows dd { margin: 0; font-size: 0.92rem; color: var(--charcoal, #2A2A2A); }
.pill { display: inline-block; font-family: var(--font-body, Arial, sans-serif); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; line-height: 1; padding: 6px 11px; border-radius: 999px; white-space: nowrap; }
.pill--draft { background: var(--sage, #DCE4DB); color: var(--forest-ink, #1E3229); }
.pill--pending { background: #F1ECE0; color: #8a6d2f; }
.pill--reviewed { background: var(--forest, #2C5F4F); color: var(--ivory, #FAF7F2); }
.pill--published { background: var(--forest, #2C5F4F); color: var(--ivory, #FAF7F2); }
.pill--compliance { background: #FBF3E4; color: #8a6d2f; border: 1px solid var(--gold-soft, #B79A5B); }
@media (max-width: 560px) { .pubcard__rows { grid-template-columns: 1fr; gap: 4px 0; } .pubcard__rows dd { margin-bottom: 10px; } }