/**
 * Ber-Link Design Override
 * 
 * Fully monochrome design for Berlin professional networking platform
 * Focus: clean, minimal, professional, high contrast
 * 
 * Philosophy:
 * - Whitespace > color
 * - Borders > shadows
 * - Typography > decoration
 * - People > content
 * - Monochrome only (black, white, grays)
 * 
 * To use: Set DESIGN_OVERRIDE_THEME to 'ber-link' in _settings.php
 */

/* ============================================
   DESIGN TOKENS
   ============================================ */

:root {
    /* Neutral Foundation (slightly warm, paper-like) */
    --bg-app: #f4f4f3;          /* main canvas */
    --bg-surface: #ffffff;      /* cards, modals */
    --bg-surface-soft: #fafafa;
    --border-subtle: #e6e6e4;
    --border-strong: #d8d8d6;
    --text-primary: #111111;
    --text-secondary: #5a5a5a;
    --text-tertiary: #9a9a9a;
    
    /* Accent (monochrome - black) */
    --accent-primary: #000000;      /* black */
    --accent-primary-soft: #e5e5e5; /* light gray */
    --accent-on-dark: #000000;
    
    /* Status (monochrome grays) */
    --status-success: #d0d0d0; /* light gray */
    --status-warning: #b0b0b0; /* medium gray */
    --status-neutral: #eaeaea;
    
    /* Typography */
    --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --text-xl: 40px;   /* page titles */
    --text-lg: 28px;   /* section headers */
    --text-md: 18px;   /* primary content */
    --text-sm: 14px;   /* meta, labels */
    --text-xs: 12px;   /* timestamps, hints */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --lh-tight: 1.2;
    --lh-normal: 1.45;
    --lh-relaxed: 1.7;
    
    /* Spacing (crucial - prefer fewer elements with more space) */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 72px;
    
    /* Radius & Shape */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-full: 9999px;
    
    /* Shadow System (very restrained) */
    --shadow-none: none;
    --shadow-soft: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-modal: 0 20px 60px rgba(0,0,0,0.18);
    
    /* Interaction */
    --transition-fast: 120ms ease-out;
    --transition-base: 200ms ease-out;
    
    /* Component-Level Semantic Tokens */
    --card-bg: var(--bg-surface);
    --card-border: var(--border-subtle);
    --card-radius: var(--radius-md);
    --card-padding: var(--space-lg);
    --modal-bg: var(--bg-surface);
    --modal-radius: var(--radius-lg);
    --modal-shadow: var(--shadow-modal);
    --btn-primary-bg: #000000; /* black */
    --btn-primary-text: #ffffff; /* white */
    --btn-secondary-bg: #e5e5e5; /* light gray */
    --btn-secondary-border: #d0d0d0; /* medium gray */
    --btn-secondary-text: #000000; /* black */
    
    /* Timeline Tokens (key visual identity) */
    --timeline-line: var(--border-strong);
    --timeline-dot: #000;
    --timeline-dot-active: #000000; /* black */
    --timeline-label: var(--text-tertiary);
    --timeline-label-active: var(--text-primary);
    
    /* Presence & Human Signals (monochrome grays) */
    --presence-online: #808080; /* medium gray */
    --presence-idle: #a0a0a0; /* light-medium gray */
    --presence-offline: #e0e0e0;
}

/* ============================================
   GLOBAL FOUNDATION
   ============================================ */

body {
    background-color: var(--bg-app) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--text-md) !important;
    line-height: var(--lh-normal) !important;
}

/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ============================================
   REMOVE GRADIENTS (Except Approved CTAs)
   ============================================ */

* {
    background-image: none !important;
}

/* Exception: Only approved CTA buttons can use gradient */
/* Exclude plain text links (those with font-medium or text- classes) */
.cta-approved-gradient:not(.btn),
[data-cta="apply"]:not(.btn):not([class*="font-medium"]):not([class*="text-gray"]):not([class*="text-blue"]):not([class*="text-red"]):not([class*="text-green"]),
[data-cta="invite"]:not(.btn):not([class*="font-medium"]):not([class*="text-gray"]):not([class*="text-blue"]):not([class*="text-red"]):not([class*="text-green"]),
[data-cta="join"]:not(.btn):not([class*="font-medium"]):not([class*="text-gray"]):not([class*="text-blue"]):not([class*="text-red"]):not([class*="text-green"]),
a[href*="request-access"]:not(.btn):not([class*="font-medium"]):not([class*="text-gray"]):not([class*="text-blue"]):not([class*="text-red"]):not([class*="text-green"]),
a[href*="register"]:not(.btn):not([class*="font-medium"]):not([class*="text-gray"]):not([class*="text-blue"]):not([class*="text-red"]):not([class*="text-green"]) {
    background-color: #000000 !important; /* black solid */
    background-image: none !important;
}

/* Explicitly exclude plain text links with font-medium or text-gray classes from gradient */
/* This must come after the gradient rule to override it */
a[href*="request-access"][class*="font-medium"],
a[href*="request-access"][class*="text-gray"],
a[href*="register"][class*="font-medium"],
a[href*="register"][class*="text-gray"],
a[href*="request-access"].font-medium,
a[href*="request-access"][class*="text-gray-900"],
a[href*="request-access"][class*="text-gray-700"],
a[href*="request-access"][class*="text-gray-600"],
a[href*="request-access"][class*="text-gray-500"] {
    background-image: none !important;
    background-color: transparent !important;
    color: inherit !important; /* Let the text-gray-900 class control the color */
}

