/* =========================================================
   Global
   ========================================================= */
:root{
  --bg:#0f172a; --panel:#111827; --text:#e5e7eb; --muted:#9ca3af;
  --brand:#22d3ee; --brand-600:#075985;
  --card:#1f2937; --border:#374151; --shadow:0 8px 20px rgba(0,0,0,.30);
  color-scheme: dark;
}

*{ box-sizing:border-box }

html, body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45; height:100%;
}

body{ min-height:100vh; display:flex; flex-direction:column }
main{ flex:1 0 auto }

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

.container{ max-width:1100px; margin-inline:auto; padding:0 .9rem }

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header{
  position: sticky; top:0;
  background:rgba(15,23,42,.92);
  border-bottom:1px solid var(--border);
  z-index:9000;
}

.nav-container{
  display:flex; align-items:center; gap:.75rem; min-height:64px;
}

.brand .brand-text{
  font-weight:800; letter-spacing:.3px; white-space:nowrap; font-size:1rem;
}

/* Desktop row uses FLEX with even gap (your original spacing) */
.nav{ margin-left:auto; }
.menu{
  list-style:none; display:flex; gap:.25rem; margin:0; padding:0; align-items:center;
}

/* Keep the menu layer above any page banners */
.nav .menu{ position:relative; z-index:1; }

/* Each top-level tab is its own stacking context (prevents neighbour overlap) */
.menu > .menu-item{
  position:relative;
  isolation:isolate;         /* stops neighbour dropdown covering this tab */
  min-width:0;
}

/* Triggers always clickable above any dropdown */
.menu-item > .submenu-trigger{
  display:block; padding:.75rem .9rem; border-radius:.5rem;
  position:relative; z-index:2;
  background:none; border:0; color:inherit; font:inherit; cursor:pointer;
}

/* Plain links (no submenu) use same padding */
.menu-item > a{
  display:block; padding:.75rem .9rem; border-radius:.5rem;
}

/* Link colors / active */
.nav a, .menu-item > .submenu-trigger{ color: var(--brand); }
.menu-item.active > a,
.menu-item.active > .submenu-trigger{
  background: var(--brand-600); color:#fff;
}

/* ---- Submenu: single source of truth (CLICK-ONLY) ---- */
.nav .submenu{
  position:absolute;
  top:calc(100% + .2rem);
  left:0;                    /* anchor under its own tab */
  min-width:220px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:.75rem;
  box-shadow:var(--shadow);
  padding:.25rem;
  list-style:none;

  /* hidden by default; cannot intercept clicks */
  display:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;

  z-index:1;                 /* below trigger (z=2) */
}

/* Open state — JS toggles [data-open] on the LI */
.nav .menu-item[data-open="true"] > .submenu{
  display:flex !important;
  flex-direction:column;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

/* Disable hover-open completely (prevents overlap while moving across bar) 
.menu-item.has-submenu:hover > .submenu,
.menu-item.has-submenu:focus-within > .submenu{
  display:none !important;
}*/

/* Don't let hover open anything, but don't close a menu that's been opened via JS */
.menu-item.has-submenu:hover:not([data-open="true"]) > .submenu{
  display: none !important;
}
/* NOTE: no :focus-within here */


/* If any submenu uses [hidden] in HTML, keep it closed unless JS removes it */
.submenu[hidden]{ display:none !important; }

.submenu li a{ padding:.5rem .65rem; border-radius:.5rem; display:block }
.nav .submenu a{ color: var(--brand); }

/* Hover/focus visuals */
.nav a:hover,
.nav a:focus-visible,
.menu-item > .submenu-trigger:hover,
.menu-item > .submenu-trigger:focus-visible{
  background: var(--panel);
  text-decoration:none;
}
.submenu-trigger:focus-visible{ outline:2px solid var(--brand); outline-offset:2px }

/* Hamburger (hidden on desktop by default) */
.nav-toggle{
  margin-left:auto;
  display:none;
  background:none;
  border:1px solid var(--border);
  color:var(--text);
  padding:.3rem .5rem;
  border-radius:.4rem;
  cursor:pointer;
  font-size:0.95rem;
}
@media (min-width:901px){ .nav-toggle{ display:none; } }

/* =========================================================
   Sections / Cards
   ========================================================= */
.section{ padding:2rem 0 }
.card{
  background:var(--card); border:1px solid var(--border); border-radius:.8rem;
  padding:1rem; box-shadow:var(--shadow); margin:1rem 0;
}

/* =========================================================
   Grids
   ========================================================= */
.grid.two{ display:grid; grid-template-columns:1.1fr .9fr; gap:.9rem }
@media (max-width:900px){ .grid.two{ grid-template-columns:1fr } }

/* =========================================================
   People
   ========================================================= */
.people-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem }
@media (max-width:1000px){ .people-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .people-grid{ grid-template-columns:1fr } }
.person-card img{ width:100%; aspect-ratio:1/1; object-fit:cover }
.person-info{ padding:.7rem }

