/* ============================================================================
   PAGE + TEMPLATE STYLES
   Built from the site's existing vocabulary: same containers, type scale,
   radii, button styles and 1.5rem/3rem spacing rhythm used elsewhere.
   ========================================================================== */

/* Header CTA swaps between the bar and the mobile panel at 991px. */
.header-cta-mobile { display: none; }
@media screen and (max-width: 991px) {
  .header-cta-desktop { display: none; }
  .header-cta-mobile { display: block; }
  .header-cta-mobile .primary-button { display: inline-block; margin-top: .5rem; }
}

/* Pages that aren't the homepage sit below the absolutely-positioned header. */
.section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.team-detail, .service-detail, .post-detail { padding-top: calc(var(--section-pad) * .6); }

/* -------------------------------------------------------------- BREADCRUMB -- */
.breadcrumb { margin-bottom: 2rem; }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  list-style: none;
}
.breadcrumb li {
  color: var(--muted-text);
  font-family: var(--font-body);
  font-size: .9rem;
}
.breadcrumb li + li::before {
  content: "›";
  margin-right: .5rem;
  color: var(--muted-text);
}
.breadcrumb a { color: var(--muted-text); transition: var(--transition); }
.breadcrumb a:hover { color: var(--button-color); }
.breadcrumb [aria-current="page"] { color: var(--primary-color); font-weight: var(--fw-semi); }

/* -------------------------------------------------------------- RICH TEXT --
   ⚠️ CORRECTION — this was previously an "APPROVED DEVIATION" resting on two
   claims, both of which are false:

     "The original applies NO typography to rich-text content"
       It applies plenty. Measured: paragraphs are Montserrat 16px/24px weight
       500 in #333, h4 is Lato 36px/44px, h5 30px/40px. Only the LISTS are
       unstyled, inheriting Arial 14px/20px.

     "...and no paragraph spacing"
       The spacing is authored into the CMS content, not the CSS: every block is
       separated by an empty <p> holding a zero-width joiner, rendering as a
       24px blank line. The original reads perfectly well.

   So the restyling below was not correcting an oversight, it was redesigning 26
   blog posts — and the `max-width: 68ch` was the worst of it, crushing the text
   column to 529px against the original's 1024. Combined with 17px/29.75px type
   and 18.4px inter-block margins stacked on top of the authored blank lines,
   posts ran a median 1742px longer than the original.

   Everything below is now transcribed from the original. The unstyled Arial
   lists and the browser-default #0000EE links are reproduced deliberately:
   they are how the live blog looks today, and changing them would be a visible
   redesign of every post rather than a fix to anything broken. */
/* `.blog-content` on the original. `min-width: 0` is required because this is a
   flex item here, and a flex item defaults to `min-width: auto` — meaning it
   refuses to shrink below its longest unbreakable word. Seven posts quote bare
   URLs, which at 390px stretched this column to 478px inside a 375px viewport
   and dragged the whole page sideways. On the original the same block sits in
   normal flow, so it keeps its 80% width and the URL simply overflows it. */
.post-detail-body { width: 80%; min-width: 0; margin-inline: auto; }

/* DELIBERATE FIX, flagged. The original overflows horizontally at 390px on
   those same seven posts — the bare URLs punch out of the text column and the
   whole page scrolls sideways on a phone. That is a real defect on the live
   site, not a design choice, and a sideways-scrolling page is exactly the kind
   of thing a migration gets blamed for. Wrapping long words costs nothing at
   any other width and changes no layout; it only stops the overflow.

   `anywhere`, not `break-word`: the two look identical once text is laid out,
   but only `anywhere` reduces the element's intrinsic MIN-CONTENT width. That
   distinction is the whole fix here — `break-word` stopped the visible overflow
   yet left the min-content at the URL's full length, so the flex chain above
   still sized itself to 478px and the page still scrolled sideways. */
.rich-text { overflow-wrap: anywhere; }
.rich-text p { margin: 0; font-size: 16px; line-height: 24px; }
/* NO size overrides on the headings — the original lets the site's global
   scale through, so an in-article h2 is 60px/72px and an h3 48px/60px. These
   had been downshifted to h4 and h5 sizes (36/44 and 30/40), another invented
   "improvement": posts using h2/h3 rather than h4/h5 came out over 800px short.
   Only the margin reset is ours, and that matches too. */
