/* =========================================================
   CHL Website Build - Global Stylesheet
   Purpose: One stylesheet for entire project.
   Notes:
   - Uses CSS variables for easy theming (colors, fonts).
   - Everything is intentionally minimal and reusable.
   ========================================================= */


/* =========================================================
   Font Face Definitions
   Purpose:
   - Load local font files (no external dependencies)
   ========================================================= */

/* Forum — Heading font */
@font-face {
  font-family: "Forum";
  src:
    url("/assets/fonts/forum-regular.otf") format("otf");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Purpose: prevent invisible text */
}

/* Roboto — Body / UI fonts */
@font-face {
  font-family: "Roboto";
  src:
    url("/assets/fonts/roboto-light.ttf") format("ttf");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src:
    url("/assets/fonts/roboto-medium.ttf") format("ttf");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src:
    url("/assets/fonts/roboto-medium.ttf") format("ttf");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* -----------------------------
   Theme Variables
   Purpose: change site look quickly in one place.
----------------------------- */
:root {
  /* Color palette */
  --color-base: #1C3942;      /* Primary background + primary text (used carefully) */
  --color-accent-1: #859F84;  /* Forest green */
  --color-accent-1-light: rgba(133, 159, 132, 0.50);
  --color-accent-2: #D69F4B;  /* Warm gold */
  --color-light: #D0D4B6;     /* Light sage */

  /* Typography */
	--font-display: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;


  /* Layout sizing */
  --max-width: 1000px;       /* Max readable width */
  --radius: 16px;            /* Consistent rounded corners */
  --shadow: 0 10px 30px rgba(0,0,0,0.20); /* Soft modern shadow */

  /* Spacing scale */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* Transitions (subtle polish without JS) */
  --ease: 160ms ease;
}

/* -----------------------------
   Base Reset
   Purpose: consistent rendering across browsers.
----------------------------- */
* { box-sizing: border-box; }


/* -----------------------------
   Sticky Footer Layout
   Purpose:
   - Footer sits at bottom on short pages
   - Footer appears after content when scrolling
----------------------------- */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  /* Purpose: baseline typography + fallback only */
  font-family: var(--font-sans);
  line-height: 1.5;
  color: var(--color-base);

  /* Purpose: fallback background if image fails */
  background-color: var(--color-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.02em;
}

main {
  flex: 1;                  /* Purpose: main grows to push footer down */
}




/* -----------------------------
   Utility: Container
   Purpose: keep content centered and readable.
----------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* -----------------------------
   Site Header
   Purpose: consistent top navigation area.
----------------------------- */
.site-header {
  /* Purpose: create a modern header with slight separation */
  background: var(--color-light);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(28, 57, 66, 0.12);
   /* Purpose: keep header visible at top when scrolling */
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-inner {
  /* Purpose: align logo + nav horizontally */
  flex-wrap: wrap; /* Purpose: allow logo + nav to stack naturally */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) 0;
  gap: var(--space-4);
}

.brand {
  /* Purpose: align logo and site name */
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}

.brand img {
  /* Purpose: keep logo a consistent size */
  height: 44px;
  object-fit: contain;
  padding: 0 0 0 10px;
}

.brand-title {
  font-family: var(--font-display);   
  font-weight: 500;                 
  letter-spacing: 0.08em;          
  font-size: 15px;                   
  line-height: 1;
  text-transform: uppercase;         
  color: var(--color-base);
}

.nav a {
  /* Purpose: simple nav styling */
  text-decoration: none;
  color: var(--color-base);
  font-weight: 600;
  border-radius: var(--radius);
  transition: background var(--ease);
  margin: 0 4px;  
  padding: 6px 12px;   /* Purpose: larger tap target */
}

.nav a:hover {
  /* Purpose: subtle hover without overpowering */
  background: rgba(133, 159, 132, 0.20);
}

/* -----------------------------
   Header Mobile Layout
   Purpose:
   - Center brand + nav on small screens
   - Reduce vertical space
----------------------------- */
@media (max-width: 700px) {
  .header-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;                 /* tighter space between brand and nav */
    padding: 4px 0;          /* reduce header height on mobile */
    text-align: center;
	margin: 0 0 5px 0;
  }

  .brand {
    justify-content: center;  /* center logo + title */
  }
  
  .brand img {
	padding: 0;
  }

  .nav {
    justify-content: center;  /* center nav row */
    gap: 6px;
  }
}


