/* ============================================================
   Isentia Learn — homepage styles
   Everything is scoped under .ilearn (a wrapper div on the
   homepage) so it can't affect the parent theme's pages.
   Loaded only on the front page via functions.php.
   ============================================================ */

/* Design tokens (derived from isentia.com) */
:root{
  --ink:#0c0c24;          /* near-black headings */
  --indigo:#17153b;       /* deep brand navy (footer) */
  --blue:#2d40ef;         /* primary royal blue (CTAs, links) */
  --blue-strong:#1f2fd1;  /* hover */
  --violet:#7a00df;       /* Lumina accent */
  --pink:#f0568c;
  --teal:#17b8c9;
  --mint:#34e08a;
  --brightblue:#2e6be6;

  --lavender:#eef1f8;     /* light surface */
  --page:#f7f8fc;         /* page background */
  --white:#ffffff;
  --body:#43455a;         /* body text */
  --muted:#6b6d85;        /* secondary text */
  --border:#e6e8f2;       /* hairlines */
  --border-2:#dfe2ef;

  --grad-line:linear-gradient(90deg,var(--blue) 0%,var(--violet) 55%,var(--pink) 100%);
  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(23,21,59,.06), 0 4px 14px rgba(23,21,59,.05);
  --shadow-md:0 10px 30px rgba(23,21,59,.10), 0 2px 8px rgba(23,21,59,.06);
  --shadow-lg:0 24px 60px rgba(23,21,59,.16);
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Homepage background (safe: only the body marker, loaded on front page) */
body.ilearn-home{margin:0;background:var(--page);}
html{scroll-behavior:smooth;}

/* Base / reset — scoped to the wrapper */
.ilearn{
  font-family:"DM Sans",system-ui,-apple-system,sans-serif;
  color:var(--body);
  background:var(--page);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.ilearn *{box-sizing:border-box;}
.ilearn a{color:inherit;text-decoration:none;}
.ilearn img{max-width:100%;display:block;}
.ilearn h1,.ilearn h2,.ilearn h3,.ilearn h4{color:var(--ink);font-weight:600;line-height:1.12;letter-spacing:-.02em;margin:0;}
.ilearn p{margin:0;}
.ilearn form{margin:0;}
.ilearn ::selection{background:rgba(45,64,239,.16);}

.ilearn .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

.ilearn .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"DM Mono",monospace;font-weight:500;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);
}
.ilearn .eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad-line);}

/* ============ Buttons ============ */
.ilearn .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:500;font-size:15px;
  border-radius:999px;border:1.5px solid transparent;
  padding:12px 22px;cursor:pointer;transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
  white-space:nowrap;
}
.ilearn .btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(45,64,239,.28);}
.ilearn .btn-primary:hover{background:var(--blue-strong);transform:translateY(-1px);box-shadow:0 10px 24px rgba(45,64,239,.34);}
.ilearn .btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-2);}
.ilearn .btn-ghost:hover{border-color:var(--ink);}
.ilearn .btn-white{background:#fff;color:var(--ink);}
.ilearn .btn-white:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);}
.ilearn .btn:focus-visible,.ilearn a:focus-visible,.ilearn input:focus-visible,.ilearn button:focus-visible{outline:3px solid rgba(45,64,239,.4);outline-offset:2px;}

/* ============ Top strip ============ */
.ilearn .topbar{background:var(--lavender);font-size:13px;color:var(--muted);}
.ilearn .topbar .wrap{display:flex;justify-content:flex-end;align-items:center;gap:22px;height:38px;}
.ilearn .topbar a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);transition:color .15s;}
.ilearn .topbar a:hover{color:var(--ink);}

/* Language switcher (opens the WPGlobus language list) */
.ilearn .lang{position:relative;z-index:60;}
.ilearn .lang__toggle,.ilearn .lang--static{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-family:inherit;font-size:inherit;line-height:1;background:none;border:none;padding:0;cursor:pointer;}
.ilearn .lang__toggle:hover{color:var(--ink);}
.ilearn .lang--static{cursor:default;}
.ilearn .lang__caret{transition:transform .18s var(--ease);}
.ilearn .lang.is-open .lang__caret{transform:rotate(180deg);}
.ilearn .lang__menu{position:absolute;top:calc(100% + 8px);right:0;min-width:158px;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);}
.ilearn .lang__menu[hidden]{display:none;}
.ilearn .lang__opt{display:block;padding:8px 12px;border-radius:8px;color:var(--body);font-size:14px;white-space:nowrap;transition:background .12s,color .12s;}
.ilearn .lang__opt:hover{background:rgba(45,64,239,.06);color:var(--ink);}
.ilearn .lang__opt.is-current{color:var(--blue);font-weight:600;}

