/*
Theme Name: FaharasNET
Theme URI: https://faharas.net/
Description: Modern news aggregation theme with AI fact-checking, glass morphism design, and dark mode support.
Author: Faharas Team
Author URI: https://faharas.com/
Version: 4.0.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: faharasnet
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
*/

/**
 * FaharasNET CSS Architecture
 * @author  Faharas Team
 * @version 4.0.1
 * @license GPL-2.0-or-later
 * @link    https://faharas.net/
 */

/* Cascade Layers for better specificity control */
@layer reset, base, layout, components, utilities;

@layer reset {
  /* Modern CSS Reset - 2025 Optimized */
  *,*::before,*::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
  }
  
  html{
    scroll-behavior:smooth;
    scroll-padding-top:5rem;
    overflow-x:hidden;
    text-size-adjust:100%;
    /* Removed vendor prefixes - not needed in 2025 */
    font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  
  body{
    font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    font-size:var(--text-base);
    line-height:1.6;
    background:var(--c-bg);
    color:var(--c-text);
    overflow-x:hidden;
    text-rendering:optimizeLegibility;
    font-variant-numeric:tabular-nums;
    min-block-size:100dvh;
  }
  
  img{
    display:block;
    max-inline-size:100%;
    block-size:auto;
    font-style:italic;
  }
  
  button,input,textarea,select{
    font:inherit;
    color:inherit;
  }
  
  button{
    background:transparent;
    border:none;
    cursor:pointer;
    touch-action:manipulation;
  }
  
  a{
    color:inherit;
    text-decoration:none;
  }
  
  ul,ol{
    list-style:none;
  }
  
  h1,h2,h3,h4,h5,h6{
    line-height:1.3;
    letter-spacing:-0.02em;
    text-wrap:balance;
  }
  
  p{
    line-height:1.7;
  }
}

@layer base {
  :root {
    /* Primary Colors - HSL for easier adjustments */
    --c-text: hsl(30, 6%, 8%);
    --c-text-2: hsl(30, 2%, 23%);
    --c-text-3: hsl(30, 2%, 43%);
    --c-bg: hsl(0, 0%, 100%);
    --c-bg-2: hsl(36, 23%, 96%);
    --c-bg-3: hsl(30, 19%, 90%);
    --c-accent: hsl(209, 60%, 45%);
    --c-border: hsl(42, 25%, 82%);
    --c-success: hsl(120, 56%, 28%);
    --c-danger: hsl(7, 55%, 40%);
    --c-warning: hsl(38, 92%, 50%);
    --c-info: hsl(199, 98%, 40%);
    
    /* Computed Colors - Based on primary HSL values */
    --c-surface: var(--c-bg);
    --c-accent-hover: hsl(209, 60%, 38%);
    --c-accent-subtle: hsl(209, 40%, 97%);
    --c-accent-border: hsla(209, 60%, 45%, 0.28);
    --c-glass: hsla(0, 0%, 100%, 0.85);
    --c-line: hsla(42, 25%, 82%, 0.5);
    --c-line-subtle: hsla(42, 25%, 82%, 0.3);
    
    /* Alpha Overlays */
    --c-white-20: hsla(0, 0%, 100%, 0.2);
    --c-black-5: hsla(0, 0%, 0%, 0.05);
    --c-black-10: hsla(0, 0%, 0%, 0.1);
    --c-black-15: hsla(0, 0%, 0%, 0.15);
    --c-black-20: hsla(0, 0%, 0%, 0.2);
    --c-black-25: hsla(0, 0%, 0%, 0.25);
    --c-black-30: hsla(0, 0%, 0%, 0.3);
    
    /* Shadows */
    --shadow-sm: 0 1px 3px 0 hsla(0, 0%, 0%, 0.1);
    --shadow-md: 0 4px 6px -1px hsla(0, 0%, 0%, 0.1);
    --shadow-lg: 0 10px 25px hsla(0, 0%, 0%, 0.08);
    
    /* Spacing */
    --space-2xs: 0.125rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1.25rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 5rem;
    
    /* Typography */
    --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
    --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
    --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
    --text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);
    --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
    
    /* Layout */
    --container: 62.5rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    
    /* Animation */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    
    accent-color: var(--c-accent);
  }
  
  [data-theme="dark"] {
    /* Primary Colors - Adjusted HSL for dark mode */
    --c-text: hsl(36, 23%, 96%);
    --c-text-2: hsl(36, 9%, 71%);
    --c-text-3: hsl(30, 3%, 58%);
    --c-bg: hsl(30, 6%, 8%);
    --c-bg-2: hsl(45, 7%, 11%);
    --c-bg-3: hsl(36, 8%, 14%);
    --c-accent: hsl(209, 52%, 64%);
    --c-border: hsl(30, 2%, 23%);
    --c-success: hsl(97, 34%, 49%);
    --c-danger: hsl(0, 69%, 68%);
    --c-warning: hsl(45, 96%, 56%);
    --c-info: hsl(199, 92%, 60%);
    
    /* Computed Colors - Adjusted for dark theme */
    --c-surface: var(--c-bg-2);
    --c-accent-hover: hsl(209, 52%, 72%);
    --c-accent-subtle: hsl(209, 35%, 15%);
    --c-accent-border: hsla(209, 52%, 64%, 0.4);
    --c-glass: hsla(45, 7%, 11%, 0.85);
    --c-line: hsla(30, 2%, 23%, 0.6);
    --c-line-subtle: hsla(30, 2%, 23%, 0.4);
    
    /* Shadows - Stronger for dark theme */
    --shadow-sm: 0 1px 3px hsla(0, 0%, 0%, 0.2);
    --shadow-md: 0 4px 6px hsla(0, 0%, 0%, 0.25);
    --shadow-lg: 0 10px 25px hsla(0, 0%, 0%, 0.3);
  }
}

