/* ============================================
   CENTRIX SOLAR — GLOBAL STYLES v16.0
   Header, Footer, Nav, SPA Shell & Utilities
   ============================================ */

   :root {
    --sun:        #f5a623;
    --sun-dark:   #e09400;
    --deep:       #0a1628;
    --deep-light: #1e3a8a;
    --white:      #ffffff;
    --off-white:  #f8f9fa;
    --text:       #e2e8f0;
    --text-light: #94a3b8;
    --border:     rgba(255,255,255,0.08);
    --shadow:     0 4px 20px rgba(0,0,0,0.3);
    --shadow-lg:  0 10px 40px rgba(0,0,0,0.4);
    --radius:     8px;
    --radius-sm:  6px;
    --radius-lg:  16px;
    --transition: 0.3s ease;
    --header-h:   70px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }

/* ── Layout: sticky header, natural document scroll ──
   template.js calls window.scrollTo({top:0}) on every
   SPA page change (see navigateTo()). That only works
   if the WINDOW is the scrolling element. So instead of
   trapping #page-content in its own scroll box (which
   also breaks the moment the footer gets tall on mobile
   — a stacked footer can easily be 700–900px, leaving
   almost no room for a "locked" content pane on phones),
   we let the whole page scroll normally. The header uses
   position:sticky so it stays pinned at the top while
   you scroll; the footer just sits at the natural end of
   the page. This is responsive on any device by default
   because nothing has a hardcoded/guessed height. */
html {
    scroll-behavior:smooth;
    font-size:16px;
}

html, body {
    min-height:100%;
    width:100%;
}

body {
    font-family:'DM Sans','Segoe UI',system-ui,-apple-system,sans-serif;
    color:var(--text);
    background:#0a1628;
    line-height:1.6;
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; transition:color var(--transition); }

/* ── Layout Shell ─────────────────────────── */
#header {
    position:sticky;
    top:0;
    z-index:100;
    width:100%;
}

#footer {
    z-index:100;
    width:100%;
    margin-top:auto;   /* pins footer to the bottom on short pages, without trapping it there on tall ones */
}

.site-header {
    position:relative;
    background:linear-gradient(135deg,#0a1628 0%,#1e3a8a 100%);
    box-shadow:0 4px 30px rgba(0,0,0,0.4);
    border-bottom:2px solid rgba(245,166,35,0.3);
}

.site-footer {
    background:linear-gradient(135deg,#0a1628 0%,#1e3a8a 100%);
    border-top:3px solid rgba(245,166,35,0.4);
    color:#e2e8f0;
    padding:60px 20px 0;
}

#page-content {
    flex:1 0 auto;
    position:relative;
    transition:opacity .35s ease, transform .35s ease;
}

/* ── Scrollbar (white, consistent everywhere) ── */
html::-webkit-scrollbar {
    width: 8px;
}
html::-webkit-scrollbar-track {
    background: transparent;
}
html::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
}
html::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.4);
}

