/* ============================================================
   FMM Theme System — v4.0
   familymediamanager.co.uk
   6 themes: light · dark · sunset-coral-gold · sunset-coral-navy · ocean-blue · forest-green
   All themes exposed as CSS custom properties on :root / [data-theme]
   ============================================================ */

/* ── Google Fonts ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Playfair+Display:wght@700&display=swap');

/* ============================================================
   THEME DEFINITIONS
   ============================================================ */

/* ── Default (fallback = Sunset Gold) ────────────────────── */
:root {
  --fmm-bg:              #FFF8F0;
  --fmm-bg-alt:          #FFF3E6;
  --fmm-surface:         #FFFFFF;
  --fmm-surface-alt:     #FFE8D0;
  --fmm-border:          #FFD4A8;
  --fmm-text:            #3D1F0A;
  --fmm-text-muted:      #8B5E3C;
  --fmm-primary:         #FF6B6B;
  --fmm-primary-dark:    #E85555;
  --fmm-accent:          #FFD93D;
  --fmm-accent-dark:     #F5A800;
  --fmm-gradient:        linear-gradient(135deg, #FF6B6B 0%, #FF8E53 50%, #FFD93D 100%);
  --fmm-hero-overlay:    rgba(255, 107, 107, 0.50);
  --fmm-header-bg:       transparent;
  --fmm-header-text:     #FFFFFF;
  --fmm-header-gradient: linear-gradient(90deg, #FF6B6B 0%, #FF8E53 50%, #FFD93D 100%);
  --fmm-nav-hover:       #FFD93D;
  --fmm-btn-bg:          #FF6B6B;
  --fmm-btn-text:        #FFFFFF;
  --fmm-shadow:          0 4px 20px rgba(255,107,107,0.25);
  --fmm-shadow-deep:     0 8px 40px rgba(255,107,107,0.40);
  --fmm-logo-filter:     drop-shadow(0 2px 8px rgba(255,107,107,0.4));

  /* Admin override — if set, this beats the theme value */
  --fmm-hero-overlay-custom: var(--fmm-hero-overlay);
}

/* ── 1. Light ────────────────────────────────────────────── */
[data-theme="light"],
body.theme-light {
  --fmm-bg:              #F9F7F4;
  --fmm-bg-alt:          #FFFFFF;
  --fmm-surface:         #FFFFFF;
  --fmm-surface-alt:     #F0EDE8;
  --fmm-border:          #DDD8D0;
  --fmm-text:            #2D2420;
  --fmm-text-muted:      #7A7068;
  --fmm-primary:         #FF6B6B;
  --fmm-primary-dark:    #E85555;
  --fmm-accent:          #FFD93D;
  --fmm-accent-dark:     #F5C800;
  --fmm-gradient:        linear-gradient(135deg, #FF6B6B 0%, #FFD93D 100%);
  --fmm-hero-overlay:    rgba(255, 107, 107, 0.55);
  --fmm-header-bg:       #FFFFFF;
  --fmm-header-text:     #2D2420;
  --fmm-header-gradient: linear-gradient(90deg, #FF6B6B 0%, #FFD93D 100%);
  --fmm-nav-hover:       #FF6B6B;
  --fmm-btn-bg:          #FF6B6B;
  --fmm-btn-text:        #FFFFFF;
  --fmm-shadow:          0 4px 20px rgba(255,107,107,0.15);
  --fmm-shadow-deep:     0 8px 40px rgba(255,107,107,0.25);
  --fmm-logo-filter:     none;
}

/* ── 2. Dark ─────────────────────────────────────────────── */
[data-theme="dark"],
body.theme-dark {
  --fmm-bg:              #1A1210;
  --fmm-bg-alt:          #221816;
  --fmm-surface:         #2D201E;
  --fmm-surface-alt:     #3A2A28;
  --fmm-border:          #4A3530;
  --fmm-text:            #F5EDE8;
  --fmm-text-muted:      #A89088;
  --fmm-primary:         #FF6B6B;
  --fmm-primary-dark:    #E85555;
  --fmm-accent:          #FFD93D;
  --fmm-accent-dark:     #F5C800;
  --fmm-gradient:        linear-gradient(135deg, #FF6B6B 0%, #FFD93D 100%);
  --fmm-hero-overlay:    rgba(26, 18, 16, 0.65);
  --fmm-header-bg:       #1A1210;
  --fmm-header-text:     #F5EDE8;
  --fmm-header-gradient: linear-gradient(90deg, #FF6B6B 0%, #FFD93D 100%);
  --fmm-nav-hover:       #FFD93D;
  --fmm-btn-bg:          #FF6B6B;
  --fmm-btn-text:        #FFFFFF;
  --fmm-shadow:          0 4px 20px rgba(0,0,0,0.4);
  --fmm-shadow-deep:     0 8px 40px rgba(0,0,0,0.6);
  --fmm-logo-filter:     drop-shadow(0 0 8px rgba(255,107,107,0.5));
}

/* ── 3. Sunset Coral + Gold ──────────────────────────────── */
[data-theme="sunset-gold"],
body.theme-sunset-gold {
  --fmm-bg:              #FFF8F0;
  --fmm-bg-alt:          #FFF3E6;
  --fmm-surface:         #FFFFFF;
  --fmm-surface-alt:     #FFE8D0;
  --fmm-border:          #FFD4A8;
  --fmm-text:            #3D1F0A;
  --fmm-text-muted:      #8B5E3C;
  --fmm-primary:         #FF6B6B;
  --fmm-primary-dark:    #E85555;
  --fmm-accent:          #FFD93D;
  --fmm-accent-dark:     #F5A800;
  --fmm-gradient:        linear-gradient(135deg, #FF6B6B 0%, #FF8E53 50%, #FFD93D 100%);
  --fmm-hero-overlay:    rgba(255, 107, 107, 0.50);
  --fmm-header-bg:       transparent;
  --fmm-header-text:     #FFFFFF;
  --fmm-header-gradient: linear-gradient(90deg, #FF6B6B 0%, #FF8E53 50%, #FFD93D 100%);
  --fmm-nav-hover:       #FFD93D;
  --fmm-btn-bg:          linear-gradient(90deg, #FF6B6B, #FFD93D);
  --fmm-btn-text:        #FFFFFF;
  --fmm-shadow:          0 4px 20px rgba(255,107,107,0.25);
  --fmm-shadow-deep:     0 8px 40px rgba(255,107,107,0.40);
  --fmm-logo-filter:     drop-shadow(0 2px 8px rgba(255,107,107,0.4));
}

/* ── 4. Sunset Coral + Deep Navy ─────────────────────────── */
[data-theme="sunset-navy"],
body.theme-sunset-navy {
  --fmm-bg:              #0D1B2A;
  --fmm-bg-alt:          #112236;
  --fmm-surface:         #162A3D;
  --fmm-surface-alt:     #1E3450;
  --fmm-border:          #2A4A6A;
  --fmm-text:            #EEF4FF;
  --fmm-text-muted:      #7A9AB8;
  --fmm-primary:         #FF6B6B;
  --fmm-primary-dark:    #E85555;
  --fmm-accent:          #FFD93D;
  --fmm-accent-dark:     #F5C800;
  --fmm-gradient:        linear-gradient(135deg, #FF6B6B 0%, #FFD93D 100%);
  --fmm-hero-overlay:    rgba(13, 27, 42, 0.65);
  --fmm-header-bg:       #0D1B2A;
  --fmm-header-text:     #EEF4FF;
  --fmm-header-gradient: linear-gradient(90deg, #FF6B6B 0%, #FFD93D 100%);
  --fmm-nav-hover:       #FF6B6B;
  --fmm-btn-bg:          #FF6B6B;
  --fmm-btn-text:        #FFFFFF;
  --fmm-shadow:          0 4px 20px rgba(0,0,0,0.5);
  --fmm-shadow-deep:     0 8px 40px rgba(0,0,0,0.7);
  --fmm-logo-filter:     drop-shadow(0 0 10px rgba(255,107,107,0.6));
}

/* ── 5. Ocean Blue (bonus) ───────────────────────────────── */
[data-theme="ocean-blue"],
body.theme-ocean-blue {
  --fmm-bg:              #EBF4FB;
  --fmm-bg-alt:          #FFFFFF;
  --fmm-surface:         #FFFFFF;
  --fmm-surface-alt:     #D6EAF8;
  --fmm-border:          #AED6F1;
  --fmm-text:            #0D2A40;
  --fmm-text-muted:      #4A7FA0;
  --fmm-primary:         #2980B9;
  --fmm-primary-dark:    #1A6090;
  --fmm-accent:          #1ABC9C;
  --fmm-accent-dark:     #148F77;
  --fmm-gradient:        linear-gradient(135deg, #2980B9 0%, #1ABC9C 100%);
  --fmm-hero-overlay:    rgba(41, 128, 185, 0.55);
  --fmm-header-bg:       #2980B9;
  --fmm-header-text:     #FFFFFF;
  --fmm-header-gradient: linear-gradient(90deg, #2980B9 0%, #1ABC9C 100%);
  --fmm-nav-hover:       #1ABC9C;
  --fmm-btn-bg:          #2980B9;
  --fmm-btn-text:        #FFFFFF;
  --fmm-shadow:          0 4px 20px rgba(41,128,185,0.2);
  --fmm-shadow-deep:     0 8px 40px rgba(41,128,185,0.35);
  --fmm-logo-filter:     none;
}

/* ── 6. Forest Green (bonus) ─────────────────────────────── */
[data-theme="forest-green"],
body.theme-forest-green {
  --fmm-bg:              #EAF5EA;
  --fmm-bg-alt:          #FFFFFF;
  --fmm-surface:         #FFFFFF;
  --fmm-surface-alt:     #D5EFCF;
  --fmm-border:          #A8D5A2;
  --fmm-text:            #0D2B12;
  --fmm-text-muted:      #3D7040;
  --fmm-primary:         #27AE60;
  --fmm-primary-dark:    #1E8449;
  --fmm-accent:          #F39C12;
  --fmm-accent-dark:     #D68910;
  --fmm-gradient:        linear-gradient(135deg, #27AE60 0%, #F39C12 100%);
  --fmm-hero-overlay:    rgba(39, 174, 96, 0.50);
  --fmm-header-bg:       #27AE60;
  --fmm-header-text:     #FFFFFF;
  --fmm-header-gradient: linear-gradient(90deg, #27AE60 0%, #F39C12 100%);
  --fmm-nav-hover:       #F39C12;
  --fmm-btn-bg:          #27AE60;
  --fmm-btn-text:        #FFFFFF;
  --fmm-shadow:          0 4px 20px rgba(39,174,96,0.2);
  --fmm-shadow-deep:     0 8px 40px rgba(39,174,96,0.35);
  --fmm-logo-filter:     none;
}
/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  background: var(--fmm-header-bg);
  background-image: var(--fmm-header-gradient);
  color: var(--fmm-header-text);
  padding: 12px 24px;
  box-shadow: var(--fmm-shadow);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.site-header a,
.site-header nav a {
  color: var(--fmm-header-text);
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  transition: opacity 0.2s;
}

.site-header nav a:hover {
  opacity: 0.8;
  color: var(--fmm-nav-hover);
}

/* ============================================================
   HERO HEADER
   ============================================================ */
.hero-header {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--fmm-bg-alt);
}

/* Background photo */
.hero-header__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Theme-aware overlay — uses custom override if admin set one */
.hero-header__overlay {
  position: absolute;
  inset: 0;
  background: var(--fmm-hero-overlay-custom, var(--fmm-hero-overlay));
  z-index: 1;
  transition: background 0.4s ease;
}

/* Content sits above overlay */
.hero-header__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ── Logo in hero ─────────────────────────────────────────── */
.hero-header__logo {
  width: 140px;
  height: 140px;
  filter: var(--fmm-logo-filter, drop-shadow(0 4px 16px rgba(255,107,107,0.5)));
  transition: filter 0.3s ease, transform 0.3s ease;
  animation: hero-logo-entrance 0.8s cubic-bezier(0.34,1.56,0.64,1) both;
}

.hero-header__logo:hover {
  transform: scale(1.05);
}

@keyframes hero-logo-entrance {
  from { opacity: 0; transform: translateY(-20px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Hero title & tagline ────────────────────────────────── */
.hero-header__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  margin: 0;
  animation: hero-text-entrance 0.9s 0.15s cubic-bezier(0.34,1.56,0.64,1) both;
}

.hero-header__tagline {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
  margin: 0;
  animation: hero-text-entrance 0.9s 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes hero-text-entrance {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ============================================================
   GLOBAL BODY / PAGE
   ============================================================ */
body {
  background-color: var(--fmm-bg);
  color: var(--fmm-text);
  font-family: 'Nunito', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  margin: 0;
}

/* ── Surfaces / cards ────────────────────────────────────── */
.fmm-card,
.dashboard-card,
.admin-panel {
  background: var(--fmm-surface);
  border: 1px solid var(--fmm-border);
  border-radius: 12px;
  box-shadow: var(--fmm-shadow);
  transition: background 0.3s, border-color 0.3s;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary,
button[type="submit"],
.fmm-btn {
  background: var(--fmm-btn-bg);
  color: var(--fmm-btn-text);
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: var(--fmm-shadow);
}

.btn-primary:hover,
.fmm-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: var(--fmm-shadow-deep);
}

/* ── Links ───────────────────────────────────────────────── */
a {
  color: var(--fmm-primary);
  transition: color 0.2s;
}

a:hover {
  color: var(--fmm-primary-dark);
}

/* ── Navigation accents ──────────────────────────────────── */
nav a.active,
.nav-link.active {
  color: var(--fmm-accent);
  border-bottom: 2px solid var(--fmm-accent);
}

/* ── Gradient text utility ───────────────────────────────── */
.text-gradient {
  background: var(--fmm-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Admin form elements ─────────────────────────────────── */
.admin-input,
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  background: var(--fmm-surface-alt);
  border: 1px solid var(--fmm-border);
  color: var(--fmm-text);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'Nunito', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--fmm-primary);
  box-shadow: 0 0 0 3px rgba(255,107,107,0.15);
}

/* ============================================================
   THEME TRANSITION ANIMATION
   Applied briefly when theme changes via JS
   ============================================================ */
body.theme-transitioning * {
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease !important;
}