/* Tailwind v4 site stylesheet. Single source of truth for design + custom CSS.
 *
 * At draft time, this is read inline into a <style type="text/tailwindcss"> block.
 * At publish time, the Tailwind CLI compiles this file (plus templates) into
 * dist/styles.css. Every directive works here: @theme, @layer, @utility,
 * @apply, @keyframes, plus plain CSS. Do NOT write <style> blocks in PHP
 * templates for theme CSS — put it here so it lands in the compiled bundle.
 *
 * functions.php also parses the @theme block at runtime to register the
 * palette + font sizes with Gutenberg via add_theme_support().
 *
 * Conventions:
 *   1. @theme: tokens only (--color-*, --font-*, --text-*, --radius-*). No
 *      selectors, no @apply. Tokens auto-generate matching utilities.
 *   2. Plain CSS: outside @theme, inside @layer. Prefer utility classes in
 *      templates first; only write CSS here when utilities cannot express it.
 *      @layer base { h1 { font-size: var(--text-2xl); } }
 *      @layer components { .card { padding: --spacing(6); } }
 *   3. New reusable utilities: prefer @utility over @apply.
 *      @utility content-auto { content-visibility: auto; }
 *   4. Custom web fonts: load via <link> in template-parts/head.php, then
 *      reference here via --font-*.
 *
 * Token naming (Tailwind v4):
 *   --color-{slug}        → bg-{slug}, text-{slug}, border-{slug}
 *   --color-{slug}-{NN}   → numeric shades (skipped in the Gutenberg palette)
 *   --font-{slug}         → font-{slug}
 *   --text-{slug}         → text-{slug}
 *   --radius-{slug}       → rounded-{slug}
 */

@theme {
	--color-primary: #2563eb;
	--color-primary-50:  #eff6ff;
	--color-primary-100: #dbeafe;
	--color-primary-500: #3b82f6;
	--color-primary-600: #2563eb;
	--color-primary-700: #1d4ed8;
	--color-primary-900: #1e3a8a;

	--color-secondary: #475569;
	--color-secondary-50:  #f8fafc;
	--color-secondary-100: #f1f5f9;
	--color-secondary-200: #e2e8f0;
	--color-secondary-300: #cbd5e1;
	--color-secondary-500: #64748b;
	--color-secondary-600: #475569;
	--color-secondary-700: #334155;
	--color-secondary-900: #0f172a;

	--color-neutral: #171717;
	--color-background: #ffffff;

	--font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-serif: Georgia, "Times New Roman", serif;
	--font-mono:  ui-monospace, "SF Mono", Menlo, monospace;

	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.25rem;
	--text-2xl:  1.5rem;
	--text-3xl:  1.875rem;
	--text-4xl:  2.25rem;
	--text-5xl:  3rem;
}

/* Element-level defaults. Reach for utility classes in templates first; put
 * a rule here only when the same styling needs to apply across every instance
 * of an element (e.g. body font features). Keep this layer small. */
@layer base {
	/* body { font-feature-settings: "ss01", "ss02"; } */
}

/* Reusable component classes. Use for compound patterns that recur and need
 * a name (e.g. .card, .hero-heading, .divider). Reference tokens via var();
 * @apply works but is finicky — prefer var() + utility classes in templates. */
@layer components {
	/* .hero-heading em { font-style: italic; color: var(--color-primary); } */
}