/* ============ Header ============ */
.ilearn .site-header{position:sticky;top:0;z-index:50;background:rgba(247,248,252,.85);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s,background .2s;}
.ilearn .site-header.scrolled{border-bottom-color:var(--border);box-shadow:0 6px 24px rgba(23,21,59,.05);background:rgba(255,255,255,.9);}
.ilearn .site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px;}

.ilearn .logo{display:flex;align-items:center;gap:11px;}
.ilearn .logo__mark{width:96px;height:26px;flex:none;color:#22225e;display:block;}
.ilearn .logo__mark--light{color:#fff;}
.ilearn .logo__tag{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);border:1.4px solid var(--border-2);border-radius:6px;padding:2px 7px;margin-left:2px;}

.ilearn .nav{display:flex;align-items:center;gap:6px;}
.ilearn .nav a{font-size:15px;color:var(--body);padding:9px 14px;border-radius:10px;transition:color .15s,background .15s;font-weight:500;}
.ilearn .nav a:hover{color:var(--ink);background:rgba(45,64,239,.06);}

.ilearn .header-actions{display:flex;align-items:center;gap:8px;}
.ilearn .header-actions .btn{height:36px;padding:0 16px;font-size:14px;box-sizing:border-box;}
.ilearn .menu-toggle{display:none;background:none;border:1.5px solid var(--border-2);border-radius:10px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center;color:var(--ink);}

/* Inner pages (article/archive/search) reuse this exact chrome, but the header
   isn't sticky there: sticky needs the full-page .ilearn wrapper that only the
   homepage has. On inner pages .ilearn--chrome wraps just the header/footer. */
.ilearn.ilearn--chrome{background:transparent;}
.ilearn.ilearn--chrome .site-header{position:static;}

/* ============ Hero ============ */
.ilearn .hero{position:relative;overflow:hidden;background:var(--white);border-bottom:1px solid var(--border);}
.ilearn .hero__aurora{position:absolute;inset:-20% -10% auto -10%;height:150%;pointer-events:none;z-index:0;filter:blur(70px);opacity:.55;}
.ilearn .blob{position:absolute;border-radius:50%;}
.ilearn .blob.b1{width:420px;height:420px;background:radial-gradient(circle at 30% 30%,var(--brightblue),transparent 70%);top:-90px;right:6%;animation:ilearn-drift1 18s ease-in-out infinite;}
.ilearn .blob.b2{width:380px;height:380px;background:radial-gradient(circle at 50% 50%,var(--teal),transparent 68%);top:40px;right:22%;animation:ilearn-drift2 22s ease-in-out infinite;}
.ilearn .blob.b3{width:340px;height:340px;background:radial-gradient(circle at 50% 50%,var(--mint),transparent 66%);top:-40px;right:30%;animation:ilearn-drift3 20s ease-in-out infinite;}
.ilearn .blob.b4{width:360px;height:360px;background:radial-gradient(circle at 50% 50%,var(--pink),transparent 68%);top:60px;right:2%;animation:ilearn-drift2 24s ease-in-out infinite reverse;}
.ilearn .blob.b5{width:420px;height:420px;background:radial-gradient(circle at 50% 50%,var(--violet),transparent 70%);top:-60px;right:-4%;animation:ilearn-drift1 26s ease-in-out infinite reverse;}
@keyframes ilearn-drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-26px,22px) scale(1.08);}}
@keyframes ilearn-drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(24px,-18px) scale(1.05);}}
@keyframes ilearn-drift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-18px,-24px) scale(1.1);}}

