/* Root Variables */
:root {
    /* Colors */
    --primary-color: rgba(18, 18, 18, 0.95);    /* Dark grey background */
    --green: rgb(0, 150, 0);                    /* Green accent */
    --green-h: rgb(0, 175, 0);                  /* Green hover */
    --green-150: rgb(0,150,0);
    --maintext: White;                          /* White text */
    --text-muted: rgb(170, 170, 170);           /* Light grey for less emphasis */
    --background-color: rgba(50, 50, 50, 1.0);  /* Black background */
    --header-bg-color: var(--primary-color);      /* Reusing primary color */
    --footer-bg-color: var(--primary-color);

    /* Fonts */

    /* Define specific font families for different elements in your Root Variables to eliminate redundancy: */
    /* --header-font: "ethnocentric", sans-serif;
    --body-font: "Arial", sans-serif; */

    --font-family: 'Arial', sans-serif;
    --font-size-large: 1.5rem;
    --font-size-medium: 1.25rem;
    --font-size-small: 1rem;

    --font-family: 'Copperplate', 'Arial', sans-serif; /* Copperplate with fallbacks */
    --font-size-large: 1.5rem;
    --font-size-medium: 1.25rem;
    --font-size-small: 1rem;

                /* Aviano Future Regular */
                --font-family: "aviano-future", sans-serif;
                --font-weight: 400;
                --font-style: normal;
                /* Aviano Future Regular Fast */
                --font-family: "aviano-future", sans-serif;
                --font-weight: 400;
                --font-style: italic;
                /* Aviano Future Bold */
                --font-family: "aviano-future", sans-serif;
                --font-weight: 700;
                --font-style: normal;
                /* Aviano Future Bold Fast */
                --font-family: "aviano-future", sans-serif;
                --font-weight: 700;
                --font-style: normal;
                /* Aviano Future Black */
                --font-family: "aviano-future", sans-serif;
                --font-weight: 800;
                --font-style: normal;
                /* Aviano Future Black Fast */
                --font-family: "aviano-future", sans-serif;
                --font-weight: 800;
                --font-style: normal;
                /* Aviano Future Heavy */
                --font-family: "aviano-future", sans-serif;
                --font-weight: 900;
                --font-style: normal;
                /* Aviano Future Heavy Fast */
                --font-family: "aviano-future", sans-serif;
                --font-weight: 900;
                --font-style: normal;

        /* Ethnocentric UltraLight */
        --font-family: "ethnocentric", sans-serif;
        --font-weight: 100;
        --font-style: normal;
        /* Ethnocentric UltraLight Italic */
        --font-family: "ethnocentric", sans-serif;
        --font-weight: 100;
        --font-style: italic;
        /* Ethnocentric ExtraLight */
        --font-family: "ethnocentric", sans-serif;
        --font-weight: 200;
        --font-style: normal;
        /* Ethnocentric ExtraLight Italic */
        --font-family: "ethnocentric", sans-serif;
        --font-weight: 200;
        --font-style: italic;
        /* Ethnocentric Light */
        --font-family: "ethnocentric", sans-serif;
        --font-weight: 300;
        --font-style: normal;
        /* Ethnocentric Light Italic */
        --font-family: "ethnocentric", sans-serif;
        --font-weight: 300;
        --font-style: italic;
        /* Ethnocentric Regular */
        --font-family: "ethnocentric", sans-serif;
        --font-weight: 400;
        --font-style: normal;
        /* Ethnocentric Italic */
        --font-family: "ethnocentric", sans-serif;
        --font-weight: 400;
        --font-style: italic;
        /* Ethnocentric Bold */
        --font-family: "ethnocentric", sans-serif;
        --font-weight: 700;
        --font-style: normal;
        /* Ethnocentric Bold Italic */
        --font-family: "ethnocentric", sans-serif;
        --font-weight: 700;
        --font-style: italic;            

    /* Spacing */
    --padding-small: 0.625rem;
    --padding-medium: 1.25rem;
    --padding-large: 2.5rem;

    /* Border Radius */
    --border-radius: 15px;
}