.rich-text h1, .rich-text h2, .rich-text h3,
.rich-text h4, .rich-text h5, .rich-text h6 { margin: 0; }
.rich-text ul, .rich-text ol {
  margin: 0 0 10px;
  padding-left: 40px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.rich-text li { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
.rich-text a { color: #00e; text-decoration: underline; }
.rich-text img { max-width: 100%; height: auto; }
.rich-text strong { font-weight: var(--fw-bold); }

/* ------------------------------------------------------------ TEAM DETAIL --
   No original to reproduce — all 12 of these pages were blank on Webflow. */
.team-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.team-detail-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 20%;      /* headshots: bias up so faces aren't cropped */
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
}
.team-detail-role {
  margin-bottom: .5rem;
  color: var(--button-color);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.team-detail-name { margin-bottom: 1.5rem; font-size: var(--h4-size); line-height: var(--h4-lh); }
.team-detail-bio + .team-detail-bio { margin-top: 1.5rem; }
.team-detail-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

@media screen and (max-width: 991px) {
  .team-detail-grid { grid-template-columns: 1fr; gap: 2rem; }
  .team-detail-photo { max-width: 420px; }
}
@media screen and (max-width: 479px) {
  .team-detail-actions { flex-direction: column; align-items: stretch; }
  .team-detail-actions a { width: 100%; }
}

/* --------------------------------------------------------- SERVICE DETAIL -- */
.service-detail-head { margin-bottom: 2rem; }
.service-detail-title { font-size: var(--h3-size); line-height: var(--h3-lh); }
.service-detail-image {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 2.5rem;
}
.service-detail-body { margin-bottom: 3rem; }

/* ------------------------------------------------------------ POST DETAIL -- */
.post-detail-head { margin-bottom: 2rem; }
.post-detail-title { max-width: 24ch; font-size: var(--h4-size); line-height: var(--h4-lh); }
.post-detail-meta { margin-top: 1rem; color: var(--muted-text); font-size: .95rem; }
.post-detail-meta:empty { display: none; }
.post-detail-image {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 2.5rem;
}
/* No bottom margin on the original's `.blog-content`. This 3rem sat AFTER the
   width rule above and would have been the only thing left inflating the post
   pages once the type was corrected. */
.post-detail-body { margin-bottom: 0; }

/* -------------------------------------------------------------------- CTA -- */
.service-cta, .post-cta {
  padding: 2.5rem;
  background: var(--primary-color);
  border-radius: var(--radius-lg);
  color: var(--white);
}
.service-cta-title, .post-cta-title { color: var(--white); font-size: var(--h5-size); line-height: var(--h5-lh); }
.service-cta p, .post-cta p { margin-top: .75rem; color: var(--white); }
.service-cta-actions, .post-cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.service-cta .strok-button, .post-cta .strok-button { border-color: var(--white); color: var(--white); }
.service-cta .strok-button:hover, .post-cta .strok-button:hover { background: var(--white); color: var(--primary-color); }

@media screen and (max-width: 479px) {
  .service-cta, .post-cta { padding: 1.75rem; }
  .service-cta-actions, .post-cta-actions { flex-direction: column; align-items: stretch; }
  .service-cta-actions a, .post-cta-actions a { width: 100%; }
}

/* ----------------------------------------------------- HOMEPAGE — CDCP bar -- */
.check-eligibility-section { position: relative; z-index: 10; }
/* Original `.canadian-design-wrapper`: flat 20px padding (not 2rem 2.5rem —
   that alone made this bar 24px too tall), a literal #2f3349 rather than the
   primary token, 1rem radius, and a 1260px cap it was missing entirely. */
.canadian-dental-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1260px;
  margin-inline: auto;
  padding: 20px;
  background-color: #2f3349;
  border-radius: 1rem;
}
/* This is an h5 on the original and carries NO size of its own, so it follows
   the responsive h5 scale — 30/40, then 24/32 at 991, 20.8/28.8 at 767. Pinning
   it to a flat 1.875rem/2.5rem held it at 30px all the way down; at 768 that is
   35px of extra wrapping. `--h5-size`/`--h5-lh` already carry the steps. */
.dental-canadian-title {
  color: var(--white);
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
}
@media screen and (max-width: 991px) { .dental-canadian-title { text-align: center; } }
@media screen and (max-width: 479px) { .dental-canadian-title { text-align: center; font-size: 1rem; } }

/* Transcribed from the original. The rebuild had `padding: 2rem 1.5rem` and no
   gap, against the original's 40px top/bottom (keeping the base 20px sides), a
   2rem gap between the copy and the button, and 97% width — 39px short and
   28px too wide at 991. */
@media screen and (max-width: 991px) {
  .canadian-dental-wrapper {
    flex-direction: column;
    gap: 2rem;
    width: 97%;
    padding-block: 40px;
    text-align: center;
  }
}
@media screen and (max-width: 479px) {
  .canadian-dental-wrapper { gap: 1.5rem; width: 94%; padding: 40px 10px; }
}

/* APPROVED DEVIATION — kept deliberately.
   The original has no min-width rule for the HEADER specifically, so between
   992 and ~1500px it runs the logo, six nav items and the CTA into each other.
   That is a layout defect, not a design choice, and 1440px is a very common
   screen — so these two blocks stay.
   (Correction to an earlier note here: the original DOES use min-width
   breakpoints elsewhere — 1280, 1440 and 1920 — for the inner-page heroes.
   Those are transcribed faithfully in inner.css.)
   Note the logo max-width here intentionally differs from the original's 240px
   at these widths only; below 992px it follows the original exactly. */
/* REMOVED — this block was a workaround for a bug of my own making.
   The nav looked crowded because `.header-content-wrapper` had only TWO
   children (the nav was nested inside `.header-right-side`), so space-between
   pushed the nav hard against the CTA. Restoring the original's THREE-column
   layout — logo | .header-middle | CTA — gives the nav its own column and the
   crowding disappears, so shrinking the logo to 200px and reducing the nav
   font are no longer needed. The logo is back at the original's 240px. */