:root{
    /* ========================================
       BASE COLORS
       Core color values used throughout the system
       ======================================== */
    --color-white: #ffffff;
    --color-black: #000000;
    
    /* ========================================
       GRAYSCALE PALETTE
       Standardized gray scale for consistent UI elements
       ======================================== */
    --color-gray-100: #f8f9fa; /* Lightest gray - subtle backgrounds */
    --color-gray-200: #e9ecef; /* Light gray - borders, dividers */
    --color-gray-300: #dee2e6; /* Medium-light gray - inactive elements */
    --color-gray-400: #ced4da; /* Medium gray - placeholders */
    --color-gray-500: #6c757d; /* Base gray - secondary text */
    --color-gray-600: #495057; /* Medium-dark gray - body text */
    --color-gray-700: #343a40; /* Dark gray - headings */
    --color-gray-800: #212529; /* Darkest gray - primary text */

    /* ========================================
        BRAND COLORS
        Primary brand identity colors
        ======================================== */
    --color-primary: #2c5f5a; /* Primary teal - main brand color */
    --color-secondary: #d4822a; /* Secondary orange - accent brand color */

    /* ========================================
        SEMANTIC COLORS
        Colors with specific meaning and purpose
        ======================================== */
    --color-success: #43a047; /* Green - success states, positive indicators */

    /* ========================================
        TRANSPARENT BACKGROUND COLORS
        Semi-transparent colors for overlays and indicators
        ======================================== */
    --color-primary-bg: rgba(44, 95, 90, 0.08); /* Primary teal background - 8% opacity */
    --color-secondary-bg: rgba(212, 130, 42, 0.08); /* Secondary orange background - 8% opacity */

    /* ========================================
        CATEGORY-SPECIFIC COLORS
        Colors for news categories and content types
        ======================================== */
    --color-category-ipo: #1e88e5; /* IPO - blue */
--color-category-earnings: #43a047; /* Earnings - green */
--color-category-policy: #fb8c00; /* Policy - orange */
--color-category-healthcare: #10b981; /* Healthcare - emerald */
--color-category-legal: #2c5f5a; /* Legal - teal */
--color-category-political: #8b5cf6; /* Political - purple */
--color-category-corrections: #e53935; /* Corrections - red */

    /* ========================================
        PLATFORM-SPECIFIC COLORS
        Brand colors for external platforms and services
        ======================================== */
    --color-youtube: #FF0000; /* YouTube brand red */
    --color-spotify: #1DB954; /* Spotify brand green */
    --color-apple: #000000; /* Apple brand black */

    /* ========================================
        DARK MODE COLORS
        Color overrides for dark mode
        ======================================== */
    --color-dark-text-secondary: #e1e5e9; /* Light gray for secondary text in dark mode */
    --color-dark-text-muted: #a0a9b8; /* Muted gray for tertiary text in dark mode */
    --color-dark-bg-primary: #1a1f1e; /* Dark background primary */
    --color-dark-bg-secondary: #252b2a; /* Dark background secondary */
    --color-dark-accent-primary: #87c5be; /* Light teal accent for dark mode */
    --color-dark-accent-secondary: #d4822a; /* Light orange accent for dark mode */
    
    /* ========================================
       THEME VARIABLES
       Current theme system (maintained for compatibility)
       Will be gradually migrated to use standardized colors above
       ======================================== */
    
    /* Text Colors */
    --text-primary: var(--color-black, #000000); /* Primary text - black in light mode */
    --text-secondary: var(--color-gray-700, #343a40); /* Secondary text - dark gray */
    --text-muted: var(--color-gray-500, #6c757d); /* Muted text - medium gray */
    
    /* Background Colors */
    --bg-primary: #fdf6e8; /* Primary background - warm cream */
    --bg-secondary: #f8f4e6; /* Secondary background - lighter cream */
    
    /* Accent Colors */
    --accent-primary: var(--color-primary, #2c5f5a); /* Primary accent - brand teal */
    --accent-secondary: var(--color-secondary, #d4822a); /* Secondary accent - brand orange */
    
    /* UI Element Colors */
    --border-color: #e8dcc0; /* Border color - warm beige */
    --shadow-color: rgba(44,95,90,0.1); /* Shadow color - teal with transparency */
    
    /* Logo Colors (legacy - use brand colors instead) */
     --logo-teal: var(--color-primary, #2c5f5a); /* Logo teal - same as primary */
     --logo-teal-dark: #1e4d48; /* Darker teal for hover states */
     --logo-orange: var(--color-secondary, #d4822a); /* Logo orange - same as secondary */
     --color-secondary-dark: #a0611a; /* Darker orange for text/headings - improves contrast */

    /* Change indicator colors */
    --change-positive-bg: rgba(67, 160, 71, 0.15);
    --change-positive-color: #2e7d32;
    --change-negative-bg: rgba(229, 57, 53, 0.15);
    --change-negative-color: #c62828;
    --change-neutral-bg: rgba(158, 158, 158, 0.15);
    --change-neutral-color: #616161;
    
    /* ========================================
       LAYOUT VARIABLES
       Spacing, sizing, and layout properties
       ======================================== */
    --max-content-width: 1440px;
    
    /* Spacing Scale */
    --spacing-xs: 0.5rem;   /* 8px - tight spacing */
    --spacing-sm: 0.75rem;  /* 12px - small spacing */
    --spacing-md: 1.25rem;  /* 20px - medium spacing */
    --spacing-lg: 2rem;     /* 32px - large spacing */
    --spacing-xl: 3rem;     /* 48px - extra large spacing */
    
    /* Layout Spacing */
    --content-padding: var(--spacing-md);
    --mobile-padding: var(--spacing-sm);
    --section-spacing: var(--spacing-xl);
    --component-spacing: var(--spacing-md);
}*{box-sizing:border-box}html{height:100%;margin:0;padding:0;overflow-x:hidden;background:var(--bg-primary)}body{min-height:100%;margin:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);font-family:Georgia,'Times New Roman',serif;line-height:1.6;background:var(--bg-primary);color:var(--text-secondary);transition:background-color 0.3s ease,color 0.3s ease;font-size:clamp(.9rem,2.5vw,1rem);display:flex;flex-direction:column;content-visibility:auto}.content{
    padding:var(--content-padding);
    margin:0 auto;
    box-sizing:border-box;
    max-width:var(--max-content-width);
    width:100%;
}

/* ========================================
    SHARED COMPONENT CLASSES
    Reusable styles for consistency
    ======================================== */

/* Base card class - shared across all card variants */
.card-base,
.card,
.announcement-card {
    background: var(--bg-secondary);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    padding: var(--spacing-md);
    box-shadow: var(--card-shadow);
    margin: var(--component-spacing) 0;
    box-sizing: border-box;
    transition: var(--transition-hover);
    content-visibility: auto;
    contain: layout style;
}

.card-base:hover,
.card:hover {
    border-color: var(--color-secondary);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

/* Media card variant */
.media-card {
    position: relative;
    width: 100%;
    max-width: var(--card-max-width);
    height: var(--card-height);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.media-card:hover,
.media-card:focus {
    border-color: var(--logo-orange);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
    outline: none;
}

.media-card.hidden {
    display: none;
}




/* Card title styling */
.card-title {
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

/* Card link styling */
.card a {
    text-decoration: none;
    color: var(--logo-orange);
    font-weight: 600;
    background: var(--color-secondary-bg);
    border: 1px solid var(--logo-orange);
    border-radius: 6px;
    padding: 0.18em 0.85em;
    margin: 0.15em 0.25em 0.15em 0;
    transition: all 0.2s ease;
    display: inline-block;
}

.card a:focus,

.site-header{
    text-align:center;
    padding:var(--spacing-lg) 0 var(--spacing-md);
    margin-bottom:var(--spacing-lg);
    border-bottom:1px solid var(--border-color);
}
.logo-container{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:var(--spacing-md);
}
.logo{
    max-width:200px;
    height:auto;
    display:block;
    transition:opacity 0.3s ease
}
.logo:hover{
    opacity:0.8
}
@media (max-width:768px){
    .logo{
        max-width:150px
    }
}

h2{
    color:var(--color-secondary-dark);
    border-bottom:2px solid var(--logo-orange);
    padding-bottom:var(--spacing-xs);
    margin:var(--section-spacing) 0 var(--spacing-md);
    font-size:clamp(1.2rem,4vw,1.5rem);
    line-height:1.3
}
h3,h4{
    color:var(--logo-teal);
    font-size:clamp(1rem,3vw,1.25rem);
    margin:var(--spacing-lg) 0 var(--spacing-sm);
    line-height:1.3
}

h2,
h3,
h4,
h5,
h6 {
    text-align: left
}

table {
    border-collapse: collapse;
    margin-bottom: var(--spacing-md);
    font-size: clamp(.7rem, 2vw, .9rem);
    table-layout: auto
}

td,
th {
    padding: clamp(.25rem, 1.5vw, .75rem);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap
}

th {
    background-color: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary)
}

tr:hover {
    background-color: var(--bg-secondary)
}

.table-wrapper {
    overflow-x: auto;
    position: relative;
    margin: 0;
    padding: 0
}

.table-wrapper td:first-child,
.table-wrapper th:first-child {
    position: sticky;
    left: 0;
    background-color: var(--bg-primary);
    z-index: 2;
    box-shadow: 1px 0 2px var(--shadow-color)
}

.table-wrapper th:first-child {
    background-color: var(--bg-secondary);
    z-index: 3
}

.number {
    text-align: right;
    font-family: Monaco, Menlo, 'Ubuntu Mono', monospace;
    font-size: .9em
}

.table-container {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow-x: auto;
    background-color: var(--bg-primary);
    margin: 0;
    padding: 0
}

#portfolio-table-container td:first-child,
#portfolio-table-container th:first-child {
    position: sticky;
    left: 0;
    background-color: var(--bg-primary);
    z-index: 2;
    box-shadow: 1px 0 2px var(--shadow-color)
}

#portfolio-table-container th:first-child {
    background-color: var(--bg-secondary);
    z-index: 3
}

.loading-state {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-muted);
    font-style: italic
}

.error-state {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--color-error);
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: 4px;
    margin: var(--spacing-md) 0
}

.historical-note,
.legal-box,
.note {
    background: var(--bg-secondary);
    border: 0.5px solid var(--logo-orange);
    padding: var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    border-radius: .4em;
    color: var(--text-secondary)
}

.smart-summary,
.welcome-card {
    background: var(--bg-primary);
    border: 2px solid var(--logo-teal);
    border-radius: .5em;
    margin: var(--spacing-lg) 0 var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: 0 2px 8px var(--shadow-color)
}

.smart-summary h2,
.welcome-card h2 {
    margin-top: 0;
    color: var(--logo-orange)
}

.data-notes {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color)
}

.page-image,
img[alt="Listen Image"],
img[alt="Opinion Image"],
img[alt="Read Image"],
img[alt="Watch Image"] {
    width: clamp(50px, 10vw, 80px);
    height: auto;
    margin: clamp(6px, 1.5vw, 10px) 0 0 clamp(6px, 1.5vw, 10px);
    display: block
}

a {
    color: var(--logo-orange);
    text-decoration: underline;
    transition: color 0.2s ease
}

a:focus,
a:hover {
    color: var(--logo-teal);
    text-decoration: underline
}

html.dark-mode {
    --text-primary: #e1e5e9;
    --text-secondary: #e1e5e9;
    --text-muted: #a0a9b8;
    --bg-primary: #1a1f1e;
    --bg-secondary: #252b2a;
    --accent-primary: #87c5be;
    --accent-secondary: #d4822a;
    --border-color: #495057;
    --shadow-color: #000000;
    --color-secondary-dark: #f0a854;
}

@media (prefers-color-scheme:dark) {
     :root {
          --text-primary: var(--color-dark-text-primary);
          --text-secondary: var(--color-dark-text-secondary);
          --text-muted: var(--color-dark-text-muted);
          --bg-primary: var(--color-dark-bg-primary);
          --bg-secondary: var(--color-dark-bg-secondary);
          --accent-primary: var(--color-dark-accent-primary);
          --accent-secondary: var(--color-dark-accent-secondary);
          --border-color: var(--color-gray-600);
          --shadow-color: var(--color-black);
          --color-secondary-dark: #f0a854; /* Lighter orange for dark mode */
      }

    body {
        background: var(--bg-primary)
    }



    .table-wrapper td:first-child,
    .table-wrapper th:first-child {
        background-color: var(--bg-primary)
    }

    .table-wrapper th:first-child {
        background-color: var(--bg-secondary)
    }

    #portfolio-table-container td:first-child,
    #portfolio-table-container th:first-child {
        background-color: var(--bg-primary)
    }

    #portfolio-table-container th:first-child {
        background-color: var(--bg-secondary)
    }
}

@media (min-width:1400px) {    :root{
        --content-padding:var(--spacing-lg);
        --section-spacing:var(--spacing-xl);
        --component-spacing:var(--spacing-lg)
    }
    .content{
        padding:var(--content-padding);
        margin-left:auto;
        margin-right:auto
    }
}
@media (max-width:768px){
    :root{
        --content-padding:var(--mobile-padding);
        --section-spacing:var(--spacing-lg);
        --component-spacing:var(--spacing-md)
    }

    .card{
        padding:var(--spacing-sm)
    }
    #portfolio-table-container td:first-child,
    #portfolio-table-container th:first-child,
    .table-wrapper td:first-child,
    .table-wrapper th:first-child{
        min-width:80px;
        padding:var(--spacing-xs) calc(var(--spacing-xs) / 2);
        font-size:.8em
    }
}/* Main content containment */
main {
  contain: layout style;
  content-visibility: auto;
}

@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;transition-duration:0s!important}.card:hover,.logo:hover{transform:none}}@media print{body{background:var(--color-white);color:var(--color-black);font-size:12pt}.logo{max-width:200px;filter:none}.page-image,.site-header::before,img[alt*=Image]{display:none}}.listen-intro{text-align:center;margin-bottom:var(--spacing-lg);padding:var(--spacing-lg);background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);border-radius:1rem;border:2px solid var(--logo-orange)}.listen-intro h1{margin-bottom:var(--spacing-xs);color:var(--logo-teal)}.listen-intro h1 i{margin-right:var(--spacing-xs);color:var(--logo-orange)}.listen-description{color:var(--text-secondary);margin:0;font-style:italic}.post-icon{width:1.1em;height:1.1em;vertical-align:middle;margin-right:var(--spacing-xs);color:var(--accent-primary);stroke-width:1.5}.audio-card{position:relative;overflow:hidden;transition:all 0.3s ease}.audio-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--logo-orange),var(--logo-teal));opacity:0;transition:opacity 0.3s ease}.audio-card:hover::before{opacity:1}.audio-card.featured{border:2px solid var(--logo-orange);background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--color-secondary-bg) 100%)}.audio-card.featured::before{opacity:1}.card-header{
    display:flex;
    align-items:center;
    margin-bottom:var(--spacing-md);
    gap:var(--spacing-sm);
    padding-bottom:var(--spacing-sm);
    border-bottom:1px solid var(--border-color)
}
.card-icon{
    color:var(--logo-orange);
    width:2rem;
    text-align:center;
    flex-shrink:0
}
.card-title{
    flex:1;
    margin:0;
    line-height:1.2
}
.featured-badge{
    background:var(--logo-orange);
    color:var(--color-white);
    padding:var(--spacing-xs) var(--spacing-sm);
    border-radius:2rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:var(--spacing-xs);
    margin-left:var(--spacing-sm)
}.card-links{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.card-links a{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);border-radius:0.5rem;transition:all 0.2s ease;text-decoration:none;border:1px solid var(--logo-orange);background:var(--color-secondary-bg);color:var(--logo-orange);font-weight:500}.card-links a:hover{background:var(--logo-orange);color:var(--color-white);transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow-color)}.card-links a[href*="apple"]:hover{background:var(--color-apple);border-color:var(--color-apple);box-shadow:0 4px 12px var(--shadow-color)}.card-links a[href*="spotify"]:hover{background:var(--color-spotify);border-color:var(--color-spotify);box-shadow:0 4px 12px var(--shadow-color)}.card-links a[href*="youtube"]:hover{background:var(--color-youtube);border-color:var(--color-youtube);box-shadow:0 4px 12px var(--shadow-color)}@media (max-width:768px){.listen-intro{padding:var(--spacing-md);margin-bottom:var(--spacing-lg)}.card-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-xs)}.featured-badge{margin-left:0;align-self:flex-start}.card-links{flex-direction:column}.card-links a{justify-content:center}}@media (prefers-color-scheme:dark){.listen-intro{background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-secondary) 100%);border-color:var(--accent-secondary)}.audio-card.featured{background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--color-secondary-bg) 100%);border-color:var(--accent-secondary)}.card-links a{background:var(--color-secondary-bg);border-color:var(--accent-secondary);color:var(--accent-secondary)}.card-links a:hover{background:var(--accent-secondary);color:var(--bg-primary)}}
/* ========================================
   UTILITY CLASSES
   Common reusable patterns
   ======================================== */

