/* Minimal responsive stylesheet for EON Displays site */
:root{
  /* Palette derived from colours.md */
  --primary: #344e41;    /* Primary / headings */
  --primary-dark: #2b4136;
  --secondary: #dad7cd;  /* light background / accents */
  --btn: #6f9d6e;        /* button color */
  --text: #000000;       /* body text */
  --text-inverse: #ffffff;/* text on dark backgrounds */
  --muted: #6b7280;      /* subtle text */
  --accent: var(--primary); /* legacy variable kept for compatibility */
  /* Surface and elevation tokens for warmer, less sterile UI */
  --page-bg: #fbfbf9;           /* very light warm background */
  --surface: #ffffff;           /* card / surface background */
  --card-border: rgba(52,78,65,0.06); /* subtle green-tinted border */
  --card-shadow: 0 8px 20px rgba(16,24,40,0.04);
  --elev-shadow: 0 10px 30px rgba(52,78,65,0.05); /* gentle green-tinted shadow */
  --max-width:1100px;
  --radius:8px;
}
*{box-sizing:border-box}
html, body { height: 100%; }
*{box-sizing:border-box}
body{display:flex;flex-direction:column;min-height:100vh;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;line-height:1.5;color:var(--text);margin:0;background:var(--page-bg)}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
/* Ensure main content area expands so footer is pushed to bottom on short pages */
/* The header is fixed; use a CSS variable for its height so we can adjust it dynamically
  from JS to avoid content being covered by the banner on different devices. The
  fallback is 64px for most desktop layouts. */
/* Header is now sticky (in-flow) so content below it will not be overlapped.
  Remove runtime padding dependency to avoid an initial layout jump. */
main { flex: 1 0 auto; }

@supports not (position:sticky) {
  /* Fallback for older browsers */
  main { margin-top: 64px; }
}

@media (max-width:640px){
  main { padding-top:56px }
}
.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:0.5rem 0}
.logo{flex:0 0 auto;display:block}
.logo img{height:40px;width:auto;max-width:100%;display:block}

/* Respect iOS safe area insets so header content isn't clipped on devices with notches */

/* Robust iOS safe-area inset support (fallback for older WebKit):
  Use constant() for older iOS, then env(). Also add a container-specific padding
  inside the header so the logo isn't clipped on devices with notches. */
.site-header{padding-left:constant(safe-area-inset-left);padding-right:constant(safe-area-inset-right)}
.site-header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.site-header .container{padding-left:calc(1rem + env(safe-area-inset-left, 0px));padding-right:calc(1rem + env(safe-area-inset-right, 0px))}

/* Prevent header children from shrinking/overlapping */
.header-inner{min-width:0}
.logo, .site-nav, .nav-toggle{flex-shrink:0}

/* Prevent excessively large logos from extending beyond the viewport on small devices */
.logo img{max-width:160px}

/* debug visuals removed */

@media (max-width:420px){
  .logo img{height:34px}
}
.site-nav{display:flex;gap:1rem;align-items:center}
.site-nav a{color:var(--primary);text-decoration:none;font-weight:600}
.site-nav a:hover{color:var(--primary-dark)}
.nav-toggle{display:none;background:transparent;border:0;font-size:1.25rem;color:var(--primary)}

/* Header uses the same primary background as the footer; nav links in header are inverse */
.site-header{background:var(--primary);color:var(--text-inverse);position:sticky;top:0;z-index:9999}
.site-header{backdrop-filter: saturate(120%) blur(4px);-webkit-backdrop-filter: saturate(120%) blur(4px)}
.site-header .header-inner{padding:0.6rem 0}
.site-header .site-nav a{color:var(--text-inverse)}
.site-header .site-nav a:hover{color:var(--secondary)}
.site-header .nav-toggle{color:var(--text-inverse)}

/* Stronger, specific rule to prevent the logo being stretched or distorted
   across browsers (including iOS/Safari). Keeps the original aspect ratio. */
.site-header .logo img{
  height:40px;
  width:auto;
  max-width:160px;
  display:block;
  object-fit:contain;
  /* explicit aspect-ratio fallback for modern browsers */
  aspect-ratio: 667 / 128;
}
.hero{position:relative;padding:4rem 0;text-align:center;min-height:360px}
/* Slides are inserted by JS as absolutely-positioned elements; disable the old pseudo background */
.hero::before{content:"";display:none}
/* Keep a subtle light overlay for readability; tuned for the side-by-side montage */
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.45),rgba(0,0,0,0.25));z-index:1}

