/* ==========================================================================
   StorageRankers - Global Styles
   Palette: Navy #001F31 / Teal #13A7B3 / Amber #F58D1D / CTA #F24405
   ========================================================================== */

:root{
    --navy-950:#001F31;
    --navy-800:#0B3049;
    --navy-700:#123A56;
    --teal-500:#13A7B3;
    --teal-300:#6FD9E0;
    --amber-500:#F58D1D;
    --cta-500:#F24405;
    --cta-600:#C23604;
    --white:#FFFFFF;
    --gray-100:#F7F9FA;
    --gray-300:#D7DEE2;
    --gray-700:#3B4A52;
    /* Menu bar gradient - higher contrast, more defined transition */
    --menu-grad-light:#15AFD1;
    --menu-grad-mid:#046688;
    --menu-grad-dark:#011E2C;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Sans',Arial,sans-serif;line-height:1.6;color:var(--gray-700);}
a{color:inherit;}
img{max-width:100%;display:block;}

/* ==========================================================================
   Layout
   ========================================================================== */
.container{max-width:1200px;margin:0 auto;padding:0 24px;}

/* ==========================================================================
   Top Contact Bar
   ========================================================================== */
.top-contact-bar{background:#013246;color:var(--white);font-size:.9rem;padding:10px 0;line-height:1;}
.top-contact-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.top-contact-row a{text-decoration:none;opacity:.95;transition:opacity .2s,color .2s;display:inline-flex;align-items:center;gap:6px;}
.top-contact-row a:hover{opacity:1;color:var(--teal-300);}
.top-contact-row svg{flex-shrink:0;opacity:.7;}

/* ==========================================================================
   Header & Navigation
   Scoped to .site-header (not a bare `header` element selector) so that
   any other semantic <header> element on the page - such as the blog
   article template's <header class="article-header"> - never inherits
   the site navigation's sticky positioning, fixed height, z-index or
   geometry. Build 35.5b fix: previously the bare `header`/`header nav`
   selectors below leaked into every article page and broke the article
   header layout. Do not reintroduce bare `header` selectors here.
   ========================================================================== */
.site-header{
    background:var(--menu-grad-dark);
    background-image:radial-gradient(ellipse 420px 260px at 200px 50%, rgba(21,175,209,.28) 0%, transparent 100%);
    position:sticky;top:0;z-index:1000;box-shadow:0 2px 12px rgba(0,0,0,.35);
    height:162px;overflow:visible;
    transition:height .32s ease,box-shadow .32s ease,background .32s ease;
}
/* Reserve a fixed left clearance equal to the logo's own footprint so nav
   links can never render underneath it, no matter how narrow the viewport
   gets before the hamburger breakpoint kicks in. This is what was missing
   before - nav-links were purely right-aligned with no awareness of the
   logo's width, so a narrower browser window pushed "Home" left until it
   sat under the logo. */
.site-header nav{position:relative;display:flex;justify-content:flex-end;align-items:center;height:162px;padding:0;padding-left:400px;transition:height .32s ease;}
.logo{position:absolute;left:-30px;top:-57px;z-index:5;transition:transform .32s ease,top .32s ease;}
.logo img.logo-img{height:280px;width:auto;}

.nav-links{display:flex;align-items:center;gap:22px;}
.nav-links a{color:var(--white);text-decoration:none;font-size:.95rem;font-weight:500;transition:color .2s ease,transform .2s ease;position:relative;padding:6px 0;white-space:nowrap;}
.nav-links a:not(.nav-cta)::after{
    content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;
    background:var(--teal-300);border-radius:2px;
    transform:scaleX(0);transform-origin:center;transition:transform .2s ease;
}
.nav-links a:not(.nav-cta):hover::after{transform:scaleX(1);}
.nav-links a:not(.nav-cta):hover{color:var(--teal-300);transform:translateY(-1px);}
/* Active nav item - soft translucent teal pill */
.nav-links a.nav-active{color:var(--white);background:rgba(19,167,179,.18);border-radius:6px;padding:6px 12px;}
.nav-links a.nav-active::after{display:none;}
.nav-links a.nav-cta{background:var(--cta-500);color:var(--white)!important;padding:11px 22px;border-radius:8px;font-weight:600;white-space:nowrap;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px rgba(242,68,5,.22);
    transition:background .2s ease,transform .2s ease,box-shadow .2s ease;}
.nav-links a.nav-cta:hover{background:#FF5E1A;transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 28px rgba(242,68,5,.35);}
.nav-links a.nav-cta::after{display:none;}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px;}
.hamburger div{width:26px;height:3px;background:var(--white);border-radius:2px;transition:.3s;}

/* Sticky header - scrolled state */
.site-header.header-scrolled{height:108px;box-shadow:0 4px 20px rgba(0,0,0,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.site-header.header-scrolled nav{height:108px;}
.site-header.header-scrolled .logo{transform:scale(.78);transform-origin:left center;top:-86px;}
.site-header.header-scrolled .nav-cta{padding:9px 18px;font-size:.88rem;}

@media (max-width:1160px){
    .hamburger{display:flex;}
    .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--menu-grad-dark);flex-direction:column;align-items:flex-start;padding:20px 24px;gap:18px;border-top:1px solid rgba(255,255,255,.15);}
    .nav-links.active{display:flex;}
    .nav-cta{width:100%;text-align:center;}
    .top-contact-row{justify-content:center;text-align:center;gap:20px;}
    .site-header{height:96px;}
    .site-header nav{height:96px;padding-left:255px;}
    .logo{top:-40px;left:-15px;}
    .logo img.logo-img{height:172px;}

    /* Neutralize the desktop scrolled-header behavior at mobile widths.
       .site-header.header-scrolled normally shrinks + repositions the logo
       (transform:scale(.78), top:-86px) as you scroll on desktop. That
       rule has equal-or-higher specificity than the plain mobile `.site-header`
       rules above, so without this override it kept winning after scroll
       and pushed the mobile logo out of place. This block matches its
       specificity and comes later in source order, so it wins instead. */
    .site-header.header-scrolled{height:96px;}
    .site-header.header-scrolled nav{height:96px;}
    .site-header.header-scrolled .logo{top:-40px;left:-15px;transform:none;}
}


/* ==========================================================================
   Section Helpers (shared across all pages)
   ========================================================================== */
.section-eyebrow{color:var(--teal-500);text-transform:uppercase;letter-spacing:2px;font-size:.8rem;font-weight:700;text-align:center;margin-bottom:12px;}
.section-eyebrow--light{color:var(--teal-300);}
h2.left-align{text-align:left;}
h2.left-align::after{margin-left:0;}
h2.light{color:var(--white);}
.section-desc{text-align:center;max-width:680px;margin:0 auto 48px;color:var(--gray-700);font-size:1rem;line-height:1.6;}
.section-desc--light{color:var(--gray-300);}

/* ==========================================================================
   Scroll Reveal Animation Primitives (used by scroll-reveal.js)
   ========================================================================== */
.animate-ready [data-animate="left"]{opacity:0;transform:translateX(-24px);transition:opacity .6s ease-out,transform .6s ease-out;}
.animate-ready [data-animate="right"]{opacity:0;transform:translateX(24px);transition:opacity .6s ease-out,transform .6s ease-out;}
.animate-ready [data-animate="scale"]{opacity:0;transform:scale(.85);transition:opacity .6s ease-out,transform .6s ease-out;}
[data-animate="left"].in-view,[data-animate="right"].in-view,[data-animate="scale"].in-view{opacity:1;transform:translate(0) scale(1);}
[data-delay="1"].in-view{transition-delay:.05s;}
[data-delay="2"].in-view{transition-delay:.15s;}
[data-delay="3"].in-view{transition-delay:.25s;}
[data-delay="4"].in-view{transition-delay:.35s;}
[data-delay="5"].in-view{transition-delay:.45s;}
[data-delay="6"].in-view{transition-delay:.55s;}

/* ==========================================================================
   Footer
   ========================================================================== */
footer{background:var(--navy-950);color:var(--gray-300);padding:60px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr 1.05fr;gap:34px;padding-bottom:40px;border-bottom:1px solid var(--navy-700);}

/* Footer logo lockup (also used in header) */
.logo-lockup{display:flex;align-items:center;gap:14px;text-decoration:none;}
.logo-lockup .logo-icon{height:66px;width:auto;}
.logo-word{display:flex;flex-direction:column;line-height:1.05;}
.logo-word strong{display:block;font-size:1.55rem;font-weight:800;letter-spacing:.5px;color:var(--white);}
.logo-word strong.teal{color:var(--teal-300);}

/* Footer-specific logo: 50% larger than previous 48px = 72px */
.footer-logo{margin-bottom:16px;}
.footer-logo .logo-icon{height:72px;}
.footer-logo .logo-word strong{font-size:1.5rem;}
.footer-tagline{font-size:.9rem;color:var(--gray-300);max-width:300px;line-height:1.5;margin-bottom:18px;}
.footer-hours{font-size:.82rem;color:rgba(255,255,255,.5);line-height:1.6;}
.footer-hours strong{color:var(--gray-300);font-size:.84rem;}

/* Footer columns */
.footer-col h4{color:var(--white);font-size:.9rem;margin-bottom:16px;text-transform:uppercase;letter-spacing:1.2px;font-weight:700;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:10px;}
.footer-col a{color:var(--gray-300);text-decoration:none;font-size:.88rem;transition:color .2s;display:inline-flex;align-items:center;gap:8px;}
.footer-col a:hover{color:var(--teal-300);}
.footer-icon{flex-shrink:0;opacity:.6;}

/* Social icons */
.footer-social{display:flex;gap:12px;margin-top:20px;}
.social-link{
    display:flex;align-items:center;justify-content:center;width:38px;height:38px;
    border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
    color:var(--gray-300);transition:background .2s,color .2s,transform .2s,border-color .2s;
}
.social-link:hover{background:rgba(19,167,179,.15);color:var(--teal-300);transform:translateY(-2px);border-color:rgba(19,167,179,.3);}

/* Footer bottom row */
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-size:.82rem;flex-wrap:wrap;gap:10px 24px;border-bottom:1px solid var(--navy-700);}
.footer-bottom a{text-decoration:none;color:var(--gray-300);transition:color .2s;}
.footer-bottom a:hover{color:var(--teal-300);}
.footer-bottom-left,.footer-bottom-center,.footer-bottom-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.footer-divider{color:rgba(255,255,255,.2);user-select:none;}

/* Footer closing */
.footer-closing{padding:18px 0 28px;text-align:center;font-size:.8rem;color:rgba(255,255,255,.4);}
.footer-closing p{margin:0 0 8px;}
.footer-attrib{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;}
.footer-attrib a{color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s;}
.footer-attrib a:hover{color:var(--teal-300);}

@media (max-width:900px){
    .footer-grid{grid-template-columns:1fr 1fr;}
    .footer-brand{grid-column:1 / -1;}
    .footer-bottom{justify-content:center;text-align:center;}
    .footer-bottom-left,.footer-bottom-center,.footer-bottom-right{justify-content:center;}
}
@media (max-width:560px){
    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column;align-items:center;}

    /* Compact mobile footer. Hides navigation columns and promotional
       links that duplicate the sticky mobile menu; keeps brand identity,
       contact, social and legal. CSS-only visibility - includes/footer.html
       markup is unchanged and remains the single source of footer content. */
    footer{padding-top:36px;}
    .footer-col:not(.footer-contact){display:none;}
    .footer-grid{gap:28px;padding-bottom:24px;}
    .footer-brand{text-align:center;}
    .footer-brand .footer-logo{justify-content:center;}
    .footer-brand .footer-tagline{margin-left:auto;margin-right:auto;}
    .footer-contact{text-align:center;}
    .footer-contact .footer-social{justify-content:center;}
    .footer-bottom{border-bottom:none;padding:16px 0 28px;}
    .footer-bottom-left span:first-child{display:none;}
    .footer-closing{display:none;}
}