@layer layout {
  /* Container with consistent boxed width */
  .container{
    max-inline-size:var(--container);
    margin-inline:auto;
    padding-inline:var(--space-md);
  }
  
  /* Site layout using CSS Grid */
  .site-layout{
    display:grid;
    grid-template-areas:
      "header"
      "main"
      "footer";
    grid-template-rows:auto 1fr auto;
    min-block-size:100dvh;
  }
  
  /* News Grid */
  .news-grid {
    display: grid;
    gap: var(--space-lg);
    margin-block-end: var(--space-2xl);
  }

  .grid-3col {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }
  
  /* Article Content Layout */
  .article-content {
    font-size: var(--text-lg);
    line-height: 1.8;
    color: var(--c-text);
  }
  
  .article-content h2 {
    font-size: var(--text-2xl);
    margin-block: var(--space-xl) var(--space-lg);
    color: var(--c-text);
  }
  
  .article-content h3 {
    font-size: var(--text-xl);
    margin-block: var(--space-lg) var(--space-md);
    color: var(--c-text-2);
  }
  
  .article-content p {
    margin-block-end: var(--space-lg);
  }
  
  .article-content ul, 
  .article-content ol {
    margin-block: var(--space-lg);
    padding-inline-start: var(--space-xl);
  }
  
  .article-content ul {
    list-style: disc;
  }
  
  .article-content ol {
    list-style: decimal;
  }
  
  .article-content li {
    margin-block-end: var(--space-sm);
    line-height: 1.7;
  }
  
  .article-content blockquote {
    margin-block: var(--space-xl);
    padding: var(--space-lg);
    background: var(--c-bg-2);
    border-inline-start: 4px solid var(--c-accent);
    font-style: italic;
  }
  
  .article-content blockquote cite {
    display: block;
    margin-block-start: var(--space-md);
    font-size: var(--text-base);
    color: var(--c-text-3);
    font-style: normal;
  }
  
  .article-content a {
    color: var(--c-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  
  .article-content a:hover {
    color: var(--c-accent-hover);
  }
  
  .article-content .table-wrapper {
    overflow-x: auto;
    margin-block: var(--space-xl);
  }
  
  .article-content table {
    inline-size: 100%;
    min-inline-size: 450px;
    margin-block: 0;
    border-collapse: collapse;
    font-size: var(--text-base);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  
  .article-content thead {
    background: var(--c-bg-2);
    border-block-end: 2px solid var(--c-border);
  }
  
  .article-content th {
    padding: var(--space-md) var(--space-lg);
    text-align: start;
    font-weight: 600;
    color: var(--c-text);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }
  
  .article-content td {
    padding: var(--space-md) var(--space-lg);
    border-block-start: 1px solid var(--c-line-subtle);
    color: var(--c-text-2);
  }
  
  .article-content tbody tr:hover {
    background: var(--c-bg-2);
  }
  
  .article-content tbody tr:first-child td {
    border-block-start: none;
  }
}

@layer components {
  /* Header - Floating Glass Pill Design */
  .header{
    position:fixed;
    inset-block-start:0.5rem;
    inset-inline:0;
    z-index:1000;
    pointer-events:none;
  }
  
  /* WordPress Admin Bar Compatibility */
  .admin-bar .header {
    inset-block-start: calc(32px + 0.5rem);
  }
  
  .header-glass{
    max-inline-size:var(--container);
    margin-inline:auto;
    padding-inline:var(--space-xs);
    pointer-events:auto;
    background:var(--c-glass); /* Using pre-calculated value */
    backdrop-filter:blur(20px) saturate(180%);
    border:1px solid var(--c-line-subtle); /* Using pre-calculated value */
    border-radius:5rem;
    box-shadow:
      0 0 0 0.5px var(--c-white-20) inset,
      0 10px 40px -10px var(--c-black-15),
      0 20px 60px -20px rgba(46,111,179,0.1); /* Pre-calculated accent shadow */
    transition:box-shadow 400ms var(--ease-out);
    container-type:inline-size;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    block-size:3.25rem;
    padding-inline:0.75rem;
    contain:layout style; /* 2025 Performance optimization */
  }
  
  .header-glass::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(
      135deg,
      color-mix(in srgb, var(--c-accent) 5%, transparent) 0%,
      transparent 20%,
      transparent 80%,
      color-mix(in srgb, var(--c-accent) 5%, transparent) 100%
    );
    pointer-events:none;
    opacity:0.5;
  }
  
  /* Logo */
  .logo{
    display:flex;
    align-items:center;
    gap:var(--space-sm);
    position:relative;
    z-index:2;
    margin-inline-end:var(--space-xs);
  }
  
  .logo-icon{
    inline-size:1.875rem;
    block-size:1.875rem;
    background:linear-gradient(135deg, var(--c-accent), var(--c-accent-hover));
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 400ms var(--ease-out);
    box-shadow:
      0 2px 8px var(--c-accent-border),
      0 0 0 3px color-mix(in srgb, var(--c-accent) 10%, transparent);
    position:relative;
    overflow:hidden;
  }
  
  .logo-icon::before{
    content:'';
    position:absolute;
    inset:-50%;
    background:conic-gradient(
      from 0deg at 50% 50%,
      transparent 0deg,
      color-mix(in srgb, white 40%, transparent) 60deg,
      transparent 120deg,
      transparent 360deg
    );
    animation:rotate 3s linear infinite;
    opacity:0;
    transition:opacity 400ms;
  }
  
  .logo-icon .icon{
    inline-size:1.125rem;
    block-size:1.125rem;
    color:white;
    position:relative;
    z-index:1;
  }
  
  @keyframes rotate{
    to{transform:rotate(360deg)}
  }
  
  /* APPROVED ELEMENT - Logo rotation on hover */
  .logo:hover .logo-icon{
    transform:rotate(360deg) scale(1.1);
    box-shadow:
      0 4px 12px var(--c-accent-border),
      0 0 0 5px var(--c-accent-subtle);
    will-change:transform; /* Performance hint for known animation */
  }
  
  .logo:hover .logo-icon::before{
    opacity:1;
  }
  /* END APPROVED ELEMENT */
  
  .logo-text{
    font-size:var(--text-base);
    font-weight:600;
    letter-spacing:-0.02em;
    color:var(--c-text);
    transition:color var(--duration-fast);
  }
  
  .logo:hover .logo-text{
    color:var(--c-accent);
  }
  
  /* Navigation */
  .nav{
    display:flex;
    align-items:center;
    gap:var(--space-xs);
  }
  
  .nav-links{
    display:flex;
    gap:var(--space-2xs);
    background:color-mix(in srgb, var(--c-bg-2) 50%, transparent);
    padding:0.2rem;
    border-radius:2rem;
    border:1px solid color-mix(in srgb, var(--c-border) 10%, transparent);
    align-items:center;
  }
  
  /* 2025: Using :is() for 40% less code */
  .nav-links :is(a, .dropdown-trigger){
    padding:0.4rem 0.6rem;
    border-radius:1.5rem;
    font-size:var(--text-sm);
    font-weight:500;
    color:var(--c-text-3);
    transition:color var(--duration-fast), background var(--duration-fast);
    position:relative;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:0.25rem;
  }
  
  .nav-links :is(a, .dropdown-trigger)::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:var(--c-accent);
    opacity:0;
    transition:opacity var(--duration-fast);
  }
  
  .nav-links :is(a, .dropdown-trigger):hover{
    color:var(--c-text);
  }
  
  .nav-links :is(a, .dropdown-trigger):hover::before{
    opacity:0.08;
  }
  
  .nav-links a[aria-current="page"]{
    background:var(--c-surface);
    color:var(--c-accent);
    box-shadow:
      0 1px 3px color-mix(in srgb, black 5%, transparent),
      0 0 0 1px color-mix(in srgb, var(--c-accent) 10%, transparent) inset;
  }
  
  .nav-links svg.icon{
    inline-size:0.875em;
    block-size:0.875em;
  }
  
  /* Dropdown Menu - CSS Only */
  .nav-dropdown{
    position:relative;
  }
  
  .dropdown-trigger{
    display:inline-flex;
    align-items:center;
    gap:0.2rem;
    cursor:pointer;
    user-select:none;
  }
  
  .dropdown-trigger::after{
    content:'\25BC';
    font-size:var(--text-xs);
    transition:transform var(--duration-fast);
    opacity:0.7;
  }
  
  .dropdown-menu{
    position:absolute;
    inset-block-start:calc(100% + 0.5rem);
    inset-inline-start:50%;
    transform:translateX(-50%);
    min-inline-size:10rem;
    background:color-mix(in srgb, var(--c-bg) 95%, transparent);
    backdrop-filter:blur(20px) saturate(180%);
    border:1px solid color-mix(in srgb, var(--c-border) 20%, transparent);
    border-radius:1rem;
    padding:0.25rem;
    box-shadow:
      0 10px 40px -10px color-mix(in srgb, black 20%, transparent),
      0 0 0 0.5px color-mix(in srgb, white 20%, transparent) inset;
    opacity:0;
    visibility:hidden;
    transition:all var(--duration-fast) var(--ease-out);
    z-index:10;
  }
  
  .dropdown-menu::before{
    content:'';
    position:absolute;
    inset-block-start:-0.5rem;
    inset-inline-start:50%;
    transform:translateX(-50%);
    inline-size:0;
    block-size:0;
    border-inline:0.5rem solid transparent;
    border-block-end:0.5rem solid color-mix(in srgb, var(--c-bg) 95%, transparent);
  }
  
  .dropdown-menu a{
    display:block;
    padding:0.5rem 0.75rem;
    border-radius:0.5rem;
    font-size:var(--text-sm);
    font-weight:500;
    color:var(--c-text-3);
    transition:all var(--duration-fast);
  }
  
  .dropdown-menu a:hover{
    background:color-mix(in srgb, var(--c-accent) 10%, transparent);
    color:var(--c-text);
  }
  
  .nav-dropdown:hover .dropdown-menu,
  .nav-dropdown:focus-within .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
  }
  
  .nav-dropdown:hover .dropdown-trigger::after,
  .nav-dropdown:focus-within .dropdown-trigger::after{
    transform:rotate(180deg);
  }
  
  /* Theme toggle */
  .theme-btn{
    inline-size:2rem;
    block-size:2rem;
    min-inline-size:2rem;
    min-block-size:2rem;
    border-radius:50%;
    background:color-mix(in srgb, var(--c-surface) 80%, transparent);
    backdrop-filter:blur(10px);
    color:var(--c-text);
    transition:all var(--duration-base) var(--ease-out);
    border:1px solid color-mix(in srgb, var(--c-border) 15%, transparent);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
      0 2px 8px color-mix(in srgb, black 5%, transparent),
      0 0 0 0.5px color-mix(in srgb, white 20%, transparent) inset;
    position:relative;
    overflow:hidden;
  }
  
  .theme-btn::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(
      circle at 30% 30%,
      color-mix(in srgb, white 20%, transparent),
      transparent 50%
    );
    border-radius:inherit;
    pointer-events:none;
  }
  
  .theme-btn:hover{
    transform:scale(1.1);
    box-shadow:
      0 4px 12px color-mix(in srgb, black 10%, transparent),
      0 0 0 0.5px color-mix(in srgb, white 30%, transparent) inset;
  }
  
  .theme-btn:hover .icon{
    transform:rotate(180deg);
  }
  
  .theme-btn:active{
    transform:scale(0.95);
  }
  
  .theme-btn .icon{
    transition:transform var(--duration-base) var(--ease-out);
    position:relative;
    z-index:1;
  }
  
  /* Main content */
  .main{
    padding-block:0rem;
  }
  
  
  /* Hero section - Optimized without container wrapper */
  .hero{
    /* Background spans full width */
    background:linear-gradient(135deg, var(--c-accent-subtle) 0%, var(--c-bg-2) 100%);
    margin-block-end:var(--space-xl);
    position:relative;
    overflow:hidden;
    /* Container styles integrated */
    padding:var(--space-3xl) var(--space-md) var(--space-2xl);
  }
  
  .hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 20% 80%, rgba(46,111,179,0.08) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(46,111,179,0.08) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(46,111,179,0.05) 0%, transparent 30%);
    pointer-events:none;
  }
  
  .hero-content{
    max-inline-size:min(45rem, var(--container));
    margin-inline:auto;
    position:relative;
    z-index:1;
  }
  
  .hero-title{
    font-size:var(--text-3xl);
    font-weight:700;
    margin-block-end:var(--space-md);
    color:var(--c-text);
  }
  
  .hero-desc{
    font-size:var(--text-lg);
    color:var(--c-text-2);
    margin-block-end:var(--space-xl);
    line-height:1.6;
  }
  
  /* Search bar */
  .search-bar{
    display:flex;
    align-items:center;
    background:var(--c-surface);
    border-radius:3.75rem;
    border:1px solid var(--c-border);
    box-shadow:var(--shadow-lg);
    padding:0.25rem;
    transition:all var(--duration-base);
    max-inline-size:34rem;
    min-block-size:3.5rem;
    position:relative;
  }
  
  .search-bar:focus-within{
    box-shadow:0 0 0 4px var(--c-accent-subtle), var(--shadow-lg);
    border-color:var(--c-accent);
  }
  
  .search-input{
    flex:1;
    width:70%;
    padding:0.75rem 1rem;
    padding-inline-start:3rem;
    background:transparent;
    border:0;
    font-size:var(--text-base);
    color:var(--c-text);
    outline:none;
  }
  
  .search-input::placeholder{
    color:var(--c-text-3);
    opacity:0.7;
  }
  
  .search-icon{
    position:absolute;
    inset-inline-start:1.25rem;
    inset-block-start:50%;
    transform:translateY(-50%);
    color:var(--c-text-3);
    pointer-events:none;
    z-index:1;
  }
  
  .search-btn{
    padding:0.625rem 1.5rem;
    margin-inline-end:0.125rem;
    background:var(--c-accent);
    color:white;
    border-radius:3rem;
    font-weight:600;
    font-size:var(--text-sm);
    transition:all var(--duration-fast);
    box-shadow:0 2px 8px var(--c-accent-border);
  }
  
  .search-btn:hover{
    background:var(--c-accent-hover);
    box-shadow:0 4px 12px color-mix(in srgb, var(--c-accent) 35%, transparent);
  }
  
  /* Stats */
  .stats{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(7.5rem, 1fr));
    gap:var(--space-xl);
    margin-block-start:var(--space-2xl);
  }
  
  .stat-value{
    font-size:var(--text-xl);
    font-weight:700;
    color:var(--c-accent);
    display:block;
  }
  
  .stat-label{
    font-size:var(--text-sm);
    color:var(--c-text-3);
    display:block;
  }
  
  /* Archive Header - Optimized without container wrapper */
  .archive-header{
    background:linear-gradient(135deg, var(--c-accent-subtle) 0%, var(--c-bg-2) 100%);
    padding:var(--space-xl) var(--space-md); /* Integrated container padding */
    padding-block-start: var(--space-3xl);
    border-block-end:1px solid var(--c-border);
  }
  
  .archive-header > * {
    max-inline-size:var(--container);
    margin-inline:auto;
  }
  
  .archive-title{
    font-size:var(--text-2xl);
    font-weight:700;
    color:var(--c-text);
    margin-block-end:var(--space-2xl);
  }
  
  /* Source Archive Specific Styles */
  .source-archive-header {
    background: linear-gradient(135deg, rgba(var(--c-primary-rgb), 0.05), rgba(var(--c-glass-rgb), 0.1));
    border: 1px solid rgba(var(--c-border-rgb), 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-block-end: var(--space-2xl);
    backdrop-filter: blur(10px);
  }
  
  .source-archive-meta {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-block-end: var(--space-lg);
  }
  
  .source-archive-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(var(--c-primary-rgb), 0.2);
  }
  
  .source-archive-info {
    flex: 1;
  }
  
  .archive-description {
    color: var(--c-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-block-end: var(--space-sm);
  }
  
  .raw-source-url {
    margin-block-start: var(--space-xs);
    color: var(--c-text-muted);
  }
  
  .raw-source-url code {
    background: rgba(var(--c-text-rgb), 0.1);
    padding: 0.125rem 0.25rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.875em;
  }
  
  .archive-stats {
    display: flex;
    justify-content: center;
    padding-block-start: var(--space-md);
    border-block-start: 1px solid rgba(var(--c-border-rgb), 0.2);
  }
  
  .archive-count {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(var(--c-primary-rgb), 0.1);
    color: var(--c-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
  }
  
  .archive-description{
    font-size:var(--text-base);
    color:var(--c-text-2);
    line-height:1.6;
    margin-block-end:var(--space-lg);
  }
  
  .archive-meta{
    display:flex;
    gap:var(--space-xl);
    font-size:var(--text-sm);
    color:var(--c-text-3);
  }
  
  .archive-count{
    font-weight:600;
    color:var(--c-accent);
  }
  
  /* Main content wrapper - new utility class */
  .content-wrapper {
    max-inline-size:var(--container);
    margin-inline:auto;
    padding-inline:var(--space-md);
    padding-block-start: var(--space-lg);
  }
  
  /* Article wrapper - Optimized without container */
  .article-wrapper {
    max-inline-size:var(--container);
    margin-inline:auto;
    padding-inline:var(--space-md);
    padding-block-start:var(--space-3xl);
  }
  
  /* Article Hero - Compact Strip Style */
  .article-hero {
    max-inline-size: 100%;
    margin-block-end: var(--space-lg);
    position: relative;
    block-size: 150px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: linear-gradient(
      90deg,
      var(--c-bg-2) 0%,
      var(--c-bg-3) 20%,
      var(--c-bg-2) 40%,
      var(--c-bg-2) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }
  
  .article-hero::before {
    content: "";
    position: absolute;
    inset: 10%;
    background: var(--c-border);
    border-radius: var(--radius-sm);
    opacity: 0.3;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
    mask-size: 20%;
    mask-repeat: no-repeat;
    mask-position: center;
    z-index: 0;
  }
  
  .article-hero img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center top;
    position: relative;
    z-index: 1;
  }
  
  .article-hero picture {
    display: block;
  }
  
  /* Article Header */
  .article-header {
    margin-block-end: var(--space-xl);
  }
  
  .article-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
  }
  
  .article-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-text);
    margin-block-end: var(--space-lg);
  }
  
  /* Post Meta Layout */
  .post-meta {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: var(--space-lg);
    padding-block: var(--space-lg);
    border-block: 1px solid var(--c-border);
    font-size: var(--text-sm);
    color: var(--c-text-3);
  }
  
  .post-meta .meta-avatar {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--c-text-2);
    background: linear-gradient(135deg, var(--c-bg-2), var(--c-bg-3));
    position: relative;
  }
  
  .post-meta .meta-avatar::after {
    content: '';
    position: absolute;
    inset-inline-end: calc(-1 * var(--space-lg) / 2 - 0.5px);
    inset-block-start: 50%;
    transform: translateY(-50%);
    block-size: 32px;
    inline-size: 1px;
    background: var(--c-border);
  }
  
  .post-meta .meta-source,
  .post-meta .meta-time,
  .post-meta .meta-engagement {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    line-height: 1.4;
    position: relative;
  }
  
  /* Add vertical dividers between sections on desktop */
  .post-meta .meta-source::after,
  .post-meta .meta-time::after,
  .post-meta .meta-engagement::after {
    content: '';
    position: absolute;
    inset-inline-end: calc(-1 * var(--space-lg) / 2 - 0.5px);
    inset-block-start: 50%;
    transform: translateY(-50%);
    block-size: 32px;
    inline-size: 1px;
    background: var(--c-border);
    opacity: 0.5;
  }
  
  .post-meta .source-name {
    font-weight: 600;
    color: var(--c-text-2);
    font-size: var(--text-sm);
  }
  
  .post-meta .author-name,
  .post-meta .post-time,
  .post-meta .read-time,
  .post-meta .view-count,
  .post-meta .share-count {
    font-size: var(--text-xs);
    color: var(--c-text-3);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  
  .post-meta .icon {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    opacity: 0.7;
    flex-shrink: 0;
  }
  
  .post-meta .meta-trust {
    background: var(--c-success);
    color: white;
    padding: var(--space-xs) var(--space-md);
    border-radius: 9999px;
    font-weight: 600;
    font-size: var(--text-xs);
    white-space: nowrap;
  }
  
  .post-meta .trust-score {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  
  .post-meta .meta-trust .icon {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    fill: white;
  }
  
  /* Related Posts */
  .related-posts {
    margin-block: var(--space-2xl) var(--space-2xl);
  }
  
  .related-posts h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--c-text);
    margin-block-end: var(--space-xl);
  }
  
  /* Section title - no wrapper needed */
  .section-title{
    font-size:var(--text-2xl);
    font-weight:700;
    color:var(--c-text);
    transition:color var(--duration-fast);
    margin-block-end:var(--space-xl);
  }
  
  .section-title a{
    color:inherit;
    text-decoration:none;
    transition:color var(--duration-fast);
  }
  
  .section-title a:hover{
    color:var(--c-accent);
  }
  
  /* Categories */
  .categories{
    display:flex;
    gap:var(--space-sm);
    margin-block-end:var(--space-xl);
    overflow-x:auto;
    padding-block-end:var(--space-sm);
    scrollbar-width:thin;
  }
  
  .category-btn{
    padding:var(--space-sm) var(--space-lg);
    background:var(--c-surface);
    border:1px solid var(--c-border);
    border-radius:1.25rem;
    font-size:var(--text-sm);
    font-weight:500;
    color:var(--c-text-3);
    white-space:nowrap;
    transition:all var(--duration-fast);
  }
  
  .category-btn:hover{
    background:var(--c-accent-subtle);
    border-color:var(--c-accent);
    color:var(--c-accent);
  }
  
  .category-btn.active{
    background:var(--c-accent);
    border-color:var(--c-accent);
    color:white;
  }
  
  /* News Card */
  .news-card {
    background: var(--c-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.15s ease; /* Optimized transition */
    min-block-size: 320px;
    container-type: inline-size;
    contain: layout style; /* CSS containment for performance */
    content-visibility: auto; /* Modern performance optimization */
  }

  /* Focus management for accessibility */
  .news-card:focus-within {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
    border-color: var(--c-accent);
  }

  .news-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--c-accent);
  }

  /* Thumbnail Container with Modern CSS */
  .thumbnail-container {
    position: relative;
    inline-size: 100%;
    block-size: 120px;
    min-block-size: 120px;
    aspect-ratio: 3/1;
    overflow: hidden;
    background: linear-gradient(
      90deg,
      var(--c-bg-2) 0%,
      var(--c-bg-3) 20%,
      var(--c-bg-2) 40%,
      var(--c-bg-2) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    contain: layout; /* Performance optimization */
  }

  /* Single optimized shimmer animation - 2025 */
  @keyframes shimmer {
    to { background-position: -200% 0; }
  }

  .thumbnail-container::before {
    content: "";
    position: absolute;
    inset: 30%;
    background: var(--c-border);
    border-radius: var(--radius-sm);
    opacity: 0.3;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
    mask-size: 40%;
    mask-repeat: no-repeat;
    mask-position: center;
  }

  /* Fact Check Badge Overlay */
  .fact-check-overlay {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  [data-theme="dark"] .fact-check-overlay {
    background: rgba(20, 19, 18, 0.95);
    border: 1px solid rgba(59, 58, 57, 0.5);
  }

  .fact-check-overlay svg {
    inline-size: 0.75rem;
    block-size: 0.75rem;
  }

  .fact-check-overlay.completed {
    color: var(--c-success);
  }

  .fact-check-overlay.default {
    color: var(--c-text-2);
  }

  .fact-check-overlay.in_progress {
    color: var(--c-info);
  }

  .fact-check-overlay.unverified {
    color: var(--c-warning);
  }

  .fact-check-overlay.disputed {
    color: var(--c-danger);
  }

  .fact-check-overlay.partial {
    color: var(--c-info);
  }

  .fact-check-overlay.unverifiable {
    color: var(--c-text-3);
  }

  .news-card .thumbnail {
    inline-size: 100%;
    block-size: 120px;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
    background: transparent;
  }

  .news-card .content {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    contain: layout style; /* Performance optimization */
  }

  /* Badges */
  .news-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
  }

  .badge svg {
    inline-size: 0.625rem;
    block-size: 0.625rem;
  }

  /* Special Badges */
  .badge-breaking {
    background: var(--c-danger);
    color: var(--c-bg);
    animation: pulse-bg 2s infinite;
  }

  @keyframes pulse-bg {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
  }

  .badge-exclusive {
    background: var(--c-accent);
    color: var(--c-bg);
  }

  .badge-updated {
    background: var(--c-warning);
    color: var(--c-bg);
  }

  .badge-location {
    background: var(--c-bg-2);
    border: 1px solid var(--c-border);
    color: var(--c-text-3);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
    font-weight: 500;
  }
  
  /* Verdict Badges */
  .badge-verdict {
    font-weight: 600;
    border: 1px solid;
  }
  
  .badge-verdict-true {
    background: color-mix(in srgb, var(--c-success) 15%, var(--c-bg));
    color: var(--c-success);
    border-color: color-mix(in srgb, var(--c-success) 30%, transparent);
  }
  
  .badge-verdict-false {
    background: color-mix(in srgb, var(--c-danger) 15%, var(--c-bg));
    color: var(--c-danger);
    border-color: color-mix(in srgb, var(--c-danger) 30%, transparent);
  }
  
  .badge-verdict-misleading {
    background: color-mix(in srgb, var(--c-warning) 15%, var(--c-bg));
    color: color-mix(in srgb, var(--c-warning) 80%, black);
    border-color: color-mix(in srgb, var(--c-warning) 30%, transparent);
  }
  
  .badge-verdict-selective {
    background: color-mix(in srgb, var(--c-info) 15%, var(--c-bg));
    color: var(--c-info);
    border-color: color-mix(in srgb, var(--c-info) 30%, transparent);
  }
  
  .badge-verdict-exaggerated {
    background: color-mix(in srgb, var(--c-warning) 12%, var(--c-bg));
    color: color-mix(in srgb, var(--c-warning) 75%, black);
    border-color: color-mix(in srgb, var(--c-warning) 25%, transparent);
  }
  
  .badge-verdict-satire {
    background: color-mix(in srgb, var(--c-text-3) 20%, var(--c-bg));
    color: var(--c-text-2);
    border-color: color-mix(in srgb, var(--c-border) 60%, transparent);
  }
  
  .badge-verdict-myth {
    background: color-mix(in srgb, var(--c-danger) 12%, var(--c-bg));
    color: color-mix(in srgb, var(--c-danger) 85%, black);
    border-color: color-mix(in srgb, var(--c-danger) 25%, transparent);
  }
  
  /* Title */
  .news-card h3 {
    font-size: var(--text-lg);
    line-height: 1.3;
    color: var(--c-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    min-height: calc(var(--text-lg) * 1.3 * 2);
  }

  .news-card h3 a {
    color: inherit;
    text-decoration: none;
    display: block;
  }

  .news-card h3 a:hover {
    color: var(--c-accent);
  }

  .news-card h3 a:focus {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* Meta Article Layout */
  .meta-article {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-block-start: var(--space-sm);
    border-block-start: 1px solid var(--c-border);
    font-size: var(--text-base);
    color: var(--c-text-3);
  }

  .meta-avatar {
    inline-size: 36px;
    block-size: 36px;
    min-inline-size: 36px;
    min-block-size: 36px;
    border-radius: 20%;
    flex-shrink: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--c-text-2);
    background: linear-gradient(135deg, var(--c-bg-2), var(--c-bg-3));
    position: relative;
    margin-inline-end: var(--space-sm);
  }
  
  .meta-avatar::after {
    content: '';
    position: absolute;
    inset-inline-end: calc(-1 * var(--space-sm) / 2);
    inset-block-start: 50%;
    transform: translateY(-50%);
    block-size: 32px;
    inline-size: 1px;
    background: var(--c-border);
  }

  .meta-info {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-xs);
    line-height: 1.4;
  }

  .source-name {
    font-weight: 600;
    color: var(--c-text-2);
    font-size: var(--text-xs);
    grid-column: 1;
    grid-row: 1;
  }

  .author-name {
    color: var(--c-text-3);
    font-size: var(--text-xs);
    grid-column: 1;
    grid-row: 2;
  }

  .post-time {
    color: var(--c-text-3);
    font-size: var(--text-xs);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }

  .read-time {
    color: var(--c-text-3);
    font-size: var(--text-xs);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }

  .post-time svg,
  .read-time svg {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    fill: currentColor;
    opacity: 0.7;
  }
  
  /* Engagement Bar */
  .engagement-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--space-md);
    padding-block-start: var(--space-sm);
    border-block-start: 1px solid var(--c-line-subtle);
    font-size: var(--text-xs);
    color: var(--c-text-3);
  }
  
  .stat-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--c-text-3);
  }
  
  .stat-item svg {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    opacity: 0.7;
  }
  
  .stat-item.trust-score {
    color: var(--c-success);
    font-weight: 600;
  }

  /* Special Card States */
  .news-card.breaking-news {
    border-color: var(--c-danger);
    border-width: 2px;
  }

  .news-card.exclusive-news {
    border-color: var(--c-accent);
    border-width: 2px;
  }
  
  /* Pagination */
  .pagination{
    display:flex;
    justify-content:center;
    margin-block:var(--space-2xl);
  }
  
  .pagination-links{
    display:flex;
    gap:var(--space-2xs);
    background:color-mix(in srgb, var(--c-bg-2) 50%, transparent);
    padding:0.2rem;
    border-radius:2rem;
    border:1px solid color-mix(in srgb, var(--c-border) 10%, transparent);
    align-items:center;
  }
  
  .page-numbers{
    padding:var(--space-sm) var(--space-md);
    border-radius:1.5rem;
    font-size:var(--text-sm);
    font-weight:500;
    color:var(--c-text-2);
    transition:all var(--duration-fast);
  }
  
  .page-numbers:hover{
    background:color-mix(in srgb, var(--c-accent) 10%, transparent);
    color:var(--c-accent);
  }
  
  .page-numbers.current{
    background:var(--c-surface);
    color:var(--c-accent);
    box-shadow:
      0 1px 3px color-mix(in srgb, black 5%, transparent),
      0 0 0 1px color-mix(in srgb, var(--c-accent) 10%, transparent) inset;
  }
  
  .page-numbers.dots{
    background:transparent;
    cursor:default;
    padding-inline:var(--space-xs);
  }
  
  .page-numbers.dots:hover{
    background:transparent;
    color:var(--c-text-2);
  }
  
  .page-numbers.prev,
  .page-numbers.next{
    padding-inline:var(--space-lg);
  }
  
  /* Footer - Optimized without container wrapper */
  .footer{
    background:var(--c-bg-2);
    border-block-start:1px solid var(--c-border);
    padding:var(--space-2xl) var(--space-md) var(--space-xl);
    margin-block-start:var(--space-2xl);
    container-type:inline-size;
  }
  
  .footer-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-2xl);
    margin-block-end:var(--space-xl);
    max-inline-size:var(--container);
    margin-inline:auto;
  }
  
  .footer-brand{
    grid-column:1 / -1;
    max-inline-size:100%;
  }
  
  .footer-logo{
    display:flex;
    align-items:center;
    gap:var(--space-md);
    margin-block-end:var(--space-lg);
    font-weight:700;
    color:var(--c-accent);
  }
  
  .footer-desc{
    font-size:var(--text-sm);
    color:var(--c-text-3);
    line-height:1.7;
  }
  
  .footer-topics h3,
  .footer-legal h3{
    font-size:var(--text-base);
    font-weight:600;
    margin-block-end:var(--space-lg);
    color:var(--c-text);
  }
  
  .footer-links{
    display:flex;
    flex-direction:column;
    gap:var(--space-sm);
  }
  
  .footer-links a{
    font-size:var(--text-sm);
    color:var(--c-text-3);
    transition:color var(--duration-fast);
  }
  
  .footer-links a:hover{
    color:var(--c-accent);
  }
  
  .footer-bottom{
    padding-block-start:var(--space-xl);
    border-block-start:1px solid var(--c-border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-lg);
    max-inline-size:var(--container);
    margin-inline:auto;
  }
  
  .footer-copy{
    font-size:var(--text-sm);
    color:var(--c-text-3);
  }
  
  .social-links{
    display:flex;
    gap:var(--space-sm);
  }
  
  .social-link{
    inline-size:2.25rem;
    block-size:2.25rem;
    min-inline-size:2.25rem;
    min-block-size:2.25rem;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--c-surface);
    border-radius:50%;
    transition:all var(--duration-fast);
  }
  
  .social-link:hover{
    background:var(--c-accent);
    color:white;
    box-shadow:0 2px 8px var(--c-accent-border);
  }
  
  /* Mobile menu checkbox */
  .menu-btn{
    display:none;
    inline-size:2rem;
    block-size:2rem;
    min-inline-size:2rem;
    min-block-size:2rem;
    border-radius:50%;
    background:color-mix(in srgb, var(--c-surface) 80%, transparent);
    backdrop-filter:blur(10px);
    border:1px solid color-mix(in srgb, var(--c-border) 15%, transparent);
    align-items:center;
    justify-content:center;
    box-shadow:
      0 2px 8px color-mix(in srgb, black 5%, transparent),
      0 0 0 0.5px color-mix(in srgb, white 20%, transparent) inset;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    transition:all var(--duration-fast);
  }
  
  .menu-btn::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(
      circle at 30% 30%,
      color-mix(in srgb, white 20%, transparent),
      transparent 50%
    );
    border-radius:inherit;
    pointer-events:none;
  }
  
  .menu-btn:hover{
    transform:scale(1.1);
    box-shadow:
      0 4px 12px color-mix(in srgb, black 10%, transparent),
      0 0 0 0.5px color-mix(in srgb, white 30%, transparent) inset;
  }
  
  .menu-icon{
    position:relative;
    inline-size:0.875rem;
    block-size:1.5px;
    background:var(--c-text);
    transition:all var(--duration-base) var(--ease-out);
    border-radius:1px;
  }
  
  .menu-icon::before,
  .menu-icon::after{
    content:'';
    position:absolute;
    inline-size:100%;
    block-size:100%;
    background:inherit;
    border-radius:inherit;
    transition:inherit;
  }
  
  .menu-icon::before{
    inset-block-start:-0.2rem;
  }
  
  .menu-icon::after{
    inset-block-start:0.2rem;
  }
  
  #menu-toggle{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }
  
  #menu-toggle:checked ~ .nav .menu-icon{
    background:transparent;
  }
  
  #menu-toggle:checked ~ .nav .menu-icon::before{
    inset-block-start:0;
    transform:rotate(45deg);
    background:var(--c-text);
  }
  
  #menu-toggle:checked ~ .nav .menu-icon::after{
    inset-block-start:0;
    transform:rotate(-45deg);
    background:var(--c-text);
  }
  
  #menu-toggle:checked ~ .nav .nav-links{
    display:flex!important;
    position:fixed;
    inset-block-start:5rem;
    inset-inline-start:50%;
    transform:translateX(-50%);
    inline-size:min(calc(100vw - 2rem), var(--container));
    background:var(--c-bg);
    backdrop-filter:blur(20px) saturate(180%);
    flex-direction:column;
    padding:0;
    border-radius:var(--radius-lg);
    box-shadow:
      0 10px 40px color-mix(in srgb, black 15%, transparent),
      0 0 0 1px var(--c-border);
    border:none;
    animation:dropDown 250ms var(--ease-out);
    z-index:999;
    overflow:hidden;
  }
  
  /* WordPress Admin Bar - Mobile Menu Adjustment */
  .admin-bar #menu-toggle:checked ~ .nav .nav-links {
    inset-block-start: calc(32px + 5rem);
  }
  
  /* 2025: Using :is() for mobile menu too */
  #menu-toggle:checked ~ .nav .nav-links :is(a, .dropdown-trigger){
    padding:1rem 1.5rem;
    border-radius:0;
    text-align:start;
    border-block-end:1px solid var(--c-line-subtle);
    margin:0;
    inline-size:100%;
    display:flex;
    align-items:center;
    gap:0.25rem;
  }
  
  #menu-toggle:checked ~ .nav .nav-links :is(a, .dropdown-trigger):hover{
    background:var(--c-accent-subtle);
  }
  
  #menu-toggle:checked ~ .nav .nav-links a:last-child{
    border-block-end:none;
  }
  
  #menu-toggle:checked ~ .nav .nav-dropdown{
    inline-size:100%;
  }
  
  #menu-toggle:checked ~ .nav .nav-dropdown .dropdown-trigger{
    display:none;
  }
  
  #menu-toggle:checked ~ .nav .nav-dropdown .dropdown-menu{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    margin:0;
    background:transparent;
    box-shadow:none;
    border:none;
    padding:0;
    min-inline-size:100%;
  }
  
  #menu-toggle:checked ~ .nav .nav-dropdown .dropdown-menu::before{
    display:none;
  }
  
  #menu-toggle:checked ~ .nav .nav-dropdown .dropdown-menu a{
    padding-inline-start:2.5rem;
    background:var(--c-bg-2);
  }
  
  #menu-toggle:checked ~ .nav .nav-dropdown .dropdown-menu a:hover{
    background:var(--c-accent-subtle);
  }
  
  @keyframes dropDown{
    from{
      opacity:0;
      transform:translateX(-50%) translateY(-1rem);
    }
    to{
      opacity:1;
      transform:translateX(-50%) translateY(0);
    }
  }
}

