/* ==============================
   RESET STYLES & VARIABLES
   ============================== */
/*@import url('reset.css');*/
/* Reset is being enqueued using fuctions.php */

:root {
  --nav-height: 80px;
/*    --nav-current-height: var(--nav-height);*/

  --container-max: 900px;
  --container-padding-inline: 2rem;


  --font-nav: quasimoda, sans-serif;
  --font-primary: all-round-gothic, sans-serif;
  --font-heading: all-round-gothic, sans-serif;
  --font-accent: look-script, serif;

  --font-weight-regular: 400;
  --font-weight-bold: 600;

/* Let's split our hsa colors into individual h/s/l so that we can use alpha transparency */

/* Primary color hex color = #728156 */
  --primary-h: 80;
  --primary-s: 20%;
  --primary-l: 42%;
  --primary-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-color-dark: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) * 0.5));

  /* Secondary color hex color = #c0b291 */
  --secondary-h: 43;
  --secondary-s: 34%;
  --secondary-l: 84%;
  --secondary-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
  --secondary-color-dark: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) * 0.5));

  /* Tertiary color hex color = # */
  --tertiary-h: ;
  --tertiary-s: ;
  --tertiary-l: ;
  --tertiary-color: hsl(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l));
  --tertiary-color-dark: hsl(var(--tertiary-h), var(--tertiary-s), calc(var(--tertiary-l) * 0.5));

  /* Netural dark hex color = #1d1d1b */
  --neutral-dark-h: 60;
  --neutral-dark-s: 4%;
  --neutral-dark-l: 11%;
  --neutral-dark: hsl(var(--neutral-dark-h), var(--neutral-dark-s), var(--neutral-dark-l));
  
  /* Neutral light hex color = #eeede8*/
  --neutral-light-h: 50;
  --neutral-light-s: 15%;
  --neutral-light-l: 92%;
  --neutral-light: hsl(var(--neutral-light-h), var(--neutral-light-s), var(--neutral-light-l));

  /* Warm light hex color = #fff8e6*/
  --warm-light-h: 43;
  --warm-light-s: 100%;
  --warm-light-l: 95%;
  --warm-light: hsl(var(--warm-light-h), var(--warm-light-s), var(--warm-light-l));
}



/* ==============================
   TEMPORARY DEBUGGING
   ============================== */

/* SWITCHER for easy testing of nav version - overlay/full width/dropdown etc */
.nav-switcher {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  gap: .5rem;
  z-index: 10000;
  display:none;
  
}
.nav-switcher button {
  padding: .4rem .7rem;
  cursor: pointer;
}

/* COLOR PICKER – collapsible widget */
.color-controls {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
  font-family: monospace;
	display: none;
}

.color-controls__handle {
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}
.color-controls__handle:hover {
  transform: scale(1.05);
}
.color-controls__icon {
  font-size: 28px;
}

.color-controls__panel {
  position: relative;
  display: none;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  min-width: 260px;
  min-height: 280px;
  max-width: 90vw;
  max-height: 80vh;
  flex-direction: column;
  overflow: hidden;
}
.color-controls.expanded .color-controls__panel {
  display: flex;
}
.color-controls.expanded .color-controls__handle {
  display: none;
}

.color-controls__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1rem 0 1rem;
  flex-shrink: 0;
}
.color-controls__header h4 {
  margin: 0;
}
.color-controls__close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 0 8px;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  scrollbar-width: thin;
}
/* Optional: hide scrollbar completely (uncomment if you want no visible bar) */
/* .panel-content::-webkit-scrollbar { display: none; } */

.color-controls label {
  display: block;
  margin-bottom: 0.75rem;
}
.color-controls input[type="range"] {
  width: 100%;
}
.color-controls__section {
  border-bottom: 1px solid #eee;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}
.color-controls__section:last-of-type {
  border-bottom: none;
}
.color-controls__preview {
  display: flex;
  gap: 1rem;
  justify-content: space-around;
  margin: 1rem 0;
}
.preview-item {
  text-align: center;
  font-size: 0.75rem;
}
.color-swatch {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 4px;
}
.color-controls__reset {
  width: 100%;
  padding: 0.5rem;
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
}
.color-controls__reset:hover {
  background: #e0e0e0;
}

.resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.3) 50%);
  cursor: nw-resize;
  z-index: 10;
  border-bottom-right-radius: 12px;
}
.resize-handle:hover {
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.6) 50%);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .color-controls__panel {
    width: 90vw !important;
    height: auto !important;
    max-height: 85vh;
    left: 5vw;
    right: 5vw;
    bottom: 10vh;

    width: 50vw !important;
    height: auto !important;
    max-height: 50vh;
    left: 1vw;
    bottom: 1vh;
  }
  .resize-handle {
    display: none;
  }
  .color-controls {
    bottom: 10px;
    right: 10px;
  }
}
/* ==============================
   ============================== */



   
/* ==============================
   GLOBAL & TYPOGRAPHY
   ============================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: sans-serif;
  background-color: var(--neutral-light);
}
h1, h2, h3, h4 {
  line-height: 1em;
}
p, h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
}
/* General paragraph spacing */
p + p {
  margin-top: 1.5rem;
}
.lead {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
}
/* Optional: responsive adjustment */
@media (max-width: 768px) {
  .lead {
    font-size: 1.2rem;
  }
}


/* ----------------------------------------------- */
/* --------------ACCESSIBILITY-------------------- */
/* ----------------------------------------------- */

/* Visible focus for keyboard navigation */
:focus-visible {
    outline: 3px solid #2266ff;
    outline-offset: 3px;
    /*border-radius: 2px;*/
}

/* Mouse/pointer focus – remove outline but keep a subtle style if needed */
:focus:not(:focus-visible) {
  outline: none;
}

/* Fallback for older browsers */
:focus {
    outline: 3px solid #2266ff;
    outline-offset: 3px;
}

/* Never do outline: none without replacement */

.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 9999;
}
.skip-to-content:focus {
    top: 0;
}

/* ----------------------------------------------- */
/* --------------END ACCESSIBILITY---------------- */
/* ----------------------------------------------- */


/* Text color utilities */
.text-light {
  color: var(--neutral-light);
}
.text-dark {
  color: var(--neutral-dark);
}
.text-primary {
  color: var(--primary-color);
}
.text-primary-dark {
  color: var(--primary-color-dark);
  color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) * 0.7));

}
.text-secondary {
  color: var(--secondary-color);
}






/* =========================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
   HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER 
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================ */


