/*
Theme Name: Authority of Ash
Theme URI: https://example.com
Author: Page Cle
Description: Custom theme for the Authority of Ash Cycle (Book + Game).
Version: 1.0.0
Text Domain: authority-of-ash
*/

/* =========================
   PAGES
   (pages.css — page-specific layout/typography/panels)
   Keep global UI skins in components.css and motion/overlays in effects.css.
========================= */

/* =========================
   GLOBAL CONTENT PADDING
========================= */

/* Add breathing room to all page content except hero */
.section > *:not(.container),
main > *:not(.hero){
  padding-left: 20px;
  padding-right: 20px;
}

/* Increase padding slightly on larger screens */
@media (min-width: 768px){
  .section > *:not(.container),
  main > *:not(.hero){
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* =========================
   PAGE TYPOGRAPHY (World Primer Style)
========================= */

/* Target your existing wrapper */
.content{
  max-width: 760px;
  margin: 0 auto;
}

/* Improve paragraph rhythm */
.content p{
  margin: 0 0 16px;
  line-height: 1.65;
  color: rgba(234,246,255,.86);
}

/* Headings */
.content h2,
.content h3{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  margin: 32px 0 14px;
  letter-spacing: .03em;
}

/* Lists styled like World Primer (subtle) */
.content ul{
  list-style: none;
  margin: 12px 0 18px;
  padding: 0;
}

.content ul li{
  position: relative;
  padding-left: 18px;
  margin: 6px 0;
  color: rgba(234,246,255,.82);
}

.content ul li::before{
  content: "◆";
  position: absolute;
  left: 0;
  color: rgba(123,210,255,.35);
}

/* Subtle section spacing */
.content h2:first-child{
  margin-top: 0;
}

/* Make page titles match primer elegance */
article.card h1{
  max-width: 760px;
  margin: 0 auto 12px;
  letter-spacing: .03em;
}

/* =========================
   STATIC PAGE HERO (Book / Game / Contact)
========================= */

.page-hero{
  text-align: center;
  margin: 10px auto 28px;
  position: relative;
}

/* Large elegant title */
.page-title{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: .04em;
  margin: 0;
  position: relative;
}

/* Subtle atmospheric glow */
.page-title::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-12px;
  width: min(480px, 80%);
  height:1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(123,210,255,.35),
    transparent
  );
  opacity:.8;
}

/* Optional faint top fade field */
.page-hero::before{
  content:"";
  position:absolute;
  inset:-40% -10%;
  pointer-events:none;
  background: radial-gradient(circle at 50% 40%, rgba(123,210,255,.10), transparent 60%);
  opacity:.6;
}

/* Responsive sizing */
@media (max-width: 900px){
  .page-title{ font-size: 40px; }
}

@media (max-width: 520px){
  .page-title{ font-size: 32px; }
}

/* =========================
   WORLD PRIMER WIDTH ALIGNMENT
========================= */

.world-primer-inner{
  max-width: 760px;   /* matches visual width of 3-card layout above */
  margin: 0 auto;
}

.world-primer .h1{
  margin-bottom: 6px;
}

.world-label{
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* Slightly tighter text rhythm */
.world-primer p{
  margin-bottom: 16px;
}

/* =========================
   WORLD PRIMER: TEXT + IMAGE (HOMEPAGE)
========================= */
.world-primer-layout{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  align-items: center;
}

/* Let the text column breathe (keeps your current “primer” feel) */
.world-primer-layout .world-primer-inner{
  max-width: 760px;
}

/* Image styling */
.world-primer-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15%;
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0,0,0,.35);
}

/* Mobile: image ABOVE text */
@media (max-width: 900px){
  .world-primer-layout{
    grid-template-columns: 1fr;
  }
  .world-primer-media{
    order: -1;
  }
  .world-primer-layout .world-primer-inner{
    max-width: 100%;
  }
}

/* =========================
   BOOK PAGE: DOSSIER FLAIR
========================= */

.book-hero-card{
  position: relative;
  overflow: hidden;
}

.book-hero-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(123,210,255,.14), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.07), transparent 60%);
  transform: rotate(-10deg);
  opacity: .65;
  pointer-events:none;
}

.book-h2{
  margin: 0 0 12px;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing: .03em;
}

.book-narrow{
  max-width: 820px;
  margin: 0 auto;
}

/* =========================
   BOOK PAGE REFINEMENT (generic)
========================= */

.book-page{
  padding-top: 10px;
}

/* A contained panel that always looks good (small or large) */
.book-panel{
  position: relative;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 0 38px rgba(0,0,0,.45), inset 0 0 40px rgba(255,255,255,.02);
  padding: 28px;
  overflow: hidden;
}

