/* ==========================================================================
   Internship Bazaar — Design System
   Identity: deep teal (trust, calm, distinct from the blue every job board
   uses) + warm amber for moments of progress and reward. Ink-black type.
   ========================================================================== */

/* ---------- Tokens: light is the base, dark overrides only colours -------- */
:root {
  /* Brand */
  --teal-50:#EFFAF8; --teal-100:#D3F1EC; --teal-200:#A7E3DA; --teal-300:#6FCDC1;
  --teal-400:#38AFA2; --teal-500:#149286; --teal-600:#0F766E; --teal-700:#0C5F59;
  --teal-800:#0B4A47; --teal-900:#093B39;

  --amber-100:#FEF3C7; --amber-300:#FCD34D; --amber-500:#F59E0B; --amber-600:#D97706;

  /* Neutrals */
  --ink-950:#070B12; --ink-900:#0B1220; --ink-800:#151E2E; --ink-700:#1F2A3C;
  --ink-600:#39465C; --ink-500:#5A6779; --ink-400:#8592A3; --ink-300:#B6C0CC;
  --ink-200:#DDE3EA; --ink-100:#EDF1F5; --ink-50:#F6F8FA;

  --red-50:#FEF2F2; --red-500:#DC2626; --red-600:#B91C1C;
  --green-50:#ECFDF5; --green-500:#059669; --green-600:#047857;
  --blue-50:#EFF6FF; --blue-500:#2563EB;
  --violet-50:#F5F3FF; --violet-500:#7C3AED;

  /* Semantic — light theme */
  --bg:              #FFFFFF;
  --bg-subtle:       var(--ink-50);
  --bg-sunken:       #F1F4F8;
  --surface:         #FFFFFF;
  --surface-raised:  #FFFFFF;
  --surface-hover:   var(--ink-50);
  --border:          var(--ink-200);
  --border-strong:   var(--ink-300);
  --text:            var(--ink-900);
  --text-muted:      var(--ink-500);
  --text-subtle:     var(--ink-400);
  --text-inverse:    #FFFFFF;

  --primary:         var(--teal-600);
  --primary-hover:   var(--teal-700);
  --primary-active:  var(--teal-800);
  --primary-soft:    var(--teal-50);
  --primary-soft-br: var(--teal-200);
  --on-primary:      #FFFFFF;

  --accent:          var(--amber-500);
  --accent-soft:     var(--amber-100);

  --focus:           var(--teal-500);

  /* Elevation — soft, cool-tinted; premium products avoid heavy black shadow */
  --shadow-xs: 0 1px 2px rgba(11,18,32,.06);
  --shadow-sm: 0 1px 3px rgba(11,18,32,.07), 0 1px 2px rgba(11,18,32,.04);
  --shadow-md: 0 4px 12px rgba(11,18,32,.08), 0 2px 4px rgba(11,18,32,.04);
  --shadow-lg: 0 12px 32px rgba(11,18,32,.10), 0 4px 8px rgba(11,18,32,.04);
  --shadow-xl: 0 24px 56px rgba(11,18,32,.14);

  /* Geometry */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;

  /* Type */
  /* Plus Jakarta Sans — a warmer, more distinctive alternative to the
     Inter-everywhere look: rounded terminals and a slightly geometric
     structure give it real personality at heading sizes, while staying
     genuinely legible at small sizes for body copy and form labels. Used at
     both weight extremes (400 body, 800 headings) so the same family
     carries the whole page instead of pairing two different typefaces. */
  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
          'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1rem;
  --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem;
  --fs-4xl:3rem;

  /* Layout */
  --nav-h: 68px;
  --container: 1200px;
  --container-wide: 1380px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: 120ms; --t: 200ms; --t-slow: 340ms;
}

:root[data-theme="dark"] {
  --bg:              var(--ink-950);
  --bg-subtle:       var(--ink-900);
  --bg-sunken:       #05080E;
  --surface:         var(--ink-900);
  --surface-raised:  var(--ink-800);
  --surface-hover:   var(--ink-800);
  --border:          #22304A;
  --border-strong:   #2E3E5C;
  --text:            #EAEFF6;
  --text-muted:      #98A6BA;
  --text-subtle:     #6D7C92;
  --text-inverse:    var(--ink-950);

  --primary:         var(--teal-400);
  --primary-hover:   var(--teal-300);
  --primary-active:  var(--teal-200);
  --primary-soft:    rgba(20,146,134,.14);
  --primary-soft-br: rgba(56,175,162,.34);
  --on-primary:      #04201E;

  --accent:          var(--amber-300);
  --accent-soft:     rgba(245,158,11,.16);
  --focus:           var(--teal-300);

  --red-50:  rgba(220,38,38,.14);
  --green-50:rgba(5,150,105,.14);
  --blue-50: rgba(37,99,235,.16);
  --violet-50:rgba(124,58,237,.16);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.5);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.55);
  --shadow-md: 0 4px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 14px 36px rgba(0,0,0,.55);
  --shadow-xl: 0 26px 60px rgba(0,0,0,.6);
}

