/* ------------------- */
/* RESET & BASE STYLES */
/* ------------------- */
* {
    box-sizing: border-box;
}

html {
  font-size: 16px; /* Lock in a predictable base */
  -webkit-text-size-adjust: 100%; /* Stop Safari/iOS from shrinking text */
}

p {
  font-size: 1rem;   /* All paragraphs same size unless overridden */
  margin-bottom: 1rem;
}

body {
    font-family: 'Manrope', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
 font-size: 1rem; /* 1rem = 16px */
  line-height: 1.6; /* Good readability */
  color: #111;      /* Ensure strong contrast */
}


/* ------------------- */
/* HEADER + NAVIGATION */
/* ------------------- */

header {
    display: grid;
    /* Desktop layout: Flexible left space, auto-width nav, flexible right space */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

.logo-container {
    /* Ensures logo stays in the first column */
    grid-column: 1;
}

.logo {
    height: 50px;
}

nav {
    /* Centers the nav element within its grid column (the 'auto' column) */
    justify-self: center;
    grid-column: 2; /* Ensures nav is in the middle column */
}

nav ul {
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: center; /* Centers the list items within the ul */
}

nav a {
    font-size: 1.1rem;
    text-decoration: none;
    color: #111;
    font-weight: 600;
    padding: 0 1.25rem;
}

nav a:hover {
    color: #007acc;
}

/* Hamburger menu hidden by default on desktop */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    width: 30px;
    height: 25px;
    justify-content: center;
    z-index: 999;
    grid-column: 3; /* Ensures hamburger is in the third column */
    justify-self: end; /* Pushes it to the right within its column */
}

.hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background: #333;
    border-radius: 5px;
    transition: all 0.3s ease;
}

nav ul li a {
  display: inline-block;  /* so width/text-align can apply */
  text-align: center;     /* centres the text, including after <br> */
}

/* Right side placeholder - this was for the third grid column.
   With the explicit grid-column: 3 on .hamburger, this specific rule might
   become redundant or less critical, but it's harmless to keep if you had
   other content intended for that spot.
   If .hamburger is always the last child, it directly applies to it anyway.
*/
/* header > :last-child {
    justify-self: end;
} */


/* ------------------- */
/* MOBILE STYLES (max-width: 768px) */
/* ------------------- */

@media (max-width: 768px) {
    header {
        /* On mobile, change grid to two columns: logo and hamburger area */
        grid-template-columns: auto 1fr; /* Logo, then flexible space for hamburger */
        gap: 1rem; /* Keep a small gap or set to 0 if desired */
    }

    /* Ensure logo-container is in the first column on mobile */
    .logo-container {
        grid-column: 1;
    }

    nav {
        /* Hide the main navigation menu on small screens by default */
        display: none; /* KEY CHANGE: Hides desktop nav */
        grid-column: 1 / -1; /* Make it span all columns when shown (if not absolute) */
        justify-self: center; /* Centers when shown */
        width: 100%; /* Spans full width when shown */
        /*
           If your JS shows the mobile menu as an overlay that slides down or similar,
           these absolute positioning properties are crucial for 'nav.show'.
           If it just appears inline, they might not be needed or would be different.
        */
        position: absolute; /* Needed for overlay effect */
        top: 0;
        left: 0;
        height: 100vh; /* Full viewport height for overlay */
        background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent overlay */
        z-index: 998; /* Below hamburger but above content */
        flex-direction: column; /* Organize content vertically */
        justify-content: center; /* Center items vertically */
        align-items: center; /* Center items horizontally */
        transform: translateY(-100%); /* Start off-screen above */
        transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Smooth transition */
        opacity: 0;
        pointer-events: none; /* Prevent interaction when hidden */
    }

    nav.show {
        /* Styles applied by JS when hamburger is open */
        display: flex; /* Or block, or grid depending on desired layout */
        transform: translateY(0); /* Slide into view */
        opacity: 1;
        pointer-events: auto; /* Enable interaction */
    }

    nav ul {
        flex-direction: column; /* Stack menu items vertically on mobile */
        text-align: center;
        gap: 1.5rem; /* Adjust spacing as needed */
    }

    nav li {
        margin: 10px 0;
    }

    .hamburger {
        display: flex; /* Show the hamburger on mobile */
        grid-column: 2; /* Place it in the second grid column */
        justify-self: end; /* Push it to the right within its column */
        position: relative; /* Keep it in the normal flow of the grid */
        right: auto; /* Reset previous absolute positioning properties */
        top: auto; /* Reset previous absolute positioning properties */
    }

    .hamburger.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
}


