@layer global {
  /* archivo-regular - latin */
  @font-face {
    font-display: swap;
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400;
    src: url("../assets/fonts/archivo-v25-latin-regular.woff2") format("woff2");
  }
  /* archivo-700 - latin */
  @font-face {
    font-display: swap;
    font-family: "Archivo";
    font-style: normal;
    font-weight: 700;
    src: url("../assets/fonts/archivo-v25-latin-700.woff2") format("woff2");
  }

  /* candal-regular - latin */
  @font-face {
    font-display: swap;
    font-family: "Candal";
    font-style: normal;
    font-weight: 400;
    src: url("../assets/fonts/candal-v16-latin-regular.woff2") format("woff2");
  }

  /* Colors */
  :root {
    --c-dark-gray: hsl(0, 0%, 58%);
    --c-white: hsl(0, 0%, 100%);
    --c-black: hsl(0, 0%, 0%);
    --c-soft-gray: hsl(0, 0%, 85%);
    --c-lightest-gray: hsl(0, 0%, 89%);
    --c-lighter-gray: hsl(0, 0%, 83%);
    --c-light-gray: hsl(0, 0%, 82%);
    --c-green: hsl(102, 100%, 21%);
    --c-light-green: hsl(101, 42%, 38%);
    --c-grayish-white: hsl(0, 0%, 95%);
    --c-lime: hsl(102, 100%, 78%);
    --c-light-black: hsl(0, 0%, 16%);
    --c-darker-gray: hsl(0, 0%, 71%);
    --c-dark-gray: hsl(0, 0%, 88%);

    --color-navbar: var(--c-darker-gray);
    --color-bg: var(--c-lightest-gray);
    --color-button-primary: var(--c-green);
    --color-button-primary-text: var(--c-white);
    --color-button-secondary: var(--c-soft-gray);
    --color-button-secondary-text: var(--c-black);
    --color-system-overview-bg: var(--c-darker-gray);
    --color-system-overview-heading: var(--c-white);
    --color-system-overview-node-total: var(--c-white);
    --color-system-overview-node-active: var(--c-white);
    --color-system-overview-node: var(--c-dark-gray);
    --color-nodes-bg: var(--c-darker-gray);
    --color-nodes-heading: var(--c-white);
    --color-problem-heading: var(--c-light-green);
    --color-problem-card: var(--c-lighter-gray);
    --color-objective-heading: var(--c-light-green);
    --color-objective-card: var(--c-light-green);
    --color-objective-card-content: var(--c-white);
    --color-features-bg: var(--c-light-gray);
    --color-features-heading: var(--c-green);
    --color-features-content: var(--c-black);
    --color-features-card: var(--c-grayish-white);
    --color-features-card-heading: var(--c-green);
    --color-hiw-heading: var(--c-green);
    --color-hiw-card: var(--c-green);
    --color-hiw-card-heading: var(--c-lime);
    --color-hiw-card-content: var(--c-white);
    --color-footer-bg: var(--c-light-black);
    --color-footer-content: var(--c-white);
  }

  /* Fonts */
  :root {
    --fs-16: calc(16 / 16 * 1rem);
    --fs-20: calc(20 / 16 * 1rem);
    --fs-24: calc(24 / 16 * 1rem);
    --fs-28: calc(28 / 16 * 1rem);
    --fs-36: calc(36 / 16 * 1rem);
    --fs-40: calc(40 / 16 * 1rem);
    --fs-48: calc(48 / 16 * 1rem);

    --font-size-topnav: var(--fs-28);
    --font-size-hero: var(--fs-28);
    --font-size-system-overview-heading: var(--fs-48);
    --font-size-system-overview-node-description: var(--fs-16);
    --font-size-system-overview-node-value: var(--fs-40);
    --font-size-nodes-heading: var(--fs-48);
    --font-size-about-heading: var(--fs-48);
    --font-size-about-content: var(--fs-24);
    --font-size-problem-heading: var(--fs-48);
    --font-size-problem-content: var(--fs-24);
    --font-size-problem-content-card: var(--fs-24);
    --font-size-objective-heading: var(--fs-48);
    --font-size-objective-content: var(--fs-24);
    --font-size-objective-content-card: var(--fs-20);
    --font-size-features-heading: var(--fs-48);
    --font-size-features-content: var(--fs-24);
    --font-size-hiw-heading: var(--fs-48);
    --font-size-hiw-heading-card: var(--fs-36);
    --font-size-hiw-heading-card-content: var(--fs-24);
    --font-size-researcher-content: var(--fs-24);
    --font-size-footer-heading: var(--fs-36);
    --font-size-footer-content: var(--fs-24);
    --fonts-size-footer-copyright: var(--fs-16);
  }
  @media (max-width: 823px) {
    :root {
      --fs-4: calc(4 / 16 * 1rem);
      --fs-5: calc(5 / 16 * 1rem);
      --fs-6: calc(6 / 16 * 1rem);
      --fs-7: calc(7 / 16 * 1rem);
      --fs-8: calc(8 / 16 * 1rem);
      --fs-10: calc(10 / 16 * 1rem);
      --fs-12: calc(12 / 16 * 1rem);
      --fs-14: calc(14 / 16 * 1rem);
      --fs-16: calc(16 / 16 * 1rem);
      --fs-18: calc(18 / 16 * 1rem);
      --fs-20: calc(20 / 16 * 1rem);

      --font-size-topnav: var(--fs-14);
      --font-size-topnav-modal-message: var(--fs-16);
      --font-size-topnav-modal-button: var(--fs-14);
      --font-size-hero: var(--fs-10);
      --font-size-hero-button: var(--fs-14);
      --font-size-system-overview-heading: var(--fs-20);
      --font-size-system-overview-node-description: var(--fs-8);
      --font-size-system-overview-node-value: var(--fs-20);
      --font-size-nodes-heading: var(--fs-20);
      --font-size-nodes-title-card: var(--fs-10);
      --font-size-nodes-location-card: var(--fs-8);
      --font-size-nodes-status-card: var(--fs-7);
      --font-size-about-heading: var(--fs-20);
      --font-size-about-content: var(--fs-12);
      --font-size-problem-heading: var(--fs-20);
      --font-size-problem-content: var(--fs-10);
      --font-size-problem-content-card: var(--fs-10);
      --font-size-objective-heading: var(--fs-20);
      --font-size-objective-content: var(--fs-10);
      --font-size-objective-content-card: var(--fs-10);
      --font-size-features-heading: var(--fs-20);
      --font-size-features-content: var(--fs-10);
      --font-size-hiw-heading: var(--fs-20);
      --font-size-hiw-heading-card: var(--fs-14);
      --font-size-hiw-heading-card-content: var(--fs-10);
      --font-size-researcher-content: var(--fs-10);
      --font-size-footer-heading: var(--fs-14);
      --font-size-footer-content: var(--fs-8);
      --fonts-size-footer-copyright: var(--fs-8);
    }
  }

  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  body {
    line-height: 1.3;
    font-family: Archivo;
    background-color: var(--color-bg);
  }

  h1,
  h2,
  h3 {
    line-height: 1.1;
  }

  img,
  picture,
  svg {
    max-width: 100%;
    display: block;
    height: auto;
  }

  a {
    text-decoration: none;
  }

  ul ul {
    list-style-type: disc;
  }
}

