/* ============================================================================
   PAGE CSS — BLOG POST
   "What Happens If You Delay Replacing a Missing Tooth?"

   Site Assets Manager  ->  css/pages/blog-delay-missing-tooth.css
   Loads ONLY on this post. Never global.

   ---------------------------------------------------------------------------
   RELATIONSHIP TO global.css
   ---------------------------------------------------------------------------
   Consumes, never redefines: the --afn-* token set, .afn-scope, .afn-ambient,
   .afn-aurora, .afn-grain, .afn-progress, .afn-reveal (+ --scale), .afn-btn,
   .afn-arrow, .afn-ba (+ children), .afn-faq (+ children), .afn-sr.

   Everything below is namespaced .afn-post (or scoped .afn-post .afn-*), so
   no selector here can reach the homepage, a service page, an Elementor
   widget or the parent theme.

   ---------------------------------------------------------------------------
   WHY THIS LOOKS DIFFERENT FROM A SERVICE PAGE
   ---------------------------------------------------------------------------
   Same palette, same three typefaces, same motion easing — deliberately
   different composition, so a reader knows instantly they are in an article
   and not in a sales page:

     Service pages            Blog post
     ------------             ---------
     glass panels, 22px       flat surfaces, 3px  (one radius, print-like)
     full-bleed sections      one measured reading column + breakout figures
     big 66px section heads   editorial 48px heads with a margin numeral
     body at --afn-slate      body at --afn-blue, 18px/1.78 for long reading
     image hero               typographic hero, no image above the fold
     no reading aids          sticky contents rail + reading progress bar
   ========================================================================= */


/* ---------------------------------------------------------------- TOKENS -- */
/* Page-local only. Every name is --post-* so it cannot collide with the
   --afn-* set in global.css Parts 1/2 or the unprefixed set in Part 3. */
.afn-post{
  --post-r:3px;                       /* the ONE radius on this page      */
  --post-content:1100px;              /* full width of the content area   */
  --post-measure:min(100%, 760px);    /* the reading column               */
  --post-rail:220px;                  /* contents rail                    */
  --post-rail-gap:clamp(40px, 4vw, 72px);
  --post-ink:var(--afn-blue);         /* body copy                        */
  --post-ink-strong:var(--afn-white); /* emphasis                         */
  --post-hair:rgba(195,209,235,.13);  /* hairline rules                   */
  --post-hair-lit:rgba(195,209,235,.30);
  --post-tint:rgba(195,209,235,.045); /* flat fill, no blur               */
  --post-gap:clamp(56px, 7vw, 104px); /* space between H2 sections        */
}


/* ====================================================================== HERO
   Typographic. No image, no video, no glass. The H1 is the LCP element,
   which keeps the largest paint a text node rather than a network request. */

.afn-post__hero{
  padding:clamp(88px,12vw,170px) var(--afn-gutter) 0;
}
.afn-post__hero-inner{
  max-width:var(--post-content);
  margin-inline:auto;
}
.afn-post__title{
  font-family:var(--afn-font-display);
  font-weight:400;
  font-size:clamp(36px,6.2vw,82px);
  line-height:1.04;
  letter-spacing:-.015em;
  color:var(--afn-white);
  max-width:19ch;
}
.afn-post__deck{
  margin-top:clamp(22px,3vw,34px);
  max-width:46ch;
  font-family:var(--afn-font-display);
  font-style:italic;
  font-size:clamp(19px,2vw,27px);
  line-height:1.45;
  color:var(--afn-ice);
}
.afn-post__hero-rule{
  max-width:var(--post-content);
  margin:clamp(48px,6vw,84px) auto 0;
  height:1px;
  background:linear-gradient(90deg,var(--post-hair-lit),var(--post-hair) 45%,transparent);
}


/* ==================================================================== LAYOUT
   Contents rail + article. The rail is additive: it appears only when there
   is genuinely room for it, and its absence changes nothing about the prose. */

/* max-width is border-box here, so the gutters are added on top: the
   CONTENT area is exactly --post-content wide. */
.afn-post__layout{
  max-width:calc(var(--post-content) + 2 * var(--afn-gutter));
  margin-inline:auto;
  padding:clamp(52px,6vw,84px) var(--afn-gutter) clamp(90px,11vw,150px);
}


