/* qasida-site/styles.css — Refined Design with UI/UX Pro Max Principles */
/* Fonts: KFGQPC (Arabic), Inter (Sans-serif for all other text) */

/* Arabic Font - KFGQPC (Preserved as requested) */
@font-face {
  font-family: "KFGQPC";
  src: url("/assets/fonts/UthmanTN1.woff2") format("woff2"),
       url("/assets/fonts/UthmanTN1.otf") format("opentype");
  font-display: swap;
}

/* Sans-serif Font - Inter for all non-Arabic text */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Design Tokens - Warm, spiritual color palette */
:root {
  /* Primary - Deep forest green (spiritual, trustworthy) */
  --green-900: #1a2e1a;
  --green-800: #2d4a2d;
  --green-700: #3d5a3d;
  --green-600: #4a6b4a;
  --green-100: #e8f0e8;
  
  /* Accent - Warm tan/gold (earthly, warm) */
  --tan-900: #8b7355;
  --tan-700: #b8a080;
  --tan-500: #d9c9a8;
  --tan-300: #e8dcc8;
  --tan-100: #f5ecd9;
  --tan-50: #faf7f0;
  
  /* Neutral - Warm grays */
  --gray-900: #1a1a1a;
  --gray-700: #4a4a4a;
  --gray-600: #6b6b6b;
  --gray-400: #a0a0a0;
  --gray-200: #e5e5e5;
  --gray-100: #f5f5f5;
  --white: #ffffff;
  
  /* Semantic assignments */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-muted: var(--gray-600);
  --text-on-dark: var(--white);
  
  --bg-primary: var(--white);
  --bg-secondary: var(--tan-50);
  --bg-accent: var(--tan-100);
  --bg-chorus: var(--tan-100);
  
  --border-light: var(--tan-300);
  --border-medium: var(--tan-500);
  --border-focus: var(--green-700);
  
  --accent-primary: var(--green-700);
  --accent-primary-hover: var(--green-800);
  --accent-secondary: var(--tan-700);
  
  /* Typography Scale */
  --root-fs: 16px;
  --arabic-fs: 22px;
  --translit-fs: 14px;
  --english-fs: 15px;
  
  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  
  font-size: var(--root-fs);
}

/* Reset & Base */
* { 
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { 
    transition-duration: 0ms !important; 
    animation-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* Selection styling */
::selection {
  background: var(--green-100);
  color: var(--green-900);
}

/* Site Header - Floating, elevated */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-4) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.site-title { 
  font-size: 1.25rem; 
  font-weight: 700;
  display: flex; 
  gap: var(--space-3); 
  align-items: center;
  letter-spacing: -0.01em;
}

.site-title .arabic { 
  font-family: "KFGQPC", serif; 
  color: var(--accent-primary); 
  direction: rtl; 
  font-size: 1.75rem;
  font-weight: 400;
}

.site-title .en { 
  color: var(--text-primary); 
  font-weight: 700;
}

/* Controls Toggle Button */
#controls-toggle {
  background: var(--accent-primary);
  color: var(--text-on-dark);
  border: none;
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  gap: var(--space-2);
  touch-action: manipulation;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

#controls-toggle:hover {
  background: var(--accent-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

#controls-toggle:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Table of Contents - Quick Navigation */
.toc-nav {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-3) var(--space-5);
  z-index: 95;
}

.toc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toc-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#toc-toggle {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

#toc-toggle:hover {
  background: var(--bg-accent);
  color: var(--accent-primary);
}

#toc-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

#toc-toggle svg {
  transition: transform var(--transition-base);
}

.toc-list {
  display: none;
  padding-top: var(--space-4);
}

.toc-list.open {
  display: block;
}

.toc-list ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toc-list li {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.toc-list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  flex: 1;
  width: 100%;
}

.toc-list a:hover {
  background: var(--bg-accent);
  color: var(--accent-primary);
}

.toc-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toc-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toc-arabic {
  font-family: "KFGQPC", serif;
  font-size: 0.95rem;
  direction: rtl;
}

.toc-english {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Controls Panel - Card style, sticky */
#controls {
  position: sticky;
  top: 73px; /* Header height + spacing */
  background: var(--bg-secondary);
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 99;
  box-shadow: var(--shadow-md);
}

#controls[hidden] { 
  display: none; 
}

.control-section {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-light);
}

.control-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.control-section:first-child {
  padding-top: 0;
}

.control-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-3);
}

.control-row { 
  display: flex; 
  gap: var(--space-3); 
  align-items: center; 
  flex-wrap: wrap; 
}

