/*
Theme Name: iCoda
Theme URI: https://www.icoda.co.uk
Author: McDada
Author URI: https://www.mcdada.co.uk
Description: Real-time visual instrument platform. Sound x Vision x Chaos. Custom theme for iCoda — five browser-based audiovisual instruments, member gallery, and creative iCoda packages.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: icoda
*/

/* ==========================================================================
   RESET
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --acid:#AAFF00;
  --neon-red:#FF2D2D;
  --white:#FFFFFF;
  --bg:#0A0A0A;
  --bg2:#111111;
  --bg3:#161616;
  --muted:#555555;
  --border:#222222;
  --open:#3DAA4A;
  --create:#E8C832;
  --ambient:#CCCCCC;
  --print:#3AAED8;
  --audio:#D94040;
}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--white);
  font-family:'Be Vietnam Pro', sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}

/* ==========================================================================
   LAYOUT HELPERS
   ========================================================================== */
.container{
  max-width:1400px;
  margin:0 auto;
  padding:0 2.5rem;
}
@media(max-width:900px){
  .container{padding:0 1.5rem;}
}

/* ==========================================================================
   NAV
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 2.5rem;
  background:rgba(10,10,10,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.site-logo{
  font-size:1.3rem;font-weight:800;letter-spacing:-0.02em;
}
.site-logo span{color:var(--acid);}
.nav-links{display:flex;gap:2rem;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
.nav-links a:hover{color:var(--white);}
.nav-links li{display:inline;}
.nav-cta{
  background:var(--acid);color:#000;
  font-size:0.75rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  padding:0.5rem 1.2rem;border-radius:2px;
}
.nav-cta:hover{background:#fff;}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;}

@media(max-width:900px){
  .site-header{padding:1rem 1.5rem;}
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  .nav-links.open{
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:var(--bg);border-bottom:1px solid var(--border);
    padding:1.5rem;gap:1.2rem;
  }
}

/* ==========================================================================
   SECTIONS — GENERIC
   ========================================================================== */
section{padding:8rem 2.5rem 4rem;}
.section-tag{
  font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--acid);
  margin-bottom:1.5rem;
}
@media(max-width:900px){
  section{padding:7rem 1.5rem 3rem;}
}

/* ==========================================================================
   HERO
   ========================================================================== */
#hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding-top:7rem;position:relative;overflow:hidden;
}
.hero-sub{
  font-size:0.72rem;letter-spacing:0.25em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border);display:inline-block;
  padding:0.4rem 0.8rem;margin-bottom:2rem;border-radius:2px;
}
.hero-title{
  font-size:clamp(4rem, 12vw, 9rem);
  font-weight:900;line-height:0.92;
  letter-spacing:-0.03em;
  margin-bottom:2rem;
}
.hero-title .accent{color:var(--acid);}
.hero-desc{
  font-size:1.1rem;color:#888;max-width:520px;margin-bottom:3rem;line-height:1.7;
}
.btn-primary{
  display:inline-block;
  background:var(--acid);color:#000;
  font-size:0.8rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  padding:0.9rem 2rem;border-radius:2px;margin-right:1rem;margin-bottom:1rem;
}
.btn-ghost{
  display:inline-block;
  border:1px solid var(--border);color:var(--muted);
  font-size:0.8rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  padding:0.9rem 2rem;border-radius:2px;
}
.btn-primary:hover{background:#fff;}
.btn-ghost:hover{border-color:var(--white);color:var(--white);}

.hero-ticker{
  position:absolute;bottom:2rem;left:0;right:0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:0.6rem 0;overflow:hidden;
  font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);
}
.ticker-inner{display:flex;gap:4rem;white-space:nowrap;animation:ticker 20s linear infinite;}
.ticker-inner span{color:var(--acid);}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
.intro-title{font-size:clamp(2.5rem,6vw,5rem);font-weight:900;line-height:0.95;letter-spacing:-0.03em;margin-bottom:1.5rem;}
.intro-title .red{color:var(--neon-red);}
.intro-body{color:#888;font-size:1rem;line-height:1.8;margin-bottom:1.5rem;}
.feature-list{display:flex;flex-direction:column;gap:1rem;}
.feature-item{
  border:1px solid var(--border);padding:1.2rem 1.4rem;border-radius:3px;
  display:flex;gap:1.2rem;align-items:flex-start;
}
.feature-num{font-size:0.7rem;font-weight:700;letter-spacing:0.1em;color:var(--acid);margin-top:2px;min-width:24px;}
.feature-title{font-size:0.9rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.3rem;}
.feature-desc{font-size:0.82rem;color:var(--muted);line-height:1.6;}

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

/* ==========================================================================
   APPS LIST
   ========================================================================== */
#apps{background:var(--bg2);}
.apps-header{margin-bottom:4rem;}
.apps-title{font-size:clamp(2.5rem,6vw,5rem);font-weight:900;line-height:0.95;letter-spacing:-0.03em;margin-bottom:1rem;}
.apps-title .acid{color:var(--acid);}
.app-list{display:flex;flex-direction:column;gap:0;}
.app-row{
  display:flex;align-items:center;gap:2rem;flex-wrap:wrap;
  border-top:1px solid var(--border);
  padding:2rem 0;
  transition:padding-left 0.2s;
}
.app-row:last-child{border-bottom:1px solid var(--border);}
.app-row:hover{padding-left:1rem;}
.app-num{font-size:0.7rem;font-weight:700;letter-spacing:0.1em;color:var(--muted);min-width:32px;}
.app-icon{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.app-icon svg{width:32px;height:32px;}
.app-name{font-size:1.6rem;font-weight:800;letter-spacing:-0.02em;flex:1;min-width:160px;}
.app-desc{font-size:0.85rem;color:var(--muted);max-width:320px;}
.app-tags{display:flex;gap:0.5rem;flex-wrap:wrap;}
.tag{
  font-size:0.65rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  border:1px solid var(--border);padding:0.25rem 0.6rem;border-radius:2px;color:var(--muted);
}
.app-arrow{font-size:1.2rem;color:var(--muted);}
.app-row:hover .app-arrow{color:var(--white);}

/* App colour classes — reusable across templates */
.app-open{color:var(--open);}
.app-create{color:var(--create);}
.app-ambient{color:var(--ambient);}
.app-print{color:var(--print);}
.app-audio{color:var(--audio);}
.icon-open{background:rgba(61,170,74,0.15);}
.icon-create{background:rgba(232,200,50,0.15);}
.icon-ambient{background:rgba(200,200,200,0.1);}
.icon-print{background:rgba(58,174,216,0.15);}
.icon-audio{background:rgba(217,64,64,0.15);}

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.how-title{font-size:clamp(2.5rem,6vw,5rem);font-weight:900;line-height:0.95;letter-spacing:-0.03em;margin-bottom:4rem;}
.how-title .acid{color:var(--acid);}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.step{border-top:2px solid var(--border);padding-top:1.5rem;}
.step.active{border-top-color:var(--acid);}
.step-num{font-size:0.7rem;font-weight:700;letter-spacing:0.15em;color:var(--acid);margin-bottom:1rem;}
.step-title{font-size:1.2rem;font-weight:800;margin-bottom:0.8rem;}
.step-desc{font-size:0.85rem;color:var(--muted);line-height:1.7;}

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

/* ==========================================================================
   GALLERY
   ========================================================================== */
#gallery, .gallery-page{background:var(--bg2);}
.gallery-title{font-size:clamp(2.5rem,6vw,5rem);font-weight:900;line-height:0.95;letter-spacing:-0.03em;margin-bottom:0.5rem;}
.gallery-title .red{color:var(--neon-red);}
.gallery-sub{font-size:0.85rem;color:var(--muted);margin-bottom:3rem;}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
}
.gallery-item{
  aspect-ratio:1;
  background:var(--bg3);
  border-radius:1px;
  overflow:hidden;
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.gallery-item:first-child{grid-column:span 2;aspect-ratio:2/1;}
.gallery-item img{width:100%;height:100%;object-fit:cover;}
.gallery-placeholder{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0.5rem;
}
.gallery-icon{font-size:2rem;opacity:0.15;}
.gallery-label{font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);}
.gallery-overlay{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent, rgba(0,0,0,0.85));
  padding:1rem;
  opacity:0;transition:opacity 0.2s;
}
.gallery-item:hover .gallery-overlay{opacity:1;}
.gallery-caption{font-size:0.8rem;font-weight:600;}
.gallery-meta{font-size:0.7rem;color:var(--muted);margin-top:0.2rem;}

