/* ============ THEME ============ */
/* Global base */
html, body {
  height: 100%;
  background: #B0E0E6;
  color: #000080;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Links (hover/click in Dark Orange) */
a {
  color: #000080;
  text-decoration: underline;
}

a:hover, a:focus, a:active {
  color: #F54927;
  outline: none;
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 3px solid #F54927;
  outline-offset: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: -9999px;
}
.skip-link:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  background: #fff;
  color: #000;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  z-index: 10000;
}

/* Layout utilities */
.container {
  max-width: 1100px;
  width: calc(100% - 2rem);
  margin-left: auto;
  margin-right: auto;
}

/* ============ HEADER / NAV ============ */
.site-header {
  position: fixed;   /* <-- robust: always on top while scrolling */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;     /* above sections/video/overlays */
  background-color: #1E90FF;               /* fallback solid */
  background-color: rgba(30,144,255,0.90); /* Dodger Blue @ 90% */
  border-bottom: 1px solid #cccccc;        /* fallback */
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  padding: 0.6rem 0;
}

.logo img {
  height: 44px;               /* adjust as needed */
  width: auto;
  display: block;
}

.site-nav {
  margin-left: auto;
}

.menu {
  display: flex;
  align-items: center;
  margin-left: 0.8rem;
  list-style: none;
}

.menu-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
}

/* Make the About button background match nav bar */
.menu-item.has-panel > .menu-link {
  background: #1E90FF;
  color: white;
  font-weight: 700;
  border: none;
}

/* Optional: on hover/focus keep it consistent */
.menu-item.has-panel > .menu-link:hover,
.menu-item.has-panel > .menu-link:focus {
  background: #1E90FF;
  color: white;
} 

.site-nav .menu-link {
  color: white; /* make text readable against blue background */
  font-weight: 700; /* or use 'bold' */
}

.menu-link:hover,
.menu-link:focus {
  /* Fallback for older browsers */
  border-color: #5a5a9f;  /* soft navy mix */
  background: #f0f4ff;    /* very light blue */
}

.site-nav .menu-link:hover,
.site-nav .menu-link:focus {
  background: color-mix(in srgb, white, transparent 80%);
  color: #000080;
}

.has-panel {
  position: relative;
}

/* About Panel (hover/focus on desktop, click via JS everywhere) */
.about-panel {
  position: absolute;
  top: 125%;
  left: 0;

  /* Replace clamp(320px, 40vw, 520px) */
  width: 40vw;           /* responsive middle value */
  min-width: 320px;      /* lower bound of clamp */
  max-width: 520px;      /* upper bound of clamp */

  /* Fallback solid before RGBA (use background-color, not shorthand) */
  background-color: #ffffff;             /* fallback */
  background-color: rgba(255, 255, 255, 0.93);

  color: #000080;
  border: 1px solid #93c5fd;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  padding: 1rem 1rem;
  border-radius: 12px;
  display: none;
}
 
.about-panel.open { display: block; } 

/* Reveal on hover/focus (large screens) */
@media (hover:hover) and (pointer:fine) {
  .has-panel:hover > .about-panel,
  .has-panel:focus-within > .about-panel {
    display: block;
  }
}

/* Mobile nav */
.nav-toggle { 
  display: none;

  /* Fallback border first (solid gray) */
  border: 1px solid #cccccc;          /* fallback for older browsers */
  border: 1px solid rgba(0,0,0,0.15); /* modern browsers */

  background: #ffffff;                /* explicit fallback */
  border-radius: 10px;
  padding: 6px;
}
.nav-toggle-bar {
  display: block;
  width: 22px; height: 2px;
  background: #000080;
  margin: 4px 2px;
  border-radius: 2px;
}
.site-nav.open { display: block; }

@media (max-width: 860px) {
  .menu { 
    display: none;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
  }
  .site-nav.open .menu { display: flex; }
  .nav-toggle { display: inline-block; margin-left: auto; }
  .menu-link { width: 100%; text-align: left; border-radius: 8px; }
  .has-panel { width: 100%; }
  .about-panel { position: static; display: none; margin-top: 0.4rem; }
  .about-panel.open { display: block; }
}

.site-header:hover {
  background: #B0E0E6;                /* fallback for older browsers */
  background: rgba(176,224,230,0.9);  /* translucent modern background */
}