.control-row > label { 
  font-weight: 600; 
  font-size: 0.875rem; 
  min-width: 72px; 
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.control-column { 
  flex-direction: column; 
  align-items: flex-start; 
}

#song-filters { 
  display: flex; 
  flex-direction: column; 
  gap: var(--space-2); 
  width: 100%; 
}

#song-filters label { 
  font-weight: 400; 
  color: var(--text-secondary); 
  min-width: 0; 
  cursor: pointer;
  font-size: 0.9rem;
  padding: var(--space-2) 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: color var(--transition-fast);
}

#song-filters label:hover {
  color: var(--accent-primary);
}

#song-filters input { 
  width: 18px;
  height: 18px;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

/* Font Sliders */
.font-sliders {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.slider-row label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-muted);
  min-width: 100px;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

.slider-row input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 6px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-medium);
  border-radius: 3px;
  outline: none;
}

.slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--accent-primary);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.slider-row input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-md);
}

.slider-row input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--accent-primary);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.slider-row input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-md);
}

.slider-row span {
  min-width: 44px;
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Chip buttons (visibility toggles) */
.chip {
  background: var(--bg-primary);
  border: 1.5px solid var(--border-medium);
  border-radius: 999px;
  padding: var(--space-3) var(--space-5);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: all var(--transition-fast);
  letter-spacing: 0.01em;
}

.chip[aria-pressed="true"] {
  background: var(--accent-primary);
  color: var(--text-on-dark);
  border-color: var(--accent-primary);
}

.chip:hover {
  border-color: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.chip[aria-pressed="true"]:hover {
  background: var(--accent-primary-hover);
}

.chip:active {
  transform: translateY(0);
}

/* Reset button */
.reset-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border-medium);
  border-radius: 8px;
  padding: var(--space-3) var(--space-5);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 40px;
  touch-action: manipulation;
  transition: all var(--transition-fast);
  letter-spacing: 0.01em;
}

.reset-btn:hover {
  background: var(--bg-accent);
  color: var(--text-primary);
  border-color: var(--accent-primary);
}

.reset-btn:active {
  transform: scale(0.98);
}

/* Main Content */
#content { 
  padding: var(--space-8) var(--space-5) var(--space-12); 
  max-width: 720px; 
  margin: 0 auto; 
}

/* Song Section */
.song {
  margin-bottom: var(--space-12);
  scroll-margin-top: 160px;
}

/* Sticky Song Header - Elevated card style with alternating colors */
.song-header {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 2px solid var(--border-medium);
  margin-bottom: var(--space-6);
  position: sticky;
  top: 73px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 90;
  border-radius: 12px 12px 0 0;
  box-shadow: var(--shadow-sm);
}

/* Complementary background colors for song headers */
#song-1 .song-header { background: linear-gradient(135deg, rgba(232, 240, 232, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%); }
#song-2 .song-header { background: linear-gradient(135deg, rgba(245, 236, 217, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%); }
#song-3 .song-header { background: linear-gradient(135deg, rgba(232, 220, 200, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%); }
#song-4 .song-header { background: linear-gradient(135deg, rgba(240, 245, 240, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%); }
#song-5 .song-header { background: linear-gradient(135deg, rgba(250, 247, 240, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%); }

.song-badge {
  width: 40px; 
  height: 40px; 
  border-radius: 50%;
  background: var(--accent-primary); 
  color: var(--text-on-dark);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex; 
  align-items: center; 
  justify-content: center;
  flex: 0 0 40px;
  box-shadow: var(--shadow-sm);
  margin-left: var(--space-4);
}

