/* ==========================================================================
   COMPONENTS — header, footer, theme toggle, buttons, article cards
   These appear on the homepage and will be reused on inner pages.
   ========================================================================== */

/* ---- Site header ---------------------------------------------------------- */
/* Base state: flush, edge-to-edge bar — matches the top-of-page reference.
   No background of its own so the hero's wash/dots show straight through
   and the header reads as part of the same surface, not a bar on top of it. */
.site-header{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  transition: transform 320ms var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              top var(--dur) var(--ease), border-radius var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
}
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 76px;
  transition: height var(--dur) var(--ease);
}
/* Logo must never be crushed by the actions cluster on narrow screens;
   header-actions is allowed to shrink its gap before anything clips. */
.site-header__inner .logo{ flex-shrink: 0; }

/* Scrolled past the hero and actively scrolling up: floats as a rounded
   glass pill, detached from the edges, no visible hairline. */
.site-header[data-scrolled="true"]{
  position: fixed;
  top: 6px;
  margin: 0 auto;
  max-width: min(calc(var(--content-max) - 2rem), calc(100% - 2rem));
  padding-inline: var(--gutter);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  box-shadow: 0 8px 30px rgba(20,20,26,0.12), 0 2px 8px rgba(20,20,26,0.06);
}
[data-theme="dark"] .site-header[data-scrolled="true"]{
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
}
.site-header[data-scrolled="true"] .site-header__inner{
  height: 64px;
}

/* Hidden while actively scrolling down. */
.site-header[data-hidden="true"]{
  transform: translateY(-130%);
}

/* Used for exactly one frame when crossing from the flush/absolute state
   straight into fixed+hidden while scrolling down, so the position-mode
   switch and the hide transform land together with no visible flash. */
.site-header[data-instant="true"]{
  transition: none !important;
}

/* On mobile, the header stays put: no floating glass pill on scroll-up,
   no hide-on-scroll-down. header-scroll.js still runs and still sets
   data-scrolled/data-hidden as usual (harmless — no need to special-case
   the JS), but these overrides win the cascade and hold the header in
   its normal flush, always-visible bar at every scroll position. */
