@import url("css-2026-vers20.css");
/* =========================================================
   THEME
   ========================================================= */

/* ===== Theme (OPTION 2: Smoky Blue-Gray) ===== */
:root{
  /* Core surfaces */
  --bg:#1B2227;          /* smoky blue-gray background */
  --card:#20282E;        /* elevated surfaces */
  --border:#2E3941;      /* soft structural borders */

  /* Text */
  --fg:#EEF2F4;          /* headline / primary text */
  --muted:#B8C1C7;       /* secondary text */

  /* Accents */
  --accent:#D96A2C;      /* burnt orange (primary CTA) */
  --accent2:#F07B3A;     /* hover / secondary accent */

  /* UI assets */
  --hamburger: url("menu-icon2.png");
}


/* =========================================================
   ONE-OFF PAGE THEME: CREAM / BEIGE
   ========================================================= */

body.theme-cream{
  --bg:#F4EFE6;        /* warm cream background */
  --card:#FFFFFF;     /* clean paper cards */
  --border:#D8D1C4;   /* soft parchment border */

  --fg:#1F2326;       /* dark readable text */
  --muted:#5F6468;    /* secondary text */

  --accent:#9C4E1A;   /* deeper burnt umber */
  --accent2:#B8612B;
}

/* Cream theme ONLY inside the main container */
.theme-cream{
  --bg:#F4EFE6;
  --card:#FFFFFF;
  --border:#D8D1C4;

  --fg:#1F2326;
  --muted:#5F6468;

  --accent:#9C4E1A;
  --accent2:#B8612B;

  background:var(--bg);
  color:var(--fg);
  border-radius:18px;           /* optional */
  padding:24px;                 /* optional */
}

/* =========================================================
   SPECIAL PAGE BACKGROUND: FOREST / SOFT FOCUS
   ========================================================= */

body.bg-forest{
  background:
    linear-gradient(
      rgba(18,20,22,0.85),
      rgba(18,20,22,0.85)
    ),
    url("background-suggest-for-big-burn.png") center / cover no-repeat fixed;

  background-color:#121416; /* fallback */
}


/* =========================================================
   GLOBAL / BASE
   ========================================================= */

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

a{ color:var(--accent); }

.container{
  max-width:1100px;
  margin:auto;
  padding:24px;
}

/* Typography baseline */
p{
  margin:0 0 1.1em;
  line-height:1.65;
  color:var(--muted);
}


/* =========================================================
   HEADER / NAV
   ========================================================= */

header.site-header{
  position:sticky;
  top:0;
  z-index:50;

  background:rgba(27,34,39,.85);
  backdrop-filter:saturate(160%) blur(8px);

  border-bottom:1px solid var(--border);
  overflow:visible;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  text-decoration:none;
  color:var(--fg);
  font-weight:800;
}

/* ===== Desktop nav & submenu ===== */
.site-nav .menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:clamp(14px,2.4vw,28px);
}

.site-nav .menu>li{ position:relative; }

.site-nav .menu>li>a{
  text-decoration:none;
  color:var(--muted);
  padding:6px 2px;
  display:inline-block;
  border-bottom:2px solid transparent;
}

.site-nav .menu>li>a:hover,
.site-nav .menu>li>a:focus{
  color:var(--fg);
  border-bottom-color:currentColor;
}

/* Submenu base (desktop hover) */
.submenu{
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px);

  min-width:220px;
  margin:0;
  padding:8px 0;
  list-style:none;

  background:#0f1623;
  border:1px solid var(--border);
  border-radius:10px;

  box-shadow:0 10px 26px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:9999;

  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.has-submenu:hover>.submenu,
.has-submenu:focus-within>.submenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.submenu li a{
  display:block;
  white-space:nowrap;
  padding:10px 14px;
  color:var(--fg);
}

.submenu li a:hover,
.submenu li a:focus{
  background:rgba(255,255,255,.06);
}

.submenu-toggle{ display:none; } /* hidden on desktop */
.nav-toggle{ display:none; }     /* hidden on desktop */