/* ==============================
   SITE HEADER (scroll behaviour)
   ============================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2000;
  will-change: transform;
  transition: background 0.35s ease, backdrop-filter 0.35s ease;
}
.site-header.scrolled {
  background: var(--primary-color);
  backdrop-filter: blur(10px);
}

.site-header.scrolled .logo svg > * {
  fill: var(--neutral-light);
}


/* --------------------------
   MOBILE LOGO OVERRIDE 
   ------------------------ */
    /* If our mobile menu has no sublinks and will
  not require the user to scroll the menu, we can
  use the main logo instead of inserting a mobile
  menu specific logo
  */
  /* Keep logo visible during mobile menu close */
  .use-main-logo-on-mobile .site-header.menu-open .nav-logo {
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .use-main-logo-on-mobile .site-header.menu-open .nav-logo * {
    fill: var(--neutral-light);
  }

  .use-main-logo-on-mobile .logo.mobile-menu-logo {display: none;}
  .use-main-logo-on-mobile .mobile-menu-header {}



/* ==============================
   NAV BASE (inside header)
   ============================== */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: 0 2rem;
  background: transparent;
  color: white;
  transition: height 0.2s ease;
  font-family: var(--font-nav);
  font-weight: var(--font-weight-regular);
}
.nav-logo {
  display: flex;
  width: 20vw;
  height: auto;
  margin: 0;
  max-width: 300px;
  min-width: 200px;
  margin-right: 2em;
  transition: width 0.2s ease, max-width 0.2s ease;
}
/* SVG logo animations */
.nav-logo .logo-icon {
  transform-origin: bottom left;
  animation: growTree 1.2s ease-out forwards;
  fill: var(--neutral-light);
}
.nav-logo .logo-name {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
  animation-delay: 1s;
  fill: var(--primary-color);
  transition: all 0.4s;
}
.nav-logo .logo-subname {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
  animation-delay: 1.4s;
  fill: var(--neutral-light);
  transition: all 0.4s;
}
@keyframes growTree {
  0% { transform: translateY(0px) scale(0.1); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Adding overflow:visible on .logo svg to allow drop-shadow blur without square edges  */
.logo svg {
  overflow: visible;
}
.nav-logo:hover, .nav-logo:focus-within {
  .logo-icon {
    /*transition: all 0.4s;*/
    transition: filter 0.4s;
    fill: var(--neutral-light);
    filter: drop-shadow(0 0 10px hsla(var(--warm-light-h), var(--warm-light-s), var(--warm-light-l), 0.5))
            drop-shadow(0 0 25px hsla(var(--warm-light-h), var(--warm-light-s), var(--warm-light-l), 0.3));
  }
} 

/* Desktop menu */
.nav-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
  height: 100%;
  white-space: nowrap;
  text-transform: uppercase;
}
.nav-menu > li {
  display: flex;
  align-items: center;
  height: 100%;
}
.nav-menu a {
  color: var(--neutral-light);
  text-decoration: none;
  padding: 0 0.5rem;
}
.nav-menu a:hover,
.nav-menu a:active,
.nav-menu a:focus-within {
  color: var(--neutral-light);
}

/* Submenus (desktop) */
.has-submenu {
  position: relative;
}
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--primary-color);
  padding: 1rem;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
  opacity: 1;
  pointer-events: auto;
}
.chevron {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--neutral-light);
  border-bottom: 2px solid var(--neutral-light);
  transform: rotate(45deg);
  margin-left: 6px;
  transition: transform .2s;
}
.has-submenu:hover .chevron {
  transform: rotate(225deg);
}

/* ================================================
///////////////////////////////////////////////////
===================================================
   LARGE SCREEN NAVIGATIONS STYLES (inside header)
===================================================
///////////////////////////////////////////////////
=================================================== */

/* ==============================
   OVERLAY NAV (inside header)
   ============================== */

   /* Overlay full screen gradient (for desktop submenu background) */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(
    to bottom,
    hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 1) var(--nav-height),
    hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 0.1) 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  z-index: 500;
}
.nav-overlay--visible {
  opacity: 1;
  pointer-events: none;
}
/* Recolor logo when green overlay is active */
.nav--overlay .logo.nav-logo {
  transition: fill 1.3s;
}
.nav--overlay.overlay--active .logo.nav-logo * {
  transition: fill 1.3s;
  fill: var(--neutral-light);
}
.nav--overlay .submenu {
  background: transparent;
  box-shadow: none;
  border: none;
  white-space: normal;
  min-width: 100%;
  width: max-content;
  max-width: 300px;
  padding: 0.5rem 0;
  margin: 0px; /* new */
}
.nav--overlay .submenu li {padding: 0.5rem 0rem;text-align: left;}
.nav--overlay .submenu a {
  display: block;         /* fills li width so wrapped lines stay left-aligned */
  white-space: normal;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Anchor submenu to the RIGHT edge of its parent for items near the right of the nav.
   Add class .has-submenu--right to any nav <li> whose dropdown would otherwise
   overflow the viewport (typically the last 1-2 items: "Visit & Learn", "About"). */
.nav--overlay .has-submenu--right .submenu,
.nav--dropdown .has-submenu--right .submenu {
  left: auto;
  right: 0px;
}
.nav--overlay .has-submenu--right .submenu li,
.nav--dropdown .has-submenu--right .submenu li{
  left: auto;
  right: 0px;
  text-align: right;
}



/* ==============================
   FULLBAR NAV (inside header)
   ============================== */

/* Nav style variants (fullbar, dropdown, overlay) */
.nav--fullbar .submenu {
  position: fixed;
/*  top: var(--nav-current-height); */
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 3rem;
  background: var(--primary-color);
  padding: 1rem 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.nav--fullbar .has-submenu:hover .submenu,
.nav--fullbar .has-submenu:focus-within .submenu,
.nav--fullbar .submenu:hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav--fullbar .submenu li { list-style: none; }
.nav--fullbar .submenu a { white-space: nowrap; color: var(--neutral-light); text-decoration: none; }


/* ==============================
   DROPDOWN NAV (inside header)
   ============================== */

.nav--dropdown .submenu {
  white-space: normal;
  min-width: 100%;
  width: max-content;
  max-width: 300px;
  padding: 0.5rem 0;
  background: var(--primary-color);
}
.nav--dropdown .submenu li { padding: 0.5rem 1.5rem; text-align: left; }
.nav--dropdown .submenu a { display: block; white-space: normal; }

/* =================================================
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
====================================================
CLOSE LARGE SCREEN NAVIGATIONS STYLES (inside header)
===================================================
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
==================================================== */



/* ==============================
   HAMBURGER (inside header)
   ============================== */

/* Hamburger button */
.hamburger {
  display: none;
  top: 1.2rem;
  right: 1rem;
  z-index: 3000;
  padding: 15px 10px;
  cursor: pointer;
  background: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}
.hamburger-box {
  width: 30px;
  height: 24px;
  display: inline-block;
  position: relative;
}
.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
  width: 30px;
  height: 3px;
  background-color: white;
  border-radius: 4px;
  position: absolute;
  transition: transform 0.15s ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  background-color: white;
  border-radius: 4px;
  position: absolute;
  transition: transform 0.15s ease;
}
.hamburger-inner::before { top: -8px; }
.hamburger-inner::after { bottom: -8px; }
.hamburger--squeeze.is-active .hamburger-inner { transform: rotate(45deg); }
.hamburger--squeeze.is-active .hamburger-inner::before { top: 0; transform: rotate(90deg); }
.hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; transform: rotate(90deg); }