/* -----------------------------
   Full Page Background Wrapper
   Purpose:
   - Ensures forest background spans full document height
   - Fixes mobile background cutoff issue
----------------------------- */
.page-bg {
  min-height: 100vh;        /* Purpose: at least full viewport height */
  display: flex;            /* Purpose: sticky footer layout lives here */
  flex-direction: column;   /* Purpose: header, main, footer stack */

  /* Purpose: full-page forest background */
  background:
    linear-gradient(180deg, rgba(28, 57, 66, 0.55), rgba(28, 57, 66, 0.30)),
    url("/assets/img/forest-hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Purpose: allow background to extend with content on mobile */
  background-attachment: scroll;
}

/* Purpose: footer sits at bottom on short pages */
.page-bg main {
  flex: 1;
}

/* Desktop enhancement only */
@media (min-width: 901px) {
  .page-bg { background-attachment: fixed; }
}


/* -----------------------------
   Hero (Landing Section)
   Purpose: forest vibe using CSS gradients only.
----------------------------- */
.hero {
  /* Purpose: layered gradients mimic a forest atmosphere */
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(133, 159, 132, 0.55), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(214, 159, 75, 0.35), transparent 55%),
    linear-gradient(180deg, rgba(28, 57, 66, 0.10), rgba(28, 57, 66, 0.02));
  padding: var(--space-6) 0;
}

/* Purpose: inner cards (match hero style, but slightly separated) */
.hero-card {
  background: rgba(28, 57, 66, 0.60);
  border: 1px solid rgba(208, 212, 182, 0.18);
  border-radius: var(--radius);
  padding: var(--space-5);
}

.hero h1 {
  /* Purpose: modern headline */
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.1;
  margin: 0 0 var(--space-3) 0;
}

.hero p {
  /* Purpose: comfortable lead text */
  font-size: 18px;
  margin: 0 0 var(--space-4) 0;
  max-width: 70ch;
}

/* -----------------------------
   Buttons
   Purpose: reusable button styles.
----------------------------- */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.btn,
button {
  /* Purpose: base button styling for links and buttons */
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: transform var(--ease), background var(--ease), border-color var(--ease);
   cursor: pointer;
  text-align: center; 
}


.btn:hover {
  /* Purpose: subtle interactive feedback */
  transform: translateY(-1px);
}

.btn-primary {
  /* Purpose: member action emphasis */
  background: var(--color-base);
  color: var(--color-light);
}

.btn-primary:hover {
  /* Purpose: soften hover */
  background: rgba(28, 57, 66, 0.90);
}

.btn-secondary {
  /* Purpose: neutral action — solid mid-grey, visible on any background */
  background: #A8A89A;
  color: #1C3942;
  border-color: #8C8C80;
}

.btn-secondary:hover {
  background: #8C8C80;
  color: #fff;
}

.btn-accent {
  background: rgba(214, 159, 75, 0.85); 
  color: #1C3942;                        
  border: 1px solid rgba(214, 159, 75, 0.95);
  box-shadow: 0 4px 14px rgba(214, 159, 75, 0.25);
}

.btn-accent:hover {
  background: rgba(214, 159, 75, 0.95);  /* Slightly richer on hover */
}

/* -----------------------------
   Content Blocks
   Purpose: simple readable sections.
----------------------------- */
.section {
  padding: var(--space-6) 0;
}

