/* ============================================================
   RŌZ Help Center — layout rules on top of the design system.
   Depends on tokens.css, base.css, components.css.
   All values reference design-system tokens — no magic numbers.
   ============================================================ */

/* ---------- Wordmark with macron ---------- */
.logo__mark { font-style: normal; }

/* Inline RŌZ wordmark — used anywhere "RŌZ" appears as body / UI text.
   The Ō glyph in the fallback serif fonts (Cardo/Cormorant) renders with
   the macron touching the O. We strip the Ō, print an O, and draw the
   macron as a CSS bar positioned clearly above it. */
.rz { white-space: nowrap; }
.rz__o {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.rz__o::before {
  content: "";
  position: absolute;
  left: 32%;
  right: 32%;
  /* -0.12em clears the cap-O top in body/UI text (Inter/sans) */
  top: -0.12em;
  height: 2px;
  background: currentColor;
  pointer-events: none;
}
/* Cardo serif (used in h1/h2/h3) has a taller cap-height than Inter,
   so the macron needs to sit higher to clear the O. */
h1 .rz__o::before,
h2 .rz__o::before,
h3 .rz__o::before {
  top: -0.22em;
}

/* ---------- Image logo in the nav ---------- */
.logo--img {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  padding: 0;
}
.logo--img img {
  display: block;
  height: 36px;
  width: auto;
  /* Keep the logo crisp at any density */
  image-rendering: -webkit-optimize-contrast;
}
/* On dark nav, swap in the light logo variant via mask if you ever need it.
   Today we only use the black logo on the dew-colored nav. */
.nav--dark .logo--img img { content: url("logo-light.png"); }

@media (max-width: 768px) {
  .logo--img img { height: 28px; }
}

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position: absolute; top: -40px; left: var(--sp-4);
  background: var(--roz-black); color: var(--roz-white);
  padding: var(--sp-2) var(--sp-3);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  font-family: var(--ff-sans); font-size: var(--fs-cta-s);
  z-index: 100;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-2); }

/* ---------- Main region ---------- */
main { display: block; padding-bottom: var(--sp-11); }

/* ---------- Hero ----------
   NOTE — Deferred pattern in V3.1 ("hero treatment"). The wildflower photo +
   linear-gradient overlay violates the V3.1 no-gradients rule. Interim fix:
   keep the photo, swap the gradient for the V3.1 image scrim token
   (--roz-overlay = rgba(51,51,49,0.5)). To be revisited with Camilla. */
.hero {
  position: relative;
  padding: var(--sp-11) 0 var(--sp-10);
  border-bottom: 1px solid var(--border);
  background-color: var(--roz-black);
  background-image:
    linear-gradient(var(--roz-overlay), var(--roz-overlay)),
    image-set(url("hero-meadow.webp") type("image/webp"), url("hero-meadow.jpeg") type("image/jpeg"));
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
}
.hero__inner { position: relative; max-width: 720px; }
.hero__eyebrow { color: var(--roz-white); margin-bottom: var(--sp-4); display: block; }
.hero__title { color: var(--roz-white); margin-bottom: var(--sp-5); }
.hero__intro { color: var(--roz-white); max-width: 560px; }
/* hello@rozhair.com link in the hero: warm off-white underline by default,
   shifts to seaglass on hover. */
.hero__intro a { color: var(--roz-white); border-bottom-color: var(--roz-white); }
.hero__intro a:hover { color: var(--roz-seaglass); border-bottom-color: var(--roz-seaglass); }

