/* ============================================================================
   LUQUA Guides (2026-08-02) — blog index, topic archives, single post.

   Loaded only on post / home / archive views (luqua-blog.php), after luqua-woo.css so the
   brand tokens declared on body.luqua-chrome are already in scope. The Guides hub is a HOUSE
   surface, not a MenoLuv surface, so it wears House Purple (#782B90, which is what --violet
   already resolves to under .luqua-chrome) and never Pack Violet. Coral appears once, on the
   product card's button, because that is a commerce action.

   Design register follows the 23/07 ruling that classy is craft rather than colour: hairline
   rules, tracked eyebrows, Playfair at tight leading, generous vertical rhythm, and almost no
   filled surfaces. The two cards that ARE filled (short answer, contents) are filled because
   they need to read as distinct objects, not as body copy.
   ========================================================================== */

body.luqua-blog{ --narrow:760px; }

/* ⚠️ THE <article> BOX-MODEL RESET. Read this before adding any spacing below.

   luqua-woo.css line 51 declares:
       body.luqua-chrome main, body.luqua-chrome article, ...
       { max-width:100%!important; width:100%!important; padding:0!important; margin:0!important }

   It exists to stop Blocksy's own containers boxing in the full-bleed canvas pages, and it
   matches the bare `article` ELEMENT, so it silently flattens every padded <article> on the
   site. A post card is semantically an <article>, so on the first build of this file the lead
   card's padding-bottom, margin-bottom AND the index's bottom padding all computed to 0 and
   the card sat flush against the footer with a 0px gap.

   The house workaround has been "use a <div> instead" (see the ing-card / step components),
   but a post listing is the one place where <article> genuinely is the right element for both
   accessibility and anything parsing the page for content blocks. So the reset is overridden
   here instead, explicitly and at higher specificity, rather than the markup being downgraded.

   Anything below that sets padding or margin on `article` or `main` needs to clear this. If a
   new blog spacing rule "does nothing", this is why. Verify with getComputedStyle, not by eye:
   the rule looks correct in the file while computing to 0 in the browser. */
/* The floor is 3.5rem rather than 3rem because 6vw at 375px computes to 22px, so the phone
   always lands on the minimum. That minimum IS the gap to the footer on every mobile view. */
body.luqua-blog main#content{
  width:auto!important;max-width:none!important;
  padding:0 0 clamp(3.5rem,6vw,5rem)!important;margin:0!important;
}
body.luqua-blog article.post-card,
body.luqua-blog article.post{
  width:auto!important;max-width:none!important;margin:0!important;padding:0!important;
}
body.luqua-blog article.post-card--lead{
  padding:0 0 clamp(2.5rem,5vw,3.5rem)!important;
  margin:0 0 clamp(2.5rem,5vw,3.5rem)!important;
}
/* Only one post published: the lead card is the whole index, so its divider would be a rule
   with nothing under it. main#content still supplies the gap to the footer. */
body.luqua-blog article.post-card--lead:last-child{
  padding-bottom:0!important;margin-bottom:0!important;border-bottom:0;
}

/* Blog views are .luqua-doc, whose .entry-content rule sets the reading width with
   !important. .post-col matches it exactly so the header, the answer card, the contents and
   the article body all sit on ONE column edge. Any drift here is instantly visible as a
   ragged left margin down the page. */
.post-col{
  max-width:var(--narrow);
  margin:0 auto;
  padding:0 clamp(1.25rem,3vw,3rem);
}

/* ---------------------------------------------------------------------------
   INDEX + ARCHIVES
   ------------------------------------------------------------------------ */

.blog-hero{
  border-bottom:1px solid var(--line);
  padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2.25rem);
  margin-bottom:clamp(2rem,5vw,3.5rem);
}
.blog-eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--violet);margin:0 0 .9rem;
}
.blog-eyebrow a{color:inherit;text-decoration:none}
.blog-eyebrow a:hover{text-decoration:underline;text-underline-offset:3px}
.blog-index h1{
  font-family:var(--display);font-weight:600;color:var(--charcoal);
  font-size:clamp(2.2rem,1.3rem + 3.2vw,3.4rem);line-height:1.1;letter-spacing:-.015em;
  margin:0 0 .8rem;
}
.blog-dek{
  font-size:clamp(1rem,.96rem + .2vw,1.12rem);line-height:1.65;color:var(--ink);
  max-width:56ch;margin:0;
}

