/* Freedom Alliance Website Theme
   Consolidated CSS Variables for consistent styling across all templates
   =====================================================================

   Usage: Include this file in templates with:
   <link rel="stylesheet" href="/static/css/theme.css">

   Then use CSS variables like: background-color: var(--bg-card-primary);
*/

/* === FONT DECLARATIONS === */
/* Tomorrow font is loaded via Google Fonts in base.html */
/* All legacy FS Sinclair and Steelworks references have been replaced with Tomorrow */

:root {
  /* === BRAND COLORS === */
  --brand-primary: #FCAE06;        /* FA Primary Gold */
  --brand-navy: #00264A;           /* FA Navy */
  --brand-gold-dark: #C29014;      /* FA Gold Dark */
  --brand-gray-light: #BDC2CB;     /* FA Gray Light */
  --brand-gray-medium: #C5C9D0;    /* FA Gray Medium */

  /* === PAGE BACKGROUNDS === */
  --bg-body: #111111;              /* Main page background */
  --bg-card-primary: #555555;      /* Main cards/containers */
  --bg-card-secondary: #333333;    /* Darker cards */
  --bg-card-tertiary: #111111;     /* Medium cards */
  --bg-button: #777777;            /* Buttons/interactive elements */

  /* === TEXT COLORS === */
  --text-primary: #FFFFFF;         /* Main text */
  --text-secondary: #BDC2CB;       /* Secondary text */
  --text-muted: #C5C9D0;          /* Muted text */
  --text-accent: #FCAE06;         /* Accent text (gold) */
  --text-navy: #00264A;           /* Navy text */

  /* === BUTTON COLORS === */
  /* QUICK COLOR REFERENCE - Change these hex codes to adjust button colors site-wide */
  --btn-primary-bg: #FCAE06;      /* Primary buttons background (FA Gold) */
  --btn-primary-hover: #C29014;   /* Primary button background when hovered (Darker Gold) */
  --btn-primary-text: #00264A;    /* Primary button text color (FA Navy) */

  --btn-secondary-bg: #00264A;    /* Secondary buttons background (FA Navy) */
  --btn-secondary-hover: #666666; /* Secondary button background when hovered (Gray) */
  --btn-secondary-text: #FFFFFF;  /* Secondary button text color (White) */

  --btn-neutral-bg: #666666;      /* Back/navigation buttons background (Gray) */
  --btn-neutral-hover: #777777;   /* Neutral button background when hovered (Lighter Gray) */

  /* === BORDERS === */
  --border-primary: #FCAE06;      /* Accent borders */
  --border-secondary: #666666;    /* Regular borders */
  --border-muted: #777777;        /* Light borders */

  /* === METRIC/DATA COLORS === */
  --metric-blue: #4FC3F7;
  --metric-green: #81C784;
  --metric-gold: #FCAE06;
  --metric-purple: #BA68C8;
  --metric-coral: #FF8A65;

  /* === NEWSLETTER SPECIFIC === */
  --newsletter-heading: #B794F6;  /* Discord-style headings */
  --newsletter-link: #7289DA;     /* Discord-style links */
  --newsletter-divider: #4A5568;  /* HR elements */

  /* === TYPOGRAPHY === */
  /* FONT FAMILIES - Tomorrow font loaded via Google Fonts in base.html */
  --font-primary: 'Tomorrow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* Body text, buttons, forms */
  --font-title: 'Tomorrow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;    /* All headings (h1-h6) */
  --font-display: 'Tomorrow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* Special display titles (use .title-display class) */

  /* FONT WEIGHT REFERENCE for Tomorrow:
     100 = Thin
     200 = ExtraLight
     300 = Light
     400 = Regular
     500 = Medium
     600 = SemiBold
     700 = Bold
     800 = ExtraBold
     900 = Black
     (All weights available, italic versions too)
  */
}

/* === GLOBAL STYLES === */
body {
    background-color: var(--bg-body) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-primary) !important;
}

