/**
 * BLU-D Construction — Subtheme CSS
 * Brand: Pitch & Pine palette per official brand guide.
 * Variables only. All component styles live in css/components/.
 *
 * Colors: Big Blu, Old Pitch, Blu Sky, Premium Pine, Chalk, Warm Charcoal
 * Typography: Oswald (headings), Source Sans 3 (body)
 */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&display=swap');

/* ============================================================
   ROOT VARIABLES
   ============================================================ */

:root {

  /* --- Brand Colors: Pitch & Pine --- */
  --color-big-blu:          #1B3A6B;   /* PMS 648 — primary navy */
  --color-old-pitch:        #C4782A;   /* PMS 7563 — warm amber accent */
  --color-blu-sky:          #8FAAC9;   /* PMS 648 @ 45% tint */
  --color-premium-pine:     #B5A88A;   /* PMS 7527 — warm tan */
  --color-chalk:            #F5F2ED;   /* page background off-white */
  --color-warm-charcoal:    #2E2E2E;   /* body text */

  /* --- Primary / Accent aliases --- */
  --color-primary:          var(--color-big-blu);
  --color-primary-dark:     #122852;
  --color-primary-light:    #2A5494;
  --color-accent:           var(--color-old-pitch);
  --color-accent-dark:      #A36224;
  --color-accent-light:     #D4924A;

  /* --- Neutral Palette --- */
  --color-white:            #ffffff;
  --color-off-white:        var(--color-chalk);
  --color-light-gray:       #E8E4DC;
  --color-mid-gray:         #8E8C87;
  --color-dark-gray:        #4A4845;
  --color-black:            #1A1814;

  /* --- Semantic Colors --- */
  --color-body-bg:          var(--color-chalk);
  --color-body-text:        var(--color-warm-charcoal);
  --color-heading:          var(--color-big-blu);
  --color-subheading:       var(--color-warm-charcoal);
  --color-link:             var(--color-big-blu);
  --color-link-hover:       var(--color-old-pitch);
  --color-link-visited:     var(--color-big-blu);
  --color-border:           #D4CFCA;

  /* --- Header --- */
  --color-header-bg:        var(--color-big-blu);
  --color-header-text:      #ffffff;
  --color-header-link:      #ffffff;
  --color-header-link-hover: var(--color-blu-sky);
  --color-nav-dropdown-bg:  var(--color-primary-dark);
  --color-nav-dropdown-link: #ffffff;
  --color-nav-dropdown-hover: var(--color-old-pitch);

  /* Semi-transparent header over node hero images */
  --header-hero-bg:           rgba(0, 46, 93, 0.40);  /* Big Blu at 40% */
 
  /* Node hero overlay — photo-to-solid gradient */
  --wmd-hero-overlay-top:     0.10;  /* Near-transparent at top */
  --wmd-hero-overlay-bottom:  0.65;  /* Solid enough for white text */
  --wmd-hero-min-height-image: 480px;
  --wmd-hero-min-height-solid: 200px;

  --header-scroll-bg:         rgba(0, 46, 93, 0.50);   /* Big Blu at 50% */
  --header-scroll-blur:       12px;                     /* frosted glass */
	
  --header-height:         130px;   /* header-top bar + main nav */
  --header-height-mobile:  70px;
	
  /* --- Hero --- */
  --color-hero-overlay:     rgba(27, 58, 107, 0.6);
  --color-hero-text:        #ffffff;

  /* --- Buttons --- */
  --color-btn-primary-bg:           var(--color-big-blu);
  --color-btn-primary-text:         #ffffff;
  --color-btn-primary-hover-bg:     var(--color-primary-dark);
  --color-btn-secondary-bg:         transparent;
  --color-btn-secondary-text:       var(--color-big-blu);
  --color-btn-secondary-border:     var(--color-big-blu);
  --color-btn-secondary-hover-bg:   var(--color-big-blu);
  --color-btn-secondary-hover-text: #ffffff;

  /* --- Old Pitch CTA button variant --- */
  --color-btn-pitch-bg:           var(--color-old-pitch);
  --color-btn-pitch-text:         #ffffff;
  --color-btn-pitch-hover-bg:     var(--color-accent-dark);

  /* --- Footer --- */
  --color-footer-bg:        var(--color-primary-dark);
  --color-footer-text:      var(--color-blu-sky);
  --color-footer-heading:   #ffffff;
  --color-footer-link:      var(--color-blu-sky);
  --color-footer-link-hover: #ffffff;
  --color-footer-border:    var(--color-primary-light);
  --color-footer-bottom-bg: #0D1F3C;

  /* --- Drawer (mobile nav) --- */
  --color-drawer-bg:        var(--color-big-blu);
  --color-drawer-text:      #ffffff;
  --color-drawer-link:      #ffffff;
  --color-drawer-link-hover: var(--color-blu-sky);
  --color-drawer-border:    var(--color-primary-light);

  /* --- Cards / Panels --- */
  --color-card-bg:          #ffffff;
  --color-card-border:      #D4CFCA;
  --color-card-heading:     var(--color-big-blu);

  /* --- Proof Bar / Highlights --- */
  --color-proof-bg:         var(--color-big-blu);
  --color-proof-text:       #ffffff;
  --color-proof-accent:     var(--color-old-pitch);

  /* --- Sector Colors --- */
  --color-sector-work:          var(--color-big-blu);
  --color-sector-hospitality:   var(--color-old-pitch);
  --color-sector-community:     #2d6a4f;
  --color-sector-education:     #5c4a8c;
  --color-sector-industrial:    var(--color-warm-charcoal);

  /* --- Typography --- */
  --font-heading:           'Oswald', 'Arial Narrow', sans-serif;
  --font-body:              'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-mono:              'Courier New', monospace;

  /* --- Sizing --- */
  --border-radius:          3px;
  --border-radius-lg:       4px;
  --transition-speed:       0.2s;

}

/* ============================================================
   GLOBAL TYPOGRAPHY
   ============================================================ */

body {
  font-family: var(--font-body);
  color: var(--color-body-text);
  background-color: var(--color-body-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Source Sans 3 — semibold for fact labels per brand guide */
.blud-label,
.project-sidebar__label,
.project-card__gc,
.blud-proof-bar {
  font-weight: 600;
}

/* Source Sans 3 — italic for testimonial quotes per brand guide */
.blud-testimonial__quote,
.project-body__quote {
  font-style: italic;
}


/* Add to css/components/footer.css */
.highlighted {
  padding-bottom: 3rem;
}