/* Spacing utilities */
.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Layout utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-start { display: flex; justify-content: flex-start; align-items: center; }

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

/* Color utilities */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }

/* Border utilities */
.border { border: 1px solid var(--border-color); }
.border-top { border-top: 1px solid var(--border-color); }
.border-bottom { border-bottom: 1px solid var(--border-color); }

/* Display utilities */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Position utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* Font utilities */
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
/* ========================================
   CHART MODAL STYLES
   ======================================== */

.chart-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--shadow-color);
    backdrop-filter: blur(5px);
}

.chart-modal-content {
    background-color: var(--bg-secondary);
    margin: 5% auto;
    padding: 0.5rem;
    border-radius: 6px;
    width: clamp(85%, 90vw, 400px);
    max-height: 70vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 4px 16px var(--shadow-color);
    border: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .chart-modal-content {
        width: 90vw;
        max-height: 80vh;
        margin: 10% auto;
        padding: 0.25rem;
    }
}

.chart-modal-header {
    margin: 0;
    padding: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.chart-modal-header h3 {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.chart-modal-body {
    background-color: var(--bg-primary);
    border-radius: 4px;
    padding: 1rem;
    min-height: 200px;
}

#closeChartModal {
    background: var(--color-neutral-bg);
    border: 2px solid transparent;
    font-size: 32px !important;
    font-weight: bold;
    cursor: pointer;
    color: var(--text-primary) !important;
    padding: 8px;
    width: 44px !important;
    height: 44px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
}

@media (max-width: 480px) {
    #closeChartModal {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
        min-height: 40px;
        font-size: 24px !important;
    }
}

