/* ============================================================
   HEADER-FOOTER.CSS — Gunya Shutters
   Shared across EVERY page (home + all subpages):
   CSS Variables · Base Reset · Topbar · Header · Nav ·
   Off-Canvas Menu · Footer · Floating Buttons · Back-to-Top
   ============================================================ */

/* ── CSS CUSTOM PROPERTIES (global palette) ─────────────────
   Single source of truth — loaded on every page before
   home.css / subpage.css, both of which rely on these vars.
   ─────────────────────────────────────────────────────────── */
:root {
  --green-dark:  #1a3a2a;
  --green-mid:   #2d5a3d;
  --green-light: #3d7a52;
  --gold:        #c9a84c;
  --gold-light:  #e8c96a;
  --gold-pale:   #f5e6b8;
  --white:       #ffffff;
  --off-white:   #f8f5ef;
  --text-dark:   #1a1a1a;
  --text-mid:    #4a4a4a;
  --text-light:  #7a7a7a;
  --glass:       rgba(255,255,255,0.08);
  --shadow:      0 20px 60px rgba(0,0,0,0.15);
  --radius:      14px;
}

/* ── BASE RESET ─────────────────────────────────────────────
   Applied once here so every page (home + subpages) inherits
   the same reset without repeating it in home.css / subpage.css.
   ─────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; color: var(--text-dark); background: var(--white); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }

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

/* ── TOP BAR ─────────────────────────────────────────────── */
span.ampersand {
    font-family: 'DM Sans', sans-serif;
}
.mbt9 a {
    color: #ccc;
	text-decoration:none;
}

p.mbt6
{
	padding-bottom:10px;
	padding-top:10px;
}
.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.topbar-hidden{display:none;}
.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:42px;left:0;width:100%;z-index:999;transition:background 0.4s ease,box-shadow 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:238px;}
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 !important;}

  /* 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);}
}

/* ============================================================
   FOOTER.CSS — Gunya Shutters
   Footer layout · Links · Social · Bottom bar
   ============================================================ */

/* ── FOOTER BASE ─────────────────────────────────────────── */
footer{background:var(--green-dark);color:rgba(255,255,255,0.75);}
.footer-top{padding:64px 0 48px;border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;}

/* ── FOOTER BRAND ────────────────────────────────────────── */
.footer-brand .brand-name{font-family:'Playfair Display',serif;font-size:24px;color:var(--white);margin-bottom:12px;}
.footer-brand p{font-size:14px;line-height:1.7;color:rgba(255,255,255,0.6);}

/* ── FOOTER LINKS ────────────────────────────────────────── */
.footer-heading{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:16px;}
.footer-links{list-style:none;}
.footer-links li{margin-bottom:10px;}
.footer-links a{font-size:14px;color:rgba(255,255,255,0.6);text-decoration:none;transition:color 0.2s;}
.footer-links a:hover{color:var(--gold-light);}

/* ── FOOTER BOTTOM BAR ───────────────────────────────────── */
.footer-bottom{padding:20px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:rgba(255,255,255,0.4);}

/* ── FOOTER SOCIAL ───────────────────────────────────────── */
.footer-social{display:flex;gap:12px;}
.footer-social a{width:34px;height:34px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gold);color:var(--green-dark);text-decoration:none;font-size:13px;font-weight:700;transition:all 0.2s;}
.footer-social a:hover{background:transparent;border-color:rgba(255,255,255,0.5);color:rgba(255,255,255,0.8);}

/* ============================================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================================ */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
}

/* ============================================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================================ */
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .footer-top{padding:40px 0 32px;}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center;gap:8px;}
  .footer-brand img{height:52px;}
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (≤480px)
   ============================================================ */
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr;}
}

/* ============================================================
   FOOTER EXTRAS — shared footer/utility classes used by the
   footer markup injected on every subpage via include.js
   (also present on the home page footer).
   ============================================================ */
.footer-logo-img{height:150px;width:auto;object-fit:contain;display:block;margin-bottom:16px;}
.offcanvas-logo-img{height:44px;width:auto;object-fit:contain;display:block;}
.text-gold-bold{color:var(--gold);font-weight:700;}
.footer-warranty-box{margin-top:20px;background:rgba(201,168,76,0.12);border:1px solid rgba(201,168,76,0.25);border-radius:10px;padding:14px;}
.footer-warranty-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:6px;}
.footer-warranty-text{font-size:13px;color:rgba(255,255,255,0.7);line-height:1.6;}
.footer-address-item{color:rgba(255,255,255,0.5);font-size:14px;padding-top:4px;}
.mt-20{margin-top:20px;}
.mt-24{margin-top:24px;}

/* ── FLOATING QUICK-CONTACT BUTTONS (subpages) ──────────────── */
.float-btns{position:fixed;right:20px;bottom:88px;z-index:999;display:flex;flex-direction:column;gap:10px;}
.float-btn{display:flex;align-items:center;gap:9px;padding:13px 18px;border-radius:40px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;text-decoration:none;border:none;cursor:pointer;transition:all 0.3s;box-shadow:0 6px 24px rgba(0,0,0,0.2);white-space:nowrap;}
.float-btn-call{background:var(--green-dark);color:var(--white);}
.float-btn-call:hover{background:var(--green-mid);transform:translateX(-4px);box-shadow:0 10px 32px rgba(26,58,42,0.35);}
.float-btn-quote{background:var(--gold);color:var(--green-dark);}
.float-btn-quote:hover{background:var(--gold-light);transform:translateX(-4px);box-shadow:0 10px 32px rgba(201,168,76,0.5);}
.float-btn svg{width:17px;height:17px;fill:currentColor;flex-shrink:0;}

/* ── BACK-TO-TOP (home + subpages) ──────────────────────────── */
.scroll-top{position:fixed;bottom:28px;right:28px;width:44px;height:44px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1000;border:none;box-shadow:0 4px 16px rgba(201,168,76,0.4);opacity:0;transform:translateY(16px);transition:all 0.3s;color:var(--green-dark);font-size:16px;}
.scroll-top.visible{opacity:1;transform:none;}
.scroll-top:hover{background:var(--gold-light);}

@media(max-width:768px){
  .float-btns{bottom:76px;}
  .scroll-top{bottom:16px;right:16px;width:40px;height:40px;font-size:14px;}
}
@media(max-width:480px){
  .float-btn span{display:none;}
  .float-btn{padding:13px 13px;border-radius:50%;width:48px;height:48px;justify-content:center;}
  .float-btn svg{width:20px;height:20px;}
  .float-btns{right:16px;bottom:70px;}
}