/* ==============================
   MOBILE MENU – BASE (shared by all animations)
   ============================== */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: -webkit-fill-available;
  z-index: 2500;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-transform: uppercase;
  /* The following will be overridden by animation classes: */
}

/* Animation 1 */
.mobile-menu--slide-top {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
.mobile-menu--slide-top.open {
  transform: translateY(0);
}

/* Animation 2 */
.mobile-menu--fade-zoom {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;   /* extra safety */
}
.mobile-menu--fade-zoom.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Animation 3 */
.mobile-menu--fade {
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.mobile-menu--fade.open {
  opacity: 1;
  pointer-events: auto;
}

/* Animation 4 */
.mobile-menu--slide-right {
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.mobile-menu--slide-right.open {
  transform: translateX(0);
}



/* Fixed background image – hidden by default, fades & zooms on open */
.mobile-menu-bg-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 0.4s ease, transform 0.5s ease-out; /* This transition time is hard coded - should it be set using our --overlay-duration variable? */
  pointer-events: none;
  z-index: 2499;
}
/* Responsive images for the fixed background */
@media (max-width: 374px) {
  .mobile-menu-bg-fixed {
    background-image: image-set(
      url('../images/mobile-menu-bg-400.jpg') 1x,
      url('../images/mobile-menu-bg-800.jpg') 2x,
      url('../images/mobile-menu-bg-1200.jpg') 3x
    );
  }
}
@media (min-width: 375px) {
  .mobile-menu-bg-fixed {
    background-image: image-set(
      url('../images/mobile-menu-bg-600.jpg') 1x,
      url('../images/mobile-menu-bg-1200.jpg') 2x,
      url('../images/mobile-menu-bg-1800.jpg') 3x
    );
  }
}
@media (min-width: 600px) {
  .mobile-menu-bg-fixed {
    background-image: image-set(
      url('../images/mobile-menu-bg-800.jpg') 1x,
      url('../images/mobile-menu-bg-1600.jpg') 2x,
      url('../images/mobile-menu-bg-2400.jpg') 3x
    );
  }
}
/* When menu opens, background fades and zooms */
.mobile-menu.open ~ .mobile-menu-bg-fixed,
.mobile-menu.open + .mobile-menu-bg-fixed {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease 0.1s, transform 0.5s ease-out 0.1s;
}
/* When menu closes, background hides immediately (no delay) */
.mobile-menu:not(.open) ~ .mobile-menu-bg-fixed,
.mobile-menu:not(.open) + .mobile-menu-bg-fixed {
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 0.2s ease, transform 0.3s ease-out;
}



/* Scrollable content wrapper */
.mobile-menu-content {
  position: relative;
  z-index: 1;
  min-height: 100%;
  padding-top: var(--nav-height);
}
/* Green overlay – fully solid by default (hides content behind) */
.mobile-menu-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  opacity: 1;
  /* The transition duration is controlled by the CSS variable --overlay-duration.
     JavaScript reads the menu's actual transition duration and sets this variable
     on .mobile-menu-content. The fallback 0.3s ensures smooth operation if JS fails. */
  transition: opacity var(--overlay-duration, 0.3s) ease; /* fallback to 0.3s */
  z-index: -1;
}
/* When menu opens, fade overlay after slide finishes */
.mobile-menu.open .mobile-menu-content::before {
  opacity: 0.96; /* Higher number makes menu background image less visible */
}

/* Mobile menu header */
.mobile-menu-header {
  text-align: center;
  margin-bottom: 1rem;
}
.mobile-menu-logo.logo * {
  fill: var(--neutral-light);
  max-width: 60vw;
  justify-self: center;
  margin-left: -1em;
}
/* Centered navigation list */
/*.mobile-nav-menu {
  text-align: center;
  list-style: none;
  width: 100vw;
  overflow-x: hidden;
  padding-bottom: 2em;
}*/
.mobile-nav-menu {
    list-style: none;
    overflow-x: hidden;
    padding-bottom: 2em;
    width: 100%;
    justify-self: center;
    text-align: center;
}
.mobile-nav-item a {
  display: inline-block;
  text-decoration: none;
  color: var(--neutral-light);
  font-size: 1.5rem;
  padding: 0.5rem 0rem;
}
.mobile-nav-item .chevron {
  vertical-align: middle;
}
.mobile-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
/* Offset mobile nav links which have chevrons to visually center the list */
.mobile-nav-item.has-submenu {
  --mobile-menu-chevron-offset: 0.3em;
  position: relative;
}
.mobile-nav-item.has-submenu > a {
  position: relative;
  left: var(--mobile-menu-chevron-offset);
}
.mobile-submenu.open {
  max-height: 300px;
}
.mobile-submenu li {
  margin: 0.5rem 0;
}
.mobile-submenu li a {
  font-size: 1rem;
  /* padding: 0.25rem 1rem; */
  padding-block: 0.25rem;
}
/* Body and header states when mobile menu is open */
body.menu-open {
  overflow: hidden;
}
.site-header.menu-open {
  background: transparent !important;
  backdrop-filter: none !important;
  z-index: 3000;
}
.site-header.menu-open .nav-logo {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.site-header .nav-logo {
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}



/* ==============================
   RESPONSIVE (mobile vs desktop)
   ============================== */

   /*NOTE - Our javascript will close any mobile menu if screen width exceeds
   768px - such as when phone is orientated from vertical to horizontal */

@media (max-width: 768px) {
    .nav-menu {
      display: none;
    }
    .hamburger {
      display: inline-block;
    }
    .nav {
      padding: 0 1rem;
      height: var(--nav-height); /* Force compact nav height on mobile */
    }
    .site-header.scrolled {
      background: var(--primary-color);
    }
    /* Adjust logo size for mobile */
    .nav-logo {
      width: 40%;
      max-width: 140px;
    }
    /* Ensure hamburger stays vertically centered */
    .hamburger {
      top: auto;
      transform: none;
    }
    .mobile-menu {
      box-sizing: border-box;
    }
    .mobile-menu-header {
      margin-top: 0;
      margin-bottom: 3rem;
    }
}

/* Prevent the desktop nav from overflowing on landscape phones (or small tablets) when the menu is closed */
/* Medium screens: reduce desktop nav spacing to avoid overflow */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-menu {
    gap: 1rem;
    /*outline: 1px solid red;*/
  }
  .nav-menu a {
    padding: 0 0.25rem;
    font-size: 0.9rem;
    /*outline: 1px solid red;*/
  }
  .nav-logo {
    min-width: 140px;
    max-width: 180px;
    /*outline: 1px solid red;*/
  }

  /* Remove mobile menu from the DOM on larger screens, so that 
  accessiblity tabbing does not select a hidden mobile menu */
  .mobile-menu,
  .mobile-menu-bg-fixed {
    display: none;
  }
}


/* ==============================
   ADDITIONAL LINE UNDER NAV
   ============================== */
.site-header::after {
  content: '';
  display: flex;
  justify-self: center;
  width: 0%;
  height: 1px;
  background: var(--neutral-light);
  opacity: 0;
  animation: fadeInLine 0.6s ease forwards;
  animation-delay: 0.5s;
}

@keyframes fadeInLine {
  to {
    width: 90%;
    opacity: 0.1;
  }
}
.menu-open .site-header::after {
  content: none;
}

/* Spacer – height will be set by JavaScript using the --spacer-max-height css variable */
.nav-spacer {
  --spacer-max-height: 90px;    /* ← your adjustable value */
  height: var(--spacer-max-height);               /* fallback, JS will override */
  transition: height 0.25s ease-out;   /* smooth but fast, avoids lag */
  background: transparent;
}

/* On mobile we force height 0 */
@media (max-width: 768px) {
  .nav-spacer {
    --spacer-max-height: 0px;   /* mobile override */
    height: 0px !important;
  }
}

/* Fix submenu from dissapearing when mousing from parent (.has-sublink) link to submenu */
.has-submenu::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 12px;
  background: transparent;
  pointer-events: auto;
  z-index: 1;
}



