/*
Theme Name:  Shatat Music
Theme URI:   https://shatat-music.org
Author:      Shatat Music Wien
Author URI:  https://shatat-music.org
Description: Custom theme for Shatat Music (شتات) — Palestinian & Arabic folk music ensemble based in Vienna, Austria. Supports WPML (DE/EN/AR + RTL), WooCommerce, The Events Calendar, Borlabs Cookie, and Yoast SEO.
Version:     1.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.1
License:     Proprietary
License URI: https://shatat-music.org
Text Domain: shatat
Domain Path: /languages
Tags:        music, arabic, rtl, multilingual, woocommerce, events
*/

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   All colours, spacing and typography defined as CSS custom
   properties so every template and component inherits them.
═══════════════════════════════════════════════════════════════ */
:root {
  /* Palette */
  --c-sapphire:       #16243e;
  --c-sapphire-mid:   #1f3060;
  --c-sapphire-light: #274080;
  --c-gold:           #c4923a;
  --c-gold-bright:    #dba84e;
  --c-gold-pale:      #f0d898;
  --c-parchment:      #faf6ed;
  --c-parchment-warm: #f2ead6;
  --c-parchment-dark: #e4d8b8;
  --c-ink:            #1c1810;
  --c-ink-soft:       #3a3020;
  --c-ink-muted:      #7a6e54;
  --c-ink-faint:      #b0a48a;
  --c-border:         rgba(196, 146, 58, 0.2);
  --c-rust:           #c45c2a;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-arabic:  'Noto Naskh Arabic', 'Traditional Arabic', serif;
  --font-ui:      'Raleway', system-ui, sans-serif;

  /* Layout */
  --max-width:    1180px;
  --nav-height:   72px;
  --section-pad:  7rem;

  /* Motion */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --duration:     0.28s;
}

/* ── RTL overrides when WPML sets lang="ar" ── */
[lang="ar"] {
  --font-ui: 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  direction: rtl;
}

/* ═══════════════════════════════════════════════════════════════
   BASE RESET
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-ui);
  font-weight: 300;
  background: var(--c-parchment);
  color: var(--c-ink-soft);
  line-height: 1.7;
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

button, input, select, textarea {
  font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY SCALE
═══════════════════════════════════════════════════════════════ */
.t-eyebrow {
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-gold);
  display: block;
  margin-bottom: 1rem;
}

.t-display {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--c-sapphire);
}

.t-display em {
  font-style: italic;
  color: var(--c-gold);
}

.t-display--light { color: var(--c-parchment); }

.t-arabic {
  font-family: var(--font-arabic);
  direction: rtl;
}

.t-body {
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-ink-muted);
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT UTILITIES
═══════════════════════════════════════════════════════════════ */
.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 2.5rem;
}

.section-pad {
  padding-block: var(--section-pad);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 13px 30px;
  border: none;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
  line-height: 1;
}

.btn--gold {
  background: var(--c-gold);
  color: #fff;
}
.btn--gold:hover {
  background: var(--c-gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(196, 146, 58, 0.3);
}

.btn--ghost-dark {
  background: transparent;
  color: var(--c-parchment);
  border: 1px solid rgba(250, 246, 237, 0.3);
}
.btn--ghost-dark:hover {
  border-color: var(--c-gold);
  color: var(--c-gold-pale);
}

.btn--ghost-light {
  background: transparent;
  color: var(--c-sapphire);
  border: 1px solid var(--c-border);
}
.btn--ghost-light:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
}

.btn--rust {
  background: var(--c-rust);
  color: #fff;
}
.btn--rust:hover { background: #d96830; }

/* ═══════════════════════════════════════════════════════════════
   ORNAMENTAL DIVIDER
═══════════════════════════════════════════════════════════════ */
.ornament-rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block: 1.5rem;
}
.ornament-rule::before,
.ornament-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.3;
}

/* ═══════════════════════════════════════════════════════════════
   INSTRUMENT TAG
═══════════════════════════════════════════════════════════════ */
.instrument-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold);
  border: 1px solid var(--c-border);
  padding: 5px 14px;
  font-weight: 500;
  background: rgba(196, 146, 58, 0.04);
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY
═══════════════════════════════════════════════════════════════ */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   SKIP LINK
═══════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--c-gold);
  color: var(--c-sapphire);
  padding: 8px 16px;
  font-weight: 600;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .grid-2  { grid-template-columns: 1fr; gap: 3rem; }
  .grid-4  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --nav-height:  60px;
    --section-pad: 4.5rem;
  }
  .container      { padding-inline: 1.25rem; }
  .grid-3         { grid-template-columns: 1fr; }
  .grid-4         { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .grid-4         { grid-template-columns: 1fr; }
}