/* ---------- Search ---------- */
.search { margin-top: var(--sp-7); max-width: 520px; }
.search__form { display: flex; gap: 0; border: 1px solid var(--border); background: var(--roz-white); }
.search__form:focus-within { border-color: var(--roz-black); }
.search__input {
  flex: 1;
  border: 0; outline: none; background: transparent;
  font-family: var(--ff-sans); font-size: var(--fs-body-l);
  color: var(--roz-black);
  padding: var(--sp-3) var(--sp-4);
}
.search__input::placeholder { color: var(--roz-muted); }
.search__submit {
  background: var(--roz-seaglass); color: var(--roz-black);
  border: 0; padding: 0 var(--sp-5);
  font-family: var(--ff-sans); font-size: var(--fs-cta-s);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.search__submit:hover { background: var(--roz-black); color: var(--roz-white); }
.search__results {
  margin-top: var(--sp-4);
  background: var(--roz-white);
  border: 1px solid var(--border);
  max-height: 360px;
  overflow-y: auto;
}
.search__results:empty { display: none; }
.search__result {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.search__result:last-child { border-bottom: 0; }
.search__result:hover { background: var(--roz-dew); }
.search__result-cat {
  font-family: var(--ff-label); font-size: var(--fs-eyebrow-m);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--roz-muted); margin-bottom: var(--sp-1);
}
.search__result-title {
  font-family: var(--ff-serif); font-size: var(--fs-h4);
  line-height: var(--lh-heading); color: var(--roz-black);
}
.search__empty {
  padding: var(--sp-4);
  color: var(--roz-muted); font-size: var(--fs-body-m);
}

/* ---------- Section ---------- */
.section { padding: var(--sp-9) 0; }
.section--tight { padding: var(--sp-8) 0; }

/* ---------- Category grid (homepage) ---------- */
.cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.cat-card {
  background: var(--roz-white);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 280px;
  transition: background var(--dur-fast) var(--ease-out);
}
.cat-card:hover { background: var(--roz-dew); }
.cat-card--contact { background: var(--roz-seaglass); grid-column: 1 / -1; min-height: 0; }
.cat-card--contact:hover { background: var(--roz-black); color: var(--roz-white); }
.cat-card--contact .cat-card__tag,
.cat-card--contact .cat-card__meta { color: var(--roz-black); }
.cat-card--contact:hover .cat-card__tag,
.cat-card--contact:hover .cat-card__meta { color: var(--roz-white); }
.cat-card__tag { color: var(--roz-muted); margin-bottom: var(--sp-4); }
.cat-card__title { margin-bottom: var(--sp-3); }
.cat-card__meta {
  font-family: var(--ff-label); font-size: var(--fs-eyebrow-m);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--roz-muted);
  margin-top: var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-2);
}
.cat-card__meta::after {
  content: "→"; font-family: var(--ff-sans); font-size: var(--fs-body-m);
  transition: transform var(--dur-fast) var(--ease-out);
}
.cat-card:hover .cat-card__meta::after { transform: translateX(4px); }

@media (max-width: 1024px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cats { grid-template-columns: 1fr; } .cat-card { min-height: 0; padding: var(--sp-6) var(--sp-5); } }

