/* ========================================================================== */
/* Giovanni's Tree Service — HOME V31 consolidated visual layer               */
/* Functional baseline: public-home-30d2. No backend or business logic changes. */
/* ========================================================================== */

:root {
  --v31-green: #008000;
  --v31-green-dark: #0f3b1d;
  --v31-cream: #fffaf0;
  --v31-cream-soft: #f7f3e8;
  --v31-wood: #8b5a2b;
  --v31-gold: #f2a51a;
  --v31-gold-deep: #d98900;
  --v31-charcoal: #111111;
  --v31-strip-height: 86px;
  --v31-radius: 14px;
  --v31-shadow: 0 18px 42px rgba(4, 17, 10, 0.18);
}

/* Recover vertical room: the same information remains in the fixed trust bar. */
.top-strip {
  display: none !important;
}

/* Header and brand: deliberately larger than V30D2, without crowding navigation. */
.public-nav {
  grid-template-columns: minmax(310px, 338px) minmax(0, 1fr) 140px !important;
  min-height: 100px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.brand-seal {
  min-height: 88px !important;
  gap: 13px !important;
}

.brand-mark,
.brand-seal .logo-light,
.brand-seal .logo-dark {
  width: 92px !important;
  height: 92px !important;
}

.brand-mark {
  flex-basis: 92px !important;
}

.brand-wordmark strong {
  font-size: 34px !important;
  line-height: 0.96 !important;
}

.brand-wordmark small {
  font-size: 15px !important;
  letter-spacing: 0.04em !important;
}

.public-nav nav a:not(.schedule-link) {
  transition: color 180ms ease, transform 180ms ease;
}

.public-nav nav a:not(.schedule-link):hover,
.public-nav nav a:not(.schedule-link):focus-visible {
  color: var(--v31-green) !important;
  transform: translateY(-2px);
}

.schedule-link,
[data-theme="dark"] .schedule-link,
[data-theme="light"] .schedule-link {
  color: var(--v31-green-dark) !important;
  background: linear-gradient(180deg, #ffd05e 0%, var(--v31-gold) 44%, var(--v31-gold-deep) 100%) !important;
  border: 1px solid rgba(105, 63, 0, 0.34) !important;
  box-shadow: 0 10px 24px rgba(217, 137, 0, 0.24) !important;
  text-shadow: none !important;
}

.schedule-link:hover,
.schedule-link:focus-visible {
  color: var(--v31-green-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 15px 30px rgba(217, 137, 0, 0.32) !important;
}

/* Hero actions and approved CTA/trust icons. */
.hero-actions .cta {
  min-height: 58px !important;
  border-radius: 10px !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.hero-actions .cta:hover,
.hero-actions .cta:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 15px 32px rgba(0, 0, 0, 0.24);
}

.hero-actions .cta img {
  width: 24px !important;
  height: 24px !important;
  flex-basis: 24px !important;
}

.hero-trust > span {
  min-height: 48px !important;
  border-radius: 9px !important;
  padding: 8px 11px !important;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.hero-trust > span:hover {
  transform: translateY(-2px);
  border-color: rgba(242, 165, 26, 0.46) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.hero-trust img {
  width: 24px !important;
  height: 24px !important;
  filter: brightness(0) invert(1) !important;
}

/* Fixed desktop trust/contact bar, with reserved space so it never covers content. */
@media (min-width: 901px) {
  body {
    padding-bottom: var(--v31-strip-height) !important;
  }

  .trust-cta-strip {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 70 !important;
    height: var(--v31-strip-height) !important;
    min-height: var(--v31-strip-height) !important;
    margin: 0 !important;
    box-shadow: 0 -12px 30px rgba(4, 17, 10, 0.25) !important;
  }

  .trust-cta-strip article,
  .trust-cta-strip a {
    min-height: var(--v31-strip-height) !important;
    height: var(--v31-strip-height) !important;
  }
}

.trust-cta-strip article,
.trust-cta-strip a {
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: linear-gradient(180deg, rgba(8, 65, 25, 0.96), rgba(4, 17, 10, 0.99)) !important;
}

.trust-cta-strip img {
  width: 42px !important;
  height: 42px !important;
  filter: brightness(0) invert(1) !important;
}

.trust-cta-strip strong {
  font-size: 12px !important;
  line-height: 1.12 !important;
}

.trust-cta-strip span {
  font-size: 10.5px !important;
  line-height: 1.18 !important;
}

.trust-cta-strip .strip-phone {
  background:
    linear-gradient(90deg, rgba(86, 43, 17, 0.95), rgba(139, 90, 43, 0.96)),
    url("/shared/assets/production/decor/wood_texture_strip.svg") center / cover !important;
}

.trust-cta-strip .strip-estimate {
  background: linear-gradient(135deg, #ffc43d 0%, var(--v31-gold) 45%, var(--v31-gold-deep) 100%) !important;
}

.trust-cta-strip .strip-estimate strong,
.trust-cta-strip .strip-estimate span {
  color: #241600 !important;
}

.trust-cta-strip .strip-estimate img {
  filter: brightness(0) saturate(100%) invert(14%) sepia(17%) saturate(1443%) hue-rotate(91deg) brightness(95%) contrast(95%) !important;
}

/* Promotions: one consistent approved palette, visibly separate from services. */
.discount-band {
  gap: 10px !important;
  padding: 10px !important;
  border: 2px solid var(--v31-wood) !important;
  border-radius: var(--v31-radius) !important;
  background:
    linear-gradient(90deg, rgba(77, 37, 13, 0.96), rgba(139, 90, 43, 0.94), rgba(77, 37, 13, 0.96)),
    url("/shared/assets/production/decor/wood_texture_strip.svg") center / cover !important;
  box-shadow: var(--v31-shadow) !important;
}

.discount-band article,
[data-theme="dark"] .discount-band article,
[data-theme="light"] .discount-band article {
  min-height: 122px !important;
  grid-template-columns: 60px minmax(0, 1fr) !important;
  gap: 3px 14px !important;
  padding: 17px 16px !important;
  border: 1px solid rgba(139, 90, 43, 0.38) !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, #fffdf7 0%, #f7f3e8 100%) !important;
  box-shadow: 0 8px 20px rgba(4, 17, 10, 0.16) !important;
  overflow: hidden;
}

.discount-band article::before {
  height: 4px !important;
  background: linear-gradient(90deg, var(--v31-green), var(--v31-gold), var(--v31-green)) !important;
  opacity: 1 !important;
}

.discount-band article::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(242, 165, 26, 0.18);
  border-radius: 8px;
  pointer-events: none;
}

.discount-band article:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(242, 165, 26, 0.7) !important;
  box-shadow: 0 16px 30px rgba(4, 17, 10, 0.22) !important;
}

.discount-band img,
[data-theme="dark"] .discount-band img,
[data-theme="light"] .discount-band img {
  width: 48px !important;
  height: 48px !important;
  filter: none !important;
}

.discount-band strong {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--v31-green-dark) !important;
  background: rgba(242, 165, 26, 0.18);
  font-size: 15px !important;
  line-height: 1.05 !important;
}

.discount-band span {
  color: var(--v31-green-dark) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.discount-band small {
  color: #4e5a51 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

/* Preserve the exact approved service icon family and keep each icon legible. */
.service-grid .service-card img {
  width: 104px !important;
  height: 104px !important;
  object-fit: contain !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: transform 180ms ease;
}

.service-grid .service-card:hover img {
  transform: scale(1.06);
}

/* Gallery: deliberately between the too-low 190px and the rejected oversized state. */
.gallery-card,
.gallery-large,
.video-card {
  height: 222px !important;
  min-height: 222px !important;
  border-radius: 12px !important;
}

.gallery-card > img {
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
}

.video-frame {
  min-height: 222px !important;
}

.gallery-card {
  flex-basis: clamp(300px, 26vw, 430px) !important;
}

.gallery-large {
  flex-basis: clamp(390px, 34vw, 540px) !important;
}

.video-card {
  flex-basis: clamp(340px, 30vw, 470px) !important;
}

.gallery-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 17px 34px rgba(4, 17, 10, 0.2) !important;
}

/* Loader remains progressive and premium, but never blocks interaction. */
.page-preloader {
  background:
    radial-gradient(circle at 50% 24%, rgba(242, 165, 26, 0.18), transparent 28%),
    radial-gradient(circle at 50% 48%, rgba(0, 128, 0, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(4, 17, 10, 0.99), rgba(7, 27, 16, 0.99)) !important;
}

.preloader-card {
  border-color: rgba(242, 165, 26, 0.25) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38) !important;
}

/* Responsive controls. */
@media (max-width: 1180px) and (min-width: 901px) {
  .public-nav {
    grid-template-columns: 270px minmax(0, 1fr) 132px !important;
  }

  .brand-mark,
  .brand-seal .logo-light,
  .brand-seal .logo-dark {
    width: 76px !important;
    height: 76px !important;
  }

  .brand-mark {
    flex-basis: 76px !important;
  }

  .brand-wordmark strong {
    font-size: 26px !important;
  }

  .brand-wordmark small {
    font-size: 12px !important;
  }
}

@media (max-width: 900px) {
  body {
    padding-bottom: 62px !important;
  }

  .trust-cta-strip {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: auto !important;
  }

  .trust-cta-strip article,
  .trust-cta-strip a {
    height: auto !important;
    min-height: 72px !important;
  }

  .mobile-brand img {
    width: 94px !important;
    height: 94px !important;
  }

  .trust-chips img {
    width: 24px !important;
    height: 24px !important;
    filter: none !important;
  }

  .mobile-primary img,
  .mobile-secondary img {
    width: 23px !important;
    height: 23px !important;
  }

  .mobile-discounts img {
    width: 30px !important;
    height: 30px !important;
    filter: none !important;
  }

  .mobile-services img {
    width: 36px !important;
    height: 36px !important;
    filter: none !important;
  }

  .gallery-card,
  .gallery-large,
  .video-card {
    height: 196px !important;
    min-height: 196px !important;
    flex-basis: min(340px, calc(100vw - 36px)) !important;
  }

  .video-frame {
    min-height: 196px !important;
  }
}

@media (max-width: 520px) {
  .gallery-card,
  .gallery-large,
  .video-card {
    height: 178px !important;
    min-height: 178px !important;
  }

  .video-frame {
    min-height: 178px !important;
  }

  .discount-band article,
  [data-theme="dark"] .discount-band article,
  [data-theme="light"] .discount-band article {
    min-height: 112px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-nav nav a,
  .schedule-link,
  .hero-actions .cta,
  .hero-trust > span,
  .discount-band article,
  .service-grid .service-card img,
  .gallery-card {
    transition: none !important;
  }
}

/* Mobile service-card sizing verified against the approved icon family. */
@media (max-width: 900px) {
  .service-grid article,
  [data-theme="dark"] .service-grid article,
  [data-theme="light"] .service-grid article {
    min-height: 190px !important;
    grid-template-rows: 80px auto 1fr !important;
    gap: 7px !important;
    padding: 13px 10px 14px !important;
  }

  .service-grid .service-card img {
    width: 74px !important;
    height: 74px !important;
  }
}

@media (max-width: 520px) {
  .service-grid article,
  [data-theme="dark"] .service-grid article,
  [data-theme="light"] .service-grid article {
    min-height: 184px !important;
    grid-template-rows: 72px auto 1fr !important;
    gap: 6px !important;
  }

  .service-grid .service-card img {
    width: 68px !important;
    height: 68px !important;
  }
}