/* ---------- Reset / base ------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

/* Scrollbars are hidden site-wide, by request. Nothing about SCROLLING
   changes — wheel, trackpad, touch, arrow keys, Page Up/Down, Home/End and
   programmatic scrollIntoView all work exactly as before; only the visible
   track and thumb are gone.
   This is the single place that controls it: the modal, dropdown menus,
   admin tabs and dashboard nav each used to repeat these three
   declarations locally, which is four copies to keep in sync and no
   coverage for anything added later (the filters panel and its category
   list were exactly that gap — both scrolled with a visible bar). */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
body {
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video { display:block; max-width:100%; height:auto; }
/* The hidden attribute must always win over a class's own `display`, or
   toggling `.hidden = true` on a flex/block-styled element (a .field, a
   .row) silently does nothing — this bit us on a real form once already. */
[hidden] { display:none !important; }
button,input,select,textarea { font:inherit; color:inherit; }
a { color:var(--primary); text-decoration:none; }
@media (hover: hover) { a:hover { text-decoration:underline; } }
/* Tracking scales with size — a big display heading needs more negative
   letter-spacing to avoid looking loose; a small h5 needs almost none, or
   it starts to feel cramped instead of tight. One flat value for every
   level was the flatter, less considered look. */
h1,h2,h3,h4,h5 { line-height:1.2; font-weight:800; }
h1{font-size:var(--fs-4xl); letter-spacing:-.03em;}
h2{font-size:var(--fs-3xl); letter-spacing:-.025em;}
h3{font-size:var(--fs-xl); letter-spacing:-.015em;}
h4{font-size:var(--fs-lg); letter-spacing:-.01em;}
h5{font-size:var(--fs-md); letter-spacing:-.005em;}
ul,ol { padding-left:1.15rem; }
hr { border:0; border-top:1px solid var(--border); }

:focus-visible {
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
:focus:not(:focus-visible) { outline:none; }
/* No ring on elements that are only ever focused from code. After every
   page change app.js calls main.focus() so a screen reader starts reading
   the new page - correct, and kept. But <main> is tabindex="-1": nobody can
   Tab to it or click it, and after any keyboard input the browser counted
   that programmatic focus as :focus-visible and drew the 2px --focus ring
   around the whole page, which showed as a green line under the header on
   some loads and not others. Real controls keep their ring; this matches
   only tabindex="-1" targets. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline:none; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:50%; top:-100px; transform:translateX(-50%);
  z-index:200; background:var(--primary); color:var(--on-primary);
  padding:.7rem 1.2rem; border-radius:0 0 var(--r-md) var(--r-md); font-weight:700;
  transition:top var(--t) var(--ease);
}
.skip-link:focus { top:0; text-decoration:none; }
.noscript { padding:3rem; text-align:center; font-weight:600; }

/* ---------- Layout primitives -------------------------------------------- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:1.25rem; }
.container-wide { max-width:var(--container-wide); }
.section { padding-block:clamp(3rem,6vw,5.5rem); }
.section-sm { padding-block:clamp(2rem,4vw,3rem); }
.stack > * + * { margin-top:var(--gap,1rem); }
.row { display:flex; align-items:center; gap:.6rem; }
.row-wrap { flex-wrap:wrap; }
.between { justify-content:space-between; }
/* minmax(0,1fr), not the default auto: an auto-sized column refuses to go
   narrower than its widest item's min-content, so a single card with a long
   unbroken company name set the width of the whole list and pushed the page
   sideways on a phone. Callers that want real columns set their own
   template inline or via .grid-2*, both of which still win over this. */
.grid { display:grid; gap:1.25rem; grid-template-columns:minmax(0, 1fr); }
.spacer { flex:1; }

.section-head { margin-bottom:2rem; max-width:44rem; }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head h2 { font-size:clamp(1.6rem,3.2vw,2.25rem); }
.section-head p { color:var(--text-muted); margin-top:.6rem; font-size:var(--fs-lg); }
.eyebrow {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--fs-xs); font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--primary); margin-bottom:.6rem;
}

.text-muted{color:var(--text-muted);} .text-sm{font-size:var(--fs-sm);}
.text-xs{font-size:var(--fs-xs);} .text-center{text-align:center;} .text-right{text-align:right;}
.fw-700{font-weight:700;} .fw-800{font-weight:800;}
.mt-0{margin-top:0;} .mt-1{margin-top:.5rem;} .mt-2{margin-top:1rem;} .mt-3{margin-top:1.5rem;}
.mt-4{margin-top:2rem;} .mb-2{margin-bottom:1rem;} .mb-3{margin-bottom:1.5rem;}