/* Desktop: make dropdown touch the menu item (no hover gap) */
@media (min-width:761px){
  .site-nav .menu > li > ul.submenu{
    top:100%;
    transform:translateX(-50%);
  }
}


/* ===== Social submenu ===== */
.social-submenu{
  min-width:240px;
}

/* Divider line */
.social-submenu .submenu-divider{
  height:1px;
  background:var(--border);
  margin:6px 0;
  list-style:none;
}

/* Icon row inside submenu */
.submenu-icons{
  display:flex;
  gap:12px;
  padding:10px 14px;
  align-items:center;
}

.submenu-icons a{
  display:flex;
  align-items:center;
  justify-content:center;

  width:36px;
  height:36px;
  border-radius:8px;

  background:var(--card);
  border:1px solid var(--border);

  transition:background .2s ease, transform .15s ease;
}

.submenu-icons a:hover{
  background:#26323A;
  transform:translateY(-1px);
}

.submenu-icons img{
  width:18px;
  height:18px;
}


/* ===== Mobile (≤760px) ===== */
@media (max-width:760px){
  /* header bar: brand left, hamburger right */
  .site-header .nav{
    position:relative;
    min-height:56px;
    padding:12px 64px 12px 16px;
    align-items:center;
  }

  .brand{
    position:absolute;
    top:10px;
    left:16px;
    z-index:61;
    margin:0;
    line-height:1;
    color:var(--fg);
    text-decoration:none;
    font-size:1.05rem;
  }

  /* Hamburger uses PNG; no distortion */
  .nav-toggle{
    display:block;
    position:absolute;
    top:10px;
    right:16px;
    z-index:62;

    width:64px;
    height:44px;
    border:0;
    border-radius:8px;
    background:transparent;

    background-image:var(--hamburger);
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;

    cursor:pointer;
  }

  /* Open state: draw an “X” with pseudo-elements */
  .nav-toggle[aria-expanded="true"]{ background-image:none; }

  .nav-toggle::before,
  .nav-toggle::after{
    content:"";
    position:absolute;
    inset:0;
    margin:auto;
    width:24px;
    height:2px;
    background:var(--fg);
    opacity:0;
    transition:opacity .15s ease, transform .15s ease;
  }

  .nav-toggle::before{ transform:rotate(45deg); }
  .nav-toggle::after{ transform:rotate(-45deg); }

  .nav-toggle[aria-expanded="true"]::before,
  .nav-toggle[aria-expanded="true"]::after{ opacity:1; }

  /* collapsible main menu */
  .site-nav{
    position:relative;
    width:100%;
  }

  .site-nav .menu{
    display:block;
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
    border-top:1px solid var(--border);
    margin-top:12px;
  }

  .site-nav.open .menu{ max-height:70vh; }

  .site-nav .menu>li{ padding:2px 0; }

  .site-nav .menu>li>a{
    display:block;
    padding:10px 2px;
    border-bottom:0;
    color:var(--fg);
  }

  /* mobile submenu -> accordion */
  .submenu{
    position:static;
    transform:none;
    box-shadow:none;

    background:#0f1623;
    border:1px solid var(--border);
    border-radius:10px;

    margin:6px 0 10px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    max-height:0;
    overflow:hidden;
    padding:0;
    transition:max-height .25s ease, padding .2s ease;
  }

  .submenu-toggle{
    display:inline-block;
    margin-left:8px;
    width:24px;
    height:24px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--card);
    vertical-align:middle;
    position:relative;
    cursor:pointer;
  }

  .submenu-toggle::before,
  .submenu-toggle::after{
    content:"";
    position:absolute;
    background:var(--fg);
    left:6px;
    right:6px;
    height:2px;
    top:11px;
  }

  .submenu-toggle::after{ transform:rotate(90deg); } /* plus -> minus when open */
  .submenu-toggle[aria-expanded="true"]::after{ opacity:0; }

  .submenu-open>.submenu{
    max-height:500px;
    padding:8px 0;
  }

  .submenu li a{ padding:10px 12px; }

  /* disable desktop transform on mobile hover */
  .has-submenu:hover>.submenu{ transform:none; }
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:28px;
  align-items:start;
  padding:40px 0;
}

