/* ==========================================================================
   base.css — Perdana Dental
   --------------------------------------------------------------------------
   Element-level defaults built from tokens.css. Everything in this file styles
   a bare HTML element or a small, reusable primitive. Page- and component-
   specific rules go in main.css later — this file should stay stable.

   Rule: no raw values. Every colour and size references a var().
   ========================================================================== */

/* ==========================================================================
   1. DOCUMENT
   ========================================================================== */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--c-ink);
  background-color: var(--c-surface);
}

/* ==========================================================================
   2. TYPOGRAPHY

   Note the margin strategy: we set margin-block-end only (never top). Every
   element pushes the NEXT one down rather than pulling itself away from the
   one above. This avoids margin collapse surprises and means the first child
   of a section never needs a margin reset.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;   /* stops a heading leaving one orphan word on line 2 */
  margin-block-end: var(--space-4);
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

h5, h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

p {
  margin-block-end: var(--space-4);
  /* text-wrap: pretty prevents single-word last lines in paragraphs.
     Unsupported browsers ignore it, so it costs nothing. */
  text-wrap: pretty;
}

/* Constrain reading width wherever prose lives. Applied via a wrapper class
   rather than to <p> directly, so a paragraph inside a narrow card is not
   double-constrained. */
.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-block-start: var(--space-4);
}

/* Utility type sizes — used sparingly, for labels and fine print. */
.text-sm  { font-size: var(--text-sm); }
.text-xs  { font-size: var(--text-xs); }
.text-muted { color: var(--c-ink-muted); }

/* Eyebrow label above a heading. Uppercase needs letter-spacing or it reads
   as a solid block. */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-brand-dark);
  margin-block-end: var(--space-2);
}

/* ==========================================================================
   3. LINKS

   The underline is kept, not removed. Underlining is the only cue a
   colour-blind user has that a run of text is a link — WCAG 1.4.1 says
   colour alone must never carry meaning. text-underline-offset gives it
   breathing room so it looks deliberate rather than default.
   ========================================================================== */

a {
  color: var(--c-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease);
}

a:hover {
  color: var(--c-brand-dark);
  text-decoration-thickness: 2px;
}

/* Navigation and buttons opt out of underlines, because their role is
   already obvious from position and shape. */
.link-plain {
  text-decoration: none;
}

.link-plain:hover {
  text-decoration: underline;
}

/* ==========================================================================
   4. FOCUS — the most important 10 lines in this file

   :focus-visible shows the ring for keyboard users but not for mouse clicks,
   which is why we can afford a ring bold enough to actually be seen.

   Never write `outline: none` without an equally visible replacement. A site
   whose focus ring is invisible cannot be operated without a mouse.
   ========================================================================== */

:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* Skip link: the first thing in the DOM, hidden until focused. A keyboard
   user pressing Tab on page load can jump straight past the navigation to
   the content. WCAG 2.4.1. It costs six lines and most sites omit it. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--c-brand-dark);
  color: var(--c-on-brand);
  text-decoration: none;
  border-radius: var(--radius-md);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Visually hidden, but still read by screen readers.
   Use for things like "opens in a new tab" or the text of an icon-only
   button. Note it is NOT display:none — that would hide it from everyone. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   5. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: 48rem;
}

.section {
  padding-block: var(--space-section);
}

.section--alt {
  background-color: var(--c-surface-alt);
}

/* The "stack": vertical rhythm without touching each child.
   The owl selector `> * + *` targets every child that has a sibling before
   it, so the first child never gets an unwanted top margin. */
.stack > * + * {
  margin-block-start: var(--space-4);
}

.stack-lg > * + * {
  margin-block-start: var(--space-6);
}

/* Responsive grid with no media queries.
   auto-fit collapses empty tracks and minmax() lets each column shrink to
   its minimum before wrapping. min() guards the case where the viewport is
   narrower than the 18rem minimum, which would otherwise cause overflow. */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ==========================================================================
   6. BUTTONS

   min-height: 44px is not a style choice. It is the WCAG 2.5.5 / Apple HIG
   minimum touch target. Most of this clinic's visitors are on a phone,
   often one-handed, sometimes in pain. Small targets are a real failure.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.btn--primary {
  background-color: var(--c-brand);
  color: var(--c-on-brand);
}