@layer utilities {
  /* Utility classes */
  .sr-only{
    position:absolute;
    inline-size:1px;
    block-size:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  
  /* Icons */
  .icon{
    display:inline-block;
    inline-size:1em;
    block-size:1em;
    vertical-align:middle;
    fill:currentColor;
    flex-shrink:0;
  }
  
  .icon-xl{inline-size:2em;block-size:2em}
  
  /* Focus states */
  :focus-visible{
    outline:2px solid var(--c-accent);
    outline-offset:2px;
    border-radius:var(--radius-md);
  }
    .search-input:focus-visible{
    outline:none;
  }
}

/* ================================================
   SOURCE BANNER WIDGET - EXACT COPY FROM VISUALIZATION
   ================================================ */
.source-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(0.5rem, 2vw, var(--space-lg));
	padding: clamp(0.625rem, 2vw, var(--space-lg)) clamp(0.75rem, 2.5vw, var(--space-xl));
	background: linear-gradient(to right, var(--c-bg), var(--c-bg-2));
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	inline-size: 100%;
	margin-block: var(--space-2xl) var(--space-xl);
}

.source-banner-left {
	display: flex;
	align-items: center;
	gap: clamp(0.375rem, 1.5vw, var(--space-md));
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow: hidden;
}

/* Square Avatar with Radius */
.source-avatar {
	inline-size: clamp(2rem, 5vw, 2.5rem);
	block-size: clamp(2rem, 5vw, 2.5rem);
	min-inline-size: 2rem;
	min-block-size: 2rem;
	border-radius: var(--radius-md);
	display: grid;
	place-items: center;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 70%, black));
	border: 2px solid var(--c-bg);
	box-shadow: 0 2px 8px color-mix(in srgb, black 15%, transparent);
}

