/*Import Google font for footer and header*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* ----------- Logo styling ----------- */
/* Container for logo link, aligns logo vertically */
.logo-link {
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  text-decoration: none;
}

.logo-link:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* Logo scales with viewport instead of staying fixed at 90px */
.logo-img {
  height: clamp(40px, 9vw, 90px);
  width: auto;
  max-width: 500px;
  min-width: 100px;
  min-height: 100px;
  display: block;
}

.logo {
  /* padding instead of margin: guarantees space inside the header
     rather than pushing against a min-height that might not grow */
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 10px; /* space between logo and text */
}

.logo h3 {
  margin: 0;
  font-size: 25px;
  font-style: italic; /* remove default h3 margins so it aligns cleanly */
}

@media (max-width: 768px) {
  header {
    min-height: 200px;
    padding: 0.5rem 1.5rem;
  }
}

/* ----------- Headings ----------- */
h1 {
  color: rgb(5, 5, 114);
  font-size: 40px;
  font-family: "Gravitas One", serif;
  font-weight: 600;
  font-style: normal;
}

/* ----------- Page Text Styling ----------- */
h2 {
  color: #007bff;
  font-size: 30px;
  font-weight: bold;
}

h3 {
  color: #49a4ff;
  font-size: 18px;
}

/* ----------- Global Styles ----------- */
/* Reset default browser spacing and sets box model */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ----------- Header Styling----------- */
/* Fixes header bar to top of page */
header {
  background-color: #0080ff;
  padding: 0.5rem 2rem;
  position: fixed;
  top: 0;
  width: 100%;
  min-height: 100px;
  z-index: 500; /* raised above .sidebar-toggle (150) so the hamburger menu,
                   which is nested inside header, always paints on top of it.
                   Kept below .lightbox-modal (1000) so the image lightbox can
                   still cover the header when open. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 40, 100, 0.1);
}

/* Naviguation container - flexbox for horizontal layout and spacing */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative; /* needed for dropdown positioning */
}

/* ----------- Index Page Styling ----------- */
 .blue-block {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #49a4ff;
  padding: 60px;
  min-height: 600px;
  overflow: hidden; /* the mask */
}

.block-text {
  max-width: 50%;
  color: #ffffff;
  text-align: left;
  z-index: 1; /* keeps text above the image if they ever overlap */
}

.block-image {
  position: absolute;
  bottom: -30%;
  right: 5%;
  height: 120%;
  width: auto;
  max-width: none; /* don't let this fight with the height-based sizing */
  object-fit: cover;
  background: transparent;
}

/* ---- MOBILE ---- */
@media (max-width: 768px) {
  .blue-block {
    flex-direction: column;
    align-items: center;
    padding: 90px 24px;
    min-height: 900px; 
  }

  .block-text {
    max-width: 100%;
    margin-bottom: 24px;
    text-align: center;
    position: relative;
    z-index: 1; /* keeps text above the image if they ever overlap */
  }

  .block-image {
    height: 75%;
    bottom: -15%;

    /* centering instead of right-anchoring */
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

/*Index Tutorial Grid*/
.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1300px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .tutorial-grid {
    grid-template-columns: 1fr;
    gap: 0rem;
  }
}

/*Index Poster grid*/
.poster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1300px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .poster-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Index gallery grid */
.gallery {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

/* CSS Grid Layout - 2 Column Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* Gallery Item Styling */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 50px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.gallery-item img {
  width: 80%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.gallery-item a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: white;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}

/* Responsive Gallery */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .gallery h2 {
    font-size: 2rem;
  }
  
  .gallery-item img {
    height: 250px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .gallery-grid {
    gap: 1.5rem;
  }
}

/* ----------- Meet the Team Styling ----------- */
body {
    margin: 0;
    background: var(--paper);
    font-family: var(--font-body);
    color: var(--ink);
  }

  .team-group {
    margin-bottom: 25px;
  }

  .team-group:last-child {
    margin-bottom: 0;
  }

  .group-heading {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 12px;
  }

  .group-heading h2 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
  }

  .group-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
  }

  /* ---------- LEAD: image left, text to the right ---------- */
  .lead-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .lead-card {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
  }

  .lead-card .avatar {
    width: 250px;
    height: 250px;
    flex: 0 0 auto;
  }

  .lead-card .info {
    text-align: left;
  }

  .lead-card .name {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 0 0 4px;
  }

  .lead-card .role {
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin: 0 0 10px;
  }

  .lead-card .bio {
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
    max-width: 520px;
  }

  /* ---------- COMMITTEE: image top, text centered below ---------- */
  .committee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 32px;
  }

  .committee-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .committee-card .avatar {
    width: 250px;
    height: 250px;
    margin-bottom: 14px;
  }

  .committee-card .name {
    font-family: var(--font-display);
    font-size: 17px;
    margin: 0 0 3px;
  }

  .committee-card .role {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin: 0;
  }

  /* ---------- Shared circular image mask ---------- */
  .avatar {
    border-radius: 50%;
    overflow: hidden;
    background: var(--accent-soft);
    border: 1px solid var(--line);
  }

  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 768px) {
    .lead-card {
      flex-direction: column;
      text-align: center;
    }
    .lead-card .info {
      text-align: center;
    }
    .lead-card .bio {
      max-width: 100%;
    }
  }