/* ============================================================ CONTENTS RAIL
   Plain anchor links — they work with JavaScript disabled. Page JS only adds
   the .is-active highlight. */

.afn-post__rail{display:none}

/* The rail column must STRETCH to the full row height (see the grid rule in
   the >=1280 block). A sticky child can only travel inside its parent's box,
   so an aside sized to its own content gives it zero range and it scrolls
   away — which is exactly what happened before this was fixed. */
.afn-post__toc{
  position:sticky;
  top:104px;
  counter-reset:afn-toc;
  border-left:1px solid var(--post-hair);
  /* Stays usable on short laptop viewports. */
  max-height:calc(100vh - 128px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--afn-char) transparent;
}
.afn-post__toc li{counter-increment:afn-toc}
.afn-post__toc a{
  position:relative;
  display:block;
  padding:11px 10px 11px 22px;
  font-size:13px;
  line-height:1.45;
  color:var(--afn-slate);
  transition:color .35s var(--afn-ease);
}
.afn-post__toc a::before{
  content:counter(afn-toc,decimal-leading-zero);
  display:block;
  margin-bottom:4px;
  font-family:var(--afn-font-mono);
  font-size:9.5px;
  letter-spacing:.22em;
  color:var(--afn-char);
  transition:color .35s var(--afn-ease);
}
/* The moving indicator. Transform-only: never reflows, so it cannot cause CLS. */
.afn-post__toc a::after{
  content:"";
  position:absolute;
  left:-1px;
  top:10px;
  bottom:10px;
  width:1.5px;
  background:var(--afn-ice);
  box-shadow:0 0 10px rgba(195,209,235,.6);
  transform:scaleY(0);
  transform-origin:50% 0;
  transition:transform .45s var(--afn-ease);
}
.afn-post__toc a:hover,
.afn-post__toc a:focus-visible{color:var(--afn-ice)}
.afn-post__toc a:hover::before,
.afn-post__toc a:focus-visible::before{color:var(--afn-slate)}

.afn-post__toc a.is-active{color:var(--afn-white)}
.afn-post__toc a.is-active::before{color:var(--afn-ice)}
.afn-post__toc a.is-active::after{transform:scaleY(1)}


/* ============================================================ READING COLUMN
   Breakout grid. The centre track is the measure; figures span the full track.
   Because the outer tracks are minmax(0,1fr) they collapse to zero on narrow
   viewports, so a "breakout" figure can never produce horizontal overflow. */

.afn-post__body{min-width:0}

.afn-post__sec{
  display:grid;
  grid-template-columns:
    [full-start] minmax(0,1fr)
    [prose-start] var(--post-measure) [prose-end]
    minmax(0,1fr) [full-end];
  counter-increment:afn-sec;
}
.afn-post__body{counter-reset:afn-sec}

.afn-post__sec > *{grid-column:prose}
.afn-post__sec > .afn-post__fig--break{grid-column:full}

.afn-post__sec + .afn-post__sec{
  margin-top:var(--post-gap);
  padding-top:var(--post-gap);
  border-top:1px solid var(--post-hair);
}


/* ------------------------------------------------------------ TYPE SYSTEM -- */

.afn-post__h2{
  font-family:var(--afn-font-display);
  font-weight:400;
  font-size:clamp(28px,3.6vw,48px);
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--afn-white);
  max-width:35ch;
  scroll-margin-top:96px;
}
/* Section numeral, generated by CSS — presentation only, never page text. */
.afn-post__h2::before{
  content:counter(afn-sec,decimal-leading-zero);
  display:block;
  margin-bottom:16px;
  font-family:var(--afn-font-mono);
  font-size:10.5px;
  font-weight:300;
  letter-spacing:.32em;
  color:var(--afn-slate);
}

.afn-post__h3{
  margin-top:clamp(40px,4.6vw,62px);
  font-family:var(--afn-font-body);
  font-weight:500;
  font-size:clamp(19px,1.9vw,24px);
  line-height:1.35;
  letter-spacing:-.005em;
  color:var(--afn-ice);
  max-width:34ch;
  scroll-margin-top:96px;
}
/* Hairline tick beside every H3 — the blog's quiet signature mark. */
.afn-post__h3::before{
  content:"";
  display:block;
  width:26px;
  height:1px;
  margin-bottom:18px;
  background:var(--post-hair-lit);
}

