/*
 Theme Name: Storyhouse Child
 Theme URI: https://knstoryhouse.com
 Description: Child theme for K. Nicol Storyhouse™ built on Kadence.
 Author: Kischa “K. Nicol” Hernandez
 Template: kadence
 Version: 1.0.0
*/


/* ===== 01 — BRAND VARIABLES & ROOT SYSTEM ===== */
/* ================================================
   01 — STORYHOUSE™ BRAND VARIABLES & ROOT SYSTEM
   ================================================ */

:root {
  /* Brand Colors */
  --sh-primary: #A1866F;        /* Soft Cocoa */
  --sh-primary-dark: #8F7460;  /* Hover cocoa */
  --sh-gold: #D9C4A3;          /* Champagne Gold */
  --sh-gold-light: #E8DCCB;    /* Hover gold tint */
  --sh-text: #2B2B2B;          /* Main text */
  --sh-muted: #6F6F6F;         /* Subtle text */

  /* Typography */
  --sh-heading-font: "Fraunces", serif;
  --sh-body-font: "Lora", serif;
  --sh-accent-font: "Cormorant Garamond", serif;

  /* Type Scale */
  --sh-h1: 3rem;
  --sh-h2: 2.4rem;
  --sh-h3: 1.8rem;
  --sh-h4: 1.4rem;
  --sh-body: 1.1rem;

  /* Spacing System */
  --sh-space-xs: 10px;
  --sh-space-sm: 20px;
  --sh-space-md: 40px;
  --sh-space-lg: 70px;
  --sh-space-xl: 110px;

  /* Borders & Radii */
  --sh-radius-pill: 999px;
  --sh-radius-soft: 12px;

  /* Effects */
  --sh-shadow-soft: 0px 4px 20px rgba(0,0,0,0.07);
}

/* Global Font Loading */
body {
  font-family: var(--sh-body-font);
  color: var(--sh-text);
  font-size: var(--sh-body);
  line-height: 1.65;
  background: transparent !important;
}

/* Heading System */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sh-heading-font);
  font-weight: 400; /* Balanced editorial tone */
  color: var(--sh-text);
  line-height: 1.2;
  margin-top: 0;
}

/* Anchor Styling */
a {
  color: var(--sh-primary);
  transition: 0.25s ease;
}
a:hover {
  color: var(--sh-primary-dark);
}

/* Image Reset */
img {
  max-width: 100%;
  height: auto;
}
/* ================================================
   02 — STORYHOUSE™ BUTTON SYSTEM & DIVIDERS
   ================================================ */

/* Base Button Style (clean reset) */
.sh-btn,
.qss-btn,
.freebie-btn,
.wp-block-button__link {
  display: inline-block;
  padding: 12px 32px;
  border-radius: var(--sh-radius-pill);
  font-family: var(--sh-heading-font);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}


/* ------------------------------------------------
   GOLD OUTLINE BUTTON (your chosen button style)
   ------------------------------------------------ */
.sh-btn.outline,
.qss-btn.outline,
.freebie-btn.outline,
.wp-block-button.is-style-outline > .wp-block-button__link {
  border: 2px solid var(--sh-gold);
  color: var(--sh-primary);
  background: transparent;
}

.sh-btn.outline:hover,
.qss-btn.outline:hover,
.freebie-btn.outline:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--sh-gold-light);
  border-color: var(--sh-gold);
  color: var(--sh-primary-dark);
}


/* ------------------------------------------------
   SOFT COCOA FILLED BUTTON (optional variant)
   ------------------------------------------------ */
.sh-btn.primary,
.qss-btn.primary,
.freebie-btn.primary {
  background: var(--sh-primary);
  color: white;
  border: none;
}

.sh-btn.primary:hover,
.qss-btn.primary:hover,
.freebie-btn.primary:hover {
  background: var(--sh-primary-dark);
}


/* ------------------------------------------------
   GOLD DIVIDERS — Used on freebie pages, Signature,
   Story Starter, Digital Library, etc.
   ------------------------------------------------ */