.blog-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.chip{
  display:inline-flex;align-items:center;min-height:38px;padding:0 1.05rem;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:.85rem;font-weight:500;color:var(--ink);text-decoration:none;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.chip:hover{border-color:var(--violet-300);color:var(--violet)}
.chip.is-on{background:var(--violet);border-color:var(--violet);color:#fff}

.post-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem) clamp(1.25rem,2.4vw,2rem);
  margin:0 0 clamp(3rem,6vw,4.5rem);
}

.post-card{display:flex;flex-direction:column;gap:.95rem}
.card-media{display:block;overflow:hidden;border-radius:var(--r-md);background:var(--sand);line-height:0}
.card-media img,.card-img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.card-img--placeholder{
  display:block;width:100%;aspect-ratio:3/2;
  background:linear-gradient(135deg,var(--violet-050),var(--sand));
}
.post-card:hover .card-media img{transform:scale(1.035)}
.card-body{display:flex;flex-direction:column;gap:.5rem}
.card-eyebrow{
  font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);text-decoration:none;
}
.card-eyebrow:hover{text-decoration:underline;text-underline-offset:3px}
.card-title{
  font-family:var(--display);font-weight:600;color:var(--charcoal);
  font-size:1.16rem;line-height:1.28;letter-spacing:-.005em;margin:0;
}
.card-title a{color:inherit;text-decoration:none}
.card-title a:hover{color:var(--violet)}
.card-dek{font-size:.92rem;line-height:1.6;color:var(--ink);margin:0}
.card-meta{font-size:.78rem;color:var(--muted);margin:.15rem 0 0;display:flex;gap:.5rem;align-items:center}
.card-meta .dot,.post-byline .dot{color:var(--line)}

/* Lead story: one wide card on page 1. Text sits right of a 3:2 image at desktop. */
/* Spacing for this card lives in the box-model override at the top of the file, NOT here, or
   the <article> reset eats it. Only the properties the reset does not touch belong in here. */
.post-card--lead{
  display:grid;grid-template-columns:1.15fr 1fr;align-items:center;
  gap:clamp(1.5rem,3.5vw,3rem);
  border-bottom:1px solid var(--line);
}
.post-card--lead .card-title{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.15rem);line-height:1.18}
.post-card--lead .card-dek{font-size:1rem}
.post-card--lead .card-media img,.post-card--lead .card-img{aspect-ratio:4/3;border-radius:var(--r-lg)}
.post-card--lead .card-media{border-radius:var(--r-lg)}

.blog-pager{margin:0 0 clamp(3rem,6vw,5rem)}
.blog-pager ul{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:0;justify-content:center}
.blog-pager a,.blog-pager span{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;
  padding:0 .85rem;border:1px solid var(--line);border-radius:999px;
  font-size:.9rem;color:var(--ink);text-decoration:none;
}
.blog-pager a:hover{border-color:var(--violet-300);color:var(--violet)}
.blog-pager .current{background:var(--violet);border-color:var(--violet);color:#fff}

.blog-empty{
  text-align:center;max-width:52ch;margin:0 auto;
  padding:clamp(2rem,5vw,4rem) 0 clamp(4rem,8vw,6rem);
}
.blog-empty h2{
  font-family:var(--display);font-weight:600;color:var(--charcoal);
  font-size:1.6rem;margin:0 0 .7rem;
}
.blog-empty p{color:var(--ink);line-height:1.7;margin:0 0 1.6rem}

/* ---------------------------------------------------------------------------
   SINGLE POST
   ------------------------------------------------------------------------ */

.post-head{padding:clamp(2rem,5vw,3.25rem) 0 0}

.post-crumbs ol{
  display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 1.5rem;padding:0;
  font-size:.78rem;color:var(--muted);
}
.post-crumbs li + li::before{content:"/";margin-right:.4rem;color:var(--line)}
.post-crumbs a{color:var(--muted);text-decoration:none}
.post-crumbs a:hover{color:var(--violet);text-decoration:underline;text-underline-offset:2px}

.post-eyebrow{
  display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--violet);text-decoration:none;margin:0 0 .85rem;
}
.post-eyebrow:hover{text-decoration:underline;text-underline-offset:3px}

.post-title{
  font-family:var(--display);font-weight:600;color:var(--charcoal);
  font-size:clamp(2rem,1.25rem + 2.9vw,3.1rem);line-height:1.12;letter-spacing:-.018em;
  margin:0 0 1.1rem;
}

.post-byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font-size:.82rem;color:var(--muted);margin:0 0 .35rem;
}
.post-byline .by-name{color:var(--charcoal);font-weight:600}
/* The research house stands in for a named author (brand rule 7). It is the trust signal, so
   it is legible copy under the byline, not a footnote. */
