/* ==========================================================================
   main.css — Perdana Dental
   --------------------------------------------------------------------------
   Page and component styles. Everything here is built from tokens.css.
   Organised top-to-bottom in the order a visitor meets it.

   Contents
     1.  Utility bar
     2.  Site header + navigation
     3.  Hero
     4.  Trust strip
     5.  Section headers
     6.  Service cards
     7.  Fee preview + fee table page
     8.  Dentist / credentials
     9.  Step list (first visit)
     10. Reviews
     11. Panels & payment
     12. Find us
     13. Booking band
     14. Site footer
     15. Service page layout
     16. FAQ accordion
     17. Breadcrumbs
     18. Page hero (interior pages)
   ========================================================================== */


/* ==========================================================================
   1. UTILITY BAR
   Dark strip above the header. Carries the phone number and the live
   open/closed state. Small, but it answers the two questions a person in
   pain asks first: are you open, and what is the number.
   ========================================================================== */

.utility-bar {
  background-color: var(--c-ink);
  color: var(--c-surface);
  font-size: var(--text-sm);
  padding-block: var(--space-2);
}

.utility-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
  justify-content: space-between;
}

.utility-bar a {
  color: var(--c-surface);
  text-decoration: none;
  font-weight: var(--weight-semibold);
}

.utility-bar a:hover {
  color: var(--c-surface);
  text-decoration: underline;
}

/* Open/closed pill. The dot is decorative; the text carries the meaning,
   so a colour-blind or screen-reader user is never relying on the colour. */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.status__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex-shrink: 0;
}

.status--open   { color: #7FE3B0; }
.status--closed { color: #FFB4A8; }


/* ==========================================================================
   2. SITE HEADER + NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--c-surface);
  border-block-end: 1px solid var(--c-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

/* --- Logo: a plain wordmark. MDC Guidelines §3.2.9(a)(x) requires logos to
   comply with Appendix A, which we could not retrieve. A typographic mark
   with no clinical imagery and no rank/award device is the safe position. */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  text-decoration: none;
  color: var(--c-ink);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.logo:hover { color: var(--c-ink); }

.logo__mark {
  color: var(--c-brand);
}

.logo__sub {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  letter-spacing: 0;
  color: var(--c-ink-muted);
  margin-block-start: 0.25em;
}

/* --- Navigation -------------------------------------------------------
   Mobile: a disclosure panel toggled by a button with aria-expanded.
   Desktop: a horizontal row, with the toggle hidden.
   The markup is identical at both sizes — only CSS changes. That is what
   keeps it accessible: there is one nav in the DOM, not two. */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--duration-fast) var(--ease);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top:  6px; }

.site-nav {
  display: none;
}

.site-nav[data-open="true"] {
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background-color: var(--c-surface);
  border-block-end: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
  padding: var(--space-4) var(--container-pad) var(--space-6);
}

.site-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-nav__link {
  display: block;
  padding: var(--space-3) var(--space-2);
  color: var(--c-ink);
  text-decoration: none;
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
}

.site-nav__link:hover {
  color: var(--c-brand-dark);
  background-color: var(--c-surface-alt);
}

/* aria-current="page" is set in the HTML, so the styling hook and the
   accessibility information are the same thing. No redundant class. */
.site-nav__link[aria-current="page"] {
  color: var(--c-brand-dark);
  font-weight: var(--weight-semibold);
  box-shadow: inset 3px 0 0 var(--c-brand);
}

.site-header__cta {
  display: none;
}

@media (min-width: 62rem) {
  .nav-toggle { display: none; }

  .site-nav,
  .site-nav[data-open="true"] {
    display: block;
    position: static;
    padding: 0;
    box-shadow: none;
    border: 0;
    background: none;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
  }

  .site-nav__link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
  }

  .site-nav__link[aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--c-brand);
  }

  .site-header__cta { display: inline-flex; }
}


/* ==========================================================================
   3. HERO
   ========================================================================== */

.hero {
  background-color: var(--c-brand-tint);
  /* Subtle diagonal wash. Pure CSS — no image request, no layout shift. */
  background-image:
    linear-gradient(160deg, var(--c-brand-tint) 0%, #F4FAFD 55%, var(--c-surface) 100%);
  padding-block: var(--space-8) var(--space-9);
  border-block-end: 1px solid var(--c-border);
}

.hero__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.hero__title {
  margin-block-end: var(--space-4);
}

.hero__lede {
  font-size: var(--text-lg);
  color: var(--c-ink-muted);
  max-width: 34rem;
  margin-block-end: var(--space-5);
}

.hero__actions {
  margin-block-end: var(--space-4);
}

/* MDC Code of Professional Conduct 1.9(d): only general information may be
   given electronically. This line appears at every WhatsApp entry point. */
.hero__note,
.wa-note {
  font-size: var(--text-sm);
  color: var(--c-ink-muted);
  max-width: 34rem;
}

.hero__media {
  display: none;
}

@media (min-width: 55rem) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-8);
  }
  .hero__media { display: block; }
}