/* ------------------- */
/* MAIN + FOOTER */
/* ------------------- */

main {
    flex: 1;
    padding: 2rem;
}

main h1 {
    text-align: center;
}

footer {
    text-align: center;
    padding: 1rem;
    border-top: 1px solid #ddd;
    color: #777;
    background-color: #f5f5f5;
    flex-shrink: 0;
    width: 100%;
}

footer a {
  color: inherit;        /* Use the same colour as the footer text */
  text-decoration: none; /* Remove the underline */
  cursor: default;       /* Stops it looking like a link on hover */
}

/* ------------------- */
/* UTILITY */
/* ------------------- */
.centered {
    text-align: center;
}


/* ------------------- */
/* SEARCH STYLES */
/* ------------------- */
#searchInput {
    display: block;
    margin: 1rem auto;
    width: 60%;
    max-width: 500px;
    padding: 0.75rem;
    font-size: 1.1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#searchResults {
    list-style: none;
    padding: 0;
    margin: 1rem auto 0 auto;
    width: 60%;
    max-width: 500px;
    text-align: left;
}

#searchResults li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

#searchResults li:hover {
  transform: scale(1.02);
}

#searchResults li a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  flex-grow: 1;
}



/* ------------------- */
/* RESOURCE SECTION */
/* ------------------- */
.resource-columns {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.resource {
    flex: 1;
    min-width: 300px;
    padding: 1rem;
    border-radius: 10px;
}

.resource h2 {
    margin-bottom: 1rem;
}

.resource-links {
    display: flex;
    gap: 1rem;
}

.resource-links a {
    flex: 1;
    text-align: center;
    padding: 0.5rem 1rem;
    background-color: #f0f0f0;
    color: black;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.resource-links a:hover {
    background-color: #004c99;
    color: white;
}


/* ------------------- */
/* VIDEO GALLERY */
/* ------------------- */
.video-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

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

.video-item img {
    width: 100%;
    border-radius: 8px;
    transition: transform 0.3s;
}

.video-item img:hover {
    transform: scale(1.05);
}

.video-item p {
    margin-top: 0.5rem;
    font-weight: 600;
    color: #333;
}

.related-topics {
    list-style: none;              /* Removes bullet points */
    padding: 0;
    margin: 1rem auto;             /* Centers the list */
    width: 100%;                   /* Responsive full width */
    max-width: 500px;              /* Limit width like search results */
}

.related-topics li {
    list-style: none;              /* Ensures no bullets at li level too */
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background-color: #f0f0f0;
    border-radius: 4px;
    transition: background-color 0.3s;
    text-align: left;
}

.related-topics li:hover {
    background-color: #e0e0e0;
}

.related-topics li a {
    display: block;                /* Makes the full box clickable like a button */
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.tier-label {
  font-size: 0.85rem;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
  display: inline-block;
  margin-left: auto;
  white-space: nowrap;
}

.foundation-tier {
  background-color: #d0e8ff;  /* Soft sky blue */
  color: #005792;
}

.higher-tier {
  background-color: #fff3b0;  /* Soft butter yellow */
  color: #7a5901;
}

.both-tier {
  background-color: #d4f5dc;  /* Calming mint green */
  color: #24693d;
}

.right-elements {
  display: flex;
  gap: 8px;
  align-items: center;
}

.coming-label {
  background-color: #fdd;
  color: #a00;
  font-size: 0.75rem;
  padding: 3px 6px;
  border-radius: 999px;
  font-weight: bold;
  text-transform: uppercase;
}

.coming-soon {
  opacity: 0.6;
}