/* Auth-aware UI styling for welcome message, dropdown menu, and logout confirmation modal
   These styles support the authentication workflow: display user info, dropdown options, and safe logout confirmation */
@layer component {
  /* Welcome message styling: Displays when user is logged in (e.g., "Welcome, John")
     Replaces Login/Signup buttons; acts as dropdown trigger */
  .topnav__welcome {
    font-family: Archivo;
    font-size: var(--font-size-topnav);
    color: var(--color-button-secondary-text);
    cursor: pointer;
    position: relative;
    transition: text-decoration 0.15s ease;
  }

  .topnav__welcome:hover {
    text-decoration: underline;
  }

  /* Dropdown menu for user account options (Profile Settings, Sign Out)
     Positioned below welcome text; hidden by default, shown when .active class applied */
  .topnav__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    display: none;
  }

  /* Dropdown visibility toggle: Only visible when parent has .active class */
  .topnav__dropdown.active {
    display: block;
  }

  /* Dropdown menu items: Profile Settings and Sign Out buttons
     Styled to look like menu items with hover feedback */
  .topnav__dropdown-item {
    padding: 12px 16px;
    color: var(--c-black);
    cursor: pointer;
    transition: background-color 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: Archivo;
    font-size: var(--fs-20);
  }

  .topnav__dropdown-item:hover {
    background-color: #f5f5f5;
  }

  /* Sign Out button styling: Color matches inactive node color (#a35544) for visual consistency
     This reinforces that signing out is an important action */
  .topnav__dropdown-item.sign-out {
    color: #a35544;
  }

  /* Logout Confirmation Modal: Full-screen overlay with centered content box
     Prevents accidental logouts by requiring explicit user confirmation
     Position: fixed creates overlay that covers entire viewport */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
  }

  /* Modal visibility: Only shown when .active class is applied */
  .modal-overlay.active {
    display: flex;
  }

  /* Modal content box: White card with shadow, centered on screen
     Contains confirmation message and action buttons (Decline/Confirm) */
  .modal-content {
    background: white;
    border-radius: 12px;
    padding: 60px;
    max-width: 400px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  }

  .modal-content h3 {
    margin: 0 0 35px 0;
    font-family: Archivo;
    font-size: var(--fs-24);
    color: var(--c-black);
  }

  .modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
  }

  .modal-button {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-family: Archivo;
    font-size: var(--fs-20);
    transition: opacity 0.15s;
  }

  .modal-button.confirm {
    background-color: var(--color-button-primary);
    color: var(--color-button-primary-text);
  }

  .modal-button.confirm:hover {
    opacity: 0.8;
  }

  .modal-button.decline {
    background-color: var(--color-button-secondary);
    color: var(--color-button-secondary-text);
  }

  .modal-button.decline:hover {
    filter: brightness(1.05);
  }

  @media (max-width: 823px) {
    .topnav__dropdown-item {
      padding: 10px 8px;
      font-size: var(--font-size-topnav);
      min-width: 100px;
    }

    .topnav__dropdown {
      min-width: 130px;
      border-radius: 6px;
    }

    .modal-content h3 {
      font-size: var(--font-size-topnav-modal-message);
      margin: 0 0 24px 0;
    }

    .modal-content {
      padding: 40px;
    }

    .modal-button {
      padding: 8px 16px;
      border-radius: 6px;
      font-size: var(--font-size-topnav-modal-button);
    }
  }
}