/* =========================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================
   CLOSE HEADER CLOSE HEADER CLOSE HEADER CLOSE HEADER CLOSE HEADER CLOSE HEADER 
============================================================================================
============================================================================================
============================================================================================
============================================================================================
============================================================================================ */








/* ==============================
   ==============================
   ==============================
   WORKING OUT LAYOUT CODE BELOW
   ==============================
   ==============================
   ============================== */






/* ==============================
   LAYOUT — SECTION & CONTAINER
   ============================== */

/*
  .section — the full-width stripe.  No height, no flex/grid. Background and padding are the only concerns here.
  Specific sections override via modifier classes.
*/

.section--bg-dark {background-color: var(--neutral-dark); color: var(--neutral-light);}
.section--bg-light {background-color: var(--neutral-light); color: var(--netural-dark);}
.section--bg-warm-light {background-color: var(--warm-light); color: var(--neutral-dark);}
.section--bg-primary {background-color: var(--primary-color); color: var(--neutral-light);}
.section--bg-primary-dark {background-color: var(--primary-color-dark); color: var(--neutral-light);}
.section--bg-secondary {background-color: var(--secondary-color); color: var(--neutral-dark);}


.section--bg-pattern::before {opacity: 0.03;}


.section--bg-image {background-size: cover; background-position: center;}
.section--bg-video {overflow: hidden;}  /* pair with an absolute <video> child */

.section {
  position: relative;   /* allows absolute-positioned bg video/image children */
  /*width: 100%;*/ /* block element will use 100% by default so don't need to delcare */
  padding-block: 5rem; /* vertical breathing room — override per section */
}
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto; /* Centers our content on larger screens */
  padding-inline: var(--container-padding-inline);
  /*outline: 1px solid red;*/
}
/* Tablet: keep full width, reduce padding slightly */
@media (max-width: 900px) {
  .container {
    max-width: 100%;
    --container-padding-inline: 1.5rem;
    /*outline: 1px solid blue;*/
  }
}
/* Mobile: tighter padding, full bleed feel */
@media (max-width: 600px) {
  .section {
    padding-block: 3rem;
  }
  .container {
    --container-padding-inline: 1.25rem;
    /*outline: 1px solid black;*/
  }
}





/* ==============================
   HERO (one-off override)
   The only section that breaks the
   padding-block rule intentionally
   ============================== */

/* Background image in hero section is delcared in both the css here, and in the 'poster attribute of the html video */
.section--hero {
  padding-block: 0;
  overflow: hidden;
  height: 100dvh; /* dynamic viewport height - excludes browser UI */
  min-height: 100svh; /* fallback for older browsers */
  background-color: var(--primary-color);
  background-image: url('../images/coille-coire-chuilc-2560.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
	/* TESTING 123 */
}
@media (max-width: 768px) {
  .section--hero {
     background-image: url('../images/coille-coire-chuilc-1920.jpg');
  
}
}
.section--hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; /* NEW - IF BROKEN, REMOVE ME */ 
  will-change: transform; /* NEW - IF BROKEN, REMOVE ME */
  filter: brightness(0.9); /* NEW - IF BROKEN, REMOVE ME */
  transform: scale(1.01); /* NEW - IF BROKEN, REMOVE ME */ /* Can help stop thin edge gaps and edge flicker */
}
.section--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
  pointer-events: none;
  z-index: 1; /* NEW - IF BROKEN, REMOVE ME */ 
}
.section--hero .container {
  position: relative;
  z-index: 1;
  z-index: 2; /* NEW - IF BROKEN, REMOVE ME */ 
  height: 100%;
  display: flex;
  flex-direction: column; /* stacks children vertically */
  justify-content: flex-end; /* pushes content to the bottom */
  align-items: flex-start; /* aligns content to the left */
  color: var(--neutral-light);
  text-align: left;
  padding-inline: var(--container-padding-inline);
  padding-bottom: 4rem; /* extra space at the bottom */ 
}

/* -----------------------------------------------------
      FIX FOR MOBILE DEVICES ORIENTATED HORIZONTALLY
------------------------------------------------------- */
/* On mobile landscape, hero becomes scrollable and starts below header */
@media (max-width: 900px) and (orientation: landscape) {
  .nav-spacer {--spacer-max-height: 0px;
    height: 0px !important;
  }
  .section--hero {
    height: auto;           /* allow natural height */
    min-height: 0;          /* remove forced full viewport */
    padding-top: calc(var(--nav-height) + 2rem); /* space for fixed header */
    padding-bottom: 2rem;
  }
  .section--hero .container {
    justify-content: flex-start;  /* content starts at top */
    padding-bottom: 2rem;         /* reduce bottom padding */
  }
}
/* -----------------------------------------------------
    END FIX FOR MOBILE DEVICES ORIENTATED HORIZONTALLY
------------------------------------------------------- */

