/**
 * BLU-D Construction — Header, hero, and home page fixes.
 * Add this block to css/components/header.css
 */

/* ============================================================
   HEADER CSS VARIABLES — wire base theme tokens to BLU-D brand
   ============================================================ */

:root {
  --header-bg:                  var(--color-big-blu);
  --header-scroll-bg:           rgba(0, 46, 93, 0.95);
  --header-scroll-blur:         0px;
  --header-sticky-shadow:       0 2px 12px rgba(0, 0, 0, 0.2);
  --header-transparent-color:   #ffffff;
  --header-transparent-hover:   var(--color-blu-sky);
  --header-scrolled-color:      #ffffff;

  /* Hero card — remove blur, use Big Blu semi-transparent */
  --hero-card-bg:               rgba(0, 46, 93, 0.72);
  --hero-card-blur:             0px;
  --hero-card-radius:           4px;
  --hero-card-padding:          2rem 2.5rem;
}

/* ============================================================
   HEADER — Big Blu background, white nav links
   ============================================================ */

.site-header {
  background-color: var(--color-big-blu);
}

.site-header .navbar {
  background-color: transparent;
}

.site-header .nav-link {
  color: var(--color-white) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
  color: var(--color-blu-sky) !important;
}

/* Logo */
.site-header .site-logo img {
  max-height: 60px;
  width: auto;
}

/* Mobile hamburger — white icon */
.site-header .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
}

.site-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================================
   TRANSPARENT HEADER — scrolled state uses Big Blu solid
   ============================================================ */

.transparent-header.sticky-header.scrolled .site-header {
  background: rgba(0, 46, 93, 0.96) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.transparent-header.sticky-header.scrolled .site-header .nav-link {
  color: var(--color-white) !important;
}

/* ============================================================
   HERO CARD — remove blur, use Big Blu overlay
   ============================================================ */

.hero-content-overlay .block {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(0, 46, 93, 0.72) !important;
}

/* ============================================================
   HERO OVERLAY — Blu Sky tint instead of dark gradient
   ============================================================ */

.hero-banner .wmd-overlay-gradient {
  background: linear-gradient(
    to bottom,
    rgba(0, 46, 93, 0.25) 0%,
    rgba(0, 46, 93, 0.55) 60%,
    rgba(0, 46, 93, 0.75) 100%
  ) !important;
}

/* ============================================================
   HERO BUTTONS — Old Pitch primary, white outline secondary
   ============================================================ */

.hero-content-overlay .btn-blud-primary {
  background: var(--color-old-pitch);
  border-color: var(--color-old-pitch);
  color: var(--color-white);
}

.hero-content-overlay .btn-blud-primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.hero-content-overlay .btn-blud-secondary {
  border-color: var(--color-white);
  color: var(--color-white);
}

.hero-content-overlay .btn-blud-secondary:hover {
  background: var(--color-white);
  color: var(--color-big-blu);
}

/* ============================================================
   FEATURED PROJECTS — "See All Projects" button below
   Add below the Views block via the view footer
   ============================================================ */

.view-projects-featured-footer {
  text-align: center;
  padding: 1.5rem 0 2rem;
}

/* ============================================================
   QUALIFIED. COMPLIANT. READY. — fix encoding issue
   The ✓ emoji is rendering as mojibake — switch to CSS checkmark
   ============================================================ */

.blud-qual-icon {
  font-size: 0;
  color: transparent;
}

.blud-qual-icon::before {
  content: '';
  display: block;
  width: 20px;
  height: 12px;
  border-bottom: 3px solid var(--color-old-pitch);
  border-left: 3px solid var(--color-old-pitch);
  transform: rotate(-45deg) translateY(-3px);
  margin: 0 auto;
  font-size: 1rem;
}

/* ============================================================
   TESTIMONIALS — redesign: Old Pitch background,
   larger photo left, quote right
   ============================================================ */

.wmd-swiper-testimonial .blud-testimonial {
  background: var(--color-big-blu);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  margin: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  text-align: left;
}

.wmd-swiper-testimonial .blud-testimonial__attribution {
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 100px;
}

.wmd-swiper-testimonial .blud-testimonial__image {
  width: 80px;
  height: 80px;
  border-color: var(--color-old-pitch);
  margin-bottom: 0.5rem;
}

.wmd-swiper-testimonial .blud-testimonial__quote {
  border-left-color: var(--color-old-pitch);
  color: var(--color-white);
  flex: 1;
}

.wmd-swiper-testimonial .blud-testimonial__quote::before {
  color: var(--color-old-pitch);
  opacity: 0.4;
}

.wmd-swiper-testimonial .blud-testimonial__name {
  color: var(--color-old-pitch);
  text-align: center;
}

.wmd-swiper-testimonial .blud-testimonial__role {
  color: var(--color-blu-sky);
  text-align: center;
  font-size: 0.75rem;
}

.wmd-swiper-testimonial .blud-testimonial__company {
  color: var(--color-blu-sky);
  text-align: center;
}

.wmd-swiper-testimonial .blud-testimonial__avatar {
  background: var(--color-primary-dark);
  border-color: var(--color-old-pitch);
}

/* ============================================================
   SQUARE & PLUMB SECTION — fix encoding, clean icon
   ============================================================ */

.blud-sq-plumb-icon-large {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}



/* ============================================================
   FINAL CTA — SVG inline icons for phone, email, location
   ============================================================ */

.blud-contact-snapshot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.9rem;
  color: var(--color-blu-sky);
  font-weight: 600;
}

.blud-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.blud-contact-item svg {
  width: 16px;
  height: 16px;
  fill: var(--color-old-pitch);
  flex-shrink: 0;
}

