/* ==========================================================================
   Dridian x Astra bridge
   Maps the Dridian design tokens (from design-system.css) onto Astra's markup
   so the whole site adopts the brand. Tuned against Astra defaults; if you have
   heavy Customizer color/typography settings, a few selectors may need nudging
   (do it here or in Appearance -> Customize -> Additional CSS).
   ========================================================================== */

/* ---- Page surfaces & base reading font ---------------------------------- */
body,
#page,
.ast-separate-container {
  background-color: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

/* Article / content card surfaces */
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .comment-respond {
  background-color: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-hairline);
}

/* ---- Headings -> Alegreya Sans ------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-single-post .entry-title,
.site-title,
.site-title a,
.widget-title {
  font-family: var(--font-ui) !important;
  color: var(--text-heading);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* ---- Links -> accent ---------------------------------------------------- */
a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-hover); }

/* ---- Header ------------------------------------------------------------- */
.site-header,
.ast-primary-header-bar,
.main-header-bar {
  background-color: var(--surface-page) !important;
  border-bottom: 1px solid var(--border-hairline);
}
.main-header-menu a,
.ast-builder-menu .main-header-menu a,
.main-navigation a { color: var(--text-body); }
.main-header-menu .current-menu-item > a,
.main-navigation .current-menu-item > a { color: var(--accent); }

/* ---- Buttons ------------------------------------------------------------ */
.wp-block-button__link,
.ast-button,
.ast-custom-button,
button:not(.menu-toggle):not(.slick-arrow),
input[type="submit"] {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
}
.wp-block-button__link:hover,
.ast-button:hover,
.ast-custom-button:hover,
button:not(.menu-toggle):not(.slick-arrow):hover,
input[type="submit"]:hover {
  background-color: var(--accent-hover);
  color: var(--accent-contrast);
}

/* ---- Small-caps kicker helper (usable in the editor) -------------------- */
.dridian-kicker {
  font-family: var(--font-smallcaps);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--accent);
}

/* ---- Content width to match the Dridian container ----------------------- */
.ast-container { max-width: var(--container-max); }

/* ---- Footer ------------------------------------------------------------- */
.site-footer,
.footer-adv,
.ast-small-footer {
  background-color: var(--ink) !important;
  color: var(--paper);
}
.site-footer a,
.ast-small-footer a { color: var(--aged-gold-soft); }

.dridian-footer-verse {
  text-align: center;
  padding: var(--space-6) var(--space-5);
  border-top: 1px solid rgba(166, 125, 83, 0.35);
  font-family: var(--font-reading);
}
.dridian-footer-verse span {
  display: block;
  font-style: italic;
  color: var(--paper);
  font-size: var(--text-lg);
  max-width: 44ch;
  margin-inline: auto;
}
.dridian-footer-verse cite {
  display: block;
  margin-top: var(--space-2);
  font-style: normal;
  font-family: var(--font-smallcaps);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-sm);
  color: var(--aged-gold-soft);
}

/* ==========================================================================
   Dark-skin adjustments (Lily / Word in Stone)
   The body carries .skin-lily / .skin-word-in-stone, so header & footer sit
   inside the skin mood rather than the light parent palette.
   ========================================================================== */
.skin-lily .site-header,
.skin-word-in-stone .site-header,
.skin-lily .ast-primary-header-bar,
.skin-word-in-stone .ast-primary-header-bar,
.skin-lily .main-header-bar,
.skin-word-in-stone .main-header-bar {
  background-color: var(--surface-paper) !important;
  border-bottom-color: var(--border-hairline);
}
.skin-lily .main-header-menu a,
.skin-word-in-stone .main-header-menu a,
.skin-lily .main-navigation a,
.skin-word-in-stone .main-navigation a { color: var(--text-body); }

.skin-lily .site-footer,
.skin-word-in-stone .site-footer,
.skin-lily .ast-small-footer,
.skin-word-in-stone .ast-small-footer {
  background-color: var(--surface-sunken) !important;
  color: var(--text-body);
}

/* Property display face on the big headings of a skinned page */
.skin-lily .entry-title,
.skin-word-in-stone .entry-title,
.skin-lily h1,
.skin-word-in-stone h1 {
  font-family: var(--font-display) !important;
}