/* ==========================================================================
   FRESH DENTAL SOLUTIONS — BRAND LAYER
   ==========================================================================
   The visual-identity layer added on top of the "Clinical Editorial"
   system: the logo lockup in nav/footer, real-presence line icons in place
   of card-service-icon's emoji, the home hero's decorative art, and quiet
   section-band texture. Owned entirely by this pass — css/tokens.css,
   base.css, components.css, morphic.css, kb.css and modes.css are another
   agent's territory and are never touched or duplicated here.

   Depends on: tokens.css (semantic tokens only), components.css,
   morphic.css. Load this file LAST on every page (after modes.css where
   present) so its few deliberate overrides always win ties cleanly.
   All url(...) paths below are relative to THIS file's location (css/),
   so they resolve the same way regardless of which page includes it —
   no root-prefix logic needed here.
   ========================================================================== */

/* ==========================================================================
   LOGO LOCKUP — nav + footer
   ==========================================================================
   Markup (see the seven chrome copies + tools/gen-kb.js's shell template):
     <a class="nav-logo" ...><img class="nav-logo-lockup" src="images/logo-lockup.svg" alt=""></a>
     <p class="footer-logo"><img class="footer-logo-lockup" src="images/logo-lockup-footer.svg" alt="">
       <span class="visually-hidden">Fresh Dental Solutions</span></p>
   Both source files are self-contained (their own light/dark handling,
   see the SVGs' own comments) — nothing here needs to react to theme. */

.nav-logo {
  /* The base rule aligns two text spans on their baseline; a single image
     child reads better vertically centered. */
  align-items: center;
}
/* The lockup is wrapped in <picture> so the dark variant is chosen by a
   media query the PAGE evaluates. Relying on prefers-color-scheme inside the
   SVG does not work: an <img>-loaded SVG renders in its own context and in
   many browsers never sees the page's dark scheme, which left the "Fresh"
   half of the wordmark near-black on a dark background — invisible. */
.nav-logo picture,
.footer-logo picture { display: inline-flex; }

.nav-logo-lockup {
  display: block;
  height: 1.75rem;
  width: auto;
}

.footer-logo {
  display: flex;
  align-items: center;
}
.footer-logo-lockup {
  display: block;
  height: 1.75rem;
  width: auto;
}

/* ==========================================================================
   ICON SET — card-service-icon gets a real drawn mark instead of an emoji
   ==========================================================================
   js/morphic.js emits a <svg> (js/icons.js) inside the existing
   .card-service-icon box wherever a bones item's title matches the icon
   keyword table; the box itself needs no size change; the icon is a
   deliberate 28px inside it (real presence, not a speck). Color inherits
   from the box's own currentColor so it's already theme-safe. */

.card-service-icon { color: var(--brand); }
.morphic-section.is-featured .card-service-icon { color: var(--brand-hover); }

/* The one statement node with an icon (see js/morphic.js's 'statement'
   case) — a quiet centered anchor above the callout heading. */
.statement-icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-3);
  color: var(--brand);
}
.statement-icon svg { width: 32px; height: 32px; }

/* ==========================================================================
   HERO ART — fills the empty column beside the home hero's copy
   ==========================================================================
   js/morphic.js's hero case wraps the existing heading/body/actions in a
   new .hero-copy and adds a sibling <img class="hero-art"> plus a
   `has-art` modifier on the existing .hero-inner when there's room for it.
   `.hero-inner` alone (morphic.css) still caps at 46rem for the muted/no-
   art path; `.hero-inner.has-art` is two classes, so it always wins that
   tie without needing to touch morphic.css. */

.hero-inner.has-art {
  max-width: var(--container);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  align-items: center;
  gap: var(--s-10);
}
.hero-copy { max-width: 46rem; }
.hero-art {
  justify-self: end;
  width: 100%;
  max-width: 21rem;
  height: auto;
}

@media (max-width: 64rem) {
  .hero-inner.has-art {
    grid-template-columns: 1fr;
    max-width: 46rem;
  }
  .hero-art { display: none; }
}

/* ==========================================================================
   TEAM AVATAR PLACEHOLDER
   ==========================================================================
   js/morphic.js's isTeam branch now renders images/avatar-placeholder.svg
   through the SAME .card-team-photo <img> class a real photo uses, so it
   is already the identical 128px circle with the same border/shadow — no
   rule needed here at all. (Kept as a marker comment so the two pieces —
   the markup change and this stylesheet — are easy to find together.) */

/* ==========================================================================
   SECTION-BAND TEXTURE
   ==========================================================================
   A very quiet, tileable accent (images/pattern-weave.svg) reserved for
   sections that would otherwise be plain flat text (about/statement-style
   content) — deliberately excluded from anything that already has its own
   visual interest (hero, cta-band, and any card grid), so it never
   competes with the icons/cards/art placed elsewhere. */

.morphic-section:not(:has(.hero)):not(:has(.cta-band)):not(:has(.service-grid)):not(:has(.team-grid)):not(:has(.grid)):not(:has(.grid-asym)) {
  background-image: url('../images/pattern-weave.svg');
  background-repeat: repeat;
  background-size: 120px 120px;
}

.cta-band {
  background-image: url('../images/pattern-weave.svg');
  background-repeat: repeat;
  background-size: 120px 120px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 30rem) {
  .nav-logo-lockup, .footer-logo-lockup { height: 1.5rem; }
}