/* Netizen Original: navigation, search and article interaction refinements. */
@layer netizen-refinements {
  :root { --nz-band:#c8102e; --nz-header-height:74px; --nz-admin-offset:0px; }
  html { scroll-padding-top:calc(var(--nz-header-height) + var(--nz-admin-offset) + 18px); }
  html.nz-dark body { --nz-navy:#f1f5ff; --nz-paper:#071426; --nz-soft:#17273e; --nz-border:#31435d; --nz-muted:#a5b6d2; }
  body.admin-bar { --nz-admin-offset:32px; }
  .nz-header {
    position:sticky!important; top:var(--nz-admin-offset)!important; z-index:50!important;
    display:grid!important; grid-template-columns:190px minmax(0,1fr) 250px!important;
    align-items:center!important; min-height:74px!important; height:auto!important;
    padding:8px 24px!important; gap:12px 18px!important; background:var(--nz-paper)!important;
    border-bottom:1px solid var(--nz-border)!important;
  }
  .nz-logo { flex:none!important; min-width:0!important; }
  .nz-logo .nz-logo-link { display:block!important; line-height:0!important; }
  .nz-logo img { width:100%!important; height:auto!important; max-width:190px!important; max-height:56px!important; object-fit:contain!important; }
  .nz-logo .nz-logo-light { display:block!important; }
  .nz-logo .nz-logo-dark { display:none!important; }
  html.nz-dark .nz-logo .nz-logo-light, body.nz-dark .nz-logo .nz-logo-light { display:none!important; }
  html.nz-dark .nz-logo .nz-logo-dark, body.nz-dark .nz-logo .nz-logo-dark { display:block!important; }
  #nz-nav {
    position:static!important; display:flex!important; visibility:visible!important; opacity:1!important;
    align-items:center!important; justify-content:center!important; width:100%!important;
    min-width:0!important; height:auto!important; padding:0!important;
    left:auto!important; right:auto!important; top:auto!important; overflow:visible!important;
    background:var(--nz-paper)!important; border:0!important; box-shadow:none!important;
  }
  #nz-nav > ul { display:flex!important; flex-direction:row!important; flex-wrap:wrap!important; align-items:center!important; justify-content:center!important; list-style:none!important; margin:0!important; padding:0!important; gap:8px 14px!important; white-space:normal!important; }
  #nz-nav a { display:block!important; padding:7px 0!important; font-size:12px!important; line-height:1.3!important; border:0!important; color:var(--nz-navy)!important; }
  #nz-nav a:hover, #nz-nav a:focus-visible { color:var(--nz-band)!important; }
  .nz-header-actions { display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:8px!important; margin-left:0!important; min-width:0!important; }
  .nz-header-actions form { min-width:0!important; margin:0!important; }
  .nz-header-actions input { width:180px!important; max-width:100%!important; padding:10px 14px!important; font-size:13px!important; }
  .nz-header-actions button { flex-shrink:0!important; padding:7px!important; }
  #nz-menu { display:none!important; }
  .nz-crumb {
    background:var(--nz-band)!important; background-image:none!important; color:#fff!important;
    min-height:0!important; padding:7px 24px!important; font-size:12px!important;
    line-height:1.4!important; border:0!important;
  }
  .nz-crumb a,.nz-crumb span { color:#fff!important; }
  .nz-photo { top:calc(var(--nz-header-height) + var(--nz-admin-offset))!important; height:calc(100vh - var(--nz-header-height) - var(--nz-admin-offset))!important; height:calc(100dvh - var(--nz-header-height) - var(--nz-admin-offset))!important; }
  .nz-ad-slot,.nz-inline-ad { display:none!important; }
  .single-post .nz-body .a2a_kit { display:none!important; }
  .nz-bottom.nz-share-bar { min-height:70px!important; padding-bottom:env(safe-area-inset-bottom)!important; }
  body.wpvibe-preview-active .nz-share-bar { bottom:var(--nz-preview-height,52px)!important; }
  .nz-share-bar a,.nz-share-bar button { min-width:0!important; font-size:11px!important; padding:10px 4px!important; }
  .nz-share-bar a:hover,.nz-share-bar button:hover { background:var(--nz-soft)!important; color:var(--nz-band)!important; }
  .nz-share-bar a:focus-visible,.nz-share-bar button:focus-visible,.nz-header a:focus-visible,.nz-header button:focus-visible { outline:2px solid var(--nz-band); outline-offset:-3px; }
  .nz-share-bar .nz-brand-icon { fill:currentColor!important; stroke:none!important; }
  .nz-share-bar svg { width:24px!important; height:24px!important; }
  .nz-share-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .nz-search-heading { padding:28px clamp(20px,3vw,46px) 0; }
  .nz-search-heading .nz-eyebrow { color:var(--nz-red); font-size:12px; font-weight:700; letter-spacing:.06em; margin:0 0 8px; }
  .nz-search-heading h1 { color:var(--nz-navy); font-size:clamp(27px,3vw,40px); line-height:1.15; letter-spacing:-.025em; margin:0 0 12px; }
  .nz-search-summary,.nz-search-empty { color:var(--nz-muted); font-size:15px; line-height:1.5; }
  .nz-search-results .nz-cards .nz-card-title { color:var(--nz-navy); font-size:clamp(19px,1.7vw,26px); line-height:1.23; font-weight:800; margin:8px 17px 12px; letter-spacing:-.02em; }
  .nz-search-results .nz-card-excerpt { padding-bottom:18px; }
  .nz-search-results .nz-cards small { color:var(--nz-red); }
  .nz-search-results .nz-pagination .nav-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px; }
  .nz-search-results .nz-pagination .current { background:var(--nz-band)!important; color:#fff!important; }
  @media (min-width:761px) and (max-width:1279px) {
    :root { --nz-header-height:112px; }
    .nz-header { grid-template-columns:190px minmax(0,1fr)!important; gap:4px 18px!important; }
    .nz-logo { grid-column:1; grid-row:1; }
    .nz-header-actions { grid-column:2; grid-row:1; }
    #nz-nav { grid-column:1 / -1!important; grid-row:2!important; }
    #nz-nav > ul { gap:4px 22px!important; }
  }
  @media (max-width:782px) { body.admin-bar { --nz-admin-offset:46px; } body.admin-bar #wpadminbar { position:fixed!important; } }
  @media (max-width:760px) {
    :root { --nz-header-height:64px; }
    .nz-header { display:flex!important; justify-content:space-between!important; min-height:64px!important; padding:8px 12px!important; gap:8px!important; }
    .nz-logo { flex:0 1 150px!important; }
    .nz-logo img { max-width:150px!important; max-height:44px!important; }
    .nz-header-actions { margin-left:auto!important; gap:2px!important; }
    .nz-header-actions input { width:clamp(76px,23vw,130px)!important; padding:9px!important; font-size:12px!important; }
    .nz-header-actions button { padding:6px!important; }
    .nz-header-actions svg { width:22px!important; height:22px!important; }
    #nz-menu { display:flex!important; }
    #nz-nav {
      display:none!important; position:absolute!important; top:100%!important; left:0!important; right:0!important;
      width:100%!important; max-height:calc(100dvh - var(--nz-header-height) - var(--nz-admin-offset))!important;
      overflow-y:auto!important; padding:8px 18px!important; border-bottom:1px solid var(--nz-border)!important;
      box-shadow:0 12px 24px rgba(0,0,0,.12)!important;
    }
    .nz-header.nz-menu-open #nz-nav { display:block!important; }
    #nz-nav > ul { flex-direction:column!important; align-items:stretch!important; gap:0!important; }
    #nz-nav a { padding:12px 4px!important; font-size:14px!important; border-bottom:1px solid var(--nz-border)!important; }
    .nz-crumb { padding:6px 14px!important; font-size:11px!important; }
    .nz-photo { position:relative!important; top:auto!important; height:auto!important; min-height:0!important; aspect-ratio:4/3!important; }
    .nz-bottom.nz-share-bar { min-height:64px!important; }
    .nz-share-bar a,.nz-share-bar button { font-size:10px!important; padding:9px 2px!important; }
    .nz-search-heading { padding:23px 16px 0; }
    .nz-search-results .nz-cards .nz-card-title { font-size:17px; margin:8px 11px 12px; }
  }
  @media (max-width:359px) {
    .nz-logo { flex-basis:112px!important; }
    .nz-logo img { max-width:112px!important; }
    .nz-header { gap:4px!important; }
    .nz-header-actions input { width:72px!important; }
  }
  @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto!important; } }
}