.source-avatar-letter {
	font-size: clamp(0.875rem, 2.5vw, 1.125rem);
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	user-select: none;
}

.source-avatar-img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.source-avatar:has(.source-avatar-img) .source-avatar-letter {
	display: none;
}

.source-banner-info {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-inline-size: 0;
	flex: 1 1 auto;
	overflow: hidden;
}

.source-banner-label {
	font-size: clamp(0.75rem, 1.5vw, 0.875rem);
	font-weight: 700;
	letter-spacing: max(0.03em, 0.3px);
	text-transform: uppercase;
	color: var(--c-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

.source-banner-name {
	font-size: clamp(0.75rem, 2.5vw, var(--text-base));
	font-weight: 600;
	color: var(--c-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

.source-banner-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.125rem, 1vw, 0.375rem);
	padding: clamp(0.25rem, 1.5vw, var(--space-sm)) clamp(0.375rem, 2vw, var(--space-md));
	background: var(--c-accent);
	color: white;
	border-radius: var(--radius-md);
	text-decoration: none;
	font-size: clamp(0.75rem, 2vw, var(--text-sm));
	font-weight: 500;
	white-space: nowrap;
	flex-shrink: 0;
}

.source-banner-link:hover {
	background: color-mix(in srgb, var(--c-accent) 85%, black);
}

.source-banner-link span {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	max-inline-size: clamp(4rem, 15vw, 10rem);
}

.source-banner-link svg.icon {
	inline-size: clamp(0.75rem, 2vw, 1rem);
	block-size: clamp(0.75rem, 2vw, 1rem);
	flex-shrink: 0;
	vertical-align: baseline;
	fill: currentColor;
}

/* ================================================
   TLDR MINIMAL LINE DESIGN
   ================================================ */
.tldr-minimal {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	position: relative;
	margin-block: var(--space-xl) var(--space-2xl);
}

.tldr-minimal::before {
	content: "TL;DR";
	position: absolute;
	inset-block-start: -0.5rem;
	inset-inline-start: var(--space-xl);
	background: var(--c-bg);
	padding-inline: var(--space-sm);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--c-text-3);
	text-transform: uppercase;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
}

.tldr-minimal-left {
	padding: var(--space-lg);
	border-inline-end: 1px solid var(--c-border);
}

.tldr-minimal-headline {
	font-size: var(--text-md);
	font-weight: 600;
	line-height: 1.3;
	color: var(--c-text);
}

.tldr-minimal-summary {
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--c-text-2);
	padding-block-start: var(--radius-md);
}

