/*
Theme Name: The Sound District (Partnership Edition)
Author: The Sound District
Description: Custom one-page theme with auto-created investor/partner pages, menu, and brand styling.
Version: 2.2
Text Domain: thesounddistrict
*/

/* Typography */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap');

:root{
  --outerspace:#2E4057;
  --tan:#F2A365;
  --forest:#81B29A;
  --gold:#F2CC8F;
  --sepia:#6B4226;
  --text:#ffffff;
  --bg-overlay: rgba(0,0,0,.65);
  --card-bg:#ffffff;
  --card-text:#1b1b1b;
  --shadow: 0 8px 24px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Syne',sans-serif;
  background:url('https://www.thesounddistrict.co.uk/wp-content/uploads/2026/02/Designer.png') no-repeat center center fixed;
  background-size:cover;
  color:var(--text);
}

/* Top navigation */
.site-nav-wrap{position:sticky; top:0; z-index:9; background:rgba(0,0,0,.5); backdrop-filter:blur(4px);}
.site-nav{max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px 16px;}
.site-brand{display:flex; align-items:center; gap:10px; color:var(--gold); font-weight:800; text-decoration:none;}
.site-brand img{height:34px; width:auto;}
.site-menu{display:flex; gap:14px;}
.site-menu a{color:#fff; text-decoration:none; font-weight:700; padding:8px 10px; border-radius:6px;}
.site-menu a:hover{background:rgba(255,255,255,.08)}

/* Overlay */
.overlay{background:var(--bg-overlay); min-height:100vh; width:100%; position:relative;}

/* Global section spacing + centered text */
section{ padding:64px 20px; max-width:1000px; margin:0 auto; text-align:center; position:relative; z-index:2; }

h1,h2,h3{font-weight:700;margin:0 0 16px}
h1, h2{color:var(--gold)}
p{margin:0 auto 16px; line-height:1.7; max-width:900px}

/* HERO */
.hero{ text-align:center; padding:120px 20px 48px; }
.hero img{max-width:520px; width:100%; height:auto}
.subtitle{font-size:1.9rem; margin-top:20px}
.cta-buttons a{ display:inline-block; margin:20px 14px; padding:16px 34px; font-size:1.25rem; border-radius:8px; text-decoration:none; font-weight:800; letter-spacing:.2px; background:var(--gold); color:var(--outerspace);} 
.cta-buttons a:hover{background:var(--tan)}

/* PROGRAMMES — cards overlaying section photo, 4 on top row, 2 centered below */
#programmes{ position:relative; }
.section-photo{ position:absolute; opacity:.55; border-radius:12px; box-shadow:var(--shadow); pointer-events:none; filter: saturate(95%) contrast(95%) brightness(90%); z-index:1; }
.section-photo--programmes{ right:-36px; top:-24px; width:360px; transform:rotate(1deg); }

.programmes-panel{ display:block; padding:18px; border-radius:16px; background: rgba(0,0,0,.30); backdrop-filter: blur(3px); box-shadow: 0 8px 28px rgba(0,0,0,.35); position:relative; z-index:2; }
.programmes-grid{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:8px; }
.programmes-grid .programme-card:nth-child(5){ grid-column:2; }
.programmes-grid .programme-card:nth-child(6){ grid-column:3; }

.programme-card{ background:var(--card-bg); color:var(--card-text); border-radius:12px; padding:24px 20px; box-shadow:var(--shadow); text-align:center; transition:transform .2s ease, box-shadow .2s ease; }
.programme-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.3); }
.programme-card h3{ margin:0 0 10px; color:#111; font-size:1.12rem; }

@keyframes progFade{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.programmes-grid .programme-card{ opacity:0; animation: progFade .65s ease-out forwards; }
.programmes-grid .programme-card:nth-child(1){ animation-delay:.05s }
.programmes-grid .programme-card:nth-child(2){ animation-delay:.12s }
.programmes-grid .programme-card:nth-child(3){ animation-delay:.19s }
.programmes-grid .programme-card:nth-child(4){ animation-delay:.26s }
.programmes-grid .programme-card:nth-child(5){ animation-delay:.95s }
.programmes-grid .programme-card:nth-child(6){ animation-delay:1.05s }

/* Decorative placements for other sections */
.section-photo--founders{ right:-40px; bottom:-30px; width:260px; transform:rotate(2deg); }
.section-photo--impact{ left:-48px; top:12px; width:280px; transform:rotate(-2deg); }
.section-photo--sustainability{ left:-44px; bottom:-28px; width:260px; transform:rotate(-1deg); }

/* Keep text away from photos on large screens except Programmes which overlays intentionally */
@media (min-width:901px){
  #founders{ padding-right: 340px; }
  #impact{ padding-left: 360px; }
  #programmes{ padding-right: 80px; }
  #sustainability{ padding-left: 340px; }
}

/* Optional high-contrast panels */
.section-panel{ display:inline-block; padding:14px 18px; border-radius:14px; background: rgba(0,0,0,.35); backdrop-filter: blur(2px); box-shadow: 0 6px 20px rgba(0,0,0,.25); position:relative; z-index:2; }
.section-panel p{ margin-bottom:0; }

/* Footer */
.site-footer{ margin-top:32px; padding:28px 20px 40px; border-top:1px solid rgba(255,255,255,.15); }
.footer-inner{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:160px 1fr; align-items:center; gap:20px; }
.footer-logo{ display:flex; align-items:center; justify-content:flex-start; }
.footer-logo img{ max-width:150px; width:100%; height:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.footer-contact{ text-align:center; }
.footer-contact h3{ color:var(--gold); margin:0 0 6px; }
.footer-contact p{ margin:0 0 6px; }
.footer-contact a{ color:var(--gold); text-decoration:none; font-weight:700; }
.footer-contact a:hover{ color:var(--tan); }

/* Utility */
ul{list-style:none; padding:0; margin:0}