/* === FONT ALIGNMENT FIXES === */
/* ============================================================================
   BUTTON STYLING - This controls ALL buttons on the website
   ============================================================================

   TO CHANGE BUTTON FONTS:
   - font-family: Change var(--font-primary) to var(--font-title) or var(--font-display)
   - font-weight: Add this line with values 300/400/500/700 for Light/Regular/Medium/Bold
   - font-style: Add 'italic' to make buttons use italic fonts

   EXAMPLES:
   font-weight: 300;              // Makes all buttons use Tomorrow Light
   font-weight: 500;              // Makes all buttons use Tomorrow Medium
   font-weight: 700;              // Makes all buttons use Tomorrow Bold
   font-style: italic;            // Makes all buttons use italic versions
   font-family: var(--font-display); // Makes all buttons use display font

   Colors are controlled by --btn-primary-bg, --btn-secondary-bg etc in CSS variables above
*/
button, .btn, input[type="button"], input[type="submit"], a.bg-fa-primary, a.bg-fa-navy {
    font-family: var(--font-primary) !important;  /* ← CHANGE THIS to var(--font-title) or var(--font-display) */
    font-weight: 700 !important;                  /* ← CHANGE THIS: 100-900 (see weight reference above) */
    /* font-style: italic !important; */          /* ← UNCOMMENT THIS for italic buttons */

    /* Technical stuff - don't change unless alignment looks wrong */
    padding-top: calc(0.5rem + 1px);
    padding-bottom: calc(0.5rem - 1px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ============================================================================
   FORM INPUT STYLING - This controls text inputs, dropdowns, textareas
   ============================================================================

   TO CHANGE FORM FONTS: Same rules as buttons above
   - font-family: var(--font-primary), var(--font-title), or var(--font-display)
   - font-weight: 100-900 (see weight reference at top)
   - font-style: italic (uncomment to use)
*/
input[type="text"], input[type="email"], input[type="password"], textarea, select {
    font-family: var(--font-primary) !important;  /* ← CHANGE THIS for different input fonts */
    font-weight: 400 !important;                  /* ← CHANGE THIS: 100-900 (see weight reference above) */
    /* font-style: italic !important; */          /* ← UNCOMMENT THIS for italic form inputs */

    /* Technical alignment stuff */
    padding-top: calc(0.5rem + 1px);
    padding-bottom: calc(0.5rem - 1px);
}

/* Fix table cell alignment */
td, th {
    font-family: var(--font-primary);
    vertical-align: middle;
}

/* Fix inline elements that might appear shifted */
span, a, strong, em {
    /* Subtle baseline adjustment */
    position: relative;
    top: 0.5px;
}

/* === TYPOGRAPHY SYSTEM === */
/* ============================================================================
   HEADING STYLES (h1, h2, h3, h4, h5, h6) - Page titles and section headers
   ============================================================================

   TO CHANGE HEADING FONTS:
   - All headings use var(--font-title) by default (defined at top of file)
   - Individual heading weights can be changed below
   - Add .title-display class to any heading for display styling

   EXAMPLES:
   h1 { font-weight: 300; }  // Makes all h1s use Tomorrow Light
   h2 { font-weight: 600; }  // Makes all h2s use Tomorrow SemiBold
   h3 { font-style: italic; } // Makes all h3s use italic
*/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title) !important;  /* Uses --font-title variable from top of file */
    font-weight: 500 !important;                /* Default: Tomorrow Medium for all headings */
}

/* Special display font for dramatic titles */
.title-display {
    font-family: var(--font-display) !important;  /* Uses display font variable */
}

/* ============================================================================
   INDIVIDUAL HEADING WEIGHTS - Customize each heading level
   ============================================================================
   CHANGE THESE to adjust specific heading types:
*/
h1 { font-weight: 700 !important; }  /* ← Main page titles: Tomorrow Bold */
h2 { font-weight: 600 !important; }  /* ← Section headers: Tomorrow SemiBold */
h3 { font-weight: 500 !important; }  /* ← Sub-sections: Tomorrow Medium */
/* h4, h5, h6 use the default weight: 500 (Medium) */

/* ============================================================================
   UTILITY CLASSES - Add these classes to any element to change its font weight
   ============================================================================
   Usage: <span class="font-bold">This text will be bold</span>
*/
.font-light { font-weight: 300 !important; }    /* Tomorrow Light */
.font-regular { font-weight: 400 !important; }  /* Tomorrow Regular */
.font-medium { font-weight: 500 !important; }   /* Tomorrow Medium */
.font-bold { font-weight: 700 !important; }     /* Tomorrow Bold */


/* === UTILITY CLASSES === */
/* ============================================================================
   QUICK REFERENCE - Most Common Customizations You'll Want
   ============================================================================

   🎯 TO CHANGE BUTTON FONTS TO BOLD:
   Find line ~218: font-weight: 400; → Change to: font-weight: 700;

   🎯 TO CHANGE ALL HEADINGS TO LIGHT:
   Find lines ~291-293: Change all font-weight values to 300

   🎯 TO USE DIFFERENT FONT FOR MAIN TITLES:
   Find line ~70: --font-title: → Change the font-family value

   🎯 TO CHANGE BUTTON COLORS:
   Find lines ~149-158: Change the hex color codes

   🎯 TO USE DIFFERENT FONTS ON SPECIFIC ELEMENTS:
   Add these classes to HTML: .font-light .font-regular .font-medium .font-bold
*/

/* Brand Colors */
.bg-fa-primary { background-color: var(--brand-primary) !important; }
.bg-fa-navy { background-color: var(--brand-navy) !important; }
.bg-fa-gold-dark { background-color: var(--brand-gold-dark) !important; }
.text-fa-primary { color: var(--brand-primary) !important; }
.text-fa-navy { color: var(--brand-navy) !important; }
.text-fa-gold-dark { color: var(--brand-gold-dark) !important; }
.text-fa-gray-light { color: var(--brand-gray-light) !important; }
.text-fa-gray-medium { color: var(--brand-gray-medium) !important; }
.border-fa-primary { border-color: var(--brand-primary) !important; }
.border-fa-navy { border-color: var(--brand-navy) !important; }