.afn-post__sec p{
  margin-top:20px;
  font-size:clamp(16.5px,1.15vw,18px);
  line-height:1.78;
  color:var(--post-ink);
}
.afn-post__sec p strong{color:var(--post-ink-strong);font-weight:500}

.afn-post__h2 + p,
.afn-post__h3 + p{margin-top:22px}

.afn-post__sec p.afn-post__lead{
  font-size:clamp(18px,1.4vw,21px);
  line-height:1.68;
  color:var(--afn-ice);
}


/* ------------------------------------------------------------------ LINKS -- */

.afn-post__a{
  color:var(--afn-ice);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .4s var(--afn-ease), color .3s var(--afn-ease);
}
.afn-post__a:hover,
.afn-post__a:focus-visible{
  color:var(--afn-white);
  background-size:100% 1.5px;
}


/* ------------------------------------------------------------------ LISTS -- */
/* Square ice marker + hairline separator. Deliberately not the em-dash rule
   used by .afn-dlist on the service pages. */

.afn-post__list{margin-top:26px}
.afn-post__list li{
  position:relative;
  padding:15px 0 15px 26px;
  border-bottom:1px solid var(--post-hair);
  font-size:clamp(16px,1.1vw,17.5px);
  line-height:1.7;
  color:var(--post-ink);
}
.afn-post__list li:first-child{border-top:1px solid var(--post-hair)}
.afn-post__list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:calc(15px + .72em);
  width:6px;
  height:6px;
  background:var(--afn-ice);
  box-shadow:0 0 9px rgba(195,209,235,.45);
}
.afn-post__list strong{color:var(--post-ink-strong);font-weight:500}


/* --------------------------------------------------------- QUICK SUMMARY -- */
/* The article's takeaway card. Flat fill + accent rail, no backdrop blur —
   cheap to paint and visually unlike the service pages' glass panels. */

.afn-post__key{
  margin-top:clamp(34px,4vw,48px);
  padding:clamp(26px,3vw,40px) clamp(22px,3vw,40px);
  border:1px solid var(--post-hair);
  border-left:2px solid var(--afn-ice);
  border-radius:0 var(--post-r) var(--post-r) 0;
  background:linear-gradient(100deg,var(--post-tint),transparent 62%);
}
.afn-post__key-title{
  font-family:var(--afn-font-mono);
  font-weight:400;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--afn-ice);
}
.afn-post__key-list{margin-top:22px}
.afn-post__key-list li{
  padding:14px 0;
  border-top:1px solid var(--post-hair);
  font-size:clamp(15.5px,1.05vw,16.5px);
  line-height:1.7;
  color:var(--post-ink);
}
.afn-post__key-list li:first-child{border-top:0;padding-top:0}
.afn-post__key-list li:last-child{padding-bottom:0}
.afn-post__key-list strong{color:var(--post-ink-strong);font-weight:500}


/* ---------------------------------------------------------------- FIGURES -- */
/* Sharp corners, hairline border, no shadow stack. The reveal is handled by
   the global .afn-reveal--scale, so nothing here hides content from a
   non-JS visitor: the default state of every figure is fully visible. */

.afn-post__fig{
  margin-top:clamp(40px,5vw,66px);
  border:1px solid var(--post-hair);
  border-radius:var(--post-r);
  overflow:hidden;
  background:var(--afn-black);
}
.afn-post__fig img{
  width:100%;
  height:auto;                 /* width/height attrs reserve the box: no CLS */
  aspect-ratio:3 / 2;
  object-fit:cover;
  /* No grayscale or colour grading on clinical imagery — tissue colour is
     diagnostic information, and tinting it would misrepresent the case. */
  transition:transform 1.1s var(--afn-ease);
}
@media (hover:hover){
  .afn-post__fig:hover img{transform:scale(1.015)}
}