/* ---------- Full article index (homepage secondary section) ---------- */
.full-index { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-8); }
.full-index__cat { border-bottom: 1px solid var(--border); padding: var(--sp-5) 0; }
.full-index__cat:first-child { padding-top: 0; }
.full-index__cat:last-child  { border-bottom: 0; }
.full-index__cat-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  margin-bottom: var(--sp-4);
}
.full-index__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.full-index__item a {
  display: block; padding: var(--sp-2) 0;
  font-size: var(--fs-body-l); color: var(--roz-black);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.full-index__item a:hover { border-bottom-color: var(--roz-black); }

@media (max-width: 768px) {
  .full-index { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ---------- Breadcrumb ---------- */
.crumb {
  padding: var(--sp-6) 0 0;
  font-family: var(--ff-label);
  font-size: var(--fs-eyebrow-m);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--roz-muted);
}
.crumb a { color: var(--roz-muted); transition: color var(--dur-fast) var(--ease-out); }
.crumb a:hover { color: var(--roz-black); }
.crumb__sep { margin: 0 var(--sp-2); }

/* ---------- Category page ---------- */
.cat-hero { padding: var(--sp-8) 0 var(--sp-7); border-bottom: 1px solid var(--border); }
.cat-hero__eyebrow { color: var(--roz-muted); margin-bottom: var(--sp-3); display: block; }
.cat-hero__title { margin-bottom: var(--sp-3); }
.cat-hero__count {
  color: var(--roz-muted);
  font-family: var(--ff-label); font-size: var(--fs-eyebrow-m);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}

.article-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.article-list__item { border-bottom: 1px solid var(--border); }
.article-list__link {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6);
  padding: var(--sp-5) 0;
  transition: padding var(--dur-fast) var(--ease-out);
}
.article-list__link:hover { padding-inline: var(--sp-3); background: var(--roz-white); }
.article-list__title {
  font-family: var(--ff-serif); font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}
.article-list__excerpt {
  color: var(--roz-muted); font-size: var(--fs-body-m);
  margin-top: var(--sp-2); max-width: 640px;
}
.article-list__arrow {
  font-family: var(--ff-sans); font-size: var(--fs-h4);
  color: var(--roz-muted);
  flex-shrink: 0; margin-top: var(--sp-2);
  transition: transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.article-list__link:hover .article-list__arrow { transform: translateX(6px); color: var(--roz-black); }

/* ---------- Article page ---------- */
.article-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  gap: var(--sp-7);
  align-items: start;
  padding-top: var(--sp-8);
}
.article-aside { position: sticky; top: calc(var(--nav-height) + var(--sp-5)); }
.article-aside__label {
  font-family: var(--ff-label); font-size: var(--fs-eyebrow-m);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--roz-muted);
  margin-bottom: var(--sp-3);
}
.article-aside__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.article-aside__list a {
  font-size: var(--fs-body-s); line-height: var(--lh-body);
  color: var(--roz-muted);
  display: block;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--border);
  transition: color var(--dur-fast) var(--ease-out), border-left-color var(--dur-fast) var(--ease-out);
}
.article-aside__list a:hover { color: var(--roz-black); border-left-color: var(--roz-black); }
.article-aside__list a.is-current {
  color: var(--roz-black);
  border-left-color: var(--roz-black);
  font-weight: 500;
}

.article-body { max-width: 680px; }
.article-body__eyebrow { color: var(--roz-muted); margin-bottom: var(--sp-4); display: block; }
.article-body__title { margin-bottom: var(--sp-4); }
.article-body__meta {
  font-family: var(--ff-label); font-size: var(--fs-eyebrow-m);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--roz-muted);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-6);
}

/* Article prose — inherited content from Gorgias */
.prose { font-size: var(--fs-body-l); line-height: 1.7; color: var(--roz-black); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h1, .prose h2 { font-family: var(--ff-serif); font-size: var(--fs-h3); line-height: var(--lh-heading); margin-top: var(--sp-7); }
.prose h3, .prose h4 { font-family: var(--ff-serif); font-size: var(--fs-h4); line-height: var(--lh-heading); margin-top: var(--sp-6); }
.prose p { margin: 0 0 16px 0 !important; }
.prose p:last-child { margin-bottom: 0 !important; }
.prose strong, .prose b { font-weight: 600; }
.prose a {
  color: var(--roz-black);
  border-bottom: 1px solid var(--roz-black);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.prose a:hover { color: var(--roz-muted); border-bottom-color: var(--roz-muted); }
.prose ul, .prose ol { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.prose li { padding-left: var(--sp-2); }
.prose img { border: 1px solid var(--border); margin: var(--sp-5) 0; }
.prose blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-2) var(--sp-5);
  border-left: 2px solid var(--roz-black);
  font-family: var(--ff-serif); font-style: italic;
  color: var(--roz-black);
}
/* Inline video embed (e.g. Foundation pump tutorial). */
.prose .video-embed { margin: var(--sp-6) 0; }
.prose .video-embed video {
  display: block;
  width: 360px;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  background: #000;
  border: 1px solid var(--border);
}

/* Previous / Next in category */
.pagination {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  margin-top: var(--sp-9); padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.pagination__link {
  border: 1px solid var(--border);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--roz-white);
  transition: background var(--dur-fast) var(--ease-out);
}
.pagination__link:hover { background: var(--roz-dew); }
.pagination__link--next { text-align: right; align-items: flex-end; }
.pagination__label {
  font-family: var(--ff-label); font-size: var(--fs-eyebrow-m);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--roz-muted);
}
.pagination__title {
  font-family: var(--ff-serif); font-size: var(--fs-h4);
  line-height: var(--lh-heading); color: var(--roz-black);
}
.pagination__placeholder { visibility: hidden; }

