/*
Theme Name:  StarveilBuild
Theme URI:   https://starveilbuild.com
Description: StarveilBuild — Engineering-led aluminum window & door manufacturer. Navy #0D1B2A + Gold #C9A961, Inter font, 3 CPTs.
Author:      StarveilBuild
Version:     1.0.0
Text Domain: starveilbuild
*/

/* ============================================================
   CSS Custom Properties
   ============================================================ */
:root {
  --navy:       #0D1B2A;
  --steel:      #1B3A5B;
  --gold:       #C9A961;
  --gold-light: #E8D5A3;
  --gold-dark:  #A88A48;
  --white:      #FFFFFF;
  --bg:         #F7F8FA;
  --text:       #1B3A5B;
  --text-mid:   #4A5568;
  --text-light: #627284;
  --border:     #E2E8F0;
  --shadow:     rgba(13,27,42,0.08);

  --font-sans:   'Inter', system-ui, sans-serif;
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-display: 52px;
  --fs-h1:      44px;
  --fs-h2:      32px;
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-xs:      13px;
  --fs-xxs:     12px;

  --radius:    12px;
  --radius-sm:  8px;
  --radius-lg: 20px;
  --ease:      cubic-bezier(0.4,0,0.2,1);
  --container: 1280px;
  --header-h:  64px;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img,video { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
input,textarea,select { font-family:inherit; font-size:inherit; }

/* ============================================================
   Typography
   ============================================================ */
h1,h2,h3,h4,h5,h6 { line-height:1.2; color:var(--navy); }
h1 { font-size:var(--fs-h1);  font-weight:var(--fw-bold); }
h2 { font-size:var(--fs-h2);  font-weight:var(--fw-medium); }
h3 { font-size:var(--fs-h3);  font-weight:var(--fw-semibold); }
h4 { font-size:var(--fs-h4);  font-weight:var(--fw-semibold); }
p  { line-height:1.7; color:var(--text-mid); }

/* ============================================================
   Layout
   ============================================================ */
.container {
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:24px;
}
.section    { padding:80px 0; }
.section-sm { padding:48px 0; }

.section-tag {
  display:inline-block;
  font-size:var(--fs-xxs); font-weight:var(--fw-semibold);
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px;
}
.section-title {
  font-size:var(--fs-h2); font-weight:var(--fw-medium);
  color:var(--navy); margin-bottom:16px;
}
.section-sub {
  font-size:var(--fs-body-lg); color:var(--text-mid);
  max-width:640px; margin-bottom:48px;
}
.text-center { text-align:center; }
.text-center .section-sub { margin-inline:auto; }

.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* Skip link */
.skip-link {
  position:absolute; top:-999px; left:8px; z-index:9999;
  background:var(--gold); color:var(--navy);
  padding:8px 16px; border-radius:0 0 var(--radius-sm) var(--radius-sm);
  font-weight:var(--fw-semibold); font-size:var(--fs-small);
}
.skip-link:focus { top:0; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:var(--radius-sm);
  font-size:var(--fs-body); font-weight:var(--fw-regular);
  line-height:1; transition:all 0.3s var(--ease); white-space:nowrap;
}
.btn-primary { background:var(--gold); color:var(--navy); }
.btn-primary:hover {
  background:var(--gold-dark); transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(201,169,97,0.35);
}
.btn-outline {
  border:1.5px solid var(--border); color:var(--text); background:transparent;
}
.btn-outline:hover { border-color:var(--gold); color:var(--navy); }
.btn-ghost { color:var(--gold); padding-inline:0; }
.btn-ghost:hover { gap:12px; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background:var(--white); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 2px 12px var(--shadow);
  transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  position:relative;
}
.card:hover { transform:translateY(-4px); box-shadow:0 8px 32px rgba(13,27,42,0.12); }
.card-link-overlay { position:absolute; inset:0; z-index:1; display:block; }
.card-img { aspect-ratio:16/9; overflow:hidden; }
.card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s var(--ease); }
.card:hover .card-img img { transform:scale(1.04); }
.card-body { padding:20px 24px 24px; }
.card-tag {
  font-size:var(--fs-xxs); font-weight:var(--fw-semibold);
  letter-spacing:1px; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px;
}
.card-title { font-size:var(--fs-h4); font-weight:var(--fw-semibold); color:var(--navy); margin-bottom:8px; line-height:1.3; }
.card-desc  { font-size:var(--fs-small); color:var(--text-mid); line-height:1.6; }
.card-link {
  position:relative; z-index:2;
  font-size:var(--fs-small); font-weight:var(--fw-semibold); color:var(--gold);
  margin-top:16px; display:inline-flex; align-items:center; gap:6px;
  transition:gap 0.2s var(--ease);
}
.card:hover .card-link { gap:10px; }

/* Param badges */
.param-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.param-tag {
  font-size:var(--fs-xxs); font-weight:var(--fw-semibold);
  padding:4px 10px; border-radius:100px;
  background:var(--bg); color:var(--text-mid); border:1px solid var(--border);
}
.param-tag.gold {
  background:rgba(201,169,97,0.12); color:var(--gold-dark);
  border-color:rgba(201,169,97,0.3);
}

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb {
  display:flex; align-items:center; flex-wrap:wrap;
  gap:6px; font-size:var(--fs-xs); color:var(--text-light); padding:16px 0;
}
.breadcrumb a { color:var(--text-light); transition:color 0.2s; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb-sep { color:var(--border); }
.breadcrumb-current { color:var(--text-mid); font-weight:var(--fw-medium); }

/* ============================================================
   Trust Bar
   ============================================================ */
.trust-bar {
  background:var(--navy); padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.trust-bar-inner {
  display:flex; align-items:center; justify-content:center;
  gap:40px; flex-wrap:wrap;
}
.trust-item {
  display:flex; align-items:center; gap:8px;
  color:rgba(255,255,255,0.75);
  font-size:var(--fs-xs); font-weight:var(--fw-medium); white-space:nowrap;
}
.trust-item svg { color:var(--gold); flex-shrink:0; }
.trust-divider { width:1px; height:16px; background:rgba(255,255,255,0.15); }

/* ============================================================
   Site Header
   ============================================================ */
.site-header {
  position:sticky; top:0; z-index:900;
  background:var(--white); border-bottom:1px solid var(--border);
  height:var(--header-h); display:flex; align-items:center;
  transition:box-shadow 0.3s var(--ease);
}
.site-header.scrolled { box-shadow:0 2px 16px rgba(13,27,42,0.1); }
.header-inner { display:flex; align-items:center; gap:40px; height:100%; width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.site-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.site-logo img { height:36px; width:auto; }
.site-logo-text { font-size:18px; font-weight:var(--fw-bold); color:var(--navy); letter-spacing:-0.3px; }
.main-nav { display:flex; align-items:center; gap:4px; flex:1; }
.nav-item { position:relative; }
.nav-link {
  display:flex; align-items:center; gap:4px; padding:8px 14px;
  font-size:var(--fs-small); font-weight:var(--fw-medium); color:var(--text);
  border-radius:var(--radius-sm); transition:all 0.2s var(--ease); white-space:nowrap;
}
.nav-link:hover,.nav-link.active { color:var(--navy); background:var(--bg); }
.nav-link svg { transition:transform 0.2s var(--ease); }
.nav-item:hover .nav-link svg,.nav-item.open .nav-link svg { transform:rotate(180deg); }
.nav-dropdown {
  position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 12px 40px rgba(13,27,42,0.12);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.2s var(--ease), transform 0.2s var(--ease);
  z-index:910; min-width:220px;
}
.nav-item:hover .nav-dropdown,.nav-item.open .nav-dropdown {
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto;
}
.dropdown-inner { padding:8px; }
.dropdown-link {
  display:block; padding:9px 14px; font-size:var(--fs-small);
  color:var(--text); border-radius:var(--radius-sm); transition:all 0.15s; white-space:nowrap;
}
.dropdown-link:hover { background:var(--bg); color:var(--navy); }
.header-actions { display:flex; align-items:center; gap:12px; margin-left:auto; flex-shrink:0; }
.header-search-btn {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); color:var(--text); transition:all 0.2s;
}
.header-search-btn:hover { background:var(--bg); color:var(--navy); }
.hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; padding:6px; border-radius:var(--radius-sm); }
.hamburger span { display:block; height:2px; background:var(--navy); border-radius:2px; transition:all 0.3s var(--ease); }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
  display:none; position:fixed; inset:var(--header-h) 0 0 0;
  background:var(--white); z-index:800; overflow-y:auto;
  padding:16px 24px 40px; transform:translateX(100%); transition:transform 0.3s var(--ease);
}
.mobile-nav.open { transform:translateX(0); }
.mobile-nav-list { display:flex; flex-direction:column; gap:4px; }
.mobile-nav-link {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; font-size:var(--fs-body); font-weight:var(--fw-medium);
  color:var(--navy); border-bottom:1px solid var(--border);
}
.mobile-sub-list { display:none; flex-direction:column; padding:8px 0 8px 16px; gap:2px; }
.mobile-sub-list.open { display:flex; }
.mobile-sub-link { display:block; padding:8px 0; font-size:var(--fs-small); color:var(--text-mid); }

/* ============================================================
   Site Footer
   ============================================================ */
.site-footer { background:var(--navy); color:rgba(255,255,255,0.7); padding:64px 0 32px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-brand .site-logo-text { color:var(--white); font-size:20px; }
.footer-tagline { font-size:var(--fs-small); line-height:1.7; margin-top:12px; margin-bottom:24px; max-width:280px; }
.footer-contact { display:flex; flex-direction:column; gap:8px; }
.footer-contact a { font-size:var(--fs-small); color:rgba(255,255,255,0.6); transition:color 0.2s; }
.footer-contact a:hover { color:var(--gold); }
.footer-col h4 { font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:16px; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:var(--fs-small); color:rgba(255,255,255,0.6); transition:color 0.2s; }
.footer-links a:hover { color:var(--gold); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.08); padding-top:24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.footer-copy { font-size:var(--fs-xs); color:rgba(255,255,255,0.4); }
.footer-legal { display:flex; gap:20px; }
.footer-legal a { font-size:var(--fs-xs); color:rgba(255,255,255,0.4); transition:color 0.2s; }
.footer-legal a:hover { color:rgba(255,255,255,0.7); }

/* ============================================================
   Hero
   ============================================================ */
.hero { position:relative; overflow:hidden; display:flex; align-items:center; min-height:580px; background:var(--navy); }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.hero-mask {
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(13,27,42,0.92) 0%,rgba(13,27,42,0.82) 25%,rgba(13,27,42,0.55) 45%,rgba(13,27,42,0.18) 60%,transparent 75%);
}
.hero-content { position:relative; z-index:2; max-width:600px; padding:80px 0; }
.hero-tag { display:inline-block; font-size:var(--fs-xxs); font-weight:var(--fw-semibold); letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.hero-title { font-size:clamp(32px,4vw,var(--fs-display)); font-weight:var(--fw-bold); color:var(--white); line-height:1.15; margin-bottom:20px; }
.hero-title span { color:var(--gold); }
.hero-sub { font-size:var(--fs-body-lg); color:rgba(255,255,255,0.78); line-height:1.6; margin-bottom:32px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }

/* ============================================================
   CTA Section
   ============================================================ */
.cta-section { background:var(--navy); padding:72px 0; text-align:center; }
.cta-section .section-tag { color:var(--gold); }
.cta-title { font-size:var(--fs-h2); font-weight:var(--fw-medium); color:var(--white); margin-bottom:12px; }
.cta-sub { font-size:var(--fs-body-lg); color:rgba(255,255,255,0.65); margin-bottom:36px; max-width:520px; margin-inline:auto; }
.cta-actions { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* ============================================================
   Product Detail Tabs
   ============================================================ */
.detail-tabs { margin-top:48px; }
.tabs-nav { display:flex; gap:4px; border-bottom:2px solid var(--border); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tabs-nav::-webkit-scrollbar { display:none; }
.tab-btn {
  padding:10px 20px; font-size:var(--fs-small); font-weight:var(--fw-medium);
  color:var(--text-light); border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:all 0.2s; white-space:nowrap; flex-shrink:0;
}
.tab-btn:hover { color:var(--navy); }
.tab-btn.active { color:var(--navy); border-bottom-color:var(--gold); font-weight:var(--fw-semibold); }
.tab-panel { display:none; padding:40px 0; }
.tab-panel.active { display:block; }
.spec-table { width:100%; border-collapse:collapse; }
.spec-table th,.spec-table td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--border); font-size:var(--fs-small); }
.spec-table th { font-size:13px; font-weight:var(--fw-semibold); color:var(--navy); background:var(--bg); white-space:nowrap; width:30%; }
.spec-table td { color:var(--text-mid); font-size:15px; }

/* ============================================================
   FAQ Accordion
   ============================================================ */
.faq-list { display:flex; flex-direction:column; gap:8px; }
.faq-item { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--white); }
.faq-question {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; font-size:var(--fs-body); font-weight:var(--fw-medium);
  color:var(--navy); cursor:pointer; gap:16px; user-select:none;
}
.faq-icon { flex-shrink:0; width:20px; height:20px; color:var(--gold); transition:transform 0.3s var(--ease); }
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.35s var(--ease); }
.faq-answer-inner { padding:0 20px 20px; font-size:15px; color:var(--text-mid); line-height:1.7; }
.faq-item.open .faq-answer { max-height:600px; }

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.5s var(--ease),transform 0.5s var(--ease); }
.reveal.visible { opacity:1; transform:none; }