/* 
REM Value	    Pixel (px) Equivalent
0.25rem	        4px
0.5rem	        8px
0.625rem        10px
0.75rem	        12px
1rem	        16px
1.25rem	        20px
1.5rem	        24px
1.75rem	        28px
2rem	        32px
2.5rem	        40px
3rem	        48px
3.5rem	        56px
4rem	        64px
5rem	        80px
6rem	        96px
6.25rem         100px
7rem	        112px
8rem	        128px
9rem	        144px
10rem	        160px
31.25rem        500px
62.5rem         1000px
*/

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Back to Top Button */
.back-to-top{
  position: fixed;
  z-index: 1000;

  /* mobile-first: centered above footer */
  left: 50%;
  transform: translateX(-50%);
  bottom: 78px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  /* solid bubble */
  background: var(--green);     /* green fill */
  border: none;                 /* no outline */
  color: #fff;                  /* arrow + text = white */
  border-radius: 999px;

  /* circular on mobile */
  width: 48px;
  height: 48px;
  padding: 0;

  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease, box-shadow .25s ease;
  min-width: 44px;
  min-height: 44px;
}

.back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Arrow sizing */
.back-to-top .arrow{
  width: 26px;
  height: 26px;
  display: block;
}

/* Hide text on small screens */
.back-to-top__text{
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
}

/* Hover/focus: scale up slightly */
.back-to-top:hover,
.back-to-top:focus-visible{
  transform: translateX(-50%) translateY(0) scale(1.08);
  outline: none;
}

/* Body and Background Styling */
body {
    background-color: var(--background-color);
    color: var(--maintext);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 60px;                       /* Matches or slightly exceeds the footer's height to give room for the footer */
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -40px; /* Hidden above the viewport */
    left: 75%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure proper centering */
    background-color: var(--green); /* Background color for visibility */
    font-family: var(--font-family);
    color: var(--maintext); /* Text color */
    padding: 10px 15px;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 5px;
    z-index: 100; /* Ensure it appears above other elements */
    transition: top 0.3s ease, opacity 0.3s ease; /* Smooth transition when focused */
    opacity: 0; /* Initially hidden */
    pointer-events: none; /* Prevent interaction */
}

/* Visible only when focused */
.skip-link:focus {
    top: 10px; /* Bring it into view when focused */
    opacity: 1; /* Make it visible */
    pointer-events: auto; /* Enable interaction */
    outline: none; /* Remove the default browser focus outline */
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;

  background-color: var(--background-color);
  position: fixed;
  top: -10px;          /* overshoot upwards */
  left: 0;
  right: 0;
  height: calc(80px + 10px); /* original height + overshoot */
  z-index: 100;
  isolation: isolate;
}

header .logo {
    font-family: "ethnocentric", sans-serif;
    font-size: 28px;
    font-weight: bold;
    cursor: default;
}

/* Logo Styling */
.logo a {
    text-decoration: none;                      /* Remove underline */
    color: var(--maintext);                     /* Keep the logo text color */
    font-size: 28px;                            /* Adjust size if needed */
    font-family: "ethnocentric", sans-serif;    /* Apply existing logo font */
    font-weight: bold;
    transition: color 0.3s ease;                /* Add hover effect */
    cursor: default;
}

.logo a:hover {
    color: var(--green); /* Optional hover color */
}

nav {
    display: flex;
    gap: 20px;
    cursor: default; /* Default pointer for regular nav links */
}

/* Nav Links */
nav a {
    font-family: "ethnocentric", sans-serif;
    text-decoration: none;
    color: var(--maintext);
    font-size: 16px;
    position: relative;
    transition: color 0.3s ease;    /* Smooth color transition */
    cursor: default;                /* Default pointer for regular nav links */
}

nav a:hover {
    color: var(--green); /* Green accent on hover */
}

/* Dropdown Container */
.dropdown {
    position: relative;
    cursor: default; /* Ensure arrow cursor for dropdown content */
}

/* Dropdown Content (Initially Hidden) */
.dropdown-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;                      /* Directly below the "Apps" link */
    left: 0;
    transform: translateY(10px);    /* Start slightly below for animation */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
    flex-direction: column;
    gap: 20px;                      /* Space between list items, adjust in tandem w/.dropdown-content a padding */
    padding: 10px 0;                /* Padding to create space around items */
    pointer-events: none;           /* Disable interaction when hidden */
    cursor: default;                /* Ensure arrow cursor for dropdown content */
}