.sh-divider,
.qss-divider,
.freebie-divider {
  width: 90px;
  height: 1px;
  background: var(--sh-gold);
  opacity: 0.75;
  margin: var(--sh-space-md) auto;
}


/* ------------------------------------------------
   SECTION SPACING (global)
   ------------------------------------------------ */
section {
  margin-bottom: var(--sh-space-lg);
}

.sh-section-title,
.qss-section-title,
.freebie-section-title {
  font-size: var(--sh-h2);
  font-family: var(--sh-heading-font);
  color: var(--sh-text);
  text-align: center;
  margin-bottom: var(--sh-space-sm);
}


/* ------------------------------------------------
   INLINE GOLD ACCENT (for small decorative lines)
   ------------------------------------------------ */
.sh-accent {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--sh-gold);
  opacity: 0.6;
  margin: 0 8px;
}


/* ------------------------------------------------
   LINKS WITH SOFT UNDERLINE ON HOVER
   ------------------------------------------------ */
.sh-soft-link {
  position: relative;
  display: inline-block;
}

.sh-soft-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 1px;
  background: var(--sh-primary);
  transition: 0.3s ease;
}

.sh-soft-link:hover::after {
  width: 100%;
}
/* ================================================
   03 — HERO SECTIONS, TITLES & WAX SEAL SYSTEM
   ================================================ */

/* -----------------------------------------------
   GLOBAL HERO WRAPPER
   Used on: Freebies, Signature Pages, Story Starter,
   Reflections, Editorial Pages
   ----------------------------------------------- */
.sh-hero,
.qss-hero,
.freebie-hero {
  text-align: center;
  max-width: 760px;
  margin: var(--sh-space-xl) auto var(--sh-space-lg);
  padding: 0 20px;
}

/* HERO TITLES */
.sh-hero-title,
.qss-title,
.freebie-title {
  font-size: var(--sh-h1);
  font-family: var(--sh-heading-font);
  font-weight: 400;
  color: var(--sh-text);
  margin-bottom: var(--sh-space-sm);
}

/* HERO SUBTITLE */
.sh-hero-sub,
.qss-subtitle,
.freebie-subtitle {
  font-size: 1.25rem;
  line-height: 1.7;
  font-family: var(--sh-body-font);
  color: var(--sh-muted);
  max-width: 620px;
  margin: 0 auto var(--sh-space-md);
}


/* -----------------------------------------------
   WAX SEAL SYSTEM
   Used at top of Freebies, Quiet Story Starter,
   Digital Library pages, Signature pages
   ----------------------------------------------- */

.sh-waxseal,
.qss-waxseal,
.freebie-waxseal {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--sh-space-md);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.55;
  filter: saturate(0.8) contrast(0.8);
}

/* Specific seal image — replace if you have a child theme asset */
.qss-waxseal {
  background-image: url('https://knstoryhouse.com/wp-content/uploads/2025/12/Storyhouse-Seal.png');
}

.freebie-waxseal {
  background-image: url('https://knstoryhouse.com/wp-content/uploads/2025/12/Storyhouse-Seal.png');
}


/* -----------------------------------------------
   SECTION WRAPPERS
   ----------------------------------------------- */
.qss-wrapper,
.freebie-wrapper,
.sh-wrapper {
  max-width: 900px;
  margin: var(--sh-space-xl) auto;
  padding: 0 20px;
}


/* -----------------------------------------------
   SECTION SUBTITLES (editorial style)
   ----------------------------------------------- */
.sh-section-sub,
.qss-intro,
.freebie-intro,
.sh-editorial-sub {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--sh-muted);
  max-width: 680px;
  margin: 0 auto var(--sh-space-md);
  text-align: center;
}


/* -----------------------------------------------
   EDITORIAL PAGE TITLES (for standalone pages)
   ----------------------------------------------- */