@media (max-width: 820px){
  .site-header[data-scrolled="true"]{
    position: absolute;
    top: 0;
    margin: 0;
    max-width: none;
    padding-inline: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  [data-theme="dark"] .site-header[data-scrolled="true"]{
    background: transparent;
    box-shadow: none;
  }
  .site-header[data-scrolled="true"] .site-header__inner{
    height: 76px;
  }
  .site-header[data-hidden="true"]{
    transform: none;
  }
}

.logo{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.logo__mark{
  width: auto;
  height: 30px;
  flex-shrink: 0;
  display: block;
}
.logo span{ color: var(--accent); transition: color var(--dur) var(--ease); }

.nav-primary{
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2.25rem);
}
.nav-primary a{
  position: relative;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 6px 0;
  transition: color var(--dur) var(--ease);
}
.nav-primary a:hover,
.nav-primary a[aria-current="page"]{ color: var(--accent-hover, var(--ink-text)); }
.nav-primary a:hover{ color: #B98600; }
[data-theme="dark"] .nav-primary a:hover{ color: var(--accent); }
.nav-primary a[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.header-actions{
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-solid{
  background: var(--ink);
  color: var(--bg);
}
.btn-solid:hover{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 6px 16px rgba(255,191,29,0.35);
}
.btn-ghost{
  border-color: var(--hairline-strong);
  color: var(--ink-text);
  background: transparent;
}
.btn-ghost:hover{
  border-color: var(--accent);
  color: var(--ink-text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.btn:active{ transform: translateY(1px); }
.btn svg{ width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.btn:hover svg{ transform: translateX(2px); }
/* A "buy" button with no working destination yet — e.g. a product whose
   Whop publish is still in progress or partially failed. Keeps the same
   size/shape as a normal .btn-solid so layout doesn't shift. */
.btn-disabled,
.btn-disabled:hover{
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Small pill "read more" used on cards */
.btn-sm{
  padding: 0.55rem 1.1rem;
  font-size: 0.8125rem;
  border-radius: var(--radius-pill);
}

/* Hamburger (mobile) */
.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px; height: 34px;
}
.nav-toggle span{
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---- Theme toggle: single icon showing the mode a click switches TO ----
   Light mode shows the moon (click → go dark); dark mode shows the sun
   (click → go light). Only one icon is ever visible/in-flow at a time. */
.theme-toggle{
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ink-text);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur) var(--ease);
}
.theme-toggle:hover{ color: #B98600; }
[data-theme="dark"] .theme-toggle:hover{ color: var(--accent); }
.theme-toggle svg{ width: 24px; height: 24px; }
.theme-toggle__icon-sun{ display: none; }
[data-theme="dark"] .theme-toggle__icon-moon{ display: none; }
[data-theme="dark"] .theme-toggle__icon-sun{ display: block; }

/* ---- Profile: "Sign in" button (signed out) → icon + dropdown (signed in) */
.profile-menu{
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.profile-signin{
  padding: 0.6rem 1.2rem;
}
.profile-signin[hidden],
.profile-account[hidden]{
  display: none;
}

.profile-account{
  position: relative;
}
.profile-icon{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-text);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.profile-icon:hover,
.profile-account[data-open="true"] .profile-icon{
  color: #B98600;
  border-color: #B98600;
}
[data-theme="dark"] .profile-icon:hover,
[data-theme="dark"] .profile-account[data-open="true"] .profile-icon{
  color: var(--accent);
  border-color: var(--accent);
}
.profile-icon svg{ width: 20px; height: 20px; }
.profile-icon__letter{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  user-select: none;
}

.profile-dropdown{
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 190px;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow-hover);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  z-index: 40;
}
.profile-account[data-open="true"] .profile-dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.profile-dropdown__item{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-text);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.profile-dropdown__item svg{ width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-mute); }
.profile-dropdown__item:hover{
  background: var(--bg-raised);
  color: #B98600;
}
[data-theme="dark"] .profile-dropdown__item:hover{ color: var(--accent); }

/* ---- Post card (rounded thumb, floating badge, avatar/meta, pill CTA) --- */
.post-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Grid items default to min-width: auto (≈ their content's max-content
     width), which lets .post-card__media's max-width: 388px refuse to
     shrink below that width even in a narrower 1fr track — same overflow
     bug already fixed on .product-card. Matches the skeleton fix in
     .skel-post-card so real cards don't regress once data replaces it. */
  min-width: 0;
}
.post-card__media{
  position: relative;
  width: 100%;
  max-width: 388px;
  aspect-ratio: 388/300;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  margin-bottom: 1.1rem;
}
.post-card__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.post-card:hover .post-card__media img{ transform: scale(1.06); }
.post-card__badge{
  position: absolute;
  top: 14px; left: 14px;
  background: var(--badge-bg);
  color: var(--badge-ink);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
}
.post-card__featured{
  position: absolute;
  top: 14px; right: 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
}
.post-card__title{
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 0.65rem;
  transition: color var(--dur) var(--ease);
}
.post-card:hover .post-card__title{ color: #B98600; }
[data-theme="dark"] .post-card:hover .post-card__title{ color: var(--accent); }

.post-card__author{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.6rem;
}
.avatar{
  width: 26px; height: 26px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-raised);
}
.avatar img{ width: 100%; height: 100%; object-fit: cover; }
.post-card__author-name{
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
}

.post-card__footer{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.5rem;
}

/* Large feature variant (image left, content right, full-width row) */
.post-card--feature{
  flex-direction: row;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.post-card--feature .post-card__media{
  flex-shrink: 0;
  width: 44%;
  max-width: 460px;
  margin-bottom: 0;
  aspect-ratio: 16/11;
}
.post-card--feature .post-card__body{
  flex: 1;
  min-width: 0;
}
.post-card--feature .post-card__title{
  font-size: 35px;
  font-weight: 600;
  max-width: 34ch;
}
.post-card--feature .post-card__footer{
  padding-top: 0;
  margin-top: 1.5rem;
}
.post-card--feature .btn{
  margin-top: 1.4rem;
  width: fit-content;
}

/* ---- Category pill rail -------------------------------------------------- */
.pill-rail{
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.pill{
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.6rem 1.15rem;
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pill:hover{
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---- Explore categories rail --------------------------------------------- */
.category-rail{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1.25rem;
}
.category-tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
  /* Same min-width:0 guard as .skel-category-tile — prevents this flex
     item's intrinsic content width from overriding the grid column's
     1fr width and overflowing past it on narrow (2-column) mobile rows. */
  min-width: 0;
}
.category-tile__media{
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-raised);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.category-tile__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 420ms var(--ease);
}
.category-tile:hover .category-tile__media{
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
}
.category-tile:hover .category-tile__media img{
  transform: scale(1.06);
}
.category-tile__label{
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink-text);
}
@media (max-width: 900px){
  .category-rail{ grid-template-columns: repeat(4, 1fr); row-gap: 1.75rem; }
}
@media (max-width: 520px){
  .category-rail{ grid-template-columns: repeat(2, 1fr); }
  /* Show only the first 2 skeleton tiles on mobile — 8 tiles in a
     2-column grid means 4 tall rows of empty placeholder boxes before
     any real content has loaded, which reads as a wall of loading UI.
     Real tiles (.category-tile, no skel- prefix) are untouched and
     still show every category once data loads. */
  .category-rail .skel-category-tile:nth-child(n+3){
    display: none;
  }
}

/* ---- Centered variant (Explore categories section) ------------------------ */
.category-rail--center{
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

/* ---- Newsletter (inverted block) ---------------------------------------- */
.newsletter{
  background: var(--invert-bg);
  color: var(--invert-ink);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 6vw, 4rem);
}
.newsletter__title{
  font-size: var(--step-3);
  max-width: 18ch;
}
.newsletter__sub{
  color: color-mix(in srgb, var(--invert-ink) 65%, transparent);
  max-width: 46ch;
  margin-top: 0.75rem;
}
.newsletter-form{
  display: flex;
  gap: 0.75rem;
  margin-top: 1.75rem;
  max-width: 440px;
}
.newsletter-form input[type="email"]{
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--invert-ink) 35%, transparent);
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.2rem;
  color: var(--invert-ink);
  transition: border-color var(--dur) var(--ease);
}
.newsletter-form input[type="email"]:focus-visible{ border-color: var(--accent); }
.newsletter-form input[type="email"]::placeholder{
  color: color-mix(in srgb, var(--invert-ink) 45%, transparent);
}
.newsletter-form button{
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: filter var(--dur) var(--ease);
}
.newsletter-form button:hover{ filter: brightness(1.08); }
.newsletter-note{
  font-size: var(--step--1);
  margin-top: 0.85rem;
  color: color-mix(in srgb, var(--invert-ink) 55%, transparent);
  min-height: 1.2em;
}
.newsletter-note[data-state="success"]{ color: var(--accent); }
.newsletter-note[data-state="error"]{ color: #ff8a8a; }

/* ---- Section heading row --------------------------------------------- */
.section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 35px;
}
.section-head--center{
  display: block;
  text-align: center;
}
.section-head__title{
  font-family: var(--font-display);
  /* Was a fixed 40px with no scaling — clamp mirrors that same desktop
     size while shrinking gracefully down to a comfortable mobile size. */
  font-size: clamp(1.7rem, 1.45rem + 1.1vw, 2.5rem);
  font-weight: 600;
}
.section-head__link{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  flex-shrink: 0;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.section-head__link svg{ width: 15px; height: 15px; flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.section-head__link:hover svg{ transform: translateX(2px); }
.section-head__link:hover{ color: #B98600; }
[data-theme="dark"] .section-head__link:hover{ color: var(--accent); }
.section-head--center .section-head__lead{
  max-width: 56ch;
  margin: 0.9rem auto 0;
  color: var(--ink-soft);
  font-size: var(--step-1);
}

/* ---- Site footer: orbit-style background, echoes the hero -------------- */
.site-footer{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.site-footer__wash{
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, var(--bg)) 0%, color-mix(in srgb, var(--accent) 7%, var(--bg)) 45%, var(--bg) 100%),
    var(--bg);
}
[data-theme="dark"] .site-footer__wash{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent) 0%, color-mix(in srgb, var(--accent) 5%, transparent) 45%, var(--bg) 100%),
    var(--bg);
}
.site-footer__dots{
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.55;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 22%, transparent) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 65% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 65% at 50% 0%, #000 0%, transparent 75%);
}
.footer-top{
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer-brand__title{
  font-size: var(--step-1);
  margin-top: 1.5rem;
}
.footer-brand__sub{
  color: var(--ink-soft);
  max-width: 34ch;
  margin-top: 0.6rem;
}
.pill-form--footer{
  margin-top: 1.25rem;
  max-width: 340px;
}
.footer-brand .newsletter-note{ margin-top: 0.6rem; color: var(--ink-mute); }
.footer-brand .newsletter-note[data-state="success"]{ color: #B98600; }
[data-theme="dark"] .footer-brand .newsletter-note[data-state="success"]{ color: var(--accent); }
.footer-brand .newsletter-note[data-state="error"]{ color: #d9534f; }

/* ---- WhatsApp channel promo (compact, footer variant) --------------------- */
/* [hidden]-vs-class-display fix, same pattern used throughout this project
   (.purchase-list, .settings-grid, etc.): a class-level `display` beats
   the UA [hidden]{display:none} rule at equal specificity, so this must
   be stated explicitly or js/whatsapp-promo.js hiding the block would be
   silently overridden by .whatsapp-promo's own `display: flex` below. */
.whatsapp-promo[hidden]{
  display: none;
}
.whatsapp-promo{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 0.85rem 1rem;
  background: var(--bg-raised);
  border-radius: var(--radius-md);
}
.whatsapp-promo__icon{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.whatsapp-promo__icon svg{ width: 20px; height: 20px; }
.whatsapp-promo__body{ min-width: 0; }
.whatsapp-promo__title{
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-text);
}
.whatsapp-promo__link{
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #B98600;
  margin-top: 0.15rem;
}
[data-theme="dark"] .whatsapp-promo__link{ color: var(--accent); }
.whatsapp-promo__link:hover{ text-decoration: underline; }
.whatsapp-promo__link svg{ width: 13px; height: 13px; }
.whatsapp-promo__dismiss{
  margin-left: auto;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink-mute);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.whatsapp-promo__dismiss:hover{
  color: var(--ink-text);
  background: var(--card-bg);
}
.whatsapp-promo__dismiss svg{ width: 14px; height: 14px; }

/* ---- WhatsApp dismiss confirmation modal ----------------------------------
   Same overlay/backdrop/open-state conventions as .auth-modal-overlay in
   css/auth.css (fixed, centered, fade+scale transition, [hidden]-safe),
   but its own small card instead of reusing the huge .auth-split layout —
   a one-line "are you sure?" doesn't need a 940px two-panel modal. Lives
   here (not auth.css) since this is part of the WhatsApp promo feature and
   components.css is already loaded on every page that feature appears on. */
.confirm-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10,10,14,0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.confirm-modal-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}
.confirm-modal{
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  text-align: center;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur) var(--ease);
}
.confirm-modal-overlay.is-open .confirm-modal{ transform: translateY(0) scale(1); }
.confirm-modal__icon{
  width: 44px;
  height: 44px;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  background: rgba(217,83,79,0.12);
  color: #d9534f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-modal__icon svg{ width: 22px; height: 22px; }
.confirm-modal__title{
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-text);
  margin-bottom: 0.35rem;
}
.confirm-modal__body{
  font-size: 0.875rem;
  color: var(--ink-mute);
  line-height: 1.5;
  margin-bottom: 1.35rem;
}
.confirm-modal__actions{
  display: flex;
  gap: 0.6rem;
}
.confirm-modal__actions .btn{ flex: 1; }
/* Scoped danger-style button: css/settings.css already has a .btn-danger
   for the delete-account flow, but that file isn't loaded on every page,
   and this confirm modal needs to work everywhere the promo appears. Kept
   local rather than moving settings.css's version, to avoid touching an
   unrelated page's styles for this feature. */
.confirm-modal__actions .btn-solid-danger{
  background: #d9534f;
  color: #fff;
}
.confirm-modal__actions .btn-solid-danger:hover{ background: #c9302c; }

body.confirm-modal-open{ overflow: hidden; }

/* ---- WhatsApp channel popup (js/whatsapp-popup.js) ----------------------
   Same overlay/card/open-state/Escape/click-outside shell as
   .confirm-modal-overlay above, styled as a promotional nudge rather than
   a destructive-action confirm: WhatsApp-green icon (matches
   .whatsapp-promo__icon's brand color) and a two-action footer instead of
   a danger button. */
.whatsapp-popup-overlay{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10,10,14,0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.whatsapp-popup-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}
.whatsapp-popup{
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  text-align: center;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur) var(--ease);
}
.whatsapp-popup-overlay.is-open .whatsapp-popup{ transform: translateY(0) scale(1); }
.whatsapp-popup__close{
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink-mute);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.whatsapp-popup__close:hover{ background: var(--hairline); color: var(--ink-text); }
.whatsapp-popup__close svg{ width: 16px; height: 16px; }
.whatsapp-popup__icon{
  width: 48px;
  height: 48px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whatsapp-popup__icon svg{ width: 24px; height: 24px; }
.whatsapp-popup__title{
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-text);
  margin-bottom: 0.4rem;
}
.whatsapp-popup__body{
  font-size: 0.875rem;
  color: var(--ink-mute);
  line-height: 1.5;
  margin-bottom: 1.35rem;
}
.whatsapp-popup__actions{
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.whatsapp-popup__actions .btn{ width: 100%; justify-content: center; }

body.whatsapp-popup-open{ overflow: hidden; }

.footer-col__head{
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink-text);
  margin-bottom: 1rem;
}
.footer-col a:not(.footer-social-icon){
  display: block;
  padding: 0.35rem 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
  transition: color var(--dur) var(--ease);
}
.footer-col a:not(.footer-social-icon):hover{ color: #B98600; }
[data-theme="dark"] .footer-col a:not(.footer-social-icon):hover{ color: var(--accent); }

.footer-col--follow{ display: flex; flex-direction: column; }
.footer-social-icon.footer-social-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1.5px solid var(--hairline-strong);
  color: var(--ink-text);
  line-height: 1;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer-social-icon.footer-social-icon svg{
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}
.footer-social-icon.footer-social-icon:hover,
.footer-social-icon.footer-social-icon:focus-visible{
  color: #B98600;
  border-color: #B98600;
}
[data-theme="dark"] .footer-social-icon.footer-social-icon:hover,
[data-theme="dark"] .footer-social-icon.footer-social-icon:focus-visible{
  color: var(--accent);
  border-color: var(--accent);
}

.footer-bottom{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem var(--gutter);
  border-top: 1px solid var(--hairline);
  font-size: var(--step--1);
  color: var(--ink-mute);
  text-align: center;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

/* ---- Mobile nav drawer ----------------------------------------------------
   Desktop: .nav-drawer is a plain wrapper (display:contents) around
   .nav-primary + .header-actions, so it has zero effect on the header
   bar's layout — nav links and actions sit inline exactly as before.

   Mobile (<=820px): .nav-drawer becomes a real fixed panel that slides in
   from the right, holding the nav links AND the theme toggle / sign-in /
   profile block together, with its own head bar and close button, plus a
   scrim behind it. Matches the header's own visual language: same
   card surface, radius, and shadow as .profile-dropdown / the scrolled
   glass-pill header state. */
.nav-drawer{ display: contents; }
.nav-drawer__head{ display: none; }
.nav-scrim{
  display: none;
}

@media (max-width: 820px){
  .nav-toggle{ display: flex; }

  .nav-scrim{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20,20,26,0.45);
    z-index: 65;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }
  .nav-scrim[hidden]{
    display: none;
  }
  .nav-scrim:not([hidden]){
    opacity: 1;
    pointer-events: auto;
  }
  [data-theme="dark"] .nav-scrim{ background: rgba(0,0,0,0.6); }

  .nav-drawer{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 84vw);
    background: var(--bg);
    border-left: 1px solid var(--hairline);
    box-shadow: -8px 0 30px rgba(20,20,26,0.12), -2px 0 8px rgba(20,20,26,0.06);
    z-index: 70;
    padding: 1.25rem var(--gutter) 1.5rem;
    gap: 1.75rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  [data-theme="dark"] .nav-drawer{
    box-shadow: -8px 0 30px rgba(0,0,0,0.4), -2px 0 8px rgba(0,0,0,0.3);
  }
  .nav-drawer[data-open="true"]{
    transform: translateX(0);
  }

  .nav-drawer__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-drawer__brand{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-0);
    color: var(--ink-mute);
  }
  .nav-drawer__close{
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ink-text);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .nav-drawer__close:hover{
    background: var(--bg-raised);
    color: #B98600;
  }
  [data-theme="dark"] .nav-drawer__close:hover{ color: var(--accent); }
  .nav-drawer__close svg{ width: 18px; height: 18px; }

  .nav-primary{
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }
  .nav-primary a{
    font-size: var(--step-1);
    font-weight: 600;
    padding: 0.75rem 0.25rem;
    border-radius: var(--radius-sm);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .nav-primary a:hover{ background: var(--bg-raised); }
  .nav-primary a[aria-current="page"]::after{
    /* The underline indicator reads oddly on a stacked, left-aligned list —
       swap it for a left accent bar in the drawer instead. */
    content: "";
    left: -0.25rem;
    right: auto;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 3px;
    height: auto;
  }

  /* Theme toggle + sign-in/profile block, now living inside the drawer:
     stack them as a full-width row above a hairline, echoing the drawer's
     own head bar rather than the compact inline cluster used on desktop. */
  .header-actions{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hairline);
    margin-top: auto;
    position: relative;
  }
  .profile-signin{
    flex: 1;
    justify-content: center;
  }
  .profile-account{
    /* Note: the base rule (line ~220) sets position:relative on this
       element unconditionally, at every width. That's fine — the
       dropdown below no longer anchors relative to any ancestor's box
       at all, so which element is "positioned" here doesn't matter. */
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .nav-drawer .profile-account[data-open="true"]{
    align-items: stretch;
  }
  .profile-account .profile-icon{
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
  /* Opens upward instead of downward: the actions row sits pinned to the
     bottom of the drawer, so a dropdown that opened below the icon would
     have nowhere to go but past the drawer's own bottom edge.

     Anchored with position:fixed directly against the viewport, with an
     explicit width matching the drawer's own width formula and a right
     offset matching the drawer's own right padding — NOT anchored to any
     ancestor box (.profile-account, .header-actions, etc). Anchoring to
     an ancestor's box repeatedly broke here because .profile-dropdown's
     nearest positioned ancestor kept changing depending on which parent
     rule was in play, and that ancestor was rarely the full drawer
     width. Pinning straight to the viewport with the drawer's own known
     geometry removes that ambiguity entirely — it is mathematically
     impossible for this to render outside the drawer's actual edges. */
  .nav-drawer .profile-dropdown{
    position: fixed;
    left: auto;
    top: auto;
    right: var(--gutter);
    bottom: calc(1.5rem + 1.25rem + 40px + 12px);
    width: calc(min(320px, 84vw) - (var(--gutter) * 2));
    min-width: 0;
    max-width: calc(100vw - (var(--gutter) * 2));
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    box-shadow: var(--card-shadow-hover);
    padding: 0.5rem;
    transform: translateY(6px);
  }
  .nav-drawer .profile-account[data-open="true"] .profile-dropdown{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@media (max-width: 640px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; margin-bottom: 0.5rem; }
  .pill-form--footer{ max-width: 100%; }
  .whatsapp-promo{ max-width: 100%; }
}

@media (max-width: 480px){
  .site-header__inner{ gap: 0.75rem; }
  .header-actions{ gap: 0.55rem; }
  .logo{ font-size: 1.1rem; }
  .profile-signin{ padding: 0.55rem 0.9rem; font-size: var(--step--1); }
  .profile-dropdown{ right: -0.5rem; }
  /* The drawer's own upward-opening dropdown (see the 820px block above)
     must stay flush within the drawer's edges — the -0.5rem nudge above
     is for the desktop-style dropdown anchored to the header icon only,
     and would push this one half outside the drawer's right edge. */
  .nav-drawer .profile-dropdown{ right: 0; }
}