/* Exception: Our Telegram panel - monochrome gradient */
/* Target the Telegram panel by its gradient classes (Tailwind uses separate classes) */
a[class*="bg-gradient-to-br"][class*="from-blue-400"][class*="to-cyan-500"],
a.bg-gradient-to-br.from-blue-400.to-cyan-500 {
    background-image: linear-gradient(to bottom right, #2a2a2a, #1a1a1a) !important;
    background-color: transparent !important;
}

/* Exception: Login/Request Access left column - preserve dark gradient background */
div[class*="bg-gradient-to-br"][class*="from-gray-900"],
div.bg-gradient-to-br.from-gray-900,
div[class*="bg-gradient-to-br"][class*="via-gray-800"][class*="to-gray-900"],
div.bg-gradient-to-br.from-gray-900.via-gray-800.to-gray-900 {
    background-image: linear-gradient(to bottom right, #111827, #1f2937, #111827) !important;
    background-color: #111827 !important; /* Fallback color */
}

/* Exception: Company hero section - monochrome gradient */
.company-hero-gradient {
    background: linear-gradient(to right, #1a1a1a, #2a2a2a) !important;
}

.company-hero-gradient.bg-gradient-to-r {
    background: linear-gradient(to right, #1a1a1a, #2a2a2a) !important;
}

/* Login/Request Access left column - text styling */
/* H1 in left column - white */
div[class*="bg-gradient-to-br"][class*="from-gray-900"] h1.text-4xl,
div.bg-gradient-to-br.from-gray-900 h1.text-4xl,
div[class*="bg-gradient-to-br"][class*="from-gray-900"] h1,
div.bg-gradient-to-br.from-gray-900 h1 {
    color: #ffffff !important;
}

/* Company hero section - preserve white text */
.company-hero-gradient,
.company-hero-gradient *,
.company-hero-gradient h1,
.company-hero-gradient p,
.company-hero-gradient span:not(.bg-white),
.company-hero-gradient div {
    color: #ffffff !important;
}

/* Company hero buttons - preserve white/transparent styling */
.company-hero-gradient button,
.company-hero-gradient a.px-4:not(.bg-white) {
    background-color: rgba(255, 255, 255, 0.2) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* Company hero - solid white button (View Website) */
.company-hero-gradient a.bg-white {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
}

/* H3 in left column - white */
div[class*="bg-gradient-to-br"][class*="from-gray-900"] h3.text-xl,
div.bg-gradient-to-br.from-gray-900 h3.text-xl,
div[class*="bg-gradient-to-br"][class*="from-gray-900"] h3,
div.bg-gradient-to-br.from-gray-900 h3 {
    color: #ffffff !important;
}

/* Feature description divs - larger text, no background */
div[class*="bg-gradient-to-br"][class*="from-gray-900"] div.flex.items-start,
div.bg-gradient-to-br.from-gray-900 div.flex.items-start {
    background-color: transparent !important;
    background-image: none !important;
    font-size: 1.125rem !important; /* text-lg - larger than default */
    line-height: 1.75 !important;
}

/* Feature description paragraphs - larger text */
div[class*="bg-gradient-to-br"][class*="from-gray-900"] div.flex.items-start p,
div.bg-gradient-to-br.from-gray-900 div.flex.items-start p {
    font-size: 1.125rem !important; /* text-lg */
    line-height: 1.75 !important;
}

/* Preserve Telegram icon and text colors */
a[class*="bg-gradient-to-br"][class*="from-blue-400"][class*="to-cyan-500"] svg,
a.bg-gradient-to-br.from-blue-400.to-cyan-500 svg {
    color: #ffffff !important;
    fill: currentColor !important;
}

a[class*="bg-gradient-to-br"][class*="from-blue-400"][class*="to-cyan-500"] h4,
a[class*="bg-gradient-to-br"][class*="from-blue-400"][class*="to-cyan-500"] p,
a.bg-gradient-to-br.from-blue-400.to-cyan-500 h4,
a.bg-gradient-to-br.from-blue-400.to-cyan-500 p {
    color: #ffffff !important;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, .text-4xl, .text-5xl {
    font-size: var(--text-xl) !important;
    line-height: var(--lh-tight) !important;
    font-weight: var(--weight-semibold) !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.02em;
}

h2, .text-3xl {
    font-size: var(--text-lg) !important;
    line-height: var(--lh-tight) !important;
    font-weight: var(--weight-semibold) !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.01em;
}

h3, .text-2xl {
    font-size: var(--text-md) !important;
    line-height: var(--lh-normal) !important;
    font-weight: var(--weight-medium) !important;
    color: var(--text-primary) !important;
}

h4, h5, h6 {
    font-size: var(--text-sm) !important;
    line-height: var(--lh-normal) !important;
    font-weight: var(--weight-medium) !important;
    color: var(--text-primary) !important;
}

p, .text-base {
    font-size: var(--text-md) !important;
    line-height: var(--lh-relaxed) !important;
    color: var(--text-primary) !important;
}

.text-sm, small {
    font-size: var(--text-sm) !important;
    line-height: var(--lh-normal) !important;
    color: var(--text-secondary) !important;
}

.text-xs {
    font-size: var(--text-xs) !important;
    line-height: var(--lh-normal) !important;
    color: var(--text-tertiary) !important;
}

/* Exception: Badges with colored backgrounds and text-white should keep white text */
span[class*="bg-green-600"].text-white,
span[class*="bg-blue-600"].text-white,
span[class*="bg-red-600"].text-white,
span[class*="bg-yellow-600"].text-white,
span[class*="bg-purple-600"].text-white,
span[class*="bg-indigo-600"].text-white,
span[class*="bg-pink-600"].text-white,
span.bg-green-600.text-white,
span.bg-blue-600.text-white,
span.bg-red-600.text-white,
span.bg-yellow-600.text-white,
span.bg-purple-600.text-white,
span.bg-indigo-600.text-white,
span.bg-pink-600.text-white {
    color: #ffffff !important;
}

/* ============================================
   TAGS (Clickable tag clouds)
   ============================================ */

/* Replacement for: class="inline-flex items-center cursor-pointer group" */
.tag,
span.tag,
a.tag,
button.tag {
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    /* group class in Tailwind is for group-hover functionality, no additional styles needed */
}

/* Active tag state: black background + white text */
.tag.active,
span.tag.active,
a.tag.active,
button.tag.active,
.tag.active > *,
.tag.active span {
    background-color: #000000 !important; /* black */
    color: #ffffff !important;
    border-color: #000000 !important;
}

/* Keep nested elements readable on blue background */
.tag.active > *,
.tag.active span,
.tag.active * {
    color: #ffffff !important;
}

/* Legacy support: .tag-active parent class */
.tag-active > span {
    background-color: #000000 !important; /* black */
    color: #ffffff !important;
    border-color: #000000 !important;
}

/* Keep the count readable on blue */
.tag-active > span > span {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Avoid bold unless for identity (names) */
strong, b, .font-bold {
    font-weight: var(--weight-semibold) !important;
}

.font-semibold {
    font-weight: var(--weight-semibold) !important;
}

.font-medium {
    font-weight: var(--weight-medium) !important;
}

/* ============================================
   CARDS (Borders > Shadows)
   ============================================ */

.bg-white,
[class*="card"],
.shadow,
.rounded-lg,
.rounded-xl {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--shadow-none) !important;
    transition: border-color var(--transition-base), background-color var(--transition-base) !important;
}

/* Remove hover transforms/lifts */
.bg-white:hover,
[class*="card"]:hover,
.shadow:hover {
    transform: none !important;
    box-shadow: var(--shadow-none) !important;
}

/* Interactive cards - subtle border/background change only */
.bg-white:hover,
[class*="card"]:hover {
    border-color: var(--border-strong) !important;
    background-color: var(--bg-surface-soft) !important;
}

/* Exception: Telegram panel - exclude from card styling and preserve original design */
a[class*="bg-gradient-to-br"][class*="from-blue-400"][class*="to-cyan-500"],
a.bg-gradient-to-br.from-blue-400.to-cyan-500 {
    background-color: transparent !important;
    border: none !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

a[class*="bg-gradient-to-br"][class*="from-blue-400"][class*="to-cyan-500"]:hover,
a.bg-gradient-to-br.from-blue-400.to-cyan-500:hover {
    background-color: transparent !important;
    border: none !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    transform: none !important;
}

/* ============================================
   BUTTON SYSTEM (Base + Types + Sizes)
   ============================================ */

/* Base Button Class - Common attributes for all buttons */
.btn,
button.btn,
a.btn {
    /* Base style from reference: px-4 py-2 border-2 border-gray-300 text-gray-700 rounded-2xl hover:border-gray-400 hover:bg-gray-50 transition */
    padding: 0.5rem 1rem !important; /* px-4 py-2 */
    border-width: 2px !important; /* border-2 */
    border-style: solid !important;
    border-color: #d1d5db !important; /* border-gray-300 */
    border-radius: 1rem !important; /* rounded-2xl */
    color: #374151 !important; /* text-gray-700 */
    background-color: transparent !important;
    font-weight: var(--weight-medium) !important;
    transition: all var(--transition-base) !important; /* transition - includes transform, box-shadow, etc. */
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Base button hover (matches reference: hover:border-gray-400 hover:bg-gray-50) */
/* All buttons get large shadow and elevation on hover */
.btn:hover,
button.btn:hover,
a.btn:hover {
    border-color: #9ca3af !important; /* hover:border-gray-400 */
    background-color: #f9fafb !important; /* hover:bg-gray-50 */
    /* Much larger shadow for buttons */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important; /* elevate button */
    scale: none !important;
}

/* ============================================
   BUTTON TYPES
   ============================================ */

/* Primary Button - Black */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background-color: var(--btn-primary-bg) !important; /* black */
    color: var(--btn-primary-text) !important; /* white */
    border-color: var(--btn-primary-bg) !important; /* black */
    /* Padding controlled by size classes or base .btn class */
    font-size: var(--text-sm) !important; /* medium font size */
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background-color: var(--btn-primary-bg) !important; /* keep black - no color change */
    border-color: var(--btn-primary-bg) !important; /* keep black border (no border change) */
    color: var(--btn-primary-text) !important; /* white stays */
    /* Much larger shadow and elevation */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important; /* elevate button */
}

/* Secondary Button - Light Gray */
.btn-secondary,
button.btn-secondary,
a.btn-secondary {
    background-color: var(--btn-secondary-bg) !important; /* light gray */
    color: var(--btn-secondary-text) !important; /* black text */
    border-color: var(--btn-secondary-border) !important; /* medium gray border */
}

.btn-secondary:hover,
button.btn-secondary:hover,
a.btn-secondary:hover {
    background-color: #d0d0d0 !important; /* slightly darker gray on hover */
    border-color: #b0b0b0 !important; /* darker border on hover */
    color: var(--btn-secondary-text) !important; /* black text stays */
    /* Add shadow and elevation (inherited from base .btn:hover) */
}

/* Tertiary Button - Outline style (transparent with black border) */
.btn-tertiary,
button.btn-tertiary,
a.btn-tertiary {
    background-color: transparent !important;
    color: #000000 !important; /* black text */
    border-color: #000000 !important; /* black border */
    border-width: 2px !important;
}

.btn-tertiary:hover,
button.btn-tertiary:hover,
a.btn-tertiary:hover {
    background-color: #f5f5f5 !important; /* light gray background on hover */
    border-color: #000000 !important; /* keep black border */
    color: #000000 !important; /* black text stays */
}

/* ============================================
   BUTTON SIZES
   ============================================ */

/* Small Button - Higher specificity to override button type classes */
.btn.btn-small,
.btn.btn-sm,
button.btn.btn-small,
button.btn.btn-sm,
a.btn.btn-small,
a.btn.btn-sm,
.btn-primary.btn-small,
.btn-primary.btn-sm,
button.btn-primary.btn-small,
button.btn-primary.btn-sm,
a.btn-primary.btn-small,
a.btn-primary.btn-sm,
.btn-secondary.btn-small,
.btn-secondary.btn-sm,
button.btn-secondary.btn-small,
button.btn-secondary.btn-sm,
a.btn-secondary.btn-small,
a.btn-secondary.btn-sm,
.btn-tertiary.btn-small,
.btn-tertiary.btn-sm,
button.btn-tertiary.btn-small,
button.btn-tertiary.btn-sm,
a.btn-tertiary.btn-small,
a.btn-tertiary.btn-sm {
    /* Make "small" visually unambiguous (size comes from shape, not typography) */
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 0.75rem !important; /* horizontal padding only; height controls vertical size */
    font-size: var(--text-sm) !important; /* Keep font size consistent */
    line-height: 1 !important;
    border-width: 2px !important; /* Standard border width */
    border-radius: 0.875rem !important;
}

/* Medium Button (Default) - Higher specificity to override button type classes */
/* Also apply to buttons without explicit size class (default = medium) */
.btn:not(.btn-small):not(.btn-sm):not(.btn-large):not(.btn-lg):not(.btn-medium):not(.btn-md),
button.btn:not(.btn-small):not(.btn-sm):not(.btn-large):not(.btn-lg):not(.btn-medium):not(.btn-md),
a.btn:not(.btn-small):not(.btn-sm):not(.btn-large):not(.btn-lg):not(.btn-medium):not(.btn-md),
.btn.btn-medium,
.btn.btn-md,
button.btn.btn-medium,
button.btn.btn-md,
a.btn.btn-medium,
a.btn.btn-md,
.btn-primary.btn-medium,
.btn-primary.btn-md,
button.btn-primary.btn-medium,
button.btn-primary.btn-md,
a.btn-primary.btn-medium,
a.btn-primary.btn-md,
.btn-primary:not(.btn-small):not(.btn-sm):not(.btn-large):not(.btn-lg):not(.btn-medium):not(.btn-md),
button.btn-primary:not(.btn-small):not(.btn-sm):not(.btn-large):not(.btn-lg):not(.btn-medium):not(.btn-md),
a.btn-primary:not(.btn-small):not(.btn-sm):not(.btn-large):not(.btn-lg):not(.btn-medium):not(.btn-md),
.btn-secondary.btn-medium,
.btn-secondary.btn-md,
button.btn-secondary.btn-medium,
button.btn-secondary.btn-md,
a.btn-secondary.btn-medium,
a.btn-secondary.btn-md,
.btn-secondary:not(.btn-small):not(.btn-sm):not(.btn-large):not(.btn-lg):not(.btn-medium):not(.btn-md),
button.btn-secondary:not(.btn-small):not(.btn-sm):not(.btn-large):not(.btn-lg):not(.btn-medium):not(.btn-md),
a.btn-secondary:not(.btn-small):not(.btn-sm):not(.btn-large):not(.btn-lg):not(.btn-medium):not(.btn-md),
.btn-tertiary.btn-medium,
.btn-tertiary.btn-md,
button.btn-tertiary.btn-medium,
button.btn-tertiary.btn-md,
a.btn-tertiary.btn-medium,
a.btn-tertiary.btn-md,
.btn-tertiary:not(.btn-small):not(.btn-sm):not(.btn-large):not(.btn-lg):not(.btn-medium):not(.btn-md),
button.btn-tertiary:not(.btn-small):not(.btn-sm):not(.btn-large):not(.btn-lg):not(.btn-medium):not(.btn-md),
a.btn-tertiary:not(.btn-small):not(.btn-sm):not(.btn-large):not(.btn-lg):not(.btn-medium):not(.btn-md) {
    /* Default size = medium */
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 1rem !important;
    font-size: var(--text-md) !important; /* Medium buttons: match menu size */
    line-height: 1 !important;
}

/* Large Button - Higher specificity to override button type classes */
.btn.btn-large,
.btn.btn-lg,
button.btn.btn-large,
button.btn.btn-lg,
a.btn.btn-large,
a.btn.btn-lg,
.btn-primary.btn-large,
.btn-primary.btn-lg,
button.btn-primary.btn-large,
button.btn-primary.btn-lg,
a.btn-primary.btn-large,
a.btn-primary.btn-lg,
.btn-secondary.btn-large,
.btn-secondary.btn-lg,
button.btn-secondary.btn-large,
button.btn-secondary.btn-lg,
a.btn-secondary.btn-large,
a.btn-secondary.btn-lg,
.btn-tertiary.btn-large,
.btn-tertiary.btn-lg,
button.btn-tertiary.btn-large,
button.btn-tertiary.btn-lg,
a.btn-tertiary.btn-large,
a.btn-tertiary.btn-lg {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 2rem !important;
    font-size: var(--text-md) !important; /* Large buttons: match menu size */
    line-height: 1 !important;
}

/* ============================================
   LEGACY BUTTON SUPPORT
   ============================================ */

/* Support for buttons without .btn class but with btn-* classes */
button.btn-primary:not(.btn),
a.btn-primary:not(.btn),
button.btn-secondary:not(.btn),
a.btn-secondary:not(.btn),
button.btn-tertiary:not(.btn),
a.btn-tertiary:not(.btn) {
    padding: 0.5rem 1rem !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-radius: 1rem !important;
    font-weight: var(--weight-medium) !important;
    transition: all var(--transition-base) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Exception: Buttons with bg-blue-600 should be monochrome black */
a[class*="bg-blue-600"],
button[class*="bg-blue-600"],
a.bg-blue-600,
button.bg-blue-600 {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Override text-white when combined with bg-blue-600 */
a[class*="bg-blue-600"].text-white,
button[class*="bg-blue-600"].text-white,
a.bg-blue-600.text-white,
button.bg-blue-600.text-white,
a[class*="bg-blue-600"][class*="text-white"],
button[class*="bg-blue-600"][class*="text-white"] {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Exception: Filter tabs and small rounded badges with bg-blue-600 + text-white should keep white text */
/* Target elements with bg-blue-600, text-white, and rounded (but not rounded-lg/xl/2xl) */
a.bg-blue-600.text-white.rounded:not(.rounded-lg):not(.rounded-xl):not(.rounded-2xl),
a[class*="bg-blue-600"][class*="text-white"].rounded:not(.rounded-lg):not(.rounded-xl):not(.rounded-2xl),
a[class*="bg-blue-600"].text-white.rounded:not(.rounded-lg):not(.rounded-xl):not(.rounded-2xl) {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* ============================================
   HEADER (Less Shadow, More Border)
   ============================================ */

/* Ensure secondary buttons in header/navigation have black text */
header .btn-standard-secondary,
[class*="header"] .btn-standard-secondary,
[class*="navigation"] .btn-standard-secondary,
nav .btn-standard-secondary {
    color: #000000 !important;
}

header .btn-standard-secondary:hover,
[class*="header"] .btn-standard-secondary:hover,
[class*="navigation"] .btn-standard-secondary:hover,
nav .btn-standard-secondary:hover {
    color: #000000 !important;
}

/* Request Access button - Primary Large styling */
/* Only apply to buttons in header/navigation, not plain text links */
header a[href*="request-access"]:not(.btn),
[class*="header"] a[href*="request-access"]:not(.btn),
[class*="navigation"] a[href*="request-access"]:not(.btn),
nav a[href*="request-access"]:not(.btn),
header a[data-cta="apply"]:not(.btn),
[class*="header"] a[data-cta="apply"]:not(.btn),
[class*="navigation"] a[data-cta="apply"]:not(.btn),
nav a[data-cta="apply"]:not(.btn),
/* Also apply to standalone request-access links that have button-like classes */
a[href*="request-access"]:not(.btn):not([class*="font-medium"]:not([class*="btn"])):not([class*="text-"]:not([class*="btn"])) {
    /* Primary button styling */
    background-color: transparent !important;
    background-image: none !important; /* Remove gradient */
    color: #374151 !important; /* text-gray-700 */
    border-color: #d1d5db !important; /* border-gray-300 */
    border-width: 2px !important; /* border-2 */
    border-style: solid !important;
    border-radius: 1rem !important; /* rounded-2xl */
    font-weight: var(--weight-medium) !important;
    /* Large size */
    padding: 0.75rem 1.5rem !important; /* px-6 py-3 - large size */
    font-size: var(--text-md) !important; /* Large button font size */
    min-height: 48px !important; /* Large button min-height */
    transition: all var(--transition-base) !important;
    transform: none !important;
    cursor: pointer;
}

header a[href*="request-access"]:not(.btn):hover,
[class*="header"] a[href*="request-access"]:not(.btn):hover,
[class*="navigation"] a[href*="request-access"]:not(.btn):hover,
nav a[href*="request-access"]:not(.btn):hover,
header a[data-cta="apply"]:not(.btn):hover,
[class*="header"] a[data-cta="apply"]:not(.btn):hover,
[class*="navigation"] a[data-cta="apply"]:not(.btn):hover,
nav a[data-cta="apply"]:not(.btn):hover,
/* Also apply hover to standalone request-access links that have button-like classes */
a[href*="request-access"]:not(.btn):not([class*="font-medium"]:not([class*="btn"])):not([class*="text-"]:not([class*="btn"])):hover {
    /* Primary button hover */
    background-color: #f9fafb !important; /* hover:bg-gray-50 */
    border-color: #9ca3af !important; /* hover:border-gray-400 */
    color: #374151 !important; /* text-gray-700 stays */
    background-image: none !important; /* Remove gradient */
    /* Much larger shadow and elevation */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important; /* elevate button */
}

header,
[class*="header"],
[class*="navigation"] {
    background-color: var(--bg-surface) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Make navigation bar larger */
header > div,
[class*="header"] > div,
[class*="navigation"] > div {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    min-height: 80px !important;
}

/* User dropdown menu - connect directly to avatar */
header .group > div[class*="absolute"],
[class*="header"] .group > div[class*="absolute"],
header div[class*="absolute"][class*="right-0"],
[class*="header"] div[class*="absolute"][class*="right-0"] {
    margin-top: 0 !important;
    top: 100% !important;
}

/* Navigation hover: large animated shadow, background stays white */
header:hover,
[class*="header"]:hover,
[class*="navigation"]:hover {
    background-color: #ffffff !important;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.25), 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Navigation container hover: animated large shadow with white background */
.nav-container-hover {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: box-shadow 1.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nav-container-hover:hover {
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.25), 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    background-color: #ffffff !important;
}

/* Calmer search field */
input[type="search"],
[class*="search"] input {
    background-color: var(--bg-surface-soft) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-sm) var(--space-md) !important;
    font-size: var(--text-sm) !important;
}

input[type="search"]:focus,
[class*="search"] input:focus {
    border-color: #000000 !important;
    box-shadow: none !important;
    outline: 2px solid #000000 !important;
    outline-offset: 2px !important;
}

/* ============================================
   FEED POST HEADER (People > Content)
   ============================================ */

/* Increase author identity weight */
[class*="feed"] [class*="author"],
[class*="post"] [class*="author"],
[class*="thread"] [class*="author"] {
    margin-bottom: var(--space-lg) !important;
}

/* Author name - bolder, larger */
[class*="author"] [class*="name"],
[class*="author"] strong,
[class*="author"] .font-semibold {
    font-weight: var(--weight-semibold) !important;
    color: var(--text-primary) !important;
    font-size: var(--text-md) !important;
}

/* Larger avatar */
[class*="author"] img[class*="avatar"],
[class*="author"] [class*="avatar"] {
    width: 56px !important;
    height: 56px !important;
    border: 2px solid var(--border-subtle) !important;
    border-radius: var(--radius-full) !important;
}

/* Clearer role/headline label */
[class*="author"] [class*="headline"],
[class*="author"] [class*="role"] {
    color: var(--text-secondary) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-regular) !important;
}

/* Reduce visual weight of reaction/action rows */
[class*="reaction"],
[class*="action"],
[class*="interaction"] {
    opacity: 0.6 !important;
}

[class*="reaction"] svg,
[class*="action"] svg {
    width: 18px !important;
    height: 18px !important;
}

[class*="reaction"]:hover,
[class*="action"]:hover {
    opacity: 1 !important;
}

/* ============================================
   EDITORIAL HIERARCHY (Whitespace > Color)
   ============================================ */

/* Increase vertical spacing between feed blocks */
[class*="feed"] > *,
[class*="feed"] [class*="card"],
[class*="post"] {
    margin-bottom: var(--space-2xl) !important;
    padding-bottom: var(--space-xl) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

[class*="feed"] > *:last-child,
[class*="feed"] [class*="card"]:last-child {
    border-bottom: none !important;
}

/* Use separators more than shadows */
[class*="section"] {
    border-top: 1px solid var(--border-subtle) !important;
    padding-top: var(--space-xl) !important;
    margin-top: var(--space-xl) !important;
}

/* ============================================
   FORMS (Refined Inputs)
   ============================================ */

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    padding: var(--space-sm) var(--space-md) !important;
    font-size: var(--text-sm) !important;
    transition: border-color var(--transition-base) !important;
    box-shadow: none !important; /* No shadow */
}

/* Form elements hover - no shadow */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover {
    box-shadow: none !important; /* No shadow on hover */
    transform: none !important; /* No transform */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: #000000 !important;
    box-shadow: none !important; /* No shadow on focus */
    outline: 2px solid #000000 !important; /* black focus outline */
    outline-offset: 2px !important;
    transform: none !important; /* No transform */
}

/* ============================================
   FOOTER (Refined)
   ============================================ */

footer {
    border-top: 1px solid var(--border-subtle) !important;
    background-color: var(--bg-surface-soft) !important;
    box-shadow: none !important;
}

/* ============================================
   TIMELINE (Key Visual Identity)
   ============================================ */

.timeline,
[class*="timeline"] {
    position: relative;
}

.timeline::before,
[class*="timeline"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--timeline-line);
}

.timeline-item,
[class*="timeline-item"] {
    position: relative;
    padding-left: var(--space-xl);
    margin-bottom: var(--space-lg);
}

.timeline-dot,
[class*="timeline-dot"] {
    position: absolute;
    left: -6px;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background-color: var(--timeline-dot);
    border: 2px solid var(--bg-surface);
}

.timeline-dot.active,
[class*="timeline-dot"].active {
    background-color: var(--timeline-dot-active);
}

.timeline-label,
[class*="timeline-label"] {
    font-size: var(--text-xs) !important;
    color: var(--timeline-label) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--weight-medium) !important;
}

.timeline-label.active,
[class*="timeline-label"].active {
    color: var(--timeline-label-active) !important;
}

/* ============================================
   PRESENCE & HUMAN SIGNALS (Subtle)
   ============================================ */

.presence-online,
[class*="presence"][class*="online"] {
    background-color: var(--presence-online) !important;
}

.presence-idle,
[class*="presence"][class*="idle"] {
    background-color: var(--presence-idle) !important;
}

.presence-offline,
[class*="presence"][class*="offline"] {
    background-color: var(--presence-offline) !important;
}

/* Presence indicator - tiny dot */
.presence-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-surface);
    display: inline-block;
}


/* ============================================
   MODALS (Shadow Only Here)
   ============================================ */

.modal,
[class*="modal"],
[role="dialog"] {
    background-color: var(--modal-bg) !important;
    border-radius: var(--modal-radius) !important;
    box-shadow: var(--modal-shadow) !important;
    border: none !important;
    padding: var(--space-xl) !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Spacing utilities */
.space-2xs { margin-bottom: var(--space-2xs); }
.space-xs { margin-bottom: var(--space-xs); }
.space-sm { margin-bottom: var(--space-sm); }
.space-md { margin-bottom: var(--space-md); }
.space-lg { margin-bottom: var(--space-lg); }
.space-xl { margin-bottom: var(--space-xl); }
.space-2xl { margin-bottom: var(--space-2xl); }
.space-3xl { margin-bottom: var(--space-3xl); }

/* Separator utility */
.separator {
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-xl) 0;
}

/* ============================================
   STANDARD BUTTON CLASSES (Mentor Theme Override)
   ============================================ */
/* 
 * Only overriding style specifics (colors, typography, hover effects)
 * Size, padding, width, and layout properties are inherited from main CSS
 */

/* Gradient animation keyframes - more visible */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Primary button - black with elegant hover */
/* More specific selector to override general button rules */
a.btn-standard,
button.btn-standard,
.btn-standard,
a[class*="btn-standard"]:not([class*="secondary"]),
button[class*="btn-standard"]:not([class*="secondary"]) {
    /* bg-gray-900 - black background with visible gradient */
    background-color: #000000 !important;
    background-image: linear-gradient(90deg, #000000 0%, #2a2a2a 25%, #1a1a1a 50%, #2a2a2a 75%, #000000 100%);
    background-size: 300% 100%;
    /* text-white - ensure white text */
    color: #ffffff !important;
    /* font-semibold - using mentor weight */
    font-weight: var(--weight-semibold) !important;
    /* font-size - same as navigation (--text-md = 18px) */
    font-size: var(--text-md) !important;
    /* rounded-2xl - using mentor radius */
    border-radius: var(--radius-md) !important;
    /* No border */
    border: none !important;
    /* Larger padding for bigger buttons */
    padding: 1rem 2.5rem !important; /* 16px 40px - larger than default */
    /* Elegant transition - smooth and refined */
    transition-property: background-position, color !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 300ms !important;
    /* Remove scale transform per mentor philosophy */
    transform: none !important;
    cursor: pointer;
}

a.btn-standard:hover,
button.btn-standard:hover,
.btn-standard:hover,
a[class*="btn-standard"]:not([class*="secondary"]):hover,
button[class*="btn-standard"]:not([class*="secondary"]):hover {
    /* Elegant hover - visible gradient animation */
    background-image: linear-gradient(90deg, #1a1a1a 0%, #3a3a3a 25%, #2a2a2a 50%, #3a3a3a 75%, #1a1a1a 100%);
    background-size: 300% 100%;
    background-position: 0% 50%;
    animation: gradient-shift 2s ease infinite !important;
    color: #ffffff !important;
    transform: none !important;
}

a.btn-standard:active,
button.btn-standard:active,
.btn-standard:active,
a[class*="btn-standard"]:not([class*="secondary"]):active,
button[class*="btn-standard"]:not([class*="secondary"]):active {
    /* Subtle active state - deeper black */
    background-color: #1a1a1a !important;
    background-image: linear-gradient(90deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    background-size: 200% 100%;
    color: #ffffff !important;
}

/* Secondary button - white with elegant hover */
/* More specific selector to override general button rules */
a.btn-standard-secondary,
button.btn-standard-secondary,
.btn-standard-secondary {
    /* Use secondary button styling */
    background-color: var(--btn-secondary-bg) !important; /* transparent */
    background-image: none !important; /* Remove gradient */
    color: var(--btn-secondary-text) !important; /* text-primary (black) */
    border-color: var(--btn-secondary-border) !important; /* border-strong */
    border-width: 2px !important; /* border-2 */
    border-style: solid !important;
    border-radius: 1rem !important; /* rounded-2xl */
    font-weight: var(--weight-medium) !important;
    font-size: var(--text-md) !important; /* Large button font size */
    /* Large button padding */
    padding: 0.75rem 1.5rem !important; /* px-6 py-3 - large size */
    min-height: 48px !important; /* Large button min-height */
    transition: all var(--transition-base) !important;
    transform: none !important;
    cursor: pointer;
}

/* Override: Request Access button with btn-standard-secondary should be primary large */
a.btn-standard-secondary[href*="request-access"],
a.btn-standard-secondary[data-cta="apply"],
button.btn-standard-secondary[data-cta="apply"] {
    /* Primary button styling */
    background-color: transparent !important;
    background-image: none !important;
    color: #374151 !important; /* text-gray-700 */
    border-color: #d1d5db !important; /* border-gray-300 */
}

a.btn-standard-secondary[href*="request-access"]:hover,
a.btn-standard-secondary[data-cta="apply"]:hover,
button.btn-standard-secondary[data-cta="apply"]:hover {
    /* Primary button hover */
    background-color: #f9fafb !important; /* hover:bg-gray-50 */
    border-color: #9ca3af !important; /* hover:border-gray-400 */
    color: #374151 !important;
}

a.btn-standard-secondary:hover,
button.btn-standard-secondary:hover,
.btn-standard-secondary:hover {
    /* Secondary button hover */
    background-color: var(--bg-surface-soft) !important; /* hover:bg-gray-50 */
    border-color: var(--border-strong) !important; /* hover:border-gray-400 */
    color: var(--btn-secondary-text) !important;
    background-image: none !important; /* Remove gradient */
    transform: none !important;
}

a.btn-standard-secondary:active,
button.btn-standard-secondary:active,
.btn-standard-secondary:active {
    /* Secondary button active state */
    background-color: var(--bg-surface-soft) !important;
    border-color: var(--border-strong) !important;
    color: var(--btn-secondary-text) !important;
    background-image: none !important; /* Remove gradient */
}

/* ============================================
   HERO SECTION TYPOGRAPHY
   ============================================ */

/* Ensure all hero typography is white */
.hero-bg,
[class*="hero"] {
    color: #ffffff !important;
}

.hero-bg h1,
.hero-bg h2,
.hero-bg h3,
.hero-bg h4,
.hero-bg h5,
.hero-bg h6,
[class*="hero"] h1,
[class*="hero"] h2,
[class*="hero"] h3,
[class*="hero"] h4,
[class*="hero"] h5,
[class*="hero"] h6 {
    color: #ffffff !important;
}

.hero-bg p,
.hero-bg span,
.hero-bg div,
[class*="hero"] p,
[class*="hero"] span,
[class*="hero"] div {
    color: #ffffff !important;
}

/* Override gray text classes in hero */
.hero-bg .text-gray-100,
.hero-bg .text-gray-200,
.hero-bg .text-gray-300,
.hero-bg .text-gray-400,
.hero-bg .text-gray-500,
.hero-bg .text-gray-600,
.hero-bg .text-gray-700,
.hero-bg .text-gray-800,
.hero-bg .text-gray-900,
[class*="hero"] .text-gray-100,
[class*="hero"] .text-gray-200,
[class*="hero"] .text-gray-300,
[class*="hero"] .text-gray-400,
[class*="hero"] .text-gray-500,
[class*="hero"] .text-gray-600,
[class*="hero"] .text-gray-700,
[class*="hero"] .text-gray-800,
[class*="hero"] .text-gray-900 {
    color: #ffffff !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    :root {
        --text-xl: 32px;
        --text-lg: 24px;
        --text-md: 16px;
        --space-2xl: 32px;
        --space-3xl: 48px;
    }
    
    [class*="feed"] > * {
        margin-bottom: var(--space-xl) !important;
    }
}

/* ============================================
   OVERRIDE TAILWIND SPECIFIC CLASSES
   ============================================ */

/* Remove Tailwind shadows */
.shadow-sm,
.shadow,
.shadow-md,
.shadow-lg,
.shadow-xl {
    box-shadow: var(--shadow-none) !important;
}

/* Override Tailwind colors with our tokens */
.bg-gray-50,
.bg-gray-100 {
    background-color: var(--bg-app) !important;
}

.bg-white {
    background-color: var(--bg-surface) !important;
}

.text-gray-600,
.text-gray-500 {
    color: var(--text-secondary) !important;
}

.text-gray-400,
.text-gray-300 {
    color: var(--text-tertiary) !important;
}

.border-gray-200,
.border-gray-300 {
    border-color: var(--border-subtle) !important;
}

.border-gray-400 {
    border-color: var(--border-strong) !important;
}

/* ============================================
   FEED ITEMS - Specific Styling
   ============================================ */

/* Feed items should have subtle initial shadow and proper hover effects */
.feed-item,
div.feed-item {
    /* Ensure initial shadow-sm is preserved */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; /* shadow-sm */
    /* Smooth transition for all properties */
    transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease-out !important;
    transform: translateY(0) !important;
}

/* Feed items hover state */
.feed-item:hover,
div.feed-item:hover {
    /* Large, dramatic shadow with multiple layers */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
                0 10px 30px rgba(0, 0, 0, 0.12),
                0 5px 15px rgba(0, 0, 0, 0.08) !important;
    /* Subtle lift effect */
    transform: translateY(-4px) !important;
    /* Slightly stronger border on hover */
    border-color: var(--border-strong) !important;
}

/* ============================================
   GLOBAL TILE HOVER EFFECT
   ============================================ */

/* Target all tile-like elements (cards, event cards, post cards, etc.) - excluding feed items */
[class*="border"][class*="rounded"]:not(input):not(textarea):not(select):not(.feed-item),
[class*="border"][class*="rounded-lg"]:not(input):not(textarea):not(select):not(.feed-item),
[class*="border"][class*="rounded-xl"]:not(input):not(textarea):not(select):not(.feed-item),
div[class*="border"][class*="rounded"]:not(button):not(a):not(input):not(textarea):not(select):not(.feed-item),
div[class*="border"][class*="rounded-lg"]:not(button):not(a):not(input):not(textarea):not(select):not(.feed-item),
div[class*="border"][class*="rounded-xl"]:not(button):not(a):not(input):not(textarea):not(select):not(.feed-item),
.border.border-gray-200:not(input):not(textarea):not(select):not(.feed-item),
.border.border-gray-300:not(input):not(textarea):not(select):not(.feed-item),
[class*="event"][class*="card"],
[class*="post"][class*="card"],
[class*="tile"] {
    /* Smooth transition for all properties */
    transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease-out !important;
    /* Initial state - no shadow */
    box-shadow: var(--shadow-none) !important;
    transform: translateY(0) !important;
}

/* Hover state - large animated shadow with subtle lift (excluding feed items) */
[class*="border"][class*="rounded"]:not(input):not(textarea):not(select):not(.feed-item):hover,
[class*="border"][class*="rounded-lg"]:not(input):not(textarea):not(select):not(.feed-item):hover,
[class*="border"][class*="rounded-xl"]:not(input):not(textarea):not(select):not(.feed-item):hover,
div[class*="border"][class*="rounded"]:not(button):not(a):not(input):not(textarea):not(select):not(.feed-item):hover,
div[class*="border"][class*="rounded-lg"]:not(button):not(a):not(input):not(textarea):not(select):not(.feed-item):hover,
div[class*="border"][class*="rounded-xl"]:not(button):not(a):not(input):not(textarea):not(select):not(.feed-item):hover,
.border.border-gray-200:not(input):not(textarea):not(select):not(.feed-item):hover,
.border.border-gray-300:not(input):not(textarea):not(select):not(.feed-item):hover,
[class*="event"][class*="card"]:hover,
[class*="post"][class*="card"]:hover,
[class*="tile"]:hover {
    /* Large, dramatic shadow with multiple layers */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
                0 10px 30px rgba(0, 0, 0, 0.12),
                0 5px 15px rgba(0, 0, 0, 0.08) !important;
    /* Subtle lift effect */
    transform: translateY(-4px) !important;
    /* Slightly stronger border on hover */
    border-color: var(--border-strong) !important;
}

/* Ensure event cards get the effect */
div[class*="border"][class*="rounded-lg"][class*="overflow-hidden"],
div[class*="border"][class*="rounded-lg"][class*="hover:shadow-md"] {
    transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease-out !important;
}

div[class*="border"][class*="rounded-lg"][class*="overflow-hidden"]:hover,
div[class*="border"][class*="rounded-lg"][class*="hover:shadow-md"]:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
                0 10px 30px rgba(0, 0, 0, 0.12),
                0 5px 15px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-4px) !important;
    border-color: var(--border-strong) !important;
}

/* ============================================
   UNIFIED CARD CLASS
   ============================================ */

/* Unified card class - matches reference: block border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer hover:border-gray-300 */
/* Override [class*="card"] rules with higher specificity */
.card,
div.card,
a.card {
    display: block !important; /* block */
    border-width: 1px !important; /* border */
    border-style: solid !important;
    border-color: #e5e7eb !important; /* border-gray-200 */
    border-radius: 0.5rem !important; /* rounded-lg (8px) */
    overflow: hidden !important; /* overflow-hidden */
    transition-property: all !important; /* transition-all */
    transition-duration: 300ms !important; /* duration-300 */
    transition-timing-function: ease !important;
    cursor: pointer !important; /* cursor-pointer */
    /* Override [class*="card"] background */
    background-color: #ffffff !important;
    /* Override [class*="card"] box-shadow */
    box-shadow: none !important; /* No shadow by default */
    /* No transform */
    transform: none !important;
}

/* Hover states - hover:shadow-lg hover:border-gray-300 */
/* Much larger shadow on hover (like the global tile hover effect) */
.card:hover,
div.card:hover,
a.card:hover {
    /* Much larger shadow - similar to global tile hover effect */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
                0 10px 30px rgba(0, 0, 0, 0.12),
                0 5px 15px rgba(0, 0, 0, 0.08) !important;
    border-color: #d1d5db !important; /* hover:border-gray-300 */
    /* Override [class*="card"]:hover background */
    background-color: #ffffff !important; /* Keep background white on hover */
    transform: translateY(-4px) !important; /* subtle lift */
}

/* ============================================
   FEEDBACK MODAL (Admin Feedback Dialog)
   ============================================ */

/* Floating feedback button */
#admin-feedback-button button {
    background-color: var(--accent-primary) !important; /* black */
    color: #ffffff !important; /* white text */
    border: none !important;
    border-radius: var(--radius-full) !important;
    box-shadow: var(--shadow-soft) !important;
    transition: background-color var(--transition-base), box-shadow var(--transition-base) !important;
    transform: none !important;
}

#admin-feedback-button button:hover {
    background-color: #1a1a1a !important; /* slightly lighter black */
    box-shadow: var(--shadow-modal) !important;
    transform: none !important;
    scale: none !important;
}

#admin-feedback-button button svg {
    color: #ffffff !important; /* white icon */
    fill: none !important;
    stroke: currentColor !important;
}

/* Modal overlay */
#feedback-modal {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Modal content container */
#feedback-modal > div {
    background-color: var(--modal-bg) !important;
    border-radius: var(--modal-radius) !important;
    box-shadow: var(--modal-shadow) !important;
    border: none !important;
}

/* Modal header */
#feedback-modal h2 {
    font-size: var(--text-lg) !important;
    font-weight: var(--weight-semibold) !important;
    color: var(--text-primary) !important;
}

/* Close icon (cross) - just an icon, not a button */
#feedback-modal svg[onclick*="closeFeedbackModal"] {
    color: var(--text-tertiary) !important;
    cursor: pointer !important;
    transition: color var(--transition-base) !important;
    width: 24px !important;
    height: 24px !important;
}