/* Show Dropdown on Hover */
/* Ensure Dropdown Stays Visible on Hover */
.dropdown:hover .dropdown-content,
.dropdown-content:hover {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);       /* Slide up into view */
    pointer-events: auto;           /* Enable interaction */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Dropdown Links */
.dropdown-content a {
    color: var(--maintext);
    text-decoration: none;
    font-size: 16px;
    padding-top: 15px;              /* Padding inside each item */
    padding-bottom: 15px;
    cursor: default; /* Ensure arrow cursor for dropdown content */
}

/* hover effect for better interaction */
.dropdown-content a:hover {
    color: var(--green);
}

/* HAMBURGER BASE   HAMBURGER BASE   HAMBURGER BASE   HAMBURGER BASE   HAMBURGER BASE   HAMBURGER BASE */
.hamburger {
  display: none; /* desktop hidden */
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  line-height: 0;
}

.hamburger-box {
  display: inline-block;
  width: 28px;
  height: 20px;
  position: relative;
}

.hamburger-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--maintext);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 200ms ease, opacity 200ms ease, top 200ms ease, background 200ms ease;
}
.hamburger-bar:nth-child(1) { top: 0; }
.hamburger-bar:nth-child(2) { top: 9px; }
.hamburger-bar:nth-child(3) { top: 18px; }

/* active (X) */
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  top: 9px; transform: rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  top: 9px; transform: rotate(-45deg);
}

/* App Sections */
main {
    display: flex;
    flex-direction: column;
    gap: 12.5rem; /* Spacing between app sections */
    padding-left: 40px;
    padding-right: 40px;
    padding-top: calc(60px + 20px); /* Account for the header height and additional spacing */
    padding-bottom: 100px; /* Lifts the main content out of the footer so the footer doesn't hide it */
    transition: padding-top 0.3s ease; /* Smooth adjustment for dropdown interaction */
}

/* Adjust scroll position for sections */
section {
    scroll-margin-top: 80px;        /* Matches the height of the fixed header */
}

.coming-soon {
    text-align: center;                                                         /* Center-align the text */
    padding: 50px 20px;                                                         /* Add spacing around the section */
    /* background: linear-gradient(135deg, rgb(50, 50, 50), rgb(25, 25, 25));      Optional gradient background */
    border-radius: var(--border-radius);                                        /* Smooth rounded corners */
    color: var(--maintext);                                                     /* Use main text color */
    font-family: 'Poppins', sans-serif;                                         /* Custom font */
    max-width: 800px;                                                           /* Limit the section's width */
    margin: 40px auto;                                                          /* Center the section on the page */
    /* box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);                                 Optional shadow for depth */
}

.coming-soon h1 {
    font-size: 2rem;     /* Larger font size for the heading */
    margin-bottom: 20px; /* Space below the heading */
    font-weight: bold;
    color: var(--green); /* Optional green color for the heading */
}

.coming-soon p {
    font-size: 1.25rem;  /* Slightly larger font for the paragraph */
    line-height: 1.6;    /* Improve readability */
    margin-bottom: 20px; /* Space below the paragraph */
}

.coming-soon a {
    color: var(--green);    /* Match your app's accent color */
    text-decoration: none;  /* Remove underline */
    font-weight: bold;      /* Emphasize the link */
}

.coming-soon a:hover {
    color: var(--green-h);      /* Brighter green on hover */
    text-decoration: underline; /* Add underline on hover for better UX */
}

/* App Overview Section */
.app-overview {
    text-align: center; /* Center-align the content */
    padding: 50px 20px;
}

.app-icon {
    width: 300px; /* Twice the size from the home page */
    height: 300px;
    object-fit: cover;
    margin-bottom: 20px;
}

.app-title {
    font-size: 2.5rem;
    color: var(--maintext);
    margin-bottom: 20px;
}

.app-description {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* App Images Section */
.app-images .media-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Original grid settings */
    gap: 1rem; /* Specific gap for the images section */
    margin-bottom: 100px; /* Spacing below the heading */
}

.app-images {
    padding: 50px 20px; /* Same padding for consistency */
    text-align: center;
}

.app-images h2 {
    font-size: 2rem;
    color: var(--maintext);
    margin-bottom: 100px; /* Spacing below the heading */
}

/* App Videos Section */
.app-videos .media-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Original grid settings */
    gap: 1rem; /* Specific gap for the videos section */
}

