/*
Theme Name: H2 Mountain Collective V2
Theme URI: https://h2mountaincollective.com
Author: Brandon Reed / ChatGPT
Description: Cinematic single-page WordPress theme for H2 Mountain Collective – guided ski & snowboard, FPV & drone filming, and content creation.
Version: 2.0
Text Domain: h2mc
*/

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

:root {
  --bg-dark: #0e1a24;
  --bg-darker: #070d13;
  --bg-light: #f5f7fa;
  --text-main: #f7f9fc;
  --text-muted: #b4c0cf;
  --accent: #6ec9ff;
  --accent-soft: #a7c7df;
  --border-subtle: #243242;
  --card-bg: #121c27;
  --gold: #ddb660;
}

*,
*::before,
*::after { box-sizing:border-box; }

body {
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg-darker);
  color:var(--text-main);
  -webkit-font-smoothing:antialiased;
}

img { max-width:100%; display:block; }

a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

.container { width:min(1120px,100% - 2.5rem); margin-inline:auto; }

h1,h2,h3,h4 {
  font-family:"Montserrat",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  margin-top:0;
}

h1 { font-size:clamp(2.7rem,3.4vw,3.4rem); letter-spacing:0.04em; }
h2 { font-size:clamp(2rem,2.6vw,2.6rem); }
h3 { font-size:1.25rem; }

p { line-height:1.7; color:var(--text-muted); }

/* Header & nav */

.site-header {
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(18px);
  background:linear-gradient(to bottom,rgba(7,13,19,0.98),rgba(7,13,19,0.9),transparent);
  border-bottom:1px solid rgba(36,50,66,0.8);
}
.nav-container {
  display:flex;align-items:center;justify-content:space-between;
  padding-block:0.85rem;
}
.brand { display:flex;align-items:center;gap:0.6rem;color:var(--text-main);text-decoration:none; }
.brand img { height:36px;width:auto;display:block; }
.brand-text { font-size:0.82rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-muted); }

.main-nav { display:flex;align-items:center;gap:1.5rem;font-size:0.9rem; }
.main-nav a { color:var(--text-muted);text-transform:uppercase;letter-spacing:0.16em;font-weight:500;font-size:0.78rem; }
.main-nav a:hover { color:var(--text-main); }
.nav-cta { padding:0.4rem 0.9rem;border-radius:999px;border:1px solid var(--accent-soft);color:var(--accent-soft); }
.nav-cta:hover { background:var(--accent-soft);color:var(--bg-dark); }

.nav-toggle { display:none;background:none;border:none;padding:0; }
.nav-toggle span { display:block;width:20px;height:2px;margin-block:4px;background:var(--text-main); }

/* Hero */

.hero {
  position:relative;min-height:80vh;display:flex;align-items:center;
  background:
    radial-gradient(circle at 10% 0%,rgba(110,201,255,0.18),transparent 56%),
    radial-gradient(circle at 80% 0%,rgba(221,182,96,0.16),transparent 55%),
    url('assets/img/hero_snowboard.jpg');
  background-size:cover;
  background-position:center center;
}
.hero-overlay {
  position:absolute;inset:0;
  background-image:
    linear-gradient(to bottom,rgba(0,0,0,0.7),transparent 45%,rgba(0,0,0,0.75)),
    radial-gradient(circle at 0 120%,rgba(174,215,255,0.15),transparent 60%);
  pointer-events:none;
}
.hero-inner { position:relative;z-index:1;padding-block:5rem 4rem; }
.hero-content { max-width:640px; }
.eyebrow { font-size:0.78rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:0.9rem; }
.hero-sub { margin-top:1.2rem;max-width:36rem; }
.hero-actions { display:flex;flex-wrap:wrap;gap:0.9rem;margin-top:2rem; }

/* Buttons */

.btn {
  display:inline-flex;align-items:center;justify-content:center;
  padding:0.9rem 1.5rem;border-radius:999px;
  font-size:0.9rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
}
.btn.primary {
  background:linear-gradient(135deg,var(--accent),var(--accent-soft));
  color:var(--bg-dark);
  box-shadow:0 12px 30px rgba(0,0,0,0.46);
}
.btn.primary:hover { filter:brightness(1.05); }
.btn.ghost { border-color:rgba(164,194,221,0.5);color:var(--text-main);background:transparent; }
.btn.ghost:hover { border-color:var(--accent); }