/* Panel “field” overlay (subtle, not a big gradient wash) */
.book-panel::before{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background:
    radial-gradient(circle at 25% 20%, rgba(123,210,255,.14), transparent 55%),
    radial-gradient(circle at 75% 65%, rgba(255,255,255,.06), transparent 60%);
  opacity: .55;
  transform: rotate(-10deg);
}

/* Slight vignette so the edges fall off cleanly */
.book-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(circle at 50% 30%, transparent 45%, rgba(3,28,36,.35) 100%);
  opacity: .65;
}

/* Keep text above overlays */
.book-panel > *{
  position: relative;
  z-index: 1;
}

/* HERO look */
.book-panel-hero{
  text-align: center;
  padding: 38px 28px;
}

.book-title{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: 44px;
  line-height: 1.06;
  margin: 0 0 12px;
  letter-spacing: .03em;
}

.book-sub{
  color: var(--muted);
  font-size: 16px;
  margin: 0 auto 18px;
  max-width: 58ch;
}

.book-note{
  margin: 0 auto;
  max-width: 62ch;
  color: rgba(234,246,255,.86);
}

/* Newsletter chip */
.book-chip{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(123,210,255,.25);
  background: rgba(123,210,255,.08);
  color: rgba(234,246,255,.92);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  margin-right: 8px;
}

/* MAIN panel */
.book-panel-main{
  margin-top: 18px;
}

.book-center{
  max-width: 760px;
  margin: 0 auto;     /* centers the block */
  text-align: left;   /* keeps text readable */
}

/* Kicker + headings */
.book-kicker{
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 12px;
  text-align: center;
}

.book-h2{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  text-align: center;
  margin: 0 0 14px;
  letter-spacing: .03em;
}

/* Lines / stanza style */
.book-lines{
  color: rgba(234,246,255,.90);
  margin: 14px 0;
}

/* Label */
.book-label{
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
  margin: 18px 0 10px;
}

/* Bullets styled as centered “statements” */
.book-bullets{
  list-style: none;
  margin: 14px 0 18px;
  padding: 0;
}

.book-bullets li{
  position: relative;
  padding-left: 20px;
  margin: 10px 0;
  color: var(--muted);
}

.book-bullets li::before{
  content:"◆";
  position:absolute;
  left:0;
  top:0;
  color: rgba(123,210,255,.35);
}

/* Divider between series + book */
.book-divider{
  height: 1px;
  width: min(520px, 100%);
  margin: 30px auto;
  background: linear-gradient(90deg, transparent, rgba(123,210,255,.25), transparent);
  opacity: .9;
}

/* Sting lines */
.book-sting{
  margin-top: 18px;
  color: rgba(234,246,255,.92);
  font-weight: 500;
}

/* Responsive sizing */
@media (max-width: 900px){
  .book-title{ font-size: 38px; }
  .book-panel{ padding: 24px; }
}

@media (max-width: 520px){
  .book-title{ font-size: 32px; }
  .book-panel-hero{ padding: 30px 18px; }
  .book-panel{ padding: 20px; }
}

/* =========================
   BOOK 1 PAGE REFINEMENT (specific)
========================= */

.book1-page .container{
  max-width: 920px;   /* keeps whole block centered */
}

/* Shared card styling */
.book1-page .card{
  padding: 32px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 0 36px rgba(0,0,0,.45), inset 0 0 40px rgba(255,255,255,.02);
  position: relative; /* needed for ::before overlay */
}

/* Contained subtle field overlay */
.book1-page .card::before{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background:
    radial-gradient(circle at 25% 20%, rgba(123,210,255,.12), transparent 55%),
    radial-gradient(circle at 75% 65%, rgba(255,255,255,.06), transparent 60%);
  opacity:.55;
  transform: rotate(-8deg);
}

.book1-page .card > *{
  position:relative;
  z-index:1;
}

/* Keep text readable */
.book1-page p{
  margin-bottom: 16px;
}

.book1-stanza{
  color: rgba(234,246,255,.90);
  margin: 18px 0;
}

.book1-sting{
  margin-top: 20px;
  font-weight: 500;
  color: rgba(234,246,255,.95);
}

.book1-small{
  color: var(--muted);
  margin-top: 16px;
}

/* Headings */
.book1-h2{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  margin: 28px 0 14px;
  letter-spacing: .03em;
}

/* Faction list */
.book1-factions{
  list-style:none;
  padding:0;
  margin: 10px 0 18px;
}

.book1-factions li{
  position:relative;
  padding-left:18px;
  margin:8px 0;
}

.book1-factions li::before{
  content:"◆";
  position:absolute;
  left:0;
  color: rgba(123,210,255,.35);
}

/* =========================
   BOOK PAGE (ID 8): MOBILE WIDTH FIX (PANELS + INNER CLAMPS)
========================= */

/* Panels can use full available width */
body.page-id-8 .content{
  max-width: 100%;
}