/* ---- PER-ASSET FRAMING -------------------------------------------------
   Four of the five supplied assets are shot on black, and three of them use
   only part of the 3:2 frame. Measured content bounds (share of the source
   frame, non-black pixels):

     before-tooth.webp   y   0  – 46.6%   full width   (subject at top)
     after-tooth.webp    y   0  – 55.6%   full width   (subject at top)
     photo1-…webp        y   0  – 100%    full width   (normal photograph)
     Dijital-plaling     y 39.8 – 60.0%   x 28.8–70.2% (small, centred)
     digital-scan.webp   y 39.6 – 66.9%   x 28.9–71.3% (small, centred)

   Shown at the native 3:2 those three read as a mistake — a subject adrift
   in an empty black rectangle. The fixes below crop only black and never
   clip the subject: every bound above stays inside the visible window.
   ---------------------------------------------------------------------- */

/* Panoramic frame: 5:2 shows 60% of the source height. */
.afn-post__fig--pano img,
.afn-post__compare .afn-ba img{aspect-ratio:5 / 2}

/* Subject sits at the top of the frame -> anchor there, crop the black below. */
.afn-post__fig--top img,
.afn-post__compare .afn-ba img{object-position:center top}

/* Small centred subject -> crop to the panorama, then close the distance.
   1.45x keeps the rendered subject at or near its native pixel size on a
   1440px viewport, so nothing is visibly upscaled. */
.afn-post__fig--zoom img{
  transform:scale(1.45);
  transform-origin:center center;
}
@media (hover:hover){
  .afn-post__fig--zoom:hover img{transform:scale(1.47)}
}


/* --------------------------------------------- BEFORE / AFTER COMPARE -- */
/* The component itself is global (.afn-ba, driven by [data-afn-compare] in
   global.js): a real range input, keyboard-operable, with the "before" image
   as ordinary content if the script never runs. global.js also plays the
   one-shot reveal sweep when the block is 55% into the viewport.

   Only the skin is changed here, to the blog's flat 3px language. */

.afn-post__compare{margin-top:clamp(44px,5.5vw,72px)}

.afn-post .afn-ba{
  margin:0;
  border-radius:var(--post-r);
  border-color:var(--post-hair);
  box-shadow:none;
  transition:border-color .5s var(--afn-ease), box-shadow .6s var(--afn-ease);
}
/* Both frames share the panoramic crop above, anchored to the subject. */
.afn-post .afn-ba img{object-fit:cover}
.afn-post .afn-ba__after img{aspect-ratio:auto;object-position:center top}

.afn-post .afn-ba:hover,
.afn-post .afn-ba.is-demo,
.afn-post .afn-ba:focus-within{
  border-color:var(--post-hair-lit);
  box-shadow:0 0 0 1px rgba(195,209,235,.06), 0 26px 60px -40px rgba(0,0,0,.9);
}

/* Labels: square, hairline, mono — matched to the rest of the article. */
.afn-post .afn-ba__label{
  border-radius:var(--post-r);
  padding:7px 14px;
  border-color:var(--post-hair-lit);
  background:rgba(24,27,33,.62);
  font-size:10px;
  letter-spacing:.24em;
  transition:opacity .5s var(--afn-ease);
}
.afn-post .afn-ba__label--before{left:14px;bottom:14px}
.afn-post .afn-ba__label--after{right:14px;bottom:14px}

/* Knob: smaller and quieter than the service-page version. */
.afn-post .afn-ba__knob{
  width:46px;
  height:46px;
  background:rgba(24,27,33,.66);
  border-color:var(--post-hair-lit);
}
.afn-post .afn-ba__knob svg{display:block}
.afn-post .afn-ba:hover .afn-ba__knob,
.afn-post .afn-ba.is-demo .afn-ba__knob,
.afn-post .afn-ba:focus-within .afn-ba__knob{
  box-shadow:0 0 0 6px rgba(195,209,235,.08), 0 0 28px rgba(195,209,235,.42);
}

/* Keyboard users get the same visible affordance as mouse users. */
.afn-post .afn-ba__range:focus-visible{outline:none}
.afn-post .afn-ba:focus-within{outline:1.5px solid var(--afn-ice);outline-offset:3px}


/* -------------------------------------------------------------------- CTA -- */