/* ----------- Contact Section ----------- */
.contact-section{
    width:100%;
    max-width:1180px;
    background:var(--blue-dark);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(30,42,94,0.25);
  } 

  /* MAIN */
  .main{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:40px;
    padding:60px 40px 70px;
    align-items:start;
  }

  .contact-item{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-light);
    font-size:13px;
    margin-bottom:16px;
  }

  .contact-item .icon{
    width:28px;
    height:28px;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }

  .contact-item .icon svg{
    width:13px;
    height:13px;
    stroke:var(--text-light);
  }

  /* FORM CARD */
  .card{
    background:var(--white);
    border-radius:16px;
    padding:36px 36px 30px;
    position:relative;
    overflow:hidden;
  }

  .card-arcs{
    position:absolute;
    top:-30px;
    right:-30px;
    width:120px;
    height:120px;
    opacity:0.5;
    pointer-events:none;
  }

  .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:16px;
  }

  .field{ display:flex; flex-direction:column; gap:6px; }

  .field label{
    font-size:12px;
    font-weight:600;
    color:var(--blue-dark);
  }

  .field input,
  .field textarea{
    border:1px solid var(--border);
    border-radius:8px;
    padding:11px 12px;
    font-size:13px;
    color:var(--blue-dark);
    outline:none;
    font-family:inherit;
    transition:border-color 0.15s ease;
  }

  .field input::placeholder,
  .field textarea::placeholder{
    color:var(--placeholder);
  }

  .field input:focus,
  .field textarea:focus{
    border-color:var(--blue-accent);
  }

  .field-icon-wrap{
    position:relative;
    display:flex;
    align-items:center;
  }

  .field-icon-wrap input{ width:100%; padding-left:34px; }

  .field-icon-wrap .prefix-icon{
    position:absolute;
    left:11px;
    width:14px;
    height:14px;
    stroke:var(--placeholder);
    pointer-events:none;
  }

  .phone-wrap{
    display:flex;
    gap:8px;
  }
  .phone-wrap select{
    border:1px solid var(--border);
    border-radius:8px;
    padding:0 8px;
    font-size:13px;
    color:var(--blue-dark);
    background:var(--white);
    outline:none;
  }
  .phone-wrap input{ flex:1; }

  .field textarea{
    resize:none;
    min-height:80px;
  }

  @media (max-width:820px){
    .main{ grid-template-columns:1fr; }
    .nav-links{ display:none; }
  }

  @media (max-width:480px){
    .form-row{ grid-template-columns:1fr; }
    .nav{ padding:18px 20px; }
    .main{ padding:40px 20px 50px; }
  }

/* ----------- Naviguation links ----------- */
.nav-links {
  display: flex;
  list-style: none;
  transition: all 0.3s ease;
  gap: 1rem;
  padding-left: 2rem;
  flex-wrap: wrap;       /* let items drop to a new line instead of overflowing */
  max-width: 100%;       /* never exceed the viewport/parent width */
  box-sizing: border-box;
}

/* Individual link styling */
.nav-links a {
  color: #e3ebf8;
  text-decoration: none;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  padding-bottom: 0.25rem;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow-wrap: break-word;
}

