/* ==========================================================================
   Garden State Brickface & Siding — Custom Styles
   Tailwind handles the bulk; this file holds overrides & fine-tuning.
   ========================================================================== */

/* Smooth anchor scrolling for in-page links */
html { scroll-behavior: smooth; }

/* Body base font feature settings (nice typography) */
body {
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Serif headlines — tighten tracking slightly for the Playfair look */
h1, h2, h3 { letter-spacing: -0.01em; }

/* Input placeholder color */
input::placeholder { color: #a0a8b0; }

/* Subtle focus ring improvement */
input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(215, 97, 26, 0.35);
  outline-offset: 2px;
}

/* Underlined link style used in body copy */
.text-navy.underline,
.text-gold .underline { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Rotation easing for team photo */
img.rotate-\[-2deg\] { transition: transform 300ms ease; }
img.rotate-\[-2deg\]:hover { transform: rotate(0deg) scale(1.01); }

/* Hero background: ensure overlay sits properly on small screens */
@media (max-width: 1023px) {
  section.bg-navy-deep .lg\:grid-cols-\[1fr_440px\] { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Desktop Nav: push breakpoint from xl (1280px) to 1440px
   Between 1280-1439px the nav is too cramped, so keep using hamburger menu.
   ========================================================================== */
@media (min-width: 1280px) and (max-width: 1439px) {
  /* Keep desktop nav hidden */
  .hidden.xl\:flex { display: none !important; }
  /* Keep phone CTA hidden */
  .hidden.xl\:block { display: none !important; }
  /* Keep hamburger + mobile overlay visible */
  .xl\:hidden { display: block !important; }
}

/* ==========================================================================
   Mobile Navigation Drawer
   ========================================================================== */

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.3s, opacity 0.3s ease;
  background: rgba(0,0,0,0.45);
}
.mobile-menu-overlay.active {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.3s ease;
}

.mobile-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  padding: 24px 20px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.mobile-menu-overlay.active .mobile-menu-panel {
  transform: translateX(0);
}

/* Nav groups */
.mobile-nav-group {
  border-bottom: 1px solid #e5e7eb;
}
.mobile-nav-group:last-child {
  border-bottom: none;
}

.mobile-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: #192d47;
  letter-spacing: 0.03em;
}
.mobile-nav-toggle:hover {
  color: #db6100;
}

.mobile-nav-link {
  text-decoration: none;
  color: inherit;
  flex: 1;
  text-align: left;
}

.mobile-nav-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: #9ca3af;
}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-chevron {
  transform: rotate(180deg);
  color: #db6100;
}

/* Sub-menu */
.mobile-nav-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-nav-group.open .mobile-nav-sub {
  max-height: 2400px;
}
.mobile-nav-group.open .mobile-nav-chevron {
  transform: rotate(180deg);
  color: #db6100;
}
.mobile-nav-sub a {
  display: block;
  padding: 8px 0 8px 12px;
  font-size: 14px;
  color: #192d47;
  text-decoration: none;
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
}
.mobile-nav-overview {
  font-weight: 700;
  color: #b4321a !important;
}
.mobile-nav-subgroup {
  border-top: 1px solid #eee;
  margin-top: 4px;
  padding-top: 4px;
}
.mobile-nav-subtoggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 12px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: #b4321a;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.mobile-nav-subtoggle .mobile-nav-chevron {
  width: 16px;
  height: 16px;
  color: #b4321a;
  transition: transform 0.2s ease;
}
.mobile-nav-subgroup.open .mobile-nav-subtoggle .mobile-nav-chevron {
  transform: rotate(180deg);
}
.mobile-nav-subsub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-nav-subgroup.open .mobile-nav-subsub {
  max-height: 1200px;
}
.mobile-nav-subsub a {
  display: block;
  padding: 8px 0 8px 24px;
  font-size: 14px;
  color: rgba(25,45,71,0.75);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
}
.mobile-nav-subsub a.mobile-nav-subheading-link {
  font-weight: 700;
  color: #b4321a;
}
.mobile-nav-subsub a:hover,
.mobile-nav-subsub a:active {
  color: #db6100;
  border-left-color: #db6100;
  background: #f7f7f7;
}
.mobile-nav-sub a:hover,
.mobile-nav-sub a:active {
  color: #db6100;
  border-left-color: #db6100;
  background: #f7f7f7;
}

/* ==========================================================================
   Mobile Responsiveness Fixes
   ========================================================================== */

/* Prevent horizontal overflow on mobile.
   NOTE: `overflow-x: hidden` breaks `position: sticky` because it creates a
   scroll container. Use `overflow-x: clip` instead — it prevents horizontal
   overflow without creating a scroll container, so sticky still works. */
html, body {
  overflow-x: clip;
}