/* =========================================================
   Gallery
   ========================================================= */
.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1rem; justify-items:center;
}
@media (max-width:900px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-item{ text-align:center; }
.gallery-item img{
  width:100%; max-width:320px; aspect-ratio:4 / 3; object-fit:cover;
  border-radius:.5rem; border:1px solid var(--border); box-shadow:var(--shadow); display:block;
}
.gallery-item figcaption{ margin-top:.4rem; color:var(--muted); font-size:.9rem; }

/* =========================================================
   Lists
   ========================================================= */
.arrow-list{ list-style:none; padding:0; margin:0 }
.arrow-list li{ padding:.35rem 0 }
.arrow-list li a{ display:inline-flex; gap:.45rem; align-items:center }
.arrow-list li a::before { content:"\279E"; opacity:.85 } /* Heavy Rightwards Arrow */

/* File list */
.file-list{ list-style:none; padding-left:1rem; margin:0 }
.file-list li{ padding:.35rem 0; border-bottom:1px dashed var(--border) }

/* =========================================================
   Buttons / Forms
   ========================================================= */
.btn{
  display:inline-block; background:var(--brand); color:#001b22; font-weight:700;
  padding:.55rem .85rem; border-radius:.5rem; border:0; box-shadow:var(--shadow); font-size:.95rem;
}
.btn:hover{ text-decoration:none; filter:saturate(115%) }
.btn.btn-secondary{ background:transparent; border:1px solid var(--border); color:var(--text) }
.btn.btn-secondary:hover{ background:var(--panel); text-decoration:none }

.form{ max-width:720px }
.form-row{ display:flex; flex-direction:column; margin-bottom:.85rem }
label{ font-weight:600; margin-bottom:.25rem }
input, textarea, select{
  background:var(--panel); color:var(--text);
  border:1px solid var(--border); border-radius:.5rem; padding:.6rem; width:100%;
}
input:focus, textarea:focus{ outline:2px solid var(--brand); outline-offset:2px }
.hint{ color:var(--muted); font-size:.85rem }

/* Back button row */
.back-row{ margin:.25rem 0 1rem; display:flex; align-items:center }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ border-top:1px solid var(--border); padding:1rem 0; margin-top:1rem }
.footer-legal{ text-align:center; color:var(--muted); font-size:.92rem; }
.footer-legal .org-name{ color:var(--text); font-weight:700; margin:0 0 .1rem; }
.footer-legal .org-meta, .footer-legal .org-address{ margin:.1rem 0; }
.footer-legal .legal{ margin:.1rem 0 0; }
.footer-legal a{ font-weight:600; }

/* =========================================================
   Accessibility
   ========================================================= */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px }
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:.5rem; width:auto; height:auto; z-index:9999;
  background:var(--panel); color:var(--text);
  border:2px solid var(--brand-600); padding:.35rem .55rem; border-radius:.4rem; box-shadow:var(--shadow);
  text-decoration:none;
}
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   Hero banner
   ========================================================= */