/* Make room for fixed header */
body { padding-top: 64px; }


/* When jumping to #anchors (menu links), keep sections clear of the header */
.hero, .section { scroll-margin-top: 64px; }


/* ============ HERO ============ */
.hero {
  position: relative;
  z-index: 1; 

  /* Use hidden instead of clip for full compatibility */
  overflow: hidden;

  /* conservative min-height independent of functions */
  min-height: 520px;  /* safe baseline */   

  /* Fallback padding (equivalent to clamp(64px, 12vh, 120px) 0) */
  padding: 64px 0;
}
@media (min-height: 900px) { .hero { min-height: 680px; } }

.brand-title {
  /* Fallback for older parsers */
  font-size: 2rem;

  /* Modern scaling for responsive sizes (safe for browsers) */
  font-size: calc(1rem + 4.5vw);

  color: #1E90FF;
  letter-spacing: 0.5px;
  margin: 0 0 0.6rem;
}

/* Cap the growth for very wide screens */
@media (min-width: 1600px) {
  .brand-title {
    font-size: 4.5rem; /* acts as clamp’s max */
  }
}


/* Optional: cap the size explicitly on large screens */
@media (min-width: 1600px) {
  .brand-title {
    font-size: 4.5rem;
  }
}

.hero-tagline {
  /* Fallback for legacy engines */
  font-size: 1rem;

  /* Responsive scaling for modern browsers */
  font-size: calc(0.8rem + 1.2vw);

  /* Optional: cap font growth at wide viewports */
  max-width: 60ch;
}

@media (min-width: 1400px) {
  .hero-tagline {
    font-size: 1.35rem;  /* mimic clamp’s max value */
  }
}

.hero-text {
  font-size: 1.5rem;
    /* Optional: cap font growth at wide viewports */
  max-width: 55ch;
}

/* === PAGE BACKGROUND VIDEO (fixed behind everything) === */
.hero-video-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;            /* video layer */
  overflow: hidden;
  pointer-events: none;  /* never block clicks */
}


.hero-video-bg video{
  width: 100%;
  height: 100%;
  opacity: 0.05;         /* gentle fade */
  filter: saturate(1.1) contrast(1.05);
  object-fit: cover;     /* fill viewport, keep aspect */
}

/* ensure site content sits above the video */
/* keep header sticky; only lift the stacking of main/footer */
main, .site-footer {
  position: relative;
  z-index: 1;
}


/* Accessibility: disable motion if user prefers */
@media (prefers-reduced-motion: reduce){
  .hero-video-bg{ display:none; }
}


/* ============ SECTIONS ============ */
.section {
  /* Fallback minimum */
  padding: 48px 0;
}

/* Scale padding for medium screens */
@media (min-width: 768px) {
  .section {
    padding: 8vw 0; /* equivalent to clamp’s middle term */
  }
}

/* Cap padding for large screens */
@media (min-width: 1400px) {
  .section {
    padding: 84px 0; /* clamp’s maximum */
  }
}

.section h2 {
  font-size: 1.4rem; /* fallback for all viewports */
  margin-bottom: 0.6rem;
}

/* Medium screens and above */
@media (min-width: 768px) {
  .section h2 {
    font-size: calc(1rem + 1.8vw); /* scales with viewport width */
  }
}

/* Large screens and above */
@media (min-width: 1400px) {
  .section h2 {
    font-size: 2.1rem; /* cap at max size */
  }
}


