/* ════════════════════════════════════════════════════════════════
   layout.css · Perfumed Pages canonical chrome
   Generated 2026-05-22 · Nav unification sweep
   ════════════════════════════════════════════════════════════════
   Loaded by every page in the dashboard. Provides:
     · --page-max-width tokens by [data-layout]
     · .masthead + .subnav (canonical top nav)
     · .partners-bar (direct-response pages only)
     · .site-footer (canonical bottom)
     · Auth-aware stub via [data-auth]

   Existing CSS variables expected on each page:
     --teal --teal-dark --lime --cream --rule --text --muted --mint
     --serif --mono --sans
   Fallbacks declared below in case the page is missing any.
   ════════════════════════════════════════════════════════════════ */

:root {
  --teal:      #004751;
  --teal-dark: #002E36;
  --lime:      #D3F781;
  --cream:     #FAF9F5;
  --rule:      #D0CAC0;
  --text:      #1C2B2E;
  --muted:     #3D5A5F;
  --mint:      #EEF5F0;
  --serif:     'Instrument Serif', Georgia, serif;
  --mono:      'Space Mono', ui-monospace, monospace;
  --sans:      'DM Sans', system-ui, sans-serif;
}

/* ─── Width tokens by page layout ─── */
body                                     { --page-max-width: 800px; } /* default: long-form */
body[data-layout="direct-response"]      { --page-max-width: 1080px; }
body[data-layout="long-form"]            { --page-max-width: 800px; }
body[data-layout="focused-work"]         { --page-max-width: 760px; }

/* ─── Canonical content wrapper (opt-in) ─── */
.canonical-content {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ════════════════════════════════════════════════════════════════
   CANONICAL TOP NAV · single row
   Brand mark on the left, nav links on the right, all in one bar.
   The legacy two-row .masthead+.subnav structure is collapsed via
   .subnav-v2 (one element holds brand + links).
   ════════════════════════════════════════════════════════════════ */

/* Hide the old two-row structure if any page still has it */
.masthead { display: none; }
.subnav   { display: none; }

/* The new single-row nav */
.subnav-v2 {
  background: var(--teal);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 1.5rem;
  height: 48px;
  border-bottom: 2px solid var(--lime);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
}
.subnav-v2 .subnav-brand {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--lime);
  text-decoration: none;
  margin-right: auto;
  padding: 0 0.75rem 0 0;
  letter-spacing: 0;
  text-transform: none;
  border-right: none;
}
.subnav-v2 .subnav-brand:hover { color: var(--cream); }
.subnav-v2 a:not(.subnav-brand) {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(250, 249, 245, 0.55);
  text-decoration: none;
  padding: 0 0.9rem;
  height: 100%;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.subnav-v2 a:not(.subnav-brand):hover { color: var(--lime); }
.subnav-v2 a.active {
  color: var(--lime);
  background: rgba(211, 247, 129, 0.08);
}

/* Auth-aware stub: when auth wires, set body[data-auth="signed-out"] */
body[data-auth="signed-out"] .subnav-v2 a[data-members] { display: none; }

/* ════════════════════════════════════════════════════════════════
   PARTNERS MINI-BAR · direct-response pages only
   ════════════════════════════════════════════════════════════════ */

.partners-bar {
  background: transparent;
  border-bottom: 1px solid var(--rule);
  padding: 6px 1.5rem;
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 12px;
  font-family: var(--sans);
  color: var(--muted);
  line-height: 1.3;
}
.partners-bar .partners-bar-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
}
.partners-bar .partners-bar-text {
  color: var(--muted);
  flex: 1;
  font-size: 12px;
}
.partners-bar a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 71, 81, 0.4);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.partners-bar a:hover {
  border-bottom-color: var(--teal);
}

/* ════════════════════════════════════════════════════════════════
   CANONICAL SITE FOOTER · same on every page
   Dark teal register, mono 9px utility nav style.
   ════════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--teal-dark);
  border-top: 1px solid rgba(211, 247, 129, 0.15);
  margin-top: 0;
}
.site-footer-inner {
  padding: 16px 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.site-footer-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--lime);
  text-decoration: none;
  opacity: 0.7;
}
.site-footer-mark:hover { opacity: 1; }
.site-footer-links {
  display: flex;
  gap: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.site-footer-links a {
  color: rgba(250, 249, 245, 0.45);
  padding: 0 1rem;
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer-links a:hover { color: var(--lime); }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .masthead { grid-template-columns: 1fr auto; padding: 0 1rem; }
  .masthead .mast-r { display: none; }
  .subnav { height: auto; padding: 6px 0; flex-wrap: wrap; justify-content: center; }
  .subnav a { padding: 4px 0.75rem; border-right: none; border-left: none; }
  .subnav a:first-child { border-left: none; }
  .partners-bar { padding: 10px 1rem; }
  .site-footer-inner { flex-direction: column; align-items: center; padding: 14px 1rem; }
  .site-footer-links { flex-wrap: wrap; justify-content: center; }
}