/* ============================================================
   dentistaarequipa27 · base — elements, header/footer, typography polish

   Authored entirely against the design system's SEMANTIC aliases
   (--surface-*, --text-*, --brand-ink, --on-brand, --border-*) and
   its scales (--text-*, --space-*, --radius-*, --shadow-*,
   --duration-*/--ease-*). No raw ramp step, no ad-hoc hex, no
   ad-hoc length. See assets/css/tokens.css for the architecture.
   ============================================================ */

body {
  background: var(--surface-page);
  color: var(--text-body);
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--surface-accent);
  color: var(--accent-ink);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-xs);
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

.dt-page-title {
  margin-top: var(--space-4);
}

.dt-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0 0 var(--space-2);
}
/* double-class: components.css restyles .dt-eyebrow later in the cascade,
   so the modifiers need to outrank any single-class rule. */
.dt-eyebrow.dt-eyebrow--center {
  text-align: center;
}
.dt-eyebrow.dt-eyebrow--on-dark {
  /* ≥0.92 alpha: .84 measures 4.46:1 on the #087471 band — an AA miss */
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- icons (DS sprite, inlined by inc/icons.php) ---------- */
/* DS .da-icon defaults: outline glyphs inherit these; filled glyphs
   (i-fb, i-star, g-spark, …) carry their own fill/stroke attributes on the
   symbol, which override the inherited values. */
.dt-icon {
  flex: none;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- header (DS SiteHeader) ---------- */
/* The blur lives on a ::before, NOT on .dt-header: backdrop-filter turns an
   element into the containing block for position:fixed descendants, which
   collapses the navigation's fullscreen mobile overlay into the header
   strip. A pseudo-element only contains its own (nonexistent) descendants. */
.dt-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
  transition: padding var(--duration-base) var(--ease-standard);
}
.dt-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface-header);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dt-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  padding-block: var(--space-2);
}
.dt-header__bar {
  align-items: center;
  gap: var(--space-6);
}

/* the DS wordmark lockup: mark + name over "CENTRO ODONTOLÓGICO" */
.dt-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex: none;
}
.dt-brand__mark {
  display: block;
  object-fit: contain;
}
.dt-brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 17px;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  white-space: nowrap;
}
.dt-brand__tag {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 8.5px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-500); /* logotype colour — brand mark, WCAG-exempt */
  white-space: nowrap;
}
.dt-brand--footer .dt-brand__name {
  font-size: 15px;
}
.dt-brand--footer .dt-brand__tag {
  font-size: 8px;
}

/* primary navigation: DS 14px semibold ink, teal underline on the current
   item, chevroned dropdown panels on card surface */
.dt-header__nav {
  min-width: 0;
}
/* WP doesn't emit the nav blockGap from static template-part markup — set
   the DS nav rhythm explicitly. */
.dt-header__nav .wp-block-navigation__container {
  gap: var(--space-6);
}
/* the WP overlay breakpoint is a fixed 600px; with brand + 7 nav items +
   actions the bar overflows below ~1140px — raise the hamburger to there. */
@media (max-width: 1139px) {
  .dt-header__nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
  .dt-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}
.dt-header__nav .wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--text-strong);
  white-space: nowrap;
}
.dt-header__nav .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--accent-ink);
}
/* DS active underline. aria-current is stamped by
   dentistaarequipa27_nav_mark_current() (exact path match); the :has() rule
   extends it to submenu ancestors and stays a SEPARATE rule so browsers
   without :has() keep the exact-match one. Top-level only: the ul is
   .wp-block-navigation__container, submenus use __submenu-container. */
.dt-header__nav .wp-block-navigation__container > li > [aria-current] {
  position: relative;
}
.dt-header__nav .wp-block-navigation__container > li > [aria-current]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -6px;
  height: 3px;
  border-radius: var(--radius-xs);
  background: var(--accent-500);
}
.dt-header__nav .wp-block-navigation__container > li:has([aria-current]) > .wp-block-navigation-item__content {
  position: relative;
}
.dt-header__nav .wp-block-navigation__container > li:has([aria-current]) > .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -6px;
  height: 3px;
  border-radius: var(--radius-xs);
  background: var(--accent-500);
}
.dt-header__nav .wp-block-navigation__submenu-container {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
}
.dt-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.dt-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--surface-accent);
}
/* the mobile overlay inherits the page surfaces in both themes. Core paints
   it white via a 5-class rule
   (.wp-block-navigation:not(.has-background) …:not(.disable-default-overlay))
   — the doubled .is-menu-open outranks it in both themes. */
.dt-header__nav .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
  background: var(--surface-page);
  color: var(--text-body);
}
.dt-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--text-strong);
  font-size: var(--text-md);
}
/* inside the overlay, submenus render expanded — flatten the dropdown-card
   treatment into an indented list */
