/*
 * WTPATB Child Theme — Custom Styles
 * Extends Twenty Twenty-Four with brand-specific overrides.
 * Brand tokens are defined in theme.json; this file handles
 * structural overrides, utility classes, and component polish.
 */

/* ── Google Fonts fallback (also loaded via functions.php) ───── */
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Manrope:wght@200..800&display=swap');

/* ── CSS custom properties ────────────────────────────────────── */
:root {
  --wtpatb-paper:      #f2ede0;
  --wtpatb-ink:        #141414;
  --wtpatb-blue:       #2a4fb8;
  --wtpatb-ember:      #e2483d;
  --wtpatb-plum:       #5b3a8c;
  --wtpatb-display:    "Abril Fatface", Georgia, serif;
  --wtpatb-sans:       "Manrope", system-ui, sans-serif;
}

/* ── Base resets ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--wtpatb-sans);
  background-color: var(--wtpatb-paper);
  color: var(--wtpatb-ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Texture overrides ────────────────────────────────────────────
   background-image is NOT set by WP inline styles, so these rules
   always win — no !important needed on color; just image + repeat.
   JS (wtpatb-textures.js) injects these classes AND the data: URLs.
   Fallback background-color is the plain brand hex (pre-JS paint).
   ─────────────────────────────────────────────────────────────── */

/* Body = paper texture */
body { background-image: var(--wtpatb-texture-paper-url, none); background-repeat: repeat; }

/* Explicit texture classes (added by auto-apply JS) */
.wtp-texture-paper {
  background-color: var(--wtpatb-paper) !important;
  background-image: var(--wtpatb-texture-paper-url, none) !important;
  background-repeat: repeat !important;
}
.wtp-texture-ink {
  background-color: var(--wtpatb-ink) !important;
  background-image: var(--wtpatb-texture-ink-url, none) !important;
  background-repeat: repeat !important;
}
.wtp-texture-blue {
  background-color: var(--wtpatb-blue) !important;
  background-image: var(--wtpatb-texture-blue-url, none) !important;
  background-repeat: repeat !important;
}
.wtp-texture-ember {
  background-color: var(--wtpatb-ember) !important;
  background-image: var(--wtpatb-texture-ember-url, none) !important;
  background-repeat: repeat !important;
}
.wtp-texture-plum {
  background-color: var(--wtpatb-plum) !important;
  background-image: var(--wtpatb-texture-plum-url, none) !important;
  background-repeat: repeat !important;
}

/* Nav header — always ink texture */
.wtpatb-header {
  background-color: var(--wtpatb-ink) !important;
  background-image: var(--wtpatb-texture-ink-url, none) !important;
  background-repeat: repeat !important;
}

/* Footer — always ink texture */
.wtpatb-footer {
  background-color: var(--wtpatb-ink) !important;
  background-image: var(--wtpatb-texture-ink-url, none) !important;
  background-repeat: repeat !important;
}

/* ── Header ───────────────────────────────────────────────────── */
.wtpatb-header {
  z-index: 200;
  /* background handled by texture rules above */
}

.wtpatb-nav-top {
  height: 72px;
  border-bottom: 1px solid rgba(242, 237, 224, 0.1);
}

.wtpatb-nav-secondary {
  height: 44px;
}

.wtpatb-nav-secondary .wp-block-navigation a {
  color: var(--wtpatb-paper) !important;
  opacity: 0.75;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.15s;
}

.wtpatb-nav-secondary .wp-block-navigation a:hover {
  opacity: 1;
}

.wtpatb-nav-top .wp-block-navigation a {
  color: var(--wtpatb-paper) !important;
}

/* ── Logo sizing ──────────────────────────────────────────────── */
.wtpatb-logo .wp-block-site-logo img,
.wtpatb-header .wp-block-site-logo img {
  max-height: 40px;
  width: auto;
}

/* Footer uses the SAME uploaded (dark) site logo, inverted to read on ink.
   Upload assets/logo-wide-ink.svg as your Site Logo. */
.wtpatb-footer .wp-block-site-logo img {
  max-height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.wp-element-button,
.wp-block-button__link {
  border-radius: 0 !important;
  font-family: var(--wtpatb-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* Ghost outline button on dark bg */
.wtpatb-btn-ghost .wp-block-button__link,
.wtpatb-btn-ghost-paper .wp-block-button__link {
  background: transparent !important;
  border: 2px solid var(--wtpatb-paper) !important;
  color: var(--wtpatb-paper) !important;
}

.wtpatb-btn-ghost .wp-block-button__link:hover,
.wtpatb-btn-ghost-paper .wp-block-button__link:hover {
  background: var(--wtpatb-paper) !important;
  color: var(--wtpatb-ink) !important;
}

/* Primary filled button */
.wtpatb-btn-primary .wp-block-button__link {
  background: var(--wtpatb-blue) !important;
  border-color: var(--wtpatb-blue) !important;
  color: var(--wtpatb-paper) !important;
}

.wtpatb-btn-primary .wp-block-button__link:hover {
  background: #1e3d9a !important;
  border-color: #1e3d9a !important;
}

/* ── Typography ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--wtpatb-display) !important;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

p, li, td, th, blockquote p {
  font-family: var(--wtpatb-sans);
  text-wrap: pretty;
}

/* ── Pull quote ───────────────────────────────────────────────── */
.wtpatb-pull-quote {
  border: none !important;
  padding: 0 !important;
}

.wtpatb-pull-quote cite {
  font-family: var(--wtpatb-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-style: normal;
}

/* ── Footer ───────────────────────────────────────────────────── */
.wtpatb-footer {
  border-top: 1px solid rgba(242, 237, 224, 0.08);
  /* background + texture handled by texture rules above */
}

.wtpatb-footer-bottom {
  border-top: 1px solid rgba(242, 237, 224, 0.08);
}

.wtpatb-footer .wp-block-navigation a {
  color: var(--wtpatb-paper) !important;
  opacity: 0.65;
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 0.15s;
}

.wtpatb-footer .wp-block-navigation a:hover {
  opacity: 1;
}

/* ── Blog archive grid ────────────────────────────────────────── */
.wp-block-post-template .wp-block-group {
  border-bottom: 1px solid rgba(20, 20, 20, 0.1);
}

.wp-block-post-title a {
  text-decoration: none;
  color: var(--wtpatb-ink);
  transition: opacity 0.15s;
}

.wp-block-post-title a:hover {
  opacity: 0.7;
}

.wp-block-query-pagination {
  font-family: var(--wtpatb-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wp-block-query-pagination a {
  color: var(--wtpatb-blue);
  text-decoration: none;
}

/* ── Single post ──────────────────────────────────────────────── */
.wp-block-post-content p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--wtpatb-ink);
}

.wp-block-post-content h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.wp-block-post-content h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }

.wp-block-post-content a {
  color: var(--wtpatb-blue);
}

/* ── Separator ────────────────────────────────────────────────── */
.wp-block-separator {
  border-color: rgba(20, 20, 20, 0.12) !important;
}

/* ── Utility: accent rule on top ──────────────────────────────── */
.wtpatb-accent-top {
  border-top: 4px solid var(--wtpatb-ember);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .wtpatb-nav-top {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .wtpatb-nav-secondary {
    display: none;
  }
}