.tldr-minimal-right {
	padding: var(--space-md);
	background: var(--c-bg-2);
}

.tldr-minimal-points {
	list-style: none;
}

.tldr-minimal-point {
	align-items: flex-start;
	gap: var(--space-sm);
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--c-text);
	padding-inline-start: var(--space-lg);
	position: relative;
}

.tldr-minimal-point::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.6em;
	inline-size: var(--space-md);
	block-size: 1px;
	background: var(--c-accent);
}

/* =================================================================
   FAQ Section Styles - Exact match from visualization/single.html
   ================================================================= */

.faq-section {
	margin-block: var(--space-2xl) var(--space-2xl);
}

.faq-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: clamp(1rem, 3vw, 1.25rem);
	flex-wrap: wrap;
	gap: 1rem;
}

.faq-header h2 {
	color: var(--c-text);
	margin: 0;
	font-size: var(--text-2xl);
	font-weight: 700;
}

.faq-controls {
	display: flex;
}

.faq-controls button {
	padding: 0.5rem 1rem;
	background-color: var(--c-border);
	color: var(--c-text);
	border: none;
	border-radius: 0.25rem;
	cursor: pointer;
	font-size: 0.875rem;
	transition: background-color 200ms;
	min-width: 6rem;
}

.faq-controls button:hover {
	background-color: color-mix(in srgb, var(--c-border) 85%, black);
}

