/* nyw-align.css — aligns the three donor-CSS pages (/gummy-smile, /gum-surgery,
   /about) to the same type scale, rhythm and measure as the 50 standard sub pages.

   Why this file exists: nyw-root.css sets html{font-size:clamp(9px,.52vw,10px)} so the
   whole site can size in rem. The donor sheets (tu/sub/*.css) and the inline <style>
   in about.html were authored against a 16px root, so every rem value in them renders
   at ~56% of its intended size — that is why h1 measured 31.5px here against 50.4px on
   the standard pages. Rather than rewrite the donor markup, this sheet restates the
   standard tokens for the donor class names. Load it last.

   Scope: only documents carrying <html data-nyw-align>. */

[data-nyw-align] {
  --nyw-al-max: var(--nyw-max, 128rem);
  --nyw-al-pad: var(--nyw-pad, 4rem);
}

/* ── 1. Page title — matches .nyw-phero__title ───────────────────────── */
[data-nyw-align] .dn-sub-hero__title,
[data-nyw-align] .about-hub__hero h1,
[data-nyw-align] main h1,
[data-nyw-align] .cont_wrap h1 {
  font-size: clamp(3.2rem, 4.6vw, 5.6rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  font-weight: 600;
}

/* ── 2. Section heads — matches .nyw-lead (body-level h2/h3) ─────────── */
[data-nyw-align] .dn-heading,
[data-nyw-align] .dn-geo-content__block > h2,
[data-nyw-align] .about-hub__section > h2,
[data-nyw-align] main h2,
[data-nyw-align] .cont_wrap h2 {
  font-size: clamp(1.8rem, 2.1vw, 2.4rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--nyw-ink, #0a0a0a);
}
[data-nyw-align] .dn-insight-card__title,
[data-nyw-align] .dn-natural-results__heading,
[data-nyw-align] .about-hub__section h3,
[data-nyw-align] main h3,
[data-nyw-align] .cont_wrap h3 {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--nyw-ink, #0a0a0a);
}

/* The FAQ head keeps the standard display size used on every standard page. */
[data-nyw-align] .nyw-faq > h2.nyw-eyebrow {
  font-family: var(--nyw-sh-title-font);
  font-size: var(--nyw-sh-title-size);
  font-weight: var(--nyw-sh-title-weight);
  line-height: var(--nyw-sh-title-leading);
  letter-spacing: var(--nyw-sh-title-tracking);
  margin: 0 0 var(--nyw-sh-title-gap);
}

/* ── 3. Body copy — matches .nyw-body ────────────────────────────────── */
[data-nyw-align] main p,
[data-nyw-align] main li,
[data-nyw-align] .cont_wrap p,
[data-nyw-align] .cont_wrap li,
[data-nyw-align] .dn-insight-card__desc,
[data-nyw-align] .about-hub__section p {
  font-size: 1.8rem;
  line-height: 1.85;
  color: var(--nyw-mute, #6b6b6b);
}
[data-nyw-align] main p strong,
[data-nyw-align] main li strong,
[data-nyw-align] .cont_wrap p strong,
[data-nyw-align] .cont_wrap li strong { color: var(--nyw-ink, #0a0a0a); }

/* ── 4. Vertical rhythm — matches .nyw-sec (12rem block padding) ─────── */
[data-nyw-align] .dn-insight-section,
[data-nyw-align] .dn-implant-section,
[data-nyw-align] .about-hub__section {
  padding-block: 12rem;
}
[data-nyw-align] .about-hub__hero { padding-block: 12rem 8rem; }

/* ── 5. Measure — matches .nyw-wrap (max-width var(--nyw-max)) ───────── */
[data-nyw-align] .dn-insight-section > *,
[data-nyw-align] .dn-implant-section > *,
[data-nyw-align] .dn-geo-content,
[data-nyw-align] .dn-geo-block,
[data-nyw-align] .about-hub__section > *,
[data-nyw-align] .about-hub__answer,
[data-nyw-align] .cont {
  width: 100%;
  max-width: var(--nyw-al-max) !important;
  margin-inline: auto;
  padding-inline: var(--nyw-al-pad);
  box-sizing: border-box;
}

/* Inner wrappers the donor sheets size independently. They sit inside a block
   that is already at the standard measure, so they only need to stop widening. */
[data-nyw-align] .dn-sub-hero__intro-inner,
[data-nyw-align] .dn-natural-results__inner,
[data-nyw-align] .dn-geo-content__block,
[data-nyw-align] .dn-geo-content__block { padding-inline: 0; }

/* ── 6. FAQ — the standard .nyw-faq rules already style this block; only the
      donor's own border/background needs neutralising so both look identical. */
[data-nyw-align] .about-hub__answer.nyw-faq {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 4.8rem auto 0;
}
[data-nyw-align] .nyw-faq summary { font-size: 1.8rem; font-weight: 600; line-height: 1.5; }

/* ── 7. Tablet / mobile — mirrors nyw-root.css breakpoints ───────────── */
@media (max-width: 1024px) {
  [data-nyw-align] .dn-insight-section,
  [data-nyw-align] .dn-implant-section,
  [data-nyw-align] .about-hub__section { padding-block: 9rem; }
  [data-nyw-align] .about-hub__hero { padding-block: 9rem 6rem; }
}
@media (max-width: 767px) {
  [data-nyw-align] { --nyw-al-pad: 2.4rem; }
  [data-nyw-align] .dn-insight-section,
  [data-nyw-align] .dn-implant-section,
  [data-nyw-align] .about-hub__section { padding-block: 7rem; }
  [data-nyw-align] .about-hub__hero { padding-block: 7rem 4.8rem; }
}

/* ── 8. Donor sheets carry more specific rules for a few headings (e.g. a
      section-scoped .dn-heading). The standard scale has to win those too;
      the whole block stays scoped to [data-nyw-align] so nothing else moves. */
[data-nyw-align] .cont_wrap h2,
[data-nyw-align] .cont_wrap .dn-heading,
[data-nyw-align] .about-hub__section > h2 {
  font-size: clamp(1.8rem, 2.1vw, 2.4rem) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}
[data-nyw-align] .cont_wrap h3,
[data-nyw-align] .about-hub__section h3 {
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}
[data-nyw-align] .cont_wrap p,
[data-nyw-align] .cont_wrap li,
[data-nyw-align] .about-hub__section p {
  font-size: 1.8rem;
  line-height: 1.85;
}
/* The FAQ head and its answers keep the standard FAQ sizing, not the body scale.
   margin and tracking need !important too: .dn-geo-content__block > h2 in the donor
   sheet sets `margin:0 0 14px !important`, which otherwise wins over the standard
   2.4rem gap and leaves the FAQ head sitting closer to its list than every other
   section head on the site. */
[data-nyw-align] .nyw-faq > h2.nyw-eyebrow {
  font-size: var(--nyw-sh-title-size) !important;
  font-weight: var(--nyw-sh-title-weight) !important;
  line-height: var(--nyw-sh-title-leading) !important;
  letter-spacing: var(--nyw-sh-title-tracking) !important;
  margin: 0 0 var(--nyw-sh-title-gap) !important;
}

[data-nyw-align] .nyw-faq details > p { font-size: 1.5rem; line-height: 1.9; }
[data-nyw-align] .nyw-faq summary { font-size: 1.8rem !important; font-weight: 600 !important; line-height: 1.5 !important; }

/* ── 9. Legibility floor ─────────────────────────────────────────────────
   Every text node on these three pages has to render at 12px or more. The
   donor markup leaves several elements without a font-size of their own, so
   they inherit the 9–10px root that nyw-root.css sets for its rem scale and
   land far below the readable floor. The rules below restate the standard
   scale for those elements. Sizes are given in rem so they track the same
   scale as the 50 standard sub pages; 1.3rem is the smallest step that stays
   at or above 12px at every root value the site uses. */

/* Blocks whose children carry no size of their own. */
[data-nyw-align] .dn-geo-content__block,
[data-nyw-align] .dn-natural-results__body,
[data-nyw-align] .dn-implant-panel__features,
[data-nyw-align] .dn-sub-hero__intro-inner {
  font-size: 1.6rem;
  line-height: 1.85;
}
[data-nyw-align] .dn-geo-content__block strong,
[data-nyw-align] .dn-geo-content__block span,
[data-nyw-align] .dn-geo-content__block div,
[data-nyw-align] .dn-natural-results__body strong,
[data-nyw-align] .dn-implant-panel__features strong { font-size: inherit; }

/* Eyebrow / label / caption — the standard kicker step. */
[data-nyw-align] .dn-sub-hero__eyebrow,
[data-nyw-align] .about-hub__hero-eyebrow,
[data-nyw-align] .about-hub__section-label,
[data-nyw-align] .dn-sub-hero figcaption,
/* FAQ — /about carries .nyw-faq__item without the .nyw-faq wrapper, so the
   wrapper-scoped rule in section 6 never reaches it. */
[data-nyw-align] .nyw-faq__item > summary {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.5;
}
[data-nyw-align] .nyw-faq__item > p,
[data-nyw-align] .nyw-faq__item > div { font-size: 1.5rem; line-height: 1.9; }

/* Footer — /about paints its footer from an inline sheet that sizes nothing. */
[data-nyw-align] .dn-footer__pc-info .cont_text,
[data-nyw-align] .dn-footer__pc-info .cont_text span,
[data-nyw-align] .dn-footer__pc-copy,
[data-nyw-align] .dn-footer__pc-copy-line,
[data-nyw-align] .dn-footer__pc-legal,
[data-nyw-align] .dn-footer__pc-legal a { font-size: 1.3rem; line-height: 1.8; }

/* ── 10. Related / next-page cards ───────────────────────────────────────
   These carried donor class names with no stylesheet behind them, so they
   rendered at the bare root size in a single 34px-high row. They now follow
   .nyw-rel__item from the standard sub pages, with the extra category and
   description lines the copy on these pages already has. */
[data-nyw-align] .nyw-relpost,
[data-nyw-align] .nyw-nextlinks { padding-block: 9rem; }
[data-nyw-align] .nyw-relpost__container,
[data-nyw-align] .nyw-nextlinks__container {
  width: 100%;
  max-width: var(--nyw-al-max);
  margin-inline: auto;
  padding-inline: var(--nyw-al-pad);
  box-sizing: border-box;
}
[data-nyw-align] .nyw-relpost__eyebrow,
[data-nyw-align] .nyw-nextlinks__eyebrow {
  margin: 0 0 1.2rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nyw-faint, #8f8f8f);
}
[data-nyw-align] .nyw-relpost__title,
[data-nyw-align] .nyw-nextlinks__title {
  margin: 0;
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--nyw-ink, #0a0a0a);
}
[data-nyw-align] .nyw-relpost__desc,
[data-nyw-align] .nyw-nextlinks__desc {
  margin: 1.2rem 0 0;
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--nyw-mute, #6b6b6b);
}
[data-nyw-align] .nyw-relpost__grid,
[data-nyw-align] .nyw-nextlinks__grid {
  margin-top: 2.4rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-nyw-align] .nyw-relcard,
[data-nyw-align] .nyw-nextcard {
  display: block;
  min-height: 44px;
  padding: 2rem 1.8rem;
  border: 1px solid var(--nyw-line, #e4e4e4);
  background: #fff;
  text-decoration: none;
  color: var(--nyw-ink, #0a0a0a);
  transition: border-color .2s, background .2s;
}
[data-nyw-align] .nyw-relcard:hover,
[data-nyw-align] .nyw-relcard:focus-visible,
[data-nyw-align] .nyw-nextcard:hover,
[data-nyw-align] .nyw-nextcard:focus-visible {
  border-color: var(--nyw-ink, #0a0a0a);
  background: var(--nyw-surface, #f6f6f6);
}
[data-nyw-align] .nyw-relcard__category,
[data-nyw-align] .nyw-nextcard__label {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--nyw-faint, #8f8f8f);
}
[data-nyw-align] .nyw-relcard__title,
[data-nyw-align] .nyw-nextcard__title {
  display: block;
  margin-top: .8rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--nyw-ink, #0a0a0a);
}
[data-nyw-align] .nyw-relcard__desc,
[data-nyw-align] .nyw-nextcard__desc {
  margin: .9rem 0 0;
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--nyw-mute, #6b6b6b);
}
[data-nyw-align] .nyw-nextcard__button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 1.6rem;
  padding: 0 2rem;
  border: 1px solid var(--nyw-ink, #0a0a0a);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--nyw-ink, #0a0a0a);
}
@media (max-width: 900px) {
  [data-nyw-align] .nyw-relpost__grid,
  [data-nyw-align] .nyw-nextlinks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  [data-nyw-align] .nyw-relpost__grid,
  [data-nyw-align] .nyw-nextlinks__grid { grid-template-columns: 1fr; }
  [data-nyw-align] .nyw-relpost,
  [data-nyw-align] .nyw-nextlinks { padding-block: 7rem; }
}

/* ── 11. Touch targets ───────────────────────────────────────────────────
   Controls that open, submit or navigate need a 44px target. Inline links
   inside a sentence are deliberately left alone — WCAG 2.5.8 exempts text
   that sits in a line of prose, and padding them would break the leading. */
[data-nyw-align] .nyw-faq__item > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 1.2rem 4rem 1.2rem 0;
  box-sizing: border-box;
}
[data-nyw-align] .about-hub__doctor-cta,
[data-nyw-align] .about-hub__channel,
[data-nyw-align] .about-hub__value-card > a,
[data-nyw-align] .about-hub__info-card > a,
[data-nyw-align] .about-hub__service-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ── 12. Page title — the donor sheets size h1 from their own scale, which
      lands 3px above the standard. Restate the standard step so the three
      pages and the 50 standard sub pages open at the same size. */
[data-nyw-align] .dn-sub-hero__title,
[data-nyw-align] .about-hub__hero h1,
[data-nyw-align] .cont_wrap h1,
[data-nyw-align] main h1 {
  font-size: clamp(3.2rem, 4.6vw, 5.6rem) !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
}

/* ── 13. Body copy — final step to the standard measure. The donor sheets
      size paragraphs and list items from their own scale (14px), one step
      below the 15/16px the standard sub pages use. */
[data-nyw-align] .dn-geo-content__block p,
[data-nyw-align] .dn-natural-results__body p,
[data-nyw-align] .dn-implant-panel__features p,
[data-nyw-align] .dn-sub-hero__intro-inner p,
[data-nyw-align] .cont p,
[data-nyw-align] .cont_wrap p { font-size: 1.5rem !important; line-height: 1.9 !important; }
[data-nyw-align] .dn-geo-content__block li,
[data-nyw-align] .dn-natural-results__body li,
[data-nyw-align] .dn-implant-panel__features li,
[data-nyw-align] .cont li,
[data-nyw-align] .cont_wrap li { font-size: 1.6rem !important; line-height: 1.8 !important; }

/* ── 12. Section head label, last word ───────────────────────────────────
   The eyebrow label above a section title is not body copy. Without this the
   body rules above (which match `main p` and `.dn-geo-content__block p`) drag
   .nyw-kicker to the body size and colour, so the same label rendered 13.5px in
   #6b6b6b here and 11.7px in #707070 on every other page.
   The type selector is repeated because the body rule it has to beat is
   `[data-nyw-align] .dn-geo-content__block p`, which carries one more element
   selector; matching that weight is what makes the label size take. */
[data-nyw-align] .nyw-kicker,
[data-nyw-align] p.nyw-kicker,
[data-nyw-align] .dn-geo-content__block p.nyw-kicker {
  font-size: var(--nyw-sh-label-size) !important;
  font-weight: var(--nyw-sh-label-weight) !important;
  line-height: 1.4 !important;
  letter-spacing: var(--nyw-sh-label-tracking) !important;
  color: var(--nyw-sh-label-color) !important;
  margin: 0 0 var(--nyw-sh-label-gap) !important;
}

/* The gap under a section title is part of the head, not of the block that
   follows it, so it holds the same 2.4rem step as every other page. */
[data-nyw-align] .dn-implant-section .dn-heading,
[data-nyw-align] .dn-insight-section .dn-heading,
[data-nyw-align] .dn-heading {
  margin-bottom: var(--nyw-sh-title-gap) !important;
}
