/*
Theme Name: GUZ SPORT PRO
Theme URI: https://guzsport.com
Author: GUZ Digital Sports Media
Author URI: https://guzsport.com
Description: High-performance digital sports journalism theme for GUZ SPORT. Features responsive reading ergonomics, dual-figure media presentation, single-row mobile share controls, and high-contrast dark mode.
Version: 2.1.0
License: Proprietary
Text Domain: guz-sport-pro
*/

/* Baseline Reset and High-Contrast Typography */
:root {
  --color-primary: #dc2626;
  --color-primary-hover: #b91c1c;
  --color-slate-950: #020617;
  --color-slate-900: #0f172a;
  --color-slate-800: #1e293b;
  --color-slate-100: #f1f5f9;
}


/* GUZ SPORT MASTER STYLESHEET (Tailwind & Editorial Design System) */
/*
 * GUZ SPORT 2.0 Native Newsroom Design System
 * 100% Bold Athletic Typography & Fluid Viewport Ergonomics
 * Version: 2.0.1
 */

/* ==========================================================================
   1. CSS RESET & CSS CUSTOM PROPERTIES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-brand-dark: #0B0E14;
  --color-brand-surface: #141923;
  --color-brand-border: #222B3D;
  --color-brand-crimson: #D91A2A;
  --color-brand-gold: #FFB800;
  --color-slate-950: #0B0E14;
  --color-slate-900: #141923;
  --color-slate-800: #222B3D;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748b;
  --color-slate-400: #94a3b8;
  --color-slate-300: #cbd5e1;
  --color-slate-200: #e2e8f0;
  --color-slate-100: #f8fafc;
  --color-white: #ffffff;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-headline: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

html {
  font-family: var(--font-sans);
  background-color: var(--color-brand-dark);
  color: var(--color-slate-100);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-brand-dark);
  color: var(--color-slate-100);
  min-height: 100vh;
  font-size: 1rem;
}

/* Sticky Navbar & Right Search Bar Utilities */
#guz-sticky-navbar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  width: 100% !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* WordPress Admin Bar Compatibility */
.admin-bar #guz-sticky-navbar {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  .admin-bar #guz-sticky-navbar {
    top: 46px !important;
  }
}
@media screen and (max-width: 600px) {
  #wpadminbar {
    position: fixed !important;
    top: 0 !important;
  }
  .admin-bar #guz-sticky-navbar {
    top: 46px !important;
  }
}

