/*
Theme Name: Kadence Child
Template: kadence
Version: 1.0
*/

/* ============================================================
   TRAILACT — Sitewide Blueprint Theme
   Paste into: Appearance → Editor → Styles → Additional CSS
   (or Appearance → Customize → Additional CSS)

   Design language: engineering drafting paper — the kind
   trail builders actually use. Off-white field, fine blue
   grid, technical typography, measured spacing.

   The .baseb-page dark theme is fully independent and
   unaffected by anything here.
   ============================================================ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Barlow+Condensed:wght@300;400;600;700;900&family=Barlow:wght@300;400;500&display=swap');

/* ── SITE VARIABLES ── */
:root {
  /* Blueprint paper colors */
  --ta-paper:       #f4f6f8;       /* slightly cool off-white, like drafting vellum */
  --ta-paper2:      #edf0f3;       /* slightly darker for section contrast */
  --ta-paper3:      #e4e8ed;       /* borders, dividers */

  /* Blueprint grid blues */
  --ta-grid-major:  rgba(130, 165, 210, 0.25);   /* major grid lines */
  --ta-grid-minor:  rgba(130, 165, 210, 0.10);   /* minor grid lines */

  /* Text */
  --ta-ink:         #1a2030;       /* near-black with blue undertone — india ink */
  --ta-ink2:        #3a4558;       /* secondary text */
  --ta-muted:       #7a8899;       /* captions, labels */
  --ta-rule:        #c8d0db;       /* horizontal rules, borders */

  /* Accent — a single strong drafting blue */
  --ta-blue:        #1a5fa8;       /* classic blueprint blue */
  --ta-blue-light:  #e8f0fa;       /* blue tint for hover/highlight */
  --ta-blue-mid:    #4a8fd4;       /* mid-weight blue for UI elements */

  /* Hi-viz accent — carried from BASE-B for brand continuity */
  --ta-hiviz:       #7ab810;       /* muted daylight version of the neon green */

  /* Type */
  --ta-mono:        'DM Mono', monospace;
  --ta-display:     'Barlow Condensed', sans-serif;
  --ta-body:        'Barlow', sans-serif;
}

/* ── GLOBAL RESET FOR TRAILACT PAGES ── */
/* Scoped so it only applies outside .baseb-page */

body:not(.baseb-page):not(:has(.baseb-page)) {
  background-color: var(--ta-paper);
  color: var(--ta-ink);
  font-family: var(--ta-body);
  font-weight: 400;
  line-height: 1.7;
}

/* Safer broad selector — applies to body unless overridden by baseb-page */
body {
  font-family: var(--ta-body);
}

/* ── BLUEPRINT GRID BACKGROUND ── */
/* Applied to the site body. .baseb-page overrides with its own dark grid. */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--ta-paper);
  background-image:
    /* Major grid — every 80px */
    linear-gradient(var(--ta-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--ta-grid-major) 1px, transparent 1px),
    /* Minor grid — every 20px */
    linear-gradient(var(--ta-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--ta-grid-minor) 1px, transparent 1px);
  background-size:
    80px 80px,
    80px 80px,
    20px 20px,
    20px 20px;
}

/* Ensure page content sits above the fixed grid */
body > * {
  position: relative;
  z-index: 1;
}

/* ── TYPOGRAPHY ── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ta-display);
  font-weight: 700;
  color: var(--ta-ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

h1 { font-size: clamp(36px, 6vw, 72px); font-weight: 900; }
h2 { font-size: clamp(28px, 4vw, 52px); }
h3 { font-size: clamp(20px, 2.5vw, 32px); font-weight: 600; }
h4 { font-size: 20px; font-weight: 600; }

p {
  font-family: var(--ta-body);
  font-weight: 300;
  color: var(--ta-ink2);
  line-height: 1.75;
  max-width: 68ch;
}

a {
  color: var(--ta-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
a:hover {
  color: var(--ta-blue);
  border-bottom-color: var(--ta-blue);
}

/* ── SITE HEADER ── */