/* Hero section mobile fixes */
@media (max-width: 768px) {
  .max-w-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Header mobile adjustments */
@media (max-width: 640px) {
  header .max-w-\[1920px\] {
    height: 70px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Hero section mobile text sizing */
@media (max-width: 768px) {
  /* Scale down large headlines */
  .text-\[56px\] {
    font-size: 32px !important;
    line-height: 38px !important;
  }
  .text-\[48px\] {
    font-size: 28px !important;
    line-height: 34px !important;
  }
  .text-\[42px\], .text-h2 {
    font-size: 26px !important;
    line-height: 32px !important;
  }
  .text-\[36px\] {
    font-size: 22px !important;
    line-height: 30px !important;
  }
  .text-\[34px\] {
    font-size: 22px !important;
    line-height: 30px !important;
  }
  .text-\[32px\], .text-h3 {
    font-size: 22px !important;
    line-height: 28px !important;
  }
  /* Trust badges - force wrap on mobile */
  .gap-\[43px\] {
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }
  /* Stats line - wrap properly */
  .font-semibold.italic.text-\[19px\] {
    font-size: 13px !important;
    line-height: 22px !important;
    word-break: break-word;
  }
  /* Hero content container - prevent overflow */
  .max-w-\[694px\] {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* All flex-1 containers must not grow beyond viewport */
  .flex-1 {
    min-width: 0 !important;
  }
  /* CTA row */
  .gap-\[30px\] {
    gap: 16px !important;
  }
  /* Phone CTA next to button - wrap */
  .gap-3.group {
    font-size: 14px;
  }
  .gap-3.group .text-\[21px\] {
    font-size: 17px !important;
  }
  /* Hero min-height */
  section[style*="min-height: 676px"] {
    min-height: auto !important;
  }
  /* Hero padding */
  .py-\[87px\] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .px-8 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Stats line - allow wrapping */
  section .text-\[19px\] {
    font-size: 14px !important;
    line-height: 24px !important;
  }
}

/* Announcement bar mobile */
@media (max-width: 480px) {
  .text-\[13px\] .tracking-wide {
    font-size: 11px;
  }
}

/* Fix images and containers from overflowing on mobile */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Ensure flex-wrap on small screens for CTA rows */
@media (max-width: 640px) {
  .flex-wrap .text-\[21px\] {
    font-size: 18px !important;
  }
  /* Phone CTA in header - show on tablet too */
  .hidden.xl\:block[href^="tel:"] {
    display: none !important;
  }
}

/* Fix any wide fixed-width elements on mobile */
@media (max-width: 768px) {
  .w-\[617px\] {
    width: 100% !important;
  }
  /* Form cards and fixed-width containers */
  [style*="width: 440px"],
  [style*="width:440px"],
  .w-\[440px\] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   Sticky CTA Bar — fixed bottom bar on scroll
   ========================================================================== */
.sticky-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 45;
  background: #01274a;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  padding: 10px 16px;
}
.sticky-cta-bar.visible {
  transform: translateY(0);
}
.sticky-cta-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.sticky-cta-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background: #db6100;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.sticky-cta-quote:hover {
  opacity: 0.9;
}
.sticky-cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.sticky-cta-phone-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sticky-cta-phone-icon svg {
  width: 18px;
  height: 18px;
}
.sticky-cta-phone-text {
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
  font-weight: 700;
}
.sticky-cta-phone-label {
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 14px;
  opacity: 0.85;
}
.sticky-cta-phone-number {
  font-size: 18px;
  line-height: 20px;
}

/* Mobile: stack vertically, more compact */
@media (max-width: 640px) {
  .sticky-cta-bar {
    padding: 8px 12px;
  }
  .sticky-cta-bar-inner {
    gap: 10px;
  }
  .sticky-cta-quote {
    padding: 10px 16px;
    font-size: 13px;
    flex: 1;
  }
  .sticky-cta-phone-text {
    display: none;
  }
  .sticky-cta-phone-icon {
    width: 40px;
    height: 40px;
  }
  .sticky-cta-phone-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* =========================================================
   HubSpot Form Theming — matches brand (brick + navy)
   ========================================================= */
.hs-form-frame { width: 100%; }

/* Reserve space so the CTA scroll target is correctly sized. A DOM-based
   spinner is inserted by BaseLayout and is overwritten when HubSpot
   populates the frame, so there is no way for it to linger over a
   loaded form. */
.hs-form-frame { position: relative; min-height: 560px; }
@media (max-width: 640px) {
  .hs-form-frame { min-height: 480px; }
}
.hs-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid #eceef2;
  border-top-color: #d24726;
  border-radius: 50%;
  animation: hsSpin .9s linear infinite;
  pointer-events: none;
}
@keyframes hsSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hs-loading-spinner { animation: none; }
}

.hs-form-frame form,
.hs-form-frame .hs-form { font-family: 'Lato', system-ui, sans-serif !important; }

/* Hide labels — placeholders carry the field name to save vertical space */
.hs-form-frame label:not(.hs-form-booleancheckbox-display):not(.hs-error-msg),
.hs-form-frame .hs-form-field > label {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.hs-form-frame .hs-form-required { display: none; }

/* Inputs, selects, textareas — compact */
.hs-form-frame input[type="text"],
.hs-form-frame input[type="tel"],
.hs-form-frame input[type="email"],
.hs-form-frame input[type="number"],
.hs-form-frame select,
.hs-form-frame textarea {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  background: #f5f8fa !important;
  border: 1px solid #959494 !important;
  border-radius: 7px !important;
  padding: 6px 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #01274a !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}
.hs-form-frame input::placeholder,
.hs-form-frame textarea::placeholder {
  color: rgba(24,34,60,0.55) !important;
  font-weight: 600 !important;
}
.hs-form-frame input:focus,
.hs-form-frame select:focus,
.hs-form-frame textarea:focus {
  outline: none !important;
  border-color: #d24726 !important;
  box-shadow: 0 0 0 3px rgba(210,71,38,0.15) !important;
}
.hs-form-frame textarea { resize: vertical; height: auto !important; min-height: 70px !important; }

/* Field spacing — tight */
.hs-form-frame .hs-form-field,
.hs-form-frame .hs_form-field,
.hs-form-frame fieldset { margin-bottom: 8px !important; }
.hs-form-frame fieldset { border: 0 !important; padding: 0 !important; }

/* Two-column rows */
.hs-form-frame .form-columns-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.hs-form-frame .form-columns-2 .hs-form-field { width: 100% !important; float: none !important; padding: 0 !important; }
.hs-form-frame .form-columns-1 .hs-form-field { width: 100% !important; float: none !important; padding: 0 !important; }
.hs-form-frame .input { margin: 0 !important; }

/* Checkboxes / legal consent — compact */
.hs-form-frame .hs-form-booleancheckbox label,
.hs-form-frame .inputs-list label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: rgba(24,34,60,0.75) !important;
  cursor: pointer;
  margin: 0 !important;
}
.hs-form-frame input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 1px 0 0 0 !important;
  accent-color: #d24726;
  flex-shrink: 0;
}
.hs-form-frame .legal-consent-container { margin-top: 4px !important; }
.hs-form-frame .legal-consent-container p,
.hs-form-frame .legal-consent-container span { font-size: 10px !important; line-height: 1.3 !important; margin: 0 !important; }

/* Error messages */
.hs-form-frame .hs-error-msg,
.hs-form-frame .hs-error-msgs label {
  color: #c0392b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
}

/* Submit button — compact */
.hs-form-frame .hs-submit,
.hs-form-frame .actions { display: flex; justify-content: center; margin-top: 10px; }
.hs-form-frame input[type="submit"],
.hs-form-frame .hs-button {
  background: #d24726 !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  letter-spacing: 0.3px !important;
  padding: 12px 26px !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  cursor: pointer;
  width: auto !important;
  transition: opacity .15s, transform .05s;
}
.hs-form-frame input[type="submit"]:hover,
.hs-form-frame .hs-button:hover { opacity: .9; }
.hs-form-frame input[type="submit"]:active { transform: translateY(1px); }

/* Form headline if HubSpot renders one */
.hs-form-frame h1, .hs-form-frame h2, .hs-form-frame h3 {
  font-family: 'Merriweather', serif !important;
  color: #01274a !important;
  text-align: center;
  font-weight: 700 !important;
}

/* Tighter stack on narrow cards */
@media (max-width: 640px) {
  .hs-form-frame .form-columns-2 { grid-template-columns: 1fr !important; }
}

/* Form card: white bg bounded exactly by HubSpot's orange frame.
   .hs-form-frame carries the white fill + matching radius.
   Any wrappers between it and the bordered .hs-form collapse to 0
   so the white surface ends at the orange stroke. */
.hs-form-frame {
  background: #fff !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 16px !important;
  overflow: hidden;
}
.hs-form-frame > *,
.hs-form-frame .hbspt-form {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.hs-form-frame .hs-form {
  padding: 24px !important;
  background: transparent !important;
  border: 0 !important;
}

/* HubSpot new-embed inner step container padding (overrides CSS vars) */
.hsfc-Step .hsfc-Step__Content,
.hs-form-frame .hsfc-Step__Content {
  padding: 20px !important;
  --hsf-background__padding: 20px !important;
  --hsf-default-background__padding: 20px !important;
}

/* Cap form-heading size (the "25% Off Welcome Offer!" HubSpot renders) */
.hs-form-frame .hsfc-RichText :is(h1,h2,h3),
.hs-form-frame h1, .hs-form-frame h2 {
  font-size: 22px !important;
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
}

/* Mobile: tighten further so the whole form fits above the fold */
@media (max-width: 640px) {
  .hsfc-Step .hsfc-Step__Content,
  .hs-form-frame .hsfc-Step__Content {
    padding: 14px !important;
    --hsf-background__padding: 14px !important;
    --hsf-default-background__padding: 14px !important;
  }
  .hs-form-frame .hs-form { padding: 14px !important; }
  .hs-form-frame .hsfc-RichText :is(h1,h2,h3),
  .hs-form-frame h1, .hs-form-frame h2 { font-size: 20px !important; }
  .hs-form-frame input[type="text"],
  .hs-form-frame input[type="tel"],
  .hs-form-frame input[type="email"],
  .hs-form-frame select { height: 38px !important; min-height: 38px !important; font-size: 14px !important; }
  .hs-form-frame .legal-consent-container p,
  .hs-form-frame .legal-consent-container span { font-size: 10px !important; }
}