/* Optional: limit the width of text for better readability on large screens */
.section--hero .container h1,
.section--hero .container p,
.section--hero .container a {
  /*max-width: 600px;*/            /* adjust as needed */
  max-width: calc(var(--container-max) - 200px); /* Uses our maximum container width (900px) minus 200px */
  max-width: calc(var(--container-max) - 50px);
	
}
.section--hero .container h1 {
  /*font-size: clamp(2.5rem, 7vw, 4.3rem); */  /* responsive: min 2.5rem, max 4.3rem */
  font-size: clamp(3rem, 6.8vw, 4.3rem); /* 2nd attempt to see if it's better */
  line-height: 1.1;
  margin-bottom: 1rem;
}

.section--hero .container p {
  font-size: clamp(1.3rem, 2.3vw, 2.1rem); /* larger than default body text */
  line-height: 1.4;
  /*max-width: 600px;*/                     /* keeps readability */
  margin-bottom: 1rem;
  text-wrap: balance;
}
.section--hero span {font-family: var(--font-accent);}

.section--hero .container a {
  color: inherit;
  font-family: var(--font-nav);
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.9em;
}
.section--hero .container a:hover {
  opacity: 0.8;
}




/* -----------------------------------------------------
    NEW MOBILE VERSION OF VIDEO 
------------------------------------------------------- */

.hero-video--mobile {
  display: none;
}

@media (max-width: 768px) {

  .hero-video--desktop {
    display: none;
  }

  .hero-video--mobile {
    display: block;
  }

}

/* -----------------------------------------------------
    END NEW MOBILE VERSION OF VIDEO 
------------------------------------------------------- */
.section--mission-statement {
  isolation: isolate;
}
/* SVG layer (dark lines) */
.section--mission-statement::before {
  opacity: 0.8;
  background-size: contain !important;
}

/* Animated gradient overlay */
/* Could not get the ::after gradient to color black contour lines of svg
without also causing the section background to become bright white - need to revisit */
/*
.section--mission-statement::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    #ff6b6b,
    #4ecdc4,
    #45b7d1,
    #96ceb4,
    #ff6b6b
  );
  background-size: 400% 400%;
  mix-blend-mode: screen;
  opacity: 1;
  animation: gradientShift 15s ease infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
*/

/* Keep text above everything */
/*
.section--mission-statement .container {
  position: relative;
  z-index: 2;
}
*/








/* -------------------------------------------- */
/* ------------ SECTION IMPORTANCE ------------ */
/* -------------------------------------------- */



/* Section style – you can adjust background, padding, etc. */
.section--importance {
  padding-block: 4rem;
}

.section-heading {
  text-align: center;
  margin-bottom: 3rem;
  font-size: clamp(2rem, 5vw, 2.5rem);
}

.importance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch;      /* default, but explicit */
}

.importance-card {
  display: flex;
  flex-direction: column;
  /* background: white; */
  /* border-radius: 1rem;*/
  /*padding: 1.5rem;*/ /* removed padding - better to use --container-padding-inline on container? */
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.05); */
  transition: transform 0.2s;
  height: 100%;              /* fill grid cell */
}

.importance-card:hover {
  /* transform: translateY(-4px); */
}

.importance-icon {
  text-align: center;
  margin-bottom: 1rem;
}

.importance-icon img {
  /* max-height: 80px; */
  width: auto;
  object-fit: contain;
}

.importance-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
}

.importance-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  flex: 1;                   /* pushes content below to bottom */
}

.importance-stats {
  font-size: 0.8rem;
  color: var(--primary-color-dark);
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.importance-link {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-nav);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Responsive: stack on tablets and mobile */
@media (max-width: 768px) {
  .importance-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ------------------------------------------------ */
/* ------------ END SECTION IMPORTANCE ------------ */
/* ------------------------------------------------ */




/* -------------------------------------------- */
/* ------------ HOMEPAGE NEWS FEED ------------ */
/* -------------------------------------------- */

/* News feed container */
.news-feed {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

/* Each news item – uses flex to align image and text */
.news-item {
  display: flex;
  gap: 2rem;
  background: transparent;
/*  border-radius: 0.75rem;*/
  overflow: hidden;
}

/* Image container – takes 1/3 of the width, full height */
.news-image {
  flex: 1;
  min-width: 0;          /* prevents overflow */
}
.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* image fills the container, maintains aspect ratio */
  display: block;
}

/* Content container – takes 2/3 of the width */
.news-content {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically centers content if needed */
}
.news-content h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
}
.news-content h3 a {
  color: inherit;
  text-decoration: none;
}
.news-content h3 a:hover {
  text-decoration: underline;
}
.news-content p {
  margin-bottom: 1rem;
  line-height: 1.4;
}
.news-link {
  display: inline-block;
  font-family: var(--font-nav);
  text-transform: uppercase;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
}
.news-link:hover {
  opacity: 0.7;
}

/* Alternating layout: add class .news-feed--alternate to the parent */
.news-feed--alternate .news-item:nth-child(even) {
  flex-direction: row-reverse;
}

/* Responsive: on mobile, stack everything vertically */
@media (max-width: 768px) {
  .news-item,
  .news-feed--alternate .news-item:nth-child(even) {
    flex-direction: column;
  }
  .news-image {
    max-height: 200px;
  }
}
/* ----------------------------------------------- */
/* ------------ END HOMPAGE NEWS FEED ------------ */
/* ----------------------------------------------- */




/* ==============================
   CARDS COMPONENT
   ============================== */

/* ---------- SECTION BASE (background, overlay) ---------- */

/* ==============================
   SECTION WITH BACKGROUND & OVERLAY (reusable)
   ============================== */


/* Default section__overlay is dark - light or colored can be applied by appending overlay varients below */
.section__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Overlay variants */
.section__overlay {
  /* Default dark overlay */
  background: linear-gradient(
    to bottom,
     hsla(var(--neutral-dark-h), var(--neutral-dark-s), var(--neutral-dark-l), 0.5), 
     hsla(var(--neutral-dark-h), var(--neutral-dark-s), var(--neutral-dark-l), 0.4)
     );
}
.section__overlay--dark {
  /* Default dark overlay */
  background: linear-gradient(
    to bottom,
     hsla(var(--neutral-dark-h), var(--neutral-dark-s), calc(var(--neutral-dark-l) * 0.2), 0.9), 
     hsla(var(--neutral-dark-h), var(--neutral-dark-s), calc(var(--neutral-dark-l) * 0.2), 0.7)
     );
}
.section__overlay--light {
  background: linear-gradient(
    to bottom,
     hsla(var(--neutral-light-h), var(--neutral-light-s), var(--neutral-light-l), 0.9), 
     hsla(var(--neutral-light-h), var(--neutral-light-s), var(--neutral-light-l), 0.7)
     );
}
.section__overlay--primary {
  background: linear-gradient(
    to bottom,
     hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.9), 
     hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.7)
     );
}
.section__overlay--primary-dark {
  background: linear-gradient(
    to bottom,
     hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) * 0.2), 0.9), 
     hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) * 0.2), 0.7)
     );
}
.section__overlay--secondary {
  background: linear-gradient(
    to bottom,
     hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.9), 
     hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.7)
     );
}