.post-reviewed{font-size:.82rem;color:var(--muted);margin:0 0 2rem;font-style:italic}

.post-hero-img{margin:0 0 2.25rem}
.post-hero-img img{
  width:100%;height:auto;display:block;border-radius:var(--r-lg);
  aspect-ratio:16/9;object-fit:cover;
}
.post-hero-img figcaption{font-size:.78rem;color:var(--muted);margin-top:.65rem}

/* -- The short answer. The highest-leverage block on the page for AI answer surfaces. -----
   Marked `speakable` in luqua-blog.php. Styled as a distinct object with a left rule so it
   reads as a pulled-out answer rather than a standfirst paragraph, and so its boundaries are
   unambiguous to anything parsing the DOM. */
.post-answer{
  background:var(--violet-050);
  border-left:3px solid var(--violet);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:1.35rem 1.5rem;margin:0 0 2rem;
}
.answer-label{
  font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--violet);margin:0 0 .5rem;
}
.answer-text{
  font-size:1.05rem;line-height:1.65;color:var(--charcoal);margin:0;font-weight:500;
}

/* -- Contents ------------------------------------------------------------------------- */
.post-toc{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.2rem 1.5rem;margin:0 0 2.5rem;background:#fff;
}
.toc-label{
  font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .7rem;
}
.post-toc ol{margin:0;padding-left:1.2rem}
.post-toc li{margin:0 0 .4rem;font-size:.92rem;line-height:1.5}
.post-toc li:last-child{margin-bottom:0}
.post-toc a{color:var(--ink);text-decoration:none}
.post-toc a:hover{color:var(--violet);text-decoration:underline;text-underline-offset:2px}

/* Anchored headings must clear the sticky header, or a TOC click lands with the heading
   hidden underneath it and reads as a broken link. */
.luqua-blog-post .entry-content h2{scroll-margin-top:96px}

/* -- Article body extras (base typography comes from .luqua-doc in luqua-woo.css) ------- */
.luqua-blog-post .entry-content{padding-top:0!important}
.luqua-blog-post .entry-content > *:first-child{margin-top:0!important}
.luqua-blog-post .entry-content p{font-size:1.03rem;line-height:1.75}
.luqua-blog-post .entry-content li{font-size:1.03rem;line-height:1.7}
.luqua-blog-post .entry-content h2{
  padding-top:.4rem;border-top:1px solid var(--line);
}
.luqua-blog-post .entry-content figure{margin:2rem 0}
.luqua-blog-post .entry-content figure img{width:100%;height:auto;border-radius:var(--r-md);display:block}
.luqua-blog-post .entry-content figcaption{font-size:.78rem;color:var(--muted);margin-top:.6rem}
.luqua-blog-post .entry-content blockquote{
  margin:2rem 0;padding:0 0 0 1.4rem;border-left:2px solid var(--violet-300);
  font-family:var(--display);font-size:1.18rem;line-height:1.5;color:var(--charcoal);font-style:italic;
}
.luqua-blog-post .entry-content blockquote p:last-child{margin-bottom:0!important}

/* Key-takeaways list an author can drop anywhere in the body. */
.luqua-blog-post .entry-content .post-takeaways{
  background:var(--blush);border-radius:var(--r-md);padding:1.35rem 1.6rem;margin:2rem 0;
}
.luqua-blog-post .entry-content .post-takeaways h3{margin:0 0 .7rem!important;font-size:1rem}
.luqua-blog-post .entry-content .post-takeaways ul{margin:0!important}
.luqua-blog-post .entry-content .post-takeaways li:last-child{margin-bottom:0}

/* The FAQ section is the source for FAQPage schema (parsed in luqua-blog.php). Keep the
   class name .post-faq on the wrapper and the questions as H3, or the schema goes silent. */
.luqua-blog-post .entry-content .post-faq{margin:3rem 0 0}
.luqua-blog-post .entry-content .post-faq h3{
  font-family:var(--body);font-size:1rem;font-weight:600;color:var(--charcoal);
  margin:1.8rem 0 .5rem!important;
}
.luqua-blog-post .entry-content .post-faq > h2{margin-bottom:.4rem!important}

.luqua-blog-post .entry-content .post-sources{
  margin:3rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--muted);
}
.luqua-blog-post .entry-content .post-sources h2{
  font-family:var(--body)!important;font-size:.72rem!important;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  border-top:0!important;padding-top:0!important;margin:0 0 .8rem!important;
}
.luqua-blog-post .entry-content .post-sources li{font-size:.86rem;line-height:1.6}
.luqua-blog-post .entry-content .post-sources a{color:var(--muted)}