/* ==========================================================================
   4. TRUST STRIP
   Four facts, above the fold. No adjectives — MDC §2.1 requires information
   to be factual and substantiable, and §2.2(a) forbids drawing undue
   attention to the practitioner. Facts do both jobs at once.
   ========================================================================== */

.trust-strip {
  background-color: var(--c-surface);
  border-block-end: 1px solid var(--c-border);
}

.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-6);
}

.trust-item__value {
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--c-brand-dark);
  line-height: var(--leading-tight);
}

.trust-item__label {
  display: block;
  font-size: var(--text-sm);
  color: var(--c-ink-muted);
  margin-block-start: var(--space-1);
}

@media (min-width: 48rem) {
  .trust-strip__grid { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   5. SECTION HEADERS
   ========================================================================== */

.section-head {
  max-width: 46rem;
  margin-block-end: var(--space-6);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head p {
  color: var(--c-ink-muted);
  margin-block-end: 0;
}


/* ==========================================================================
   6. SERVICE CARDS
   ========================================================================== */

.service-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--c-ink);
  transition:
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}

.service-card:hover {
  color: var(--c-ink);
  border-color: var(--c-brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.service-card__icon {
  width: 2.25rem;
  height: 2.25rem;
  margin-block-end: var(--space-3);
  color: var(--c-brand);
}

.service-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-block-end: var(--space-1);
}

/* The Bahasa Malaysia term sits directly under the English name. This is a
   relevance signal and a usability one — many patients search the BM term
   and scan for it. */
.service-card__alt {
  font-size: var(--text-sm);
  color: var(--c-brand-dark);
  font-style: italic;
  margin-block-end: var(--space-3);
}

.service-card__desc {
  font-size: var(--text-sm);
  color: var(--c-ink-muted);
  margin-block-end: var(--space-4);
  flex-grow: 1;
}

.service-card__fee {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--c-ink);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--c-border);
}


/* ==========================================================================
   7. FEE PREVIEW + FEE PAGE
   ========================================================================== */

.fee-panel {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.fee-panel__head {
  padding: var(--space-5);
  background-color: var(--c-surface-alt);
  border-block-end: 1px solid var(--c-border);
}

.fee-panel__body { padding: var(--space-2) var(--space-5) var(--space-5); }

.fee-note {
  padding: var(--space-4) var(--space-5);
  background-color: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--c-ink-muted);
}

.fee-note > :last-child { margin-block-end: 0; }

/* Inline fee block used near the top of every service page. */
.fee-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  background-color: var(--c-brand-tint);
  border-radius: var(--radius-md);
  margin-block-end: var(--space-5);
}

.fee-inline__value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--c-brand-dark);
}

.fee-inline__label {
  font-size: var(--text-sm);
  color: var(--c-ink-muted);
}


/* ==========================================================================
   8. DENTIST / CREDENTIALS
   A credential block, not a founder story. MDC §2.2(a) prohibits drawing
   undue attention to the practitioner; §3.2.9 explicitly permits name,
   qualifications, honorary titles and photograph. So: facts, listed.
   ========================================================================== */

.dentist {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.dentist__portrait {
  width: 100%;
  max-width: 18rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  background-color: var(--c-surface-alt);
}

.credentials {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-3);
}

.credentials li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--space-3);
  font-size: var(--text-sm);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--c-border);
}

.credentials dt,
.credentials .credentials__key {
  color: var(--c-ink-muted);
}

.credentials .credentials__val {
  font-weight: var(--weight-medium);
}

@media (min-width: 48rem) {
  .dentist { grid-template-columns: 18rem 1fr; gap: var(--space-8); }
}


/* ==========================================================================
   9. STEP LIST
   ========================================================================== */

.steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: var(--space-5);
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 3.25rem;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background-color: var(--c-brand);
  color: var(--c-on-brand);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

.steps__title {
  font-weight: var(--weight-semibold);
  margin-block-end: var(--space-1);
}

.steps__body {
  color: var(--c-ink-muted);
  font-size: var(--text-sm);
  margin-block-end: 0;
}

@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}


/* ==========================================================================
   10. REVIEWS
   ========================================================================== */

.review-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

.stars {
  display: inline-flex;
  gap: 2px;
  margin-block-end: var(--space-3);
}

.stars svg {
  width: 1rem;
  height: 1rem;
  fill: #C77700;   /* 4.6:1 on white — a readable amber, not the usual pale gold */
}

.review-card__text {
  font-size: var(--text-sm);
  margin-block-end: var(--space-4);
  flex-grow: 1;
}

.review-card__meta {
  font-size: var(--text-xs);
  color: var(--c-ink-muted);
  margin-block-end: 0;
}

.review-card__name {
  font-weight: var(--weight-semibold);
  color: var(--c-ink);
}

.rating-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-5);
  background-color: var(--c-surface-alt);
  border-radius: var(--radius-lg);
  margin-block-end: var(--space-6);
}

.rating-summary__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 1;
}


/* ==========================================================================
   11. PANELS & PAYMENT
   ========================================================================== */

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.pill {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}