/* Link Hover Effects */
.nav-links a:hover {
  color: #ffffff;
  border-bottom: white solid 3px;
  border-radius: 4px 4px 4px 4px;
}

/* Link Active Page indicator */
.nav-links a.active {
  color: #0057ad;
  border-bottom: #0057ad 3px;
}

/* ----------- Mobile Header Navigation ----------- */
/* 📱 Mobile breakpoint */
@media (max-width: 768px) {
  /* Adjust header padding and logo size for mobile */
  header {
    padding: 0.75rem 1rem;    /* tighter mobile spacing */
  }

  .logo {
    height: clamp(40px, 10vw, 55px); /* responsive mobile logo */
  }

  nav {
    width: 100%;
    display: flex;
    justify-content: space-between; /* logo left, hamburger right */
    align-items: center;
  }

  /* Hide normal nav, convert to hamburger menu */
  .nav-links {
    display: none;
    position: absolute;
    top: 70px;
    right: 20px;
    flex-direction: column;
    background-color: #0080ff;
    padding: 1rem;
    border-radius: 10px;
    gap: 1rem;
    width: 200px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }

  /* Show when JS toggles active */
  .nav-links.active {
    display: flex;
  }

  /* Slight font tweaks for mobile */
  .nav-links a {
    font-size: 1rem;
  }
}

/* ----------- Header Dropdown Menu ----------- */
/* Dropdown menu position relative to parent */
.nav-links li {
  position: relative;
  min-width: 0; 
}

/* Dropdown toggle styling */
.nav-links .dropdown-toggle {
  color: #ecf0f1;
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}

.nav-links .dropdown-toggle:hover {
  color: #ffffff;
  border-bottom: 3px solid #ffffff;
}


/* position the menu flush with the toggle so there's no gap to lose hover */
.nav-links .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* directly below the parent <li> */
  left: 0;
  background: #ffffff;
  color: #333333;
  list-style: none;
  padding: 0.25rem 0;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  min-width: 160px;
  z-index: 200;
}

/* Dropdown menu items */
.nav-links .dropdown-menu li a {
  display: block;
  padding: 0.5rem 1rem;
  color: #333333;
  text-decoration: none;
}

.nav-links .dropdown-menu li a:hover {
  background: #69b1ff;
  color: #000;
}

/* Hover behaviour to keep dropdown open */
.nav-links .dropdown:hover .dropdown-menu,
.nav-links .dropdown-menu:hover {
  display: block;
}

/* make the entire dropdown container keep showing while hovering anywhere inside it */
.nav-links .dropdown {
  /* ensure the <li> also includes the space under the toggle, avoids accidental mouseout */
  padding-bottom: 0.25rem;
}

/* Keep-open class for JS-driven hover persistence */
.nav-links .dropdown.open .dropdown-menu {
  display: block;
}

/* ----------- Header Items Dropdown ----------- */


/* ----------- Sidebar menu ----------- */
.container {
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr 3fr;  /* 1/4 and 3/4 */
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}

/* Sticky sidebar styling */
.sidebar {
  position: sticky;
  top: calc(5px + 7rem);
  height: fit-content;
  margin-top: 2rem;
  background-color: #f5f5f5;
  padding: 20px;
  box-sizing: border-box;
  z-index: 50;
}

.content {
  padding: 20px;
}

/* Sidebar list styling */
.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  list-style: none;
}

/* Sidebar links styling */
.sidebar a {
  text-decoration: none;
  color: #000000;
  display: block;
  padding: 10px;
  transition: all 0.3s;
}

.sidebar a:hover {
  text-decoration: none;
  background-color: #69b1ff;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  transition: all 0.3s;
}

/* Highlight active sidebar link */
.sidebar a.active {
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  font-weight: bold;
}

/* Page sections for scroll naviguation */
.page-section {
  min-height: auto; /* Ensures sections are long enough */
  border-bottom: 2px solid #2c73ff;
  padding: 2rem 0;
  scroll-margin-top: calc(60px + 2rem);
}

/* Responsive - single column on mobile */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

/* Button invisble except on mobile */
.sidebar-toggle {display: none;}