/* Sections */

.section { padding-block:4rem;background:var(--bg-darker); }
.section-dark {
  background:radial-gradient(circle at top left,rgba(110,201,255,0.15),transparent 55%),var(--bg-dark);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
}
.section h2 { margin-bottom:1rem; }
.section-intro { max-width:34rem; }

.split { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr);gap:2.75rem;align-items:flex-start; }

/* Feature & cards */

.feature-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem; }
.feature-card {
  background:rgba(5,10,16,0.94);
  border-radius:1rem;
  padding:1.4rem 1.3rem 1.25rem;
  border:1px solid rgba(63,90,117,0.85);
  box-shadow:0 14px 40px rgba(0,0,0,0.48);
}

.cards-3 { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;margin-top:1.6rem; }
.card {
  background:var(--card-bg);
  border-radius:1rem;
  padding:1.6rem 1.5rem 1.5rem;
  border:1px solid var(--border-subtle);
  box-shadow:0 10px 32px rgba(0,0,0,0.5);
}
.card ul { padding-left:1.1rem;margin-top:0.75rem;margin-bottom:0; }
.card ul li { color:var(--text-muted);margin-bottom:0.35rem; }
.card-link { display:inline-block;margin-top:1rem;font-size:0.85rem;letter-spacing:0.16em;text-transform:uppercase; }

/* About strip */

.about-strip { align-items:stretch; }
.about-panel {
  background:radial-gradient(circle at top left,rgba(110,201,255,0.26),transparent 60%),#05080c;
  border-radius:1.4rem;
  border:1px solid rgba(118,171,214,0.8);
  padding:1.8rem 1.7rem;
  display:flex;align-items:center;
}
.quote { font-style:italic;color:var(--text-main); }

/* Forms */

.inquiry-form { max-width:720px;margin-top:1.2rem; }
.form-row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem; }
.form-field { margin-bottom:1rem; }

label {
  display:block;font-size:0.85rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:0.4rem;
}

input,select,textarea {
  width:100%;padding:0.65rem 0.75rem;border-radius:0.6rem;
  border:1px solid rgba(57,79,102,0.9);
  background:#050a10;
  color:var(--text-main);
  font-family:inherit;font-size:0.95rem;
}
input:focus,select:focus,textarea:focus {
  outline:1px solid var(--accent);
  border-color:var(--accent);
}

.form-note { font-size:0.8rem;color:var(--text-muted);margin-top:0.3rem; }

/* Footer */

.site-footer {
  padding-top:3rem;margin-top:2rem;border-top:1px solid var(--border-subtle);
  background:radial-gradient(circle at 10% 0%,rgba(110,201,255,0.15),transparent 55%),#05080c;
}
.footer-content { display:flex;justify-content:space-between;gap:2.5rem;align-items:flex-start; }
.footer-logo { font-family:"Montserrat",sans-serif;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:0.6rem; }
.footer-columns { display:flex;gap:2.5rem; }
.footer-columns h4 { font-size:0.9rem;letter-spacing:0.16em;text-transform:uppercase; }
.footer-columns a,.footer-columns p { display:block;font-size:0.85rem;margin-top:0.15rem; }
.footer-bottom { border-top:1px solid rgba(49,69,90,0.8);margin-top:2rem;padding-block:0.9rem;font-size:0.8rem;color:var(--text-muted); }

/* Responsive */

@media (max-width:880px){
  .split{grid-template-columns:minmax(0,1fr);}
  .feature-grid{grid-template-columns:minmax(0,1fr);}
  .cards-3{grid-template-columns:minmax(0,1fr);}
  .footer-content{flex-direction:column;}
  .footer-columns{flex-direction:column;}
  .form-row{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:720px){
  .nav-toggle{display:block;}
  .main-nav{
    position:absolute;inset-inline:0;top:56px;
    background:rgba(5,8,12,0.98);
    padding:0.75rem 1.5rem 1rem;
    border-bottom:1px solid rgba(41,57,76,0.9);
    flex-direction:column;gap:0.6rem;
    transform:translateY(-120%);opacity:0;pointer-events:none;
    transition:opacity 0.18s ease-out,transform 0.18s ease-out;
  }
  .main-nav.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .hero{min-height:70vh;}
  .hero-inner{padding-block:4rem 3rem;}
}