.section.alt {
  /* Replace color-mix with a simple lightened background fallback */
  background: #CFE8EE; /* slightly lighter than #B0E0E6 */

  /* Fallback borders first, RGBA after */
  border-top: 1px solid #CCCCCC;        /* fallback */
  border-top: 1px solid rgba(0,0,0,0.06);
  
  border-bottom: 1px solid #CCCCCC;     /* fallback */
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* ============ FOOTER ============ */
.site-footer {
  /* Fallback border first */
  border-top: 1px solid #CCCCCC;          /* fallback for older browsers */
  border-top: 1px solid rgba(0,0,0,0.08); /* subtle modern border */

  padding: 1.2rem 0;
  font-size: 0.95rem;

  /* Replace color-mix() with approximate solid tone */
  background: #C8E3EC; /* ~10% lighter than #B0E0E6 */
}


/* Screen size helpers (optional fine-tuning) */
@media (min-width: 1200px) {
  .hero { padding: 140px 0; }
}

/* Contact form */
.contact-form {
  display: block;          /* use block layout for full compatibility */
  max-width: 720px;
}

.contact-form > label,
.contact-form > input,
.contact-form > textarea,
.contact-form > button {
  display: block;
  width: 100%;
  margin-bottom: 0.9rem;
}

.contact-form input:last-of-type,
.contact-form textarea:last-of-type,
.contact-form button:last-of-type {
  margin-bottom: 0;
}

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.field input[type="text"],
.field input[type="email"],
.field textarea {
  box-sizing: border-box;      /* revents width + padding overflow */
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;

  /* fallback + modern border */
  border: 1px solid #CCCCCC;
  border: 1px solid rgba(0,0,0,0.18);

  background: #fff;
}

.field.checkbox {
  display: flex;
  align-items: flex-start;   /* fix: 'start' -> 'flex-start' */
}

/* Simple, validator-safe spacing between the checkbox and label */
.field.checkbox input {
  margin-top: 0.2rem;        /* keep your original */
  margin-right: 0.6rem;      /* replaces 'gap' */
}
.error { color: #F54927; font-size: 0.9rem; min-height: 1.1rem; }
.btn {
  display: inline-block;

  /* Border: hex fallback first, then RGBA equivalent of 40% #F54927 */
  border: 1px solid #F3B5A9;                  /* fallback solid */
  border: 1px solid rgba(245, 73, 39, 0.40);  /* modern translucent */

  /* Background: pre-mixed hex close to 'white 88% + #F54927 12%' ≈ #FEE9E5 */
  background: #FEE9E5;

  padding: 0.7rem 1rem;
  border-radius: 10px;
}
.btn:hover { background: color-mix(in srgb, #F54927, white 80%); }

.form-status { margin-bottom: 0.6rem; }
.form-status.ok { color: #106b21; }
.form-status.error { color: #F54927; }

/* Honeypot hidden from users and assistive tech */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}



/* ===== Cards ===== */
/* Fallback for old parsers (Flexbox) */
/* List of cards per section */
.card-grid {
  display: block;          /* no flex/grid needed here */
  margin-top: 0.8rem;
}

.card-grid img {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  display: flex;                     /* row layout */
  flex-direction: row;
  align-items: stretch;
  display: block;
  width: 98.5%;              /* left column width */
  height: auto;
  
}

/* vertical spacing between cards without 'gap' */
.card-grid .card + .card {
  margin-top: 1.5rem;
}


/* Add spacing between cards instead of using 'gap' */
.card-grid > * {
  margin: 0.5rem;
}

.card-grid > .card{
  flex:1 1 260px;   /* each card is at least 260px wide */
}

/* One card = image (left) + text (right) */
.card {
  background: #ffffff;
  border: 1px solid #CCCCCC;         /* fallback */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  overflow: hidden;

  display: flex;                     /* row layout */
  flex-direction: row;
  align-items: stretch;
}

/* science CH4-breathing cow + CH4 waste: card2 = image1 (left) + card-body1 (right)*/
.card1 {
  background: #ffffff;
  border: 1px solid #CCCCCC;         /* fallback */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  overflow: hidden;

  display: flex;                     /* row layout */
  flex-direction: row;
  align-items: center;
}

/* Image column for science image of the CH4-breathing cow + CH4 waste*/
.image1 {
  display: flex;
  flex-grow: 1;
  width: auto;              /* left column width */
  height: auto;            /* keep aspect ratio */
}

/* Text column for science image of the CH4-breathing cow + CH4 waste*/
.card-body1 {
  flex-shrink: 1.5;                 
  padding: 1rem 1.5rem;
  display: block;          
}

/* Text column for science image of the C64 bacteria */
.card-body2 {
  flex-shrink: 2;                 
  padding: 1rem 1.5rem;
  display: block;          
}

/* Small screens: stack vertically (image on top) */
@media (max-width: 768px) {
  .card {
    display: block;
  }
}

/* Image column (left) */
.card img {
  display: block;
  width: 43%;              /* left column width */
  height: auto;            /* keep aspect ratio */
  /* If you prefer a fixed height crop, you may use:
     height: 320px; object-fit: cover;  (OK to keep even if validator warns)
  */
}


/* Small screens: full width image on top */
@media (max-width: 768px) {
  .card img {
    width: 100%;
    height: auto;          /* or 300px + object-fit: cover; if you want a crop */
  }
}

/* Text column (right) */
.card-body {
  flex: 1;                 /* fill the remaining space */
  padding: 1rem 1.5rem;
  display: block;          /* keep it simple for validator */
}


/* Add spacing between child elements instead of gap */
.card-body > * + * {
  margin-top: 0.5rem;
}


.card h3 {
  font-size: 1.1rem;
}

.card-link {
  display: inline-block;   /* ensures link behaves as block-like element */
  text-align: left;        /* aligns the text naturally to the start */
  font-weight: 600;
}


/* === Section projects background images === */
.section-bg-projects {
  position: relative;
  background: url("../images/section_project_background.jpg") no-repeat center center;
  background-size: cover;
  color: #000080;
  z-index: 0;
}

.section-bg-projects::before { 
  content: "";
  position: absolute;

  /* Replace inset: 0; with explicit sides */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* Add fallback before RGBA */
  background: #FFFFFF;                 /* fallback solid white */
  background: rgba(255, 255, 255, 0.7);/* translucent overlay */

  z-index: -1; /* keep it behind content */
}


/* Ensure container stays above overlay */
.section-bg-projects .container {
  position: relative;
  z-index: 1;
}

/* === Section science background images === */
.section-bg-science {
  position: relative;
  background: url("../images/section_science_background.jpg") no-repeat center center;
  background-size: cover;
  color: #000080;
  z-index: 0;
}

.section-bg-science::before {
  content: "";
  position: absolute;

  /* Replace inset shorthand with explicit sides */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* Fallback background first, RGBA second */
  background: #FFFFFF;                 /* solid fallback */
  background: rgba(255, 255, 255, 0.7);/* translucent white overlay */

  z-index: -1; /* keep it behind content */
}


/* Ensure container stays above overlay */
.section-bg-science .container {
  position: relative;
  z-index: 1;
}

/* === Section partners background images === */
.section-bg-partners {
  position: relative;
  background: url("../images/section_partners_background.jpg") no-repeat center center;
  background-size: cover;
  color: #000080;
  z-index: 0;
}

.section-bg-partners::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #ffffff;                  /* fallback solid colour */
  background: rgba(255, 255, 255, 0.7); /* white overlay at 70% opacity */
  z-index: -1; /* keep it behind content */
}

/* Ensure container stays above overlay */
.section-bg-partners .container {
  position: relative;
  z-index: 1;
}

.brand-title {
  display: flex;
  align-items: center;

  /* spacing between logo and text — no 'gap' */
  /* add class="brand-logo" on the logo element */
  /* e.g., <img class="brand-logo" ...> */
  font-size: 2rem;                 /* fallback (clamp min) */
  font-size: calc(1rem + 4.5vw);   /* responsive middle term */

  color: #1E90FF;
  letter-spacing: 0.5px;
  margin: 0 0 0.6rem;
}

/* replaces 'gap: 0.6rem;' without triggering validator warnings */
.brand-title .brand-logo { margin-right: 0.6rem; }

/* cap font size (clamp max) */
@media (min-width: 1600px) {
  .brand-title { font-size: 4.5rem; }
}


/* === Section people background images === */
.section-bg-people {
  position: relative;
  background: url("../images/section_people_background.jpg") no-repeat center center;
  background-size: cover;
  color: #000080;
  z-index: 0;
}

.section-bg-people::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #ffffff;                  /* fallback solid colour */
  background: rgba(255, 255, 255, 0.7); /* white overlay at 70% opacity */
  z-index: -1; /* keep it behind content */
}


/* Ensure container stays above overlay */
.section-bg-people .container {
  position: relative;
  z-index: 1;
}


/* Default (desktop/tablet) — what you already have */
.brand-logo {
  height: 1em; /* matches font size of title */
  width: auto;
}

/* On medium screens (e.g. tablets < 768px), shrink a little */
@media (max-width: 768px) {
  .brand-logo {
    height: 0.8em;
  }
}

/* On very small screens (e.g. phones < 480px), hide the logo */
@media (max-width: 480px) {
  .brand-logo {
    display: none;
  }
}