/*
Theme Name: SKILX
Theme URI: https://skilx.io
Author: SKILX
Description: Custom block theme for SKILX — Learn anything for free.
Version: 0.2.2
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: skilx
*/

:root{
  --skx-ink:#05070a;
  --skx-navy:#071526;
  --skx-navy-2:#0a2037;
  --skx-cyan:#06e7f9;
  --skx-cyan-2:#00aeb8;
  --skx-cyan-soft:#e8fcfd;
  --skx-paper:#f7fafb;
  --skx-white:#ffffff;
  --skx-muted:#627083;
  --skx-line:#dce6eb;
  --skx-radius:22px;
  --skx-shadow:0 24px 60px rgba(3,18,31,.10);
  --skx-glow:0 0 42px rgba(6,231,249,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--skx-paper);color:var(--skx-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{text-decoration:none}
.skx-shell{width:min(1380px,calc(100% - 96px));margin-inline:auto}
.skx-section{padding:104px 0}
.skx-kicker{font-size:.76rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--skx-cyan-2)}
.skx-section-title{font-size:clamp(2.15rem,4.5vw,4.25rem);line-height:.98;letter-spacing:-.052em;margin:.45rem 0 1rem;max-width:980px}
.skx-section-copy{max-width:720px;color:var(--skx-muted);font-size:1.05rem;line-height:1.78}

.skx-header{position:sticky;top:0;z-index:50;background:rgba(5,7,10,.95);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.08)}
.skx-nav{display:flex;min-height:78px;align-items:center;justify-content:space-between;gap:28px}
.skx-logo{display:block;width:142px;height:auto}
.skx-nav-links{display:flex;align-items:center;gap:26px;font-size:.92rem;font-weight:720}
.skx-nav-links a{color:#d7e2ea;transition:color .18s ease}
.skx-nav-links a:hover{color:var(--skx-cyan)}
.skx-nav-cta{display:inline-flex;align-items:center;justify-content:center;padding:11px 17px;border-radius:999px;background:linear-gradient(135deg,var(--skx-cyan),#37f5ff);color:#021018!important;font-weight:900;box-shadow:0 8px 28px rgba(6,231,249,.18)}

.skx-hero{position:relative;overflow:hidden;padding:118px 0 94px;background:
  radial-gradient(circle at 82% 22%,rgba(6,231,249,.16),transparent 30%),
  radial-gradient(circle at 18% 88%,rgba(0,174,184,.12),transparent 28%),
  linear-gradient(145deg,#05070a 0%,#071526 58%,#06101b 100%);color:white}
.skx-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 90%)}
.skx-hero:after{content:"X";position:absolute;right:-.06em;top:-.18em;font-size:min(47vw,570px);line-height:1;font-weight:950;color:rgba(6,231,249,.06);letter-spacing:-.14em;pointer-events:none}
.skx-hero-inner{position:relative;z-index:2;max-width:none}
.skx-free-pill{display:inline-flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid rgba(6,231,249,.35);border-radius:999px;background:rgba(6,231,249,.08);color:#92f9ff;font-size:.75rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin-bottom:28px}
.skx-free-pill:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--skx-cyan);box-shadow:0 0 16px var(--skx-cyan)}
.skx-hero h1{font-size:clamp(3.45rem,7.8vw,7.65rem);line-height:.91;letter-spacing:-.075em;margin:0;max-width:1040px}
.skx-hero h1 span{background:linear-gradient(90deg,#fff 0%,var(--skx-cyan) 50%,#8df9ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.skx-hero-copy{max-width:860px;margin:34px 0 32px;font-size:clamp(1.06rem,1.7vw,1.28rem);line-height:1.7;color:#aebdca}
.skx-search{max-width:940px;padding:8px;background:white;border:1px solid rgba(255,255,255,.25);border-radius:18px;box-shadow:0 24px 65px rgba(0,0,0,.34)}
.skx-search .wp-block-search__inside-wrapper{border:0!important;padding:0!important;display:flex;gap:8px}
.skx-search input{min-height:58px;border:0!important;padding:0 18px!important;font-size:1rem;background:transparent!important;color:#071526!important}
.skx-search button{border:0!important;border-radius:13px!important;background:linear-gradient(135deg,#05ddea,#03bbc7)!important;color:#021018!important;font-weight:900!important;padding:0 25px!important}
.skx-hero-meta{display:flex;flex-wrap:wrap;gap:24px;margin-top:22px;color:#94a8b8;font-size:.88rem;font-weight:650}
.skx-hero-meta span:before{content:"✓";color:var(--skx-cyan);margin-right:7px;font-weight:900}

.skx-category-grid,.skx-course-grid,.skx-skill-grid,.skx-step-grid,.skx-trust-grid{display:grid;gap:24px}
.skx-category-grid{grid-template-columns:repeat(4,1fr);margin-top:44px}
.skx-category-card{position:relative;display:block;padding:28px;border-radius:18px;background:white;border:1px solid var(--skx-line);color:var(--skx-ink);font-weight:850;transition:.22s ease;overflow:hidden}
.skx-category-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--skx-cyan),var(--skx-cyan-2));transform:scaleX(0);transform-origin:left;transition:.22s ease}
.skx-category-card span{display:block;margin-top:9px;color:var(--skx-muted);font-size:.88rem;font-weight:550;line-height:1.55}
.skx-category-card:hover{transform:translateY(-4px);border-color:#bfeef0;box-shadow:var(--skx-shadow)}
.skx-category-card:hover:before{transform:scaleX(1)}

.skx-dark{background:linear-gradient(160deg,#05070a,#071526);color:white}
.skx-dark .skx-kicker{color:#7ef7fc}
.skx-dark .skx-section-copy{color:#9fb0bf}
.skx-course-grid{grid-template-columns:repeat(3,1fr);margin-top:46px}
.skx-course-card{overflow:hidden;border-radius:22px;background:#0a1623;border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 45px rgba(0,0,0,.18);transition:.22s ease}
.skx-course-card:hover{transform:translateY(-4px);border-color:rgba(6,231,249,.32);box-shadow:0 24px 62px rgba(0,0,0,.28),var(--skx-glow)}
.skx-course-cover{aspect-ratio:16/9;padding:22px;background:linear-gradient(135deg,#04111d,#06dce9);display:flex;align-items:flex-start;justify-content:space-between;position:relative;overflow:hidden}
.skx-course-cover:after{content:"X";position:absolute;right:-12px;bottom:-52px;font-size:10rem;font-weight:950;color:rgba(255,255,255,.13);line-height:1}
.skx-course-cover.alt{background:linear-gradient(135deg,#072238,#00b7c1)}
.skx-course-cover.warm{background:linear-gradient(135deg,#06101b,#116779)}
.skx-badge{position:relative;z-index:2;display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:#06101b;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.skx-course-body{padding:26px}
.skx-course-body h3{margin:7px 0 12px;font-size:1.25rem;line-height:1.28}
.skx-course-body p{margin:0;color:#9fb0bf;line-height:1.62;font-size:.92rem}
.skx-course-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;color:#d6e4eb;font-size:.77rem;font-weight:700}

.skx-skill-grid{grid-template-columns:repeat(4,1fr);margin-top:44px}
.skx-skill-card{position:relative;min-height:195px;padding:28px;border-radius:20px;background:white;border:1px solid var(--skx-line);display:flex;flex-direction:column;justify-content:flex-end;color:var(--skx-ink);overflow:hidden;transition:.22s ease}
.skx-skill-card:before{content:"X";position:absolute;right:4px;top:-30px;font-size:8.6rem;font-weight:950;color:rgba(0,174,184,.08);line-height:1}
.skx-skill-card:hover{transform:translateY(-4px);border-color:#bdebed;box-shadow:var(--skx-shadow)}
.skx-skill-card strong{position:relative;font-size:1.2rem}
.skx-skill-card span{position:relative;margin-top:7px;color:var(--skx-muted);font-size:.84rem}

.skx-step-grid{grid-template-columns:repeat(3,1fr);margin-top:46px}
.skx-step{padding:34px;border-top:3px solid var(--skx-cyan-2);background:#fff;border-radius:0 0 18px 18px}
.skx-step-number{font-size:3rem;font-weight:950;color:#bfeef1;letter-spacing:-.07em}
.skx-step h3{font-size:1.2rem;margin:13px 0 8px}
.skx-step p{color:var(--skx-muted);line-height:1.68;margin:0}

.skx-trust{background:linear-gradient(180deg,#eafcfd,#f7fafb)}
.skx-trust-grid{grid-template-columns:repeat(3,1fr);margin-top:44px}
.skx-trust-card{padding:31px;border-radius:19px;background:rgba(255,255,255,.82);border:1px solid rgba(0,174,184,.17);box-shadow:0 14px 34px rgba(5,30,45,.045)}
.skx-trust-card strong{display:block;font-size:1.04rem;margin-bottom:9px}
.skx-trust-card p{margin:0;color:var(--skx-muted);line-height:1.67;font-size:.92rem}

.skx-cta{position:relative;overflow:hidden;padding:98px 0;background:linear-gradient(120deg,#071526 0%,#08283b 60%,#006f7b 100%);color:white}
.skx-cta:after{content:"X";position:absolute;right:-40px;top:-115px;font-size:26rem;font-weight:950;color:rgba(6,231,249,.09);line-height:1}
.skx-cta-wrap{position:relative;z-index:2;display:flex;align-items:end;justify-content:space-between;gap:54px}
.skx-cta h2{font-size:clamp(2.5rem,6vw,5rem);line-height:.95;letter-spacing:-.055em;margin:0;max-width:840px}
.skx-button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 21px;border-radius:999px;background:var(--skx-cyan);color:#021018;font-weight:900;white-space:nowrap;box-shadow:0 12px 34px rgba(6,231,249,.17)}

.skx-footer{background:#05070a;color:white;padding:68px 0 30px;border-top:1px solid rgba(255,255,255,.06)}
.skx-footer-logo{display:block;width:150px;height:auto;margin-bottom:17px}
.skx-footer-grid{display:grid;grid-template-columns:minmax(360px,1.8fr) 1fr 1fr;gap:58px}
.skx-footer p,.skx-footer a{color:#91a2b0}
.skx-footer p{max-width:520px;line-height:1.68}
.skx-footer h4{margin:0 0 15px;color:white}
.skx-footer-links{display:grid;gap:10px}
.skx-footer-links a:hover{color:var(--skx-cyan)}
.skx-footer-bottom{margin-top:46px;padding-top:21px;border-top:1px solid rgba(255,255,255,.09);font-size:.82rem;color:#71818f}

/* Brand logo enforcement: dark sections use the white/cyan wordmark. */
.skx-header img,
.skx-footer img{
  content:url('/wp-content/themes/skilx/assets/skilx-logo-dark.svg')!important;
  display:block;
  height:auto!important;
  object-fit:contain;
}
.skx-header img{width:142px!important}
.skx-footer img{width:150px!important}
.skx-logo-on-light{content:url('/wp-content/themes/skilx/assets/skilx-logo-light.svg')!important}
.skx-logo-on-dark{content:url('/wp-content/themes/skilx/assets/skilx-logo-dark.svg')!important}

/* Desktop editorial alignment: use the width, don't stack every heading in the middle. */
@media(min-width:1101px){
  .skx-section>.skx-shell:has(>.skx-section-copy){
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);
    column-gap:clamp(56px,6vw,112px);
    align-items:end;
  }
  .skx-section>.skx-shell:has(>.skx-section-copy)>.skx-kicker,
  .skx-section>.skx-shell:has(>.skx-section-copy)>.skx-section-title{grid-column:1}
  .skx-section>.skx-shell:has(>.skx-section-copy)>.skx-section-copy{
    grid-column:2;
    grid-row:1 / span 2;
    align-self:end;
    max-width:560px;
    margin:0 0 1rem;
  }
  .skx-section>.skx-shell:has(>.skx-section-copy)>.skx-category-grid,
  .skx-section>.skx-shell:has(>.skx-section-copy)>.skx-course-grid,
  .skx-section>.skx-shell:has(>.skx-section-copy)>.skx-skill-grid,
  .skx-section>.skx-shell:has(>.skx-section-copy)>.skx-step-grid,
  .skx-section>.skx-shell:has(>.skx-section-copy)>.skx-trust-grid{grid-column:1 / -1}
}

@media(max-width:1100px){
  .skx-shell{width:min(100% - 56px,1180px)}
  .skx-section{padding:84px 0}
  .skx-category-grid,.skx-skill-grid{grid-template-columns:repeat(2,1fr)}
  .skx-course-grid,.skx-step-grid,.skx-trust-grid{grid-template-columns:1fr}
  .skx-nav-links a:not(.skx-nav-cta){display:none}
  .skx-cta-wrap{display:block}.skx-cta .skx-button{margin-top:30px}
  .skx-footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .skx-shell{width:min(100% - 34px,1180px)}
  .skx-section{padding:66px 0}
  .skx-nav{min-height:70px}
  .skx-logo{width:122px}
  .skx-header img{width:122px!important}
  .skx-nav-cta{padding:10px 14px;font-size:.85rem}
  .skx-hero{padding:72px 0 60px}
  .skx-hero h1{font-size:clamp(3rem,16vw,5rem)}
  .skx-search .wp-block-search__inside-wrapper{display:block}
  .skx-search button{width:100%;min-height:50px;margin-top:6px}
  .skx-category-grid,.skx-skill-grid,.skx-footer-grid{grid-template-columns:1fr}
  .skx-category-card{padding:21px}
}