/* Swap to toggle on mobile*/
@media (max-width: 768px) {
    .sidebar-toggle {
        display: block; /* Show button on mobile */
        width: 100%;

        position: sticky;
        top: 110px;
        width: 100%;
        z-index: 150; /* keep above .sidebar (100) and the tab dropdown (20) */
        border-radius: 20px;
        
        background: #007bff;
        color: white;
        text-align: left;
        padding: 10px;
        font: inherit;
        font-weight: bold;
        border: none;
        cursor: pointer;

        transition: all 0.3s;
    }

    .sidebar-toggle::after{
    content: "▼";
    padding-right: 8px;
    float: right;
    }

    .sidebar {
        display: none; /* Hide sidebar by default */
        width: 100%;
        position: sticky;
        top: calc(60px + 4rem);
        height: fit-content;
         margin-top: 2rem;
        left: 0;
        background: #fff;
        border-radius: 20px;
        z-index: 100;
        overflow-y: auto;
    }

    .page-section {
      scroll-margin-top: calc(100px + 2rem);
    }

    /* Class added by JavaScript to show the menu */
    .sidebar.open {
        display: block;
    }
}

/* ----------- Understanding Paralysis page ----------- */

/*Highlighting text*/
.highlight {
  font-weight: bold;
}
/* Hover text definitions*/
.definition {
  text-decoration: underline;
}

.definition:hover {
  font-weight: bold;
  text-decoration: underline dotted;
  cursor: help;
  position: relative;
}

.definition::after {
  content: attr(definition-text);
  position: fixed;
  /* clamp horizontal position so the box (max 220px + padding) never overflows left/right */
  left: clamp(8px, var(--tx, 0px), calc(100vw - 244px));
  /* clamp vertical position with a generous estimated max height */
  top: clamp(8px, var(--ty, 0px), calc(100vh - 120px));

  background: #c0ddfa;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: #2382e1;
  box-shadow: 0 4px 16px rgba(0, 60, 160, 0.15);

  box-sizing: border-box;
  width: max-content;
  max-width: min(220px, calc(100vw - 24px)); /* also shrinks on narrow screens */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.4;

  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 100;
}

.definition:hover::after {
  opacity: 1;
}

/*Definition Index page styling*/

.introduction-to-definition-page {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background-color: #c0e9c5;
  border: 4px solid #629d69;
  border-radius: 30px;
  padding: 20px;
  margin-top: 1rem;
}

#introduction-to-definition-text h3 {
  color: #4f8856;
}

/*Care point styling*/

.care-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background-color: #f5dee1;
  border: 4px solid #e97993;
  border-radius: 30px;
  padding: 20px;
  margin-top: 1rem;
}

#care-point-text h3 {
  color: #e97993;
}

/*Tutorial styling*/

.tutorial {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background-color: #e8edfc;
  border: 4px solid #c9d7ff;
  border-radius: 30px;
  padding: 20px;
  margin-top: 1rem; 
}

#tutorial-text {
  flex: 1;
  gap: 10px;
}

#tutorial-text h3 {
  color: #49a4ff;
}

/* Icon and text grid styling (ie Eye Protection) */

.eye-icon-text-grid {
  display: grid;
  grid-template-columns: minmax(70px, auto) 1fr;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: start;
}

.eye-icon-text-item {
  display: contents; /* lets the icon and text sit directly in the grid */
}

.eye-icon-text-item img {
  width: 32px;
  height: 32px;
}

/* Icon and text grid styling (ie Causes of Paralysis) */

.icon-text-grid {
  display: grid;
  grid-template-columns: minmax(50px, auto) 1fr minmax(50px, auto) 1fr;
  gap: 0.75rem 0.75rem;
  align-items: center;
}

@media (max-width: 600px) {
  .icon-text-grid {
    grid-template-columns: minmax(50px, auto) 1fr;
  }
}

.icon-text-item {
  display: contents; /* lets the icon and text sit directly in the grid */
}

.icon-text-item img {
  width: 32px;
  height: 32px;
}

/* Icon and text list styling (ie Synkinesis) */
.icon-and-list {
  display: grid;
  grid-template-columns: auto 1fr;  /* icon takes its natural width, text takes the rest */
  align-items: start;
  gap: 14px;
  padding: 5px;
  margin-top: 1rem;
}

#icon-and-list-text {
  display: grid;
  gap: 10px;
  justify-items:start ;
}

@media (max-width: 768px) {
  .icon-and-list {
    grid-template-columns: 1fr;  /* stack into a single column on mobile */
  }
}