.ilearn .hero__inner{position:relative;z-index:1;padding:74px 0 64px;max-width:760px;}
.ilearn .hero h1{font-size:clamp(38px,6vw,60px);font-weight:600;margin:18px 0 0;}
.ilearn .hero h1 .grad{background:var(--grad-line);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ilearn .hero__sub{font-size:19px;color:var(--muted);margin-top:16px;max-width:540px;}

/* Search */
.ilearn .search{margin-top:34px;max-width:640px;}
.ilearn .search__box{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--border-2);border-radius:16px;padding:8px 8px 8px 18px;box-shadow:var(--shadow-md);transition:border-color .2s,box-shadow .2s;}
.ilearn .search__box:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(45,64,239,.12),var(--shadow-md);}
.ilearn .search__box svg{flex:none;color:var(--muted);}
.ilearn .search__box input{flex:1;border:none;outline:none;background:none;font-family:inherit;font-size:17px;color:var(--ink);padding:10px 0;min-width:0;}
.ilearn .search__box input::placeholder{color:#9a9cb2;}
.ilearn .search__btn{flex:none;height:36px;padding:0 16px;font-size:14px;box-sizing:border-box;}

.ilearn .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;align-items:center;}
.ilearn .chips__label{font-family:"DM Mono",monospace;font-size:12px;color:var(--muted);letter-spacing:.04em;margin-right:2px;}
.ilearn .chip{font-size:14px;color:var(--body);background:var(--lavender);border:1px solid transparent;border-radius:999px;padding:7px 14px;cursor:pointer;transition:all .15s var(--ease);font-family:inherit;}
.ilearn .chip:hover{background:#fff;border-color:var(--blue);color:var(--blue);transform:translateY(-1px);}

/* ============ Section scaffolding ============ */
.ilearn .band{padding:72px 0;}
.ilearn .band--tight{padding:56px 0;}
.ilearn .section-head{max-width:620px;margin-bottom:36px;}
.ilearn .section-head h2{font-size:clamp(26px,3.4vw,36px);margin-top:12px;}
.ilearn .section-head p{color:var(--muted);margin-top:12px;font-size:17px;}

/* ============ Highlight cards ============ */
.ilearn .highlights{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.ilearn .hcard{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px 24px;overflow:hidden;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);}
.ilearn .hcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-line);opacity:0;transition:opacity .22s;}
.ilearn .hcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent;}
.ilearn .hcard:hover::before{opacity:1;}
.ilearn .hcard__icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--lavender);color:var(--blue);margin-bottom:18px;}
.ilearn .hcard--violet .hcard__icon{background:rgba(122,0,223,.09);color:var(--violet);}
.ilearn .hcard__icon--lumina{background:linear-gradient(135deg,rgba(45,64,239,.12),rgba(122,0,223,.12) 52%,rgba(240,86,140,.12));}
.ilearn .hcard h3{font-size:20px;}
.ilearn .hcard p{margin-top:9px;color:var(--muted);font-size:15px;}
.ilearn .hcard__link{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-weight:600;font-size:15px;color:var(--blue);}
.ilearn .hcard--violet .hcard__link{color:var(--violet);}
.ilearn .hcard__link svg{transition:transform .2s var(--ease);}
.ilearn .hcard:hover .hcard__link svg{transform:translateX(4px);}

/* ============ Topics grid ============ */
.ilearn .topics-band{background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.ilearn .topics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.ilearn .topic{display:flex;flex-direction:column;background:var(--page);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),background .2s;}
.ilearn .topic:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);background:#fff;border-color:var(--border-2);}
.ilearn .topic__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.ilearn .topic__icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--lavender);color:var(--blue);}
.ilearn .topic__count{font-family:"DM Mono",monospace;font-size:13px;color:var(--muted);background:#fff;border:1px solid var(--border);border-radius:999px;padding:3px 11px;}
.ilearn .topic h3{font-size:18px;}
.ilearn .topic__desc{color:var(--muted);font-size:14.5px;margin-top:7px;}
.ilearn .topic__links{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:2px;}
.ilearn .topic__links a{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--body);padding:7px 8px;border-radius:9px;margin:0 -8px;transition:color .15s,background .15s;}
.ilearn .topic__links a:hover{color:var(--blue);background:rgba(45,64,239,.06);}
.ilearn .topic__links a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--border-2);flex:none;transition:background .15s;}
.ilearn .topic__links a:hover::before{background:var(--blue);}
.ilearn .topic__all{margin-top:auto;padding-top:14px;font-family:"DM Mono",monospace;font-size:12.5px;letter-spacing:.03em;color:var(--blue);display:inline-flex;gap:6px;align-items:center;}

