/* ------------------------------------------------------------------------------------------------
   INFOTICS "Studio" theme — minimal, premium, INFOTICS-original.
   Loaded only when the Studio theme is active (Admin → Website → Appearance). Scoped to
   [data-theme="studio"] so nothing leaks into other themes. Step 1: foundation + homepage/public hero.
   ------------------------------------------------------------------------------------------------ */
[data-theme="studio"]{
  --bg:#fbfcfe; --surface:#ffffff; --line:#e4ebf4; --line-2:#eef3f9;
  --studio-grid:radial-gradient(circle at 1px 1px,rgba(10,102,255,.07) 1px,transparent 0);
}
[data-theme="studio"] body{background:var(--bg)}

/* calmer rhythm: more air around the page sections */
[data-theme="studio"] .section,[data-theme="studio"] .section-sm{padding-top:84px;padding-bottom:84px}

/* headings: tighter, quieter, premium */
[data-theme="studio"] h1,[data-theme="studio"] h2{letter-spacing:-.035em;line-height:1.05}

/* ---- public hero: light + dotted grid instead of the dark gradient ---- */
[data-theme="studio"] .hero{background:var(--bg);background-image:var(--studio-grid);background-size:26px 26px;color:var(--text);padding:76px 0 92px}
[data-theme="studio"] .hero::before,[data-theme="studio"] .hero::after{display:none} /* drop dark-hero glows */
[data-theme="studio"] .hero h1{color:var(--ink);font-size:clamp(2.6rem,5.2vw,4rem)}
[data-theme="studio"] .hero .lead{color:var(--muted)}
[data-theme="studio"] .hero-badge{background:#fff;border:1px solid var(--line);color:var(--text)}
[data-theme="studio"] .hero-stats{border-top:1px solid var(--line)}
[data-theme="studio"] .hero-stats b{color:var(--ink)}
[data-theme="studio"] .hero-stats span{color:var(--muted)}
[data-theme="studio"] .hero .btn-ghost,[data-theme="studio"] .hero .hero-demo a{color:var(--ink);border-color:var(--line)}
[data-theme="studio"] .hero .hero-demo a{border:0}

/* the lead-capture card sits on a light hero now, so give it a crisp edge */
[data-theme="studio"] .hm-lead-card{border:1px solid var(--line);box-shadow:0 30px 70px -42px rgba(7,17,31,.28)}

/* trust logo band: hairline separators, quiet */
[data-theme="studio"] .hm-logos,[data-theme="studio"] .logo-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}

/* cards: hairline border, soft shadow on hover only (calm by default) */
[data-theme="studio"] .card,[data-theme="studio"] .panel{border:1px solid var(--line);box-shadow:none}
[data-theme="studio"] .card-hover:hover{box-shadow:0 20px 44px -28px rgba(7,17,31,.22);transform:translateY(-2px)}

/* buttons: keep the brand gradient off the primary for a flatter, modern fill */
[data-theme="studio"] .btn-primary{background:var(--brand);box-shadow:0 10px 24px -10px rgba(10,102,255,.5)}

/* eyebrow accent uses the brand gradient tick (matches the mockup) */
[data-theme="studio"] .eyebrow{color:var(--brand-ink)}

