/*
Theme Name: The Black Sage
Theme URI: https://sacredsonora.com
Author: Sacred Sonora
Author URI: https://sacredsonora.com
Description: The Black Sage — a gothic western spiritual journal for the seasons of the soul. A contemplative reflection platform built on the Trail system. Powered by Sacred Sonora.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: Private
Text Domain: blacksage
Tags: spiritual, dark, gothic, journal, custom-colors, custom-menu, featured-images, full-width-template
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --bs-black:        #111111;
  --bs-black-mid:    #1A1612;
  --bs-black-card:   #1E1916;
  --bs-black-border: #2A2420;
  --bs-bone:         #F4EFE7;
  --bs-bone-dim:     rgba(244, 239, 231, 0.6);
  --bs-bone-faint:   rgba(244, 239, 231, 0.2);
  --bs-rust:         #A84E2A;
  --bs-rust-dim:     rgba(168, 78, 42, 0.15);
  --bs-rust-border:  rgba(168, 78, 42, 0.35);
  --bs-oxblood:      #4A1515;
  --bs-sage:         #5F6F52;
  --bs-sage-dim:     rgba(95, 111, 82, 0.15);
  --bs-tan:          #C8A96A;
  --bs-tan-dim:      rgba(200, 169, 106, 0.15);
  --bs-midnight:     #101826;
  --bs-smoke:        rgba(244, 239, 231, 0.07);

  /* Gradients */
  --bs-grad-fire:    linear-gradient(135deg, #4A1515 0%, #A84E2A 100%);
  --bs-grad-dusk:    linear-gradient(180deg, #111111 0%, #101826 100%);
  --bs-grad-sage:    linear-gradient(135deg, #1A1612 0%, #1E2218 100%);
  --bs-grad-overlay: linear-gradient(180deg, rgba(17,17,17,0) 0%, rgba(17,17,17,0.95) 100%);

  /* Typography */
  --font-head:    'Playfair Display', 'Georgia', serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-accent:  'Crimson Text', 'Georgia', serif;
  --font-mono:    'Courier Prime', 'Courier New', monospace;

  /* Spacing */
  --bs-pad-page:  0 clamp(20px, 5vw, 72px);
  --bs-section:   96px 0;

  /* Transitions */
  --bs-trans:     0.25s ease;

  /* Border radius */
  --bs-radius:    2px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  background-color: var(--bs-black);
  color: var(--bs-bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: color var(--bs-trans); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--bs-bone);
}

h1 { font-size: clamp(36px, 6vw, 72px); }
h2 { font-size: clamp(26px, 4vw, 48px); }
h3 { font-size: clamp(20px, 2.5vw, 30px); }
h4 { font-size: 20px; }

.bs-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bs-rust);
  display: block;
  margin-bottom: 12px;
}

.bs-drop-cap::first-letter {
  font-family: var(--font-head);
  font-size: 4.5em;
  font-weight: 700;
  float: left;
  line-height: 0.8;
  margin: 0.05em 0.12em 0 0;
  color: var(--bs-rust);
}

/* Color utilities */
.bs-rust    { color: var(--bs-rust); }
.bs-tan     { color: var(--bs-tan); }
.bs-sage    { color: var(--bs-sage); }
.bs-bone    { color: var(--bs-bone); }
.bs-dim     { color: var(--bs-bone-dim); }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.bs-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--bs-pad-page);
}

.bs-container--narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--bs-pad-page);
}

.bs-section { padding: var(--bs-section); }

.bs-section-header { margin-bottom: 52px; }

/* ============================================================
   DIVIDERS
   ============================================================ */
.bs-rule {
  border: none;
  border-top: 1px solid var(--bs-black-border);
  margin: 0;
}

.bs-rule--rust { border-color: var(--bs-rust-border); }
.bs-rule--tan  { border-color: rgba(200, 169, 106, 0.25); }

.bs-ornament {
  text-align: center;
  color: var(--bs-rust);
  font-size: 18px;
  letter-spacing: 12px;
  margin: 0;
  line-height: 1;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.bs-btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 14px 32px;
  cursor: pointer;
  transition: all var(--bs-trans);
  border: none;
  outline: none;
  border-radius: var(--bs-radius);
}