/* ==============================
   SECTION HEADER (independent component)
   ============================== */
.section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem auto;
  }
.section-header h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 1rem;
}

.section-header--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /*flex-wrap: wrap;*/
  gap: 2rem;
  /*text-align: left;*/
  max-width: none;
  flex-wrap: nowrap; /* prevent wrapping on large screens */
}
/* Override for the heading inside split header – remove auto margins and allow natural width */
.section-header--split h2 {
  max-width: 45%;        /* allows room for right column */
  margin: 0;             /* remove default margins */
  flex-shrink: 1;        /* allows heading to shrink if needed */
  text-align: left;
}
.section-header--split span {
  font-family: var(--font-accent);
}
.section-header--split p {
  font-size: 1rem;
}
/*.section-header--split a {
  color: inherit;
  font-family: var(--font-primary);
  text-transform: uppercase;
}*/
/* Right column – prevent shrinking */
.section-header--split .section-header__right {
  flex-shrink: 0; /* keep right column at its content width */
  text-align: right;
  max-width: 50%;
}
.section-header__view-all,
.section-header__link {
  display: inline-block;
  margin-top: 0.5rem;
  text-decoration: none;
  color: inherit;
  font-family: var(--font-primary);
  text-transform: uppercase;
}

/* Responsive header */
@media (max-width: 768px) {
  .section-header--split {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .section-header--split h2 {
    max-width: 100%;
  }
  .section-header--split .section-header__right {
    text-align: left;
    max-width: 100%;
    flex-shrink: 1;
  }
}






/* ==============================
   CARD WRAPPER & TRACK (layout)
   ============================== */
.cards__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.cards__track {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.cards__btn {
  display: none; /* hidden by default (static grid) */
}

/* Scrollable variant */
.cards--scroll .cards__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1.5rem;
  scrollbar-width: none; /* hide scrollbar */
  -ms-overflow-style: none;
}
.cards--scroll .cards__track::-webkit-scrollbar {
  display: none;
}
.cards--scroll .cards__track .cards__card {
  flex: 0 0 calc(33.333% - 1rem);
  scroll-snap-align: start;
}
.cards--scroll .cards__btn {
  display: flex; /* show arrows */
}

/* Arrow buttons */
.cards__btn {
  background: rgba(255,255,255,0.8);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.8rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: var(--neutral-dark);
}
.cards__btn:hover {
  background: white;
  transform: scale(1.05);
}

/* Responsive breakpoints
   Formula: calc(100% / N - gap × (N-1) / N)
   where N = visible cards and gap = 1.5rem (set on .cards--scroll .cards__track)
   ─ 3-up: calc(33.333% - 1rem)      → 1.5rem × 2/3 = 1rem   ✓ (desktop, already correct)
   ─ 2-up: calc(50% - 0.75rem)       → 1.5rem × 1/2 = 0.75rem
   ─ 1-up: 100%                       → no gaps in view, no subtraction needed
*/
@media (max-width: 900px) {
  .cards--scroll .cards__track .cards__card {
    flex: 0 0 calc(50% - 0.75rem);
  }
}
@media (max-width: 640px) {
  .cards--scroll .cards__track .cards__card {
    flex: 0 0 100%;
  }
  .cards--scroll .cards__wrapper {
    gap: 0.5rem;
  }
}



/* ==============================
   CARD COMPONENT (base)
   ============================== */
.cards__card {
  display:flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease;
  background: var(--neutral-light);
  color: var(--neutral-dark);
   /* height: auto; automatically takes content height */
}
.cards__card:hover {
  /* transform: translateY(-5px); */ /* Not sure if we need a hover effect on every card type, so will comment out for now */
}

.card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: transparent;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card__content {
  flex:1;
  display:flex;
  flex-direction: column;
  padding: 1.5rem;
  background: transparent;
  color: inherit;
  text-align: right; /* or left, as you prefer */
}
.card__content h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-accent);
}
.card__description {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}
.card__link {
  display: inline-block;
  text-decoration: none;
 /*ont-weight: 600;*/
/*border-bottom: 1px solid currentColor;*/
  transition: opacity 0.2s;
  font-family: var(--font-primary);
  text-transform: uppercase;
  color: inherit;
  margin-top:auto;
}
.card__link:hover {
  opacity: 0.7;
}

/* ========== CARD VARIANT: STORY ========== */
.card--story {
  background: var(--neutral-light);
}
.card--story .card__media {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1rem 1rem 0 1rem;
/*  background: transparent;
  aspect-ratio: auto; */
}
.card--story .card__media img {
  /*flex: 1;*/
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /*border-radius: 0.5rem;*/
}
.card--story .card__content {
  text-align: right;
  padding: 1.5rem;
}
.card--story .card__content h3 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}
.card__rotate-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--font-nav);
  font-size: 0.8rem;
  letter-spacing: 0px;
  color: var(--neutral-dark);
  white-space: nowrap;
  align-self: start;
  flex-shrink: 0;
  width: 3rem;
}
.card__tags {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-bottom: 1rem;
}
.tag {
  background: var(--primary-color);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 10px;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-family: var(--font-nav);
}
.card--story .card__description {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  text-align: right;
}

/* Responsive story card */
@media (max-width: 768px) {
  .card--story .card__media {
    flex-direction: column;
  }
  .card__rotate-text {
    /*writing-mode: horizontal-tb;
    transform: none;
    text-align: center;
    margin-bottom: 0.5rem;*/
  }
}



/* ========== SECTION-LEVEL COLOR OVERRIDES (APPLY TO ANY ELEMENT ABOVE CARDS LEVEL) ========== */
/* Parent-level colour override for all cards inside */

/* INSTRUCTIONS: apply 'card__color--dark/light/primary/primary-dark to any parent element of cards - cards__wrapper or cards__track*/
.card__color--dark .cards__card {
  background: var(--neutral-dark);
  color: var(--neutral-light);
}
.card__color--light .cards__card {
  background: var(--neutral-light);
  color: var(--neutral-dark);
}
.card__color--primary .cards__card {
  background: var(--primary-color);
  color: var(--neutral-light);
}
.card__color--primary-dark .cards__card {
  background: var(--primary-color-dark);
  color: var(--neutral-light);
}