.afn-post__cta{
  margin-top:clamp(48px,6vw,76px);
  padding:clamp(30px,4vw,54px);
  border:1px solid var(--post-hair-lit);
  border-radius:var(--post-r);
  background:
    linear-gradient(150deg,rgba(195,209,235,.07),transparent 58%),
    rgba(24,27,33,.5);
}
.afn-post__cta-title{
  font-family:var(--afn-font-display);
  font-weight:400;
  font-size:clamp(24px,2.8vw,36px);
  line-height:1.16;
  color:var(--afn-white);
  max-width:22ch;
}
.afn-post__cta-p{
  margin-top:18px;
  font-size:clamp(16px,1.1vw,17.5px);
  line-height:1.75;
  color:var(--post-ink);
}
.afn-post__cta-p strong{color:var(--post-ink-strong);font-weight:500}
.afn-post__cta-btn{
  margin-top:clamp(26px,3vw,36px);
  border-radius:var(--post-r);
  text-align:left;
}


/* -------------------------------------------------------------------- FAQ -- */
/* Native <details>: every answer opens and closes without JavaScript.
   [data-afn-faq] in global.js only enforces one-open-at-a-time.
   Reskinned from the service pages' glass cards to flat hairline rows. */

.afn-post__sec--faq > .afn-post__faq{grid-column:prose}

.afn-post .afn-post__faq{max-width:none;margin-top:clamp(30px,3.5vw,44px)}

.afn-post .afn-post__faq .afn-faq__item{
  margin-bottom:0;
  border:0;
  border-top:1px solid var(--post-hair);
  border-radius:0;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  transition:background .4s var(--afn-ease);
}
.afn-post .afn-post__faq .afn-faq__item:last-child{border-bottom:1px solid var(--post-hair)}
.afn-post .afn-post__faq .afn-faq__item[open]{background:linear-gradient(180deg,var(--post-tint),transparent 70%)}
@media (hover:hover){
  .afn-post .afn-post__faq .afn-faq__item:hover{background:linear-gradient(180deg,var(--post-tint),transparent 80%)}
}

.afn-post .afn-post__faq .afn-faq__item > summary{
  gap:20px;
  padding:24px 4px;
  align-items:flex-start;
}
.afn-post .afn-post__faq .afn-faq__item > summary h3{
  font-size:clamp(16px,1.35vw,18.5px);
  font-weight:500;
  line-height:1.5;
  color:var(--afn-ice);
  transition:color .35s var(--afn-ease);
}
.afn-post .afn-post__faq .afn-faq__item[open] > summary h3,
.afn-post .afn-post__faq .afn-faq__item > summary:hover h3{color:var(--afn-white)}

/* Square toggle. The service pages rotate a round + into an x; a square
   rotated 45deg would read as a stray diamond (and its diagonal overhangs
   the column), so this one stays square and swaps the glyph instead. */
.afn-post .afn-post__faq .afn-faq__tog{
  top:2px;
  width:26px;
  height:26px;
  border-radius:var(--post-r);
  border-color:var(--post-hair);
  background:none;
  font-size:15px;
  line-height:1;
  color:var(--afn-slate);
  transform:none;
  transition:border-color .4s var(--afn-ease), color .4s var(--afn-ease);
}
.afn-post .afn-post__faq .afn-faq__item[open] .afn-faq__tog{
  background:none;
  border-color:var(--afn-ice);
  color:var(--afn-ice);
  transform:none;
}
.afn-post .afn-post__faq .afn-faq__item[open] .afn-faq__tog::before{content:"2013"}

.afn-post .afn-post__faq .afn-faq__body{padding:0 4px 28px}
/* The section-level paragraph rhythm must not leak into an answer: the
   summary's own padding already sets the distance. */
.afn-post .afn-post__faq .afn-faq__body p{margin-top:0}
.afn-post .afn-post__faq .afn-faq__body p + p{margin-top:16px}
.afn-post .afn-post__faq .afn-faq__body p{
  font-size:clamp(15.5px,1.05vw,16.5px);
  line-height:1.78;
  color:var(--post-ink);
  max-width:74ch;
}