/* -- Standing disclaimer ---------------------------------------------------------------- */
.post-note{
  background:var(--advisory-bg,#FBEBDD);border:1px solid rgba(178,94,42,.20);
  border-radius:var(--r-md);padding:1.15rem 1.35rem;margin:2.5rem 0 0;
}
.post-note p{font-size:.88rem;line-height:1.65;color:var(--ink);margin:0}
.post-note strong{color:var(--advisory,#B25E2A)}

/* -- Product card ----------------------------------------------------------------------- */
.post-promo{
  display:grid;grid-template-columns:132px 1fr;gap:1.4rem;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  padding:1.5rem;margin:2rem 0 0;box-shadow:var(--shadow-sm);
}
.promo-media img{width:100%;height:auto;display:block;border-radius:var(--r-sm)}
.promo-eyebrow{
  font-size:.66rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--violet);margin:0 0 .3rem;
}
.promo-title{
  font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--charcoal);margin:0 0 .45rem;
}
.promo-dek{font-size:.9rem;line-height:1.6;color:var(--ink);margin:0 0 1.1rem}
.promo-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.9em;
  border-radius:999px;background:var(--cta);color:#fff;font-weight:600;font-size:.95rem;
  text-decoration:none;box-shadow:var(--shadow-coral);
  transition:background .18s ease,transform .18s ease;
}
.promo-btn:hover{background:var(--cta-dark);color:#fff;transform:translateY(-2px)}

/* -- Related ---------------------------------------------------------------------------- */
/* No padding-bottom: main#content owns the gap to the footer, so a post WITH related posts and
   a post WITHOUT them end on the same amount of space instead of one being twice the other. */
.post-related{
  margin-top:clamp(3.5rem,7vw,5.5rem);padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--line);
}
.post-related h2{
  font-family:var(--display);font-weight:600;color:var(--charcoal);
  font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem);margin:0 0 clamp(1.75rem,3vw,2.5rem);
}

/* ---------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------ */

@media (max-width:1024px){
  .post-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:720px){
  .post-grid{grid-template-columns:1fr;gap:2.25rem}
  /* The lead card stops being a lead on a phone: side by side at this width would give the
     text a ~150px column. It becomes an ordinary card that happens to be first. */
  .post-card--lead{grid-template-columns:1fr;gap:1rem}
  .post-card--lead .card-title{font-size:1.45rem}
  .post-promo{grid-template-columns:1fr;gap:1.1rem;text-align:left;padding:1.35rem}
  .promo-media{max-width:120px}
  .promo-btn{width:100%}
  .post-answer{padding:1.15rem 1.25rem}
  .answer-text{font-size:1rem}
  .post-hero-img img{aspect-ratio:4/3}
  .blog-chips{margin-top:1.4rem}
}

@media (prefers-reduced-motion:reduce){
  .card-media img,.promo-btn{transition:none}
  .post-card:hover .card-media img{transform:none}
}

/* ---------------------------------------------------------------------------
   STAGE TIMELINE  [luqua_stage_timeline]
   The middle stage is a THIN MARKER, not a third equal column, because the article
   exists to say menopause is one day rather than a phase. The layout is the argument.
   Desktop: zone | marker | zone.   Mobile: the same three, stacked, marker in the middle.
   ------------------------------------------------------------------------ */
.luqua-blog-post .entry-content .stage-timeline{
  margin:2.5rem 0!important;padding:0;
}
/* ⚠️ The middle column is CONSTRAINED, not `auto`. With `auto` the marker sizes to its own
   text and measured 230px against 221px zones, i.e. WIDER than the stages either side, which
   states the opposite of what the article argues. Keep it explicitly narrow. */