.editorial-page-title {
  font-size: 2.7rem;
  font-family: var(--sh-heading-font);
  font-weight: 400;
  text-align: center;
  margin-bottom: var(--sh-space-sm);
}
/* ================================================
   04 — GLOBAL LAYOUT & EDITORIAL TYPOGRAPHY
   ================================================ */

/* -----------------------------------------------
   GLOBAL PAGE WRAPPER CONTROL
   ----------------------------------------------- */

.sh-page,
.qss-wrapper,
.freebie-wrapper,
.storyhouse-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}


/* -----------------------------------------------
   PARAGRAPH REFINEMENTS
   ----------------------------------------------- */

p {
  font-size: var(--sh-body);
  line-height: 1.7;
  margin-bottom: var(--sh-space-sm);
  color: var(--sh-text);
}


/* -----------------------------------------------
   EMPHASIS TEXT & ACCENT TEXT
   ----------------------------------------------- */

.emphasis {
  font-family: var(--sh-accent-font);
  font-size: 1.25rem;
  color: var(--sh-primary);
  letter-spacing: 0.3px;
}

.soft-accent {
  font-family: var(--sh-accent-font);
  font-size: 1.1rem;
  opacity: 0.9;
}


/* -----------------------------------------------
   BLOCKQUOTE — Literary Style
   ----------------------------------------------- */

blockquote {
  font-family: var(--sh-accent-font);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--sh-primary);
  border-left: 3px solid var(--sh-gold);
  padding-left: var(--sh-space-sm);
  margin: var(--sh-space-md) auto;
  max-width: 760px;
}


/* -----------------------------------------------
   LISTS — Editorial Tightening
   ----------------------------------------------- */

ul,
ol {
  margin: var(--sh-space-sm) auto var(--sh-space-sm);
  padding-left: 1.2rem;
  line-height: 1.7;
}

ul li::marker {
  color: var(--sh-primary);
}

ol li::marker {
  color: var(--sh-primary);
  font-weight: 500;
}


/* -----------------------------------------------
   CENTERED EDITORIAL LIST (for Freebies)
   ----------------------------------------------- */

.qss-list,
.freebie-list {
  list-style: none;
  padding: 0;
  margin: var(--sh-space-sm) auto;
  display: inline-block;
  text-align: left;
}

.qss-list li,
.freebie-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
}

.qss-list li::before,
.freebie-list li::before {
  content: "✧";
  font-family: var(--sh-accent-font);
  color: var(--sh-gold);
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: 2px;
}


/* -----------------------------------------------
   HORIZONTAL RULES (soft & subtle)
   ----------------------------------------------- */

hr {
  border: none;
  border-top: 1px solid var(--sh-gold-light);
  margin: var(--sh-space-md) auto;
  width: 80%;
}


/* -----------------------------------------------
   IMAGE STYLING
   ----------------------------------------------- */

.sh-img-centered,
.qss-img-centered,
.freebie-img-centered {
  display: block;
  margin: var(--sh-space-md) auto;
  max-width: 100%;
  border-radius: var(--sh-radius-soft);
  box-shadow: var(--sh-shadow-soft);
}
/* ================================================
   05 — FREEBIE PAGE SYSTEM
   Quiet Story Starter + Quiet Memory Map
   ================================================ */


/* -----------------------------------------------
   FREEBIE WRAPPERS
   ----------------------------------------------- */

.qss-wrapper,
.freebie-wrapper {
  max-width: 900px;
  margin: var(--sh-space-xl) auto;
  padding: 0 20px;
  text-align: center;
}


/* -----------------------------------------------
   WAX SEAL (REFINED)
   ----------------------------------------------- */

.qss-waxseal,
.freebie-waxseal {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--sh-space-md);
  background-image: url('https://knstoryhouse.com/wp-content/uploads/2025/12/Storyhouse-Seal.png'); /* Replace if needed */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.52;
  filter: saturate(0.85) contrast(0.85);
}


/* -----------------------------------------------
   TITLES
   ----------------------------------------------- */

