/* ==========================================================================
   1. GLOBAL BRAND VARIABLES & COLOR PALETTE
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Raleway:wght@700;800;900&display=swap');

:root {
  /* Brand Core Palette */
  --color-brand-primary: #185363;
  /* Deep Teal */
  --color-brand-secondary: #567570;
  /* Muted Slate */
  --color-brand-accent: #C95E3D;
  /* Rust / Orange-Red */
  --color-brand-accent-hover: #B24F31;
  /* Darker Rust */
  --color-brand-text-dark: #185363;
  /* Dark contrast text */

  /* Neutral Backgrounds & Borders */
  --bg-main: #FFFFFE;
  /* Pure White */
  --bg-surface-light: #BDCACC;
  /* Light Cool Grey */
  --border-muted: #BDCACC;
  /* Light Cool Grey Border */
  --border-muted-subtle: rgba(189, 202, 204, 0.3);

  /* Transparent Overlays & Glows */
  --bg-overlay-dark: rgba(24, 83, 99, 0.65);
  --bg-drawer-dark: rgba(86, 117, 112, 0.95);
  --glow-primary: rgba(24, 83, 99, 0.15);
  --glow-accent: rgba(201, 94, 61, 0.3);

  /* Typography System */
  --font-heading: 'Raleway', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}

/* ==========================================================================
   2. TYPOGRAPHY & BASE STYLES
   ========================================================================== */
::selection {
  background-color: var(--color-brand-accent);
  color: var(--bg-main);
}

body {
  background-color: var(--bg-main);
  color: var(--color-brand-text-dark);
  font-family: var(--font-body);
  font-weight: 400;
}

html[dir="rtl"] {
  direction: rtl;
  text-align: right;
  font-family: 'Tajawal', 'Cairo', var(--font-body);
}

/* Brand Guideline: Headings are ALL CAPS & Bold */
h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-brand-primary);
}

/* Typography & Utility Classes */
.text-brand-primary {
  color: var(--color-brand-primary);
}

.text-brand-secondary {
  color: var(--color-brand-secondary);
}

.text-gold-accent {
  color: var(--color-brand-accent);
}

.bg-gold-accent {
  background-color: var(--color-brand-accent);
}

.border-gold-accent {
  border-color: var(--color-brand-accent);
}

.text-gold-light {
  color: var(--color-brand-secondary);
}

.text-main-white {
  color: var(--bg-main);
}

.text-slate-subtle {
  color: var(--color-brand-secondary);
}

/* Category Filter Buttons */
.filter-btn {
  background-color: transparent;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.filter-btn:hover {
  background-color: var(--color-brand-accent) !important;
  color: #ffffff !important;
  border-color: var(--color-brand-accent) !important;
}

.filter-btn:focus-visible {
  outline: 2px solid var(--color-brand-accent);
  outline-offset: 2px;
}

.filter-btn.active,
.filter-btn.filter-btn-active {
  background-color: var(--color-brand-accent) !important;
  color: #ffffff !important;
  border-color: var(--color-brand-accent) !important;
  font-weight: 600 !important;
}

/* Headline Gradient */
.text-gold-gradient {
  background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary), var(--color-brand-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   3. CONTAINERS, PANELS & OVERLAYS
   ========================================================================== */
.hero-overlay {
  background-color: var(--bg-overlay-dark);
}

.section-light-bg {
  background-color: rgba(189, 202, 204, 0.2);
}

.glass-panel {
  background: var(--bg-main);
  border: 1px solid var(--border-muted);
  box-shadow: 0 4px 20px var(--glow-primary);
  margin-left: auto;
  margin-right: auto;
}

.glass-panel-transparent {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border-muted-subtle);
  backdrop-filter: blur(12px);
}

.glass-card {
  background: var(--bg-surface-light);
  border: 1px solid var(--border-muted);
  transition: all 0.3s ease;
  text-align: center;
}

.glass-card:hover {
  border-color: var(--color-brand-accent);
}

/* ==========================================================================
   4. NAVIGATION & DRAWERS
   ========================================================================== */
.nav-link {
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-brand-accent);
  border-bottom: 2px solid var(--color-brand-accent);
}

