/* ============================================================
   HEADER.CSS — Gunya Shutters
   Topbar · Header · Logo · Nav · Dropdowns · Off-Canvas Menu
   ============================================================ */

/* ── TOP BAR ─────────────────────────────────────────────── */
span.ampersand {
    font-family: 'DM Sans', sans-serif;
}
.highlights-fullwidth-body {
    display: grid;
    grid-template-columns: 1fr!important;
    gap: 32px;
}
.topbar{background:var(--green-dark);padding:3px 0;font-size:13px;color:rgba(255,255,255,0.85);}
.topbar-inner{max-width:1280px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.topbar-left{display:flex;align-items:center;gap:24px;}
.topbar-left a{color:rgba(255,255,255,0.85);text-decoration:none;display:flex;align-items:center;gap:7px;transition:color 0.2s;}
.topbar-left a:hover{color:var(--gold-light);}
.topbar-right{display:flex;align-items:center;gap:16px;}
.topbar-right a{color:rgba(255,255,255,0.7);text-decoration:none;width:32px;height:32px;border:1px solid rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.2s;font-size:13px;}
.topbar-right a:hover{background:var(--gold);border-color:var(--gold);color:var(--green-dark);}
.topbar-icon{width:14px;height:14px;fill:var(--gold);flex-shrink:0;}

.footer-heading.mkn1 {
    margin-top: 25px!important;
}

/* ── HEADER ──────────────────────────────────────────────── */
header{position:fixed;top:36px;left:0;width:100%;z-index:999;transition:all 0.4s ease;display:flex;flex-direction:column;}
header.scrolled{top:0;background:var(--white);box-shadow:0 4px 30px rgba(0,0,0,0.10);}
header.at-top{background:rgba(255,255,255,1);backdrop-filter:blur(12px);}
.header-inner{max-width:1280px;margin:0 auto;padding:0 32px;height:125px;display:flex;align-items:center;justify-content:space-between;}

/* ── LOGO ─────────────────────────────────────────────────── */
.logo-wrap{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;}
.logo-mark{width:48px;height:48px;background:var(--green-dark);border:2px solid var(--gold);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-mark svg{width:28px;height:28px;}
.logo-text{display:flex;flex-direction:column;line-height:1.1;}
.header-logo-img{height:115px;width:auto;object-fit:contain;display:block;}
.logo-text .brand{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--green-dark);transition:color 0.4s;}
.logo-text .tagline{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:500;}
header.scrolled .logo-text .brand{color:var(--green-dark);}
header.scrolled .logo-mark{background:var(--green-dark);border-color:var(--gold);}

/* ── NAV + CTA WRAPPER ───────────────────────────────────── */
.header-right{display:flex;align-items:center;gap:0;margin-left:309px;}
nav{display:flex;align-items:center;gap:6px;}
.nav-item{position:relative;}

/* ── NAV LINKS ───────────────────────────────────────────── */
.nav-link{position:relative;padding:10px 10px;font-size:15px;font-weight:600;color:var(--text-dark);text-decoration:none;border-radius:6px;transition:all 0.25s;cursor:pointer;white-space:nowrap;letter-spacing:0.1px;}
header.scrolled .nav-link{color:#000000;}
.nav-link:hover{color:var(--gold);}
header.scrolled .nav-link:hover{color:var(--gold);}
.nav-link.has-dropdown::after{content:'▾';margin-left:5px;font-size:11px;}

/* ── DROPDOWN ────────────────────────────────────────────── */
.dropdown{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-8px);background:var(--white);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,0.18);min-width:280px;opacity:0;pointer-events:none;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);border:1px solid rgba(0,0,0,0.07);}
.nav-item:hover .dropdown{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0);}
.dropdown-section{padding:16px;}
.dropdown-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:8px;padding:0 8px;}
.dropdown a{display:block;padding:9px 12px;font-size:13.5px;color:var(--text-dark);text-decoration:none;border-radius:7px;transition:all 0.18s;}
.dropdown a:hover{background:var(--off-white);color:var(--green-dark);padding-left:18px;}
.dropdown-divider{border:none;border-top:1px solid #eee;margin:4px 0;}

/* ── CTA BUTTONS ─────────────────────────────────────────── */
.header-ctas{display:flex;align-items:center;gap:8px;margin-left:12px;flex-shrink:0;white-space:nowrap;}
.btn-call{padding:8px 14px;border:2px solid var(--green-mid);color:var(--green-dark);font-size:12px;font-weight:600;border-radius:8px;text-decoration:none;transition:all 0.25s;white-space:nowrap;}
header.scrolled .btn-call{border-color:var(--green-mid);color:var(--green-dark);}
.btn-call:hover{background:var(--green-mid);color:var(--white);}
.btn-quote{padding:8px 16px;background:var(--gold);color:var(--green-dark);font-size:12px;font-weight:700;border-radius:8px;text-decoration:none;transition:all 0.25s;box-shadow:0 4px 16px rgba(201,168,76,0.35);white-space:nowrap;}
.btn-quote:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:0 6px 24px rgba(201,168,76,0.5);}