.bs-btn--primary {
  background: var(--bs-rust);
  color: var(--bs-bone);
}
.bs-btn--primary:hover { background: #c05c32; color: var(--bs-bone); }

.bs-btn--secondary {
  background: transparent;
  color: var(--bs-bone);
  border: 1px solid rgba(244, 239, 231, 0.3);
}
.bs-btn--secondary:hover {
  border-color: var(--bs-bone-dim);
  color: var(--bs-bone);
  background: var(--bs-smoke);
}

.bs-btn--ghost {
  background: transparent;
  color: var(--bs-tan);
  border: 1px solid var(--bs-rust-border);
}
.bs-btn--ghost:hover { border-color: var(--bs-rust); color: var(--bs-rust); }

.bs-btn--dark {
  background: var(--bs-black-card);
  color: var(--bs-bone);
  border: 1px solid var(--bs-black-border);
}
.bs-btn--dark:hover { border-color: var(--bs-rust-border); }

.bs-btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================================
   CARDS — base
   ============================================================ */
.bs-card {
  background: var(--bs-black-card);
  border: 1px solid var(--bs-black-border);
  border-radius: var(--bs-radius);
  transition: border-color var(--bs-trans), transform var(--bs-trans);
  overflow: hidden;
}
.bs-card:hover { border-color: var(--bs-rust-border); }

.bs-card--rust { border-top: 2px solid var(--bs-rust); }
.bs-card--sage { border-top: 2px solid var(--bs-sage); }
.bs-card--tan  { border-top: 2px solid var(--bs-tan); }

/* ============================================================
   BADGES / LABELS
   ============================================================ */
.bs-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--bs-radius);
}
.bs-badge--rust   { background: var(--bs-rust-dim); color: var(--bs-rust); border: 1px solid var(--bs-rust-border); }
.bs-badge--sage   { background: var(--bs-sage-dim); color: var(--bs-sage); border: 1px solid rgba(95,111,82,.35); }
.bs-badge--tan    { background: var(--bs-tan-dim);  color: var(--bs-tan);  border: 1px solid rgba(200,169,106,.35); }
.bs-badge--bone   { background: var(--bs-smoke);    color: var(--bs-bone-dim); border: 1px solid var(--bs-black-border); }

/* ============================================================
   GRID SYSTEMS
   ============================================================ */
.bs-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.bs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bs-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 900px) {
  .bs-grid-3, .bs-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .bs-grid-2, .bs-grid-3, .bs-grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   FORMS
   ============================================================ */
.bs-form-group { margin-bottom: 20px; }

.bs-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bs-bone-dim);
  margin-bottom: 8px;
}

.bs-input, .bs-textarea, .bs-select {
  width: 100%;
  background: rgba(244, 239, 231, 0.04);
  border: 1px solid var(--bs-black-border);
  color: var(--bs-bone);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color var(--bs-trans);
  outline: none;
  border-radius: var(--bs-radius);
  -webkit-appearance: none;
}
.bs-input:focus, .bs-textarea:focus { border-color: var(--bs-rust); }
.bs-input::placeholder, .bs-textarea::placeholder { color: var(--bs-bone-faint); }
.bs-textarea { min-height: 100px; resize: vertical; }

/* ============================================================
   WORDPRESS STANDARDS
   ============================================================ */
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--bs-rust); outline-offset: 3px; }
.alignleft  { float: left; margin-right: 1.5rem; }
.alignright { float: right; margin-left: 1.5rem; }
.aligncenter { display: block; margin: 0 auto; }
.alignwide  { max-width: 1400px; margin-left: auto; margin-right: auto; }
.alignfull  { width: 100vw; margin-left: calc(-50vw + 50%); }

/* ============================================================
   ENTRY CONTENT
   ============================================================ */
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { margin-bottom: .75em; margin-top: 1.75em; }
.entry-content p { margin-bottom: 1.25em; color: var(--bs-bone-dim); line-height: 1.85; }
.entry-content a { color: var(--bs-tan); border-bottom: 1px solid var(--bs-rust-border); }
.entry-content a:hover { color: var(--bs-rust); }
.entry-content ul, .entry-content ol { list-style: disc; padding-left: 1.5em; color: var(--bs-bone-dim); margin-bottom: 1.25em; }
.entry-content blockquote { border-left: 3px solid var(--bs-rust); padding: 1em 1.5em; color: var(--bs-bone-dim); font-family: var(--font-accent); font-size: 1.1em; font-style: italic; margin: 2em 0; background: var(--bs-smoke); }