.dt-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none;
  padding: 0 0 0 var(--space-4);
}
.dt-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}
.dt-header__nav .wp-block-navigation__responsive-container-close {
  color: var(--text-strong);
}

.dt-header__actions {
  align-items: center;
  gap: var(--space-3);
  flex-wrap: nowrap;
  flex: none;
}
.dt-header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-ui);
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
}
.dt-header__phone .dt-icon {
  color: var(--accent-500);
}
.dt-header__phone:hover {
  color: var(--accent-ink);
}
@media (max-width: 1180px) {
  .dt-header__phone span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}
@media (max-width: 840px) {
  .dt-header .dt-btn--cta {
    display: none; /* the sticky mobile bar already carries "Reservar cita" */
  }
  .dt-brand__tag {
    display: none;
  }
}

/* theme toggle */
.dt-theme-toggle {
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-control);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: var(--transition-control);
}
.dt-theme-toggle:hover {
  border-color: var(--border-brand);
}
.dt-theme-toggle__icon {
  grid-area: 1 / 1;
  color: var(--text-muted);
  transition: var(--transition-control);
}
.dt-theme-toggle:hover .dt-theme-toggle__icon {
  color: var(--accent-ink);
}
/* Light mode shows the moon ("switch to dark"); dark mode shows the sun. */
.dt-theme-toggle__icon--sun {
  display: none;
}
:root[data-theme="dark"] .dt-theme-toggle__icon--moon {
  display: none;
}
:root[data-theme="dark"] .dt-theme-toggle__icon--sun {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dt-theme-toggle__icon--moon {
    display: none;
  }
  :root:not([data-theme="light"]) .dt-theme-toggle__icon--sun {
    display: block;
  }
}

/* ---------- buttons ---------- */
.wp-block-button__link,
.dt-btn {
  transition: var(--transition-control);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--surface-brand);
  color: var(--on-brand);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--surface-brand-hover);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--border-brand);
  color: var(--brand-ink);
  background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--surface-brand);
  color: var(--on-brand);
}
/* Primary conversion button. Same brand fill as any button — it earns its
   emphasis from the brand shadow, not from a second colour system. */
.dt-btn--cta .wp-block-button__link {
  background: var(--surface-brand);
  color: var(--on-brand);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-brand);
}
.dt-btn--cta .wp-block-button__link:hover {
  background: var(--surface-brand-hover);
}
/* On an inverse/brand ground. --on-brand and --text-inverse are the two
   aliases that stay LIGHT and DARK respectively in both themes, so this pair
   survives the dark flip without a second rule. */
.dt-btn--on-dark .wp-block-button__link {
  background: var(--on-brand);
  color: var(--surface-brand);
}
.dt-btn--ghost .wp-block-button__link {
  border-color: var(--text-on-dark);
  color: var(--text-on-dark);
  background: transparent;
}
.dt-btn--ghost .wp-block-button__link:hover {
  background: var(--brand-tint);
  color: var(--text-on-dark);
}
.dt-btn--urgencia .wp-block-button__link {
  background: var(--status-danger);
  color: var(--text-inverse);
}

/* generic (non-block) buttons used by the wizard */
.dt-btn {
  display: inline-block;
  font: var(--type-button);
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  padding: 0.65em 1.4em;
  cursor: pointer;
  text-decoration: none;
}
.dt-btn--primary {
  background: var(--surface-brand);
  color: var(--on-brand);
}
.dt-btn--primary:hover {
  background: var(--surface-brand-hover);
}
.dt-btn--secondary {
  background: var(--surface-control);
  border-color: var(--border-subtle);
  color: var(--brand-ink);
}
.dt-btn--secondary:hover {
  border-color: var(--border-brand);
}
.dt-btn--text {
  background: transparent;
  color: var(--brand-ink);
  padding-inline: 0.4em;
}
/* DS button variants used by the portada sections. Icon-carrying buttons
   are inline-flex so the arrow/calendar glyph aligns with the label. */
.dt-btn--navy,
.dt-btn--compact,
.dt-btn--on-dark-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.dt-btn--navy {
  background: var(--action-navy);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-on-dark);
}
.dt-btn--navy:hover {
  background: var(--action-navy-hover);
  color: var(--text-on-dark);
}
.dt-btn--compact {
  background: var(--action-primary);
  color: var(--text-on-dark);
  font-weight: var(--weight-bold);
}
.dt-btn--compact:hover {
  background: var(--action-primary-hover);
  color: var(--text-on-dark);
}
.dt-btn--on-dark-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--text-on-dark);
  font-size: var(--text-sm);
}
.dt-btn--on-dark-ghost:hover {
  border-color: var(--text-on-dark);
  color: var(--text-on-dark);
}
.dt-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- breadcrumbs ---------- */
.dt-breadcrumbs {
  font-size: var(--text-sm);
  margin-block: var(--space-3) 0;
}
.dt-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  color: var(--text-muted);
}
.dt-breadcrumbs li + li::before {
  content: "›";
  margin-inline-end: var(--space-1);
  color: var(--border-strong);
}
.dt-breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}
.dt-breadcrumbs a:hover {
  color: var(--text-link-hover);
}
.dt-breadcrumbs [aria-current="page"] {
  color: var(--text-body);
  font-weight: var(--weight-medium);
}