/* ==========================================================================
   12. FIND US
   ========================================================================== */

.find-us {
  display: grid;
  gap: var(--space-6);
}

.hours-table th,
.hours-table td { padding: var(--space-2) 0; }

.hours-table th { background: none; border-block-end: 1px solid var(--c-border); }

.hours-table tr[data-today="true"] {
  color: var(--c-brand-dark);
  font-weight: var(--weight-semibold);
}

/* Map placeholder. The real iframe is only inserted after a click, so the
   ~700KB Google Maps payload never touches first load. Speed is a local
   ranking factor; an eager map embed is the most common way it is lost. */
.map-embed {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-5);
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 55rem) {
  .find-us { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}


/* ==========================================================================
   13. BOOKING BAND
   ========================================================================== */

.booking-band {
  background-color: var(--c-brand-dark);
  color: var(--c-surface);
  padding-block: var(--space-8);
}

.booking-band h2 { color: var(--c-surface); }

.booking-band p { color: #D6E9F2; }

.booking-band .btn--secondary {
  background: none;
  color: var(--c-surface);
  border-color: rgba(255, 255, 255, 0.55);
}

.booking-band .btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--c-surface);
  border-color: var(--c-surface);
}


/* ==========================================================================
   14. SITE FOOTER
   The NAP block here must byte-match the Google Business Profile exactly.
   Not "similar" — identical. That is why it is generated, not copy-pasted.
   ========================================================================== */

.site-footer {
  background-color: var(--c-ink);
  color: #C6D4DE;
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--text-sm);
}

.site-footer h2,
.site-footer h3 {
  color: var(--c-surface);
  font-size: var(--text-base);
  margin-block-end: var(--space-3);
}

.site-footer a {
  color: #C6D4DE;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--c-surface);
  text-decoration: underline;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-6);
  margin-block-end: var(--space-7);
}

.site-footer__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.site-footer__legal {
  padding-block-start: var(--space-5);
  border-block-start: 1px solid rgba(255, 255, 255, 0.15);
  color: #94A8B6;
  font-size: var(--text-xs);
}

.site-footer__legal p { margin-block-end: var(--space-2); }

@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}


/* ==========================================================================
   15. SERVICE PAGE LAYOUT
   ========================================================================== */

.article-layout {
  display: grid;
  gap: var(--space-7);
}

.article-body h2 { margin-block-start: var(--space-7); }
.article-body h2:first-child { margin-block-start: 0; }
.article-body h3 { margin-block-start: var(--space-5); }
.article-body ul,
.article-body ol { margin-block-end: var(--space-4); padding-inline-start: var(--space-5); }
.article-body li { margin-block-end: var(--space-2); }

/* Clinical review byline. MDC §3.2.9(a)(xv) lists "date of the last update"
   as a permitted/expected website content item, and Google treats author
   accountability as an E-E-A-T signal on health topics. One line, two jobs. */
.byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--c-surface-alt);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--c-ink-muted);
  margin-block-end: var(--space-6);
}

.byline strong { color: var(--c-ink); font-weight: var(--weight-semibold); }

.sidebar {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.sidebar__card {
  padding: var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background-color: var(--c-surface);
}

.sidebar__card h2,
.sidebar__card h3 {
  font-size: var(--text-base);
  margin-block-end: var(--space-3);
}

@media (min-width: 62rem) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--space-8);
  }
  .sidebar { position: sticky; top: 6rem; }
}


/* ==========================================================================
   16. FAQ ACCORDION
   Built on <details>/<summary>. Native disclosure semantics, keyboard
   operable and screen-reader announced with zero JavaScript. Reach for a
   custom accordion only when the native element genuinely cannot do the job.
   ========================================================================== */

.faq {
  display: grid;
  gap: var(--space-3);
}

.faq details {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background-color: var(--c-surface);
}

.faq summary {
  padding: var(--space-4) var(--space-5);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: 44px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  flex-shrink: 0;
  border-inline-end: 2px solid var(--c-brand);
  border-block-end: 2px solid var(--c-brand);
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease);
}

.faq details[open] summary::after { transform: rotate(-135deg); }

.faq details[open] summary { border-block-end: 1px solid var(--c-border); }

.faq__body { padding: var(--space-4) var(--space-5); }
.faq__body > :last-child { margin-block-end: 0; }


/* ==========================================================================
   17. BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
  font-size: var(--text-sm);
  padding-block: var(--space-4);
}

.breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--c-ink-muted);
}

.breadcrumbs li + li::before {
  content: "/";
  margin-inline-end: var(--space-2);
  color: var(--c-border-strong);
}


/* ==========================================================================
   18. PAGE HERO (interior pages)
   ========================================================================== */

.page-hero {
  background-color: var(--c-surface-alt);
  border-block-end: 1px solid var(--c-border);
  padding-block: var(--space-6) var(--space-7);
}

.page-hero__lede {
  font-size: var(--text-lg);
  color: var(--c-ink-muted);
  max-width: var(--measure);
  margin-block-end: 0;
}