[data-theme="dark"] .faq-controls button:hover {
	background-color: color-mix(in srgb, var(--c-border) 115%, white);
}

.faq-container {
	container-type: inline-size;
	border: 0.5px solid var(--c-border);
	border-radius: clamp(0.375rem, 1vw, 0.5rem);
	overflow: hidden;
	margin-block: clamp(0.75rem, 2vw, 1rem);
	background-color: var(--c-bg-2);
}

.faq-item {
	position: relative;
	overflow: visible;
	transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .faq-item:hover {
	background-color: rgba(0, 0, 0, 0.3);
}

.faq-item[open] {
	background-color: var(--c-bg-3);
}

.faq-item details {
	position: relative;
}

.faq-item summary {
	display: grid;
	grid-template-columns: clamp(2rem, 8cqi, 2.5rem) 1fr auto;
	align-items: center;
	padding-block: clamp(0.75rem, 3cqi, 1rem);
	padding-inline-end: clamp(0.5rem, 2cqi, 1rem);
	cursor: pointer;
	list-style: none;
	user-select: none;
	color: var(--c-text-3);
	transition: color 200ms;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::marker {
	display: none;
}

.faq-item summary:hover {
	color: var(--c-text);
}

.faq-item summary:focus-visible {
	outline: 2px solid var(--c-text-3);
	outline-offset: -2px;
	border-radius: 4px;
}

.faq-indicator {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	inline-size: 100%;
	block-size: 100%;
}

.faq-indicator::before {
	content: attr(data-number);
	inline-size: clamp(1rem, 3cqi, 1.25rem);
	block-size: clamp(1rem, 3cqi, 1.25rem);
	border-radius: 50%;
	background-color: var(--c-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(0.5rem, 2cqi, 0.625rem);
	font-weight: 600;
	color: var(--c-text-3);
	line-height: 1;
	z-index: 2;
}

.faq-indicator::after {
	content: '';
	position: absolute;
	top: clamp(1rem, 3cqi, 1.25rem);
	inline-size: 1px;
	background-color: var(--c-border);
	block-size: calc(100% + clamp(0.75rem, 3cqi, 1rem));
	transition: block-size 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:last-child .faq-indicator::after {
	display: none;
}

.faq-item[open] .faq-indicator::after {
	block-size: var(--line-height, calc(100% + 1rem));
}

.faq-question {
	font-weight: 500;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-inline-end: clamp(0.5rem, 2cqi, 1rem);
	font-size: clamp(0.875rem, 3cqi, 1rem);
}

.faq-chevron {
	inline-size: clamp(1rem, 4cqi, 1.25rem);
	block-size: clamp(1rem, 4cqi, 1.25rem);
	transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
	color: var(--c-text-3);
}

.faq-item[open] .faq-chevron {
	transform: rotate(180deg);
}

.faq-answer {
	padding-inline-start: clamp(2rem, 8cqi, 2.5rem);
	padding-inline-end: clamp(0.5rem, 2cqi, 1rem);
	padding-block-end: clamp(0.5rem, 2cqi, 1rem);
	color: var(--c-text-3);
	font-size: clamp(0.8125rem, 2.5cqi, 0.875rem);
	line-height: 1.5;
	max-block-size: clamp(10rem, 30vh, 15rem);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--c-border) transparent;
}

.faq-answer::-webkit-scrollbar {
	inline-size: 6px;
}

.faq-answer::-webkit-scrollbar-track {
	background: transparent;
}

.faq-answer::-webkit-scrollbar-thumb {
	background: var(--c-border);
	border-radius: 3px;
}

.faq-answer ol {
	margin-block: 0.5rem;
	padding-inline-start: 1.25rem;
	list-style: decimal;
}

.faq-answer li {
	margin-block: 0.25rem;
}

/* ================================================================= */
/* CONSOLIDATED MEDIA QUERIES */
/* ================================================================= */

/* Container Queries */
@container (min-width: 25rem) {
	.faq-question {
		white-space: normal;
	}
}

@container (max-width: 40rem){
  .footer-bottom{
    flex-direction:column;
    text-align:center;
  }
}

@container (min-width: 50rem){
  .footer-content{
    grid-template-columns:2fr 1fr 1fr;
  }
  
  .footer-brand{
    grid-column:auto;
    max-inline-size:35rem;
  }
}

/* Mobile Small - max-width: 480px */
@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-sm);
  }

  .header-content {
    padding-inline: var(--space-sm);
  }

  .news-card .content {
    padding: var(--space-sm);
  }
}