@media(max-width:900px){
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .gallery-item:first-child{grid-column:span 2;}
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.test-title{font-size:clamp(2.5rem,6vw,5rem);font-weight:900;line-height:0.95;letter-spacing:-0.03em;margin-bottom:4rem;}
.test-title .acid{color:var(--acid);}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.test-card{
  border:1px solid var(--border);padding:2rem;border-radius:3px;
}
.test-quote{font-size:0.95rem;line-height:1.8;color:#bbb;margin-bottom:1.5rem;}
.test-author{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}
.test-author strong{color:var(--acid);}

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

/* ==========================================================================
   CTA
   ========================================================================== */
#cta{
  background:var(--bg2);
  min-height:50vh;
  display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;
  border-top:1px solid var(--border);
}
.cta-title{font-size:clamp(3rem,8vw,7rem);font-weight:900;line-height:0.92;letter-spacing:-0.03em;margin-bottom:2rem;}
.cta-title .acid{color:var(--acid);}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  border-top:1px solid var(--border);
  padding:2rem 2.5rem;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;
  font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);
}
.footer-brand{font-weight:800;color:var(--white);}
.footer-brand span{color:var(--acid);}

/* ==========================================================================
   GENERIC PAGE / SINGLE POST CONTENT
   (About, History, News, single iCoda packages etc.)
   ========================================================================== */
.page-content{
  padding:9rem 2.5rem 4rem;
  max-width:900px;
  margin:0 auto;
}
.page-title{
  font-size:clamp(2.5rem,6vw,5rem);
  font-weight:900;line-height:0.95;letter-spacing:-0.03em;
  margin-bottom:2rem;
}
.page-content p{color:#bbb;margin-bottom:1.4rem;line-height:1.8;}
.page-content h2{font-size:1.8rem;font-weight:800;margin:2.5rem 0 1rem;}
.page-content h3{font-size:1.3rem;font-weight:700;margin:2rem 0 1rem;}
.page-content img{border-radius:4px;margin:1.5rem 0;}
.page-content a{color:var(--acid);text-decoration:underline;}

/* ==========================================================================
   FORMS (login / register / upload — Ultimate Member overrides go here later)
   ========================================================================== */
.icoda-form{
  max-width:480px;margin:0 auto;
  padding:2rem;border:1px solid var(--border);border-radius:4px;
}
.icoda-form label{
  display:block;font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:0.5rem;
}
.icoda-form input,
.icoda-form textarea{
  width:100%;background:var(--bg2);border:1px solid var(--border);color:#fff;
  padding:0.8rem 1rem;border-radius:2px;margin-bottom:1.2rem;font-family:inherit;font-size:0.95rem;
}
.icoda-form button{
  background:var(--acid);color:#000;border:none;cursor:pointer;
  font-size:0.8rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  padding:0.9rem 2rem;border-radius:2px;
}
.icoda-form button:hover{background:#fff;}