/* Hover States */
.hover\:bg-fa-primary:hover { background-color: var(--brand-primary) !important; }
.hover\:bg-fa-navy:hover { background-color: var(--brand-navy) !important; }
.hover\:bg-fa-gold-dark:hover { background-color: var(--brand-gold-dark) !important; }

/* Override Tailwind grays with our design system */
.bg-gray-800 { background-color: var(--bg-card-primary) !important; }
.bg-gray-900 { background-color: var(--bg-card-secondary) !important; }
.bg-gray-700 { background-color: var(--bg-card-tertiary) !important; }
.bg-gray-600 { background-color: var(--bg-button) !important; }
.border-gray-700 { border-color: var(--border-secondary) !important; }
.border-gray-600 { border-color: var(--border-muted) !important; }
.text-gray-400 { color: var(--text-secondary) !important; }
.text-gray-500 { color: var(--text-muted) !important; }
.text-gray-300 { color: var(--text-muted) !important; }

/* Metric color assignments */
.metric-1 { color: var(--metric-blue) !important; }
.metric-2 { color: var(--metric-green) !important; }
.metric-3 { color: var(--metric-gold) !important; }
.metric-4 { color: var(--metric-purple) !important; }
.metric-5 { color: var(--metric-coral) !important; }

/* Newsletter-specific styles */
.newsletter-content {
    font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.6;
}

.newsletter-content h1,
.newsletter-content h2,
.newsletter-content h3 {
    color: var(--newsletter-heading);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.newsletter-content strong {
    color: var(--text-accent);
}

.newsletter-content a {
    color: var(--newsletter-link);
    text-decoration: underline;
}

.newsletter-content hr {
    border-color: var(--newsletter-divider);
    margin: 2rem 0;
}

.newsletter-content ul {
    list-style-type: disc;
    margin-left: 2rem;
}

/* Global Page Background System */
.page-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url('/static/main-header2-scaled.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    transform: scale(1.1); /* Start slightly zoomed */
    transition: transform 2s ease-out;
    will-change: transform;
    z-index: -2;
}

.page-background.loaded {
    transform: scale(1); /* Zoom out on load */
}

.page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(252, 174, 6, 0.1) 25%,
        rgba(0, 38, 74, 0.1) 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
    backdrop-filter: blur(1px);
    z-index: -1;
}

/* Title fade-in hero animation for dashboard */
.page-title {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 0.5s forwards;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   CENTRALIZED GLASS CONTAINER SYSTEM
   ============================================================================
   Apply these classes to main containers instead of individual styling
*/

/* Standard Glass Container - Used for most sections */
.glass-container {
    background: rgba(17, 17, 17, 0.50) !important;
    backdrop-filter: blur(2px);
}

/* News Glass Container - Purple-hued variant for newsletters/news */
.glass-container-news {
    background: rgba(17, 17, 17, 0.50) !important;
    backdrop-filter: blur(2px);
    border: 1px solid rgba(183, 148, 246, 0.3) !important; /* Purple tint */
    box-shadow: 0 0 20px rgba(183, 148, 246, 0.1);
}

/* Recent News Container - Purple semi-transparent for clan Recent News sections */
.recent-news-container {
    background: rgba(100, 35, 147, 0.40) !important; /* Darker purple semi-transparent */
    backdrop-filter: blur(2px);
    border: 1px solid rgba(120, 59, 180, 0.3) !important; /* Darker purple border */
    transition: border-color 0.3s ease;
}

.recent-news-container:hover {
    border: 1px solid rgba(168, 85, 247, 0.5) !important; /* Brighter purple on hover */
}

/* ============================================================================
   CENTRALIZED CARD SYSTEM - All cards use #111111 background
   ============================================================================
   This ensures all card variations use consistent dark backgrounds
*/

/* Override all gray card variations to use #111111 */
.bg-gray-800, .bg-gray-700, .bg-gray-900, .bg-gray-750 {
    background-color: #111111 !important;
}

/* Ensure hover states also use consistent colors */
.hover\:bg-gray-600:hover, .hover\:bg-gray-700:hover, .hover\:bg-gray-800:hover {
    background-color: #222222 !important;
}

/* ============================================================================
   CLAN LINKED INDICATOR - Golden outline for clans linked to Discord guilds
   ============================================================================
   Tyler's decision: All clans viewable, but linked clans get golden outline
   to indicate they're connected to a Discord server running Melchior
*/

/* Apply to clan cards in directory when is_linked is True */
.clan-linked {
    border: 2px solid var(--brand-primary) !important;  /* FA Gold border */
    box-shadow: 0 0 10px rgba(252, 174, 6, 0.3);  /* Subtle gold glow */
}

/* Apply to clan profile header container when is_linked is True */
.clan-profile-linked {
    border: 2px solid var(--brand-primary) !important;
    box-shadow: 0 0 15px rgba(252, 174, 6, 0.2);
}