/*
Theme Name: WPO-Theme
Theme URI: https://webprintone.com
Description: WebPrintOne custom Divi 5 child theme for A Sure Sign & Design. Global design tokens live in :root below - edit them to retheme the entire site.
Author: WebPrintOne
Author URI: https://webprintone.com
Template: Divi
Version: 1.3.0
*/

/* ============================================================
   WPO GLOBAL DESIGN TOKENS
   Edit these variables to change the whole site's look.
   Every layout we build references these names.
   ============================================================ */
:root{
  /* --- palette (matches the 12 Divi global colors) --- */
  --wpo-burgundy:      #6D1220;  /* Brand Burgundy: header, footer, primary brand */
  --wpo-burgundy-deep: #4E0C16;  /* Burgundy Deep: gradients, mobile panel        */
  --wpo-espresso:      #1B1410;  /* Espresso: dark section backgrounds            */
  --wpo-wood:          #33231A;  /* Wood Brown: dark section alt                  */
  --wpo-gold:          #C9A35E;  /* Gold Leaf: accent, buttons, rules             */
  --wpo-gold-bright:   #E7C987;  /* Gold Bright: hovers, highlights               */
  --wpo-gold-dark:     #9A7A3F;  /* Gold Deep: muted gold                         */
  --wpo-cream:         #F5EFE3;  /* Cream: light backgrounds / text on dark       */
  --wpo-parchment:     #EFE7D9;  /* Parchment: light section alt                  */
  --wpo-card:          #F9F3E9;  /* Card: card surfaces on light sections         */
  --wpo-ink:           #2A221C;  /* Ink: heading + body text on light             */
  --wpo-ink-dim:       #5D5347;  /* Ink Dim: muted/secondary text                 */
  --wpo-rule:          rgba(201,163,94,.3);  /* gold divider lines                */

  /* --- semantic aliases (what components actually use) --- */
  --wpo-header-bg:     var(--wpo-espresso);
  --wpo-footer-bg:     var(--wpo-espresso);
  --wpo-menu-panel:    #241A13;  /* original dark panel; between espresso & wood */

  /* --- buttons --- */
  --wpo-btn-bg:        var(--wpo-gold);
  --wpo-btn-bg-hover:  var(--wpo-gold-bright);
  --wpo-btn-text:      var(--wpo-ink);
  --wpo-btn-radius:    2px;

  /* --- typography --- */
  --wpo-font-display:  'Fraunces', Georgia, serif;
  --wpo-font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --wpo-font-accent:   'Cormorant Garamond', Georgia, serif;
  --wpo-fs-h1:         clamp(2.4rem, 5vw, 4.0rem);
  --wpo-fs-h2:         clamp(1.9rem, 3.4vw, 2.7rem);
  --wpo-fs-h3:         1.35rem;
  --wpo-fs-body:       16px;
  --wpo-fs-small:      13px;
  --wpo-lh-body:       1.7;
  --wpo-eyebrow-track: 2.5px;

  /* --- text colors --- */
  --wpo-heading-color: var(--wpo-ink);
  --wpo-body-color:    var(--wpo-ink);
  --wpo-link-color:    var(--wpo-burgundy);
}

/* ============================================================
   GLOBAL TYPOGRAPHY (scoped to Divi page output)
   ============================================================ */
#page-container{
  font-family: var(--wpo-font-body);
  font-size: var(--wpo-fs-body);
  line-height: var(--wpo-lh-body);
}
#page-container h1, #page-container h2, #page-container h3,
#page-container h4, #page-container h5, #page-container h6{
  font-family: var(--wpo-font-display);
}
#page-container h1{ font-size: var(--wpo-fs-h1); }
/* text colors apply to PAGE CONTENT only (.et-l--post) so the
   Theme Builder header/footer keep their own link & text colors */
#page-container .et-l--post h1, #page-container .et-l--post h2,
#page-container .et-l--post h3, #page-container .et-l--post h4,
#page-container .et-l--post h5, #page-container .et-l--post h6{ color: var(--wpo-heading-color); }
#page-container .et-l--post .et_pb_text{ color: var(--wpo-body-color); }
#page-container .et-l--post .et_pb_text a{ color: var(--wpo-link-color); }
#page-container h2{ font-size: var(--wpo-fs-h2); }
#page-container h3{ font-size: var(--wpo-fs-h3); }

/* ============================================================
   GLOBAL BUTTON LOOK (Divi buttons site-wide)
   ============================================================ */
#page-container .et_pb_button{
  background: var(--wpo-btn-bg);
  color: var(--wpo-btn-text);
  border-radius: var(--wpo-btn-radius);
  font-family: var(--wpo-font-body);
  font-weight: 600;
  letter-spacing: .5px;
  transition: background-color .2s ease, color .2s ease;
}
#page-container .et_pb_button:hover{
  background: var(--wpo-btn-bg-hover);
  color: var(--wpo-btn-text);
}

/* ============================================================
   THEME HELPERS (used by WPO layouts)
   ============================================================ */
.wpo-header{ position: sticky; top: 0; z-index: 99999; }
html{ scroll-behavior: smooth; }
.et_pb_section{ scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
.assd-eyebrow{
  font-family: var(--wpo-font-body); font-size: 12px; font-weight: 600;
  letter-spacing: var(--wpo-eyebrow-track); text-transform: uppercase;
  color: var(--wpo-gold);
}
.assd-inline-btn{
  display: inline-block; background: var(--wpo-btn-bg); color: var(--wpo-btn-text);
  border-radius: var(--wpo-btn-radius); padding: 12px 22px; text-decoration: none;
  font-family: var(--wpo-font-body); font-weight: 600; font-size: 14px;
  transition: background-color .2s ease;
}
.assd-inline-btn:hover{ background: var(--wpo-btn-bg-hover); color: var(--wpo-btn-text); }