/* Right column wrapper: cover + excerpt stack */
.hero-media{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:stretch;
}

/* Optional: keep cover from getting too huge on ultrawide screens */
.hero-media .cover{
  max-width:520px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* Make sure excerpt fills the column width */
.hero-media .book-excerpt{ width:100%; }

.badge{
  display:inline-flex;
  gap:8px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  padding:6px 12px;
  border-radius:999px;
  color:#0b0c10;
  font-weight:700;
  font-size:.82rem;
}

.h1{
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  margin:.4em 0;
}

.lead{
  color:var(--muted);
  font-size:1.1rem;
}

.cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:20px 0;
}

.cover{
  width:100%;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; }
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  padding:12px 18px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  color:var(--fg);
  text-decoration:none;
  font-weight:600;
  transition:background .2s ease, transform .15s ease, color .2s ease;
}

.btn:hover{
  transform:translateY(-1px);
  background:#26323A;
}

.btn.primary{
  background:var(--accent);
  color:#111;
  border-color:transparent;
}

.btn.primary:hover{ background:var(--accent2); }


/* ===== MP3 BUTTON ===== */
a.btn.audio-btn{
  background-color:#2B3F4C;   /* distinct blue-slate */
  color:#EEF2F4;
  border:1px solid #3A5563;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.15) inset,
    0 0 0 2px rgba(125,211,252,.10);
}

a.btn.audio-btn:hover{ background-color:#355263; }

a.btn.audio-btn.playing{
  background-color:var(--accent);
  color:#111;
  border-color:transparent;
  box-shadow:none;
}

a.btn.audio-btn.playing:hover{ background-color:var(--accent2); }


/* =========================================================
   YOUTUBE EMBEDS (DESKTOP vs SHORTS)
   ========================================================= */

.yt{
  position:relative;
  overflow:hidden;
  max-width:100%;
}

.yt iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Desktop video (16:9) */
.yt--desktop{ padding-bottom:56.25%; }

/* Mobile Short (9:16) */
.yt--mobile{ padding-bottom:177.78%; }

/* Default: show desktop, hide mobile */
.yt--desktop{ display:block; }
.yt--mobile{ display:none; }

/* Phone: swap */
@media (max-width:768px){
  .yt--desktop{ display:none; }
  .yt--mobile{ display:block; }
}


/* =========================================================
   CARDS / GRID
   ========================================================= */

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

/* Tablet: 2 across */
@media (max-width:980px){
  .grid{ grid-template-columns:repeat(2,1fr); }
}

/* Phone: 1 across */
@media (max-width:760px){
  .grid{
    grid-template-columns:1fr;
    gap:14px;
  }
}


/* =========================================================
   PURCHASE LINKS (CARD: #events)
   ========================================================= */

#events ul{
  list-style:none;
  padding:0;
  margin:12px 0 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

#events li{ margin:0; }

#events li a{
  display:block;
  padding:10px 14px;

  background:#24313A;
  border:1px solid var(--border);
  border-radius:10px;

  color:var(--fg);
  text-decoration:none;
  font-weight:600;

  transition:background .2s ease, transform .15s ease;
}

#events li a:hover{
  background:#2F404C;
  transform:translateY(-1px);
}

/* Substack featured link */
#events > a{
  display:block;
  margin-top:18px;
  padding:12px 14px;

  background:#1F2A31;
  border:1px solid var(--border);
  border-radius:10px;

  color:var(--accent);
  font-weight:800;
  text-decoration:none;

  transition:background .2s ease, transform .15s ease;
}

#events > a:hover{
  background:#26343D;
  transform:translateY(-1px);
}

/* Mobile: bigger tap targets + no hover “jump” */
@media (max-width:760px){
  #events li a,
  #events > a{
    padding:14px 16px;
    font-size:1rem;
  }
  #events li a:hover,
  #events > a:hover{
    transform:none;
  }
}