/* List Styling */

#causes-list {
  list-style-position: outside;
  margin-top: 10px;
  margin-left: 40px;
  margin-bottom: 10px;
}

#stages-list {
  list-style-position: outside;
  margin-top: 10px;
  margin-left: 40px;
  margin-bottom: 10px;
}

#synkinesis-treatment-list {
  list-style-position: outside;
  margin-top: 10px;
  margin-left: 40px;
}

/* ----------- Footer ----------- */
footer {
  width: 100%;
  position: relative;
  margin-top: 4rem;
  background-color: transparent;
  color: #ecf0f1;
  padding: 3rem 2rem 1rem;
  box-sizing: border-box;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background-color: #49a4ff;
  z-index: -1;
}

/* Footer layout - flexbox for horizontal sections and spacing */
.footer-content {
  display: flex;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Right align second footer column */
.footer-content .footer-section:nth-child(2) {
  margin-left: auto;
  text-align: right;
}

.footer-section {
  flex: 1;
  min-width: 200px;
}

/* Footer heading styling */
.footer-section h1 {
  font-size: 2.5rem;
  color: white;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.footer-section h3 {
  font-size: 1.5rem;
  color: white;
  margin-bottom: 1rem;
}

/* Footer text styling */
.footer-section p {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* Footer link list styling */
.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 0.5rem;
}

.footer-section a {
  color: #ecf0f1;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-section a:hover {
  transition: all 0.1s ease-in-out;
  color: white;
  border-bottom: white solid 2px;
}
 /* Footer copyright and bottom text styling */
.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
  font-size: 0.9rem;
  color: #e2f0fd;
}
/* Footer responsive adjustments - stack sections and center text on mobile */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-section {
    text-align: center;
    margin-bottom: 2rem;
    margin-left: 0;
    width: 100%;
  }
  .footer-content .footer-section:nth-child(2) {
    margin-left: 0;
    text-align: center;
  }
  footer {
    padding: 2rem 1rem 1rem;
  }
}

/* ----------- Main content Page structure ----------- */

/*Additional spacing and layout adjustments so that footer reaches bottom of page no matter what*/
html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Nunito', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f4f4f4;
  min-height: 100vh;
  display: block;
  flex-direction: column;
}

/* Main content area grows to fill space between header and footer */
main {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  min-height: calc(100vh - 400px);
}

.media-text-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

/* Ensures content doesn't touch edges on small screens */
@media (max-width: 768px) {
  main {
    padding: 1rem 1rem;
  }
  .content,
  .page-section,
  .container,
  .references-dropdown,
  .references-section {
    padding-left: 0rem;
    padding-right: 0;
    box-sizing: border-box;
  }
  .media-text-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------- Tab Section ----------- */
.tab-section {
    margin-top: 1rem;
    margin-bottom: 1rem;
    background-color: #e8edfc;
    border: 4px solid #c9d7ff;
    border-radius: 30px;
    padding: 15px;
}

.tabs-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.tab-button {
    flex: 1 1 auto; /* Allows items to grow and shrink based on content */
    text-align: center;
    gap: 20px;
    margin-bottom: 20px;
    color:#7c7c7c;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 12px;
    border-radius: 15px;
    font-size: 16px;
    margin: 3px;
  }

.tab-button.active {
    color: #0080ff;
    pointer-events: none; /* Makes the button "invisible" to the mouse */
    cursor: default;
    background-color: #c9d7ff;
    border-radius: 15px;
  }

.tab-button:hover {
    color: #0080ff;
    background-color: #c9d7ff;
    cursor: pointer;
}
  
@media (min-width: 769px) {
  @keyframes tabNeighborFlash {
    0%, 100% { background-color: transparent; }
    50% { background-color: #c9d7ff; }
  }

  .tab-section.in-view .tab-button.active + .tab-button {
    animation: tabNeighborFlash 0.8s ease-in-out 3;
  }
}

.tab-content {
    display: none;
    padding: 20px;
}

.tab-content.active {
    display: block;
}

.tab-img {
  width: 100%;
  max-width: 550px;
  height: auto;
  margin: 0 auto;
}

/* Mobile-only title bar shown above the image, and the prev/next arrows
   flanking it. Both hidden on desktop; the desktop tab-button row (the
   .tabs-container buttons) handles switching there instead. */
.tab-mobile-title { display: none; }

.tab-content-nav .tab-arrow {
  display: none;
}

/* Mobile responsive tabs - prevent overflow on small screens */
@media (max-width: 768px) {

  /* The row of tab-buttons is replaced by the title + arrows on mobile */
  .tabs-container {
    display: none;
  }

  /* Title bar - same look the dropdown toggle used to have, just static
     and centered instead of a clickable dropdown */
  .tab-mobile-title {
    display: block;
    width: 100%;
    border-radius: 20px;
    background: #c9d7ff;
    color: #0080ff;
    text-align: center;
    padding: 10px;
    font: inherit;
    font-weight: bold;
    margin-bottom: 0.75rem;
  }

  /* Row holding the prev arrow, image, and next arrow.
     The arrows are overlaid on top of the image (rather than sitting
     beside it in the flex row) so the image itself keeps the same
     full-width size as the non-tab images elsewhere on the page. */
  .tab-content-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tab-content-nav .tab-content-container {
    width: 100%;
  }

  .tab-content-nav .tab-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #c9d7ff;
    color: #0080ff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  .tab-content-nav .tab-arrow-prev {
    left: 5px;
  }

  .tab-content-nav .tab-arrow-next {
    right: 5px;
  }

  .tab-content-nav .tab-arrow:hover:not(:disabled) {
    background: #0080ff;
    color: #ffffff;
  }

  /* Faded + inert when there's no tab in that direction */
  .tab-content-nav .tab-arrow:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
  }
}