.qss-title,
.freebie-title {
  font-size: var(--sh-h1);
  margin-bottom: var(--sh-space-sm);
  color: var(--sh-text);
  font-family: var(--sh-heading-font);
  font-weight: 400;
}

.qss-subtitle,
.freebie-subtitle {
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--sh-muted);
  max-width: 680px;
  margin: 0 auto var(--sh-space-md);
}


/* -----------------------------------------------
   DIVIDERS (GOLD)
   ----------------------------------------------- */

.qss-divider,
.freebie-divider {
  width: 90px;
  height: 1px;
  background: var(--sh-gold);
  opacity: 0.75;
  margin: var(--sh-space-md) auto;
}


/* -----------------------------------------------
   FORM INTRO
   ----------------------------------------------- */

.qss-intro,
.freebie-intro {
  font-size: 1.15rem;
  max-width: 700px;
  margin: 0 auto var(--sh-space-md);
  color: var(--sh-muted);
  line-height: 1.7;
}


/* -----------------------------------------------
   WHAT'S INSIDE — LIST BLOCK
   ----------------------------------------------- */

.qss-list,
.freebie-list {
  list-style: none;
  padding: 0;
  margin: var(--sh-space-md) auto;
  display: inline-block;
  text-align: left;
}

.qss-list li,
.freebie-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 1.1rem;
  line-height: 1.6;
}

.qss-list li::before,
.freebie-list li::before {
  content: "✧";
  font-family: var(--sh-accent-font);
  color: var(--sh-gold);
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: 1px;
}


/* -----------------------------------------------
   INVITE SECTION
   ----------------------------------------------- */

.qss-invite,
.freebie-invite {
  max-width: 760px;
  margin: var(--sh-space-lg) auto;
}

.qss-invite-text,
.freebie-invite-text {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--sh-muted);
  margin-bottom: var(--sh-space-md);
}


/* -----------------------------------------------
   SIGNATURE AREA
   ----------------------------------------------- */

.qss-footer,
.freebie-footer {
  margin-top: var(--sh-space-lg);
}

.qss-footer-text,
.freebie-footer-text {
  font-family: var(--sh-accent-font);
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: var(--sh-text);
}

.qss-signature,
.freebie-signature {
  display: block;
  margin: 0 auto;
  max-width: 260px;
  opacity: 0.95;
}
/* ================================================
   06 — STORYHOUSE™ BLOG HERO & GRID
   ================================================ */


/* -----------------------------------------------
   BLOG HERO (Featured Story)
   ----------------------------------------------- */

.sh-blog-hero {
  max-width: 900px;
  margin: var(--sh-space-xl) auto var(--sh-space-lg);
  padding: 0 20px;
  text-align: center;
}

.sh-blog-tag {
  font-family: var(--sh-accent-font);
  font-size: 1rem;
  color: var(--sh-primary);
  opacity: 0.9;
  margin-bottom: 10px;
  display: inline-block;
  letter-spacing: 0.5px;
}

.sh-blog-hero-title {
  font-size: 2.8rem;
  font-weight: 400;
  margin-bottom: var(--sh-space-sm);
  font-family: var(--sh-heading-font);
  color: var(--sh-text);
}

.sh-blog-hero-excerpt {
  max-width: 700px;
  margin: 0 auto var(--sh-space-md);
  font-size: 1.2rem;
  color: var(--sh-muted);
  line-height: 1.7;
}

.sh-blog-hero-btn {
  margin-top: var(--sh-space-sm);
}


/* -----------------------------------------------
   BLOG GRID WRAPPER
   ----------------------------------------------- */

.sh-blog-grid {
  max-width: 1100px;
  margin: var(--sh-space-xl) auto;
  padding: 0 20px;
}

.sh-blog-section-title {
  font-size: var(--sh-h2);
  text-align: center;
  margin-bottom: var(--sh-space-md);
}


/* -----------------------------------------------
   BLOG GRID (2-COLUMN LAYOUT)
   ----------------------------------------------- */