.blud-contact-item a {
  color: var(--color-blu-sky);
  text-decoration: none;
}

.blud-contact-item a:hover {
  color: var(--color-white);
}


/* ============================================================
   Add to css/components/header.css
   ============================================================ */

/* Hero h1 — Blu Sky so it pops against the overlay */
.hero-content-overlay h1 {
  color: var(--color-blu-sky) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Reduce overlay opacity — less opaque, more image showing through */
.hero-banner .wmd-overlay-gradient {
  background: linear-gradient(
    to bottom,
    rgba(0, 46, 93, 0.15) 0%,
    rgba(0, 46, 93, 0.40) 60%,
    rgba(0, 46, 93, 0.60) 100%
  ) !important;
}

/* Hero card — slightly less opaque too */
.hero-content-overlay .block {
  background: rgba(0, 46, 93, 0.60) !important;
}


/* ============================================================
   HEADER TOP BAR
   ============================================================ */

.header-top {
  background: var(--color-primary-dark);
  padding: 0.4rem 0;
  font-size: 0.8rem;
}

.blud-header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-blu-sky);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.8rem;
}

.blud-header-phone:link,
.blud-header-phone:visited {
  color: var(--color-blu-sky);
}

.blud-header-phone:hover {
  color: var(--color-white);
}

.blud-header-phone svg {
  width: 14px;
  height: 14px;
  fill: var(--color-old-pitch);
  flex-shrink: 0;
}

.btn-nav-cta:link,
.btn-nav-cta:visited {
  background: var(--color-old-pitch);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  padding: 0.35rem 1rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.btn-nav-cta:hover,
.btn-nav-cta:focus {
  background: var(--color-accent-dark);
  color: var(--color-white);
  text-decoration: none;
}

/* ============================================================
   SQUARE & PLUMB ICON — CONTEXT IN HEADER
   Component itself lives in components/sq-plumb.css.
   Header context just adds spacing.
   ============================================================ */

.header-top .blud-sq-plumb-inline {
  margin-right: 0.5rem;
}

/* ============================================================
   HEADER TOP BAR — alignment + sizing
   ============================================================ */

.header-top .blud-sq-plumb-inline {
  color: #ffffff;
}

.header-top .blud-header-phone {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1;
  gap: 0.4rem;
  height: 30px;
  vertical-align: middle;
}

.header-top .blud-header-phone svg {
  width: 22px;
  height: 22px;
  display: block;
}

#block-blud-headercontact,
#block-blud-headercontact .field__item {
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   HOMEPAGE — header opacity over hero
   Padding & min-height compensation handled by base hero.css
   under .has-hero-image / .transparent-header.
   ============================================================ */

.has-hero-image {
  --header-hero-bg: rgba(27, 58, 107, 0.88);  /* Big Blu @ 88% */
}



/* ============================================================
   HOMEPAGE HERO-STACK
   page--front.html.twig wraps header + hero in .hero-stack.
   Background image painted on the wrapper extends edge-to-edge.
   No position:relative on .hero-stack — that would scope the
   sticky header to the stack and break sticky-on-scroll.
   The gradient overlay is contained via `contain: paint` instead.
   ============================================================ */

.hero-stack {
  background-color: var(--color-big-blu);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Overlay rendered as a pseudo on .hero-stack__hero (which IS a
   positioning context via position:relative below), so it's contained
   without affecting .hero-stack's positioning behavior — keeps the
   sticky header at the top of the viewport. */
.hero-stack__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(27, 58, 107, 0.55) 0%,
    rgba(27, 58, 107, 0.35) 35%,
    rgba(27, 58, 107, 0.65) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Hide the orphaned overlay div (template still emits it for now). */
.hero-stack__overlay {
  display: none;
}

/* Hero inside stack — no longer needs its own bg image (wrapper has it).
   Hide the inner hero block's bg-image to avoid double-painting. */
.hero-stack__hero {
  position: relative;
  z-index: 2;
}

.hero-stack__hero > * {
  position: relative;
  z-index: 2;
}

.hero-stack__hero .hero-bg-image,
.hero-stack__hero .wmd-overlay-gradient {
  display: none;
}

/* Padding sweet spot — top accounts for sticky header overlap, bottom
   leaves natural breathing room. Same value across all viewports. */
.hero-stack__hero .hero-content-overlay {
  padding: 14rem 0 5rem;
}

/* Don't impose min-height — let content drive the stack height. */
.hero-stack__hero .hero-banner {
  min-height: auto;
}



/* ============================================================
   HOMEPAGE — hamburger toggle white at all scroll states
   Default Bootstrap toggler-icon uses a dark SVG. Force white
   when sitting over the hero image.
   ============================================================ */

.has-hero-image .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
}

.has-hero-image .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================================
   HOMEPAGE — consistent header background across scroll states
   Match scrolled state to initial overlay so the header looks
   identical whether at top or scrolled. Scoped to .has-hero-image
   so other pages keep their normal scroll-darken behavior.
   ============================================================ */

.has-hero-image .site-header,
.sticky-header.scrolled.has-hero-image .site-header {
  background: var(--header-hero-bg, rgba(27, 58, 107, 0.88)) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* ============================================================
   HERO BUTTONS — mobile stacking
   Full-width, stacked, consistent spacing on mobile.
   Stays side-by-side on tablet and up.
   ============================================================ */

@media (max-width: 767px) {
  .hero-stack__hero .hero-content-overlay .container.mt-4 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .hero-stack__hero .hero-content-overlay .btn-blud-primary,
  .hero-stack__hero .hero-content-overlay .btn-blud-secondary {
    display: block;
    width: 100%;
    margin: 0 !important;
    text-align: center;
  }
}