/* ----------- Buttons ----------- */

/* Style the download PDF button */
    #pdfBtn {
    border: none;
    outline: none;
    background-color: #0080ff;
    color: white;
    cursor: pointer;
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
    }
    #pdfBtn:hover {
    background-color: #85a5e8;
    }

 .button {
    display: inline-block;
    padding: 10px 20px;
    margin: 0.5rem;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius:40px;
    font-family: sans-serif;
    font-size: 16px;    /* ← added */
    border: none;       /* ← added */
}

  .button:hover {
    background-color: #85a5e8;
  }

/* Style the top of page button */
    #myBtn {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #0080ff;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    font-size: 16px;
    }

    #myBtn img {
    display: inline-block;
    padding-right: 5px;
    margin: 0;
    vertical-align: middle;
    }

    #myBtn:hover {
    background-color: #85a5e8;
    }

    html {
    scroll-behavior: smooth; /* Enables smooth scrolling */
    scroll-padding-top: 60px; /* Offset for fixed header */
    }

/* Download full page as PDF button */
.pdf-download-btn {
    border: none;
    outline: none;
    background-color: #0080ff;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    font-size: 16px;
}

.pdf-download-btn:hover {
    background-color: #85a5e8;
}

/* ----------- Smooth Scrolling ----------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 60px; /* Offset for fixed header */
}

/* ----------- Main Content Styling ----------- */
/* Make main content grow to push footer down */
main {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  width: 100%;
}

/* ----------- Individual Page Header Styling ----------- */
.page-header {
  text-align: left;
  padding: clamp(6rem, 12vw, 18rem) clamp(1rem, 5vw, 10rem) 4rem;
  background-color: #49a4ff;
  color: rgb(92, 162, 255);
  margin-bottom: 3rem;
  width: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background-color: #49a4ff;
  z-index: -1;
}

.page-header h1 {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  margin-bottom: 0.5rem;
  color: white;
}

.header-description {
  font-size: 1.1rem;
  color: #ecf0f1;
  font-style: italic;
}

/* ----------- References Sections Styling ----------- */

.references-dropdown {
  margin-top: 1rem;
}

.references-section {
  margin-top: 1rem;
    width:100%;
    max-width:1180px;
    background:var(--blue-dark);
    border-radius:20px;
    padding:1rem 2rem;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(30,42,94,0.25);
}

.references-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: inherit;
}

.references-toggle:hover {
  opacity: 0.7;
}