/* ---------- forms ---------- */
.dt-form__row {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
}
.dt-form label {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}
.dt-form input,
.dt-form select,
.dt-form textarea,
.wp-block-search__input {
  font: inherit;
  color: var(--text-body);
  background: var(--surface-control);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  padding: 0.6em 0.8em;
  transition: var(--transition-control);
}
.dt-form input:focus,
.dt-form select:focus,
.dt-form textarea:focus {
  border-color: var(--border-brand);
  box-shadow: var(--ring-focus);
  outline: none;
}
.dt-form__hp {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---------- footer (DS SiteFooter) ---------- */
.dt-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
  margin-block-start: var(--section-y);
  padding: var(--section-y-tight) var(--gutter) var(--space-6);
}
.dt-footer a {
  text-decoration: none;
}
.dt-footer a:hover {
  text-decoration: underline;
}
.dt-footer__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.35fr;
  gap: var(--space-8) var(--space-7);
  align-items: start;
}
@media (max-width: 900px) {
  .dt-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .dt-footer__grid {
    grid-template-columns: 1fr;
  }
}
.dt-footer__blurb {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  max-width: 26ch;
}
.dt-footer__social {
  list-style: none;
  display: flex;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
}
.dt-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  color: var(--text-strong);
  background: var(--surface-card);
  transition: var(--transition-control);
}
.dt-footer__social a:hover {
  border-color: var(--border-brand);
  color: var(--accent-ink);
}
.dt-footer__coltitle {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-meta);
  color: var(--text-strong);
}
.dt-footer__links,
.dt-404__pages {
  list-style: none;
  padding: 0;
  font-size: var(--text-sm);
}
.dt-footer__links .wp-block-navigation-item__content {
  color: var(--text-muted);
}
.dt-footer__links .wp-block-navigation-item__content:hover {
  color: var(--text-link-hover);
}
.dt-404__pages .wp-block-pages-list__item {
  margin-block: var(--space-1);
}
/* only top-level pillars in footer/404 lists */
.dt-footer__links .submenu-container,
.dt-footer__links .wp-block-navigation__submenu-container,
.dt-404__pages .submenu-container,
.dt-404__pages .wp-block-navigation__submenu-container {
  display: none;
}
.dt-footer__contact {
  border-inline-start: 1px solid var(--border-subtle);
  padding-inline-start: var(--space-7);
}
@media (max-width: 560px) {
  .dt-footer__contact {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}
.dt-footer__row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}
.dt-footer__row .dt-icon {
  color: var(--accent-ink);
  margin-top: 3px;
}
.dt-footer__row a {
  color: var(--text-muted);
}
.dt-footer__note {
  margin: var(--space-8) 0 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.dt-footer__legal {
  border-top: 1px solid var(--border-subtle);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.dt-footer__legal p {
  margin: 0;
}
.dt-footer__legal a {
  color: var(--text-muted);
}
.dt-footer__legal nav {
  display: flex;
  gap: var(--space-5);
}

/* ---------- misc ---------- */
.dt-post-meta {
  color: var(--text-muted);
  margin-block-end: var(--space-4);
}
.dt-post-hero img {
  border-radius: var(--radius-media);
}
.dt-404 {
  padding-block: var(--section-y-tight);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* [hidden] must always win: any class that sets `display` (e.g. .dt-btn's
   inline-block) otherwise overrides the UA's [hidden]{display:none} and
   "hidden" elements render. Belt-and-braces for every JS-toggled element. */
[hidden] {
  display: none !important;
}

/* Core's is-style-stripes hardcodes #f0f0f0 stripes — invisible-text bait in
   dark mode. Re-ground the stripe on the token so both themes stay legible. */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: var(--surface-subtle);
}

/* WCAG 1.4.1: links inside running text must not rely on colour alone.
   :where() keeps the :not() chain at zero specificity so card-style links
   (.dt-service-card, .dt-fromblog__posttitle a, …) can opt out with a
   single class. */
main p a:where(:not(.wp-block-button__link):not(.dt-btn)),
main li a:where(:not(.wp-block-button__link):not(.dt-btn)) {
  text-decoration: underline;
  text-underline-offset: 2px;
}