/* Claire Elise Wellness — byline, dateline, author box, and footer boundary.
   =========================================================================
   This layer introduces no colour and no typeface. Every value below is a
   custom property already declared on :root in assets/claire-wellness.css:
   Refined Coastal sand (--cew-sand #f7f4ef), charcoal (--cew-navy #2c2c2a),
   deep coastal (--cew-deep #55737d), morning fog (--cew-morning-fog #d6e5e8),
   Playfair Display (--cew-display) and DM Sans (--cew-ui). Nothing here
   restyles an existing Claire element; it only styles elements that did not
   exist before. */

/* ---- Byline under the article title -------------------------------------
   Sits inside the photographic hero alongside .cew-article-hero__meta, so it
   inherits that block's light-on-image treatment rather than inventing one. */

.cew-article-hero__byline {
  margin: 1.1rem 0 0;
  color: rgba(255, 255, 255, .92);
  font-family: var(--cew-ui);
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  line-height: 1.45;
  letter-spacing: .01em;
}

.cew-article-hero__byline a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: rgba(255, 255, 255, .5);
}

.cew-article-hero__byline a:hover,
.cew-article-hero__byline a:focus-visible {
  text-decoration-color: currentColor;
}

/* ---- Byline on a light ground -------------------------------------------
   The longform, prep and note templates set the title on sand rather than on
   a photograph, so the byline switches to charcoal and coastal there instead
   of inheriting the light-on-image treatment above. */

.cew-byline--ground {
  margin: 1rem 0 0;
  color: var(--cew-navy);
  font-family: var(--cew-ui);
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  line-height: 1.45;
}

.cew-byline--ground a {
  color: var(--cew-deep);
  text-underline-offset: .22em;
}

.cew-dateline--ground {
  margin: .55rem 0 0;
  /* --cew-deep, not --cew-muted. Claire's muted token (#687378) measures
     4.44:1 on her sand ground, just under the 4.5:1 floor, and adding a new
     colour to fix that is not this pass's call. --cew-deep is already in her
     palette and clears it at 4.63:1 on sand and 5.08:1 on white. */
  color: var(--cew-deep);
  font-family: var(--cew-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cew-dateline--ground .cew-dateline__item--reviewed {
  color: var(--cew-deep);
}

/* ---- Dateline -----------------------------------------------------------
   Published / Last updated / Clinically reviewed. Wraps rather than truncates
   on a narrow screen, because the review date is the part a reader on a phone
   most needs to see on contraception and postpartum content. */

.cew-dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .7rem;
}

.cew-dateline__item {
  white-space: nowrap;
}

.cew-dateline__sep {
  opacity: .55;
}

.cew-dateline__item--reviewed {
  color: var(--cew-morning-fog);
}

/* ---- Author box ---------------------------------------------------------
   Closes every Claire article. Reads as a card in the Refined Coastal system:
   sand ground, coastal rule, Playfair name, DM Sans body. */

.cew-authorbox {
  margin: 3.5rem 0 0;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  background: var(--cew-sand);
  border-top: 3px solid var(--cew-deep);
  border-radius: 2px;
}

.cew-authorbox .cew-kicker {
  margin: 0 0 .5rem;
}

.cew-authorbox__name {
  margin: 0 0 .9rem;
  color: var(--cew-navy);
  font-family: var(--cew-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
}

.cew-authorbox__boundary {
  max-width: 46rem;
  margin: 0;
  color: var(--cew-navy);
  font-family: var(--cew-ui);
  font-size: 1rem;
  line-height: 1.7;
}

.cew-authorbox__links {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
  margin: 1.3rem 0 0;
}

.cew-authorbox__links a {
  color: var(--cew-deep);
  font-family: var(--cew-ui);
  font-weight: 500;
}

/* ---- Footer ownership and boundary --------------------------------------
   .cew-footer, .cew-footer__inner, .cew-footer nav and .cew-footer__meta are
   already defined in claire-wellness.css and are reused untouched. Only the
   two new children are styled here. */

.cew-footer__ownership {
  max-width: 44rem;
  margin: 1.4rem 0 0;
  color: rgba(255, 255, 255, .72);
  font-family: var(--cew-ui);
  font-size: .92rem;
  line-height: 1.65;
}

.cew-footer__boundary {
  margin: 1.1rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .72);
  font-family: var(--cew-ui);
  font-size: .92rem;
  line-height: 1.65;
}

.cew-footer nav a {
  font-family: var(--cew-ui);
  font-size: .95rem;
}

/* ---- Trust row and advertising disclosure -------------------------------
   The policy links sit on their own rule below the section nav rather than
   beside it, because "About Claire" and "Privacy and your data" are different
   kinds of link and a reader looking for the second one should not have to
   read past the first three. Both blocks reuse the ownership paragraph's
   colour and scale; nothing new is introduced. */

.cew-footer__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin: 1.6rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.cew-footer__trust a {
  color: rgba(255, 255, 255, .82);
  font-family: var(--cew-ui);
  font-size: .92rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: rgba(255, 255, 255, .38);
}

.cew-footer__trust a:hover,
.cew-footer__trust a:focus-visible {
  color: #fff;
  text-decoration-color: currentColor;
}

.cew-footer__advertising {
  max-width: 44rem;
  margin: 1.2rem 0 0;
  color: rgba(255, 255, 255, .72);
  font-family: var(--cew-ui);
  font-size: .88rem;
  line-height: 1.65;
}

@media (max-width: 640px) {
  .cew-dateline {
    font-size: .66rem;
  }

  .cew-authorbox {
    margin-top: 2.6rem;
  }
}