.hero{
  position: relative; min-height: 360px;
  background: url('../images/forest-hero.jpg') center/cover no-repeat;
  margin: 0 0 1rem; border-bottom: 1px solid var(--border);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.6));
}
.hero .hero-inner{
  position: relative; z-index: 1; min-height: inherit;
  display: flex; align-items: flex-end; padding: 2.5rem 0;
}
.hero h1{ margin: 0; font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.hero .lead{ margin: .4rem 0 0; color: var(--text); }
@media (max-width: 560px){ .hero{ min-height: 240px; } }

/* =========================================================
   Background images by page
   ========================================================= */
.home-bg{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url('../images/IMG_8781.jpg');
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment: fixed;
}
.about-bg{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url('../images/IMG_8783.jpg');
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment: fixed;
}
.directors-bg{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url('../images/IMG_8770.jpg');
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment: fixed;
}
.what-we-do-bg{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url('../images/IMG_8758.jpg');
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment: fixed;
}
.news-bg{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url('../images/IMG_8787.jpg');
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment: fixed;
}
.documents-bg{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url('../images/IMG_8768.jpg');
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment: fixed;
}
.minutes-bg{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url('../images/IMG_8788.jpg');
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment: fixed;
}
.newsletters-bg{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url('../images/IMG_8790.jpg');
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment: fixed;
}
.formation-bg{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url('../images/IMG_8771.jpg');
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment: fixed;
}
.articles-of-association-bg{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url('../images/IMG_8786.jpg');
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment: fixed;
}
.reports-accounts-bg{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url('../images/IMG_8780.jpg');
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment: fixed;
}
.privacy-policy-bg{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url('../images/IMG_8784.jpg');
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment: fixed;
}
.contact-bg{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url('../images/IMG_8776.jpg');
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment: fixed;
}


/* =========================================================
   Mobile navigation (simple)
   ========================================================= */
@media (max-width: 900px){
  :root{ --header-h: 64px }

  .nav-container{
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items:center; gap:.75rem;
    min-height: var(--header-h);
  }

  .brand{ min-width:0; }
  .brand .brand-text{
    margin:0;
    font-size: clamp(1rem, 4.2vw, 1.25rem);
    line-height:1.15;
    white-space:normal;
    overflow-wrap:anywhere; word-break:break-word;
    text-wrap:balance;
    display:block;
  }

  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    padding:.45rem .7rem; font-size:1.15rem; border-radius:.5rem;
    margin-left:0; justify-self:end; position:relative; z-index:71;
  }

  .nav{
    position:fixed; top: var(--header-h); left:0; right:0;
    background:rgba(15,23,42,.98);
    border-bottom:1px solid var(--border);
    display:none; z-index:60;
  }
  .nav.open{ display:block; }

  .menu{
    display:flex; flex-direction:column; align-items:stretch;
    gap:.25rem; padding:.5rem;
  }
  .menu-item > a, .menu-item > .submenu-trigger{ padding:.9rem 1rem; }

  /* Mobile: closed by default, open when [data-open] */
  .menu-item.has-submenu > .submenu{ display:none !important; }
  .menu-item[data-open="true"] > .submenu{ display:block !important; }

  .mobile-only-notice{ display:none; }

  #contact-form{ scroll-margin-top: calc(var(--header-h) + 16px); }
  .site-header{ padding-right: env(safe-area-inset-right); }
}

/* =========================================================
   Lightbox (gallery)
   ========================================================= */
.lightbox {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  justify-content: center; align-items: center;
  z-index: 100;
}
.lightbox:target { display: flex; }

/* FINAL AUTHORITY: click-to-open submenus */
.menu-item.has-submenu > .submenu { display: none; }            /* default closed */
.menu-item[data-open="true"] > .submenu {                        /* open when JS toggles */
  display: flex !important;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

/* Do NOT auto-close on focus; hover must not suppress open state */
.menu-item.has-submenu:hover > .submenu,
.menu-item.has-submenu:focus-within > .submenu {
  /* no rules here */
}
/* Keep footer transparent so the page background shows through */
.site-footer { background: transparent !important; }
.footer-legal { background: transparent !important; }

/* Force the Contact page to show the background image behind the footer */
body.contact-bg .site-footer,
body.contact-bg .site-footer::before,
body.contact-bg .site-footer::after,
body.contact-bg .footer-legal,
body.contact-bg .footer-legal::before,
body.contact-bg .footer-legal::after {
  background: transparent !important;
}

/* Belt-and-braces: ensure common wrappers on Contact don't paint a background */
body.contact-bg .container,
body.contact-bg .section {
  background: transparent !important;
}

/* ===== FIX: Contact page blue background covering footer ===== */
body.contact-bg {
  background-color: transparent !important;   /* remove dark body color */
}

body.contact-bg main,
body.contact-bg .section,
body.contact-bg .container,
body.contact-bg .site-footer,
body.contact-bg .footer-legal {
  background: transparent !important;
}

/* Let the page background show all the way down, especially on Contact */
html { background: transparent !important; }          /* stop the blue at the root */
body.contact-bg { background-color: transparent !important; } /* no solid fill on Contact */