/* ============================================================== RESPONSIVE
   Five bands, each with a real layout decision — not a shrunk desktop. */

/* ---- Large desktop: rail appears, figures break out furthest ------------ */
@media (min-width:1280px){
  .afn-post__layout{
    display:grid;
    grid-template-columns:var(--post-rail) minmax(0,1fr);
    gap:var(--post-rail-gap);
    align-items:stretch;      /* gives the sticky contents list its travel */
  }
  .afn-post__rail{display:block}
}

/* ---- Very large desktop: hold the measure, let the margins grow --------- */
@media (min-width:1600px){
  .afn-post{--post-rail:240px}
  .afn-post__toc a{font-size:13.5px}
}

/* ---- Medium desktop: no rail. The measure is unchanged, so the reading
        line length is identical with and without the rail; only the breakout
        room for figures grows. ------------------------------------------- */

/* ---- Small desktop / large tablet --------------------------------------- */
@media (max-width:992px){
  .afn-post__title{max-width:16ch}
  .afn-post__toc{top:88px}
}

/* ---- Tablet -------------------------------------------------------------- */
@media (max-width:820px){
  .afn-post__hero{padding-top:clamp(72px,11vw,120px)}
  .afn-post__h2{max-width:100%}
  .afn-post__h3{max-width:100%}
  .afn-post__deck{max-width:100%}
  /* Room for the global .afn-mcta sticky bar, which appears below 820px. */
  .afn-post__layout{padding-bottom:clamp(120px,16vw,170px)}
}

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width:640px){
  .afn-post{
    --post-gap:clamp(44px,11vw,64px);
    --post-r:2px;
  }
  .afn-post__title{font-size:clamp(30px,8.4vw,44px);max-width:100%}
  .afn-post__deck{font-size:clamp(17px,4.8vw,21px)}
  .afn-post__sec p{font-size:16.5px;line-height:1.75}
  .afn-post__sec p.afn-post__lead{font-size:17.5px}

  /* Figures go edge-to-edge: the gutter is the frame on a phone. */
  .afn-post__fig--break{
    margin-inline:calc(var(--afn-gutter) * -1);
    border-inline:0;
    border-radius:0;
  }
  .afn-post__compare.afn-post__fig--break{margin-inline:calc(var(--afn-gutter) * -1)}
  .afn-post .afn-ba{border-radius:0;border-inline:0}

  .afn-post__key{
    padding:24px 20px;
    margin-inline:0;
  }
  .afn-post__cta{padding:26px 20px}
  .afn-post__cta-btn{width:100%;justify-content:space-between}

  .afn-post .afn-post__faq .afn-faq__item > summary{padding:20px 0;gap:14px}
  .afn-post .afn-post__faq .afn-faq__body{padding:0 0 24px}

  /* Touch targets: the compare knob must stay comfortably grabbable. */
  .afn-post .afn-ba__knob{width:44px;height:44px}
  .afn-post .afn-ba__label{font-size:9.5px;padding:6px 11px;letter-spacing:.18em}
}

/* ---- Small mobile -------------------------------------------------------- */
@media (max-width:400px){
  .afn-post__title{font-size:29px}
  .afn-post .afn-ba__label--before{left:10px;bottom:10px}
  .afn-post .afn-ba__label--after{right:10px;bottom:10px}
  /* Two labels + a knob get tight below ~360px; the knob keeps priority
     while the reader is actually dragging. Pure CSS — no extra JS state. */
  .afn-post .afn-ba:has(.afn-ba__range:active) .afn-ba__label{opacity:.25}
}


/* ------------------------------------------------------------ PRINT-SAFE -- */
@media print{
  .afn-post__rail,
  .afn-post .afn-progress,
  .afn-post__cta-btn{display:none}
  .afn-post .afn-faq__body{display:block}
}


/* --------------------------------------------------------- REDUCED MOTION -- */
/* global.css already flattens transitions site-wide under this query. These
   rules cover the page-local affordances it cannot know about. */
@media (prefers-reduced-motion:reduce){
  .afn-post__toc a::after{transition:none}
  .afn-post__fig img{transition:none}
  @media (hover:hover){
    .afn-post__fig:hover img{transform:none}
  }
}