/*
Theme Name: SKYBRAND studio
Theme URI: https://skybrandstudio.cz
Author: SKYBRAND studio
Description: Vlastní téma pro SKYBRAND studio. One-page web skládaný z ACF Flexible Content sekcí (hero, tým, služby, případové studie, kontakt). Brand fonty Panel Sans + Neue Montreal, 3 barvy z manuálu + bílá.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: skybrand
*/

        /* ========================================
           BRAND FONTS — Panel Sans (nadpisy) + Neue Montreal (text)
           ======================================== */
        @font-face { font-family:'Panel Sans'; src:url('assets/fonts/fonnts.com-Panel_Sans_Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
        @font-face { font-family:'Panel Sans'; src:url('assets/fonts/fonnts.com-Panel_Sans_Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
        @font-face { font-family:'Panel Sans'; src:url('assets/fonts/fonnts.com-Panel_Sans_Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
        @font-face { font-family:'Panel Sans'; src:url('assets/fonts/fonnts.com-Panel_Sans_Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
        @font-face { font-family:'Panel Sans'; src:url('assets/fonts/fonnts.com-Panel_Sans_Black.otf') format('opentype'); font-weight:900; font-style:normal; font-display:swap; }
        @font-face { font-family:'Panel Sans'; src:url('assets/fonts/fonnts.com-Panel_Sans_Medium_Italic.otf') format('opentype'); font-weight:500; font-style:italic; font-display:swap; }
        @font-face { font-family:'Panel Sans'; src:url('assets/fonts/fonnts.com-Panel_Sans_Bold_Italic.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap; }

        @font-face { font-family:'Neue Montreal'; src:url('assets/fonts/NeueMontreal-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
        @font-face { font-family:'Neue Montreal'; src:url('assets/fonts/NeueMontreal-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
        @font-face { font-family:'Neue Montreal'; src:url('assets/fonts/NeueMontreal-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
        @font-face { font-family:'Neue Montreal'; src:url('assets/fonts/NeueMontreal-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
        @font-face { font-family:'Neue Montreal'; src:url('assets/fonts/NeueMontreal-Italic.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }

        /* ========================================
           BRAND COLORS — pouze 3 barvy z manuálu + bílá
           ======================================== */
        :root {
            --green: #0B2B1F;       /* tmavá zelená */
            --green-deep: #071c14;  /* tmavší odstín zelené (hovery, hloubka) */
            --lime: #D4F53C;        /* lime accent */
            --pink: #D4A8E8;        /* pink / lavender */
            --pink-soft: #EEDDF6;   /* světlý odstín pink — pozadí sekce */
            --white: #FFFFFF;
            --off: #FBFAF8;         /* jemně teplá bílá pro odlišení sekcí */

            --text: #0B2B1F;
            --text-muted: rgba(11,43,31,0.62);

            --font-head: 'Panel Sans', system-ui, sans-serif;
            --font-body: 'Neue Montreal', system-ui, sans-serif;

            --radius: 22px;
            --radius-sm: 14px;
            --shadow: 0 6px 30px rgba(11,43,31,0.08);
            --shadow-lg: 0 18px 56px rgba(11,43,31,0.16);
        }

        /* ========================================
           RESET & BASE
           ======================================== */
        *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior:smooth; font-size:16px; }
        body {
            font-family:var(--font-body);
            background:var(--white);
            color:var(--text);
            line-height:1.6;
            overflow-x:hidden;
            -webkit-font-smoothing:antialiased;
        }
        a { text-decoration:none; color:inherit; }
        img { max-width:100%; display:block; }

        /* ========================================
           NAVIGATION
           ======================================== */
        .nav {
            position:fixed; top:0; left:0; width:100%;
            padding:1rem 3rem;
            display:flex; align-items:center; justify-content:space-between;
            z-index:1000; transition:padding .35s ease, box-shadow .35s ease, background .35s ease;
            background:rgba(255,255,255,0.82);
            backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
        }
        .nav.scrolled { padding:0.6rem 3rem; box-shadow:0 1px 20px rgba(11,43,31,0.07); }
        .nav-logo img { height:26px; width:auto; transition:transform .3s ease; }
        .nav-logo:hover img { transform:scale(1.03); }

        .nav-links { display:flex; align-items:center; gap:2.4rem; list-style:none; }
        .nav-links a {
            font-family:var(--font-body); font-size:0.92rem; font-weight:500;
            color:var(--text); position:relative; transition:color .3s ease;
        }
        .nav-links a::after {
            content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px;
            background:var(--lime); border-radius:1px; transition:width .3s ease;
        }
        .nav-links a:hover::after { width:100%; }

        .nav-cta {
            font-family:var(--font-head); font-size:0.88rem; font-weight:600;
            color:var(--green) !important; background:var(--lime);
            padding:0.55rem 1.4rem; border-radius:50px; transition:all .3s ease;
        }
        .nav-cta:hover { background:var(--green); color:var(--white) !important; transform:translateY(-2px); }
        .nav-cta::after { display:none !important; }

        .nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1001; }
        .nav-hamburger span { width:26px; height:2px; background:var(--green); transition:all .3s ease; }
        .nav-hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
        .nav-hamburger.open span:nth-child(2){ opacity:0; }
        .nav-hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

        /* ========================================
           HERO
           ======================================== */
        .hero {
            min-height:100vh; background:var(--white);
            display:flex; flex-direction:column; justify-content:center; align-items:center;
            position:relative; overflow:hidden; padding:9rem 3rem 4rem; text-align:center;
        }
        .hero-deco { position:absolute; border-radius:50%; filter:blur(90px); opacity:0.18; pointer-events:none; }
        .hero-deco-1 { width:480px; height:480px; background:var(--lime); top:-120px; right:-120px; }
        .hero-deco-2 { width:420px; height:420px; background:var(--pink); bottom:-100px; left:-120px; }

        .hero-content { position:relative; z-index:2; max-width:920px; }

        /* 4 hesla nahoře */
        .hero-words {
            display:flex; justify-content:center; flex-wrap:wrap; gap:0.6rem 1.4rem;
            margin-bottom:2.2rem; opacity:0; animation:fadeUp .8s ease .15s forwards;
        }
        .hero-words span {
            font-family:var(--font-head); font-size:0.82rem; font-weight:600;
            letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted);
            display:flex; align-items:center; gap:1.4rem;
        }
        .hero-words span:not(:last-child)::after {
            content:''; width:6px; height:6px; border-radius:50%; background:var(--lime);
        }

        .hero-title {
            font-family:var(--font-head); font-weight:900;
            font-size:clamp(2.6rem, 6.6vw, 5.4rem); line-height:1.05;
            letter-spacing:-0.02em; color:var(--green); margin-bottom:1.6rem;
        }
        .hero-title .accent { color:var(--pink); font-style:italic; font-weight:700; }

        .hero-subtitle {
            font-family:var(--font-body); font-weight:400; font-size:1.18rem;
            color:var(--text-muted); max-width:560px; margin:0 auto 2.6rem; line-height:1.7;
            opacity:0; animation:fadeUp .8s ease .35s forwards;
        }
        .hero-subtitle strong { color:var(--green); font-weight:500; }

        .hero-buttons {
            display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
            opacity:0; animation:fadeUp .8s ease .55s forwards;
        }

        .btn {
            font-family:var(--font-head); font-size:0.98rem; font-weight:600;
            padding:1rem 2.2rem; border-radius:50px; cursor:pointer; border:none;
            transition:all .35s ease; display:inline-flex; align-items:center; gap:0.6rem;
        }
        .btn-primary { background:var(--green); color:var(--white); }
        .btn-primary:hover { background:var(--lime); color:var(--green); transform:translateY(-2px); box-shadow:0 10px 30px rgba(212,245,60,0.4); }
        .btn-outline { background:transparent; color:var(--green); border:1.5px solid var(--green); }
        .btn-outline:hover { background:var(--green); color:var(--white); transform:translateY(-2px); }
        .btn .arrow { font-size:1.15rem; transition:transform .3s ease; }
        .btn:hover .arrow { transform:translateX(4px); }

        /* smajlík v hero */
        .hero-smiley {
            width:54px; margin:2.8rem auto 0; opacity:0;
            animation:fadeUp .8s ease .8s forwards, floaty 4s ease-in-out 1.2s infinite;
        }
        @keyframes floaty { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

        /* ========================================
           SECTION BASE
           ======================================== */
        section { padding:6.5rem 3rem; }
        .container { max-width:1200px; margin:0 auto; }

        .section-tag {
            font-family:var(--font-head); font-size:0.76rem; font-weight:600;
            letter-spacing:0.16em; text-transform:uppercase; color:var(--green);
            margin-bottom:0.9rem; display:inline-flex; align-items:center; gap:0.55rem;
        }
        .section-tag::before { content:''; width:26px; height:2px; background:var(--lime); border-radius:1px; }
        .section-title {
            font-family:var(--font-head); font-weight:700;
            font-size:clamp(2rem, 4vw, 3.1rem); line-height:1.12; letter-spacing:-0.02em;
            margin-bottom:1rem; color:var(--green);
        }
        .section-desc { font-size:1.06rem; font-weight:400; line-height:1.75; max-width:600px; color:var(--text-muted); }

        .reveal { opacity:0; transform:translateY(30px); transition:all .7s cubic-bezier(0.22,1,0.36,1); }
        .reveal.visible { opacity:1; transform:translateY(0); }

        /* ========================================
           TEAM — Kdo jsme
           ======================================== */
        .team { background:var(--white); }
        .team-header { text-align:center; margin-bottom:3.5rem; }
        .team-header .section-tag { display:inline-flex; }
        .team-header .section-tag::before { display:none; }
        .team-header .section-desc { margin:0 auto; }

        .team-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2.2rem; max-width:820px; margin:0 auto; }
        .team-card {
            border-radius:var(--radius); overflow:hidden; background:var(--white);
            box-shadow:var(--shadow); transition:transform .4s ease, box-shadow .4s ease;
        }
        .team-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
        .team-photo { aspect-ratio:1/1; overflow:hidden; }
        .team-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .6s ease; }
        .team-card:hover .team-photo img { transform:scale(1.05); }
        .team-info { padding:1.6rem 1.8rem 1.9rem; }
        .team-info h3 { font-family:var(--font-head); font-size:1.3rem; font-weight:700; color:var(--green); margin-bottom:0.2rem; }
        .team-info .role { font-family:var(--font-head); font-size:0.85rem; font-style:italic; font-weight:500; color:var(--pink); margin-bottom:0.8rem; }
        .team-info p { font-size:0.9rem; color:var(--text-muted); line-height:1.6; }

        /* ========================================
           SERVICES — S čím vám pomůžeme (foto karty + filtr, rozbalovací)
           ======================================== */
        .services { background:var(--off); }
        .services-header { text-align:center; margin-bottom:3.5rem; }
        .services-header .section-tag { display:inline-flex; }
        .services-header .section-tag::before { display:none; }
        .services-header .section-desc { margin:0.4rem auto 0; }

        .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }

        .svc-card {
            position:relative; border-radius:var(--radius); overflow:hidden;
            min-height:300px; display:flex; flex-direction:column; justify-content:flex-end;
            color:var(--white); cursor:pointer; isolation:isolate;
            box-shadow:var(--shadow); transition:transform .4s ease, box-shadow .4s ease;
        }
        .svc-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
        .svc-bg { position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; transition:transform .6s ease; }
        .svc-card:hover .svc-bg { transform:scale(1.06); }
        /* zelený brandový filtr přes fotku */
        .svc-card::before {
            content:''; position:absolute; inset:0; z-index:-1;
            background:linear-gradient(180deg, rgba(11,43,31,0.30) 0%, rgba(11,43,31,0.78) 60%, rgba(7,28,20,0.94) 100%);
        }
        .svc-card.span-2 { grid-column:span 2; }

        .svc-content { padding:1.8rem; }
        .svc-icon {
            width:50px; height:50px; border-radius:var(--radius-sm); margin-bottom:1rem;
            background:rgba(212,245,60,0.16); display:flex; align-items:center; justify-content:center;
        }
        .svc-icon img { width:28px; height:28px; filter:brightness(0) invert(1); }
        .svc-card h3 { font-family:var(--font-head); font-size:1.32rem; font-weight:700; margin-bottom:0.5rem; line-height:1.2; }
        .svc-sub { font-size:0.92rem; color:rgba(255,255,255,0.82); line-height:1.55; }

        .svc-full {
            max-height:0; overflow:hidden; opacity:0;
            transition:max-height .5s ease, opacity .4s ease, margin .4s ease;
        }
        .svc-full p { font-size:0.9rem; color:rgba(255,255,255,0.78); line-height:1.65; }
        .svc-card.open .svc-full { max-height:340px; opacity:1; margin-top:0.9rem; }

        .svc-toggle {
            margin-top:1.1rem; align-self:flex-start;
            font-family:var(--font-head); font-size:0.84rem; font-weight:600;
            color:var(--green); background:var(--lime); border:none; cursor:pointer;
            padding:0.55rem 1.2rem; border-radius:50px;
            display:inline-flex; align-items:center; gap:0.5rem; transition:all .3s ease;
        }
        .svc-toggle:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(212,245,60,0.35); }
        .svc-toggle .pm { font-size:1.1rem; line-height:1; transition:transform .3s ease; }
        .svc-card.open .svc-toggle .pm { transform:rotate(45deg); }

        /* ========================================
           WORK / CASE STUDIES — fialová inverze
           ======================================== */
        .work { background:var(--pink-soft); }
        .work-header { text-align:center; margin-bottom:3.5rem; }
        .work-header .section-tag { display:inline-flex; color:var(--green); }
        .work-header .section-tag::before { background:var(--green); display:none; }
        .work-header .section-desc { margin:0.4rem auto 0; }

        .work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
        .work-card {
            background:var(--white); border-radius:var(--radius); overflow:hidden;
            box-shadow:var(--shadow); transition:transform .4s ease, box-shadow .4s ease;
            display:flex; flex-direction:column;
        }
        .work-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
        .work-photo { aspect-ratio:4/3; overflow:hidden; position:relative; }
        .work-photo img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
        .work-card:hover .work-photo img { transform:scale(1.06); }
        .work-platform {
            position:absolute; top:0.9rem; left:0.9rem;
            font-family:var(--font-head); font-size:0.7rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
            background:var(--lime); color:var(--green); padding:0.35rem 0.8rem; border-radius:50px;
        }
        .work-body { padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; flex-grow:1; }
        .work-body h3 { font-family:var(--font-head); font-size:1.2rem; font-weight:700; color:var(--green); margin-bottom:0.4rem; }
        .work-body p { font-size:0.9rem; color:var(--text-muted); line-height:1.6; flex-grow:1; }
        .work-link {
            margin-top:1.2rem; font-family:var(--font-head); font-size:0.88rem; font-weight:600;
            color:var(--green); display:inline-flex; align-items:center; gap:0.45rem; transition:gap .3s ease;
        }
        .work-card:hover .work-link { gap:0.8rem; }
        .work-note { text-align:center; margin-top:2.2rem; font-size:0.86rem; color:var(--text-muted); font-style:italic; }

        /* ========================================
           CONTACT — tmavě zelené pozadí
           ======================================== */
        .contact { background:var(--green); color:var(--white); }
        .contact .container { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
        .contact .section-tag { color:var(--lime); }
        .contact .section-tag::before { background:var(--lime); }
        .contact .section-title { color:var(--white); margin-bottom:1.4rem; }
        .contact-info .section-desc { color:rgba(255,255,255,0.7); margin-bottom:2.4rem; }

        .contact-details { display:flex; flex-direction:column; gap:1.3rem; }
        .contact-detail { display:flex; align-items:flex-start; gap:1rem; }
        .contact-detail-icon {
            width:44px; height:44px; border-radius:var(--radius-sm); flex-shrink:0;
            background:rgba(212,245,60,0.14); color:var(--lime);
            display:flex; align-items:center; justify-content:center; font-size:1.1rem;
        }
        .contact-detail-text h4 { font-family:var(--font-head); font-size:0.85rem; font-weight:600; color:var(--white); margin-bottom:0.25rem; letter-spacing:0.04em; text-transform:uppercase; }
        .contact-detail-text a, .contact-detail-text p { font-size:0.95rem; color:rgba(255,255,255,0.8); transition:color .3s ease; display:block; }
        .contact-detail-text a:hover { color:var(--lime); }

        .contact-socials { display:flex; gap:0.7rem; margin-top:2rem; }
        .contact-socials a {
            width:44px; height:44px; border:1.5px solid rgba(255,255,255,0.18); border-radius:50%;
            display:flex; align-items:center; justify-content:center; color:var(--white); transition:all .3s ease;
        }
        .contact-socials a:hover { background:var(--lime); border-color:var(--lime); color:var(--green); transform:translateY(-2px); }

        .contact-form { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius); padding:2.4rem; }
        .form-group { margin-bottom:1.1rem; }
        .form-group label { display:block; font-family:var(--font-head); font-size:0.82rem; font-weight:600; color:rgba(255,255,255,0.85); margin-bottom:0.4rem; }
        .form-group input, .form-group textarea {
            width:100%; padding:0.9rem 1.1rem; border:1.5px solid rgba(255,255,255,0.15);
            border-radius:var(--radius-sm); font-family:var(--font-body); font-size:0.92rem;
            color:var(--white); background:rgba(255,255,255,0.04); outline:none; transition:border-color .3s ease, box-shadow .3s ease;
        }
        .form-group input::placeholder, .form-group textarea::placeholder { color:rgba(255,255,255,0.4); }
        .form-group input:focus, .form-group textarea:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(212,245,60,0.18); }
        .form-group textarea { resize:vertical; min-height:120px; }
        .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
        .form-submit {
            width:100%; padding:1rem; font-family:var(--font-head); font-size:0.96rem; font-weight:600;
            background:var(--lime); color:var(--green); border:none; border-radius:var(--radius-sm);
            cursor:pointer; transition:all .3s ease; margin-top:0.4rem;
        }
        .form-submit:hover { background:var(--white); transform:translateY(-2px); }
        .form-submit:disabled { opacity:0.6; cursor:default; transform:none; }

        /* Honeypot — skryté pole pro boty */
        .hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

        /* GDPR souhlas */
        .form-consent { display:flex; align-items:flex-start; gap:0.6rem; margin:0.2rem 0 1.1rem; cursor:pointer; }
        .form-consent input { width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:var(--lime); cursor:pointer; }
        .form-consent span { font-size:0.82rem; color:rgba(255,255,255,0.7); line-height:1.5; }

        /* Stavová hláška formuláře */
        .form-status { margin-top:0.9rem; font-size:0.9rem; font-weight:500; min-height:1.2em; }
        .form-status.is-ok { color:var(--lime); }
        .form-status.is-err { color:#ffb3b3; }

        /* ========================================
           FOOTER
           ======================================== */
        .footer { background:var(--green-deep); padding:3.5rem 3rem 2rem; color:var(--white); }
        .footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:3rem; margin-bottom:2.6rem; }
        .footer-brand img { height:26px; width:auto; filter:brightness(0) invert(1); }
        .footer-brand p { font-size:0.9rem; color:rgba(255,255,255,0.5); line-height:1.7; margin-top:1.1rem; max-width:320px; }
        .footer-col h4 { font-family:var(--font-head); font-size:0.78rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:1.1rem; }
        .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:0.65rem; }
        .footer-col a { font-size:0.9rem; color:rgba(255,255,255,0.6); transition:color .3s ease; }
        .footer-col a:hover { color:var(--lime); }
        .footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:1.8rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
        .footer-copy { font-size:0.78rem; color:rgba(255,255,255,0.3); }

        /* ========================================
           ANIMATIONS
           ======================================== */
        @keyframes fadeUp { from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } }

        /* ========================================
           RESPONSIVE
           ======================================== */
        @media (max-width:1024px){
            .services-grid { grid-template-columns:repeat(2,1fr); }
            .svc-card.span-2 { grid-column:span 1; }
            .work-grid { grid-template-columns:1fr; max-width:460px; margin:0 auto; }
            .contact .container { grid-template-columns:1fr; gap:3rem; }
            .footer-top { grid-template-columns:1fr 1fr; gap:2rem; }
        }
        @media (max-width:768px){
            section { padding:4.5rem 1.4rem; }
            .nav { padding:0.9rem 1.4rem; }
            .nav.scrolled { padding:0.7rem 1.4rem; }
            .nav-logo img { height:22px; }
            .nav-links {
                display:none; position:fixed; top:0; left:0; width:100%; height:100vh;
                background:var(--white); flex-direction:column; justify-content:center; gap:2rem; z-index:1000;
            }
            .nav-links.active { display:flex; }
            .nav-links a { font-size:1.4rem; }
            .nav-hamburger { display:flex; }
            .hero { padding:7rem 1.4rem 3.5rem; min-height:90vh; }
            .team-grid { grid-template-columns:1fr; max-width:380px; }
            .team-photo { aspect-ratio:4/3; }
            .services-grid { grid-template-columns:1fr; }
            .form-row { grid-template-columns:1fr; }
            .footer-top { grid-template-columns:1fr; gap:2rem; }
            .footer-bottom { flex-direction:column; text-align:center; }
        }
        @media (max-width:480px){
            .hero-buttons { flex-direction:column; align-items:stretch; }
            .btn { width:100%; justify-content:center; }
        }