.sh-blog-grid-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sh-space-lg);
}


/* -----------------------------------------------
   BLOG CARD
   ----------------------------------------------- */

.sh-blog-card {
  background: #ffffff;
  border-radius: var(--sh-radius-soft);
  padding: 20px;
  box-shadow: var(--sh-shadow-soft);
  transition: 0.3s ease;
}

.sh-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 6px 24px rgba(0,0,0,0.08);
}


/* Blog Card Image */
.sh-blog-card img {
  width: 100%;
  height: auto;
  border-radius: var(--sh-radius-soft);
  margin-bottom: 16px;
}


/* Blog Card Title */
.sh-blog-card h3 {
  font-family: var(--sh-heading-font);
  font-size: 1.5rem;
  margin: 0 0 10px;
  color: var(--sh-text);
}

.sh-blog-card h3 a {
  color: var(--sh-text);
  text-decoration: none;
}

.sh-blog-card h3 a:hover {
  color: var(--sh-primary);
}


/* Blog Card Excerpt */
.sh-blog-card p {
  font-size: 1.05rem;
  color: var(--sh-muted);
  line-height: 1.6;
}


/* -----------------------------------------------
   PAGINATION (Kadence Query Pagination)
   ----------------------------------------------- */

.page-numbers {
  font-family: var(--sh-body-font);
  padding: 10px 14px;
  margin: 0 4px;
  border-radius: var(--sh-radius-soft);
  border: 1px solid var(--sh-gold);
  color: var(--sh-primary);
  transition: 0.3s ease;
}

.page-numbers:hover {
  background: var(--sh-gold-light);
  color: var(--sh-primary-dark);
}

.page-numbers.current {
  background: var(--sh-gold);
  color: var(--sh-primary-dark);
  border-color: var(--sh-gold);
}
/* ================================================
   07 — NAVIGATION, HEADER & FOOTER REFINEMENTS
   ================================================ */

/* -----------------------------------------------
   GLOBAL HEADER SPACING & TYPOGRAPHY
   ----------------------------------------------- */

.site-header,
.header-inner-wrap {
  font-family: var(--sh-heading-font);
  font-weight: 400;
  background: transparent !important;
}

.site-header a,
.header-navigation a {
  font-family: var(--sh-heading-font);
  font-size: 1.05rem;
  color: var(--sh-text) !important;
  letter-spacing: 0.3px;
  transition: 0.3s ease;
}

/* Hover State */
.header-navigation a:hover {
  color: var(--sh-primary) !important;
}

/* Active Menu Item */
.current-menu-item > a {
  color: var(--sh-primary) !important;
  border-bottom: 1px solid var(--sh-gold);
}


/* -----------------------------------------------
   MENU SPACING & ALIGNMENT
   ----------------------------------------------- */

.header-navigation .menu > li {
  margin: 0 16px !important;
}

.header-navigation .menu > li > a {
  padding: 8px 0 !important;
}


/* -----------------------------------------------
   SUBMENU (Dropdown) REFINEMENTS
   ----------------------------------------------- */

.header-navigation .sub-menu {
  background: #ffffff;
  border-radius: var(--sh-radius-soft);
  padding: 12px 0;
  box-shadow: var(--sh-shadow-soft);
}

.header-navigation .sub-menu a {
  padding: 10px 20px !important;
  color: var(--sh-text) !important;
}

.header-navigation .sub-menu a:hover {
  background: var(--sh-gold-light);
  color: var(--sh-primary-dark) !important;
}


/* -----------------------------------------------
   MOBILE MENU REFINEMENTS
   ----------------------------------------------- */

.mobile-navigation ul li a {
  font-family: var(--sh-heading-font);
  font-size: 1.2rem;
  color: var(--sh-text) !important;
}

.mobile-navigation ul li a:hover {
  color: var(--sh-primary) !important;
}

/* Divider between mobile items */
.mobile-navigation ul li {
  border-bottom: 1px solid var(--sh-gold-light);
}


