/*
Theme Name: Lyons Resources Child
Theme URI: https://lyonsresources.com
Description: Child theme for Lyons Resources — built on Astra. Applies Lyons Resources brand: navy/gold color palette, Playfair Display headlines, Source Sans 3 body, and LPL Financial co-branding bar.
Author: Tim Lyons, Lyons Resources
Version: 1.0.0
Template: astra
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — Lyons Resources Design System
   ============================================================ */
:root {
  /* Brand Colors */
  --lr-navy:        #1A2540;
  --lr-navy-mid:    #1B3A6B;
  --lr-gold:        #B8973A;
  --lr-gold-light:  #d4ae52;
  --lr-off-white:   #F9F7F4;
  --lr-text-mid:    #3D4A63;
  --lr-text-light:  #6B7A94;
  --lr-border:      #E2DDD8;

  /* LPL Co-brand */
  --lr-lpl-blue:    #00205B;
  --lr-lpl-copper:  #BE5400;
  --lr-lpl-sand:    #F7F1ED;

  /* Typography */
  --lr-font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --lr-font-body: 'Source Sans 3', 'Source Sans Pro', Calibri, Arial, sans-serif;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
body,
p,
li,
td,
input,
textarea,
select,
.widget {
  font-family: var(--lr-font-body) !important;
  color: var(--lr-navy);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.site-title,
.wp-block-heading {
  font-family: var(--lr-font-head) !important;
  color: var(--lr-navy);
  line-height: 1.25;
}

/* ============================================================
   LINKS
   ============================================================ */
a {
  color: var(--lr-gold);
}
a:hover {
  color: var(--lr-gold-light);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.wp-block-button__link,
.wp-element-button,
button[type="submit"],
input[type="submit"],
.btn,
.button,
.woocommerce-Button {
  background-color: var(--lr-gold) !important;
  color: var(--lr-navy) !important;
  font-family: var(--lr-font-body) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 4px !important;
  letter-spacing: 0.3px;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.btn:hover,
.button:hover {
  background-color: var(--lr-gold-light) !important;
  color: var(--lr-navy) !important;
}

/* ============================================================
   SITE HEADER — generic + Astra-specific
   ============================================================ */
.site-header,
#masthead,
header.site-header,
.header-wrapper,
.ast-header-break-point .main-header-bar,
.main-header-bar,
#ast-desktop-header {
  background-color: var(--lr-navy) !important;
  border-bottom: 3px solid var(--lr-gold) !important;
}

/* Astra header row */
.ast-masthead-custom-menu-items,
.ast-primary-header-bar {
  background-color: var(--lr-navy) !important;
}

/* Site title / logo text */
.site-title a,
.site-title a:visited,
.ast-site-title-wrap a {
  color: #ffffff !important;
}
.site-description {
  color: rgba(255,255,255,0.6) !important;
}

/* ============================================================
   NAVIGATION — generic + Astra-specific
   ============================================================ */
.main-navigation a,
.nav-menu a,
.primary-menu a,
#site-navigation a,
.main-navigation ul li a,
.ast-nav-menu > li > a,
#ast-desktop-header .ast-nav-menu > li > a,
.main-header-menu > li > a {
  color: rgba(255, 255, 255, 0.82) !important;
  font-family: var(--lr-font-body) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  font-size: 14px !important;
}
.main-navigation a:hover,
.nav-menu a:hover,
#site-navigation a:hover,
.ast-nav-menu > li > a:hover {
  color: var(--lr-gold-light) !important;
}
/* Dropdown backgrounds */
.main-navigation ul ul,
.nav-menu ul ul,
.ast-nav-menu .sub-menu {
  background-color: var(--lr-navy-mid) !important;
}
.ast-nav-menu .sub-menu li a {
  color: rgba(255,255,255,0.82) !important;
}

/* Mobile menu toggle */
.ast-mobile-menu-trigger-fill,
button.menu-toggle {
  color: #ffffff !important;
}
.ast-header-break-point #masthead {
  background-color: var(--lr-navy) !important;
}

/* ============================================================
   LPL FINANCIAL SUB-BAR
   Injected via wp_body_open in functions.php.
   If the bar does not appear, see the fallback note in
   functions.php — you can add it via a Custom HTML widget instead.
   ============================================================ */
.lr-lpl-bar {
  background-color: var(--lr-lpl-blue);
  padding: 9px 16px;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 998;
}
.lr-lpl-bar-line1 {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  font-family: var(--lr-font-body);
  margin-bottom: 3px;
  line-height: 1.5;
}
.lr-lpl-bar-line1 a {
  color: #A8C4E0 !important;
  text-decoration: none !important;
}
.lr-lpl-bar-line1 a:hover {
  text-decoration: underline !important;
}
.lr-lpl-bar-line2 {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.70);
  font-family: var(--lr-font-body);
  letter-spacing: 0.4px;
  line-height: 1.5;
}
.lr-lpl-bar-sep {
  margin: 0 8px;
  opacity: 0.4;
}
@media (max-width: 640px) {
  .lr-lpl-bar-line2 { display: none; }
  .lr-lpl-bar-line1 { font-size: 12px; }
}

/* ============================================================
   CONTENT AREA
   ============================================================ */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.wp-block-heading h2,
.wp-block-heading h3 {
  font-family: var(--lr-font-head) !important;
  color: var(--lr-navy) !important;
}

.entry-content p,
.entry-content li {
  font-family: var(--lr-font-body) !important;
  color: var(--lr-text-mid);
  line-height: 1.75;
  font-size: 17px;
}

/* Gutenberg separator */
.wp-block-separator {
  border-color: var(--lr-border);
}

/* Gutenberg quote */
.wp-block-quote {
  border-left-color: var(--lr-gold) !important;
  font-family: var(--lr-font-head) !important;
  color: var(--lr-navy-mid);
}

/* ============================================================
   BACKGROUND
   ============================================================ */
body,
.site,
.site-content,
#page {
  background-color: #ffffff;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
#colophon,
footer.site-footer {
  background-color: #0F1824 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: var(--lr-font-body) !important;
}
.site-footer a,
#colophon a {
  color: var(--lr-gold) !important;
}
.site-footer a:hover,
#colophon a:hover {
  color: var(--lr-gold-light) !important;
}
.site-footer p,
#colophon p,
.site-footer .widget-title,
#colophon .widget-title {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: var(--lr-font-body) !important;
}

/* ============================================================
   GUTENBERG BLOCK EDITOR — CUSTOM COLOR CLASSES
   Use these in the block editor color picker under
   "Theme Colors" after activating the child theme.
   ============================================================ */
.has-navy-color             { color: var(--lr-navy) !important; }
.has-navy-background-color  { background-color: var(--lr-navy) !important; color: #fff; }
.has-navy-mid-color         { color: var(--lr-navy-mid) !important; }
.has-gold-color             { color: var(--lr-gold) !imp