.st-track{
  display:grid;grid-template-columns:1fr clamp(118px,20%,160px) 1fr;align-items:stretch;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;
}
.st-zone,.st-point{padding:1.35rem 1.4rem;display:flex;flex-direction:column;gap:.3rem}
.st-pre{background:linear-gradient(100deg,#fff,var(--violet-050))}
.st-post{background:linear-gradient(260deg,#fff,var(--blush))}
/* The marker: narrow, bordered on both sides, and the only saturated element. */
.st-point{
  position:relative;background:var(--violet);color:#fff;
  text-align:center;align-items:center;justify-content:center;padding:1.35rem .9rem;
}
.st-dot{
  display:block;width:11px;height:11px;border-radius:50%;background:#fff;
  margin:0 0 .55rem;box-shadow:0 0 0 5px rgba(255,255,255,.22);
}
.st-label{
  font-size:.68rem!important;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);margin:0!important;
}
.st-point .st-label{color:#fff}
.st-dur{
  font-family:var(--display);font-size:1.12rem;font-weight:600;line-height:1.25;
  color:var(--charcoal);margin:0!important;
}
.st-point .st-dur{color:#fff}
.st-note{font-size:.85rem!important;line-height:1.5;color:var(--ink);margin:.2rem 0 0!important}
.st-point .st-note{color:rgba(255,255,255,.9)}
.luqua-blog-post .entry-content .stage-timeline figcaption{
  font-size:.82rem;color:var(--muted);margin-top:.75rem;text-align:center;
}

@media (max-width:720px){
  /* Stacked. ⚠️ The marker is COMPACTED into a slim band here, not simply stacked at the same
     size. Measured at 375px it came out 198px tall against 198px and 174px zones, i.e. a third
     equal step, which re-asserts on a phone exactly what the desktop layout is built to deny.
     Two lines, tight padding, so it still reads as the pivot BETWEEN two spans. */
  .st-track{grid-template-columns:1fr}
  .st-zone{padding:1.25rem 1.4rem}
  .st-point{
    text-align:left;padding:.8rem 1.4rem;
    display:flex;flex-flow:row wrap;align-items:baseline;gap:.1rem .5rem;
  }
  .st-point .st-dot{
    margin:0;align-self:center;width:9px;height:9px;box-shadow:0 0 0 4px rgba(255,255,255,.22);
  }
  .st-point .st-dur{font-size:1rem}
  .st-point .st-note{flex:1 0 100%;margin:0!important;font-size:.8rem!important}
}

/* ============================================================================
   LONG-FORM READING PASS (owner 2026-08-03: "hard to read in mobile")
   ==========================================================================

   Measured first, because the reported cause and the real one differed. The article body is
   #4A4A55 on #FFFDFB at 8.62:1, byte-identical to the homepage and to the site token --ink.
   The PDP text it was being compared against is #5a5470 (style.css line 1158, a one-off on
   .luqua-acc .faq-a) at 7.05:1, so the blog was already the HIGHER-contrast of the two and
   changing its colour to match would have made it worse. Colour left alone.

   What was genuinely weak is SIZE, and only on the secondary text. A marketing page is skimmed;
   a 1,200-word article is read start to finish on a phone, and 13px muted type is fine as a
   caption and tiring as a reading experience. Body goes up a step and everything that had drifted
   into the 13px band comes up to 14px or more.

   Contrast is never traded away for size here: every value below stays at or above its previous
   ratio. */

/* Body: 16.5px -> ~17px at 375, ~18px at 1440. Long-form sits better at 17-18 than at 16. */
.luqua-blog-post .entry-content p,
.luqua-blog-post .entry-content li{
  font-size:clamp(1.06rem,1.005rem + .24vw,1.125rem)!important;
  line-height:1.75;
}
.luqua-blog-post .entry-content li{line-height:1.7}

/* The short answer is the block most likely to be read and quoted. Give it room. */
.answer-text{font-size:clamp(1.06rem,1.02rem + .2vw,1.12rem)}

/* Secondary text: nothing that carries meaning sits at 13px any more. */
.post-byline,
.post-reviewed{font-size:.875rem}
.post-toc li{font-size:.95rem}
.luqua-blog-post .entry-content .post-sources li,
.luqua-blog-post .entry-content .post-sources{font-size:.9rem!important}
/* Sources are references, not captions: --ink rather than --muted so they can be read. */
.luqua-blog-post .entry-content .post-sources li{color:var(--ink,#4A4A55)}
.post-note p{font-size:.92rem;line-height:1.7}
.card-meta{font-size:.8rem}

@media (max-width:720px){
  /* Slightly tighter measure on a phone reads better than edge-to-edge text. */
  .luqua-blog-post .entry-content p,
  .luqua-blog-post .entry-content li{line-height:1.72}
  .post-note p{font-size:.9rem}
}

/* The reviewed-by line is the E-E-A-T signal, not a caption. It was the lowest-contrast text on
   the page (4.96:1 muted italic) while doing the job a named author would do elsewhere, and the
   brand bans naming an individual, so this line IS the credential. Promote it to --ink. */
.post-reviewed{color:var(--ink,#4A4A55)}