/* -----------------------------------------------
   FOOTER REFINEMENTS
   ----------------------------------------------- */

.sh-footer,
.site-footer {
  font-family: var(--sh-body-font);
  padding: var(--sh-space-lg) 20px;
  background: transparent !important;
}

.sh-footer h3,
.sh-footer h4,
.site-footer h3,
.site-footer h4 {
  font-family: var(--sh-heading-font);
  font-weight: 400;
  margin-bottom: 12px;
  color: var(--sh-text);
}

.sh-footer p,
.sh-footer a,
.site-footer p,
.site-footer a {
  color: var(--sh-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.sh-footer a:hover,
.site-footer a:hover {
  color: var(--sh-primary);
}

/* Footer Logo */
.footer-logo img {
  width: 90px;
  opacity: 0.75;
  margin: 0 auto var(--sh-space-sm);
}

/* Footer Divider */
.storyhouse-divider {
  width: 90px;
  height: 1px;
  background: var(--sh-gold);
  opacity: 0.75;
  margin: 0 auto var(--sh-space-md);
}

.footer-tagline {
  font-family: var(--sh-heading-font);
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: var(--sh-space-sm);
}

.footer-subline {
  font-family: var(--sh-accent-font);
  font-size: 1rem;
  opacity: 0.8;
}

.footer-copy {
  font-size: 0.9rem;
  opacity: 0.65;
  margin-top: var(--sh-space-md);
  text-align: center;
}
/* ================================================
   08 — STORYHOUSE™ DIGITAL LIBRARY
   ================================================ */


/* -----------------------------------------------
   LIBRARY WRAPPER
   ----------------------------------------------- */

.dl-page,
.storyhouse-library-wrapper {
  max-width: 1100px;
  margin: var(--sh-space-xl) auto;
  padding: 0 20px;
}


/* -----------------------------------------------
   LIBRARY SECTION TITLES
   ----------------------------------------------- */

.dl-section-title {
  font-family: var(--sh-heading-font);
  font-size: var(--sh-h2);
  text-align: left;
  margin-bottom: 10px;
  color: var(--sh-text);
}

.dl-section-sub {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--sh-muted);
  max-width: 720px;
  margin-bottom: var(--sh-space-md);
}


/* -----------------------------------------------
   LIBRARY GRID
   ----------------------------------------------- */

.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sh-space-lg);
  margin-top: var(--sh-space-md);
}

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

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


/* -----------------------------------------------
   DIGITAL LIBRARY CARD
   ----------------------------------------------- */

.dl-card {
  background: #ffffff;
  padding: 24px;
  border-radius: var(--sh-radius-soft);
  box-shadow: var(--sh-shadow-soft);
  text-align: center;
  transition: all 0.28s ease;
}

.dl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 6px 20px rgba(0,0,0,0.08);
}


/* Card Image */
.dl-card img {
  width: 100%;
  border-radius: var(--sh-radius-soft);
  margin-bottom: 18px;
}


/* Card Title */
.dl-card h3 {
  font-family: var(--sh-heading-font);
  font-weight: 400;
  font-size: 1.45rem;
  margin-bottom: 8px;
  color: var(--sh-text);
}

.dl-card h3 a {
  text-decoration: none;
  color: var(--sh-text);
}

.dl-card h3 a:hover {
  color: var(--sh-primary);
}


/* Card Description */
.dl-card p {
  font-size: 1rem;
  color: var(--sh-muted);
  line-height: 1.6;
  margin-bottom: var(--sh-space-sm);
}


/* Card Button */
.dl-card .sh-btn.outline {
  margin-top: 10px;
}


/* -----------------------------------------------
   DOWNLOAD BADGE / TAG
   ----------------------------------------------- */

.dl-tag {
  display: inline-block;
  background: var(--sh-gold-light);
  border: 1px solid var(--sh-gold);
  padding: 6px 14px;
  border-radius: var(--sh-radius-pill);
  font-size: 0.85rem;
  font-family: var(--sh-body-font);
  margin-bottom: 14px;
  color: var(--sh-primary-dark);
}