/* ── HAMBURGER ───────────────────────────────────────────── */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none;}
.hamburger span{width:24px;height:2px;background:var(--green-dark);transition:all 0.3s;display:block;}
header.scrolled .hamburger span{background:var(--green-dark);}
/* Animated X state */
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

/* ── OFF-CANVAS: BACKDROP ────────────────────────────────── */
.nav-backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(3px);
  z-index:997;
  opacity:0;
  transition:opacity 0.35s ease;
}
.nav-backdrop.active{opacity:1;}

/* ── OFF-CANVAS: PANEL CLOSE BUTTON (desktop hidden) ─────── */
.offcanvas-close{display:none;}

/* ── MOBILE NAV CONTACT (desktop hidden) ─────────────────── */
.mobile-nav-contact{display:none;}

/* ============================================================
   RESPONSIVE — LARGE DESKTOP (≤1280px)
   ============================================================ */
@media(max-width:1280px){
  .header-right{margin-left:200px;}
  .nav-link{padding:10px 12px;font-size:15px;}
}

/* ============================================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================================ */
@media(max-width:1024px){
  .header-right{margin-left:40px;}
  .nav-link{padding:8px 10px;font-size:14px;}
  .btn-call{padding:8px 14px;font-size:12px;}
  .btn-quote{padding:8px 14px;font-size:12px;}
  .header-ctas{gap:8px;margin-left:12px;}
}

/* ============================================================
   RESPONSIVE — MOBILE OFF-CANVAS NAV (≤768px)
   ============================================================ */
