/* ============================================================
       2. FUNCTIONAL STYLES & VARIABLES
       ============================================================ */
    :root {
      --black: #111;
      --charcoal: #2B2B2B;
      --ackee-red: #B34100;
      --leaf-green: #ABB93D;
      --dusty-shadow: #4D7C6F;
      --soft-ivory: #FCF8EF;
      --bg-sand: #F5EFE2;
    }

    body {
      margin: 0;
      font-family: 'Lato', sans-serif;
      background: #f9f9f9;
      color: var(--charcoal);
      padding-top: 60px; /* Offset for the fixed header */
      overflow-x: hidden; /* Prevents horizontal scrolling */
    }

    /* ============================================================
       3. HEADER & NAVIGATION PORTION (Mobile Friendly)
       ============================================================ */
    .header-hybrid { 
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1050;
      background-color: var(--charcoal);
      border-bottom: 4px solid var(--ackee-red);
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    
    .header-hybrid-inner {
      display: flex; 
      align-items: center; 
      justify-content: space-between; 
      padding: 10px 15px;
    }

    .header-title { 
      font-family: 'Montserrat', sans-serif; 
      font-weight: 300; 
      letter-spacing: 2px; 
      text-transform: uppercase; 
      margin: 0; 
      font-size: 20px; 
    }

    .header-title a { color: white; text-decoration: none; }
    
    .nav-links {
      display: flex;
      gap: 20px;
      list-style: none;
      margin: 0;
      padding: 0;
      align-items: center;
    }
    
    .nav-links a {
      color: white;
      text-decoration: none;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .nav-select select {
      background-color: transparent;
      color: white;
      border: 1px solid var(text-slate);
      border-radius: 4px;
      padding: 5px 10px;
      font-size: 13px;
      text-transform: uppercase;
      cursor: pointer;
    }
    
    .nav-select select option { background-color: var(--charcoal); color: white; }

    /* Mobile Slide-Out Menu */
    .mobile-menu {
      position: fixed;
      top: 0;
      right: -100%;
      width: 280px;
      height: 100%;
      background: #111;
      padding: 60px 20px;
      transition: .3s ease;
      z-index: 1040;
      overflow-y: auto; /* Allows scrolling if menu gets too long */
    }
    .mobile-menu.active { right: 0; }
    .mobile-menu a {
      display: block;
      color: white;
      padding: 12px 0;
      text-decoration: none;
      border-bottom: 1px solid #222;
      text-transform: uppercase;
      font-size: 14px;
    }

    /* ============================================================
       4. HERO PORTION (Hidden on small screens)
       ============================================================ */
    .hero {
      width: 100%;
      min-height: 280px;
      background: url('../images/ferngully-300px.jpg') center/cover no-repeat;
      display: flex;
      align-items: flex-end;
      padding: 60px 20px;
      position: relative;
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,0) 70%);
    }
    .hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: auto; width: 100%; }
    .hero-title {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.95);
      margin: 0;
    }
    .hero-sub {
      margin-top: 14px; 
      padding-top: 10px; 
      border-top: 1px solid var(--ackee-red); 
      display: inline-block; 
      color: white; 
      letter-spacing: .18em; 
      font-size: 1.25rem; 
      text-transform: uppercase;
    }

    /* ============================================================
       5. BODY & MAP FRAMEWORK STYLES
       ============================================================ */
    .froots-main-wrapper {
      display: block; 
      width: 100%;
      position: relative;
    }
    
    /* Mobile-First Map Layout (Fixed to top half) */
    .map-sidebar {
      position: fixed; 
      top: 60px; 
      left: 0;
      width: 100%;
      height: 45vh; 
      background-color: var(--bg-sand);
      padding: 10px;
      z-index: 10; 
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .custom-legend {
      background-color: var(--bg-sand);
      border: 1px solid var(--charcoal);
      border-bottom: none;
      padding: 10px;
      border-radius: 8px 8px 0 0;
    }
    #map { width: 100%; flex-grow: 1; border: 1px solid var(--charcoal); border-radius: 0 0 8px 8px; }

    /* Mobile-First Content Layout (Scrolls underneath map) */
    .content-column {
      background-color: white;
      padding: 20px;
      margin-top: 45vh; 
      padding-bottom: 60px; 
      min-height: 100vh;
      position: relative;
      z-index: 5;
    }
    .narrative-container {
      max-width: 800px; /* Readability clamp */
      margin: 0 auto;
    }

    /* Desktop Framework Overrides (50/50 Split) */
    @media (min-width: 992px) {
      .froots-main-wrapper { 
        display: grid; 
        grid-template-columns: minmax(0, 50%) minmax(0, 50%); 
      }
      .map-sidebar {
        position: -webkit-sticky;
        position: sticky; 
        top: 60px; 
        height: calc(100vh - 60px); 
        width: 100%; 
        order: 2; 
        padding: 20px;
        box-shadow: none;
        z-index: 1;
      }
      .content-column { 
        order: 1; 
        margin-top: 0; 
        padding: 40px; 
      }
    }

    /* Body Text Utilities */
    .map-link {
      color: var(--ackee-red);
      font-weight: bold;
      cursor: pointer;
      border-bottom: 1px dashed var(--ackee-red);
    }
    .map-link:hover { color: var(--charcoal); border-bottom: 1px solid var(--charcoal); }
    /* Force the desktop menu to hide and hamburger to show on small screens */
    @media (max-width: 767px) {
      .nav-group { display: none !important; }
      .nav-toggle { display: inline-block !important; }
    }
    
    /* Ensure the desktop menu shows and hamburger hides on large screens */
    @media (min-width: 768px) {
      .nav-group { display: flex !important; }
      .nav-toggle { display: none !important; }
    }