.btn--primary:hover {
  background-color: var(--c-brand-dark);
  color: var(--c-on-brand);
}

/* Secondary uses --c-border-strong, not --c-border, so the button's boundary
   meets the 3:1 requirement for interactive components. */
.btn--secondary {
  background-color: var(--c-surface);
  color: var(--c-brand-dark);
  border-color: var(--c-border-strong);
}

.btn--secondary:hover {
  background-color: var(--c-brand-tint);
  color: var(--c-brand-dark);
  border-color: var(--c-brand-dark);
}

.btn--whatsapp {
  background-color: var(--c-wa);
  color: var(--c-on-brand);
}

.btn--whatsapp:hover {
  background-color: var(--c-wa-dark);
  color: var(--c-on-brand);
}

.btn--emergency {
  background-color: var(--c-danger);
  color: var(--c-on-brand);
}

.btn--full {
  width: 100%;
}

.btn__icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: currentColor;   /* icon follows the button's text colour automatically */
}

/* ==========================================================================
   7. CARDS AND PANELS
   ========================================================================== */

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

.card--raised {
  box-shadow: var(--shadow-sm);
}

/* The compliance note used on every service page (MDC Guidelines §3.2.9).
   It is styled to be noticed, not buried. The left border gives it weight
   without shouting. */
.notice {
  padding: var(--space-4) var(--space-5);
  background-color: var(--c-brand-tint);
  border-left: 4px solid var(--c-brand);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

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

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

/* Concept-build banner. Required on this project: these sites must never be
   mistaken for a real clinic's website. */
.concept-banner {
  padding: var(--space-3) var(--space-4);
  background-color: var(--c-ink);
  color: var(--c-surface);
  font-size: var(--text-sm);
  text-align: center;
}

.concept-banner a {
  color: var(--c-surface);
}

/* ==========================================================================
   8. TABLES — used by the fee schedule, the highest-value page on the site
   ========================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

caption {
  text-align: left;
  font-weight: var(--weight-semibold);
  margin-block-end: var(--space-3);
}

th,
td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-block-end: 1px solid var(--c-border);
}

thead th {
  font-weight: var(--weight-semibold);
  background-color: var(--c-surface-alt);
  border-block-end: 2px solid var(--c-border-strong);
}

/* Numeric columns align right so the ringgit amounts line up and can be
   compared down the column. */
.cell-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Wrapper that allows a wide fee table to scroll on a phone without breaking
   the page layout. tabindex="0" on the wrapper in the HTML makes it
   reachable by keyboard — a scrollable region a keyboard user cannot focus
   is an accessibility failure people rarely catch. */
.table-scroll {
  overflow-x: auto;
}

/* ==========================================================================
   9. LISTS
   ========================================================================== */

.list-plain {
  list-style: none;
  padding: 0;
}

.list-check {
  list-style: none;
  padding: 0;
}

.list-check li {
  position: relative;
  padding-inline-start: var(--space-6);
  margin-block-end: var(--space-3);
}

/* Decorative tick. aria-hidden is unnecessary because CSS-generated content
   from ::before is not exposed as meaningful content by modern screen
   readers, and the list semantics carry the meaning. */
.list-check li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.45em;
  width: 0.7em;
  height: 0.35em;
  border-inline-start: 2px solid var(--c-brand);
  border-block-end: 2px solid var(--c-brand);
  transform: rotate(-45deg);
}

/* ==========================================================================
   10. HELPERS
   ========================================================================== */

hr {
  height: 1px;
  border: 0;
  background-color: var(--c-border);
  margin-block: var(--space-6);
}

.text-center { text-align: center; }
.mb-0        { margin-block-end: 0; }

/* Print: strip navigation and interactive chrome, expose link targets.
   Patients print fee lists and directions. It costs almost nothing. */
@media print {
  .site-header,
  .site-footer,
  .btn,
  .skip-link,
  .concept-banner {
    display: none;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: var(--text-xs);
  }
}