.card-grid {
  /* Purpose: responsive cards without complex breakpoints */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.card {
  /* Purpose: reusable card */
  background: var(--color-light);
  border: 1px solid rgba(28, 57, 66, 0.12);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.card h2 {
  margin: 0 0 var(--space-2) 0;
  font-size: 18px;
}

.card p {
  margin: 0;
}

/* -----------------------------
   Footer
   Purpose:
   - Match hero style (dark translucent)
   - Stay readable over forest background
----------------------------- */
.site-footer {
  background: rgba(28, 57, 66, 0.65); 
  padding: 0;

  /* Purpose: improve readability and keep it above background */
  color: var(--color-light);
  backdrop-filter: blur(6px);
}

.site-footer a {
  /* Purpose: links readable on dark footer */
  color: var(--color-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer a:hover {
  /* Purpose: subtle hover emphasis */
  color: var(--color-light);
}

.small {
  /* Purpose: footer and helper text */
  font-size: 14px;
  opacity: 0.92;
}



/* -----------------------------
   Hero Background Image
   Purpose:
   - Full-width forest image for modern visual impact
   - Overlay ensures text remains readable
----------------------------- */
.hero-image {
  /* Purpose: image + overlay gradients for readability */
  background:
    linear-gradient(180deg, rgba(28, 57, 66, 0.78), rgba(28, 57, 66, 0.35)),
    radial-gradient(900px 500px at 20% 10%, rgba(133, 159, 132, 0.45), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(214, 159, 75, 0.25), transparent 55%),
    url("/assets/img/forest-hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Purpose: vertical breathing room */
  padding: 72px 0;
}

/* -----------------------------
   Hero Layout Enhancements
   Purpose:
   - Make landing page feel broader, modern, and sectioned
----------------------------- */
.hero-lead {
  /* Purpose: readable headline block width */
  max-width: 70ch;
  color: var(--color-light);
}

.hero-lead h1 {
  /* Purpose: bigger, modern headline on image */
  margin: 0 0 var(--space-3) 0;
  font-size: 44px;
  line-height: 1.05;
}

.hero-lead p {
  /* Purpose: readable intro on image */
  margin: 0;
  font-size: 18px;
  opacity: 0.95;
}




/* Purpose: make all hero text readable on dark panel */
.home-hero-panel,
.home-hero-panel .home-hero-title,
.home-hero-panel .home-hero-text,
.home-hero-panel .small {
  color: var(--color-light);
}

.home-hero {
  display: flex;
  align-items: center;
  padding: 40px 0 20px 0;      
}

/* -----------------------------
   Home Hero Split Panel
   Purpose:
   - Split hero into 2 cards: logo + intro text
   - Keep modern feel while reusing existing styling
----------------------------- */
.home-hero-panel {
  background: rgba(28, 57, 66, 0.55);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  backdrop-filter: blur(6px);
   max-width: var(--max-width);
}


/* Purpose: two-card layout inside hero panel */
.home-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr; /* logo card | text card */
  gap: var(--space-4);
  align-items: stretch;
}

/* Purpose: logo card centers and lets logo fill space */
.hero-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  Background: transparent;
    border: none;
}

/* Purpose: allow logo to dominate its card */
.hero-logo-big {
  width: 100%;
  height: auto;
  max-height: 320px;    /* Allows taller presence */
  object-fit: contain;
}


/* Purpose: text card layout */
.hero-text-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
    box-shadow: var(--shadow);
}

/* Purpose: “catchy” small label above headline */
.hero-kicker {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 12px;
  color: rgba(208, 212, 182, 0.92);
  margin: 0 0 var(--space-2) 0;
}

/* Purpose: big headline (eye-catching, readable on dark bg) */
.hero-headline {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--color-accent-1);
  font-size: 44px;
  line-height: 1.05;
  margin: 0 0 var(--space-3) 0;
}

/* Purpose: highlight a word/phrase for “fun” visual interest */
.spark {
  color: var(--color-accent-2);
  text-shadow: 0 6px 18px rgba(214, 159, 75, 0.15);
}

/* Purpose: intro paragraph styling */
.hero-intro {
  color: rgba(208, 212, 182, 0.95);
  font-size: 17px;
  margin: 0;
  max-width: 70ch;
}

/* Purpose: keep buttons aligned nicely */
.hero-actions {
  margin-top: var(--space-2);
}

/* -----------------------------
   Responsive: stack on mobile
----------------------------- */
@media (max-width: 900px) {
  .home-hero-grid {
    grid-template-columns: 1fr; /* stack logo then text */
  }

  .hero-headline {
    font-size: 38px;
  }

  .hero-logo-big {
    max-width: 300px;
    max-height: 240px;
  }
}

@media (max-width: 600px) {
  .home-hero-panel {
    padding: var(--space-4);
  }

  .hero-card {
    padding: var(--space-4);
  }

  .hero-headline {
    font-size: 32px;
  }

  .hero-intro {
    font-size: 16px;
  }
}




/* -----------------------------
   Split Decision Section
   Purpose:
   - Two clear paths: New to CHL vs Members
----------------------------- */
.split {
  /* Purpose: broader separation section */
  padding: var(--space-6) 0;
}


.split-grid {
  /* Purpose: responsive two-column layout */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.split-card {
  /* Purpose: modern card feel with strong separation */
  background: var(--color-light);
  border: 1px solid rgba(28, 57, 66, 0.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}

.split-card h2 {
  margin: 0 0 var(--space-2) 0;
  font-size: 22px;
}

.split-card p {
  margin: 0 0 var(--space-4) 0;
  /* max-width: 70ch; */
}

/* Purpose: subtle label styling for clarity */
.kicker {
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: var(--space-2);
}

/* -----------------------------
   Section Divider Band
   Purpose:
   - Creates modern "band" separation between sections
----------------------------- */
.band {
  background: rgba(28, 57, 66, 0.06);
  border-top: 1px solid rgba(28, 57, 66, 0.10);
  border-bottom: 1px solid rgba(28, 57, 66, 0.10);
}


/* =========================================================
   Responsive Styles
   Purpose:
   - Make site mobile/tablet friendly without JavaScript
   - Improve readability, spacing, and navigation wrapping
   ========================================================= */

/* -----------------------------
   Inputs: Make form controls consistent and responsive
   Purpose: avoid tiny inputs on mobile; keep them full width
----------------------------- */
input, textarea, select, button {
  font: inherit; /* Purpose: ensure form controls use site font */
}

input, textarea, select {
  width: 100%; /* Purpose: full-width controls on smaller screens */
  max-width: 100%;
}

/* -----------------------------
   Forms
   Purpose:
   - Consistent form styling inside dark panels
----------------------------- */
.form {
  margin-top: var(--space-3);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form-field label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  color: rgba(208, 212, 182, 0.95);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  max-width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(208, 212, 182, 0.18);
  background: rgba(28, 57, 66, 0.55);
  color: var(--color-light);
  outline: none;
}

.form-field textarea {
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: rgba(214, 159, 75, 0.60);
  box-shadow: 0 0 0 3px rgba(214, 159, 75, 0.18);
}

.form-field-full {
  grid-column: 1 / -1;
}

/* Purpose: show errors clearly but on-brand */
.form-alert {
  background: rgba(214, 159, 75, 0.12);
  border: 1px solid rgba(214, 159, 75, 0.35);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-top: var(--space-3);
  color: var(--color-light);
}

.form-alert ul {
  margin: 8px 0 0 18px;
}

/* Honeypot field hidden from humans */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mobile: stack fields */
@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}


/* -----------------------------
   Header / Navigation Responsiveness
   Purpose:
   - Allow nav to wrap under logo on smaller screens
   - Prevent horizontal scrolling
----------------------------- */

.nav {
  display: flex;              /* Purpose: keep links in a row when possible */
  flex-wrap: wrap;            /* Purpose: wrap links to next line on small screens */
  gap: 8px;                   /* Purpose: spacing between nav items when wrapped */
  justify-content: flex-end;  /* Purpose: align nav to right on wider screens */
}


/* -----------------------------
   Button Row Responsiveness
   Purpose:
   - On small screens, stack buttons vertically
   - Make buttons easier to tap
----------------------------- */
.button-row {
  align-items: stretch; /* Purpose: makes full-width buttons look consistent */
}


/* -----------------------------
   Hero Image Responsiveness
   Purpose:
   - Reduce padding on mobile so hero doesn't feel huge
   - Keep text readable and sized appropriately
----------------------------- */
.hero-image {
  padding: 56px 0; /* Purpose: slightly smaller default hero height */
}

.hero-lead h1 {
  font-size: 40px; /* Purpose: good desktop default */
}

/* -----------------------------
   Card / Grid Responsiveness
   Purpose:
   - Reduce padding slightly on small screens
----------------------------- */


/* -----------------------------
   Hero Header (Logo + Title)
   Purpose:
   - Display logo prominently beside site name
   - Stack cleanly on mobile
----------------------------- */
.hero-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

/* Purpose: large logo for branding impact */
.hero-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Purpose: allow text block to scale naturally */
.hero-text {
  max-width: 70ch;
}

/* -----------------------------
   Taller Hero Banner
   Purpose:
   - Show more of forest image
   - Modern, immersive landing feel
----------------------------- */
.hero-image {
  min-height: 75vh;     /* Purpose: tall hero without forcing full screen */
  display: flex;
  align-items: center;  /* Purpose: vertically center content */
  padding: 96px 0;      /* Purpose: generous spacing on large screens */
}

/* =========================================================
   Responsive Adjustments
========================================================= */

/* Tablet */
@media (max-width: 900px) {
  .hero-logo {
    width: 96px;
    height: 96px;
  }

  .hero-image {
    min-height: 65vh;
    padding: 72px 0;
  }
}


/* Mobile */
@media (max-width: 600px) {
  .hero-header {
    /* Purpose: stack logo above text on mobile */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .hero-logo {
    width: 84px;
    height: 84px;
  }

  .hero-image {
    min-height: 55vh;
    padding: 56px 0;
  }
}


@media (min-width: 1200px) {
  .hero-lead h1 {
    font-size: 48px;
  }
}

/* -----------------------------
   Page Title
   Purpose:
   - Consistent page heading style on internal public pages
----------------------------- */
.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-accent-1); 
  margin: 0 0 var(--space-4) 0;
  text-transform: uppercase;
}

/* -----------------------------
   Content Panels
   Purpose:
   - Reuse home-hero-panel appearance for stacked page sections
   - Adds consistent spacing and readable typography
----------------------------- */
.content-panel {
  /* Purpose: spacing between each about section */
  margin-bottom: var(--space-5);
}

/* Purpose: tighten headings inside panels for clean rhythm */
.content-panel h2 {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

/* Purpose: readable paragraph spacing inside panels */
.content-panel p {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.content-panel p:last-child {
  margin-bottom: 0;
}