/* ================================================================
   ASCEND LANDSCAPING & IRRIGATION
   Performance CSS — Core Web Vitals + Mobile Conversion v1.0
   Targets: LCP < 2.5s | CLS < 0.1 | INP < 200ms
   Load order: After base stylesheet, before motion stylesheet.
   ================================================================ */


/* ================================================================
   § 1 — FONT LOADING: CLS PREVENTION
   font-display: swap prevents invisible text during font load
   (FOIT). Block period = 0, swap period = infinite.
   Adjust src paths to match your actual font CDN or self-hosted
   file locations.
   ================================================================ */

@font-face {
  font-family: 'Ascend Primary';         /* replace with your actual font name */
  src: url('/fonts/primary-400.woff2') format('woff2'),
       url('/fonts/primary-400.woff')  format('woff');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;                    /* ✅ CLS: no invisible-text flash */
}

@font-face {
  font-family: 'Ascend Primary';
  src: url('/fonts/primary-600.woff2') format('woff2'),
       url('/fonts/primary-600.woff')  format('woff');
  font-weight: 600;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ascend Primary';
  src: url('/fonts/primary-700.woff2') format('woff2'),
       url('/fonts/primary-700.woff')  format('woff');
  font-weight: 700;
  font-style:  normal;
  font-display: swap;
}


/* ================================================================
   § 2 — TYPOGRAPHY FLOORS
   Prevents text from going below accessible/readable minimums
   on any viewport. These are floors, not fixed values —
   your theme's larger desktop sizes are unaffected.
   ================================================================ */

h1 { font-size: max(28px, 1.75rem); }    /* Rule 1: H1 floor = 28px */
h2 { font-size: max(22px, 1.375rem); }   /* Rule 1: H2 floor = 22px */
body,
p,
li,
td,
label,
input,
textarea,
select,
button { font-size: max(16px, 1rem); }   /* Rule 1: body floor = 16px */


/* ================================================================
   § 3 — GLOBAL MEDIA DIMENSION LOCK (CLS Prevention)
   Every image/iframe must have explicit width+height in HTML.
   These CSS rules act as a runtime safety net for any
   elements missing those attributes.
   ================================================================ */

/* Images: if no explicit dimensions, fill container and preserve ratio */
img {
  max-width: 100%;
  height: auto;                          /* ✅ prevents distortion */
  display: block;                        /* ✅ removes phantom inline gap */
}

/* Reserve aspect ratio before image loads — eliminates LCP jump */
img[width][height] {
  aspect-ratio: attr(width) / attr(height);  /* progressive enhancement */
}

/* iframe wrappers (GHL calendars, maps, forms, embeds) */
.iframe-wrapper,
.calendar-embed,
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;                  /* ✅ CLS: space reserved pre-load */
  overflow: hidden;
}

.iframe-wrapper iframe,
.calendar-embed iframe,
.map-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* Dynamic element reservations (GHL form widget, chat bubble) */
.ghl-form-wrapper {
  min-height: 480px;                     /* ✅ prevents form-load CLS */
  width: 100%;
}

.chat-widget-spacer {
  height: 72px;                          /* ✅ reserves bottom space for widget */
  display: block;
}


/* ================================================================
   § 4 — RESPONSIVE GRID SYSTEM
   Mobile-first. Single column is the default baseline.
   Multi-column unlocks at 768px+.
   ================================================================ */

/* Base grid containers — single column by default (mobile-first) */
.two-col,
.three-col,
.service-grid,
.project-grid,
.team-grid,
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;            /* ✅ single column on mobile */
  gap: 1.25rem;
  width: 100%;
}

/* Sidebar: block-flow on mobile, won't overlap content */
.sidebar {
  position: static;
  width: 100%;
  float: none;                           /* kill any legacy float */
}

/* Two-column: kicks in at tablet breakpoint */
@media (min-width: 768px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }

  .sidebar {
    position: sticky;                    /* restore sticky sidebar on desktop */
    top: 1.5rem;
    width: 300px;                        /* adjust to match your sidebar width */
  }
}