/* ============ Popular + help ============ */
.ilearn .split{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:stretch;}
.ilearn .popular{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:32px;}
.ilearn .popular h3{font-size:20px;margin-bottom:6px;}
.ilearn .popular>p{color:var(--muted);font-size:15px;margin-bottom:12px;}
.ilearn .popular ol{list-style:none;counter-reset:pop;padding:0;margin:0;}
.ilearn .popular ol li{counter-increment:pop;}
.ilearn .popular ol a{display:flex;align-items:center;gap:14px;padding:15px 6px;border-bottom:1px solid var(--border);transition:padding .18s var(--ease);}
.ilearn .popular ol li:last-child a{border-bottom:none;}
.ilearn .popular ol a:hover{padding-left:12px;}
.ilearn .popular ol a::before{content:counter(pop,decimal-leading-zero);font-family:"DM Mono",monospace;font-size:13px;color:var(--blue);flex:none;}
.ilearn .popular ol a span{font-weight:500;color:var(--ink);font-size:15.5px;}
.ilearn .popular ol a:hover span{color:var(--blue);}

.ilearn .help{position:relative;overflow:hidden;border-radius:var(--radius);padding:38px 34px;color:#fff;background:linear-gradient(135deg,var(--indigo),#2b2470 60%,var(--blue));display:flex;flex-direction:column;justify-content:center;}
.ilearn .help__glow{position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(60px);opacity:.5;background:radial-gradient(circle,var(--violet),transparent 70%);bottom:-90px;right:-60px;pointer-events:none;}
.ilearn .help__glow2{position:absolute;width:220px;height:220px;border-radius:50%;filter:blur(60px);opacity:.4;background:radial-gradient(circle,var(--teal),transparent 70%);top:-70px;left:-40px;pointer-events:none;}
.ilearn .help h3{color:#fff;font-size:26px;position:relative;}
.ilearn .help p{color:rgba(255,255,255,.82);margin-top:12px;font-size:16px;position:relative;max-width:340px;}
.ilearn .help .btn{margin-top:24px;align-self:flex-start;position:relative;}
.ilearn .help p a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:500;}
.ilearn .help p a:hover{opacity:.85;}

/* ============ Footer ============ */
.ilearn .site-footer{background:var(--indigo);color:rgba(255,255,255,.66);padding:64px 0 30px;margin-top:4px;}
.ilearn .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1);}
.ilearn .footer-brand p{margin-top:16px;font-size:14.5px;max-width:280px;color:rgba(255,255,255,.6);}
.ilearn .fcol h4{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-family:"DM Mono",monospace;font-weight:500;margin-bottom:16px;}
.ilearn .fcol a{display:block;font-size:14.5px;padding:6px 0;color:rgba(255,255,255,.66);transition:color .15s;}
.ilearn .fcol a:hover{color:#fff;}
.ilearn .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:26px;gap:20px;flex-wrap:wrap;font-size:13.5px;}
.ilearn .socials{display:flex;gap:10px;}
.ilearn .socials a{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);transition:background .15s,color .15s;}
.ilearn .socials a:hover{background:var(--blue);color:#fff;}
.ilearn .footer-utils{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ilearn .footer-btn{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13px;font-weight:500;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 15px;cursor:pointer;transition:background .15s var(--ease),border-color .15s;}
.ilearn .footer-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);}
.ilearn .footer-internal{color:rgba(255,255,255,.6);font-size:13px;transition:color .15s;}
.ilearn .footer-internal:hover{color:#fff;}

/* ============ Reveal on scroll ============ */
.ilearn .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.ilearn .reveal.in{opacity:1;transform:none;}

/* ============ Responsive ============ */
@media(max-width:900px){
  .ilearn .highlights,.ilearn .topics{grid-template-columns:1fr 1fr;}
  .ilearn .split{grid-template-columns:1fr;}
  .ilearn .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
}
@media(max-width:680px){
  .ilearn .nav{position:fixed;inset:110px 16px auto 16px;flex-direction:column;align-items:stretch;background:#fff;border:1px solid var(--border);border-radius:16px;padding:10px;box-shadow:var(--shadow-lg);gap:2px;display:none;z-index:60;}
  .ilearn .nav.open{display:flex;}
  .ilearn .nav a{padding:13px 14px;}
  .ilearn .menu-toggle{display:flex;}
  .ilearn .header-actions .btn-login{display:none;}
  .ilearn .highlights,.ilearn .topics{grid-template-columns:1fr;}
  .ilearn .footer-top{grid-template-columns:1fr;}
  .ilearn .hero__inner{padding:52px 0 48px;}
  .ilearn .topbar{display:none;}
  .ilearn .search__btn span{display:none;}
  .ilearn .search__btn{width:46px;height:46px;padding:0;}
}

@media(prefers-reduced-motion:reduce){
  .ilearn *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
  .ilearn .reveal{opacity:1;transform:none;}
}