/* =========================================================
   BOOK EXCERPT
   ========================================================= */

.book-excerpt{
  margin:28px 0;
  padding:26px 30px;

  background:rgba(255,255,255,0.06);
  color:var(--fg);

  font-family:Georgia,"Times New Roman",serif;
  font-size:1.15rem;
  line-height:1.65;

  border-radius:12px;
  border:1px solid var(--border);
}

.book-excerpt::before{
  content:"“";
  font-size:4rem;
  line-height:0;
  vertical-align:-0.4em;
  margin-right:8px;
  color:var(--accent);
}

@media (max-width:600px){
  .book-excerpt{
    padding:20px;
    font-size:1.02rem;
  }
}


/* =========================================================
   BOOK GRID
   ========================================================= */

/* ===== BOOK GRID ===== */
.book-grid{
  max-width:980px;
  margin:0 auto;
  padding:12px;

  display:grid;
  gap:28px;
  grid-template-columns:repeat(3,1fr);
  align-items:start;
}

.book-card{ text-align:center; }

.book-title{
  display:inline-block;
  margin-bottom:10px;
  font-weight:700;
  text-decoration:none;
  line-height:1.2;
  color:var(--fg);
}

.book-title:hover{ color:var(--accent); }

.book-card img{
  width:205px;
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* Tablet: 2 across */
@media (max-width:900px){
  .book-grid{ grid-template-columns:repeat(2,1fr); }
}

/* Phone: single centered column */
@media (max-width:560px){
  .book-grid{
    grid-template-columns:1fr;
    justify-items:center;
  }
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer{
  padding:32px 0;
  color:var(--muted);
  border-top:1px solid var(--border);
  margin-top:40px;
}

/* Keep container padding consistent inside footer */
.footer .container{
  padding:0 24px; /* overrides the inline padding:0 feel */
}

/* Footer text line */
.footer-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;

  line-height:1.4;
  margin-bottom:16px;
}

.footer-meta a{
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
}

.footer-meta a:hover{
  text-decoration:underline;
}

/* Social icons row */
.footer-social{
  list-style:none;
  margin:0;
  padding:0;

  display:flex;
  gap:14px;
  align-items:center;
}

/* icon container */
.footer-social a{
  display:flex;
  align-items:center;
  justify-content:center;

  width:56px;
  height:56px;
  border-radius:14px;

  background:var(--card);
  border:1px solid var(--border);

  transition:background .2s ease, transform .15s ease, box-shadow .15s ease;
}

/* icon image */
.footer-social img{
  width:30px;
  height:30px;
  opacity:.9;
  transition:opacity .15s ease, transform .15s ease;
}

.footer-social a:hover{
  background:#26323A;
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,0,0,.25);
}

.footer-social a:hover img{
  opacity:1;
  transform:scale(1.08);
}

/* Mobile: center everything */
@media (max-width:600px){
  .footer .container{
    padding:0 16px;
    text-align:center;
  }

  .footer-meta{
    justify-content:center;
  }

  .footer-social{
    justify-content:center;
  }

  .footer-social a{
    width:44px;
    height:44px;
    border-radius:12px;
  }

  .footer-social img{
    width:22px;
    height:22px;
  }
}

/* ===== MOBILE NAV FIX: allow submenu to be readable/clickable ===== */
@media (max-width:760px){

  /* Make header + menu sit above page content */
  header.site-header{
    z-index:9999;
  }

  /* When nav is open, let it be a real dropdown panel */
  .site-nav{
    position:relative;
    z-index:9999;
  }

  /* This is the KEY: allow the menu panel to scroll instead of clipping children */
  .site-nav.open .menu{
    max-height: calc(100vh - 70px); /* adjust if your header is taller/shorter */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    padding-bottom: 14px;
  }

  /* Ensure each top-level item has breathing room */
  .site-nav .menu > li{
    padding: 6px 0;
  }

  /* Mobile submenu: expand naturally */
  .submenu{
    position:static;
    max-height:0;
    overflow:hidden;
    padding:0;
    margin:8px 0 10px;

    background:#0f1623;
    border:1px solid var(--border);
    border-radius:10px;
  }

  /* When your JS adds .submenu-open to the LI, expand it */
  .submenu-open > .submenu{
    max-height: 70vh;     /* big enough to show the full list */
    overflow-y: auto;     /* if lots of titles, still usable */
    padding: 8px 0;
  }

  /* Make submenu links clearly readable and tappable */
  .submenu li a{
    display:block;
    padding: 12px 14px;
    color: var(--fg);
    text-decoration: none;
    line-height: 1.25;
  }

  .submenu li a:hover,
  .submenu li a:focus{
    background: rgba(255,255,255,.08);
  }
}