.wp-site-blocks header,
header.wp-block-template-part,
.site-header {
  background: rgba(244, 246, 248, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ta-rule);
  position: sticky;
  top: 0;
  z-index: 200;
}

/* Nav links */
.wp-block-navigation a,
.nav-link,
header a {
  font-family: var(--ta-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-muted) !important;
  text-decoration: none;
  border-bottom: none;
  transition: color 0.2s;
}
.wp-block-navigation a:hover,
header a:hover {
  color: var(--ta-blue) !important;
  border-bottom: none;
}

/* Site title / logo text */
.wp-block-site-title a,
.site-title a {
  font-family: var(--ta-display) !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  letter-spacing: 0.05em !important;
  color: var(--ta-ink) !important;
  text-transform: uppercase;
  border-bottom: none !important;
}

/* ── SECTION DIVIDERS — drafting rule style ── */

/* Any HR on the site gets the blueprint treatment */
hr {
  border: none;
  border-top: 1px solid var(--ta-rule);
  margin: 48px 0;
  position: relative;
}

/* ── UTILITY CLASSES — use these in your WP blocks ── */

/* Section label — the small mono uppercase tag above headings */
.ta-label {
  font-family: var(--ta-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ta-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.ta-label::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--ta-blue);
  flex-shrink: 0;
}

/* Blueprint rule — section separator with label */
.ta-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 48px;
}
.ta-rule-text {
  font-family: var(--ta-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ta-muted);
  white-space: nowrap;
}
.ta-rule-line {
  flex: 1;
  height: 1px;
  background: var(--ta-rule);
}

/* Callout / notice box */
.ta-callout {
  border: 1px solid var(--ta-rule);
  border-left: 3px solid var(--ta-blue);
  padding: 20px 24px;
  background: var(--ta-blue-light);
  font-size: 14px;
  color: var(--ta-ink2);
  line-height: 1.65;
}
.ta-callout-warn {
  border-left-color: #d4820a;
  background: #fef8ee;
}

/* Mono tag — the small code-style labels */
.ta-tag {
  font-family: var(--ta-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ta-blue);
  margin-bottom: 12px;
  display: block;
}

/* Data / spec row */
.ta-spec {
  font-family: var(--ta-mono);
  font-size: 12px;
  color: var(--ta-muted);
  border-top: 1px solid var(--ta-rule);
  padding-top: 14px;
  margin-top: 14px;
  line-height: 2.2;
}
.ta-spec span { color: var(--ta-ink2); }

/* ── CONTENT CARDS — blueprint panel style ── */

.ta-card {
  background: var(--ta-paper);
  border: 1px solid var(--ta-rule);
  padding: 32px 28px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ta-card:hover {
  border-color: var(--ta-blue-mid);
  box-shadow: 0 2px 16px rgba(26, 95, 168, 0.08);
}

.ta-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ta-rule);
  border: 1px solid var(--ta-rule);
}
.ta-card-grid .ta-card {
  border: none;
}

/* ── BUTTONS ── */

.ta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ta-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid;
  transition: all 0.2s;
  cursor: pointer;
  border-bottom: 1px solid; /* override link style */
}
.ta-btn-primary {
  background: var(--ta-blue);
  border-color: var(--ta-blue);
  color: #fff !important;
}
.ta-btn-primary:hover {
  background: transparent;
  color: var(--ta-blue) !important;
  border-bottom-color: var(--ta-blue);
}
.ta-btn-ghost {
  background: transparent;
  border-color: var(--ta-rule);
  color: var(--ta-muted) !important;
}
.ta-btn-ghost:hover {
  border-color: var(--ta-blue);
  color: var(--ta-blue) !important;
}

/* ── WP BLOCK OVERRIDES ── */

/* Paragraph blocks */
.wp-block-paragraph {
  font-family: var(--ta-body);
  font-weight: 300;
  color: var(--ta-ink2);
}