.song-titles {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.song-title-arabic {
  font-family: "KFGQPC", serif;
  direction: rtl;
  font-size: calc(var(--arabic-fs) + 0.4rem);
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.song-title-english {
  color: var(--accent-primary);
  font-weight: 600;
  font-size: calc(var(--english-fs) + 0.15rem);
  text-align: center;
  letter-spacing: -0.01em;
}

/* Chorus - Card with hover effect */
.chorus {
  background: var(--bg-chorus);
  border-radius: 12px;
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.chorus:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.chorus:active {
  transform: translateY(0);
  box-shadow: var(--shadow-md);
}

.chorus-badge {
  display: inline-block;
  font-size: 0.7rem; 
  text-transform: uppercase; 
  letter-spacing: 0.1em;
  color: var(--accent-primary);
  font-weight: 700;
  background: rgba(61, 90, 61, 0.1);
  padding: var(--space-1) var(--space-3);
  border-radius: 4px;
  margin-bottom: var(--space-3);
}

/* Text content within chorus */
.chorus .arabic,
.verse .arabic { 
  font-family: "KFGQPC", serif; 
  direction: rtl; 
  text-align: center; 
  font-size: var(--arabic-fs); 
  line-height: 1.8; 
  color: var(--text-primary);
}

.chorus .translit,
.verse .translit { 
  font-style: italic; 
  color: var(--text-muted); 
  text-align: center; 
  font-size: var(--translit-fs);
  margin-top: var(--space-3);
  line-height: 1.6;
}

.chorus .english,
.verse .english { 
  text-align: center; 
  font-size: var(--english-fs);
  color: var(--text-secondary);
  margin-top: var(--space-3);
  line-height: 1.6;
}

/* Verse with jump button */
.verse {
  padding: var(--space-5) 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.verse-num {
  color: var(--border-medium); 
  font-weight: 700;
  font-size: 1.1rem;
  min-width: 32px;
  text-align: left;
  flex-shrink: 0;
  padding-top: var(--space-1);
  font-variant-numeric: tabular-nums;
}

.verse-content {
  flex: 1;
}

.verse .arabic {
  margin-bottom: var(--space-2);
}

/* Chorus break separator */
.chorus-break {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 10%;
}

.chorus-break::before,
.chorus-break::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-medium), transparent);
}

.chorus-break-btn {
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-light);
  color: var(--accent-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-style: italic;
  padding: var(--space-2) var(--space-5);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.chorus-break-btn:hover {
  background: var(--bg-chorus);
  border-color: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.chorus-break-btn:active {
  transform: translateY(0);
}

/* Footer */
footer {
  border-top: 1px solid var(--border-light);
  padding: var(--space-8) var(--space-5) var(--space-10);
  color: var(--text-muted);
  font-size: 0.875rem;
  text-align: center;
  background: var(--bg-secondary);
}

footer a { 
  color: var(--accent-primary); 
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
  border-bottom: 1px solid transparent;
}

footer a:hover { 
  color: var(--green-800); 
  border-bottom-color: var(--green-800);
}

/* Hide controls utilities */
html.hide-arabic .arabic { display: none; }
html.hide-translit .translit { display: none; }
html.hide-english .english { display: none; }
html.song-1-hidden #song-1,
html.song-2-hidden #song-2,
html.song-3-hidden #song-3,
html.song-4-hidden #song-4,
html.song-5-hidden #song-5 { display: none; }

/* Flash animations for jump feedback */
.chorus.flash,
.verse.flash { 
  animation: chorus-flash 1s ease-out; 
}

@keyframes chorus-flash {
  0% { 
    background: rgba(61, 90, 61, 0.15); 
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(61, 90, 61, 0.1);
  }
  100% { 
    background: var(--bg-chorus); 
    border-color: transparent;
    box-shadow: var(--shadow-sm);
  }
}

.verse.flash {
  animation: verse-flash 1s ease-out;
}

@keyframes verse-flash {
  0% { 
    background: rgba(217, 201, 168, 0.5);
    border-radius: 8px;
  }
  100% { 
    background: transparent; 
  }
}

/* Deep-link flash */
.song.flash { 
  animation: tan-flash 1.4s ease-out; 
}

@keyframes tan-flash {
  0% { background: var(--bg-chorus); }
  100% { background: transparent; }
}

/* Focus visibility - accessibility */
:focus-visible { 
  outline: 2px solid var(--border-focus); 
  outline-offset: 2px; 
}

button:focus-visible,
.chip:focus-visible,
.chorus:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Larger breakpoints */
@media (min-width: 768px) {
  #content { 
    padding: var(--space-10) var(--space-8) var(--space-12); 
  }
  
  .font-sliders {
    gap: var(--space-5);
  }
  
  .slider-row label {
    min-width: 120px;
    font-size: 0.9rem;
  }
  
  .slider-row span {
    min-width: 50px;
    font-size: 0.9rem;
  }
  
  .song-header {
    padding: var(--space-5) 0;
  }
  
  .song-badge {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }
  
  .song-title-arabic {
    font-size: calc(var(--arabic-fs) + 0.6rem);
  }
  
  .song-title-english {
    font-size: calc(var(--english-fs) + 0.25rem);
  }
  
  .chorus {
    padding: var(--space-8);
  }
  
  .verse {
    padding: var(--space-6) 0;
  }
}

@media (min-width: 1024px) {
  #content {
    max-width: 800px;
  }
}