/* ── Header ───────────────────────────────── */
.header-container {
    max-width:1280px;
    margin:0 auto;
    padding:0 20px;
    height:var(--header-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.logo img { height:48px; width:auto; display:block; transition:transform var(--transition); }
.logo:hover img { transform:scale(1.03); }

/* ── Navigation ───────────────────────────── */
.main-nav {
    display:flex;
    align-items:center;
    gap:28px;
}

.main-nav a {
    color:#e2e8f0;
    font-weight:500;
    font-size:0.95rem;
    position:relative;
    padding:4px 0;
    text-decoration:none;
    transition:color .3s;
}

.main-nav a::after {
    content:'';
    position:absolute;
    bottom:-4px; left:0;
    width:0; height:2px;
    background:var(--sun);
    transition:width .3s;
}

.main-nav a:hover,
.main-nav a.active { color:var(--sun); }

.main-nav a:hover::after,
.main-nav a.active::after { width:100%; }

.header-cta {
    background:linear-gradient(135deg,#f5a623,#d97706);
    color:#0a1628 !important;
    font-weight:700;
    padding:10px 24px;
    border-radius:50px;
    text-decoration:none;
    transition:transform .3s, box-shadow .3s;
    white-space:nowrap;
}

.header-cta:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 25px rgba(245,166,35,0.4);
}

/* Mobile toggle */
.mobile-toggle {
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
    z-index:1001;
}

.mobile-toggle span {
    display:block;
    width:26px; height:2.5px;
    background:#e2e8f0;
    border-radius:2px;
    transition:all .3s ease;
}

.mobile-toggle.active span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.mobile-toggle.active span:nth-child(2){ opacity:0; }
.mobile-toggle.active span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }

.nav-close-btn {
    display:none;
    position:absolute;
    top:20px; right:20px;
    width:44px; height:44px;
    border-radius:50%;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    color:#fff;
    font-size:1.2rem;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    transition:all .3s;
    z-index:1002;
}

.nav-close-btn:hover {
    background:#f5a623;
    color:#0a1628;
    border-color:#f5a623;
}

/* ── Footer ───────────────────────────────── */
.footer-container {
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:40px;
}

.site-footer h4 {
    color:#f5a623;
    font-family:'Syne',sans-serif;
    font-size:1.1rem;
    margin-bottom:18px;
}

.site-footer a {
    color:#cbd5e1;
    text-decoration:none;
    display:block;
    margin-bottom:10px;
    font-size:0.9rem;
    transition:color .3s;
}

.site-footer a:hover { color:#f5a623; }

.footer-brand img { height:60px; width:auto; margin-bottom:12px; }
.footer-brand p { color:#94a3b8; font-size:0.9rem; line-height:1.7; }

.footer-links h4,
.footer-services h4,
.footer-contact h4 {
    font-size:1.1rem;
    font-weight:700;
    margin-bottom:18px;
    color:#f5a623;
}

.footer-contact p {
    margin-bottom:10px;
    font-size:0.9rem;
    color:#cbd5e1;
}

.footer-contact a { color:#cbd5e1; transition:color .3s; }
.footer-contact a:hover { color:#f5a623; }

/* ── Social Icons (Rounded Square — perfectly centred) ── */
.social-links {
    display: flex; gap: 12px;
  }
  .social-btn {
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5);
    font-size: 15px;
    line-height: 1;
    transition: var(--transition);
  }
  .social-btn:hover { border-color: var(--sun); color: var(--sun); }
  .footer-col h5 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 20px;
  }

/* Footer bottom bar */
.footer-bottom {
    border-top:1px solid rgba(255,255,255,0.08);
    padding:20px;
    color:#94a3b8;
    margin-top:40px;
    font-size:0.85rem;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.footer-bottom p { margin:0; }

.footer-powered a {
    color:var(--sun);
    text-decoration:none;
    transition:color .3s;
}

.footer-powered a:hover { color:var(--sun-dark); }

@media (max-width:768px){
    .footer-bottom { justify-content:center; text-align:center; }
}

/* ── SPA Transitions (content ONLY) ───────── */
#page-content.page-fade-out {
    opacity:0;
    transform:translateY(25px);
}

#page-content.page-fade-in {
    animation:pageFadeIn .5s ease forwards;
}

@keyframes pageFadeIn {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Scroll Animations ────────────────────── */
.fade-up {
    opacity:0;
    transform:translateY(40px);
    transition:opacity .8s ease-out, transform .8s ease-out;
}

.fade-up.visible {
    opacity:1;
    transform:translateY(0);
}

.fade-up:nth-child(1){ transition-delay:.05s; }
.fade-up:nth-child(2){ transition-delay:.1s; }
.fade-up:nth-child(3){ transition-delay:.15s; }
.fade-up:nth-child(4){ transition-delay:.2s; }
.fade-up:nth-child(5){ transition-delay:.25s; }

/* ── Utility Classes ──────────────────────── */
.container {
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
}

.section { padding:80px 0; }

.section-title {
    font-family:'Syne',sans-serif;
    font-size:2.2rem;
    font-weight:800;
    color:#fff;
    text-align:center;
    margin-bottom:16px;
}

.section-subtitle {
    text-align:center;
    color:#94a3b8;
    font-size:1.05rem;
    max-width:600px;
    margin:0 auto 48px;
}

.btn {
    display:inline-block;
    padding:14px 32px;
    border-radius:var(--radius);
    font-weight:600;
    font-size:0.95rem;
    text-align:center;
    cursor:pointer;
    transition:all var(--transition);
    border:none;
    text-decoration:none;
}

.btn-primary {
    background:var(--sun);
    color:#0a1628;
}

.btn-primary:hover {
    background:var(--sun-dark);
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(245,166,35,0.3);
}

.btn-outline {
    background:transparent;
    color:var(--sun);
    border:2px solid var(--sun);
}

.btn-outline:hover {
    background:var(--sun);
    color:#0a1628;
}

/* ── Responsive ───────────────────────────── */
@media (max-width:992px){
    .footer-container { grid-template-columns:1fr 1fr; gap:30px; }
}

@media (max-width:768px){
    :root { --header-h:64px; }
    .header-container { padding:0 16px; }
    .logo img { height:42px; }

    .main-nav {
        position:fixed;
        inset:0;
        background:linear-gradient(180deg,#0a1628 0%,#1e3a8a 100%);
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:30px;
        transform:translateX(100%);
        transition:transform .4s ease;
        z-index:999;
    }
    .main-nav.open { transform:translateX(0); }
    .main-nav a { font-size:1.4rem; font-weight:600; color:#e2e8f0; }
    .main-nav a::after { display:none; }
    .nav-close-btn { display:flex; }
    .mobile-toggle { display:flex; }
    .header-cta { display:none; }

    .footer-container {
        grid-template-columns:1fr;
        gap:30px;
        padding:40px 16px 20px;
    }
    .section { padding:60px 0; }
    .section-title { font-size:1.8rem; }
}

@media (max-width:480px){
    .section-title { font-size:1.5rem; }
    .btn { padding:12px 24px; font-size:0.9rem; }
}