/* Sultan Kite School – global look (GeneratePress + GenerateBlocks). Loaded via Code Snippets.
   Component styles live in GenerateBlocks global classes (site-build/gb/components.py). */
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url(https://sultankiteschool.com/wp-content/uploads/sks-fonts/oswald.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;src:url(https://sultankiteschool.com/wp-content/uploads/sks-fonts/roboto.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(https://sultankiteschool.com/wp-content/uploads/sks-fonts/montserrat.woff2) format('woff2')}

:root{--sks-coral:#FE7676;--sks-blue:#3A4EFF;--sks-grey:#DEDEDE;--sks-dark:#191918;--sks-card:#2A2A2A}
body{font-family:Roboto,sans-serif;font-size:18px;line-height:1.8;color:#000;background:var(--sks-dark)}
h1,h2,h3,h4,h5,h6{font-family:Oswald,sans-serif;font-weight:700}

/* Wind Status: Windy.app forecast block */
.sks-windy-wrap .sks-windy{min-height:420px;border-radius:14px;overflow:hidden;background:#0d2733}
.sks-windy-wrap .sks-windy+.sks-windy{margin-top:20px;min-height:180px}
.sks-windy-link{margin:14px 0 0;text-align:center;font-size:15px}
.sks-windy-link a{color:#14232e;font-weight:600}

/* Footer + Contact: Google Maps loads only on click (no Google request before) and a static Facebook card replaces
   the Facebook Page Plugin iframe (its timeline kept spinning; it also set Facebook cookies). No cookie banner needed. */
.sks-fmap iframe{display:block;border:0;border-radius:12px;filter:saturate(.85)}
.sks-mapload{align-items:center;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px;border:1px solid #333;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;font:inherit;gap:12px;height:250px;justify-content:center;padding:20px;text-align:center;transition:border-color .2s;width:100%}
.sks-mapload,.sks-mapload:hover,.sks-mapload:focus{background-color:#232322;color:#fff}
.sks-mapload:hover,.sks-mapload:focus-visible{border-color:var(--sks-coral)}
.sks-mapload:focus-visible{outline:2px solid var(--sks-coral);outline-offset:2px}
.sks-mapload-pin{align-items:center;background:var(--sks-coral);border-radius:50%;box-shadow:0 0 0 8px rgba(254,118,118,.18);display:inline-flex;height:52px;justify-content:center;transition:transform .2s;width:52px}
.sks-mapload:hover .sks-mapload-pin{transform:translateY(-3px)}
.sks-mapload-pin svg{fill:#fff;height:22px;width:22px}
.sks-mapload strong{display:block;font-size:16px;font-weight:600;line-height:1.3}
.sks-mapload small{color:#c9c9c9;display:block;font-size:13px;margin-top:4px}
/* Light variant: Contact map (450px) and the Windy.app forecast on /location/ (white card on the grey section) */
:is(.sks-map,.sks-windy-wrap) .sks-mapload{background-image:linear-gradient(rgba(0,17,74,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,17,74,.06) 1px,transparent 1px);border-color:#dde3ee;border-radius:15px;height:450px}
:is(.sks-map,.sks-windy-wrap) .sks-mapload,:is(.sks-map,.sks-windy-wrap) .sks-mapload:hover,:is(.sks-map,.sks-windy-wrap) .sks-mapload:focus{background-color:#eef1f7;color:#00114A}
:is(.sks-map,.sks-windy-wrap) .sks-mapload:hover,:is(.sks-map,.sks-windy-wrap) .sks-mapload:focus-visible{border-color:var(--sks-coral)}
:is(.sks-map,.sks-windy-wrap) .sks-mapload small{color:#4a5578}
.sks-windy-wrap .sks-mapload{height:360px}
.sks-windy-wrap .sks-mapload,.sks-windy-wrap .sks-mapload:hover,.sks-windy-wrap .sks-mapload:focus{background-color:#fff}
.sks-windy-wrap:focus{outline:none}
.sks-windy-wrap .sks-mapload~.sks-windy{display:none}
@media (max-width:767px){.sks-map .sks-mapload{height:320px}.sks-windy-wrap .sks-mapload{height:300px}}
.sks-fbcard{background:var(--sks-card);border:1px solid #333;border-radius:12px;display:block;max-width:320px;padding:18px;transition:border-color .2s}
.sks-fbcard,.sks-fbcard:hover,.sks-fbcard:focus{color:#c9c9c9;text-decoration:none}
.sks-fbcard:hover,.sks-fbcard:focus-visible{border-color:#1877F2}
.sks-fbcard:focus-visible{outline:2px solid var(--sks-coral);outline-offset:2px}
.sks-fbcard-head{align-items:center;display:flex;gap:12px}
.sks-fbcard-head img{background:#fff;border-radius:10px;flex-shrink:0;height:52px;object-fit:contain;padding:4px;width:52px}
.sks-fbcard-head strong{color:#fff;display:block;font-size:15px;line-height:1.3}
.sks-fbcard-head small{color:#9a9a9a;display:block;font-size:13px}
.sks-fbcard-txt{display:block;font-size:14px;line-height:1.6;margin:14px 0 16px}
.sks-fbcard-btn{align-items:center;background:#1877F2;border-radius:8px;color:#fff;display:flex;font-size:14px;font-weight:600;gap:8px;justify-content:center;padding:10px 14px;transition:background-color .2s}
.sks-fbcard:hover .sks-fbcard-btn,.sks-fbcard:focus-visible .sks-fbcard-btn{background:#0d65d9}
.sks-fbcard-btn svg{fill:currentColor;height:16px;width:16px}

/* ===== GeneratePress header (GP Premium Menu Plus: navigation as header + sticky) ===== */
.main-navigation.has-branding{position:absolute;top:0;left:0;right:0;z-index:100;background:transparent;transition:background-color .3s ease}
.admin-bar .main-navigation.has-branding{top:32px}
.main-navigation.has-branding .inside-navigation{max-width:1096px;padding:16px 20px;align-items:center}
.main-navigation .navigation-branding .site-logo{margin:0}
.main-navigation .navigation-branding img{width:176px;height:auto!important;max-height:none;padding:8px 10px;background:#fff;border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:width .3s ease}
.main-navigation .main-nav ul li a{position:relative;padding:0 9px;line-height:50px;font-family:Montserrat,sans-serif;font-size:15px;font-weight:700;letter-spacing:.8px;color:#fff}
.main-navigation .main-nav ul li a::after{content:'';position:absolute;left:9px;right:9px;bottom:6px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.main-navigation .main-nav ul li a:hover::after,.main-navigation .main-nav ul li a:focus-visible::after,.main-navigation .main-nav ul li.current-menu-item>a::after{transform:scaleX(1)}
.main-navigation .main-nav ul li a:focus-visible,.main-navigation .menu-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* sticky: dark bar, smaller logo */
.main-navigation.has-branding.navigation-stick,.main-navigation.has-branding.is_stuck{position:fixed;background:rgba(25,25,24,.94)}
.main-navigation.navigation-stick .navigation-branding img,.main-navigation.is_stuck .navigation-branding img{width:120px;padding:5px 7px}
.main-navigation.navigation-stick .inside-navigation,.main-navigation.is_stuck .inside-navigation{padding-top:8px;padding-bottom:8px}
/* pages without a hero */
.error404 .main-navigation.has-branding,.search .main-navigation.has-branding{position:relative;background:var(--contrast)}
@media (min-width:1025px) and (max-width:1099px){.main-navigation .navigation-branding img{width:120px}.main-navigation .main-nav ul li a{padding:0 6px;font-size:14px;letter-spacing:.4px}.main-navigation .main-nav ul li a::after{left:6px;right:6px}}
@media (min-width:1100px) and (max-width:1199px){.main-navigation .navigation-branding img{width:140px}.main-navigation .main-nav ul li a{padding:0 7px}.main-navigation .main-nav ul li a::after{left:7px;right:7px}}
/* mobile / tablet menu */
@media (max-width:1024px){
.main-navigation .navigation-branding img{width:132px;padding:6px 8px;border-radius:12px}
.main-navigation .menu-toggle{color:#fff;background:rgba(0,0,0,.45);border-radius:8px;padding:0 14px;line-height:44px;min-width:44px}
.main-navigation.toggled .main-nav>ul{background:var(--contrast);border-radius:0 0 12px 12px;padding:6px 0}
.main-navigation.toggled .main-nav ul li a{line-height:48px;padding:0 20px}
.main-navigation.toggled .main-nav ul li a::after{left:20px;right:auto;width:28px;bottom:8px}
.main-navigation.toggled .main-nav ul li.current-menu-item>a{color:var(--accent)}
}
@media (max-width:767px){.main-navigation .navigation-branding img{width:108px;padding:5px 7px;border-radius:10px}.main-navigation.has-branding .inside-navigation{padding:10px 12px}}
body:has(.main-navigation.toggled) .chaty-widget,body:has(.main-navigation.toggled) [id^="chaty-widget"]{display:none!important}

/* Contact: GB Pro form messages in brand colours (form styling = GB global class sks-form) + map */
.sks-form{--gb-form-message-success-background:#f2f4ff;--gb-form-message-success-border:#3a4eff;--gb-form-message-success-color:#191918;--gb-form-message-error-background:#fff1f1;--gb-form-message-error-border:#c9343d;--gb-form-message-error-color:#191918}
.sks-map iframe{display:block;width:100%;height:450px;border:0;border-radius:15px}
@media (max-width:767px){.sks-map iframe{height:320px}}

/* Home slider (GenerateBlocks + ~1 KB inline JS): crossfade, coral arrows, pause button (WCAG 2.2.2) */
.sks-slide{opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 0s linear 1s}
.sks-slide.is-active{opacity:1;visibility:visible;transition:opacity 1s ease}
.sks-slider-arrow,.sks-slider-pause{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;color:#fff;cursor:pointer;transition:background-color .3s}
.sks-slider-arrow{top:50%;width:60px;height:60px;margin-top:-30px;background:var(--sks-coral)}
.sks-slider-arrow svg{width:14px;height:22px}
.sks-prev{left:30px}.sks-prev svg{transform:rotate(180deg)}
.sks-next{right:30px}
.sks-slider-arrow:hover{background:var(--sks-blue)}
.sks-slider-pause{right:30px;bottom:30px;width:44px;height:44px;border:2px solid rgba(255,255,255,.85);background:rgba(0,17,74,.45)}
.sks-slider-pause:hover{background:var(--sks-blue)}
.sks-slider-arrow:focus-visible,.sks-slider-pause:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sks-i-pause{width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.sks-i-play{display:none;width:0;height:0;margin-left:3px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:12px solid currentColor}
.sks-slider-pause[aria-pressed=true] .sks-i-pause{display:none}
.sks-slider-pause[aria-pressed=true] .sks-i-play{display:block}
@media (max-width:1024px){.sks-slider-arrow{top:auto;bottom:30px;width:44px;height:44px;margin-top:0}.sks-prev{left:auto;right:142px}.sks-next{right:86px}}
@media (max-width:767px){.sks-slider-arrow,.sks-slider-pause{bottom:20px}.sks-prev{right:128px}.sks-next{right:72px}.sks-slider-pause{right:16px}}
@media (prefers-reduced-motion:reduce){.sks-slide,.sks-slide.is-active{transition:none}}

/* Single post (GP Elements: post hero + post footer): readable column on white */
.single-post .site-content{background:#fff}
.single-post .inside-article{max-width:900px;margin:0 auto;padding:60px 20px 80px}
.single-post .entry-content{color:#222;font-size:18px;line-height:1.8}
.single-post .entry-content h2{margin-top:1.6em}
@media (max-width:767px){.single-post .inside-article{padding:40px 16px 60px}.single-post .entry-content{font-size:17px}}

/* Lessons "Learning process": scroll reveal like the original timeline (card slides in, line drops in, number zooms in).
   The inline script adds .sks-tl-on (only with IntersectionObserver and no reduced motion) and .is-in per step. */
@keyframes sks-tl-left{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:none}}
@keyframes sks-tl-right{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}
@keyframes sks-tl-down{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sks-tl-zoom{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.sks-tl-on .sks-tl-item::before{transform-origin:top}
.sks-tl-on .sks-tl-item:not(.is-in)::before{transform:scaleY(0)}
.sks-tl-on .sks-tl-item:not(.is-in)>.sks-tl-card,.sks-tl-on .sks-tl-item:not(.is-in)>.sks-tl-num{opacity:0}
.sks-tl-on .sks-tl-item.is-in::before{animation:sks-tl-down .6s ease-out both}
.sks-tl-on .sks-tl-item.is-in>.sks-tl-card{animation:sks-tl-left .7s ease-out both}
.sks-tl-on .sks-tl-item.is-in:nth-child(even)>.sks-tl-card{animation-name:sks-tl-right}
.sks-tl-on .sks-tl-item.is-in>.sks-tl-num{animation:sks-tl-zoom .5s ease-out .3s both}
@media (max-width:767px){.sks-tl-on .sks-tl-item.is-in:nth-child(even)>.sks-tl-card{animation-name:sks-tl-left}}
@media (prefers-reduced-motion:reduce){.sks-tl-on .sks-tl-item::before,.sks-tl-on .sks-tl-item>*{animation:none!important;opacity:1!important;transform:none!important}}

/* Article photos: a portrait photo must not be taller than the screen (keeps its ratio, stays centred). */
.single-post .entry-content img{max-height:70vh;width:auto}

/* Home "Why riders choose us": round school photo; the blue crescent continues its circle (replaces the old corner image). */
.gb-element.sks-ring-photo{isolation:isolate;max-width:min(460px,84%);position:relative}
.sks-ring-photo::before{background:#34369D;border-radius:50%;content:"";height:112%;left:-1%;position:absolute;top:-1%;width:112%;z-index:-1}
.sks-ring-photo figure{margin:0}
.sks-ring-photo img{aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 10px #fff;display:block;height:auto;object-fit:cover;object-position:45% center;width:100%}