/* Mobile: switch to a single cover image to avoid unreadable stretched fragments on small screens */
@media (max-width:900px){
  .hero::before{background-image:url('/assets/images/shelf1.jpg');background-size:cover;background-position:center center}
}
  .hero > .container{position:relative;z-index:2}

  /* Highlight panel in center of hero to improve text/button readability */
  .hero > .container{background:rgba(255,255,255,0.86);padding:2rem;border-radius:12px;box-shadow:0 12px 32px rgba(16,24,40,0.12);max-width:780px;margin:0 auto;text-align:center}
  .hero > .container h1{color:var(--primary);text-shadow:none}
  .hero > .container .lede{color:var(--muted);max-width:60ch}
  .hero > .container .btn.primary{background:var(--btn);color:var(--text-inverse);border-color:var(--btn)}

  /* Slideshow slides inserted by JS */
  .hero-slide{position:absolute;inset:0;background-size:cover;background-position:center center;background-repeat:no-repeat;opacity:0;transition:opacity 1s ease-in-out;z-index:0;-webkit-transform:none;transform:none}
  .hero-slide.active{opacity:1}

  /* Improve hero text contrast and legibility */
  .hero h1{color:var(--text-inverse);text-shadow:0 6px 18px rgba(0,0,0,0.55);margin-bottom:0.5rem}
  .hero .lede{color:rgba(255,255,255,0.9);max-width:60ch;margin:0.5rem auto 1rem}
  .hero .btn{box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.hero .lede{color:var(--muted);max-width:60ch;margin:0.5rem auto 1rem}
.btn{display:inline-block;background:transparent;border:2px solid var(--btn);color:var(--btn);padding:0.5rem 0.9rem;border-radius:6px;text-decoration:none}
.btn.small{padding:0.35rem 0.6rem;font-size:0.9rem}
.btn.primary{background:var(--btn);color:var(--text-inverse);border-color:var(--btn)}
.features{padding:2.25rem 0}
.features-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;align-items:start}

/* Unified feature card styling for the "Why choose" section */
.feature-card{background:var(--surface);border:1px solid var(--card-border);padding:1rem;border-radius:10px;display:flex;flex-direction:column;gap:0.5rem;min-height:140px;box-shadow:var(--card-shadow)}
.feature-card h3{margin:0;font-size:1.05rem;color:var(--primary)}
.feature-card p{margin:0;color:var(--muted);font-size:0.96rem}
.feature-card .feature-icon{width:44px;height:44px;border-radius:8px;background:linear-gradient(180deg,var(--primary),var(--btn));display:inline-flex;align-items:center;justify-content:center;color:var(--text-inverse);font-weight:700;margin-right:0.75rem}
.feature-card .feature-head{display:flex;align-items:center}
.feature-icon svg{width:22px;height:22px;display:block}

/* Product detail specific image sizing: constrain and center main product images */
.product-detail .esl-image{display:block;margin:0.75rem auto;max-width:520px;width:100%;height:auto}
@media (max-width:640px){
  .product-detail .esl-image{max-width:360px}
}

/* Two-column layout for product detail pages on wider screens: media left, content right.
   Updated to apply to a .product-grid inside .product-detail so wrapped markup
   (.product-media / .product-info) occupies both columns instead of a single child
   being constrained to the left column. */
@media (min-width:900px){
  .product-detail .product-grid{
    display:grid;
  grid-template-columns:520px minmax(0,1fr);
  gap:2rem;
    align-items:start;
  /* keep the grid constrained to the site's max width and centered */
  width:100%;
  max-width:var(--max-width);
  margin-left:auto;
  margin-right:auto;
  justify-items:start;
  }
  .product-detail .product-media{grid-column:1}
  .product-detail .product-media .esl-image{justify-self:start;margin:0}
  .product-detail .product-info{grid-column:2}
}
/* Make product image sticky on larger viewports so it remains visible while scrolling
   the product-info column. Cap its max-height to the viewport to avoid overflow. */
@media (min-width:900px){
  .product-detail .product-media{
    align-self:start;
    /* apply sticky to the container — more reliable across browsers */
    position:sticky;
    top:1.5rem;
    display:block;
    /* ensure container doesn't collapse and respects image size */
    max-height:calc(100vh - 3.5rem);
  }
  .product-detail .product-media .esl-image{
    position:static; /* let the container handle sticky */
    display:block;
    width:100%;
    height:auto;
    max-height:100%;
    object-fit:contain;
  }
}
.product-grid{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:flex-start;padding:0}

/* Ensure each card has a fixed visual width so the group centers as expected on wide viewports */
.product-grid .card{flex:0 0 260px}