@layer component {
  .topnav {
    background-color: var(--color-navbar);
    font-size: var(--font-size-topnav);
  }

  .topnav__wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-inline: calc(65 / 16 * 1rem);
  }

  .topnav__links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(12 / 16 * 1rem);
    list-style-type: none;
  }

  .primary .topnav__link {
    color: var(--color-button-primary-text);
  }

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

  .topnav__homelink {
    padding-block: calc(8 / 16 * 1rem);
  }

  .topnav__logo {
    transition: opacity 0.15s;
  }

  .topnav__guest-container {
    align-items: center;
    justify-content: flex-end;
    gap: calc(12 / 16 * 1rem);
    list-style-type: none;
  }

  .topnav__logo:hover {
    opacity: 0.6;
  }

  #hero {
    padding-block: calc(60 / 16 * 1rem);
  }

  .hero__container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: calc(12 / 16 * 1rem);
    margin-bottom: calc(70 / 16 * 1rem);
  }

  .hero__logo {
    transition: opacity 0.15s;
  }

  .hero__logo:hover {
    opacity: 0.6;
  }

  .hero__contents {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-inline: calc(15 / 16 * 1rem);
  }

  .hero__content1 {
    font-size: var(--font-size-about-content);
    text-align: center;
  }

  .hero__button {
    font-size: var(--font-size-hero);
    cursor: pointer;
  }

  .primary a {
    color: var(--color-button-primary-text);
  }

  #system-overview {
    margin-bottom: calc(40 / 16 * 1rem);
  }

  .system-overview__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-system-overview-bg);
    flex-wrap: wrap;
    gap: calc(45 / 16 * 1rem);
    margin-inline: calc(43 / 16 * 1rem);
    border-radius: calc(20 / 16 * 1rem);
    padding-block: calc(40 / 16 * 1rem);
    margin-bottom: calc(6 / 16 * 1rem);
    cursor: pointer;
    transition: opacity 0.3s ease;
  }

  .system-overview__container:hover {
    opacity: 0.9;
  }

  .system-overview__cards {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: calc(16 / 16 * 1rem);
    justify-content: center;
    flex-direction: row;
  }

  .system-overview__heading {
    font-family: Candal, sans-serif;
    font-size: var(--font-size-system-overview-heading);
    color: var(--color-system-overview-heading);
  }

  .system-overview__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(28 / 16 * 1rem);
    padding-top: calc(30 / 16 * 1rem);
    padding-bottom: calc(10 / 16 * 1rem);
    border-radius: calc(20 / 16 * 1rem);
    background-color: var(--color-system-overview-node);
    width: calc(182 / 16 * 1rem);
  }

  .system-overview__totalcard,
  .system-overview__activecard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(28 / 16 * 1rem);
    padding-top: calc(30 / 16 * 1rem);
    padding-bottom: calc(10 / 16 * 1rem);
    border-radius: calc(20 / 16 * 1rem);
    background-color: var(--color-system-overview-node-total);
    width: calc(182 / 16 * 1rem);
  }

  .system-overview__cardvalue {
    font-size: var(--font-size-system-overview-node-value);
  }

  .system-overview__cardtype {
    font-size: var(--font-size-system-overview-node-description);
  }

  #nodes {
    margin-bottom: calc(40 / 16 * 1rem);
  }

  .nodes__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(55 / 16 * 1rem);
    background-color: var(--color-nodes-bg);
    margin-inline: calc(43 / 16 * 1rem);
    border-radius: calc(20 / 16 * 1rem);
    margin-bottom: calc(20 / 16 * 1rem);
    padding-block: calc(42 / 16 * 1rem);
  }

  .nodes__heading {
    font-size: var(--font-size-nodes-heading);
    font-family: Candal, sans-serif;
    color: var(--color-nodes-heading);
  }

  .nodes__cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(30 / 16 * 1rem);
    flex-direction: row;
    padding-inline: calc(104 / 16 * 1rem);
  }

  /* Styling for dynamically injected node cards */
  .nodes__card {
    display: flex;
    flex-direction: column;
    width: calc(280 / 16 * 1rem);

    background: white;
    border-radius: calc(15 / 16 * 1rem);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
  }

  .nodes__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }

  .nodes__card-map {
    width: 100%;
    height: calc(200 / 16 * 1rem);
    object-fit: cover;
    background-color: #e0e0e0;
    position: relative;
    /* BUG FIX #3: Allow clicks to pass through map to parent card handler
       This enables the entire card to be clickable, including the map area */
    pointer-events: none;
  }

  /* Ensure Leaflet map in preview renders properly */
  .nodes__card-map .leaflet-container {
    background: #e0e0e0;
    border-radius: 0;
  }

  .nodes__card-map .leaflet-tile-pane {
    border-radius: 0;
  }

  .nodes__card-status {
    position: absolute;
    top: calc(10 / 16 * 1rem);
    right: calc(10 / 16 * 1rem);
    width: calc(12 / 16 * 1rem);
    height: calc(12 / 16 * 1rem);
    border-radius: 50%;
    border: 2px solid white;
  }

  .nodes__card-status.status-active {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  }

  /* Inactive node status indicator: Use default color (not #a35544)
     BUG FIX: #a35544 should ONLY apply to map marker icons, not card elements
     Reverting to match active node styling in card; marker icon handles visual state */
  .nodes__card-status.status-inactive {
    background: linear-gradient(135deg, #f0f0f0 0%, #d0d0d0 100%);
  }

  /* Inactive node card: Removed border styling
     BUG FIX: Inactive coloring moved entirely to map marker (leaflet-marker-icon)
     Card appearance now matches active cards; marker icon provides status indication */
  .nodes__card.inactive-node {
    /* No special styling - inactive state indicated by marker color only */
  }

  .nodes__card-info {
    padding: calc(15 / 16 * 1rem);
    background: white;
  }

  .nodes__card-title {
    font-size: calc(16 / 16 * 1rem);
    font-weight: 700;
    color: #333;
    margin: 0 0 calc(5 / 16 * 1rem) 0;
  }

  .nodes__card-location {
    font-size: calc(14 / 16 * 1rem);
    color: #666;
    margin: 0 0 calc(5 / 16 * 1rem) 0;
  }

  .nodes__card-status-text {
    font-size: calc(12 / 16 * 1rem);
    color: #999;
    margin: 0;
  }

  .node-preview-marker__dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 12px;
  }

  #about {
    position: relative;
    padding-block: calc(46 / 16 * 1rem);
    color: white;
    z-index: 1;
    background-color: #45792e;
    overflow: hidden;
  }

  #about::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../Images/bg.png");
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    z-index: -1;
  }

  .about__wrapper {
    margin-inline: calc(101 / 16 * 1rem);
  }

  .about__container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-block: calc(48 / 16 * 1rem);
    gap: calc(26 / 16 * 1rem);
  }

  .about__heading {
    font-family: Candal, sans-serif;
    font-size: var(--font-size-about-heading);
  }

  .about__content {
    font-size: var(--font-size-about-content);
    font-weight: 400;
    text-align: center;
  }

  #problem-objectives {
    text-align: center;
    margin-block: calc(55 / 16 * 1rem);
  }

  .problem-objectives__container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: calc(20 / 16 * 1rem);
    align-items: baseline;
  }

  .problem-objectives__problem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(25 / 16 * 1rem);
    align-items: center;
  }

  .problem-objectives__objectives {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(20 / 16 * 1rem);
    align-items: center;
  }

  .problem-objectives__problemheading {
    font-family: Candal, sans-serif;
    font-size: var(--font-size-problem-heading);
    color: var(--color-problem-heading);
  }

  .problem-objectives__problemdescription {
    font-size: var(--font-size-problem-content);
    font-weight: 400;
    width: 100%;
    max-width: 559px;
  }

  .problem-objectives__problemcards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
  }

  .problem-objectives__problemcard {
    width: 100%;
    max-width: 330px;
    border-radius: 20px;
    background-color: var(--color-problem-card);
    padding-inline: calc(45 / 16 * 1rem);
    padding-block: calc(42 / 16 * 1rem);
  }

  .problem-objectives__problemcontent {
    font-weight: 400;
    font-size: var(--font-size-problem-content-card);
  }

  .problem-objectives__objectiveheading {
    color: var(--color-objective-heading);
    font-family: Candal, sans-serif;
    font-size: var(--font-size-problem-heading);
    width: 80%;
  }

  .problem-objectives__objectivedescription {
    font-size: var(--font-size-objective-content);
    font-weight: 400;
  }

  .problem-objectives__objectivecards {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: wrap;
    gap: calc(5 / 16 * 1rem);
  }

  .problem-objectives__objectivecontent {
    font-weight: 400;
    font-size: var(--font-size-objective-content-card);
    color: var(--color-objective-card-content);
  }

  .problem-objectives__objectivecard {
    font-weight: 400;
    width: 100%;
    max-width: 568px;
    background-color: var(--color-objective-card);
    padding-inline: calc(35 / 16 * 1rem);
    padding-block: calc(12 / 16 * 1rem);
    border-radius: calc(20 / 16 * 1rem);
    gap: calc(5 / 16 * 1rem);
    font-size: var(--font-size-objective-content-card);
  }

  @media (max-width: 1536px) {
    .topnav__guest-container {
      align-items: center;
      justify-content: flex-end;
      gap: calc(8 / 16 * 1rem);
      list-style-type: none;
    }

    .problem-objectives__container {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: calc(40 / 16 * 1rem);
      flex-wrap: wrap;
    }

    .problem-objectives__problemcards {
      flex-direction: column;
    }

    .problem-objectives__problemcard {
      width: 100%;
      max-width: 330px;
      border-radius: 20px;
      background-color: var(--color-problem-card);
      padding-inline: calc(45 / 16 * 1rem);
      padding-block: calc(42 / 16 * 1rem);
    }

    .problem-objectives__objectivecard {
      font-weight: 400;
      width: 100%;
      max-width: 568px;
      background-color: var(--color-objective-card);
      padding-inline: calc(35 / 16 * 1rem);
      padding-block: calc(12 / 16 * 1rem);
      border-radius: calc(20 / 16 * 1rem);
      gap: calc(5 / 16 * 1rem);
      font-size: var(--font-size-objective-content-card);
    }
  }

  #features {
    background-color: var(--color-features-bg);
    padding-block: calc(49 / 16 * 1rem);
  }

  .features__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(50 / 16 * 1rem);
    align-items: center;
  }

  .features__heading {
    color: var(--color-features-heading);
    font-size: var(--font-size-features-heading);
    font-family: Candal, sans-serif;
  }

  .features__cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(18 / 16 * 1rem);
  }

  .features__card {
    width: calc(670 / 16 * 1rem);
    font-size: var(--font-size-features-content);
    color: var(--color-features-content);
    border-radius: calc(30 / 16 * 1rem);
    background-color: var(--color-features-card);
    padding-inline: calc(25 / 16 * 1rem);
    padding-block: calc(42 / 16 * 1rem);
  }

  .features__cardheading {
    color: var(--color-features-card-heading);
  }

  #how-it-works {
    margin-block: calc(65 / 16 * 1rem);
  }

  .how-it-works__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .how-it-works__cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: calc(2 / 16 * 1rem);
    margin-top: calc(65 / 16 * 1rem);
  }

  .how-it-works__card {
    width: calc(270 / 16 * 1rem);
    background-color: var(--color-hiw-card);
    color: var(--color-hiw-card-content);
    font-size: var(--font-size-hiw-heading-card-content);
    text-align: center;
    padding-block: calc(39 / 16 * 1rem);
    padding-inline: calc(10 / 16 * 1rem);
    border-radius: calc(30 / 16 * 1rem);
    display: flex;
    flex-direction: column;
    gap: calc(20 / 16 * 1rem);
  }

  .how-it-works__cardheading {
    color: var(--color-hiw-card-heading);
    font-size: var(--font-size-hiw-heading-card);
  }

  .how-it-works__cardcontent {
    font-weight: 400;
  }

  .how-it-works__heading {
    color: var(--color-hiw-heading);
    font-family: Candal, sans-serif;
    font-size: var(--font-size-hiw-heading);
  }

  #researcher {
    padding-top: calc(40 / 16 * 1rem);
    padding-bottom: calc(80 / 16 * 1rem);
  }

  .researcher__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(40 / 16 * 1rem);
  }

  .researcher__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-researcher-content);
  }

  #footer {
    margin-top: auto;
  }

  .footer__container {
    padding-block: calc(48 / 16 * 1rem);
    background-color: var(--color-footer-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(40 / 16 * 1rem);
    color: var(--color-footer-content);
  }

  .footer__content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: calc(20 / 16 * 1rem);
  }

  .footer__heading {
    font-size: var(--font-size-footer-heading);
  }

  .footer__copyright {
    font-size: var(--fonts-size-footer-copyright);
    font-weight: 300;
  }

  /* Responsiveness Below Desktop (Tablet and Below) */

  @media (max-width: 823px) {
    .topnav {
      background-color: var(--color-navbar);
    }

    .topnav__wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-inline: calc(9 / 16 * 1rem);
    }

    .topnav__links {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: calc(12 / 16 * 1rem);
      list-style-type: none;
    }

    .primary .topnav__link {
      color: var(--color-button-primary-text);
    }

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

    .topnav__homelink {
      padding-block: calc(7 / 16 * 1rem);
    }

    .topnav__logo {
      transition: opacity 0.15s;
      width: calc(79 / 16 * 1rem);
    }

    .topnav__logo:hover {
      opacity: 0.6;
    }

    #hero {
      padding-block: calc(20 / 16 * 1rem);
    }

    .hero__container {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-top: calc(12 / 16 * 1rem);
      margin-bottom: calc(42 / 16 * 1rem);
    }

    .hero__logo {
      transition: opacity 0.15s;
      width: calc(168 / 16 * 1rem);
    }

    .hero__logo:hover {
      opacity: 0.6;
    }

    .hero__contents {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }

    .hero__content1 {
      font-size: var(--font-size-about-content);
    }

    .hero__button {
      font-size: var(--font-size-hero-button);
      cursor: pointer;
    }

    .primary a {
      color: var(--color-button-primary-text);
    }

    #system-overview {
      margin-bottom: calc(16 / 16 * 1rem);
    }

    .system-overview__container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: var(--color-system-overview-bg);
      flex-wrap: wrap;
      gap: calc(45 / 16 * 1rem);
      margin-inline: calc(20 / 16 * 1rem);
      border-radius: calc(15 / 16 * 1rem);
      padding-top: calc(14 / 16 * 1rem);
      padding-bottom: calc(25 / 16 * 1rem);
      margin-bottom: calc(6 / 16 * 1rem);
      cursor: pointer;
      transition: opacity 0.3s ease;
    }

    .system-overview__container:hover {
      opacity: 0.9;
    }

    .system-overview__cards {
      display: flex;
      align-items: stretch;
      flex-wrap: wrap;
      gap: calc(7 / 16 * 1rem);
      justify-content: center;
      flex-direction: row;
    }

    .system-overview__heading {
      font-family: Candal, sans-serif;
      font-size: var(--font-size-system-overview-heading);
      color: var(--color-system-overview-heading);
    }

    .system-overview__card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-wrap: wrap;
      align-items: center;
      gap: calc(13 / 16 * 1rem);
      padding-top: calc(12 / 16 * 1rem);
      padding-bottom: calc(7 / 16 * 1rem);
      border-radius: calc(10 / 16 * 1rem);
      background-color: var(--color-system-overview-node);
      width: calc(110 / 16 * 1rem);
      height: calc(70 / 16 * 1rem);
    }

    .system-overview__totalcard,
    .system-overview__activecard {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: calc(13 / 16 * 1rem);
      padding-top: calc(12 / 16 * 1rem);
      padding-bottom: calc(7 / 16 * 1rem);
      border-radius: calc(10 / 16 * 1rem);
      background-color: var(--color-system-overview-node-total);
      width: calc(110 / 16 * 1rem);
      height: calc(70 / 16 * 1rem);
    }

    .system-overview__cardvalue {
      font-size: var(--font-size-system-overview-node-value);
    }

    .system-overview__cardtype {
      font-size: var(--font-size-system-overview-node-description);
    }

    #nodes {
      margin-bottom: calc(40 / 16 * 1rem);
    }

    .nodes__container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: calc(20 / 16 * 1rem);
      background-color: var(--color-nodes-bg);
      margin-inline: calc(20 / 16 * 1rem);
      border-radius: calc(20 / 16 * 1rem);
      margin-bottom: calc(20 / 16 * 1rem);
      padding-block: calc(42 / 16 * 1rem);
    }

    .nodes__heading {
      font-size: var(--font-size-nodes-heading);
      font-family: Candal, sans-serif;
      color: var(--color-nodes-heading);
    }

    .nodes__cards {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: calc(16 / 16 * 1rem);
      flex-direction: row;
      padding-inline: calc(17 / 16 * 1rem);
    }

    /* Styling for dynamically injected node cards */
    .nodes__card {
      aspect-ratio: 100 / 125;
      display: flex;
      flex-direction: column;
      width: calc(140 / 16 * 1rem);
      background: white;
      border-radius: calc(6 / 16 * 1rem);
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      position: relative;
    }

    .nodes__card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .nodes__card-map {
      width: 100%;
      height: calc(125 / 16 * 1rem);
      object-fit: cover;
      background-color: #e0e0e0;
      position: relative;
      /* BUG FIX #3: Allow clicks to pass through map to parent card handler
       This enables the entire card to be clickable, including the map area */
      pointer-events: none;
    }

    /* Ensure Leaflet map in preview renders properly */
    .nodes__card-map .leaflet-container {
      background: #e0e0e0;
      border-radius: 0;
    }

    .nodes__card-map .leaflet-tile-pane {
      border-radius: 0;
    }

    .nodes__card-status {
      position: absolute;
      top: calc(10 / 16 * 1rem);
      right: calc(10 / 16 * 1rem);
      width: calc(12 / 16 * 1rem);
      height: calc(12 / 16 * 1rem);
      border-radius: 50%;
      border: 2px solid white;
    }

    .nodes__card-status.status-active {
      background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    }

    /* Inactive node status indicator: Use default color (not #a35544)
     BUG FIX: #a35544 should ONLY apply to map marker icons, not card elements
     Reverting to match active node styling in card; marker icon handles visual state */
    .nodes__card-status.status-inactive {
      background: linear-gradient(135deg, #f0f0f0 0%, #d0d0d0 100%);
    }

    /* Inactive node card: Removed border styling
     BUG FIX: Inactive coloring moved entirely to map marker (leaflet-marker-icon)
     Card appearance now matches active cards; marker icon provides status indication */
    .nodes__card.inactive-node {
      /* No special styling - inactive state indicated by marker color only */
    }

    .nodes__card-info {
      padding: calc(7 / 16 * 1rem);
      background: white;
    }

    .nodes__card-title {
      font-size: var(--font-size-nodes-title-card);
      font-weight: 700;
      color: #333;
      margin: 0 0 calc(2 / 16 * 1rem) 0;
    }

    .nodes__card-location {
      font-size: var(--font-size-nodes-location-card);
      color: #666;
      margin: 0 0 calc(3 / 16 * 1rem) 0;
    }

    .nodes__card-status-text {
      font-size: var(--font-size-nodes-status-card);
      color: #999;
      margin: 0;
    }

    .node-preview-marker__dot {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
      border: 2px solid white;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 9px;
    }

    #about {
      position: relative;
      padding-block: calc(30 / 16 * 1rem);
      color: white;
      z-index: 1;
      background-color: #45792e;
      overflow: hidden;
    }

    #about::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("../Images/bg.png");
      background-size: cover;
      background-position: center;
      opacity: 0.2;
      z-index: -1;
    }

    .about__wrapper {
      margin-inline: calc(30 / 16 * 1rem);
    }

    .about__container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding-block: calc(48 / 16 * 1rem);
      gap: calc(26 / 16 * 1rem);
    }

    .about__heading {
      font-family: Candal, sans-serif;
      font-size: var(--font-size-about-heading);
    }

    .about__content {
      font-size: var(--font-size-about-content);
      font-weight: 400;
      text-align: center;
    }

    #problem-objectives {
      text-align: center;
      margin-block: calc(30 / 16 * 1rem);
    }

    .problem-objectives__container {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: calc(40 / 16 * 1rem);
      flex-wrap: wrap;
    }
    .problem-objectives__problem {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: calc(14 / 16 * 1rem);
      align-items: center;
    }

    .problem-objectives__objectives {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: calc(20 / 16 * 1rem);
      align-items: center;
    }

    .problem-objectives__problemheading {
      font-family: Candal, sans-serif;
      font-size: var(--font-size-problem-heading);
      color: var(--color-problem-heading);
    }

    .problem-objectives__problemdescription {
      font-size: var(--font-size-problem-content);
      font-weight: 400;
      width: 100%;
      max-width: calc(184 / 16 * 1rem);
    }

    .problem-objectives__problemcards {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: stretch;
      gap: calc(4 / 16 * 1rem);
    }

    .problem-objectives__problemcard {
      width: 100%;
      max-width: calc(142 / 16 * 1rem);
      border-radius: 10px;
      background-color: var(--color-problem-card);
      padding-inline: calc(27 / 16 * 1rem);
      padding-block: calc(15 / 16 * 1rem);
    }

    .problem-objectives__problemcontent {
      font-weight: 400;
      font-size: var(--font-size-problem-content-card);
    }

    .problem-objectives__objectiveheading {
      color: var(--color-objective-heading);
      font-family: Candal, sans-serif;
      font-size: var(--font-size-problem-heading);
    }

    .problem-objectives__objectivedescription {
      font-size: var(--font-size-objective-content);
      font-weight: 400;
    }

    .problem-objectives__objectivecards {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      flex-wrap: wrap;
      gap: calc(4 / 16 * 1rem);
    }

    .problem-objectives__objectivecontent {
      font-weight: 400;
      font-size: var(--font-size-objective-content-card);
      color: var(--color-objective-card-content);
    }

    .problem-objectives__objectivecard {
      font-weight: 400;
      width: 100%;
      max-width: 300px;
      background-color: var(--color-objective-card);
      padding-inline: calc(15 / 16 * 1rem);
      padding-block: calc(10 / 16 * 1rem);
      border-radius: calc(10 / 16 * 1rem);
      gap: calc(5 / 16 * 1rem);
      font-size: var(--font-size-objective-content-card);
    }

    #features {
      background-color: var(--color-features-bg);
      padding-block: calc(49 / 16 * 1rem);
    }

    .features__container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: calc(39 / 16 * 1rem);
      align-items: center;
    }

    .features__heading {
      color: var(--color-features-heading);
      font-size: var(--font-size-features-heading);
      font-family: Candal, sans-serif;
    }

    .features__cards {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: calc(5 / 16 * 1rem);
    }

    .features__card {
      width: 100%;
      max-width: calc(301 / 16 * 1rem);
      font-size: var(--font-size-features-content);
      color: var(--color-features-content);
      border-radius: calc(10 / 16 * 1rem);
      background-color: var(--color-features-card);
      padding-inline: calc(16 / 16 * 1rem);
      padding-block: calc(15 / 16 * 1rem);
    }

    .features__cardheading {
      color: var(--color-features-card-heading);
    }

    #how-it-works {
      margin-top: calc(30 / 16 * 1rem);
      margin-bottom: 0;
    }

    .how-it-works__container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .how-it-works__cards {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: stretch;
      gap: calc(2 / 16 * 1rem);
      margin-top: calc(17 / 16 * 1rem);
    }

    .how-it-works__card {
      width: 100%;
      max-width: calc(118 / 16 * 1rem);
      background-color: var(--color-hiw-card);
      color: var(--color-hiw-card-content);
      font-size: var(--font-size-hiw-heading-card-content);
      text-align: center;
      padding-block: calc(11 / 16 * 1rem);
      padding-inline: calc(15 / 16 * 1rem);
      border-radius: calc(15 / 16 * 1rem);
      display: flex;
      flex-direction: column;
      gap: calc(20 / 16 * 1rem);
    }

    .how-it-works__cardheading {
      color: var(--color-hiw-card-heading);
      font-size: var(--font-size-hiw-heading-card);
    }

    .how-it-works__cardcontent {
      font-weight: 400;
    }

    .how-it-works__heading {
      color: var(--color-hiw-heading);
      font-family: Candal, sans-serif;
      font-size: var(--font-size-hiw-heading);
    }

    #researcher {
      padding-top: calc(18 / 16 * 1rem);
      padding-bottom: calc(16 / 16 * 1rem);
    }

    .researcher__container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: calc(21 / 16 * 1rem);
    }

    .researcher__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: var(--font-size-researcher-content);
      padding-inline: calc(10 / 16 * 1rem);
    }

    #footer {
      margin-top: auto;
    }

    .footer__container {
      padding-block: calc(16 / 16 * 1rem);
      background-color: var(--color-footer-bg);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: calc(3 / 16 * 1rem);
      color: var(--color-footer-content);
    }

    .footer__content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: calc(16 / 16 * 1rem);
      font-size: var(--font-size-footer-content);
    }

    .footer__heading {
      font-size: var(--font-size-footer-heading);
    }

    .footer__copyright {
      font-size: var(--fonts-size-footer-copyright);
      font-weight: 300;
    }
  }

  /* Larger Phones */

  @media (max-width: 430px) {
    .mobile-break {
      display: none;
    }

    .system-overview__cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: calc(7 / 16 * 1rem);
      justify-items: stretch;
    }

    .nodes__cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: calc(16 / 16 * 1rem);
      padding-inline: none;
    }

    .problem-objectives__objectivecard {
      width: 100%;
      max-width: 279px;
    }

    .features__card {
      width: 100%;
      max-width: calc(283 / 16 * 1rem);
    }
  }

  /* Super Narrow Phones */

  @media (max-width: 330px) {
    .hero__contents {
      text-align: center;
      width: 80%;
    }

    .problem-objectives__objectivecard {
      width: 100%;
      max-width: 210px;
    }

    .features__card {
      width: 100%;
      max-width: calc(250 / 16 * 1rem);
    }

    .system-overview__cards {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: calc(7 / 16 * 1rem);
      justify-items: stretch;
    }
    .nodes__cards {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: calc(16 / 16 * 1rem);
    }
  }
}