/* If you wrap book sections in .book-narrow, remove its clamp on mobile */
@media (max-width: 520px){
  body.page-id-8 .book-narrow{
    max-width: 100% !important;
  }
}

/* Keep your gap between the first two panels */
body.page-id-8 .book-panel-hero{
  margin-bottom: 18px;
}
body.page-id-8 .book-panel-main{
  margin-top: 0;
}

/* Make the panels themselves fill the container */
body.page-id-8 .book-panel{
  width: 100%;
  max-width: 100%;
}

/* Remove inner width clamps on mobile */
@media (max-width: 520px){
  body.page-id-8 .book-center{
    max-width: 100% !important;
  }

  body.page-id-8 .book-sub,
  body.page-id-8 .book-note{
    max-width: 100% !important;
  }

  body.page-id-8 .book-panel{
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* =========================
   BOOK PAGE (ID 8): FULL-WIDTH PANELS ON MOBILE (3px gutters)
========================= */
@media (max-width: 520px){
  body.page-id-8 .container{
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  body.page-id-8 .content,
  body.page-id-8 .book-narrow,
  body.page-id-8 .book-center{
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.page-id-8 .book-panel{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Restore spacing between the two top panels on mobile */
@media (max-width: 520px){
  body.page-id-8 .book-panel-hero{
    margin-bottom: 14px !important;
  }
  body.page-id-8 .book-panel-main{
    margin-top: 0 !important;
  }
}

/* =========================================================
   BLOG (AUTHORITATIVE — CLEAN)
   - Rail is RIGHT on iPad+ and sticky
   - Dispatches align to top of rail
   - Featured image drives tile background
   - Filename RIGHT/LEFT controls text placement
   - White text + shadow
   - No weird slab background behind rail
========================================================= */

/* ---- LAYOUT: main left, rail right ---- */

.blog-layout{
  display: block;
}

@media (min-width: 768px){
  .blog-layout{
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 22px;
    align-items: start;
    grid-template-areas: "main rail";
  }

  .blog-main{ grid-area: main; }
  .blog-rail{ grid-area: rail; }
}

/* Rail must NOT have any background slab */
.blog-rail{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Sticky rail (stops naturally when column ends; won't overlap footer) */
@media (min-width: 768px){
  .blog-rail{
    position: sticky;
    top: 92px; /* adjust if your header height changes */
    align-self: start;
  }
}

@media (max-width: 767px){
  .blog-rail{
    position: static !important;
    top: auto !important;
  }
}

/* Mobile overflow safety */
.blog-rail,
.blog-rail *{
  box-sizing: border-box;
}

.blog-signal,
.blog-recent{
  max-width: 100%;
  overflow: hidden;
}

.blog-signal .content,
.blog-signal p,
.blog-recent .blog-side-title,
.blog-recent .blog-side-date{
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ---- DISPATCH SECTION (no forced top margin) ---- */

.blog-dispatches{
  margin-top: 0;
}

.blog-dispatches-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 14px;
  margin: 10px 0 14px;
}

.blog-dispatches-title{
  margin: 0;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing: .03em;
}


/* ---- DISPATCH TILES (featured image background) ---- */

.blog-dispatch{
  position: relative;
  display: block;
  min-height: 240px;
  margin: 0 0 18px;
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;

  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.20);
  background: #0b2b35;
}

.blog-dispatch-media{
  position: absolute;
  inset: 0;
  z-index: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Consistent darken */
.blog-dispatch-media::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(1200px 480px at 50% 50%, rgba(0,0,0,0), rgba(0,0,0,.22));
}

/* Text overlay block */
.blog-dispatch-text{
  position: relative;
  z-index: 2;

  width: min(56%, 720px);
  height: 100%;
  min-height: 240px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 22px 26px 20px;
}

/* IMPORTANT:
   - parch-left  => text LEFT
   - parch-right => text RIGHT
*/
.blog-dispatch.parch-left .blog-dispatch-text{
  margin-right: auto;
  margin-left: 0;
}

.blog-dispatch.parch-right .blog-dispatch-text{
  margin-left: auto;
  margin-right: 0;
}

/* Grain layer (never fades text) */
.blog-dispatch-text::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;

  background:
    radial-gradient(1000px 560px at 55% 45%, rgba(239,191,5,.10), transparent 62%),
    repeating-linear-gradient(0deg,
      rgba(50,35,22,.06) 0px,
      rgba(50,35,22,.06) 1px,
      transparent 2px,
      transparent 6px
    ),
    repeating-linear-gradient(90deg,
      rgba(50,35,22,.045) 0px,
      rgba(50,35,22,.045) 1px,
      transparent 2px,
      transparent 8px
    );

  mix-blend-mode: multiply;
  opacity: .55;
}

/* Keep text above grain */
.blog-dispatch-text > *{
  position: relative;
  z-index: 2;
}

/* White text + shadow */
.blog-dispatch-meta,
.blog-dispatch-h,
.blog-dispatch-excerpt,
.blog-dispatch-cta{
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.55) !important;
}

.blog-dispatch-meta{
  display:flex;
  gap: 10px;
  align-items:center;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .90;
}

.blog-dispatch-h{
  margin-top: 10px;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: .02em;
}

.blog-dispatch-excerpt{
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  max-width: 62ch;
  opacity: .92;
}

.blog-dispatch-cta{
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .95;
}

/* Hover */
.blog-dispatch:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(0,0,0,.24);
}

/* Mobile */
@media (max-width: 900px){
  .blog-dispatch{ min-height: 420px; }
  .blog-dispatch-text{
    width: 100%;
    min-height: 0;
    margin: auto 0 0 !important;
  }
}


/* ---- PAGINATION: numbers row, nav row beneath ---- */

.blog-pager{
  margin: 22px auto 0;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.blog-pager-pages{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

/* WP gives .page-numbers */
.blog-pager-pages .page-numbers{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 13px;
  letter-spacing: .02em;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(234,246,255,.88);
  text-decoration: none;

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.12),
    0 10px 22px rgba(0,0,0,.18);
}

.blog-pager-pages .page-numbers:hover{
  border-color: rgba(123,210,255,.30);
  background: rgba(123,210,255,.10);
}

.blog-pager-pages .page-numbers.current{
  border-color: rgba(123,210,255,.55);
  background: rgba(123,210,255,.18);
  color: rgba(234,246,255,1);
}

/* ellipsis */
.blog-pager-pages .page-numbers.dots{
  width: auto;
  padding: 0 10px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: rgba(234,246,255,.55);
}

.blog-pager-nav{
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.blog-pager-nav a{
  min-width: 220px;
  padding: 12px 16px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: rgba(234,246,255,.90);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.10),
    0 14px 28px rgba(0,0,0,.20);
}

.blog-pager-nav a:hover{
  border-color: rgba(123,210,255,.35);
  background: rgba(123,210,255,.10);
}

@media (max-width: 700px){
  .blog-pager-nav{
    flex-direction: column;
    width: 100%;
  }
  .blog-pager-nav a{
    width: min(520px, 92vw);
  }
}

/* =========================================================
   BLOG MOBILE ORDER FIX
   - Put Signal Log + Recent ABOVE the dispatch list on phones
========================================================= */

@media (max-width: 767px){
  .blog-layout{
    display: flex;
    flex-direction: column;
  }

  /* Rail first (Signal + Recent), then main dispatches */
  .blog-rail{ order: 1; }
  .blog-main{ order: 2; }

  /* Nice breathing room between rail and dispatches */
  .blog-main{ margin-top: 18px; }
}

/* =========================================================
   NEWSLETTER PAGE (ID 248)
   - Make "Join the Signal" container FULL WIDTH on mobile
   - Remove MailerLite 400px clamp
========================================================= */

/* =========================
   1) JOIN THE SIGNAL — FULL WIDTH MOBILE
========================= */

@media (max-width: 700px){

  /* Break the theme container width clamp */
  body.page-id-248 .section > .container{
    max-width: none !important;
    width: 100% !important;

    /* Almost full screen width with minimal gutters */
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Force the card itself to fill the container */
  body.page-id-248 .section > .container > .card{
    width: 99% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* If a nested .container exists inside the card, remove its clamp */
  body.page-id-248 .section > .container > .card .container{
    max-width: none !important;
    width: 99% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ========================
   2) MAILERLITE — REMOVE 400px WIDTH CLAMP
========================= */

/* Main embed container */
body.page-id-248 #mlb2-37781873.ml-form-embedContainer{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}

/* Kill MailerLite fixed width wrappers */
body.page-id-248 #mlb2-37781873 .ml-form-embedWrapper.embedForm,
body.page-id-248 #mlb2-37781873 .ml-form-embedWrapper.embedDefault,
body.page-id-248 #mlb2-37781873 .ml-form-embedWrapper.embedPopup{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}

/* Make the internal form body expand fully */
body.page-id-248 #mlb2-37781873 .ml-form-embedBody{
  width: 100% !important;
}

/* Remove float behavior from reCAPTCHA */
body.page-id-248 #mlb2-37781873 .ml-form-recaptcha{
  float: none !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

/* Prevent reCAPTCHA from forcing horizontal overflow */
@media (max-width: 480px){
  body.page-id-248 #mlb2-37781873 .g-recaptcha{
    transform: scale(0.92) !important;
    -webkit-transform: scale(0.92) !important;
    transform-origin: center top !important;
    -webkit-transform-origin: center top !important;
  }
}