/* On small screens allow cards to become full-width for readability */
@media (max-width:640px){
  .product-grid{justify-content:center}
  .product-grid .card{flex-basis:100%;max-width:100%}
}
.card{background:var(--surface);border:1px solid var(--card-border);padding:0.6rem;border-radius:var(--radius);box-shadow:var(--elev-shadow);display:flex;flex-direction:column;gap:0.5rem;min-height:300px;max-width:260px;width:100%}
.card img{max-width:100%;height:120px;object-fit:contain;border-radius:6px;background:transparent;border:none;padding:4px;box-shadow:none;flex:0 0 auto}
/* Ensure ESL images inside product cards are consistent and don't create extra vertical gaps */
.card .esl-image, .card img[src*="/assets/ESL/"]{height:120px;object-fit:contain;margin-bottom:0.25rem;padding:2px;display:block;margin-left:auto;margin-right:auto}
/* Push the last paragraph (Details button) to the bottom so cards align */
.card > p:last-of-type{margin-top:auto}
/* Typography and alignment fixes for product cards */
.card h3{margin:0.2rem 0 0.15rem;font-size:1.05rem}
.card > p:first-of-type{margin:0;color:var(--muted);font-size:0.95rem;line-height:1.3}
/* Clamp descriptions to two lines to keep cards visually consistent */
.card > p:first-of-type{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .spec-compact{flex:0 0 auto;margin-top:0.5rem}
.spec-compact th{width:40%;font-weight:600}
.spec-compact td{color:#4b5563}

/* Style ESL product images site-wide (detail pages and listings) to reduce distracting borders and showcase the device */
/* Prefer using the .esl-image class for ESL images; keep src selector as fallback for existing markup */
.esl-image, img[src*="/assets/ESL/"]{
  display:block;
  max-width:100%;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  padding:6px;
  background:var(--surface);
  border:1px solid var(--card-border);
  box-shadow:var(--elev-shadow);
  margin-bottom:1rem;
}

/* Example srcset usage for ESL thumb images:
   <img src="/assets/ESL/EON-15-BWRY-1.png"
        srcset="/assets/ESL/thumbs/EON-15-BWRY-1-320w.jpg 320w, /assets/ESL/thumbs/EON-15-BWRY-1-640w.jpg 640w, /assets/ESL/thumbs/EON-15-BWRY-1-900w.jpg 900w"
        sizes="(max-width:600px) 320px, 640px"
        class="esl-image" loading="lazy">
*/
.specs{border-collapse:collapse;width:100%;max-width:680px}
.specs th{text-align:left;padding:0.5rem;background:var(--secondary);width:30%}
.specs td{padding:0.5rem}
.spec-compact{width:100%;border-collapse:collapse;margin:0.5rem 0;font-size:0.95rem}
.pec .spec-compact th, .spec-compact th{ text-align:left;padding-right:0.5rem;color:#374151;font-weight:600;width:40% }
.spec-compact td{color:#4b5563}
.spec-compact tr + tr th, .spec-compact tr + tr td{padding-top:0.15rem}
.site-footer{background:var(--primary);padding:1.25rem 0;margin-top:auto;color:var(--text-inverse);flex-shrink:0}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:0.5rem}
.site-footer a{color:var(--text-inverse)}
.site-footer a:hover{color:var(--secondary)}
.site-footer small{color:var(--text-inverse)}
.contact-grid{display:grid;grid-template-columns:minmax(480px,1fr) 320px;gap:2rem}
.contact-form label{display:block;margin-bottom:0.75rem}
.contact-form input,.contact-form textarea{width:100%;padding:0.5rem;border:1px solid #ddd;border-radius:6px}
@media (max-width:800px){
  .container{padding:1rem}
  .footer-inner{flex-direction:column;gap:1rem;text-align:center}
  .footer-right{align-items:center}
  .contact-grid{grid-template-columns:1fr}
  .nav-toggle{display:block;position:relative;z-index:3100}
  .site-nav{position:fixed;right:1rem;top:64px;background:var(--secondary);padding:1rem;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.06);display:none;flex-direction:column;z-index:3050}
  .site-nav.open{display:flex}
  .site-nav.open a{color:var(--primary-dark)}
}

/* Compact flash/alert style inside contact form: prevent global .card defaults from creating a large alert area */
.contact-form #flash .card, #flash .card{min-height:0;max-width:none;box-shadow:none;padding:0.5rem;border-radius:6px;margin-bottom:0.5rem}

/* Responsive overrides for the features grid to present as 3x2 on desktop */
@media (max-width:980px){
  .features-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
}
@media (max-width:640px){
  .features-grid{grid-template-columns:repeat(1,minmax(0,1fr));gap:0.9rem}
}