#closeChartModal:hover {
    background-color: var(--logo-orange) !important;
    color: var(--color-white) !important;
    border-color: var(--logo-orange);
}
/* ========================================
   PAGE TITLE STYLES
   ======================================== */

.page-title {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  text-align: center;
  margin: var(--spacing-md) 0 var(--spacing-sm) 0;
  opacity: 0.6;
  padding-bottom: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  min-height: 20px;
}

/* Footer space reservation to prevent layout shift */
#social-footer {
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.page-title--bordered {
  border-bottom: 1px solid var(--border-color);
}

.page-title--journal {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tweet-text);
  text-align: center;
  margin: var(--spacing-md) 0 var(--spacing-lg) 0;
  padding: 0;
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
}

@media (max-width: 768px) {
  .page-title--journal {
    font-size: 1.25rem;
    margin: var(--spacing-sm) 0 1.5rem 0;
  }
}
/* ========================================
   BUTTON STYLES
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-hover);
  text-decoration: none;
}

.btn:hover {
  background: var(--bg-primary);
  border-color: var(--color-secondary);
  transform: translateY(-1px);
}

.btn:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ========================================
   SOCIAL FOOTER STYLES (Merged from tes.html)
   ======================================== */

#social-footer {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --border-color: #e0e0e0;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
  

    background: transparent;
    padding: 2rem 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
    
    /* Ensure proper stacking context */
    position: relative;
    width: 100%;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: transparent;
    text-decoration: none;
}

.social-links a:hover {
    background: transparent;
    transform: translateY(-2px);
}

.social-links a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.social-links img {
    width: 24px;
    height: 24px;
    filter: invert(0);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.social-links a:hover img {
    transform: scale(1.1);
    /* Removed blue filter */
}

.divider {
    height: 1px;
    background: var(--border-color);
    margin: 1rem 0;
}

.footer-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.footer-text {
    margin: 0;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--accent);
}

.footer-links a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    #social-footer {
        --bg-primary: #1a1a1a;
        --bg-secondary: #2a2a2a;
        --border-color: #444444;
        --text-primary: #ffffff;
        --text-secondary: #999999;
    }

    .social-links a {
        background: transparent;
    }

    .social-links img {
        filter: invert(1);
    }
 
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .social-links {
        gap: 0.75rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0.5rem 0;
    }

    .footer-info {
        flex-direction: column;
        gap: 1rem;
    }

    .footer-links {
        gap: 1rem;
    }
}