/* =========================================================
   YAHASRA THEME OVERRIDES — Light Heritage Theme
   Version: 8.0

   Applies design tokens to existing Tailwind-styled pages
   without modifying individual templates.
   ========================================================= */

/* === GLOBAL TYPOGRAPHY === */
body {
  font-family: var(--y-font-body);
  color: var(--y-ink-secondary);
  background: var(--y-white);
}

h1, h2, h3, h4, h5, h6,
.text-3xl, .text-2xl, .text-xl {
  font-family: var(--y-font-display);
  color: var(--y-ink);
}

/* === BACKGROUND OVERRIDES === */
.bg-gray-50 {
  background-color: var(--y-cream) !important;
}

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

/* === CARD STYLING === */
.bg-white.rounded-lg,
.bg-white.rounded-xl,
.bg-white.rounded-2xl {
  border: 1px solid var(--y-border);
  transition: all var(--y-transition-normal);
}

.bg-white.rounded-lg:hover,
.bg-white.rounded-xl:hover,
.bg-white.rounded-2xl:hover {
  border-color: var(--y-border-hover);
}

/* === RED TO GOLD PRIMARY COLOR === */
/* Header backgrounds: red gradient → gold gradient */
[style*="linear-gradient(135deg, #C1272D"],
[style*="linear-gradient(135deg,#C1272D"] {
  background: linear-gradient(135deg, var(--y-gold) 0%, var(--y-gold-rich) 100%) !important;
}

/* Red text to gold */
.text-red-700,
.text-red-800 {
  color: var(--y-gold) !important;
}

.text-red-600 {
  color: var(--y-gold-accent) !important;
}

/* Red borders to gold */
.border-red-700,
.border-red-800 {
  border-color: var(--y-gold) !important;
}

.border-2.border-red-700 {
  border-color: var(--y-border-hover) !important;
  border-width: 1px !important;
}

/* Focus rings */
.focus\:ring-red-500:focus,
.focus\:border-red-500:focus {
  --tw-ring-color: rgba(154, 115, 72, 0.3) !important;
  border-color: var(--y-gold) !important;
}

/* === BUTTON OVERRIDES === */
/* Red buttons → gold buttons */
.bg-red-700,
.bg-red-800,
[style*="background: linear-gradient(135deg, #C1272D"] {
  background: var(--y-gold) !important;
}

.bg-red-700:hover,
.bg-red-800:hover {
  background: var(--y-gold-rich) !important;
}

/* Hover states */
.hover\:bg-red-50:hover {
  background: var(--y-gold-bg) !important;
}

.hover\:border-red-300:hover {
  border-color: var(--y-gold) !important;
}

.hover\:text-red-700:hover,
.hover\:text-red-800:hover {
  color: var(--y-gold) !important;
}

/* === INPUT STYLING === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  font-family: var(--y-font-body);
  border-color: var(--y-border-hover) !important;
  border-width: 1px !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--y-gold) !important;
  box-shadow: 0 0 0 3px rgba(154, 115, 72, 0.15) !important;
  outline: none !important;
}

/* === TABLE STYLING === */
table {
  background: var(--y-white);
}

th {
  background: var(--y-cream) !important;
  font-family: var(--y-font-body);
  font-weight: 600;
  color: var(--y-ink);
}

tr:hover td {
  background: var(--y-cream);
}

/* === LINK STYLING === */
a {
  transition: color var(--y-transition-fast);
}

a:hover {
  color: var(--y-gold);
}

/* === SECONDARY ACCENT (EMERALD) === */
/* For community names, categories, labels */
.text-green-600,
.text-green-700,
.text-emerald-600,
.text-emerald-700 {
  color: var(--y-emerald) !important;
}

.bg-green-50,
.bg-emerald-50 {
  background: var(--y-emerald-bg) !important;
}

/* === SEARCH RESULTS SPECIFIC === */
/* Result cards */
.search-result-card,
[class*="result-"] {
  background: var(--y-white);
  border: 1px solid var(--y-border);
  border-radius: var(--y-radius-md);
  transition: all var(--y-transition-normal);
}

.search-result-card:hover,
[class*="result-"]:hover {
  background: var(--y-cream);
  border-color: var(--y-border-hover);
  box-shadow: var(--y-shadow-md);
}

/* Name in results → gold */
.result-name,
.burial-name,
[class*="result"] .font-bold,
[class*="result"] .font-semibold {
  color: var(--y-gold);
  font-family: var(--y-font-display);
}

/* Community in results → emerald */
.result-community,
.burial-community,
[class*="result"] .text-gray-500,
[class*="result"] .text-gray-600 {
  color: var(--y-emerald);
}

/* === STAT CARDS === */
.stat-card,
[class*="stat-"] {
  background: var(--y-white);
  border: 1px solid var(--y-border);
}

.stat-number,
[class*="stat-"] .text-2xl,
[class*="stat-"] .text-3xl {
  color: var(--y-gold);
  font-family: var(--y-font-display);
}

/* === SIDEBAR OVERRIDE (if not hidden) === */
.sidebar {
  background: var(--y-white);
  border-color: var(--y-border);
}

.menu-item:hover {
  background: var(--y-cream);
}

.menu-item.active {
  background: var(--y-gold-bg) !important;
  color: var(--y-gold) !important;
}

.menu-item.active i {
  color: var(--y-gold) !important;
}

/* === AMBER/GOLD TONES === */
.text-amber-300,
.text-amber-400,
.text-amber-500 {
  color: var(--y-gold-light) !important;
}

.bg-amber-50,
.bg-yellow-50 {
  background: var(--y-gold-bg) !important;
}

/* === MAP TILES === */
/* Suggestion: Use CartoDB Voyager for light theme */
/* This would need JS change: L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png') */

/* === ICONS === */
.fa-search,
.fa-scroll,
.fa-star-of-david,
.fa-fire,
.fa-archive,
.fa-chart-line,
.fa-plus-circle {
  color: var(--y-gold-accent);
}

.fa-map-marked-alt,
.fa-dna,
.fa-users,
.fa-microscope,
.fa-globe {
  color: var(--y-emerald);
}

/* === MOBILE MENU === */
.simple-mobile-header {
  background: linear-gradient(135deg, var(--y-gold) 0%, var(--y-gold-rich) 100%) !important;
  border-bottom-color: var(--y-gold-rich) !important;
}

.simple-mobile-btn a {
  border-color: var(--y-gold) !important;
}

.simple-mobile-btn a:hover,
.simple-mobile-btn a:active {
  background: var(--y-gold) !important;
}

.simple-mobile-icon {
  color: var(--y-gold) !important;
}

/* === QUICK ACTION BUTTONS === */
.inline-flex.items-center.gap-1\.5.px-3.py-1\.5 {
  border-color: var(--y-border) !important;
}

.inline-flex.items-center.gap-1\.5.px-3.py-1\.5:hover {
  background: var(--y-gold-bg) !important;
  border-color: var(--y-gold) !important;
  color: var(--y-gold) !important;
}

/* === FOOTER OVERRIDE (base.html footer) === */
footer.border-t.bg-gray-50 {
  background: var(--y-cream) !important;
  border-top-color: var(--y-border) !important;
}

/* Add zellige border to footer */
footer.border-t.bg-gray-50::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--y-zellige);
  margin-bottom: 0;
}

/* === RTL ADJUSTMENTS === */
[dir="rtl"] .simple-mobile-header {
  direction: rtl;
}

/* === PRINT STYLES === */
@media print {
  body {
    background: white !important;
    color: black !important;
  }

  .y-nav,
  .sidebar,
  .simple-mobile-menu {
    display: none !important;
  }
}