.app-videos {
    padding: 50px 20px; /* Same padding for consistency */
    text-align: center;
}

.app-videos h2 {
    font-size: 2rem;
    color: var(--maintext);
    margin-bottom: 100px; /* Spacing below the heading */
}

/* Media Container (Shared for Images and Videos) */
/* .media-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 4rem; 
} */

.media-item {
    text-align: center;
}

.media-item img,
.media-item video {
    width: 100%;                            /* Responsive sizing */
    max-width: 400px;                       /* Limit the maximum width */
    height: auto;                           /* Maintain aspect ratio */
    border-radius: var(--border-radius);    /* Rounded corners */
}

figcaption {
    font-size: 1rem;            /* Caption styling */
    color: var(--text-muted);   /* Light color for less emphasis */
    margin-top: 32px;
}

.media-item:hover img,
.media-item:hover video {
    transform: scale(1.05); /* Hover zoom effect */
    transition: transform 0.3s ease;
}

/* Adjust scroll position for sections */
section {
    scroll-margin-top: 80px;        /* Matches the height of the fixed header */
}








.privacy-policy {
    max-width: 1200px;
    margin: 5rem auto;
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    color: var(--maintext);
    line-height: 1.6;
}

.privacy-policy h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.privacy-policy a {
    color: var(--green);
    text-decoration: underline;
}








.applink {
    display: flex;                                                              /* Ensures the content can be aligned */
    justify-content: center;                                                    /* Centers content horizontally */
    align-items: center;                                                        /* Centers content vertically */
    flex-direction: column;                                                     /* Stacks items vertically */
    text-align: center;                                                         /* Centers text within the container */
    padding: 20px;                                                              /* Adds spacing around the content */
    font-family: 'Poppins', sans-serif;                                         /* Replace with your preferred font */
    font-size: 1.5rem;                                                          /* Adjust font size for visibility */
    color: white;                                                             /* Ensure good contrast with the gradient background */
    background: linear-gradient(135deg, rgb(0, 150, 0), rgb(0, 175, 255));  /* Adds a gradient background */
    border-radius: var(--border-radius);                                        /* Optional: Adds rounded corners */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);                               /* Optional: Adds a subtle shadow */
    max-width: 600px;                                                           /* Restrict the content width */
    margin: 20px auto;                                                          /* Center the element on the page */
}

.applink a {
   font-family: 'Poppins', sans-serif;                                         /* Replace with your preferred font */
   font-size: 2rem; 
   font-weight: bold;                                                         /* Adjust font size for visibility */
   color: white;
   text-decoration: none; 
   outline: none;    
   transition: transform 0.3s ease, color 0.3s ease;
}

.applink a:hover,
.applink a:focus-visible {
   transform: scale(1.15);                   /* grows on hover */
}

/* Footer */
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;

  background-color: var(--background-color);
  position: fixed;
  bottom: -10px;         /* overshoot downwards */
  left: 0;
  right: 0;
  height: calc(var(--footer-h) + 10px); /* original footer height + overshoot */
  z-index: 10;
}

/* R.E.D. Logo */
.red-logo {
    flex: 0 0 auto; /* Prevent stretching */
}

.red-logo a {
    text-decoration: none; /* Remove underline */
    display: inline-block;
}

.red-logo-image {
    width: 100px;                       /* Adjust size */
    height: auto;                       /* Maintain aspect ratio */
    transition: transform 0.3s ease;    /* Smooth hover effect */
    cursor: default;
}

.red-logo-image:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

/* Footer Copyright */
footer p {
    flex: 1;                /* Take up remaining space to center-align */
    text-align: center;     /* Center text */
    color: var(--maintext); /* Text color */
    margin: 0;              /* Remove default margin */
}

/* Social Media Links */
.social-links {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 0 0 auto;
    position: relative;
}

.social-links a {
    text-decoration: none;
    color: var(--maintext);                             /* Match footer text color */
    font-size: 24px;                                    /* Icon size */
    transition: color 0.3s ease, transform 0.3s ease;   /* Hover effect */
    cursor: default;
}

.social-links a:hover {
    color: var(--green-h); /* Green hover color */
    transform: scale(1.2); /* Slightly enlarge on hover */
}








/* MEDIA QUERIES    MEDIA QUERIES    MEDIA QUERIES    MEDIA QUERIES    MEDIA QUERIES    MEDIA QUERIES */


