/* 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 */
    --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;
}

:root {
    --footer-h: 60px; /* keep in sync with footer's actual height */
    }
    body { padding-bottom: var(--footer-h); }
    footer { height: var(--footer-h); }

/* 
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 */
}

/* Kill transitions while the window is resizing */
body.resizing #primary-nav {
  transition: none !important;
}

/* 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;
}

/* Ensure logo & hamburger sit above the sliding panel */
header .logo,
.hamburger {
  position: relative;   /* creates a local stacking context for each */
  z-index: 2;           /* above the panel below */
}

/* 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);
}

/* Touch-friendly dropdown reveal */
.dropdown:focus-within .dropdown-content {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 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: 40px;
    padding-bottom: 100px;          /* Lifts the main content out of the footer so the footer doesn't hide it */
}








/* CONSTRUCTION CSS    CONSTRUCTION CSS    CONSTRUCTION CSS    CONSTRUCTION CSS    CONSTRUCTION CSS    CONSTRUCTION CSS */
#construction {                     /* For the Construction page only */
    display: flex;
    flex-direction: column;
    justify-content: center;        /* This centers vertically */
    align-items: center;            /* This centers horizontally */
    margin: 0 0;
    min-height: 100vh;              /* Full viewport height */
    gap: 12.5rem;                   /* Spacing between app sections */
    padding-left: 40px;
    padding-right: 40px;
    /* padding-top: 500px; */
    padding-bottom: 100px;          /* Lifts the main content out of the footer so the footer doesn't hide it */
}

#construction .about {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

#construction .about h1 {
    /* font-size: 3rem;             /* Adjust as needed */
    font-size: clamp(2rem, 5vw, 4rem);  /* scales between 2rem and 4rem based on viewport width */
    font-weight: bold;              /* Optional */
    text-align: center;             /* Optional for centering */
    color: rgb(255, 255, 0)
}

#construction .about p {
    /*font-size: 1.5rem;            /* Adjust as needed */
    font-size: clamp(1rem, 2.5vw, 1.75rem); /* scales between 2rem and 4rem based on viewport width */
    line-height: 1.6;               /* Improves readability */
    text-align: center;             /* Optional */
}
/* END CONSTRUCTION CSS    END CONSTRUCTION CSS    END CONSTRUCTION CSS    END CONSTRUCTION CSS    END CONSTRUCTION CSS */








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

/* About Section */
.about {
    text-align: center;
    padding: var(--padding-large);
    margin: 0 auto;
    max-width: 800px;
    color: var(--maintext);
    line-height: 1.6;
}

.about h1 {
    font-size: var(--font-size-large);
    margin-bottom: var(--padding-medium);
}

.about p {
    font-size: var(--font-size-medium);
    margin-bottom: var(--padding-small);
    color: var(--text-muted);
}

.app {
    display: flex;
    gap: 30px;
    align-items: center;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.app.visible {                  /* App icons */
    opacity: 1;
    transform: translateY(0);
    padding-left: 160px;        /* Pulls app Icons off the left hand side of the screen some */
}

img { -webkit-user-drag: none; user-select: none; }

.app img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 15px;
    z-index: 2;
    transition: transform 0.3s ease;
}

.app img:hover {
    transform: scale(1.05); /* Slight zoom */
    transition: transform 0.3s ease;
}

.app .content {
    max-width: 600px;
}

.app h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.app p { /* App Paragraphs */
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--text-muted);
}

.app a { /* App Learn More links */
    text-decoration: none;
    color: var(--green);
    font-weight: bold;
    transition: transform 0.3s ease, color 0.3s ease;   /* Smooth scaling and color transition */
    transform-origin: center;                           /* Sets the origin for scaling to the center */
}

/* Grow Effect on Hover */
.app a:hover {
    transform: scale(1.2);                              /* Grows uniformly around the center */
    color: var(--green-h);                              /* Optional: Change the green slightly on hover */
}

.link-separator {
  margin: 0 10px;
  color: var(--green);
}

/* Background Blurred Images */
#Assistant::before, #Calculator::before, #Games::before, #Recipe::before, #Telos::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 10px;                                         /* Was -50, adjusted to move the images off the left side of the screen */
    width: 250px;
    height: 250px;
    background-size: cover;
    filter: blur(2px);
    opacity: 0.1;
    z-index: 1;
}

#Telos::before {
    background-image: url("images/telos.png");
}

#Assistant::before {
    background-image: url("images/singularassistantlogo.png");
}

#Calculator::before {
    background-image: url("images/quanta_calclogo.png");
}

#Games::before {
    background-image: url("images/singulargameslogo.png");
}

#Recipe::before {
    background-image: url("images/singularrecipelogo.png");
}

#thankyou-nav ul {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;   /* spacing above the list */
  text-align: center; /* center links */
}

#thankyou-nav li {
  margin: 10px 0;     /* vertical spacing */
}

#thankyou-nav a {
  text-decoration: none;
  color: var(--maintext); /* white text from your vars */
  font-family: "ethnocentric", sans-serif;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

#thankyou-nav a:hover {
  color: var(--green);
}








/* 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;      /* Inline layout for icons */
    gap: 15px;          /* Space between icons */
    flex: 0 0 auto;     /* Prevent stretching */
}

.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 */
}
/* END FOOTER CSS   END FOOTER CSS   END FOOTER CSS   END FOOTER CSS   END FOOTER CSS   END FOOTER CSS */








/* 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; }
}

/* Desktop/tablet: plain text link bottom-right */
@media (min-width: 601px) {
  #back-to-top {
    font-family: "ethnocentric", sans-serif;
    font-size: 0.95rem;
    text-decoration: underline;
  }
  #back-to-top:hover {
    color: var(--green);
  }
}

/* Phones: centered bold green arrow */
@media (max-width: 600px) {
  #back-to-top {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    color: var(--green);
    font-size: 0;              /* hide text but keep it for screen readers */
    font-weight: 700;
  }
  #back-to-top::before {
    content: "⬆";
    font-size: 2rem;
    line-height: 1;
    color: white;
  }
  #back-to-top:hover { color: var(--green); }

  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%; }
}