@media(max-width:768px){
  /* Topbar hidden on mobile */
  .topbar{display:none;}

  /* Header bar */
  header{top:0 !important;background:rgba(255,255,255,0.97) !important;box-shadow:0 2px 16px rgba(0,0,0,0.10);}
  header.at-top{background:rgba(255,255,255,0.97) !important;}
  .header-inner{width:100%;height:68px !important;padding:0 16px;}
  .header-logo-img{height:60px;}
  .hamburger{display:flex;}
  .hamburger span{background:var(--green-dark) !important;}

  /* Show backdrop */
  .nav-backdrop{display:block;}

  /* Off-canvas panel */
  .header-right{
    position:fixed;
    top:0;right:0;
    width:min(320px, 88vw);
    height:100vh;
    overflow-y:auto;
    background:var(--green-dark);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin-left:0;
    z-index:999;
    padding:0 0 40px;
    box-shadow:-8px 0 48px rgba(0,0,0,0.35);
    border-left:2px solid rgba(201,168,76,0.25);
    -webkit-overflow-scrolling:touch;
    transform:translateX(100%);
    display:flex !important;
    visibility:hidden;
    transition:transform 0.38s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.38s;
  }
  .header-right.nav-open{
    transform:translateX(0);
    visibility:visible;
    transition:transform 0.38s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0s;
  }

  /* Panel header row */
  .offcanvas-close{
    display:flex;
    align-items:center;justify-content:space-between;
    padding:16px 20px 14px;
    border-bottom:1px solid rgba(201,168,76,0.2);
    flex-shrink:0;
  }
  .offcanvas-close-brand{
    font-family:'Playfair Display',serif;
    font-size:16px;font-weight:700;
    color:var(--gold);letter-spacing:0.5px;
  }
  .offcanvas-close-btn{
    width:36px;height:36px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:50%;
    color:rgba(255,255,255,0.9);
    font-size:18px;line-height:1;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all 0.2s;
    flex-shrink:0;
  }
  .offcanvas-close-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--green-dark);}

  /* Nav list */
  nav{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    width:100%;
    padding:8px 20px 0;
  }
  .nav-link{
    display:block;
    padding:14px 4px;
    font-size:15px;
    font-weight:600;
    color:rgba(255,255,255,0.88) !important;
    border-bottom:1px solid rgba(255,255,255,0.07);
    border-radius:0;
    cursor:pointer;
    text-align:left;
  }
  .nav-link:hover{color:var(--gold-light) !important;}
  .nav-link.has-dropdown::after{float:right;margin-left:0;transition:transform 0.25s;}
  .nav-item.dropdown-open .nav-link.has-dropdown::after{transform:rotate(180deg);}

  /* Accordion dropdowns */
  .nav-item:hover .dropdown{opacity:1;pointer-events:all;transform:none;}
  .dropdown{
    position:static;
    transform:none !important;
    opacity:1;
    pointer-events:all;
    display:none;
    box-shadow:none;
    border-radius:8px;
    background:rgba(0,0,0,0.2);
    border:none;
    min-width:unset;
    margin:4px 0 8px;
    padding:4px 0 6px;
    transition:none;
  }
  .nav-item.dropdown-open .dropdown{display:block;}
  .dropdown-section{padding:6px 0;}
  .dropdown-label{padding:8px 14px 4px;color:var(--gold);font-size:10px;}
  .dropdown a{
    color:rgba(255,255,255,0.68) !important;
    padding:9px 18px;
    font-size:13.5px;
    border-radius:0;
    text-align:left;
  }
  .dropdown a:hover{
    background:rgba(255,255,255,0.07) !important;
    color:var(--gold-light) !important;
    padding-left:26px;
  }

  /* CTA buttons inside panel */
  .header-ctas{
    display:flex !important;
    flex-direction:column;
    gap:10px;
    padding:20px 20px 0;
    margin-left:0;
  }
  .btn-call,.btn-quote{
    text-align:left;
    padding:13px 16px !important;
    font-size:14px !important;
    border-radius:10px;
    width:100%;
    display:block;
    box-sizing:border-box;
  }
  .btn-call{
    background:#ffffff !important;
    border-color:#ffffff !important;
    color:#000000 !important;
  }
  .btn-call:hover{background:rgba(255,255,255,0.85) !important;}
  .btn-quote{
    background:var(--gold);
    color:var(--green-dark) !important;
  }

  /* Contact strip at bottom of panel */
  .mobile-nav-contact{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:16px 20px 0;
    margin-top:14px;
    border-top:1px solid rgba(255,255,255,0.1);
  }
  .mobile-nav-contact a{
    display:flex;align-items:center;gap:8px;
    color:rgba(255,255,255,0.6);text-decoration:none;
    font-size:13px;padding:7px 0;
    transition:color 0.2s;
  }
  .mobile-nav-contact a:hover{color:var(--gold-light);}
  .mobile-nav-contact a svg{width:14px;height:14px;fill:var(--gold);flex-shrink:0;}
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (≤480px)
   ============================================================ */
@media(max-width:480px){
  .header-inner{height:60px !important;}
  .header-logo-img{height:52px;}
  .header-right{width:min(300px, 92vw);}
}