/* Mobile Navigation */
.mobile-menu-drawer {
  background-color: var(--bg-drawer-dark);
}

.mobile-nav-link {
  color: var(--bg-main);
  font-family: var(--font-heading);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: color 0.2s ease;
}

.mobile-nav-link:hover {
  color: var(--color-brand-accent);
}

.mobile-nav-link.active {
  color: var(--color-brand-accent);
}

/* ==========================================================================
   5. BUTTONS, INPUTS & BADGES
   ========================================================================== */
.btn-accent {
  background: var(--color-brand-primary);
  color: var(--bg-main);
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.75rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px var(--glow-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-accent:hover {
  background: var(--color-brand-secondary);
  color: var(--bg-main);
  box-shadow: 0 6px 20px rgba(24, 83, 99, 0.3);
  transform: translateY(-2px);
}

.btn-outline {
  border: 2px solid var(--color-brand-primary);
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.75rem;
  border-radius: 4px;
  background: var(--bg-main);
  transition: all 0.3s ease;
}

.btn-outline:hover {
  border-color: var(--color-brand-accent);
  color: var(--bg-main);
  background: var(--color-brand-accent);
}

.btn-orange-accent {
  background: var(--color-brand-accent);
  color: var(--bg-main);
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.75rem 1.75rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn-orange-accent:hover {
  background: var(--color-brand-accent-hover);
}

/* Badges */
.badge-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--color-brand-accent);
  background: rgba(201, 94, 61, 0.1);
  color: var(--color-brand-accent);
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--color-brand-accent);
}

/* Form Inputs */
.form-input {
  width: 100%;
  padding: 1rem 1.25rem;
  background-color: rgba(189, 202, 204, 0.2);
  border: 1px solid var(--border-muted);
  border-radius: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-brand-primary);
  transition: all 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  background-color: var(--bg-main);
}

/* Custom Cursors & Separators */
.custom-cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: var(--color-brand-accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
}

.custom-cursor-follower {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1px solid var(--glow-accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
}

.separator-gold {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-brand-accent), transparent);
}

/* ==========================================================================
   Footer & Legal Pages (Append-Only Section)
   ========================================================================== */
/* ==========================================================================
   Footer & Legal Pages
   ========================================================================== */

/* Let Tailwind handle footer sizing/padding cleanly */
.brand-footer {
  background-color: var(--color-brand-primary);
  color: rgba(255, 255, 255, 0.8);
  width: 100%;
}

.brand-footer a {
  transition: color 0.2s ease;
}

.brand-footer a:hover {
  color: #FFFFFF;
}

/* Specific styling for Legal & FAQ Content Pages */
.legal-page-container {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.legal-card {
  background: #FFFFFF;
  padding: 40px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  color: #2B363B;
}

.legal-card h1 {
  font-size: 2rem;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.legal-card .subtitle {
  font-size: 1.1rem;
  color: var(--color-brand-secondary, #E05A2B);
  margin-bottom: 30px;
  font-weight: 600;
}

.legal-card h2 {
  margin: 25px 0 10px 0;
  font-size: 1.25rem;
  border-bottom: 2px solid #F4F6F7;
  padding-bottom: 8px;
}

.legal-card p,
.legal-card ul {
  margin-bottom: 15px;
  line-height: 1.6;
}

.legal-card ul {
  padding-left: 20px;
}

/* FAQ Accordion Section */
.faq-item {
  border-bottom: 1px solid #DDE3E6;
  padding: 20px 0;
}

.faq-question {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.faq-answer {
  line-height: 1.6;
}

/* Responsive Footer Layout */
@media (max-width: 900px) {
  .brand-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .brand-footer-grid {
    grid-template-columns: 1fr;
  }

  .brand-footer-bottom {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}

/* Remove max-width cap so all sections and headers stretch edge-to-edge */
.max-w-7xl {
  max-width: 100% !important;
  padding-left: 3rem !important;
  /* 48px padding from left screen edge */
  padding-right: 3rem !important;
  /* 48px padding from right screen edge */
}

@media (max-width: 768px) {
  .max-w-7xl {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}