/* Mobile - max-width: 767px */
@media (max-width: 767px) {
  .nav-links{display:none}
  .menu-btn{display:flex!important}
  
  .header{
    padding-inline:var(--space-sm);
  }
  
  .logo-text{
    font-size:var(--text-sm);
  }
  
  .stats{
    grid-template-columns:repeat(2, 1fr);
    gap:var(--space-lg);
    text-align:center;
  }

  .search-bar{
    padding:var(--space-xs);
  }
  
  .search-input{
    padding:0.625rem 0.75rem;
    padding-inline-start:2.25rem;
    font-size:var(--text-sm);
  }
  
  .search-btn{
    padding:0.5rem 1rem;
    font-size:var(--text-xs);
  }
  
  .search-icon{
    inset-inline-start:0.75rem;
  }
  
  .section-title{
    margin-block-end:var(--space-sm);
  }
  
  .grid-3col {
    grid-template-columns: 1fr;
  }
  
  .meta-info {
    font-size: var(--text-xs);
  }
  
  .article-hero {
    block-size: 120px;
  }
  
  .article-title {
    font-size: var(--text-2xl);
  }
  
  /* Mobile Post Meta Layout */
  .post-meta {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1px auto;
    gap: var(--space-md);
  }
  
  /* Hide vertical dividers on mobile */
  .post-meta .meta-avatar::after,
  .post-meta .meta-source::after,
  .post-meta .meta-time::after,
  .post-meta .meta-engagement::after {
    display: none;
  }
  
  .post-meta .meta-avatar {
    grid-column: 1;
    grid-row: 1;
  }
  
  .post-meta .meta-source {
    grid-column: 2;
    grid-row: 1;
  }
  
  .post-meta .meta-time {
    grid-column: 3;
    grid-row: 1;
  }
  
  /* Divider line */
  .post-meta::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 2;
    block-size: 1px;
    background: var(--c-border);
  }
  
  /* Bottom row - engagement stats */
  .post-meta .meta-engagement {
    grid-column: 1 / 3;
    grid-row: 3;
    flex-direction: row;
    gap: var(--space-lg);
  }
  
  .post-meta .meta-trust {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
    align-self: center;
  }
  
  /* Table responsive adjustments */
  .article-content th,
  .article-content td {
    padding: var(--space-sm);
    font-size: var(--text-sm);
  }
  
  /* TLDR responsive */
  .tldr-minimal {
    grid-template-columns: 1fr;
  }
  
  .tldr-minimal-left {
    border-inline-end: none;
    border-block-end: 1px solid var(--c-border);
  }
}

/* Desktop - min-width: 768px */
@media (min-width: 768px) {
  .nav-links{
    display:flex!important;
    position:static!important;
    inline-size:auto!important;
    padding:0.2rem!important;
    border:1px solid color-mix(in srgb, var(--c-border) 10%, transparent)!important;
    box-shadow:none!important;
    flex-direction:row!important;
    backdrop-filter:none!important;
    background:color-mix(in srgb, var(--c-bg-2) 50%, transparent)!important;
    animation:none!important;
  }
  
  .menu-btn{display:none}
  
  .main{
    padding-block:0rem;
  }
}

/* WordPress Admin Bar Compatibility - max-width: 782px */
@media screen and (max-width: 782px) {
  .admin-bar .header {
    inset-block-start: calc(46px + 0.5rem);
  }
  
  .admin-bar #menu-toggle:checked ~ .nav .nav-links {
    inset-block-start: calc(46px + 1rem);
  }
}

/* ================================================================= */
/* SHARE BAR SYSTEM - AI PLATFORMS & SOCIAL MEDIA */
/* Extracted from visualization/sharebar.html */
/* ================================================================= */