/* ========== INDIVIDUAL CARD COLOR OVERRIDES ========== */
/* Individual card override (must come after parent rule) */
/* Place after section-level overrides so they take precedence */
.cards__card.card__color--dark {
  background: var(--neutral-dark);
  color: var(--neutral-light);
}
.cards__card.card__color--primary {
  background: var(--primary-color);
  color: var(--neutral-light);
}
.cards__card.card__color--light {
  background: var(--neutral-light);
  color: var(--neutral-dark);
}

/* For story cards, ensure the image area inherits correctly (no separate background needed) */
.card--story.card__color--dark,
.card--story.card__color--dark .card__media {
  background: var(--neutral-dark);
}
.card--story.card__color--primary,
.card--story.card__color--primary .card__media {
  background: var(--primary-color);
}
.card--story.card__color--light,
.card--story.card__color--light .card__media {
  background: var(--neutral-light);
}
/* Adjust rotated text and tags for dark/primary cards */
.card--story.card__color--dark .card__rotate-text,
.card--story.card__color--dark .tag {
  color: var(--neutral-light);
  background: rgba(0,0,0,0.3);
}
.card--story.card__color--primary .card__rotate-text,
.card--story.card__color--primary .tag {
  color: var(--neutral-light);
  background: rgba(0,0,0,0.2);
}















/* -----------------------------------------------------
    UTILITY CLASSES
------------------------------------------------------- */

/* Example: .text-center { text-align: center; } */