/* -----------------------------------------------
   CATEGORY HEADERS
   ----------------------------------------------- */

.dl-category {
  font-family: var(--sh-accent-font);
  font-size: 1.35rem;
  color: var(--sh-primary);
  margin: var(--sh-space-lg) 0 var(--sh-space-md);
  text-align: left;
}


/* -----------------------------------------------
   BACKGROUND FOR SECTIONS (transparent by choice)
   ----------------------------------------------- */

.storyhouse-dl-section {
  padding: var(--sh-space-lg) 0;
}
/* ================================================
   09 — STORYHOUSE SIGNATURE™ PAGE SYSTEM
   ================================================ */


/* -----------------------------------------------
   SIGNATURE WRAPPER
   ----------------------------------------------- */

.signature-wrapper {
  max-width: 900px;
  margin: var(--sh-space-xl) auto;
  padding: 0 20px;
  text-align: center;
}


/* -----------------------------------------------
   SIGNATURE HERO
   ----------------------------------------------- */

.signature-hero {
  max-width: 900px;
  margin: var(--sh-space-xl) auto var(--sh-space-lg);
  padding: 0 20px;
}

.signature-title {
  font-family: var(--sh-heading-font);
  font-size: 3rem;
  line-height: 1.1;
  margin-bottom: var(--sh-space-sm);
  color: var(--sh-text);
  font-weight: 400;
}

.signature-subtitle {
  font-family: var(--sh-body-font);
  font-size: 1.25rem;
  color: var(--sh-muted);
  max-width: 700px;
  margin: 0 auto var(--sh-space-md);
  line-height: 1.7;
}


/* -----------------------------------------------
   GOLD DIVIDER (special size for signature)
   ----------------------------------------------- */

.signature-divider {
  width: 110px;
  height: 2px;
  background: var(--sh-gold);
  margin: var(--sh-space-md) auto;
  opacity: 0.75;
}


/* -----------------------------------------------
   SIGNATURE SECTIONS (left-aligned editorial)
   ----------------------------------------------- */

.signature-section {
  max-width: 760px;
  margin: var(--sh-space-xl) auto;
  text-align: left;
}

.signature-section h2 {
  font-family: var(--sh-heading-font);
  font-size: var(--sh-h2);
  margin-bottom: var(--sh-space-sm);
  color: var(--sh-text);
}

.signature-section p {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--sh-text);
  margin-bottom: var(--sh-space-sm);
}


/* -----------------------------------------------
   SIGNATURE “OFFER MODULE” BLOCKS
   ----------------------------------------------- */

.signature-offer-box {
  background: #ffffff;
  border: 1px solid var(--sh-gold-light);
  border-radius: var(--sh-radius-soft);
  padding: var(--sh-space-md);
  box-shadow: var(--sh-shadow-soft);
  margin: var(--sh-space-lg) 0;
  text-align: left;
  transition: 0.3s ease;
}

.signature-offer-box:hover {
  box-shadow: 0px 6px 20px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}

.signature-offer-box h3 {
  font-family: var(--sh-heading-font);
  font-size: 1.6rem;
  margin-bottom: 12px;
  color: var(--sh-text);
}

.signature-offer-box p {
  font-family: var(--sh-body-font);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--sh-muted);
}


/* -----------------------------------------------
   SIGNATURE LIST (soft gold bullets)
   ----------------------------------------------- */

.signature-list {
  list-style: none;
  padding: 0;
  margin: var(--sh-space-sm) 0;
}

.signature-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
}

.signature-list li::before {
  content: "✦";
  font-family: var(--sh-accent-font);
  color: var(--sh-gold);
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: 2px;
}


/* -----------------------------------------------
   SIGNATURE TESTIMONIALS
   ----------------------------------------------- */

