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

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

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

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

nav {
    display: flex;
    gap: 20px;
}

/* Nav Links */
nav a {
    font-family: "ethnocentric", sans-serif;
    text-decoration: none;
    color: var(--maintext);
    font-size: 16px;
    position: relative;
}

/* Dropdown Container */
.dropdown {
    position: relative;
}

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

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

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

            /* Contact Section */
            .contact-section {
                max-width: 1000px;                      /* Limit the form's width */
                margin: 50px auto;                      /* Center horizontally and add vertical spacing */
                padding: 60px;
                background-color: var(--background-color);
                border-radius: var(--border-radius);
                /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);  Optional shadow for a card effect */
                color: var(--maintext);
            }

            /* Header and Paragraph */
            .contact-section h1 {
                font-size: var(--font-size-large);      /* Use root variable for consistency */
                margin-bottom: var(--padding-medium);   /* Add space below the header */
                text-align: center;
            }

            .contact-section p {
                font-size: var(--font-size-medium);
                color: var(--text-muted);               /* Subtle color for paragraph text */
                margin-bottom: var(--padding-large);    /* Add space below the paragraph */
                text-align: center;
            }

            /* Contact Form */
            form#contact-form {
                display: flex;
                flex-direction: column;                 /* Stack form fields vertically */
                gap: 60px;                              /* Add spacing between the form fields */
            }

            /* Form Group */
            .form-group {
                display: flex;
                flex-direction: column;
            }

            .form-group label {
                font-size: 1rem;
                margin-bottom: 5px;
                color: var(--maintext);
            }

            .form-group input,
            .form-group textarea {
                font-size: 1rem;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: var(--border-radius);
                background-color: rgba(255, 255, 255, 0.9);     /* Light background for inputs */
                color: black;
                width: 100%;                                      /* Ensure inputs span full width */
                box-sizing: border-box;                           /* Prevent overflow */
            }

            /* Focus Effects */
            .form-group input:focus,
            .form-group textarea:focus {
                border-color: var(--green);
                outline: none;
                box-shadow: 0 0 5px var(--green);
            }

            /* Submit Button */
            .submit-btn {
                padding: 10px 20px;
                font-size: 1rem;
                font-weight: bold;
                color: #fff;
                background-color: var(--green);
                border: none;
                border-radius: var(--border-radius);
                cursor: pointer;
                transition: background-color 0.3s ease, transform 0.3s ease;
            }

            .submit-btn:hover {
                background-color: var(--green-h);
                transform: scale(1.05);
            }

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

/* About Section */



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








/* 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) {

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