/* Show text next to arrow on larger screens */
@media (min-width: 900px){
  .back-to-top{
    right: 24px;
    left: auto;
    transform: none;
    height: auto;
    width: auto;
    padding: .5rem .9rem;
  }
  .back-to-top.is-visible{ transform: translateY(0); }

  .back-to-top__text{
    position: static; clip: auto; clip-path: none;
    width: auto; height: auto; overflow: visible;
    font-weight: 600;
    color: #fff;
  }

  .back-to-top .arrow{ width: 24px; height: 24px; }

  /* keep scale effect for desktop too */
  .back-to-top:hover,
  .back-to-top:focus-visible{
    transform: scale(1.08);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition: none; }
}

/* ===== DESKTOP LAYOUT (nav lives in the header bar) ===== */
@media (min-width: 769px) {
  /* put the nav back into the header visually */
  #primary-nav {
    position: fixed;                    /* share the header's bar */
    top: 0;
    right: 40px;                        /* match header right padding */
    height: var(--header-h, 80px);      /* JS sets --header-h; 80px fallback */
    display: flex;
    align-items: center;
    gap: 20px;
    background: transparent;
    transform: none !important;         /* override mobile translate */
    visibility: visible !important;     /* ensure visible after resize */
    pointer-events: auto !important;
    z-index: 101;                       /* above page content; header is 100 */
  }

  /* hide hamburger on desktop */
  .hamburger { display: none !important; }

  /* keep your desktop dropdown-on-hover behavior */
  #primary-nav .dropdown { position: relative; }
  #primary-nav .dropdown .dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(10px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, visibility 0s .3s;
    gap: 20px;
    padding: 10px 0;
  }
  #primary-nav .dropdown:hover .dropdown-content,
  #primary-nav .dropdown .dropdown-content:hover {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .3s ease, transform .3s ease;
  }

  /* make sure main content is pushed below fixed header */
  main {
    padding-top: calc(var(--header-h, 80px) + 20px);
  }
}

@media (max-width: 768px) {
  /* Header stays one line: logo left, hamburger right */
  header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
  }
  header .logo { margin: 0; text-align: left; line-height: 1; }

  /* Show hamburger on mobile */
  .hamburger { display: inline-block; margin-left: auto; }

  /* Mobile overlay panel: lives *below* the header */
#primary-nav {
  position: fixed;
  top: calc(var(--header-h, 70px));
  left: 0; right: 0;
  height: calc(100vh - var(--header-h, 70px));
  background: var(--background-color);
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px;
  z-index: 1;           /* header is 100; inside header we stack logo/hamburger (2) over nav (1) */
  will-change: transform;

  /* CLOSED: hide under header, non-interactive */
  transform: translateY(-100%);                 /* use %-of-panel, not -100vh */
  visibility: hidden;
  pointer-events: none;                          /* prevent phantom clicks */
  transition: transform 240ms ease, visibility 0s linear 240ms;
  z-index: 9;                                    /* header stays above (10+) */
  overflow-y: auto;
}

/* OPEN */
#primary-nav[data-state="open"] {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 240ms ease;              /* drop the visibility delay */
}

  /* Full-width, finger-friendly links */
  #primary-nav a {
    font-size: 1.05rem;
    padding: 8px 4px;
    text-align: left;
  }

/* ========= Apps dropdown: click-to-open accordion (mobile) ========= */
#primary-nav .dropdown { order: 99; width: 100%; }

#primary-nav .dropdown > a {
  display: block;
  width: 100%;
  padding: 8px 4px;
}
/* no caret */
#primary-nav .dropdown > a::after { content: none !important; }

/* COLLAPSED (default) */
#primary-nav .dropdown .dropdown-content {
  position: static;
  transform: none;
  visibility: visible;     /* we animate height/opacity only */
  opacity: 0;
  max-height: 0;           /* collapsed */
  overflow: hidden;        /* no scroll when closed */
  padding: 0;              /* no padding while collapsed to avoid jitter */
  margin-left: 0;
  transition:
    max-height 300ms ease,
    opacity 220ms ease,
    padding 220ms ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  will-change: max-height, opacity, padding;
}