.contact-form{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  max-width:720px;
}

.contact-form label{
  display:block;
  margin:12px 0;
  color:var(--fg);
  font-weight:600;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  margin-top:8px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.04);
  color:var(--fg);
  font:inherit;
}

.form-status{
  margin:12px 0 0;
  color:var(--muted);
}

/* =========================================================
   MOBILE: show submenu links by default (no PLUS accordions)
   Paste at the very END of your CSS
   ========================================================= */
@media (max-width:760px){

  /* Hide the + buttons */
  .submenu-toggle{
    display:none !important;
  }

  /* Force all submenus to be visible/open */
  .site-nav .menu > li > .submenu{
    max-height:none !important;
    overflow:visible !important;
    padding:8px 0 !important;
    margin:6px 0 10px !important;

    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;

    position:static !important;
    transform:none !important;
    box-shadow:none !important;
  }

  /* Slight indent for submenu links */
  .site-nav .menu > li > .submenu li a{
    padding:10px 14px 10px 30px !important; /* left indent */
  }

  /* Optional: a subtle visual cue for nesting */
  .site-nav .menu > li > .submenu{
    border-left:2px solid rgba(255,255,255,.10);
    margin-left:10px !important;
  }
}


/* =========================================================
   MOBILE NAV: Larger social media icon buttons
   ========================================================= */
@media (max-width:760px){

  /* Container spacing */
  .site-nav .submenu-icons{
    gap:14px;                 /* a little more breathing room */
    padding:14px 16px;
  }

  /* Make the buttons bigger */
  .site-nav .submenu-icons a{
    width:54px;               /* was ~36px */
    height:54px;
    border-radius:14px;
  }

  /* Scale the icon images inside */
  .site-nav .submenu-icons img{
    width:26px;               /* was ~18px */
    height:26px;
  }

}


/* =========================================================
   CONTACT FORM (matches your theme)
   Paste at END of CSS
   ========================================================= */

.contact-form{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  max-width:760px;
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px 16px;
  margin-top:10px;
}

.field{ display:block; }

.field--full{ grid-column:1 / -1; }

.field-label{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-weight:700;
  color:var(--fg);
  margin-bottom:8px;
}

.req{
  color:var(--accent);
  font-weight:800;
}

/* Inputs */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.04);
  color:var(--fg);
  font:inherit;
  outline:none;

  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Textarea feel */
.contact-form textarea{
  min-height:180px;
  resize:vertical;
  line-height:1.5;
}

/* Focus styling (pro, but subtle) */
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:rgba(217,106,44,.65);
  box-shadow:
    0 0 0 3px rgba(217,106,44,.18),
    0 0 0 1px rgba(0,0,0,.08) inset;
  background:rgba(255,255,255,0.06);
}

/* Placeholder tone */
.contact-form ::placeholder{
  color:rgba(184,193,199,.75);
}

/* Actions row */
.contact-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:16px;
}

.contact-help{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}

/* Make input buttons behave like .btn links */
.contact-form input.btn{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}

/* Mobile layout */
@media (max-width:760px){
  .contact-form{ padding:18px; }
  .contact-grid{ grid-template-columns:1fr; }
  .contact-actions{ gap:10px; }
  .contact-form input.btn{ width:100%; }
}


/* Hide honeypot field from humans */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}