/* Three-column: only at full desktop */
@media (min-width: 992px) {
  .three-col {
    grid-template-columns: repeat(3, 1fr);
  }

  .service-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .project-grid,
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ================================================================
   § 5 — MOBILE OVERRIDE HARDENING (Rule 1 spec compliance)
   Explicit !important overrides that defeat any inline styles,
   JS-injected classes, or third-party widget grids on mobile.
   ================================================================ */

@media (max-width: 767px) {

  /* Force absolute single-column on all grid layouts */
  .two-col,
  .three-col,
  .service-grid,
  .project-grid,
  .team-grid,
  .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Kill any flex multi-column that might bypass grid */
  .two-col,
  .three-col,
  .service-grid {
    display: grid !important;
  }

  /* Sidebar: flat, full-width on mobile */
  .sidebar {
    position: static !important;
    width:    100%   !important;
    float:    none   !important;
    top:      auto   !important;
  }

  /* Paragraph container: cap at 4 lines of visible text (Rule 1) */
  /* NOTE: Use this class on description/excerpt elements only —
     not hero headings. Apply .text-clamp in your HTML. */
  .text-clamp {
    display:            -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow:           hidden;
    /* Fallback for browsers without -webkit-line-clamp: */
    max-height: calc(16px * 1.6 * 4); /* font-size * line-height * 4 lines */
  }

  /* Space reservation for sticky CTA bar above page bottom */
  body {
    padding-bottom: 56px;                /* ✅ prevents content hidden behind CTA bar */
  }

}


/* ================================================================
   § 6 — STICKY MOBILE CTA BAR (Rule 2)
   Hidden on desktop. Fixed to bottom of viewport on mobile.
   z-index 9999 clears GHL widget layer (z ~9000).
   Meets WCAG 2.5.5: min touch target 44×44px (set to 56px).
   ================================================================ */

/* Hide on desktop */
.mobile-cta-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-cta-bar {
    /* Layout */
    display:              grid;
    grid-template-columns: 1fr 1fr;
    gap:                  0;

    /* Positioning */
    position: fixed;
    bottom:   0;
    left:     0;
    right:    0;
    z-index:  9999;

    /* Appearance */
    background: #1A1A1A;

    /* Safe area inset: accounts for iPhone home bar */
    padding-bottom: env(safe-area-inset-bottom, 0px);

    /* Hardware-accelerated layer — prevents repaint on scroll */
    will-change:            transform;
    transform:              translateZ(0);
    -webkit-transform:      translateZ(0);

    /* Prevent bar from triggering CLS on page load */
    contain: layout style paint;
  }

  .mobile-cta-bar a {
    /* Touch target sizing */
    min-height: 56px;
    min-width:  48px;

    /* Layout */
    display:         flex;
    align-items:     center;
    justify-content: center;

    /* Typography */
    font-size:       15px;
    font-weight:     600;
    line-height:     1.2;
    text-decoration: none;
    letter-spacing:  0.01em;

    /* Tap highlight suppression (replaced by :active state) */
    -webkit-tap-highlight-color: transparent;
  }

  /* Call button */
  .cta-call {
    background: #2D6A2D;
    color:      #FFFFFF;
    border-right: 1px solid rgba(255,255,255,0.15);
  }

  .cta-call::before {
    content: '📞';
    margin-right: 6px;
    font-size: 14px;
  }

  /* Press feedback states */
  .cta-call:active  { background: #255922; }

  /* Estimate/contact button */
  .cta-estimate {
    background: #FFFFFF;
    color:      #1A1A1A;
  }

  .cta-estimate::before {
    content: '✏️';
    margin-right: 6px;
    font-size: 14px;
  }

  .cta-estimate:active { background: #E8E8E8; }

  /* Focus rings for keyboard accessibility */
  .mobile-cta-bar a:focus-visible {
    outline:        3px solid #7EC87E;
    outline-offset: -3px;
  }
}


/* ================================================================
   § 7 — LAZY-LOAD PLACEHOLDER STYLING
   Prevents height-collapse CLS before lazy images load.
   Apply .lazy-img class in addition to loading='lazy'.
   ================================================================ */

.lazy-img {
  background-color: #F0F0F0;             /* neutral placeholder color */
  background-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0.4) 50%,
      transparent 100%
    );
  background-size: 200% 100%;
}

/* Shimmer animation — only when motion is OK */
@media (prefers-reduced-motion: no-preference) {
  .lazy-img:not(.loaded) {
    animation: shimmer 1.5s infinite linear;
  }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Remove placeholder bg once image is loaded (toggle .loaded via JS) */
.lazy-img.loaded {
  background-color:  transparent;
  background-image:  none;
  animation:         none;
}


/* ================================================================
   § 8 — HERO IMAGE SPACE RESERVATION
   Prevents LCP element from causing layout shift.
   The aspect-ratio reserves exact space before the image loads.
   Match this ratio to your actual hero image dimensions.
   ================================================================ */

.hero,
.hero-section {
  position: relative;
  width:    100%;
  overflow: hidden;
}

/* Desktop hero: standard 16:9 cinematic */
.hero-bg-wrapper {
  aspect-ratio: 16 / 9;
  width:        100%;
  overflow:     hidden;
}

/* Mobile hero: taller crop to show subject above fold */
@media (max-width: 767px) {
  .hero-bg-wrapper {
    aspect-ratio: 4 / 3;
    /* Or use a fixed height: min-height: 55vh; max-height: 420px; */
  }
}

/* Hero image itself: object-fit prevents squash on ratio change */
.hero-bg {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center center;
  display:    block;
}