/* Heading blocks */
.wp-block-heading {
  font-family: var(--ta-display);
  color: var(--ta-ink);
}

/* Cover blocks — give them the paper background if no image */
.wp-block-cover:not([style*="background"]) {
  background-color: var(--ta-paper2);
}

/* Group blocks used as sections */
.wp-block-group {
  background-color: transparent;
}

/* Quote blocks — blueprint annotation style */
.wp-block-quote {
  border-left: 3px solid var(--ta-blue);
  padding: 16px 24px;
  background: var(--ta-blue-light);
  font-family: var(--ta-mono);
  font-size: 13px;
  color: var(--ta-ink2);
  font-style: normal;
}
.wp-block-quote cite,
.wp-block-quote footer {
  font-family: var(--ta-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-muted);
  margin-top: 10px;
  display: block;
}

/* Code blocks */
.wp-block-code,
pre,
code {
  font-family: var(--ta-mono);
  font-size: 12px;
  background: var(--ta-paper2);
  border: 1px solid var(--ta-rule);
  color: var(--ta-blue);
  padding: 2px 8px;
}
.wp-block-code,
pre {
  padding: 20px 24px;
  line-height: 1.8;
}

/* Tables */
.wp-block-table table {
  font-family: var(--ta-mono);
  font-size: 13px;
  border-collapse: collapse;
  width: 100%;
}
.wp-block-table th {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ta-muted);
  border-bottom: 2px solid var(--ta-blue);
  padding: 10px 14px;
  text-align: left;
  background: var(--ta-paper2);
}
.wp-block-table td {
  border-bottom: 1px solid var(--ta-rule);
  padding: 10px 14px;
  color: var(--ta-ink2);
}
.wp-block-table tr:hover td {
  background: var(--ta-blue-light);
}

/* ── FOOTER ── */

.wp-site-blocks footer,
footer.wp-block-template-part,
.site-footer {
  border-top: 1px solid var(--ta-rule);
  background: var(--ta-paper);
  padding: 40px;
}

footer p,
.site-footer p {
  font-family: var(--ta-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ta-muted);
  max-width: none;
}

/* ── TITLE BLOCK — page/post title area ── */

.wp-block-post-title,
.entry-title {
  font-family: var(--ta-display) !important;
  font-weight: 900 !important;
  color: var(--ta-ink) !important;
  font-size: clamp(36px, 6vw, 72px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.02em !important;
}

/* ── COORDINATE CROSS — decorative detail ── */
/* Adds a tiny crosshair marker at top-right of section headings.
   Optional — remove if it feels like too much. */
.wp-block-heading h2::after {
  content: '+';
  font-family: var(--ta-mono);
  font-size: 10px;
  color: var(--ta-grid-major);
  margin-left: 12px;
  vertical-align: super;
  font-weight: 300;
  letter-spacing: 0;
}

/* ── SELECTION COLOR ── */
::selection {
  background: var(--ta-blue);
  color: #fff;
}

/*
Theme Name: Kadence Child
Template: kadence
Version: 1.0
*/

/* your site-wide CSS goes below here */
/* ── SCROLLBAR — subtle blueprint tint ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ta-paper2); }
::-webkit-scrollbar-thumb {
  background: var(--ta-rule);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--ta-blue-mid); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .ta-card-grid { grid-template-columns: 1fr; }
  h1 { font-size: clamp(28px, 8vw, 48px); }
  h2 { font-size: clamp(24px, 6vw, 36px); }
}

/* Make all WP blocks transparent so the grid shows through */
.wp-block-group,
.wp-block-column,
.wp-block-columns,
.wp-block-cover,
.wp-block-post-content,
.wp-block-template-part,
.entry-content,
.wp-site-blocks,
.wp-site-blocks > *,
.is-layout-flow,
.is-layout-constrained,
.is-layout-flex,
.has-global-padding,
main,
article,
.wp-block-post {
  background-color: transparent !important;
}