/* Utility: constrain width for better readability */
.constrain-width--center {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.constrain-width--left {
  max-width: 420px;
}










/* ==============================
   LAYOUT MODIFIERS
   Assigned to the element *inside*
   .container depending on content needs
   ============================== */

/* Single centered column (default — no class needed, just use .container) */

/* Two column: text + image, text + text */
.layout--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
/* Card grid */
.layout--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
/* Wide: breaks out of the container's max-width */
.layout--wide {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
/* Collapse multi-column layouts on mobile */
@media (max-width: 768px) {
  .layout--two-col {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}







/* Temp testing new CSS */
/*.cards__btn {
  background: transparent;
  align-self: center;
  align-items: start;
  border: 1px solid red;
  width: auto;
  height: auto;
    border-radius: 0;
  font-size: 8rem;
  line-height: 1;
  color: inherit;
  
}
.cards__btn:hover {
  background: transparent;
}
*/



@media (max-width: 768px) {
  .cards__wrapper {
    display: grid;
    grid-template-areas:
      "track track"
      "prev  next";
    gap: 1rem;
  }

  .cards__wrapper .cards__track {
    grid-area: track;
    width: 100%;
  }

  .cards__btn--prev {
    grid-area: prev;
    justify-self: end;    /* pushes the prev button to the right side of its cell */
  }

  .cards__btn--next {
    grid-area: next;
    justify-self: start;   /* pushes the next button to the left side of its cell */
  }

  /* Optional: adjust button size for touch */
  .cards__btn {
    width: 48px;
    height: 48px;
    font-size: 2rem;
  }
}

/*
.cards__btn--prev,
.cards__btn--next {
  justify-self: center;
}
*/

.cards__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .cards__dots {
  display: none !important;
}
}
.cards__dot {
  width: 10px;
  height: 10px;
  border-radius: 0%;
  background: red;
  transition: background 0.2s;
  cursor: pointer;
}
.cards__dot.active {
  background: red;
}

@media (max-width: 768px) {
  .cards__wrapper {
    display: grid;
    grid-template-areas:
      "track track"
      "prev  next"
      "dots  dots";        /* ← new row for dots */
    gap: 1rem;
  }

  .cards__wrapper .cards__track {
    grid-area: track;
    width: 100%;
  }

  .cards__btn--prev {
    grid-area: prev;
    justify-self: end;
  }

  .cards__btn--next {
    grid-area: next;
    justify-self: start;
  }

  /* Dots container placed in the new row and centered */
  .cards__dots {
    grid-area: dots;
    justify-self: center;
  }

  /* Optional: adjust button size for touch */
  .cards__btn {
    width: 48px;
    height: 48px;
    font-size: 2rem;
  }
}













/* ==============================
   FOOTER
   ============================== */
.site-footer {
  background-color: var(--neutral-light);
  color: var(--neutral-dark);
  padding-block: 3rem;
  font-family: var(--font-nav);
  font-size: 0.9rem;
}

.site-footer {
position:relative;
  z-index:0;
}
.site-footer::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  opacity:0.75;
  /* --footer-bg is a variable we set so that we can set a bg image in Wordpress ACF */
  background-image: var(--footer-bg, url('../images/background-pattern-light.png'));
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
}

.footer__col--logo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Logo colour (primary green) */
/*
.footer-logo svg * {
  fill: var(--primary-color);
}*/

.footer__copyright {
  font-size: 0.85rem;
  color: var(--neutral-dark);
  margin: 0;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__list li {
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.footer__list a {
  color: var(--neutral-dark);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color 0.2s;
}

.footer__list a:hover {
  border-bottom-color: var(--primary-color);
}


.footer__col--contact {
  /* If contact area expands, we can make it two columns by adding a extra
  column to .footer__grid (eg grid-template-columns: repeat(4, 1fr) ) then 
  span our contact column to span two columns */
  /*grid-column: span 2; */ /* takes two columns */
}
.footer__col--links {
}
.footer__col--links .footer__list li {
  margin-bottom: 0.14rem; /*smaller than the global 1rem */
}
.footer__small-text {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.logo--alt {
  padding-inline: 1em;
}


/* Responsive: stack columns on mobile */
@media (max-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .footer__col--logo {
    align-items: center;
    padding-right: 10px; /* space in logo left side makes centered logo feel off center, so add padding-right to improve appearance */
  }

  .footer__list li {
    text-align: center;
  }

  /* Fix footer logo not showing on smaller screens */
  /* Style the SVG itself – let it scale naturally */
  .footer-logo svg {
    width: auto;
    width: 100%;
    height: auto;
    display: block;
  }
  .footer-logo {wax-width: 100%; width: 100%; max-width: 300px; justify-items: center;}

  .logo--alt {
  padding-inline: 1em;
  max-width: 250px;
}

}


/* SVG logo animations */
/* Header only — animates on page load */

/* Footer standard logo — hidden until in-view */
.footer-logo--standard .logo-icon {
  transform-origin: bottom left;
  transform: scale(0.1);
  opacity: 0;
  fill: var(--primary-color);
  
}
.footer-logo--standard .logo-name {
  opacity: 0;
  transform: translateY(6px);
  fill: var(--primary-color);
}
.footer-logo--standard .logo-subname {
  opacity: 0;
  transform: translateY(6px);
  fill: var(--primary-color);
}

/* Footer standard logo — animated once in-view */
.footer-logo--standard.in-view .logo-icon {
  animation: growTree 1.2s ease-out forwards;
}
.footer-logo--standard.in-view .logo-name {
  animation: fadeIn 0.8s ease forwards;
  animation-delay: 1s;
}
.footer-logo--standard.in-view .logo-subname {
  animation: fadeIn 0.8s ease forwards;
  animation-delay: 1.4s;
}


/* Initial state – before in-view is added */
.logo--alt .logo-icon {
  transform-origin: bottom center;
  transform: translateY(0px) scale(0.1);
  opacity: 0;
}
.logo--alt .logo-name {
  opacity: 0;
  transform: translateY(6px);
}
.logo--alt .logo-subname {
  opacity: 0;
  transform: translateY(6px);
}

/* Animated state – once in-view is added */
.logo--alt.in-view.footer-logo .logo-icon {
  animation: growTree 1.2s ease-out forwards;
  fill: var(--primary-color);
}
.logo--alt.in-view.footer-logo .logo-name {
  animation: fadeIn 0.8s ease forwards;
  animation-delay: 1s;
  fill: var(--primary-color);
}
.logo--alt.in-view.footer-logo .logo-subname {
  animation: fadeIn 0.8s ease forwards;
  animation-delay: 1.4s;
  fill: var(--primary-color);
}



/* Mobile: show standard, hide alt */
@media (max-width: 768px) {
  .footer-logo--alt { display: none; }
  .footer-logo--standard { display: block; }
}

/* Desktop: show alt, hide standard */
@media (min-width: 769px) {
  .footer-logo--standard { display: none; }
  .footer-logo--alt { display: block; }
}




.footer__social {
  display: flex;
  flex-wrap: nowrap;          /* allows wrapping on very small screens if needed */
  justify-content: start;
  gap: 1.5rem;
  max-width: 100%;
  margin: 1em auto;           /* centers the whole group if max-width is set */
}
.footer__social a {
  border-bottom: none;
}
.social-icon {
  --icon-size: 30px;        /* adjust to your preferred size */
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url('../images/social-media-logos.png');
  background-repeat: no-repeat;
  /* total width = 5 × icon-size, height = 2 × icon-size */
  background-size: calc(5 * var(--icon-size)) calc(2 * var(--icon-size));
  transition: background-position 0.2s ease;
}

/* Top row – default state (y=0) */
.social-icon--x          { background-position: 0 0; }
.social-icon--facebook   { background-position: calc(-1 * var(--icon-size)) 0; }
.social-icon--instagram  { background-position: calc(-2 * var(--icon-size)) 0; }
.social-icon--substack   { background-position: calc(-3 * var(--icon-size)) 0; }
.social-icon--youtube    { background-position: calc(-4 * var(--icon-size)) 0; }

/* Hover – bottom row (y = -icon-size) */
.social-icon--x:hover          { background-position: 0 calc(-1 * var(--icon-size)); }
.social-icon--facebook:hover   { background-position: calc(-1 * var(--icon-size)) calc(-1 * var(--icon-size)); }
.social-icon--instagram:hover  { background-position: calc(-2 * var(--icon-size)) calc(-1 * var(--icon-size)); }
.social-icon--substack:hover   { background-position: calc(-3 * var(--icon-size)) calc(-1 * var(--icon-size)); }
.social-icon--youtube:hover    { background-position: calc(-4 * var(--icon-size)) calc(-1 * var(--icon-size)); }

@media (max-width: 768px) {
  .footer__social {
    justify-content: center;
    margin: 2em auto;
  }
  .social-icon {
    --icon-size: 30px;
  }
}







/* ---------------------------------------------------------------- */
/* IF WE WANT A SOLID COLOR OVERLAY TO SIT BELOW THE CARDS SECTION */
/* ---------------------------------------------------------------- */
/* Section with full‑width coloured backdrop */
.section--cards-backed {
  position: relative;
  overflow-x: clip;          /* prevents horizontal scroll from 100vw */
}

/* The full‑width backdrop element (will be positioned by JS) */
.cards-backdrop {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  bottom: 0;
  background-color: var(--primary-color);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
  /* top will be set by JavaScript – do not set it in CSS */
}

/* Ensure the container and cards sit above the backdrop */
.section--cards-backed .container {
  position: relative;
  z-index: 1;
}

.section--cards-backed .cards__wrapper {
  position: relative;
  z-index: 1;
}
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */




.hero-video {
  animation: heroScale 2.5s ease-out forwards,
             heroFade 0.8s ease forwards;
}

@keyframes heroScale {
  from { transform: scale(1.15); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-video.video-playing {
  animation: videoCrossfade 0.6s ease forwards;
}

@keyframes videoCrossfade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}



.section:not(.section--hero) {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Add padding-topp to first element on page, excluding .section--hero because that already positions it's content at bottom */
main > *:first-child:not(.section--hero) {
  padding-top: calc(var(--nav-height) + var(--spacer-max-height, 90px) + 2rem);
}

/* We can exclude many classes by chaining :not */
.section:not(.section--hero):not(.section--mission-statement)::before {
}

.section:not(.section--hero)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--section-bg-image, none);
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  transition: transform 2s ease-out;
  z-index: 0;
  /*z-index: -1; */ /* Setting this to -1 seems to fix the ::before element on sections with no background image from being covered */
}

.section:not(.section--hero).in-view::before {
  transform: scale(1);
}

.section__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* was 0 — needs to be above the ::before */
}

.has-bg-image .container {
  position: relative;
  z-index: 2;
}



















/* Center the link+button group horizontally */
.mobile-nav-item.has-submenu {
  text-align: center;  /* centers inline children */
}

/* Wrapper becomes inline-flex, only as wide as its content */
.mobile-nav-link-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;         /* small space between link text and chevron */
  margin-left: 2.3em;

}

/* Parent link – normal inline block, no flex‑grow */
.mobile-nav-parent-link {
  display: inline-block;
  text-decoration: none;
  color: var(--neutral-light);
  font-size: 1.5rem;
  padding: 0.5rem 0;
  /* No flex:1 – keeps text from stretching */
}

/* Toggle button – sits naturally after the link */
.mobile-submenu-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 12px;         /* keeps tap area large */
  display: inline-flex;  /* inline to sit next to link */
  align-items: center;
  justify-content: center;
  margin: 0;
  vertical-align: middle; /* align with text */
}

/* Chevron inside the button – adjust size and rotation */
.mobile-submenu-toggle .chevron {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-width: 2px;
  margin: 0;              /* reset any default margin */
  transition: transform 0.2s;
}