.triangle {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 0 0 2px 0;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.triangle.open {
  transform: rotate(225deg);
}

.references-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.references-content.open {
  max-height: 800px; /* Large enough to show content */
  padding: 1rem 0;
  overflow-wrap: break-word;
}

.references-content ul li {
  margin-bottom: 6px; /* adjust to taste */
}

/* Ensures content doesn't touch edges on small screens */
@media (max-width: 768px) {
  .references.content {
    padding: 1.5rem 1rem;
  }
}

.references.section h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.references.section p {
  line-height: 1.8;
  margin-bottom: 1rem;
  color: #555;
}

.references.section p:last-child {
  margin-bottom: 0;
}

/* ----------- Spaced List Styling ----------- */
.spaced-list li {
  list-style: none;
  margin-bottom: 10px; /* Adjust the value for more or less space */
}

/* ----------- Global Image Scaling ----------- */
/* ensure all images scale responsivly and never overflow their container */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ----------- Lightbox Modal Styling ----------- */
/* Images zoom in when clicked and have a blurred background - Lightbox Modal Styling */
.lightbox-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* when active, modal becomes active and visible */
.lightbox-modal.active {
  display: flex;
  opacity: 1;
}
 /*container for zoomed image and close button, allows for animation and styling*/
.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  animation: zoomIn 0.3s ease;
}

/* Zoom in for modal images */
@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* zoom in image styling */
.lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Close button styling */
.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s ease;
}

.lightbox-close:hover {
  color: #3498db;
}

/* makes gallry images clickable for zooming */
.screenshot-grid img {
  cursor: pointer;
  transition: transform 0.2s ease;
}
 /* slight zoom on hover to indicate interactivity */
.screenshot-grid img:hover {
  transform: scale(1.02);
}

/* Hide the checkbox */
.menu-toggle {
  display: none;
}

/* ----------- Hamburger menu for mobile ----------- */
/* Hide checkbox */
.menu-toggle {
  display: none;
}

/* Hamburger icon */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  z-index: 1100;
}

.hamburger span {
  width: 28px;
  height: 3px;
  background: white;
  border-radius: 3px;
  transition: 0.3s ease;
}

/* GLASS OVERLAY */
.glass-overlay {
  display: none;
}

@media (max-width: 768px) {

  /* Show hamburger */
  .hamburger {
    display: flex;
  }

  /* Glass blur background */
  .glass-overlay {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(12px);
    background: rgba(0, 0, 0, 0.25);
    z-index: 900;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  /* FULL-WIDTH DROPDOWN MENU */
  .nav-links {
    display: none;
    position: fixed;
    top: -350px; /* start hidden above screen */
    left: 0;
    width: 100vw; /* full width */
    flex-direction: column;
    background: #0080ff; /* header blue */
    padding: 2rem 1.5rem;
    gap: 1.5rem;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    z-index: 1000;

    /* Smooth slide + fade */
    opacity: 0;
    transition:
      top 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
      opacity 0.45s ease;
  }

  /* White text */
 /* Base link styling + animation start state */
.nav-links a {
  font-size: 1.25rem;
  color: white;
  text-decoration: none;
  border-bottom: 2px solid transparent;

  opacity: 0; /* start invisible */
  transform: translateY(10px); /* slide up */
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    border-color 0.3s ease;
  }

  /* White underline hover */
  .nav-links a:hover {
    border-bottom: 2px solid white;
  }

  /* When menu is toggled ON */
  .menu-toggle:checked ~ .glass-overlay {
    display: block;
    opacity: 1;
  }

  .menu-toggle:checked ~ .nav-links {
    display: flex;
    top: 70px; /* drops smoothly from hamburger */
    opacity: 1;
  }

  .menu-toggle:checked ~ .nav-links a {
  opacity: 1;
  transform: translateY(0);
  }

  /* Animate hamburger into X */
  .menu-toggle:checked + .hamburger span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .menu-toggle:checked + .hamburger span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle:checked + .hamburger span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* ----------- Disable dropdowns on mobile ----------- */
/* Only the top-level nav-links should show; dropdown-menus stay hidden permanently,
   overriding the hover/open rules that reveal them on desktop */
.nav-links .dropdown-menu,
.nav-links .dropdown:hover .dropdown-menu,
.nav-links .dropdown-menu:hover,
.nav-links .dropdown.open .dropdown-menu {
  display: none !important;
}

/* Dropdown toggles behave like plain nav links on mobile (no submenu to open) */
.nav-links .dropdown-toggle {
  cursor: default;
}

}