/* Metropolis shared styles. Loaded by every page after the Cairo font link.
   Brand utilities (colours, bg-pattern-*, shadow-glow) come from /common/tailwind.config.js.
   Only rules that are truly page-specific remain in each page's own <style>. */

:root {
  --accent: #BFA15F;                 /* programme pages may override (e.g. CPP blue, UNTR blue) */
  --accent-dark: #a38948;
  --accent-glow: rgba(191, 161, 95, 0.1);
}

/* ---------- Base ---------- */
html, body { scroll-behavior: smooth; }

/* Phone numbers and other Latin fragments inside Arabic text (32 uses; the class was never defined) */
.dir-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- Sticky header ----------
   header.js keeps #main-header (top bar + main menu + secondary bar) fixed at the top and publishes its
   height as --header-h. Anchor targets and in-page sticky elements use it so nothing hides under the header. */
html { scroll-padding-top: calc(var(--header-h, 7rem) + 1rem); }
.sticky-under-header { position: sticky; top: calc(var(--header-h, 7rem) + 1.5rem); }
.sticky-bar-under-header { position: sticky; top: var(--header-h, 7rem); }

/* Justify Arabic body text; explicitly aligned paragraphs keep their alignment. */
.prose p,
.prose li,
p.leading-relaxed:not(.text-center):not(.text-right):not(.text-left) {
  text-align: justify;
  text-justify: inter-word;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dark); }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- Animations ---------- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.fade-in, .tab-content { animation: fadeIn 0.5s ease-in-out; }

/* ---------- Arabic headings ----------
   Cairo has tall ascenders and deep descenders; Tailwind's leading-tight (1.25) makes stacked
   Arabic hero lines touch. Open the two tightest utilities a little on Arabic pages. */
html[lang="ar"] .leading-tight { line-height: 1.4; }
html[lang="ar"] .leading-none { line-height: 1.25; }
html[lang="ar"] .leading-snug { line-height: 1.5; }
.hover-pause:hover .animate-scroll { animation-play-state: paused; }

/* ---------- Cards ---------- */
.card-hover { transition: all 0.3s ease; }
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: var(--accent);
}

/* ---------- Hero / section backgrounds ---------- */
.hero-pattern { background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23BFA15F' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero-gradient { background: linear-gradient(90deg, #1a202c 0%, rgba(26, 32, 44, 0.95) 70%, rgba(26, 32, 44, 0.6) 100%); }
.pattern-dots { background-image: radial-gradient(#BFA15F 1px, transparent 1px); background-size: 20px 20px; }
.premium-gradient, .ai-gradient { background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); position: relative; overflow: hidden; }
.premium-glow::before, .ai-glow::before {
  content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  animation: rotate 10s linear infinite;
}
.corporate-badge { background: linear-gradient(135deg, #BFA15F 0%, #a2884f 100%); color: #1a202c; }

/* ---------- Timeline ---------- */
.timeline-item::before {
  content: ''; position: absolute; right: -9px; top: 24px; width: 18px; height: 18px; border-radius: 50%;
  background-color: var(--accent); border: 3px solid white; z-index: 10;
}
.timeline-item:last-child { border-left: none; }

/* ---------- Prose (policies, articles) ---------- */
.prose h2 { color: #1a202c; font-weight: 700; margin-top: 2em; margin-bottom: 1em; font-size: 1.5rem; border-right: 4px solid #BFA15F; padding-right: 1rem; }
.prose h3 { color: #2d3748; font-weight: 600; margin-top: 1.5em; margin-bottom: 0.75em; font-size: 1.25rem; }
.prose p { color: #4a5568; line-height: 1.8; margin-bottom: 1em; }
.prose ul { list-style-type: disc; padding-right: 1.5em; margin-bottom: 1em; color: #4a5568; }
.prose ol { list-style-type: decimal; padding-right: 1.5em; margin-bottom: 1em; color: #4a5568; }
.prose li { margin-bottom: 0.5em; }

/* ---------- Forms ---------- */
.form-input:focus, .custom-select:focus { border-color: #BFA15F; outline: none; box-shadow: 0 0 0 3px rgba(191, 161, 95, 0.2); }
.custom-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: left 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-left: 2.5rem;
}
.loader { border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top: 3px solid white; width: 20px; height: 20px; animation: spin 1s linear infinite; }

/* ---------- LTR counterparts (English mirror under /en/, html[dir=ltr]) ---------- */
[dir="ltr"] .hero-gradient { background: linear-gradient(270deg, #1a202c 0%, rgba(26, 32, 44, 0.95) 70%, rgba(26, 32, 44, 0.6) 100%); }
[dir="ltr"] .premium-glow::before, [dir="ltr"] .ai-glow::before { right: auto; left: -50%; }
[dir="ltr"] .timeline-item::before { right: auto; left: -9px; }
[dir="ltr"] .prose h2 { border-right: none; padding-right: 0; border-left: 4px solid #BFA15F; padding-left: 1rem; }
[dir="ltr"] .prose ul, [dir="ltr"] .prose ol { padding-right: 0; padding-left: 1.5em; }
[dir="ltr"] .custom-select { background-position: right 0.5rem center; padding-left: 0.75rem; padding-right: 2.5rem; }
[dir="ltr"] .skip-link { right: auto; left: 1rem; }
[dir="ltr"] p.leading-relaxed:not(.text-center):not(.text-right):not(.text-left) { text-align: left; }

/* Horizontal scrolling for wide tables (schedule, programme sessions) */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
.table-responsive::-webkit-scrollbar-track { background: #f1f1f1; }

/* ---- Accessibility (Phase 5) ---- */
/* Skip link: visible only when focused */
.skip-link { position: absolute; top: -100px; right: 1rem; z-index: 1000; background: var(--accent-dark); color: #fff; padding: .6rem 1rem; border-radius: 0 0 .5rem .5rem; font-weight: 700; transition: top .15s; }
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; }
/* Visible keyboard focus everywhere (many elements use focus:outline-none for mouse users) */
:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; border-radius: 2px; }
.focus\:outline-none:focus-visible { outline: 3px solid var(--accent-dark) !important; outline-offset: 2px; }
/* Readable gold on light backgrounds: --brand-gold-text for body text, --brand-gold-deep for large headings */
:root { --brand-gold-text: #8A6F2E; --brand-gold-deep: #A6873B; }
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}