/*
Theme Name: Sky Slider Solutions
Theme URI: https://example.com/
Author: Converted from Lovable design
Description: Custom WordPress conversion of the Sky Slider Solutions Lovable/TanStack design. Includes interactive split-door hero, services, gallery, expertise, coverage, blog styling, responsive navigation, and WordPress Customizer settings.
Version: 1.0.0
Text Domain: sky-slider-solutions
Requires at least: 6.0
Requires PHP: 7.4
*/

:root{--bg:#f7f8f8;--fg:#1e3040;--primary:#2e5b82;--accent:#b0cde0;--muted:#6d7d8a;--secondary:#edf1f4;--border:rgba(30,48,64,.12);--white:#fff;--max:1280px;--mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased}body.admin-bar .site-nav{top:32px}@media(max-width:782px){body.admin-bar .site-nav{top:46px}}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}.container{width:min(var(--max),calc(100% - 48px));margin:auto}.mono{font-family:var(--mono)}.eyebrow{display:block;margin:0 0 18px;font:500 10px/1.2 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}.section{padding:110px 0}.section.alt{background:rgba(237,241,244,.55)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;border-bottom:1px solid var(--border);padding-bottom:32px;margin-bottom:52px}.section-head h2{font-size:clamp(34px,5vw,58px);line-height:1;letter-spacing:-.04em;margin:0}.section-head p{max-width:56ch;color:var(--muted);line-height:1.7}.button{display:inline-flex;align-items:center;justify-content:center;padding:15px 26px;border:1px solid var(--primary);background:var(--primary);color:#fff;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:.25s}.button:hover{opacity:.9}.button.outline{background:transparent;color:var(--primary)}
.site-nav{position:fixed;z-index:1000;top:0;left:0;right:0;background:rgba(247,248,248,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}.nav-inner{height:80px;display:flex;align-items:center;gap:28px}.site-logo{display:flex;align-items:center;min-width:230px}.site-logo svg{width:220px;height:auto}.menu{margin-left:auto;display:flex;align-items:center;gap:30px;list-style:none;padding:0}.menu a{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}.menu a:hover{color:var(--fg)}.nav-actions{display:flex;align-items:center;gap:14px}.icon-link{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}.mobile-toggle{display:none;background:none;border:0;font-size:28px;color:var(--fg)}
.hero{height:100vh;min-height:640px;position:relative;overflow:hidden;padding-top:80px;color:#fff;cursor:ew-resize;user-select:none}.hero-bg{position:absolute;inset:0;background:center/cover no-repeat;filter:blur(18px) brightness(.32);transform:scale(1.12)}.hero-gradient{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(30,48,64,.3),transparent 50%,rgba(30,48,64,.65))}.panel{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;z-index:10;will-change:transform}.panel.left{left:0}.panel.right{right:0}.panel img{position:absolute;top:0;width:100vw;height:100%;object-fit:cover;max-width:none}.panel.left img{left:0}.panel.right img{right:0}.hero-scrim{position:absolute;inset:0;background:var(--fg);z-index:15;pointer-events:none}.hero-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:32px;height:112px;border:1px solid rgba(255,255,255,.3);background:rgba(176,205,224,.92);z-index:25;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.4)}.hero-handle:before,.hero-handle:after{content:"";position:absolute;width:1px;height:38px;background:rgba(255,255,255,.72)}.hero-handle:before{transform:translateX(-3px)}.hero-handle:after{transform:translateX(3px)}.hero-content{position:relative;z-index:30;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 24px;cursor:default}.hero-content>div{max-width:980px}.hero h1{font-size:clamp(48px,7vw,94px);line-height:.92;letter-spacing:-.055em;margin:0 0 28px;text-shadow:0 4px 20px rgba(0,0,0,.55)}.hero p{font-size:clamp(15px,1.4vw,19px);line-height:1.7;max-width:54ch;margin:0 auto 28px;text-shadow:0 2px 10px rgba(0,0,0,.45)}.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.hero .button.outline{border-color:rgba(255,255,255,.45);background:rgba(46,91,130,.24);color:#fff}.drag-note{display:block;margin:0 0 28px;font:500 10px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border)}.service-card{background:var(--bg);padding:34px}.service-image{aspect-ratio:4/5;overflow:hidden;background:var(--secondary);margin-bottom:26px}.service-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}.service-card:hover img{transform:scale(1.035)}.service-top{display:flex;justify-content:space-between;gap:20px}.service-card h3{font-size:26px;margin:0 0 7px}.service-type,.service-body{color:var(--muted)}.service-type{font-size:14px;margin:0}.service-body{font-size:14px;line-height:1.75;max-width:54ch}.service-code{font:500 11px/1 var(--mono);color:var(--muted)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gallery-card{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--secondary)}.gallery-card.featured{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;min-height:650px}.gallery-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}.gallery-card:hover img{transform:scale(1.04)}.gallery-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(30,48,64,.82),transparent 65%)}.gallery-copy{position:absolute;left:0;right:0;bottom:0;padding:24px;color:#fff}.gallery-copy small{font:500 9px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}.gallery-copy strong{display:block;margin-top:10px;font-size:18px}
.expertise{background:var(--fg);color:#fff}.expertise .section-head{border-color:rgba(255,255,255,.12)}.expertise-track{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid rgba(255,255,255,.1)}.expertise-card{padding:48px;border-right:1px solid rgba(255,255,255,.1)}.expertise-card:last-child{border-right:0}.expertise-card .num{display:block;font:500 48px/1 var(--mono);color:rgba(176,205,224,.7);margin-bottom:32px}.expertise-card h3{margin:0 0 14px;font-size:21px}.expertise-card p{color:rgba(255,255,255,.62);font-size:14px;line-height:1.7}
.coverage-grid{display:grid;grid-template-columns:5fr 7fr;gap:70px}.coverage-grid h2{font-size:clamp(36px,5vw,58px);line-height:1;margin:0 0 24px}.coverage-grid p{color:var(--muted);line-height:1.7}.coverage-list{list-style:none;padding:0;margin:0;border-block:1px solid var(--border)}.coverage-list li{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--border)}.coverage-list li:last-child{border-bottom:0}.coverage-list span:last-child{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);text-align:right}
.site-footer{border-top:1px solid var(--border)}.footer-main{padding:90px 0}.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.footer-grid h2{font-size:clamp(34px,5vw,58px);line-height:1;margin:0 0 30px;max-width:620px}.footer-info{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}.footer-info h4{font:700 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}.footer-info p{color:var(--muted);font-size:14px;line-height:1.7;margin:0}.footer-bottom{border-top:1px solid var(--border);padding:26px 0;display:flex;justify-content:space-between;gap:24px;font:500 9px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.page-hero{padding:170px 0 80px;background:var(--secondary)}.page-hero h1{font-size:clamp(44px,7vw,78px);line-height:1;margin:0}.content-area{padding:80px 0}.entry-content{max-width:820px}.entry-content p,.entry-content li{font-size:17px;line-height:1.85;color:var(--muted)}.entry-content h2{font-size:38px;margin-top:48px}.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.post-card{border:1px solid var(--border);background:#fff}.post-card img{width:100%;aspect-ratio:16/10;object-fit:cover}.post-card-copy{padding:26px}.post-card h2{font-size:25px;margin:0 0 12px}.post-card p{color:var(--muted);font-size:14px;line-height:1.65}.post-meta{font:500 10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:12px}
@media(max-width:960px){.site-logo{min-width:0}.menu{display:none;position:absolute;top:80px;left:0;right:0;background:var(--bg);padding:24px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--border)}.menu.open{display:flex}.mobile-toggle{display:block}.nav-actions .quote{display:none}.section{padding:82px 0}.section-head{align-items:flex-start;flex-direction:column}.service-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:repeat(2,1fr)}.gallery-card.featured{grid-column:span 2;min-height:500px}.expertise-track{grid-template-columns:1fr 1fr}.coverage-grid,.footer-grid{grid-template-columns:1fr}.footer-info{grid-template-columns:1fr 1fr}.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.container{width:min(100% - 32px,var(--max))}.hero{min-height:660px}.hero h1{font-size:50px}.hero-actions{flex-direction:column}.hero-actions .button{width:100%}.gallery-grid,.post-grid,.expertise-track{grid-template-columns:1fr}.gallery-card.featured{grid-column:auto;min-height:420px}.footer-info{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.nav-inner{height:72px}.menu{top:72px}.site-logo svg{width:185px}.section-head h2{font-size:38px}}
 
/* BLOG PAGE - FINAL OVERRIDE */

.content-area .post-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
}

/* One post = large featured card */
.content-area .post-grid .post-card:only-child {
    grid-column: 1 / span 2 !important;
    width: 100% !important;
}

/* Landscape featured image */
.content-area .post-card img,
.content-area .post-card img.wp-post-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

@media (max-width: 960px) {
    .content-area .post-grid {
        grid-template-columns: 1fr !important;
    }

    .content-area .post-grid .post-card:only-child {
        grid-column: auto !important;
    }
}
/* ========================================
   SKY SLIDER SOLUTIONS
   FREE QUOTE / LEAD GENERATION SECTION
======================================== */

.quote-section {
    background: var(--fg);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

/* subtle Sky Slider blue accent */
.quote-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(176, 205, 224, .08);
    top: -180px;
    left: -180px;
    pointer-events: none;
}

.quote-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
    align-items: start;
    position: relative;
    z-index: 1;
}


/* ========================================
   LEFT SIDE
======================================== */

.quote-intro {
    padding-top: 12px;
}

.quote-intro .eyebrow {
    color: var(--accent);
}

.quote-intro h2 {
    color: var(--white);
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -.04em;
    margin: 18px 0 26px;
    max-width: 620px;
}

.quote-intro > p {
    color: rgba(255, 255, 255, .68);
    font-size: 16px;
    line-height: 1.8;
    max-width: 560px;
}


/* ========================================
   BENEFITS
======================================== */

.quote-benefits {
    margin: 34px 0;
    padding: 26px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.quote-benefits p {
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    line-height: 1.5;
    margin: 11px 0;
}


/* ========================================
   CALL CTA
======================================== */

.quote-call {
    margin-top: 30px;
}

.quote-call span {
    display: block;
    margin-bottom: 9px;

    font: 500 10px/1.4 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;

    color: var(--accent);
}

.quote-call a {
    display: inline-block;

    color: var(--white);

    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 600;

    text-decoration: none;

    transition: color .25s ease;
}

.quote-call a:hover {
    color: var(--accent);
}


/* ========================================
   WHITE FORM CARD
======================================== */

.quote-form-box {
    background: var(--white);
    color: var(--fg);

    padding: 48px;

    border: 1px solid rgba(255, 255, 255, .15);

    box-shadow: 0 25px 60px rgba(0, 0, 0, .18);
}

.quote-form-box h3 {
    color: var(--fg);

    font-size: 32px;
    line-height: 1.1;

    letter-spacing: -.025em;

    margin: 0 0 10px;
}

.quote-form-box > p {
    color: var(--muted);

    font-size: 14px;
    line-height: 1.7;

    margin: 0 0 32px;
}


/* ========================================
   CONTACT FORM 7
======================================== */

.sky-quote-form {
    width: 100%;
}

.sky-quote-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.sky-quote-form .form-field {
    margin-bottom: 20px;
}

.sky-quote-form label {
    display: block;

    margin-bottom: 8px;

    color: var(--fg);

    font: 600 10px/1.4 var(--mono);

    letter-spacing: .1em;
    text-transform: uppercase;
}


/* ========================================
   INPUTS
======================================== */

.sky-quote-form input[type="text"],
.sky-quote-form input[type="email"],
.sky-quote-form input[type="tel"],
.sky-quote-form input[type="number"],
.sky-quote-form input[type="date"],
.sky-quote-form select,
.sky-quote-form textarea {

    display: block;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    background: var(--bg);

    color: var(--fg);

    border: 1px solid var(--border);
    border-radius: 0;

    padding: 15px 16px;

    font-family: var(--sans);
    font-size: 14px;

    outline: none;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


/* Contact Form 7 wrappers */

.sky-quote-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}


/* Placeholder */

.sky-quote-form input::placeholder,
.sky-quote-form textarea::placeholder {
    color: var(--muted);
    opacity: .72;
}


/* Focus */

.sky-quote-form input:focus,
.sky-quote-form select:focus,
.sky-quote-form textarea:focus {

    background: var(--white);

    border-color: var(--primary);

    box-shadow: 0 0 0 2px rgba(46, 91, 130, .08);
}


/* Dropdown */

.sky-quote-form select {
    cursor: pointer;
}


/* Textarea */

.sky-quote-form textarea {
    min-height: 135px;
    resize: vertical;
}


/* ========================================
   PHOTO UPLOAD
======================================== */

.sky-quote-form input[type="file"] {

    display: block;

    width: 100%;

    box-sizing: border-box;

    background: var(--bg);

    border: 1px dashed rgba(46, 91, 130, .35);

    padding: 16px;

    color: var(--muted);

    font-family: var(--sans);
    font-size: 13px;
}

.sky-quote-form input[type="file"]::file-selector-button {

    background: var(--secondary);

    color: var(--primary);

    border: 1px solid var(--border);

    padding: 9px 13px;

    margin-right: 12px;

    font: 600 10px/1 var(--mono);

    letter-spacing: .08em;
    text-transform: uppercase;

    cursor: pointer;
}

.sky-quote-form small {

    display: block;

    margin-top: 7px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.5;
}


/* ========================================
   SUBMIT BUTTON
======================================== */

.sky-quote-form input[type="submit"] {

    display: flex;

    width: 100%;

    align-items: center;
    justify-content: center;

    border: 1px solid var(--primary);
    border-radius: 0;

    background: var(--primary);

    color: var(--white);

    padding: 17px 24px;

    cursor: pointer;

    font: 600 11px/1 var(--mono);

    letter-spacing: .14em;
    text-transform: uppercase;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.sky-quote-form input[type="submit"]:hover {

    background: var(--fg);

    border-color: var(--fg);

    color: var(--white);
}


/* ========================================
   CF7 LOADING SPINNER
======================================== */

.quote-form-box .wpcf7-spinner {
    margin: 14px auto 0;
    display: block;
}


/* ========================================
   SUCCESS / ERROR MESSAGES
======================================== */

.quote-form-box .wpcf7-response-output {

    margin: 22px 0 0 !important;

    padding: 14px 16px !important;

    border: 1px solid var(--border) !important;

    color: var(--fg);

    background: var(--secondary);

    font-size: 13px;
    line-height: 1.6;
}

.quote-form-box .wpcf7-not-valid-tip {

    color: #9a3d36;

    font-size: 11px;

    margin-top: 6px;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 960px) {

    .quote-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .quote-intro {
        max-width: 720px;
    }

    .quote-form-box {
        max-width: 720px;
        width: 100%;
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 600px) {

    .quote-section {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .quote-grid {
        gap: 38px;
    }

    .quote-intro h2 {
        font-size: 38px;
    }

    .quote-intro > p {
        font-size: 15px;
    }

    .quote-benefits {
        margin: 28px 0;
    }

    .quote-call a {
        font-size: 22px;
    }

    .quote-form-box {
        padding: 30px 22px;
    }

    .quote-form-box h3 {
        font-size: 27px;
    }

    .sky-quote-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .sky-quote-form .form-field {
        margin-bottom: 17px;
    }

    .sky-quote-form input[type="submit"] {
        padding: 17px 16px;
    }

}