body.dark {
  background-color: var(--color-brand-dark);
  color: var(--color-slate-100);
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   2. BRAND CUSTOM TOKENS & UTILITIES
   ========================================================================== */
.bg-brand-dark       { background-color: #0B0E14; }
.bg-brand-dark\/95   { background-color: rgba(11, 14, 20, 0.95); }
.bg-brand-dark\/85   { background-color: rgba(11, 14, 20, 0.85); }
.bg-brand-dark\/80   { background-color: rgba(11, 14, 20, 0.80); }
.bg-brand-dark\/60   { background-color: rgba(11, 14, 20, 0.60); }
.bg-brand-surface    { background-color: #141923; }
.bg-brand-surface\/90{ background-color: rgba(20, 25, 35, 0.90); }
.bg-brand-surface\/80{ background-color: rgba(20, 25, 35, 0.80); }
.bg-brand-crimson    { background-color: #D91A2A; }
.bg-brand-gold       { background-color: #FFB800; }
.bg-white            { background-color: #ffffff; }

.bg-slate-950        { background-color: #0B0E14; }
.bg-slate-900        { background-color: #141923; }
.bg-slate-800        { background-color: #222B3D; }
.bg-red-600          { background-color: #D91A2A; }
.bg-red-500          { background-color: #ef4444; }
.bg-red-300          { background-color: #fca5a5; }
.bg-emerald-500      { background-color: #10B981; }

.hover\:bg-brand-dark:hover { background-color: #0B0E14; }

.opacity-100 { opacity: 1; }
.opacity-0   { opacity: 0; }
.translate-y-0  { --tw-translate-y: 0px; }
.translate-y-4  { --tw-translate-y: 1rem; }
.-translate-y-4 { --tw-translate-y: -1rem; }
.pointer-events-auto { pointer-events: auto; }
.guz-ticker-item     { position: absolute; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.border-brand-border    { border-color: #222B3D; }
.border-brand-border\/80{ border-color: rgba(34, 43, 61, 0.80); }
.border-brand-border\/60{ border-color: rgba(34, 43, 61, 0.60); }
.border-brand-border\/40{ border-color: rgba(34, 43, 61, 0.40); }
.border-brand-crimson   { border-color: #D91A2A; }
.border-brand-gold      { border-color: #FFB800; }
.border-brand-gold\/90  { border-color: rgba(255, 184, 0, 0.90); }

.border-slate-800       { border-color: #222B3D; }
.border-slate-700       { border-color: #334155; }
.border-slate-500       { border-color: #64748b; }
.border-red-600         { border-color: #D91A2A; }

.hover\:border-brand-crimson:hover    { border-color: #D91A2A; }
.hover\:border-brand-crimson\/60:hover { border-color: rgba(217, 26, 42, 0.60); }
.hover\:border-brand-crimson\/50:hover { border-color: rgba(217, 26, 42, 0.50); }
.hover\:border-brand-gold:hover       { border-color: #FFB800; }
.hover\:border-slate-500:hover        { border-color: #64748b; }
.hover\:border-slate-700:hover        { border-color: #334155; }
.hover\:bg-red-700:hover              { background-color: #b91c1c; }

.focus\:outline-none:focus            { outline: none; }
.focus\:border-brand-crimson:focus    { border-color: #D91A2A; }

.text-brand-crimson    { color: #D91A2A; }
.text-brand-crimson\/90{ color: rgba(217, 26, 42, 0.90); }
.text-brand-crimson\/80{ color: rgba(217, 26, 42, 0.80); }
.text-brand-gold       { color: #FFB800; }
.text-brand-gold\/90   { color: rgba(255, 184, 0, 0.90); }
.text-red-500          { color: #ef4444; }
.text-red-400          { color: #f87171; }

.hover\:text-brand-gold:hover { color: #FFB800; }
.hover\:text-white:hover      { color: #ffffff; }
.hover\:text-red-400:hover    { color: #f87171; }
.group:hover .group-hover\:text-brand-gold { color: #FFB800; }

.shadow-sm   { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-md   { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); }
.shadow-lg   { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3); }
.shadow-2xl  { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7); }
.shadow-card { box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5); }
.shadow-glow { box-shadow: 0 0 15px rgba(217, 26, 42, 0.4); }

.font-headline { font-family: var(--font-headline); font-feature-settings: "cv02", "cv03", "cv04", "cv11"; }
.font-mono     { font-family: var(--font-mono); }

/* ==========================================================================
   3. CONTAINER & LAYOUT UTILITIES (VIEWPORT PERFECT)
   ========================================================================== */
.max-w-7xl  { max-width: 80rem; }
.max-w-6xl  { max-width: 72rem; }
.max-w-5xl  { max-width: 64rem; }
.max-w-4xl  { max-width: 56rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-xl   { max-width: 36rem; }
.max-w-lg   { max-width: 32rem; }
.max-w-md   { max-width: 28rem; }
.max-w-sm   { max-width: 24rem; }
.max-w-xs   { max-width: 20rem; }
.max-w-none { max-width: none; }
.max-w-full { max-width: 100%; }

.w-full    { width: 100%; }
.w-auto    { width: auto; }
.w-1\.5    { width: 0.375rem; }
.h-1\.5    { height: 0.375rem; }
.w-2\.5    { width: 0.625rem; }
.h-2\.5    { height: 0.625rem; }
.w-3       { width: 0.75rem; }
.h-3       { height: 0.75rem; }
.w-3\.5    { width: 0.875rem; }
.h-3\.5    { height: 0.875rem; }
.w-4       { width: 1rem; }
.h-4       { height: 1rem; }
.w-5       { width: 1.25rem; }
.h-5       { height: 1.25rem; }
.h-6       { height: 1.5rem; }
.w-6       { width: 1.5rem; }
.w-7       { width: 1.75rem; }
.h-7       { height: 1.75rem; }
.w-8       { width: 2rem; }
.h-8       { height: 2rem; }
.w-9       { width: 2.25rem; }
.h-9       { height: 2.25rem; }
.w-10      { width: 2.5rem; }
.h-10      { height: 2.5rem; }
.w-11      { width: 2.75rem; }
.h-11      { height: 2.75rem; }
.w-12      { width: 3rem; }
.h-12      { height: 3rem; }
.w-14      { width: 3.5rem; }
.h-14      { height: 3.5rem; }
.w-16      { width: 4rem; }
.h-16      { height: 4rem; }
.w-20      { width: 5rem; }
.h-20      { height: 5rem; }
.w-24      { width: 6rem; }
.h-24      { height: 6rem; }
.w-28      { width: 7rem; }
.h-28      { height: 7rem; }
.w-44      { width: 11rem; }
.h-40      { height: 10rem; }
.h-44      { height: 11rem; }
.h-48      { height: 12rem; }
.h-64      { height: 16rem; }
.h-full    { height: 100%; }
.h-3\/4    { height: 75%; }
.h-4\/5    { height: 80%; }
.h-auto    { height: auto; }

.min-w-0        { min-width: 0px; }
.min-w-\[34px\] { min-width: 34px; }
.min-w-\[44px\] { min-width: 44px; }
.min-h-\[34px\] { min-height: 34px; }
.min-h-\[44px\] { min-height: 44px; }
.min-h-screen   { min-height: 100vh; }
.min-h-\[200px\]{ min-height: 200px; }
.min-h-\[280px\]{ min-height: 280px; }
.min-h-\[320px\]{ min-height: 320px; }
.min-h-\[420px\]{ min-height: 420px; }
.min-h-\[460px\]{ min-height: 460px; }
.max-h-\[500px\]{ max-height: 500px; }
.max-h-\[550px\]{ max-height: 550px; }

.mx-auto   { margin-left: auto; margin-right: auto; }
.mx-1      { margin-left: 0.25rem; margin-right: 0.25rem; }
.my-auto   { margin-top: auto; margin-bottom: auto; }
.my-4      { margin-top: 1rem; margin-bottom: 1rem; }
.my-6      { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-8      { margin-top: 2rem; margin-bottom: 2rem; }
.my-10     { margin-top: 2.5rem; margin-bottom: 2.5rem; }

.mt-0\.5   { margin-top: 0.125rem; }
.mt-1      { margin-top: 0.25rem; }
.mt-1\.5   { margin-top: 0.375rem; }

/* ==========================================================================
   4. FLEXBOX & GRID SYSTEM
   ========================================================================== */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }

.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }
.flex-1       { flex: 1 1 0%; }
.flex-shrink-0,
.shrink-0     { flex-shrink: 0; }
.flex-grow,
.grow         { flex-grow: 1; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-baseline{ align-items: baseline; }
.items-stretch { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-span-1   { grid-column: span 1 / span 1; }
.col-span-2   { grid-column: span 2 / span 2; }
.col-span-3   { grid-column: span 3 / span 3; }
.col-span-full{ grid-column: 1 / -1; }

.gap-1   { gap: 0.25rem; }
.gap-1\.5{ gap: 0.375rem; }
.gap-2   { gap: 0.5rem; }
.gap-2\.5{ gap: 0.625rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-5   { gap: 1.25rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }
.gap-y-2 { row-gap: 0.5rem; }

/* Space-y and Space-x utilities */
.space-y-1 > :not([hidden]) ~ :not([hidden])   { margin-top: 0.25rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){ margin-top: 0.375rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden])   { margin-top: 0.5rem; }
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]){ margin-top: 0.625rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden])   { margin-top: 0.75rem; }
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]){ margin-top: 0.875rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden])   { margin-top: 1rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden])   { margin-top: 1.25rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden])   { margin-top: 1.5rem; }
.space-y-8 > :not([hidden]) ~ :not([hidden])   { margin-top: 2rem; }
.space-y-10 > :not([hidden]) ~ :not([hidden])  { margin-top: 2.5rem; }
.space-y-12 > :not([hidden]) ~ :not([hidden])  { margin-top: 3rem; }

.space-x-1 > :not([hidden]) ~ :not([hidden])   { margin-left: 0.25rem; }
.space-x-1\.5 > :not([hidden]) ~ :not([hidden]){ margin-left: 0.375rem; }
.space-x-2 > :not([hidden]) ~ :not([hidden])   { margin-left: 0.5rem; }
.space-x-2\.5 > :not([hidden]) ~ :not([hidden]){ margin-left: 0.625rem; }
.space-x-3 > :not([hidden]) ~ :not([hidden])   { margin-left: 0.75rem; }
.space-x-3\.5 > :not([hidden]) ~ :not([hidden]){ margin-left: 0.875rem; }
.space-x-4 > :not([hidden]) ~ :not([hidden])   { margin-left: 1rem; }
.space-x-5 > :not([hidden]) ~ :not([hidden])   { margin-left: 1.25rem; }
.space-x-6 > :not([hidden]) ~ :not([hidden])   { margin-left: 1.5rem; }

/* ==========================================================================
   5. SPACING UTILITIES (PADDING & MARGIN)
   ========================================================================== */
.p-1    { padding: 0.25rem; }
.p-1\.5 { padding: 0.375rem; }
.p-2    { padding: 0.5rem; }
.p-2\.5 { padding: 0.625rem; }
.p-3    { padding: 0.75rem; }
.p-3\.5 { padding: 0.875rem; }
.p-4    { padding: 1rem; }
.p-5    { padding: 1.25rem; }
.p-6    { padding: 1.5rem; }
.p-8    { padding: 2rem; }

.px-2   { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5{ padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-3\.5{ padding-left: 0.875rem; padding-right: 0.875rem; }
.px-4   { padding-left: 1rem; padding-right: 1rem; }
.px-5   { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6   { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8   { padding-left: 2rem; padding-right: 2rem; }

.py-0\.5{ padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1   { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5{ padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2   { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5{ padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3   { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5{ padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4   { padding-top: 1rem; padding-bottom: 1rem; }
.py-6   { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8   { padding-top: 2rem; padding-bottom: 2rem; }
.py-10  { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12  { padding-top: 3rem; padding-bottom: 3rem; }
.py-16  { padding-top: 4rem; padding-bottom: 4rem; }
.py-24  { padding-top: 6rem; padding-bottom: 6rem; }

.pt-1   { padding-top: 0.25rem; }
.pt-1\.5{ padding-top: 0.375rem; }
.pt-2   { padding-top: 0.5rem; }
.pt-2\.5{ padding-top: 0.625rem; }
.pt-3   { padding-top: 0.75rem; }
.pt-4   { padding-top: 1rem; }
.pt-6   { padding-top: 1.5rem; }
.pt-8   { padding-top: 2rem; }
.pl-1\.5{ padding-left: 0.375rem; }
.pl-2   { padding-left: 0.5rem; }
.pl-3   { padding-left: 0.75rem; }
.pl-6   { padding-left: 1.5rem; }
.pl-7   { padding-left: 1.75rem; }
.pl-8   { padding-left: 2rem; }
.pl-10  { padding-left: 2.5rem; }
.pr-0\.5{ padding-right: 0.125rem; }
.pr-1   { padding-right: 0.25rem; }
.pl-0\.5{ padding-left: 0.125rem; }
.px-1   { padding-left: 0.25rem; padding-right: 0.25rem; }
.left-3\.5 { left: 0.875rem; }
.border-2   { border-width: 2px; }
.border-t-2 { border-top-width: 2px; }

.pb-1   { padding-bottom: 0.25rem; }
.pb-2   { padding-bottom: 0.5rem; }
.pb-2\.5{ padding-bottom: 0.625rem; }
.pb-3   { padding-bottom: 0.75rem; }
.pb-4   { padding-bottom: 1rem; }
.pb-5   { padding-bottom: 1.25rem; }
.pb-6   { padding-bottom: 1.5rem; }
.pb-8   { padding-bottom: 2rem; }

.mt-0\.5{ margin-top: 0.125rem; }
.mt-1   { margin-top: 0.25rem; }
.mt-2   { margin-top: 0.5rem; }
.mt-3   { margin-top: 0.75rem; }
.mt-4   { margin-top: 1rem; }
.mt-6   { margin-top: 1.5rem; }
.mt-8   { margin-top: 2rem; }
.mb-1   { margin-bottom: 0.25rem; }
.mb-1\.5{ margin-bottom: 0.375rem; }
.mb-2   { margin-bottom: 0.5rem; }
.mb-3   { margin-bottom: 0.75rem; }
.mb-4   { margin-bottom: 1rem; }
.mb-5   { margin-bottom: 1.25rem; }
.mb-6   { margin-bottom: 1.5rem; }
.ml-0\.5{ margin-left: 0.125rem; }
.ml-1\.5{ margin-left: 0.375rem; }
.ml-2   { margin-left: 0.5rem; }

/* ==========================================================================
   6. GRADIENTS, COLORS & TEXT (HIGH CONTRAST & BOLD)
   ========================================================================== */
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }

.from-brand-dark  { --tw-gradient-from: #0B0E14; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(11, 14, 20, 0)); }
.from-brand-gold  { --tw-gradient-from: #FFB800; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 184, 0, 0)); }
.via-brand-crimson{ --tw-gradient-stops: var(--tw-gradient-from, #FFB800), #D91A2A, var(--tw-gradient-to, rgba(217, 26, 42, 0)); }
.to-brand-gold    { --tw-gradient-to: #FFB800; }
.via-brand-dark\/85{ --tw-gradient-stops: var(--tw-gradient-from, #0B0E14), rgba(11, 14, 20, 0.85), var(--tw-gradient-to, rgba(11, 14, 20, 0)); }
.via-brand-dark   { --tw-gradient-stops: var(--tw-gradient-from, #141923), #0B0E14, var(--tw-gradient-to, #141923); }
.from-brand-surface{ --tw-gradient-from: #141923; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, #141923); }
.to-brand-surface { --tw-gradient-to: #141923; }
.to-transparent   { --tw-gradient-to: transparent; }

.h-\[1\.5px\] { height: 1.5px; }
.h-\[2px\]   { height: 2px; }
.h-\[2\.5px\] { height: 2.5px; }
.my-0\.5     { margin-top: 0.125rem; margin-bottom: 0.125rem; }

.text-white     { color: #ffffff; }
.text-slate-100 { color: #f8fafc; }
.text-slate-200 { color: #e2e8f0; }
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }

.hover\:text-white:hover { color: #ffffff; }
.hover\:underline:hover  { text-decoration: underline; }

/* Bold Typographic Sizing Hierarchy */
.text-\[7px\]  { font-size: 7.5px; line-height: 10px; }
.text-\[8px\]  { font-size: 8.5px; line-height: 11px; }
.text-\[9px\]  { font-size: 9.5px; line-height: 13px; }
.text-\[10px\] { font-size: 10.5px; line-height: 15px; }
.text-\[11px\] { font-size: 11.5px; line-height: 16px; }
.text-\[13px\] { font-size: 13.5px; line-height: 18px; }
.text-xs   { font-size: 0.8125rem; line-height: 1.15rem; }
.text-sm   { font-size: 0.9375rem; line-height: 1.35rem; }
.text-base { font-size: 1.0625rem; line-height: 1.6rem; }
.text-lg   { font-size: 1.1875rem; line-height: 1.8rem; }
.text-xl   { font-size: 1.375rem; line-height: 1.9rem; }
.text-2xl  { font-size: 1.625rem; line-height: 2.1rem; }
.text-3xl  { font-size: 2rem; line-height: 2.4rem; }
.text-4xl  { font-size: 2.5rem; line-height: 2.8rem; }
.text-5xl  { font-size: 3.25rem; line-height: 1.1; }
.text-6xl  { font-size: 4rem; line-height: 1.05; }
.text-8xl  { font-size: 6rem; line-height: 1; }

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold{ font-weight: 800; }
.font-black    { font-weight: 900; }
.italic        { font-style: italic; }

.uppercase       { text-transform: uppercase; }
.tracking-tighter{ letter-spacing: -0.05em; }
.tracking-tight  { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0em; }
.tracking-wide   { letter-spacing: 0.035em; }
.tracking-wider  { letter-spacing: 0.06em; }
.tracking-\[0\.16em\] { letter-spacing: 0.16em; }
.tracking-\[0\.18em\] { letter-spacing: 0.18em; }
.tracking-\[0\.2em\]  { letter-spacing: 0.2em; }

.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.2; }
.leading-snug    { line-height: 1.35; }
.leading-normal  { line-height: 1.5; }
.leading-relaxed { line-height: 1.65; }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.truncate         { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap{ white-space: nowrap; }
.line-clamp-2     { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3     { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.break-words      { overflow-wrap: break-word; word-break: break-word; }

/* ==========================================================================
   7. BORDERS, ROUNDING & SHADOWS
   ========================================================================== */
.border              { border-width: 1px; border-style: solid; border-color: #222B3D; }
.border-2            { border-width: 2px; border-style: solid; border-color: #222B3D; }
.border-t            { border-top-width: 1px; border-top-style: solid; border-top-color: #222B3D; }
.border-t-2          { border-top-width: 2px; border-top-style: solid; border-top-color: #222B3D; }
.border-b            { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #222B3D; }
.border-b-2          { border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #222B3D; }
.border-y            { border-top-width: 1px; border-bottom-width: 1px; border-style: solid; border-color: #222B3D; }
.border-l            { border-left-width: 1px; border-left-style: solid; border-left-color: #222B3D; }
.border-l-2          { border-left-width: 2px; border-left-style: solid; }
.border-l-4          { border-left-width: 4px; border-left-style: solid; border-left-color: #D91A2A; }
.border-transparent  { border-color: transparent; }

.rounded     { border-radius: 0.25rem; }
.rounded-md  { border-radius: 0.375rem; }
.rounded-lg  { border-radius: 0.5rem; }
.rounded-xl  { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full{ border-radius: 9999px; }

/* ==========================================================================
   8. POSITIONING & ANIMATIONS
   ========================================================================== */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

.top-0     { top: 0px; }
.-top-1    { top: -0.25rem; }
.bottom-0  { bottom: 0px; }
.left-0    { left: 0px; }
.right-0   { right: 0px; }
.inset-0   { top: 0px; right: 0px; bottom: 0px; left: 0px; }
.inset-x-0 { left: 0px; right: 0px; }
.left-1\.5 { left: 0.375rem; }
.left-2    { left: 0.5rem; }

.z-0  { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }

.pointer-events-none { pointer-events: none; }
.cursor-pointer      { cursor: pointer; }
.select-none         { user-select: none; }
.overflow-hidden     { overflow: hidden; }
.overflow-x-auto     { overflow-x: auto; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.object-cover  { object-fit: cover; }
.object-center { object-position: center; }

.transform     { transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }
.scale-y-\[1\.18\] { --tw-scale-y: 1.18; }
.origin-bottom { transform-origin: bottom; }

.transition-colors    { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-duration: 300ms; }
.transition-all       { transition-property: all; transition-duration: 150ms; }
.duration-300         { transition-duration: 300ms; }
.duration-500         { transition-duration: 500ms; }

.group:hover .group-hover\:scale-105 { transform: scale(1.05); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* ==========================================================================
   HIGH-LEGIBILITY EDITORIAL PROSE & ARTICLE TYPOGRAPHY (MOBILE & DESKTOP)
   ========================================================================== */
.prose {
  font-size: 1.125rem;
  line-height: 1.85;
  color: #f1f5f9;
  max-width: 100%;
}
.prose p {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.85;
  color: #f1f5f9;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}
.prose h2 { font-size: 1.625rem; }
.prose h3 { font-size: 1.375rem; }
.prose h4 { font-size: 1.1875rem; }
.prose strong, .prose b { color: #ffffff; font-weight: 800; }
.prose em, .prose i { color: #FFB800; font-style: italic; }
.prose a { color: #FFB800; text-decoration: underline; font-weight: 700; }
.prose a:hover { color: #ffffff; }
.prose blockquote {
  border-left: 4px solid #D91A2A;
  background-color: #141923;
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  border-radius: 0.75rem;
  font-style: italic;
  font-size: 1.1875rem;
  color: #f8fafc;
}
.prose ul, .prose ol {
  margin: 1.25rem 0;
  padding-left: 1.5rem;
}
.prose li {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  color: #f1f5f9;
}
.guz-source-attribution {
  background: #141923;
  border: 1px solid #222B3D;
  border-radius: 0.75rem;
  padding: 0.875rem 1.25rem;
  margin-top: 2rem;
  font-size: 0.9375rem;
  color: #94a3b8;
}

/* ==========================================================================
   9. RESPONSIVE BREAKPOINTS (SM, MD, LG)
   ========================================================================== */
@media (min-width: 480px) {
  .xs\:block { display: block; }
  .xs\:inline-block { display: inline-block; }
  .xs\:text-sm { font-size: 0.9375rem; line-height: 1.35rem; }
  .xs\:text-\[8px\] { font-size: 8.5px; line-height: 11px; }
  .xs\:text-xl { font-size: 1.375rem; line-height: 1.9rem; }
  .xs\:text-3xl { font-size: 2rem; line-height: 2.4rem; }
  .xs\:w-24 { width: 6rem; }
  .xs\:w-32 { width: 8rem; }
}

@media (min-width: 640px) {
  .sm\:flex-row     { flex-direction: row; }
  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) { margin-top: 0px; }
  .sm\:space-x-1\.5 > :not([hidden]) ~ :not([hidden]){ margin-left: 0.375rem; }
  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; }
  .sm\:space-x-2\.5 > :not([hidden]) ~ :not([hidden]){ margin-left: 0.625rem; }
  .sm\:space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }
  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }
  .sm\:space-x-5 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.25rem; }
  .sm\:space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
  .sm\:space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
  .sm\:space-y-3\.5 > :not([hidden]) ~ :not([hidden]){ margin-top: 0.875rem; }
  .sm\:space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
  .sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
  .sm\:space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:gap-4        { gap: 1rem; }
  .sm\:gap-6        { gap: 1.5rem; }
  .sm\:gap-8        { gap: 2rem; }
  .sm\:gap-12       { gap: 3rem; }
  .sm\:px-2\.5      { padding-left: 0.625rem; padding-right: 0.625rem; }
  .sm\:px-3         { padding-left: 0.75rem; padding-right: 0.75rem; }
  .sm\:px-4         { padding-left: 1rem; padding-right: 1rem; }
  .sm\:px-6         { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-1         { padding-top: 0.25rem; padding-bottom: 0.25rem; }
  .sm\:py-1\.5      { padding-top: 0.375rem; padding-bottom: 0.375rem; }
  .sm\:py-2\.5      { padding-top: 0.625rem; padding-bottom: 0.625rem; }
  .sm\:py-3         { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .sm\:py-3\.5      { padding-top: 0.875rem; padding-bottom: 0.875rem; }
  .sm\:py-6         { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .sm\:py-8         { padding-top: 2rem; padding-bottom: 2rem; }
  .sm\:py-10        { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .sm\:py-12        { padding-top: 3rem; padding-bottom: 3rem; }
  .sm\:p-2          { padding: 0.5rem; }
  .sm\:p-2\.5        { padding: 0.625rem; }
  .sm\:p-4          { padding: 1rem; }
  .sm\:p-5          { padding: 1.25rem; }
  .sm\:p-6          { padding: 1.5rem; }
  .sm\:p-7          { padding: 1.75rem; }
  .sm\:p-8          { padding: 2rem; }
  .sm\:pb-3         { padding-bottom: 0.75rem; }
  .sm\:pb-6         { padding-bottom: 1.5rem; }
  .sm\:pb-7         { padding-bottom: 1.75rem; }
  .sm\:pt-2         { padding-top: 0.5rem; }
  .sm\:pl-8         { padding-left: 2rem; }
  .sm\:pl-9         { padding-left: 2.25rem; }
  .sm\:mb-4         { margin-bottom: 1rem; }
  .sm\:mb-6         { margin-bottom: 1.5rem; }
  .sm\:mb-7         { margin-bottom: 1.75rem; }
  .sm\:ml-2         { margin-left: 0.5rem; }
  .sm\:my-6         { margin-top: 1.5rem; margin-bottom: 1.5rem; }
  .sm\:my-8         { margin-top: 2rem; margin-bottom: 2rem; }
  .sm\:my-10        { margin-top: 2.5rem; margin-bottom: 2.5rem; }
  .sm\:mt-16        { margin-top: 4rem; }
  .sm\:w-28         { width: 7rem; }
  .sm\:h-28         { height: 7rem; }
  .sm\:w-44         { width: 11rem; }
  .sm\:w-48         { width: 12rem; }
  .sm\:w-52         { width: 13rem; }
  .sm\:h-32         { height: 8rem; }
  .sm\:h-36         { height: 9rem; }
  .sm\:h-40         { height: 10rem; }
  .sm\:h-44         { height: 11rem; }
  .sm\:h-48         { height: 12rem; }
  .sm\:h-\[2\.5px\] { height: 2.5px; }
  .sm\:w-7          { width: 1.75rem; }
  .sm\:h-7          { height: 1.75rem; }
  .sm\:w-5          { width: 1.25rem; }
  .sm\:h-5          { height: 1.25rem; }
  .sm\:w-4          { width: 1rem; }
  .sm\:h-4          { height: 1rem; }
  .sm\:w-3\.5       { width: 0.875rem; }
  .sm\:h-3\.5       { height: 0.875rem; }
  .sm\:w-3          { width: 0.75rem; }
  .sm\:h-3          { height: 0.75rem; }
  .sm\:min-h-\[460px\]{ min-height: 460px; }
  .sm\:min-h-\[480px\]{ min-height: 480px; }
  .sm\:h-3\/4       { height: 75%; }
  .sm\:left-2\.5    { left: 0.625rem; }
  .sm\:left-3       { left: 0.75rem; }
  .sm\:text-left    { text-align: left; }
  .sm\:text-xs      { font-size: 0.8125rem; line-height: 1.15rem; }
  .sm\:text-sm      { font-size: 0.9375rem; line-height: 1.35rem; }
  .sm\:text-base    { font-size: 1.0625rem; line-height: 1.6rem; }
  .sm\:text-lg      { font-size: 1.1875rem; line-height: 1.8rem; }
  .sm\:text-xl      { font-size: 1.375rem; line-height: 1.9rem; }
  .sm\:text-2xl     { font-size: 1.625rem; line-height: 2.1rem; }
  .sm\:text-3xl     { font-size: 2rem; line-height: 2.4rem; }
  .sm\:text-4xl     { font-size: 2.5rem; line-height: 2.8rem; }
  .sm\:text-5xl     { font-size: 3.25rem; line-height: 1.1; }
  .sm\:text-8xl     { font-size: 6rem; line-height: 1; }
  .sm\:text-\[8px\] { font-size: 8.5px; line-height: 11px; }
  .sm\:text-\[9px\] { font-size: 9.5px; line-height: 13px; }
  .sm\:text-\[10px\]{ font-size: 10.5px; line-height: 15px; }
  .sm\:text-\[11px\]{ font-size: 11.5px; line-height: 16px; }
  .sm\:text-slate-400{ color: #94a3b8; }
  .sm\:tracking-\[0\.2em\]{ letter-spacing: 0.2em; }
  .sm\:tracking-\[0\.22em\]{ letter-spacing: 0.22em; }
  .sm\:leading-tight{ line-height: 1.2; }
  .sm\:inline       { display: inline; }
  .sm\:hidden       { display: none; }
  .sm\:-top-1\.5    { top: -0.375rem; }
  .sm\:-top-2       { top: -0.5rem; }
}

@media (min-width: 768px) {
  .md\:block        { display: block; }
  .md\:flex         { display: flex; }
  .md\:hidden       { display: none; }
  .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:text-lg      { font-size: 1.1875rem; line-height: 1.8rem; }
  .md\:text-xl      { font-size: 1.375rem; line-height: 1.9rem; }
  .md\:text-2xl     { font-size: 1.625rem; line-height: 2.1rem; }
  .md\:text-3xl     { font-size: 2rem; line-height: 2.4rem; }
  .md\:text-4xl     { font-size: 2.5rem; line-height: 2.8rem; }
  .md\:text-5xl     { font-size: 3.25rem; line-height: 1.1; }
  .md\:text-6xl     { font-size: 4rem; line-height: 1.05; }
  .md\:text-\[10px\]{ font-size: 10.5px; line-height: 15px; }
  .md\:text-\[11px\]{ font-size: 11.5px; line-height: 16px; }
}

@media (min-width: 1024px) {
  .lg\:flex         { display: flex; }
  .lg\:hidden       { display: none; }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:col-span-2   { grid-column: span 2 / span 2; }
  .lg\:px-8         { padding-left: 2rem; padding-right: 2rem; }
  .lg\:text-6xl     { font-size: 4rem; line-height: 1.05; }
}

/* ==========================================================================
   10. PROSE TYPOGRAPHY (HIGH-CONTRAST EDITORIAL READING)
   ========================================================================== */
.prose, .prose-invert, .prose-slate {
  color: #f1f5f9;
  max-width: 68ch;
  font-size: 1.125rem;
  line-height: 1.8;
}
.prose p {
  margin-bottom: 1.75rem;
  line-height: 1.8;
  color: #f1f5f9;
}
.prose h2, .prose h3, .prose h4 {
  color: #ffffff;
  font-family: var(--font-headline);
  font-weight: 800;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.prose h2 { font-size: 1.875rem; }
.prose h3 { font-size: 1.5rem; }
.prose h4 { font-size: 1.25rem; }

.prose blockquote {
  border-left: 4px solid #D91A2A;
  padding-left: 1.25rem;
  font-style: italic;
  font-weight: 600;
  color: #ffffff;
  margin: 2rem 0;
  background-color: rgba(20, 25, 35, 0.6);
  padding: 1rem 1.25rem;
  border-radius: 0 0.5rem 0.5rem 0;
}

.prose strong, .prose b {
  color: #ffffff;
  font-weight: 800;
}

.prose ul, .prose ol {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
}
.prose li {
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   11. GUZ SPORT NEWSWIRE LIVE COMPONENTS & UTILITIES
   ========================================================================== */
.guz-nw-card { transition: all 0.3s ease-in-out; }
.guz-nw-img { transition: transform 0.5s ease; }
.guz-nw-sport { z-index: 10; }
.guz-nw-time { z-index: 10; }
.guz-nw-headline { line-height: 1.35; }
.guz-nw-brief { line-height: 1.5; }
.guz-nw-tier { letter-spacing: 0.05em; }
.guz-nw-action { text-decoration: none; }

.aspect-video { aspect-ratio: 16 / 9; }
.gap-3\.5 { gap: 0.875rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.mr-1 { margin-right: 0.25rem; }
.bottom-2 { bottom: 0.5rem; }
.right-2 { right: 0.5rem; }
.text-black { color: #000000; }
.text-brand-dark { color: #0B0E14; }
.to-brand-dark { --tw-gradient-to: #0B0E14 var(--tw-gradient-to-position); }

.border-brand-border\/90 { border-color: rgba(34, 43, 61, 0.9); }
.bg-brand-crimson\/15 { background-color: rgba(217, 26, 42, 0.15); }
.border-brand-crimson\/30 { border-color: rgba(217, 26, 42, 0.3); }
.bg-brand-dark\/90 { background-color: rgba(11, 14, 20, 0.9); }
.via-brand-dark\/30 { --tw-gradient-via: rgba(11, 14, 20, 0.3); }
.bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }
.border-brand-gold\/40 { border-color: rgba(255, 184, 0, 0.4); }

/* Arbitrary color mappings: from-[#0d2818] border-[#166534] text-[#22c55e] bg-[#22c55e] hover:bg-[#16a34a] */
.from-\[\#0d2818\] { --tw-gradient-from: #0d2818; }
.border-\[\#166534\] { border-color: #166534; }
.text-\[\#22c55e\] { color: #22c55e; }
.bg-\[\#22c55e\] { background-color: #22c55e; }

.hover\:border-brand-gold\/60:hover { border-color: rgba(255, 184, 0, 0.6); }
.hover\:bg-brand-crimson:hover { background-color: #D91A2A; }
.hover\:bg-brand-crimson\/90:hover { background-color: rgba(217, 26, 42, 0.9); }
.hover\:bg-brand-gold\/90:hover { background-color: rgba(255, 184, 0, 0.9); }
.hover\:bg-\[\#16a34a\]:hover { background-color: #16a34a; }

@media (min-width: 640px) {
  .sm\:p-3\.5 { padding: 0.875rem; }
  .sm\:text-\[15px\] { font-size: 15px; }
  .sm\:justify-start { justify-content: flex-start; }
  .sm\:gap-3 { gap: 0.75rem; }
  .sm\:text-\[13px\] { font-size: 13px; }
}

/* GUZ SPORT Compact Mobile Newswire Utilities */
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.125rem * var(--tw-space-y-reverse)); }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }
.guz-nw-filter-btn { cursor: pointer; transition: all 0.2s ease; }
.hover\:bg-brand-surface:hover { background-color: #161B22; }
.from-brand-dark\/80 { --tw-gradient-from: rgba(11, 14, 20, 0.8) var(--tw-gradient-from-position); --tw-gradient-to: rgba(11, 14, 20, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-transparent { --tw-gradient-to: rgba(0, 0, 0, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to); }
.bg-blue-950\/80 { background-color: rgba(23, 37, 84, 0.8); }
.text-blue-400 { color: #60a5fa; }
.border-blue-500\/40 { border-color: rgba(59, 130, 246, 0.4); }
.gap-0\.5 { gap: 0.125rem; }

/* Vibrant Solid Sport Badge Colors (Matching Mockup) */
.bg-blue-600 { background-color: #2563eb; }
.bg-purple-600 { background-color: #7c3aed; }
.bg-emerald-600 { background-color: #059669; }
.bg-red-600 { background-color: #dc2626; }
.bg-amber-600 { background-color: #d97706; }
.bg-sky-600 { background-color: #0284c7; }
.bg-indigo-600 { background-color: #4f46e5; }
.bg-teal-600 { background-color: #0d9488; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { 
  .sm\:gap-3\.5 { gap: 0.875rem; } 
  .sm\:space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); }
}
@media (min-width: 768px) { 
  .md\:text-sm { font-size: 0.875rem; } 
  .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
}
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }

/* Sticky Navbar & Right Search Bar Utilities */
#guz-sticky-navbar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#guz-sticky-navbar.guz-pinned-sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}

.admin-bar #guz-sticky-navbar {
  top: 32px !important;
}
.admin-bar #guz-sticky-navbar.guz-pinned-sticky {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  .admin-bar #guz-sticky-navbar {
    top: 46px !important;
  }
  .admin-bar #guz-sticky-navbar.guz-pinned-sticky {
    top: 46px !important;
  }
}

@media screen and (max-width: 600px) {
  #wpadminbar {
    position: fixed !important;
    top: 0 !important;
  }
  .admin-bar #guz-sticky-navbar {
    top: 46px !important;
  }
  .admin-bar #guz-sticky-navbar.guz-pinned-sticky {
    top: 46px !important;
  }
}

.ml-auto { margin-left: auto; }
.guz-mobile-menu-trigger { cursor: pointer; }
.bg-brand-surface\/95 { background-color: rgba(20, 25, 35, 0.95); }


.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bg-brand-dark\/70 { background-color: rgba(11, 14, 20, 0.7); }

.rounded-t-md { border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; }
.pr-8 { padding-right: 2rem; }
.pr-10 { padding-right: 2.5rem; }
.right-1\.5 { right: 0.375rem; }
.right-3 { right: 0.75rem; }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }
.placeholder\:text-slate-400::placeholder { color: #94a3b8; }

@media (min-width: 480px) {
  .xs\:w-36 { width: 9rem; }
}

@media (min-width: 640px) {
  .sm\:px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
  .sm\:pr-9 { padding-right: 2.25rem; }
  .sm\:right-2 { right: 0.5rem; }
}

@media (min-width: 1024px) {
  .lg\:w-56 { width: 14rem; }
}

/* Editorial & Desk Utilities */
.gap-y-1\.5 { row-gap: 0.375rem; }
.border-emerald-500\/40 { border-color: rgba(16, 185, 129, 0.4); }
.text-emerald-400 { color: #34d399; }
.bg-emerald-400 { background-color: #34d399; }
.bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.2); }
.bg-emerald-500 { background-color: #10b981; }
.hover\:bg-emerald-500:hover { background-color: #10b981; }
.leading-\[1\.18\] { line-height: 1.18; }
.leading-\[1\.8\] { line-height: 1.8; }
.group:hover .group-hover\:border-brand-crimson { border-color: var(--color-brand-crimson); }
.bg-\[\#25D366\]\/20 { background-color: rgba(37, 211, 102, 0.2); }
.hover\:bg-\[\#25D366\]:hover { background-color: #25D366; }
.text-\[\#25D366\] { color: #25D366; }
.hover\:text-black:hover { color: #000000; }
.hover\:bg-white:hover { background-color: #ffffff; }
.bg-blue-900\/30 { background-color: rgba(30, 58, 138, 0.3); }
.hover\:bg-blue-600:hover { background-color: #2563eb; }
.hover\:text-brand-dark:hover { color: var(--color-brand-dark); }
.bg-brand-surface\/60 { background-color: rgba(20, 25, 35, 0.6); }
.min-h-\[60px\] { min-height: 60px; }
.tracking-widest { letter-spacing: 0.1em; }
.max-h-\[560px\] { max-height: 560px; }
.guz-article-body { font-family: var(--font-body); }
.hover\:border-brand-crimson\/70:hover { border-color: rgba(217, 26, 42, 0.7); }
.z-40 { z-index: 40; }
.bg-\[\#25D366\] { background-color: #25D366; }
.duration-200 { transition-duration: 200ms; }
.top-2\.5 { top: 0.625rem; }

@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:inline-block { display: inline-block; }
}

@media (min-width: 768px) {
  .md\:text-\[19px\] { font-size: 19px; }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:flex-col { flex-direction: column; }
  .md\:items-end { align-items: flex-end; }
  .md\:justify-center { justify-content: center; }
  .md\:border-t-0 { border-top-width: 0px; }
  .md\:border-l { border-left-width: 1px; }
  .md\:pt-0 { padding-top: 0px; }
  .md\:pl-6 { padding-left: 1.5rem; }
}