/* ==========================================================================
   IT Security Nepal — Design System (Tailwind CSS v4)
   Ported unchanged from the approved Phase 1 prototype (itsn-prototype/src/css/app.css).
   ========================================================================== */
@import "tailwindcss";
@source "../views";
@source "../js";
@source "../../app";
@source inline("md:grid-cols-2 md:grid-cols-3 md:grid-cols-4 md:grid-cols-5");

/* ---------- Fonts (self-hosted variable fonts; swap = no invisible text) ---------- */
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

@theme {
  /* Typography */
  /* Theme E (Course Marketplace): Plus Jakarta Sans display, Inter body */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Brand navy — primary (#003275 = existing site navy) */
  --color-navy-50: #eef4fc;
  --color-navy-100: #d9e6f7;
  --color-navy-200: #b3ccee;
  --color-navy-300: #7fa6dd;
  --color-navy-400: #4a7ec9;
  --color-navy-500: #1f5bb8;
  --color-navy-600: #0a4596;
  --color-navy-700: #003275;
  --color-navy-800: #00285f;
  --color-navy-900: #001f4a;

  /* Sunset yellow — accent (#F9B233, owner decision; close to the logo band #EFA330) */
  --color-sun-50: #fff8ea;
  --color-sun-100: #fff4db;
  --color-sun-200: #fcda94;
  --color-sun-300: #fbc55e;
  --color-sun-400: #f9b233;
  --color-sun-500: #e39a14;
  --color-sun-600: #b87a0b;
  --color-sun-700: #7a4f00;

  /* Action blue (Theme E): links, hover, icons, focus on light surfaces */
  --color-royal-500: #2a6bd1;
  --color-royal-600: #1f5bb8;
  --color-action: #1f5bb8;

  /* Neutrals (navy-tinted, never pure black) */
  --color-ink: #18243a;          /* body text */
  --color-ink-muted: #56647c;    /* secondary text (≥ 4.5:1 on white and mist) */
  --color-ink-subtle: #5d6e8c;   /* captions on white only (≥ 4.5:1) */
  --color-line: #dde5f0;         /* borders */
  --color-line-strong: #c8d3e3;
  --color-surface: #edf2f9;      /* "mist": light section background */
  --color-surface-2: #e3ecfa;

  /* Semantic */
  --color-success-50: #ecf8f1;
  --color-success-600: #11804a;
  --color-error-50: #fdeeee;
  --color-error-600: #c42b2b;
  --color-warning-50: #fff8eb;
  --color-warning-600: #8a520c;

  /* Radius / shadow */
  --radius-sm: 6px;
  --radius-md: 8px;   /* buttons, fields */
  --radius-lg: 12px;  /* cards */
  --radius-xl: 16px;  /* panels, feature cards */
  --shadow-card: 0 1px 2px rgb(0 40 95 / 0.06), 0 4px 16px rgb(0 40 95 / 0.06);
  --shadow-lift: 0 22px 40px -24px rgb(0 50 117 / 0.5);
  --shadow-panel: 0 24px 60px rgb(0 31 74 / 0.18);

  /* Layout */
  --container-page: 80rem; /* 1280px content width (Theme E) */
  --breakpoint-xs: 26rem;

  /* Motion */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
@layer base {
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { @apply bg-white font-sans text-ink antialiased; font-size: 1rem; line-height: 1.65; }
  h1, h2, h3, h4 { @apply font-display text-navy-700; letter-spacing: -0.03em; text-wrap: balance; }
  p { text-wrap: pretty; }
  a { @apply text-royal-600 underline-offset-4; }
  a:hover { @apply text-navy-700; }
  ::selection { @apply bg-sun-200 text-navy-900; }
  :focus-visible { outline: 3px solid var(--color-action); outline-offset: 2px; border-radius: 4px; }
  .on-dark :focus-visible { outline-color: var(--color-sun-300); }
  [x-cloak] { display: none !important; }
  summary { cursor: pointer; }
  summary::-webkit-details-marker { display: none; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }
}

/* ---------- Typography scale (fluid) ---------- */
@utility text-display { font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.625rem); line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; }
@utility text-h1 { font-size: clamp(2rem, 1.45rem + 2.2vw, 3rem); line-height: 1.1; font-weight: 800; }
@utility text-h2 { font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.375rem); line-height: 1.12; font-weight: 800; }
@utility text-h3 { font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); line-height: 1.3; font-weight: 700; }
@utility text-lead { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.6; }
@utility text-eyebrow { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Layout ---------- */
@utility container-page { width: 100%; max-width: var(--container-page); margin-inline: auto; padding-inline: 1rem; @media (width >= 40rem) { padding-inline: 1.5rem; } @media (width >= 64rem) { padding-inline: 2rem; } }
@utility section { padding-block: 4rem; @media (width >= 64rem) { padding-block: 5rem; } }
@utility section-tight { padding-block: 3rem; @media (width >= 64rem) { padding-block: 4rem; } }

/* Navy panel (Theme E: solid navy with a soft sunset glow, used for CTA panels and feature tiles) */
@utility bg-grid-navy {
  background-color: var(--color-navy-700);
  background-image: radial-gradient(circle at 100% 0%, rgb(249 178 51 / 0.28), transparent 38%);
}
/* Light page header (Theme E hero: mist → white) */
@utility bg-grid-light { background: linear-gradient(180deg, var(--color-surface), #fff); }
/* Decorative course "media" block and labelled photo placeholder */
@utility bg-media {
  background-color: var(--color-navy-700);
  background-image: radial-gradient(rgb(255 255 255 / 0.14) 1px, transparent 1px), linear-gradient(140deg, var(--color-action), var(--color-navy-700));
  background-size: 14px 14px, 100% 100%;
}
@utility bg-photo-ph {
  background-color: var(--color-navy-700);
  background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.07) 0 2px, transparent 2px 14px), linear-gradient(160deg, var(--color-action), var(--color-navy-700));
}

/* ---------- Components ---------- */
@layer components {
  /* Buttons ------------------------------------------------------------ */
  .btn { @apply inline-flex min-h-12 items-center justify-center gap-2 rounded-md border-[1.5px] border-transparent px-5 font-display text-[0.9375rem] font-bold no-underline transition-[background-color,border-color,color,box-shadow,transform] duration-150 select-none; }
  .btn:active { transform: translateY(1px); }
  .btn[disabled], .btn[aria-disabled="true"] { @apply pointer-events-none opacity-50; }
  /* Theme E: primary = navy (hover action blue); sunset yellow = high-attention CTA, and primary on navy surfaces */
  .btn-primary, .btn-navy { @apply bg-navy-700 text-white hover:bg-action hover:text-white hover:shadow-[0_8px_18px_-10px_rgb(31_91_184/0.8)]; }
  .btn-primary:active, .btn-navy:active { @apply bg-navy-800 shadow-none; }
  .btn-sun, .on-dark .btn-primary { @apply bg-sun-400 text-navy-700 hover:bg-[#ffc24d] hover:text-navy-700 hover:shadow-none; }
  .btn-outline { @apply border-line-strong bg-white text-navy-700 hover:border-action hover:text-action; }
  .btn-outline:active { @apply bg-surface; }
  .btn-ghost-light { @apply border border-white/35 bg-white/5 text-white hover:border-white/60 hover:bg-white/10 hover:text-white; }
  .btn-ghost { @apply text-action hover:bg-surface hover:text-navy-700; }
  .btn-sm { @apply min-h-10 px-4 text-sm; }
  .btn-lg { @apply min-h-14 px-7 text-base; }
  .btn-block { @apply w-full; }

  .link-arrow { @apply inline-flex items-center gap-1.5 font-display font-bold text-action no-underline hover:text-navy-700 hover:underline; }
  .link-arrow svg { @apply transition-transform duration-150; }
  .link-arrow:hover svg { transform: translateX(3px); }

  /* Badges ------------------------------------------------------------- */
  .badge { @apply inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-[0.71875rem] leading-none font-bold tracking-[0.02em] whitespace-nowrap; }
  .badge-navy { @apply bg-surface-2 text-action; }
  .badge-solid { @apply bg-navy-700 text-white; }
  .badge-sun { @apply bg-sun-100 text-sun-700; }
  .badge-success { @apply bg-success-50 text-success-600; }
  .badge-muted { @apply bg-surface-2 text-ink-muted; }
  .badge-outline { @apply border border-line-strong text-ink-muted; }
  .badge-on-dark { @apply bg-white/10 text-white ring-1 ring-white/20; }

  /* Cards -------------------------------------------------------------- */
  .card { @apply rounded-lg border border-line bg-white; }
  .card-interactive { @apply transition-[box-shadow,border-color,transform] duration-200; }
  .card-interactive:hover { @apply border-action/60 shadow-lift; transform: translateY(-3px); }
  .card-interactive:focus-within { @apply border-navy-300; }
  /* stretched link: whole card clickable, one accessible link */
  .stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

  /* Forms -------------------------------------------------------------- */
  .field-label { @apply mb-1.5 block text-sm font-semibold text-navy-700; }
  .field-hint { @apply mt-1.5 text-sm text-ink-muted; }
  .field-error { @apply mt-1.5 flex items-center gap-1.5 text-sm font-medium text-error-600; }
  .input { @apply block min-h-12 w-full rounded-md border-[1.5px] border-line bg-white px-3.5 text-base text-ink placeholder:text-ink-subtle transition-[border-color,box-shadow,background-color] duration-150; }
  .input:hover { @apply border-line-strong; }
  .input:focus { @apply border-action outline-none ring-4 ring-action/12; }
  .input[aria-invalid="true"] { @apply border-error-600 ring-4 ring-error-50; }
  .input:disabled { @apply cursor-not-allowed bg-surface text-ink-subtle; }
  textarea.input { @apply min-h-32 py-3; }
  select.input { @apply appearance-none bg-[length:1.25rem] bg-[right_0.75rem_center] bg-no-repeat pr-10; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5d7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
  .check { @apply size-5 shrink-0 rounded border-line-strong text-navy-700 accent-navy-700; }

  /* Choice chips (filters, finder answers) */
  .chip { @apply inline-flex min-h-10 cursor-pointer items-center gap-2 rounded-full border-[1.5px] border-line bg-white px-4 text-[0.84375rem] font-semibold text-ink transition-colors duration-150 hover:border-action hover:text-action; }
  .chip[aria-pressed="true"], .chip:has(input:checked) { @apply border-action bg-action text-white hover:text-white; }
  .chip:has(input:focus-visible) { outline: 3px solid var(--color-action); outline-offset: 2px; }

  .option-card { @apply relative flex cursor-pointer items-start gap-3 rounded-lg border-[1.5px] border-line bg-white p-4 transition-[border-color,background-color] duration-150 hover:border-action; }
  .option-card:has(input:checked) { @apply border-navy-700 bg-surface; }
  .option-card:has(input:focus-visible) { outline: 3px solid var(--color-action); outline-offset: 2px; }

  /* Accordion (native <details>, keyboard + screen reader accessible, content indexable) */
  .accordion { @apply divide-y divide-line rounded-lg border border-line bg-white; }
  .accordion details > summary { @apply flex min-h-14 items-center justify-between gap-4 px-5 py-4 text-left font-display font-bold text-navy-700 list-none; }
  .accordion details > summary:hover { @apply text-royal-600; }
  .accordion details > summary .acc-icon { @apply shrink-0 rounded-full bg-navy-50 p-1 text-navy-700 transition-transform duration-200; }
  .accordion details[open] > summary .acc-icon { transform: rotate(45deg); }
  .accordion .acc-body { @apply px-5 pb-5 text-ink-muted; }

  /* Breadcrumbs */
  .breadcrumbs ol { @apply flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm; }
  .breadcrumbs a { @apply text-current no-underline opacity-80 hover:underline hover:opacity-100; }

  /* Prose for articles & legal pages */
  .prose-article { @apply max-w-[68ch] text-[1.0625rem] leading-[1.75] text-ink; }
  .prose-article > * + * { margin-top: 1.1em; }
  .prose-article h2 { @apply mt-12 scroll-mt-40 text-h2; }
  .prose-article h3 { @apply mt-9 scroll-mt-40 text-h3 font-semibold; }
  .prose-article h4 { @apply mt-7 scroll-mt-40 text-lg font-semibold; }
  .prose-article ul { @apply list-disc pl-6 marker:text-sun-500; }
  .prose-article ol { @apply list-decimal pl-6 marker:font-semibold marker:text-navy-600; }
  .prose-article li + li { margin-top: 0.4em; }
  .prose-article strong { @apply font-semibold text-navy-800; }
  .prose-article a { @apply font-medium underline decoration-royal-500/40 decoration-2 hover:decoration-royal-500; }
  .prose-article blockquote { @apply border-l-4 border-sun-400 bg-sun-50 py-3 pr-4 pl-5 text-navy-800; }
  .prose-article .table-wrap { @apply overflow-x-auto rounded-lg border border-line; }
  .prose-article table { @apply w-full min-w-[32rem] border-collapse text-[0.9375rem]; }
  .prose-article th { @apply bg-surface px-4 py-3 text-left font-semibold text-navy-800; }
  .prose-article td { @apply border-t border-line px-4 py-3; }

  /* Prototype annotations — toggled from the prototype bar */
  .proto-flag { @apply inline-flex items-center gap-1 rounded-sm border border-dashed border-sun-600 bg-sun-50 px-1.5 py-px font-mono text-[0.6875rem] font-semibold tracking-wide text-sun-700 uppercase; }
  .proto-outline { outline: 2px dashed var(--color-sun-500); outline-offset: 4px; }
  html.proto-clean .proto-flag { display: none !important; }
  html.proto-clean .proto-outline { outline: none; }
}

/* ---------- Motion utilities ---------- */
@utility reveal {
  /* only hides content once JS has confirmed it can reveal it again (html.js) */
  @media (prefers-reduced-motion: no-preference) {
    :where(html.js) & {
      opacity: 0; transform: translateY(14px);
      transition: opacity 0.6s var(--ease-out-soft), transform 0.6s var(--ease-out-soft);
    }
    :where(html.js) &.is-visible { opacity: 1; transform: none; }
  }
}
@keyframes pulse-node { 0%, 100% { opacity: 0.35; r: 3; } 50% { opacity: 1; r: 5; } }
@keyframes dash-flow { to { stroke-dashoffset: -24; } }
@utility anim-node { @media (prefers-reduced-motion: no-preference) { animation: pulse-node 3.2s ease-in-out infinite; } }
@utility anim-flow { @media (prefers-reduced-motion: no-preference) { animation: dash-flow 1.6s linear infinite; } }

@utility no-scrollbar { scrollbar-width: none; &::-webkit-scrollbar { display: none; } }

/* ---------- Theme E components ---------- */
@layer components {
  /* Track tile (category filter / link) */
  .track-tile { @apply relative grid gap-2.5 rounded-lg border-[1.5px] border-line bg-white p-4 text-left text-ink no-underline transition-[border-color,box-shadow,transform,background-color] duration-150; }
  .track-tile:hover { @apply border-action text-ink shadow-lift; transform: translateY(-2px); }
  .track-tile .ic { @apply grid size-[42px] place-items-center rounded-[10px] bg-surface text-action; }
  .track-tile b { @apply font-display text-[0.90625rem] leading-tight font-bold text-navy-700; }
  .track-tile small { @apply text-[0.78125rem] text-ink-muted; }
  .track-tile[aria-pressed="true"] { @apply border-navy-700 bg-navy-700; }
  .track-tile[aria-pressed="true"] .ic { @apply bg-sun-400 text-navy-700; }
  .track-tile[aria-pressed="true"] b { @apply text-white; }
  .track-tile[aria-pressed="true"] small { @apply text-white/75; }
  /* Icon tile used in stats / why / mega menu */
  .ic-tile { @apply grid size-[46px] shrink-0 place-items-center rounded-lg bg-surface text-action; }
  /* Labelled photo placeholder (real photography to be supplied) */
  .photo-ph { @apply relative grid place-items-end overflow-hidden p-3.5 bg-photo-ph; }
  .photo-ph > span { @apply relative inline-flex items-center gap-1.5 rounded bg-navy-900/75 px-2.5 py-1.5 text-[0.6875rem] font-semibold tracking-wide text-white; }
}