/* ============================================================
   Floating buttons
   ============================================================ */
.floating-sidebar { position:fixed; right:20px; bottom:80px; z-index:700; display:flex; flex-direction:column; gap:10px; }
.float-btn { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--white); box-shadow:0 4px 16px var(--shadow); color:var(--navy); transition:transform 0.2s var(--ease),box-shadow 0.2s; }
.float-btn:hover { transform:scale(1.1); box-shadow:0 6px 24px rgba(13,27,42,0.16); }
.float-btn.whatsapp { background:#25D366; color:var(--white); }
.back-to-top { position:fixed; right:20px; bottom:24px; z-index:700; width:40px; height:40px; border-radius:50%; background:var(--navy); color:var(--white); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s,transform 0.3s; box-shadow:0 4px 12px var(--shadow); }
.back-to-top.visible { opacity:1; pointer-events:auto; }
.back-to-top:hover { transform:translateY(-3px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1200px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:1024px) {
  .main-nav,.header-actions .btn { display:none; }
  .hamburger { display:flex; }
  .mobile-nav { display:block; }
  :root { --header-h:60px; }
}
@media (max-width:768px) {
  :root { --fs-display:36px; --fs-h1:32px; --fs-h2:26px; --fs-h3:20px; }
  .section { padding:56px 0; }
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  .hero-content { padding:56px 0; }
  .trust-bar-inner { gap:16px; }
  .trust-divider { display:none; }
}
@media (max-width:480px) {
  .container { padding-inline:16px; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
}