/*
Theme Name: Silas Arden
Theme URI: https://example.com/
Author: (Your Name / Studio)
Author URI: https://example.com/
Description: A lightweight, mythic fireside author theme for Silas Arden. Includes a Books custom post type and retailer-link CTAs.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: silas-arden
Tags: one-column, two-columns, custom-logo, custom-menu, featured-images, block-styles, accessibility-ready
*/

/* =========================
   Design Tokens (Mythic Fireside)
   ========================= */
:root{
  --sa-bg: #0f1110;         /* hearth-black */
  --sa-surface: #171a18;    /* charcoal */
  --sa-surface-2: #1e2320;  /* deep pine */
  --sa-text: #f3efe6;       /* parchment */
  --sa-muted: #c8c2b6;      /* ash parchment */
  --sa-accent: #c08a3e;     /* ember gold */
  --sa-accent-2:#2f3a2b;    /* pine */
  --sa-border: rgba(243,239,230,0.12);
  --sa-shadow: 0 16px 40px rgba(0,0,0,0.40);
  --sa-radius: 18px;
  --sa-radius-sm: 12px;
  --sa-max: 1120px;
  --sa-font: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --sa-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(192,138,62,0.20), transparent 60%),
              radial-gradient(900px 500px at 20% 0%, rgba(47,58,43,0.25), transparent 60%),
              var(--sa-bg);
  color:var(--sa-text);
  font-family:var(--sa-font);
  line-height:1.65;
}
a{color:var(--sa-text); text-decoration:none}
a:hover{color:var(--sa-accent)}
img{max-width:100%; height:auto; display:block}
p{margin:0 0 1rem}
h1,h2,h3{line-height:1.2; margin:0 0 0.75rem}
h1{font-size:clamp(2rem, 4vw, 3.1rem); letter-spacing: -0.02em}
h2{font-size:clamp(1.4rem, 2.6vw, 2.1rem)}
h3{font-size:1.25rem}
small{color:var(--sa-muted)}
.sa-container{max-width:var(--sa-max); margin:0 auto; padding:0 20px}

/* Header */
.sa-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(15,17,16,0.92), rgba(15,17,16,0.65));
  border-bottom:1px solid var(--sa-border);
}
.sa-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 0;
}
.sa-brand{
  display:flex; align-items:center; gap:12px;
}
.sa-brand .sa-title{
  font-family:var(--sa-font);
  font-size:1.05rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.sa-brand .sa-sub{font-family:var(--sa-sans); font-size:0.85rem; color:var(--sa-muted)}
.sa-logo img{width:44px; height:44px; border-radius:12px}

.sa-nav ul{list-style:none; display:flex; gap:18px; padding:0; margin:0; align-items:center}
.sa-nav a{font-family:var(--sa-sans); font-size:0.95rem; color:var(--sa-muted)}
.sa-nav a:hover{color:var(--sa-text)}
.sa-nav .current-menu-item > a{color:var(--sa-text)}
.sa-menu-toggle{display:none}

/* Buttons */
.sa-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--sa-border);
  background: rgba(23,26,24,0.60);
  color:var(--sa-text);
  font-family:var(--sa-sans);
  font-weight:600;
  letter-spacing:0.01em;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.sa-btn:hover{border-color: rgba(192,138,62,0.40); color:var(--sa-text)}
.sa-btn--primary{
  background: linear-gradient(135deg, rgba(192,138,62,0.95), rgba(192,138,62,0.65));
  border-color: rgba(192,138,62,0.60);
  color: #0f1110;
}
.sa-btn--primary:hover{filter:brightness(1.04)}
.sa-btn--ghost{background: transparent}
.sa-btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}

/* Sections / Cards */
.sa-section{padding:56px 0}
.sa-card{
  background: linear-gradient(180deg, rgba(23,26,24,0.90), rgba(23,26,24,0.72));
  border:1px solid var(--sa-border);
  border-radius:var(--sa-radius);
  box-shadow: var(--sa-shadow);
}
.sa-card-inner{padding:26px}
.sa-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:18px;
}
.sa-col-7{grid-column: span 7}
.sa-col-5{grid-column: span 5}
.sa-col-12{grid-column: span 12}

/* Hero */
.sa-hero{
  padding:70px 0 42px;
}
.sa-hero .sa-kicker{
  font-family:var(--sa-sans);
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:0.78rem;
  color:rgba(243,239,230,0.72);
}
.sa-hero p{color:rgba(243,239,230,0.82); font-size:1.06rem}
.sa-hero .sa-highlight{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(192,138,62,0.45);
  background: rgba(192,138,62,0.08);
  color: var(--sa-text);
}

/* Book cards */
.sa-book-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.sa-book{
  border-radius:var(--sa-radius);
  overflow:hidden;
  border:1px solid var(--sa-border);
  background: linear-gradient(180deg, rgba(30,35,32,0.90), rgba(23,26,24,0.78));
  box-shadow: 0 10px 26px rgba(0,0,0,0.30);
}
.sa-book-cover{aspect-ratio: 3/4; background: rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center}
.sa-book-cover img{width:100%; height:100%; object-fit:cover}
.sa-book-body{padding:18px}
.sa-book-title{font-size:1.15rem; margin:0 0 6px}
.sa-book-meta{font-family:var(--sa-sans); font-size:0.9rem; color:var(--sa-muted); margin-bottom:10px}
.sa-book-excerpt{color:rgba(243,239,230,0.80); font-size:0.98rem}
.sa-book-actions{margin-top:14px; display:flex; flex-wrap:wrap; gap:10px}

/* Content */
.sa-content{padding:40px 0}
.sa-prose{max-width: 74ch}
.sa-prose a{text-decoration: underline; text-decoration-color: rgba(192,138,62,0.45); text-underline-offset: 3px}

/* Footer */
.sa-footer{
  border-top:1px solid var(--sa-border);
  padding:30px 0;
  color:var(--sa-muted);
  font-family:var(--sa-sans);
  font-size:0.95rem;
}

/* Forms */
.sa-input{
  width:100%;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--sa-border);
  background: rgba(23,26,24,0.55);
  color: var(--sa-text);
  font-family: var(--sa-sans);
}
.sa-form-row{display:flex; gap:12px; flex-wrap:wrap}
.sa-form-row > *{flex:1}

/* Mobile */
@media (max-width: 920px){
  .sa-col-7,.sa-col-5{grid-column: span 12}
  .sa-book-grid{grid-template-columns: 1fr}
  .sa-nav ul{display:none}
  .sa-menu-toggle{display:inline-flex}
}