#feedback-modal svg[onclick*="closeFeedbackModal"]:hover {
    color: var(--text-secondary) !important;
}

/* Form inputs */
#feedback-modal input[type="text"],
#feedback-modal textarea {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    padding: var(--space-sm) var(--space-md) !important;
    font-size: var(--text-sm) !important;
}

#feedback-modal input[type="text"]:focus,
#feedback-modal textarea:focus {
    border-color: #000000 !important;
    box-shadow: none !important;
    outline: 2px solid #000000 !important; /* black focus outline */
    outline-offset: 2px !important;
}

#feedback-modal input[readonly] {
    background-color: var(--bg-surface-soft) !important;
    color: var(--text-secondary) !important;
}

/* Labels */
#feedback-modal label {
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-medium) !important;
    color: var(--text-primary) !important;
}

/* Submit button (bg-blue-600) - monochrome black */
#feedback-modal button[type="submit"],
#feedback-modal button.bg-blue-600 {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-medium) !important;
    transition: background-color var(--transition-base), border-color var(--transition-base) !important;
}

#feedback-modal button[type="submit"]:hover,
#feedback-modal button.bg-blue-600:hover {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Cancel button */
#feedback-modal button[type="button"][onclick*="closeFeedbackModal"] {
    background-color: var(--bg-surface-soft) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-medium) !important;
    transition: background-color var(--transition-base), border-color var(--transition-base) !important;
}