/* Contact CTA at bottom of article */
.contact-cta {
  margin-top: var(--sp-9);
  padding: var(--sp-8) var(--sp-7);
  background: var(--roz-white);
  border: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6);
}
.contact-cta__copy { max-width: 440px; }
.contact-cta__eyebrow { color: var(--roz-muted); margin-bottom: var(--sp-3); display: block; }
.contact-cta__title { margin-bottom: var(--sp-3); }
.contact-cta__text { color: var(--fg); font-size: var(--fs-body-m); }
.contact-cta__actions { display: flex; gap: var(--sp-3); flex-shrink: 0; }

/* Article page responsive */
@media (max-width: 1024px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; top: auto; margin-bottom: var(--sp-5); }
  .article-aside__list { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); }
  .article-aside__list a { padding-left: var(--sp-3); padding-right: var(--sp-3); padding-block: var(--sp-2); border-left: 1px solid var(--border); }
  .article-aside--next { display: none; }
}
@media (max-width: 640px) {
  .pagination { grid-template-columns: 1fr; }
  .contact-cta { flex-direction: column; align-items: flex-start; padding: var(--sp-6); }
  .article-list__link { flex-direction: column; }
  .article-list__arrow { align-self: flex-end; }
}

/* Empty-search helper text */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Mara-style footer (mirrors rozhair.com).
   Two columns: founder bio (with socials) · Info links (split into
   two sub-columns). Composed on top of the V3.1 .footer shell
   (seaglass background).
   ============================================================ */
.footer--mara .footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.footer__col { display: block; }

.footer__col-heading {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--roz-black);
  margin: 0 0 var(--sp-5);
}

/* Bio column */
.footer__bio {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body-s);
  color: var(--roz-black);
  max-width: 360px;
  margin: 0 0 var(--sp-6);
}
.footer__copyright {
  font-size: var(--fs-body-s);
  letter-spacing: var(--ls-body-s);
  color: var(--roz-black);
  margin: 0 0 var(--sp-5);
}
.footer__social {
  display: flex;
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--roz-black);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.footer__social a:hover { opacity: 0.55; }
.footer__social svg { display: block; }

/* Info column — link list, ALL CAPS, +7% tracking. Splits into two
   sub-columns under the single "Info" heading. */
.footer__info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-6);
}
.footer--mara .footer__links { gap: var(--sp-3); }
.footer--mara .footer__links a {
  font-family: var(--ff-label);
  font-size: var(--fs-eyebrow-m);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--roz-black);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.footer--mara .footer__links a:hover { opacity: 0.55; }

/* Responsive */
@media (max-width: 1024px) {
  .footer--mara .footer__inner { gap: var(--sp-7); }
}
@media (max-width: 640px) {
  .footer--mara .footer__inner { grid-template-columns: 1fr; }
  .footer__info-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
}

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding: var(--sp-5) var(--sp-6);
  background: var(--roz-white);
  border-top: 1px solid var(--border);
}
.cookie-banner__text { margin: 0; max-width: 560px; }
.cookie-banner__actions { display: flex; gap: var(--sp-4); flex-shrink: 0; }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}