/* dark bands (CTA / footer accents) get the subtle grid too, in INFOTICS navy */
[data-theme="studio"] .section-dark{background:linear-gradient(180deg,#07111f,#0b1b33)}
[data-theme="studio"] .section-dark::after{content:"";position:absolute;inset:0;background-image:var(--studio-grid);background-size:26px 26px;opacity:.5;pointer-events:none}

/* ============================ Step 2: public inner pages ============================
   Inner page heroes (courses list, exams, careers, pricing, verify, badges, labs …) go light in
   Studio. Vendor course pages keep their vendor-coloured hero (body.vt) — their branding wins.
   Footers and CTA bands are .section-dark WITHOUT .page-hero, so they stay dark (Step 1). */
/* Three hero markups carry the light treatment, none of them on a vendor (body.vt) page:
     a) the shared component  <section class="section-dark pg-hero">
     b) one-off same-element   <section class="section-dark page-hero …">   (exams, verify …)
     c) one-off nested         <section class="section-dark"><div class="… page-hero">  (labs) */
[data-theme="studio"] body:not(.vt) .pg-hero.section-dark,
[data-theme="studio"] body:not(.vt) .section-dark.page-hero,
[data-theme="studio"] body:not(.vt) .section-dark:has(> .page-hero){background:var(--bg);background-image:var(--studio-grid);background-size:26px 26px;color:var(--text)}
[data-theme="studio"] body:not(.vt) .pg-hero .pg-hero-glow{display:none}
[data-theme="studio"] body:not(.vt) .pg-hero.section-dark::after,[data-theme="studio"] body:not(.vt) .section-dark.page-hero::after,[data-theme="studio"] body:not(.vt) .section-dark:has(> .page-hero)::after{display:none}
[data-theme="studio"] body:not(.vt) .pg-hero h1,[data-theme="studio"] body:not(.vt) .section-dark.page-hero h1,[data-theme="studio"] body:not(.vt) .section-dark .page-hero h1{color:var(--ink)}
[data-theme="studio"] body:not(.vt) .pg-hero .lead,[data-theme="studio"] body:not(.vt) .pg-hero p,[data-theme="studio"] body:not(.vt) .section-dark.page-hero .lead,[data-theme="studio"] body:not(.vt) .section-dark.page-hero p,[data-theme="studio"] body:not(.vt) .section-dark .page-hero .lead,[data-theme="studio"] body:not(.vt) .section-dark .page-hero p{color:var(--muted)}
[data-theme="studio"] body:not(.vt) .pg-hero .crumbs,[data-theme="studio"] body:not(.vt) .pg-hero .crumbs a,[data-theme="studio"] body:not(.vt) .section-dark.page-hero .crumbs,[data-theme="studio"] body:not(.vt) .section-dark.page-hero .crumbs a,[data-theme="studio"] body:not(.vt) .section-dark .page-hero .crumbs,[data-theme="studio"] body:not(.vt) .section-dark .page-hero .crumbs a{color:var(--muted)}
[data-theme="studio"] body:not(.vt) .pg-hero .eyebrow,[data-theme="studio"] body:not(.vt) .section-dark.page-hero .eyebrow,[data-theme="studio"] body:not(.vt) .section-dark .page-hero .eyebrow{color:var(--brand-ink)}
[data-theme="studio"] body:not(.vt) .pg-hero .btn-ghost,[data-theme="studio"] body:not(.vt) .section-dark.page-hero .btn-ghost,[data-theme="studio"] body:not(.vt) .section-dark .page-hero .btn-ghost{color:var(--ink);border-color:var(--line)}
/* dark hero chips (.tr-chip-dark) become quiet light pills on the now-light hero */
[data-theme="studio"] body:not(.vt) .section-dark.page-hero .tr-chip-dark,[data-theme="studio"] body:not(.vt) .section-dark .page-hero .tr-chip-dark{background:#fff;border:1px solid var(--line);color:var(--text)}

/* Labs landing hero (.kk-hero): light backdrop + dotted grid, but keep the dark terminal
   window (.kk-win) as the centerpiece — the "light page, dark terminal" look of the homepage. */
[data-theme="studio"] .kk-hero{background:var(--bg);background-image:var(--studio-grid);background-size:26px 26px;color:var(--text)}
[data-theme="studio"] .kk-hero h1{color:var(--ink)}
[data-theme="studio"] .kk-hero h1 .kk-rot{color:var(--brand)}
[data-theme="studio"] .kk-hero p.lead{color:var(--muted)}
[data-theme="studio"] .kk-eyebrow{background:#fff;border-color:var(--line);color:var(--brand-ink)}
[data-theme="studio"] .kk-trust{color:var(--muted)}
[data-theme="studio"] .kk-cta .btn-ghost{color:var(--ink);border-color:var(--line)}

/* course / exam / catalogue cards: calm hairline cards with a soft lift on hover */
[data-theme="studio"] .course-card,[data-theme="studio"] .exam-card,[data-theme="studio"] .track-card{border:1px solid var(--line);box-shadow:none;transition:box-shadow .18s,transform .18s}
[data-theme="studio"] .course-card:hover,[data-theme="studio"] .exam-card:hover,[data-theme="studio"] .track-card:hover{box-shadow:0 22px 48px -30px rgba(7,17,31,.24);transform:translateY(-2px)}

/* filter chips / tabs: quiet pills */
[data-theme="studio"] .chip,[data-theme="studio"] .filter-chip{border:1px solid var(--line);background:#fff}
[data-theme="studio"] .chip.active,[data-theme="studio"] .chip[aria-pressed="true"]{background:var(--brand-50);border-color:var(--brand);color:var(--brand-ink)}

/* section headings get the small gradient eyebrow tick like the homepage */
[data-theme="studio"] .section .eyebrow::before{background:var(--grad)}

/* ============================ Step 3: portals (student / admin / trainer + lab portal) ============================
   The portal chrome is shared by layouts/portal.blade.php, so one set of rules themes every role's
   portal at once. Scoped to [data-theme="studio"]; Classic (the live default) is untouched. */

/* Sidebar: flatter, calmer deep-navy rail with a hairline edge. The logo stays white here, so the
   rail keeps its dark surface — the content area beside it carries the Studio light look. */
[data-theme="studio"] .sidebar{background:#0a1220;border-right:1px solid rgba(255,255,255,.06)}
[data-theme="studio"] .side-group{color:#8aa0bd}
/* active menu item: a clean flat brand fill instead of the gradient + heavy glow */
[data-theme="studio"] .side-link.active{background:var(--brand);box-shadow:0 8px 18px -12px rgba(10,102,255,.75)}

/* Top bar: clean solid white with the hairline underline (no translucency) */
[data-theme="studio"] .app-top{background:#fff;backdrop-filter:none}

/* Page heading: tighter, quieter tracking like the public pages */
[data-theme="studio"] .page-head h1{letter-spacing:-.03em}

/* Stat tiles / KPI cards: hairline, flat by default (matches the calm card rhythm) */
[data-theme="studio"] .kpi,[data-theme="studio"] .stat-tile{border:1px solid var(--line);box-shadow:none}

/* Lab portal XP / streak bar: a calm light surface instead of the blue gradient, XP kept in brand. */
[data-theme="studio"] .kl-me{background:#fff;border:1px solid var(--line);box-shadow:none;color:var(--ink)}
[data-theme="studio"] .kl-me>div{background:var(--bg)}
[data-theme="studio"] .kl-me>div span,[data-theme="studio"] .kl-me-xp small{color:var(--muted)}
[data-theme="studio"] .kl-me .kl-me-xp b{color:var(--brand)}

/* ============================ Step 4: polish (tables, forms, modals, motion, mobile) ============================
   Final calm pass over the shared primitives. Still scoped to [data-theme="studio"]. */

/* Tables: a quiet white header with a hairline, instead of the light-blue fill. */
[data-theme="studio"] .table-wrap{box-shadow:none}
[data-theme="studio"] .table th{background:#fff;color:var(--muted);border-bottom:1px solid var(--line)}
[data-theme="studio"] .table tbody tr:hover td{background:var(--bg)}

/* Forms: calmer focus ring in the brand colour (follows the theme accent). */
[data-theme="studio"] .input:focus,[data-theme="studio"] .select:focus,[data-theme="studio"] .textarea:focus{box-shadow:0 0 0 3px var(--brand-50)}

/* Modals: hairline edge and a softer shadow on the box. */
[data-theme="studio"] .modal-box{border:1px solid var(--line);box-shadow:0 30px 80px -40px rgba(7,17,31,.4)}

/* Motion: keep it subtle — a gentle 1px lift on buttons instead of 2px. */
[data-theme="studio"] .btn:hover{transform:translateY(-1px)}

/* Mobile: tighten the generous section rhythm so pages are not overly tall on small screens. */
@media (max-width:640px){
  [data-theme="studio"] .section,[data-theme="studio"] .section-sm{padding-top:52px;padding-bottom:52px}
  [data-theme="studio"] .hero{padding:52px 0 60px}
  [data-theme="studio"] .hero h1{font-size:clamp(2.1rem,8vw,2.8rem)}
}