#feedback-modal button[type="button"][onclick*="closeFeedbackModal"]:hover {
    background-color: var(--bg-app) !important;
    border-color: var(--border-strong) !important;
}

/* Message notifications */
#feedback-modal #feedback-message {
    border-radius: var(--radius-md) !important;
    padding: var(--space-md) !important;
    font-size: var(--text-sm) !important;
}

#feedback-modal #feedback-message.bg-green-100 {
    background-color: var(--status-success) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

#feedback-modal #feedback-message.bg-red-100 {
    background-color: var(--status-warning) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   QUILL EDITOR OVERRIDES
   ============================================ */

/* Remove outline from Quill toolbar */
.ql-toolbar,
.ql-toolbar.ql-snow {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Quill picker elements - ensure proper sizing */
.ql-toolbar .ql-picker {
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    width: auto !important;
    height: 24px !important;
    min-height: 24px !important;
}

.ql-toolbar .ql-picker-label {
    display: inline-block !important;
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 8px !important;
    cursor: pointer !important;
}

.ql-toolbar .ql-picker-options {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1000 !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.25rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    padding: 4px 0 !important;
    min-width: 120px !important;
}

.ql-toolbar .ql-picker.ql-expanded .ql-picker-options {
    display: block !important;
}

.ql-toolbar .ql-picker-options .ql-picker-item {
    display: block !important;
    padding: 4px 12px !important;
    cursor: pointer !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.ql-toolbar .ql-picker-options .ql-picker-item:hover {
    background-color: #f3f4f6 !important;
}

/* Exclude Quill editor toolbar buttons from button system styles */
.ql-toolbar button,
.ql-toolbar .ql-button,
.ql-toolbar button.ql-active,
.ql-toolbar .ql-picker-options button {
    padding: 0.25rem 0.5rem !important;
    border-width: 0 !important;
    border-style: none !important;
    border-radius: 0.25rem !important;
    background-color: transparent !important;
    color: inherit !important;
    font-weight: normal !important;
    box-shadow: none !important;
    transform: none !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    outline: none !important;
}

.ql-toolbar button:hover,
.ql-toolbar .ql-button:hover {
    background-color: #f3f4f6 !important;
    border-width: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Ensure Quill toolbar icons maintain their size */
.ql-toolbar .ql-stroke,
.ql-toolbar .ql-fill,
.ql-toolbar svg {
    width: 18px !important;
    height: 18px !important;
}


/* Quill content typography: restore heading hierarchy inside the editor.
   Our global typography sets h1/h2/h3/... with !important (design system) which flattens Quill header formats. */
.ql-editor h1 {
    font-size: 2rem !important;
    line-height: 1.25 !important;
    font-weight: var(--weight-semibold, 600) !important;
    color: var(--text-primary, #111827) !important;
    margin: 0.75rem 0 0.5rem !important;
}
.ql-editor h2 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
    font-weight: var(--weight-semibold, 600) !important;
    color: var(--text-primary, #111827) !important;
    margin: 0.75rem 0 0.5rem !important;
}
.ql-editor h3 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: var(--weight-medium, 500) !important;
    color: var(--text-primary, #111827) !important;
    margin: 0.75rem 0 0.5rem !important;
}
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
    font-size: 1.125rem !important;
    line-height: 1.35 !important;
    font-weight: var(--weight-medium, 500) !important;
    color: var(--text-primary, #111827) !important;
    margin: 0.75rem 0 0.5rem !important;
}
.ql-editor blockquote {
    border-left: 4px solid var(--border-strong, #d1d5db) !important;
    padding-left: 1rem !important;
    margin: 1rem 0 !important;
    color: var(--text-secondary, #374151) !important;
}

/* Quill content typography: make lists match paragraph sizing (our global CSS sizes <p> but not <li>) */
.ql-editor li,
.ql-editor ol,
.ql-editor ul {
    font-size: var(--text-md) !important;
    line-height: var(--lh-relaxed) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   EVENT CARD IMAGE FIX
   ============================================ */

/* Ensure aspect ratio containers work correctly */
div[class*="aspect-"] {
    position: relative !important;
    display: block !important;
}

/* Ensure images inside aspect ratio containers fill properly */
div[class*="aspect-"] > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}