@layer utility {
  .primary {
    background-color: var(--color-button-primary);
    padding-inline: calc(32 / 16 * 1rem);
    border-radius: calc(10 / 16 * 1rem);
    padding-block: calc(7 / 16 * 1rem);
    border: none;
    transition: opacity 0.15s;
    cursor: pointer;
  }

  .primary:hover {
    opacity: 0.8;
  }

  .secondary {
    background-color: var(--color-button-secondary);
    padding-inline: calc(32 / 16 * 1rem);
    padding-block: calc(7 / 16 * 1rem);
    border-radius: calc(10 / 16 * 1rem);
    transition: filter 0.15s;
    border: none;
    cursor: pointer;
  }

  .secondary:hover {
    filter: brightness(1.05);
  }

  @media (max-width: 823px) {
    .primary {
      background-color: var(--color-button-primary);
      padding-inline: calc(10 / 16 * 1rem);
      border-radius: calc(5 / 16 * 1rem);
      padding-block: calc(4 / 16 * 1rem);
      border: none;
      transition: opacity 0.15s;
      cursor: pointer;
    }

    .primary:hover {
      opacity: 0.8;
    }

    .secondary {
      background-color: var(--color-button-secondary);
      padding-inline: calc(10 / 16 * 1rem);
      padding-block: calc(4 / 16 * 1rem);
      border-radius: calc(5 / 16 * 1rem);
      transition: filter 0.15s;
      border: none;
      cursor: pointer;
    }

    .secondary:hover {
      filter: brightness(1.05);
    }
  }
}

.landing-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.landing-page main {
  flex: 1;
}

/* Scaling support for browser zoom levels (1920x1080 @ 100% base design)
At 125% zoom, proportional scaling maintains layout without breaking or wrapping */
@supports (transform: scale(1)) {
  /* Ensure proper scaling behavior at different zoom levels */
  body {
    transform-origin: top center;
  }
}