.signature-testimonial {
  background: #ffffff;
  border-radius: var(--sh-radius-soft);
  padding: var(--sh-space-md);
  box-shadow: var(--sh-shadow-soft);
  max-width: 760px;
  margin: var(--sh-space-lg) auto;
  text-align: left;
  border-left: 4px solid var(--sh-gold);
}

.signature-testimonial p {
  font-family: var(--sh-body-font);
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--sh-text);
}

.signature-testimonial cite {
  display: block;
  font-family: var(--sh-accent-font);
  font-size: 1.1rem;
  margin-top: 10px;
  color: var(--sh-primary);
}


/* -----------------------------------------------
   SIGNATURE CTA BUTTON (outline gold)
   ----------------------------------------------- */

.signature-cta {
  margin: var(--sh-space-lg) 0;
}

.signature-cta .sh-btn.outline {
  padding: 14px 34px;
  font-size: 1.1rem;
}

.signature-cta .sh-btn.outline:hover {
  background: var(--sh-gold-light);
}
/* ================================================
   10 — RESPONSIVE DESIGN RULES
   ================================================ */


/* -----------------------------------------------
   GLOBAL BREAKPOINTS
   ----------------------------------------------- */

/* Tablet and below */
@media (max-width: 900px) {

  /* Typography Scaling */
  h1, .sh-hero-title, .qss-title, .freebie-title, .signature-title {
    font-size: 2.3rem;
  }

  h2, .sh-section-title, .qss-section-title, .freebie-section-title {
    font-size: 1.9rem;
  }

  p, li {
    font-size: 1.05rem;
  }

  /* Signature sections */
  .signature-section {
    padding: 0 10px;
  }

  .signature-testimonial {
    margin: var(--sh-space-md) 10px;
  }

  /* Blog grid → 1 column on tablet */
  .sh-blog-grid-inner {
    grid-template-columns: 1fr;
    gap: var(--sh-space-md);
  }

  /* Digital Library → 2 columns */
  .dl-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* -----------------------------------------------
   MOBILE OPTIMIZATION
   ----------------------------------------------- */

@media (max-width: 600px) {

  /* Page Wrappers */
  .sh-wrapper,
  .qss-wrapper,
  .freebie-wrapper,
  .signature-wrapper,
  .storyhouse-library-wrapper {
    padding: 0 16px;
  }

  /* Hero Titles */
  .sh-hero-title,
  .qss-title,
  .freebie-title,
  .signature-title {
    font-size: 2rem;
    line-height: 1.15;
  }

  /* Subtitles */
  .sh-hero-sub,
  .qss-subtitle,
  .freebie-subtitle,
  .signature-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
  }

  /* Wax Seal resizing */
  .qss-waxseal,
  .freebie-waxseal {
    width: 90px;
    height: 90px;
    margin-bottom: var(--sh-space-sm);
  }

  /* Lists centered properly */
  .qss-list,
  .freebie-list,
  .signature-list {
    text-align: left;
    margin-left: 0;
  }

  .qss-list li,
  .freebie-list li,
  .signature-list li {
    font-size: 1rem;
    padding-left: 20px;
  }

  /* Blog Grid → full width */
  .sh-blog-grid-inner {
    grid-template-columns: 1fr;
  }

  /* Digital Library → 1 column */
  .dl-grid {
    grid-template-columns: 1fr;
  }

  /* Buttons */
  .sh-btn,
  .qss-btn,
  .freebie-btn {
    padding: 12px 24px;
    font-size: 0.95rem;
  }

  /* Signature Offer Box */
  .signature-offer-box {
    padding: var(--sh-space-sm);
  }

  /* Signature CTA */
  .signature-cta .sh-btn {
    width: 100%;
  }
}


/* -----------------------------------------------
   LARGE SCREENS (desktop+) – gentle max-width tuning
   ----------------------------------------------- */

@media (min-width: 1400px) {
  .sh-wrapper,
  .qss-wrapper,
  .freebie-wrapper,
  .signature-wrapper {
    max-width: 1000px;
  }

  .dl-page {
    max-width: 1200px;
  }
}