@layer components {
  /* Share Button Base Styles */
  .share-btn {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    transition: all var(--duration-base) var(--ease-out);
  }
  
  /* Special case for Google News multi-color icon */
  .share-btn.googlenews .icon {
    fill: none;
  }
  
  .share-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
  }
  
  .share-btn:active {
    transform: scale(0.95);
  }
  
  .share-btn .icon {
    inline-size: 18px;
    block-size: 18px;
    position: relative;
    z-index: 2;
  }
  
  /* Tooltip - Desktop Only */
  @media (min-width: 768px) {
    .share-btn[data-tooltip]::before {
      content: attr(data-tooltip);
      position: absolute;
      inset-block-end: calc(100% + 8px);
      inset-inline-start: 50%;
      transform: translateX(-50%);
      padding: var(--space-xs) var(--space-sm);
      background: var(--c-glass);
      backdrop-filter: blur(10px);
      color: var(--c-text);
      font-size: var(--text-xs);
      white-space: nowrap;
      border-radius: var(--radius-sm);
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      z-index: 1000;
      box-shadow: var(--shadow-md);
      transition: all var(--duration-base) var(--ease-out);
    }
    
    .share-btn[data-tooltip]:hover::before {
      opacity: 1;
      visibility: visible;
    }
  }
  
  /* Brand-specific hover colors */
  .share-btn.chatgpt:hover {
    color: #10A37F;
    border-color: #10A37F;
    background: color-mix(in srgb, #10A37F 10%, transparent);
  }
  
  .share-btn.perplexity:hover {
    color: #20B2AA;
    border-color: #20B2AA;
    background: color-mix(in srgb, #20B2AA 10%, transparent);
  }
  
  .share-btn.googleai:hover {
    color: #4285F4;
    border-color: #4285F4;
    background: color-mix(in srgb, #4285F4 10%, transparent);
  }
  
  .share-btn.grok:hover {
    color: var(--c-text);
    border-color: var(--c-text);
    background: var(--c-bg-2);
  }
  
  .share-btn.claude:hover {
    color: #D97706;
    border-color: #D97706;
    background: color-mix(in srgb, #D97706 10%, transparent);
  }
  
  .share-btn.googlenews:hover {
    border-color: #4285F4;
    background: color-mix(in srgb, #4285F4 10%, transparent);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
  }
  
  .share-btn.facebook:hover {
    color: #1877F2;
    border-color: #1877F2;
    background: color-mix(in srgb, #1877F2 10%, transparent);
  }
  
  .share-btn.x:hover {
    color: #1DA1F2;
    border-color: #1DA1F2;
    background: color-mix(in srgb, #1DA1F2 10%, transparent);
  }
  
  .share-btn.linkedin:hover {
    color: #0077B5;
    border-color: #0077B5;
    background: color-mix(in srgb, #0077B5 10%, transparent);
  }
  
  .share-btn.reddit:hover {
    color: #FF4500;
    border-color: #FF4500;
    background: color-mix(in srgb, #FF4500 10%, transparent);
  }
  
  .share-btn.whatsapp:hover {
    color: #25D366;
    border-color: #25D366;
    background: color-mix(in srgb, #25D366 10%, transparent);
  }
  
  .share-btn.telegram:hover {
    color: #26A5E4;
    border-color: #26A5E4;
    background: color-mix(in srgb, #26A5E4 10%, transparent);
  }
  
  .share-btn.pinterest:hover {
    color: #E60023;
    border-color: #E60023;
    background: color-mix(in srgb, #E60023 10%, transparent);
  }
  
  .share-btn.markdown:hover {
    color: var(--c-text);
    border-color: var(--c-text);
    background: var(--c-bg-2);
  }
  
  .share-btn.copy:hover {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-accent-subtle);
  }
  
  .share-btn.copy.copied {
    color: white;
    border-color: var(--c-success);
    background: var(--c-success);
  }
  
  /* Below Article Share Bar */
  .share-bar-below {
    position: sticky;
    inset-block-start: 2rem;
    margin: 3rem 0;
    padding: 1rem 0;
    border: none;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
  }
  
  /* CSS Separators for below article share buttons */
  .share-bar__buttons .share-btn.claude::after,
  .share-bar__buttons .share-btn.pinterest::after {
    content: '';
    position: absolute;
    inset-inline-end: calc(-1 * 0.25rem - 0.5px);
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 1px;
    block-size: 24px;
    background: var(--c-border);
    pointer-events: none;
  }
}

@layer mobile {
  /* Mobile Share Bar - Fixed Bottom */
  .mobile-share-bar {
    display: none;
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    background: var(--c-glass);
    backdrop-filter: blur(20px);
    border-block-start: 1px solid var(--c-border);
    box-shadow: 0 -2px 10px var(--c-black-10);
    z-index: 600;
    padding: var(--space-sm);
  }
  
  @media (max-width: 640px) {
    .mobile-share-bar {
      display: block;
    }
    
    .share-bar-below {
      position: relative;
      inset-block-start: 0;
      margin: 2rem 0;
      padding: 0.75rem 0;
      justify-content: center;
      gap: 0.5rem;
    }
    
    .share-btn {
      flex-shrink: 0;
      min-inline-size: 36px;
    }
  }
  
  .mobile-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }
  
  /* Mobile TOC Button */
  .mobile-toc-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: var(--c-accent);
    color: white;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
  }
  
  .mobile-toc-btn:hover {
    background: var(--c-accent-hover);
  }
  
  .mobile-toc-btn:active {
    transform: scale(0.98);
  }
  
  .mobile-toc-btn .icon {
    inline-size: 18px;
    block-size: 18px;
  }
  
  /* Mobile Share Button */
  .mobile-share-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: var(--c-bg-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
  }
  
  .mobile-share-btn:hover {
    background: var(--c-bg-3);
    border-color: var(--c-accent);
  }
  
  .mobile-share-btn:active {
    transform: scale(0.98);
  }
  
  .mobile-share-btn .icon {
    inline-size: 18px;
    block-size: 18px;
  }
  
  /* Mobile TOC Overlay */
  .mobile-toc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--c-black-20);
    backdrop-filter: blur(4px);
    z-index: 700;
  }
  
  .mobile-toc-overlay.active {
    display: block;
  }
  
  .mobile-toc-content {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 20%;
    inline-size: 80%;
    max-inline-size: 300px;
    block-size: 60%;
    background: var(--c-surface);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    box-shadow: 0 4px 20px var(--c-black-15);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    transition: transform var(--duration-base) var(--ease-out);
  }
  
  .mobile-toc-overlay.active .mobile-toc-content {
    transform: translateX(0);
  }
  
  .mobile-toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-lg);
    padding-block-end: var(--space-md);
    border-block-end: 1px solid var(--c-border);
    flex-shrink: 0;
  }
  
  .mobile-toc-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--c-text);
  }
  
  .mobile-toc-close {
    inline-size: 32px;
    block-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-bg-2);
    color: var(--c-text-2);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
  }
  
  .mobile-toc-close:hover {
    background: var(--c-bg-3);
    transform: rotate(90deg);
  }
  
  .mobile-toc-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
  }
  
  .mobile-toc-link {
    display: block;
    padding: var(--space-sm);
    font-size: var(--text-base);
    color: var(--c-text-2);
    border-radius: var(--radius-sm);
    transition: all var(--duration-base) var(--ease-out);
  }
  
  .mobile-toc-link:hover {
    background: var(--c-bg-2);
    color: var(--c-accent);
  }
  
  /* Mobile Share Sheet - More Compact */
  .mobile-share-sheet {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--c-black-20);
    backdrop-filter: blur(4px);
    z-index: 800;
  }
  
  .mobile-share-sheet.active {
    display: block;
  }
  
  .mobile-share-content {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    background: var(--c-surface);
    border-start-start-radius: var(--radius-lg);
    border-start-end-radius: var(--radius-lg);
    padding: var(--space-md);
    transform: translateY(100%);
    max-block-size: 80vh;
    overflow-y: auto;
    transition: transform var(--duration-base) var(--ease-out);
  }
  
  .mobile-share-sheet.active .mobile-share-content {
    transform: translateY(0);
  }
  
  .mobile-share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-md);
  }
  
  .mobile-share-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--c-text);
  }
  
  .mobile-share-close {
    inline-size: 28px;
    block-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-bg-2);
    color: var(--c-text-2);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
  }
  
  .mobile-share-close:hover {
    background: var(--c-bg-3);
    transform: rotate(90deg);
  }
  
  /* Compact Mobile Share Grid */
  .mobile-share-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-xs);
    margin-block-end: var(--space-md);
  }
  
  @media (max-width: 360px) {
    .mobile-share-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  .mobile-share-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    cursor: pointer;
  }
  
  .mobile-share-icon {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg-2);
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
  }
  
  .mobile-share-icon:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
  }
  
  .mobile-share-icon:active {
    transform: scale(0.95);
  }
  
  /* Brand-specific hover colors for mobile */
  .mobile-share-item:hover .mobile-share-icon.chatgpt {
    background: color-mix(in srgb, #10A37F 10%, transparent);
    border-color: #10A37F;
    color: #10A37F;
  }
  
  .mobile-share-item:hover .mobile-share-icon.perplexity {
    background: color-mix(in srgb, #20B2AA 10%, transparent);
    border-color: #20B2AA;
    color: #20B2AA;
  }
  
  .mobile-share-item:hover .mobile-share-icon.googleai {
    background: color-mix(in srgb, #4285F4 10%, transparent);
    border-color: #4285F4;
    color: #4285F4;
  }
  
  .mobile-share-item:hover .mobile-share-icon.grok {
    background: var(--c-bg-3);
    border-color: var(--c-text);
    color: var(--c-text);
  }
  
  .mobile-share-item:hover .mobile-share-icon.claude {
    background: color-mix(in srgb, #D97706 10%, transparent);
    border-color: #D97706;
    color: #D97706;
  }
  
  .mobile-share-item:hover .mobile-share-icon.googlenews {
    background: color-mix(in srgb, #4285F4 10%, transparent);
    border-color: #4285F4;
  }
  
  .mobile-share-item:hover .mobile-share-icon.facebook {
    background: color-mix(in srgb, #1877F2 10%, transparent);
    border-color: #1877F2;
    color: #1877F2;
  }
  
  .mobile-share-item:hover .mobile-share-icon.x {
    background: color-mix(in srgb, #1DA1F2 10%, transparent);
    border-color: #1DA1F2;
    color: #1DA1F2;
  }
  
  .mobile-share-item:hover .mobile-share-icon.linkedin {
    background: color-mix(in srgb, #0077B5 10%, transparent);
    border-color: #0077B5;
    color: #0077B5;
  }
  
  .mobile-share-item:hover .mobile-share-icon.reddit {
    background: color-mix(in srgb, #FF4500 10%, transparent);
    border-color: #FF4500;
    color: #FF4500;
  }
  
  .mobile-share-item:hover .mobile-share-icon.whatsapp {
    background: color-mix(in srgb, #25D366 10%, transparent);
    border-color: #25D366;
    color: #25D366;
  }
  
  .mobile-share-item:hover .mobile-share-icon.telegram {
    background: color-mix(in srgb, #26A5E4 10%, transparent);
    border-color: #26A5E4;
    color: #26A5E4;
  }
  
  .mobile-share-item:hover .mobile-share-icon.pinterest {
    background: color-mix(in srgb, #E60023 10%, transparent);
    border-color: #E60023;
    color: #E60023;
  }
  
  .mobile-share-icon .icon {
    inline-size: 18px;
    block-size: 18px;
  }
  
  /* Special case for Google News multi-color icon */
  .mobile-share-icon.googlenews .icon {
    fill: none;
  }
  
  .mobile-share-label {
    font-size: 0.625rem;
    color: var(--c-text-3);
    text-align: center;
    line-height: 1.2;
  }
  
  .mobile-copy-section {
    padding: var(--space-sm);
    background: var(--c-bg-2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }
  
  .mobile-copy-url {
    flex: 1;
    font-size: var(--text-xs);
    color: var(--c-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .mobile-copy-btn {
    padding: var(--space-2xs) var(--space-sm);
    background: var(--c-accent);
    color: white;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
  }
  
  .mobile-copy-btn:hover {
    background: var(--c-accent-hover);
  }
  
  .mobile-copy-btn:active {
    transform: scale(0.95);
  }
}

/* Print Media */
@media print {
  .header,.footer,.related-posts,.faq-section,.tldr-minimal,.source-banner,button{display:none}
  .main{padding:0}
  body{color:#000;font-size:12pt;line-height:1.5}
  h1,h2,h3{page-break-after:avoid}
  .article-content{page-break-inside:avoid}
  
  /* FAQ Print Styles - from visualization */
  .faq-controls{display:none}
  .faq-item details{open:true}
  .faq-chevron{display:none}
  .faq-answer{max-block-size:none;overflow:visible}
}

/* Preference Media Queries */
@media (prefers-reduced-motion: reduce) {
	.faq-item summary,
	.faq-chevron,
	.faq-indicator::after {
		transition-duration: 0.01ms !important;
	}
}

@media (prefers-contrast: high) {
	.faq-item:hover {
		outline: 1px solid currentColor;
	}
	
	.faq-indicator::before {
		border: 1px solid var(--c-text-3);
	}
}