/* EXPANDED (JS sets data-open="true" on .dropdown) */
#primary-nav .dropdown[data-open="true"] .dropdown-content {
  /* make the list scrollable but capped to viewport */
  max-height: min(60vh, 28rem);  /* adjust to taste */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* smooth iOS scroll */
  overscroll-behavior: contain;        /* prevent scroll chaining into panel */
  
  opacity: 1;
  padding-top: 6px;
  padding-left: 14px;          /* subtle group indent */
}

/* Optional: small indent per-link for clarity */
#primary-nav .dropdown .dropdown-content a {
  display: block;
  padding: 8px 0 8px 8px;      /* per-item indent */
}

/* (Still no caret/arrow) */
#primary-nav .dropdown > a::after { content: none !important; }

/* IMPORTANT: neutralize desktop hover/focus behaviors in mobile panel */
#primary-nav .dropdown:hover .dropdown-content,
#primary-nav .dropdown:focus-within .dropdown-content {
  /* do not change max-height here */
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Links inside Apps list */
#primary-nav .dropdown .dropdown-content a {
  display: block;
  width: 100%;
  padding: 8px 0;
}
/* ========================================================== */

  /* Lock page scroll when menu open */
  body.menu-open { overflow: hidden; }

  /* Main just pads for fixed header (no big margin hack) */
  main {
    padding-top: calc(var(--header-h, 70px) + 20px);
    margin-top: 0;
  }

  /* Footer tweaks */
  .red-logo-image { width: 60px; }
  footer p { font-size: 0.8rem; }
}

@media (max-width: 600px) {
  html { font-size: 15px; } /* gentle downscale */

  header { padding: 12px 16px; gap: 10px; }
  header .logo { font-size: 24px; }

  nav { flex-direction: column; gap: 8px; width: 100%; }
  nav a { font-size: 0.95rem; }

  /* —— Apps dropdown: click-to-open (no hover) —— */
  #primary-nav .dropdown { order: 99; width: 100%; }
  #primary-nav .dropdown > a {
    display: block; width: 100%; padding: 8px 4px;
  }
  #primary-nav .dropdown > a::after { content: none !important; } /* no caret */

  /* collapsed by default */
    #primary-nav .dropdown .dropdown-content {
    position: static;
    transform: none;
    visibility: visible; 
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;                /* no padding collapsed */
    margin-left: 0;            /* no shift yet */
    transition: 
        max-height 300ms ease, 
        opacity 200ms ease, 
        padding 200ms ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    will-change: max-height, opacity, padding;
    }

    /* expanded when JS sets data-open="true" */
    #primary-nav .dropdown[data-open="true"] .dropdown-content {
    max-height: 500px;
    opacity: 1;
    padding-top: 6px;
    padding-left: 14px;       /* <<< slight indentation here */
    }

    /* indent each app link a little for clarity */
    #primary-nav .dropdown .dropdown-content a {
    padding-left: 8px;        /* each link indented */
    }

  /* neutralize hover/focus behaviors on phones */
  #primary-nav .dropdown:hover .dropdown-content,
  #primary-nav .dropdown:focus-within .dropdown-content {
    visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  }

  /* Layout spacing */
  main {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: calc(var(--header-h, 70px) + 20px); /* use actual header height */
    gap: 4rem;
  }

  .about { padding: 1.25rem; max-width: 92vw; }
  .about h1 { font-size: clamp(1.5rem, 5vw, 2rem); }
  .about p  { font-size: clamp(1rem, 3.8vw, 1.15rem); }

  /* App cards: stack vertical */
  .app { flex-direction: column; align-items: flex-start; gap: 14px; padding-left: 0; }
  .app.visible { padding-left: 0; }
  .app img { width: 110px; height: 110px; border-radius: 12px; }
  .app h2 { font-size: 1.125rem; }
  .app p  { font-size: 0.95rem; }

  /* Soften background blur stamps and keep them in-bounds */
  #Assistant::before, #Calculator::before, #Games::before, #Recipe::before {
    top: -40px; left: -10px; width: 160px; height: 160px; filter: blur(1.5px); opacity: 0.08;
  }

  /* Footer: allow wrap and smaller icons */
  footer { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
  .red-logo-image { width: 72px; }
  .social-links { gap: 10px; }
  .social-links a { font-size: 20px; }

  /* Ensure skip link stays reachable on small screens */
  .skip-link { left: 50%; }
}