/* ============================================================
   Roarger.com — Main Stylesheet
   ============================================================
   This is the only CSS file for the entire site.
   It's organised into clearly labelled sections so you can
   find and edit things easily.

   TABLE OF CONTENTS
   1.  CSS Variables (colours, fonts — change these to retheme the site)
   2.  Reset & Base styles
   3.  Layout (site wrapper, page structure)
   4.  Navigation (desktop + mobile hamburger)
   5.  Hero / Banner image
   6.  Page headings & content sections
   7.  Photo grid (the gallery card layout)
   8.  Lightbox (the fullscreen photo popup)
   9.  Mission Blue page styles
   10. Contact page styles
   11. Admin panel styles
   12. Footer
   13. Utility classes
   14. Responsive breakpoints (mobile / tablet overrides)
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES
   ============================================================
   CSS variables (also called "custom properties") let you
   define values once and reuse them everywhere. If you want
   to change the main blue colour of the site, just change
   --color-primary here and it updates everywhere at once.
   ============================================================ */
:root {
    /* --- Colours --- */
    --color-primary:    #1a6b8a;   /* Deep ocean blue — nav, buttons, headings */
    --color-primary-dark: #124d63; /* Darker shade — button hover states */
    --color-accent:     #f4a823;   /* Warm amber — call-to-action highlights */
    --color-accent-dark: #d4890e;  /* Darker amber — accent hover */
    --color-text:       #2c2c2c;   /* Near-black — body copy */
    --color-text-light: #5a5a5a;   /* Mid-grey — captions, secondary text */
    --color-bg:         #fafafa;   /* Off-white — page/paper background */
    --color-bg-outer:   #dedad5;   /* Warm grey — behind the paper column */
    --color-bg-card:    #ffffff;   /* Pure white — photo cards */
    --color-border:     #e0e0e0;   /* Light grey — card borders, dividers */
    --color-danger:     #c0392b;   /* Red — delete buttons */
    --color-danger-dark:#a93226;   /* Darker red — delete button hover */
    --color-success:    #27ae60;   /* Green — success messages */
    --color-warning-bg: #fff3cd;   /* Light yellow — warning banners */
    --color-warning-border: #ffc107;

    /* --- Typography --- */
    --font-main:    'Luckiest Guy', cursive;
    --font-heading: 'Luckiest Guy', cursive;

    /* --- Spacing --- */
    --space-xs:  0.5rem;   /*  8px */
    --space-sm:  1rem;     /* 16px */
    --space-md:  1.5rem;   /* 24px */
    --space-lg:  2.5rem;   /* 40px */
    --space-xl:  4rem;     /* 64px */

    /* --- Layout --- */
    --max-width: 1200px;   /* Maximum width of the content area */
    --nav-height: 70px;    /* Height of the top navigation bar */

    /* --- Shadows --- */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.16);

    /* --- Border radius (rounded corners) --- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* --- Transitions --- */
    --transition: 0.2s ease;
}


/* ============================================================
   2. RESET & BASE
   ============================================================
   Browsers apply their own default styles that can be
   inconsistent. This section resets those defaults so we
   start from a clean slate.
   ============================================================ */

/* box-sizing: border-box means padding and borders are
   included in an element's total width — much more intuitive. */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Smooth scrolling when jumping to anchor links (#section) */
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-main);
    color: var(--color-text);
    background-color: var(--color-bg-outer);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.01em;
}

/* Images should never overflow their container */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

figure {
    margin: 0;
}

/* Remove bullet points from lists by default
   (we'll add them back only where needed) */
ul, ol {
    list-style: none;
}

/* Make links inherit their parent's colour unless we say otherwise */
a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Headings */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    line-height: 1.3;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); } /* clamp() = scales between min and max */
h2 { font-size: clamp(1.4rem, 3vw, 2rem);   }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }

p {
    margin-bottom: var(--space-sm);
    max-width: 62ch;
}

.full {
    max-width: none;
    font-size: 1.15rem;
    color: var(--color-text-light);
}

/* Last paragraph in a container shouldn't have extra bottom margin */
p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   3. LAYOUT
   ============================================================ */

/* .page-wrap — the centred "paper sheet" column.
   The grey body background shows on either side on wide screens. */
.page-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    background-color: var(--color-bg);
    box-shadow: 0 0 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
    min-height: 100vh;
}

/* .site-wrapper centres content inside the paper column */
.site-wrapper {
    max-width: 100%;
    padding: 0 var(--space-sm);
}

/* <main> is the main content area, below the nav */
main {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl);
}

/* A generic content section with breathing room */
.content-section {
    margin-bottom: var(--space-xl);
}

.content-section:last-child {
    margin-bottom: 0;
}

/* Two-column layout used on the About page (text + photo side by side) */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: start;
}

/* Variant: portrait image auto-sized on the left, text fills the rest */
.two-col--portrait {
    grid-template-columns: auto 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

/* Page intro text — the lead paragraph just below the H1 */
.page-intro {
    font-size: 1.15rem;
    color: var(--color-text-light);
    max-width: 60ch;
    margin-bottom: var(--space-lg);
}


/* ============================================================
   4. NAVIGATION
   ============================================================ */

/* The <header> element sits at the very top of the page */
.site-header {
    background-color: var(--color-primary);
    height: var(--nav-height);
    position: sticky;  /* Sticks to the top of the screen as you scroll */
    top: 0;
    z-index: 100;      /* Sits above other content */
    box-shadow: var(--shadow-md);
}

/* Inner container — centres the nav and gives it padding */
.nav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-sm);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Logo left, links right */
}

/* Site logo / title in the nav */
.nav-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: -0.02em;
}

.nav-logo:hover {
    color: var(--color-accent);
    text-decoration: none;
}

/* Roarger emoji in the logo */
.nav-logo-emoji {
    margin-right: 0.3em;
}

/* The list of navigation links */
.nav-links {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

.nav-links a {
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.3em 0;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}

.nav-links a:hover,
.nav-links a.active {  /* .active is added by PHP to highlight the current page */
    color: #ffffff;
    border-bottom-color: var(--color-accent);
    text-decoration: none;
}

/* Hamburger button — only shown on mobile (hidden on desktop) */
.nav-hamburger {
    display: none;          /* Hidden by default (desktop) */
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* The three horizontal lines of the hamburger icon */
.nav-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: all var(--transition);
}


/* ============================================================
   5. SITE BANNER
   ============================================================
   The banner image sits above the nav on every page.
   CSS shows the desktop or mobile version depending on screen width.
   ============================================================ */

.site-banner {
    width: 100%;
    overflow: hidden;
    line-height: 0;   /* removes the small gap browsers add below inline images */
}

.site-banner img {
    width: 100%;
    height: auto;
    /* display: block is inherited from the global img reset */
}

/* Default: desktop banner shown, mobile hidden (overridden in media queries below) */
.site-banner-mobile  { display: none; }
.site-banner-desktop { display: block; }


/* ============================================================
   6. PAGE HEADINGS & CONTENT
   ============================================================ */

/* Standard page heading section — H1 + optional intro text */
.page-heading {
    margin-bottom: var(--space-lg);
    border-bottom: 3px solid var(--color-border);
    padding-bottom: var(--space-md);
}

.page-heading h1 {
    margin-bottom: var(--space-xs);
}

/* Content sections with sub-headings */
.content-block {
    margin-bottom: var(--space-lg);
}

.content-block h2 {
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.content-block h3 {
    margin-bottom: var(--space-xs);
    color: var(--color-primary);
}

/* Pull-quote / blockquote styling */
blockquote {
    border-left: 4px solid var(--color-accent);
    padding: var(--space-sm) var(--space-md);
    background-color: rgba(26, 107, 138, 0.05);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: var(--space-md) 0;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--color-text);
}

blockquote cite {
    display: block;
    margin-top: var(--space-xs);
    font-size: 0.9rem;
    font-style: normal;
    color: var(--color-text-light);
}

/* Checklist items (used on Mission Blue page) */
.checklist {
    display: grid;
    gap: var(--space-xs);
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
}

.checklist li::before {
    content: '✓';
    color: var(--color-primary);
    font-weight: 700;
    flex-shrink: 0;  /* Don't let the tick get squished */
    margin-top: 0.1em;
}

/* "See all photos" style link — a prominent text link with an arrow */
.cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.5em 0;
    border-bottom: 2px solid var(--color-primary);
    transition: color var(--transition), border-color var(--transition);
}

.cta-link:hover {
    color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    text-decoration: none;
}

.cta-link::after {
    content: '→';
}

/* About page — Roarger's photo styled as a portrait */
.roarger-portrait {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 400px;
}


/* ============================================================
   7. PHOTO GRID
   ============================================================
   The gallery uses CSS Grid — a modern layout system that
   automatically arranges cards into columns.
   ============================================================ */

/* Section heading above the grid */
.gallery-heading {
    margin-bottom: var(--space-md);
}

/* The grid container */
.photo-grid {
    display: grid;
    /* auto-fill = create as many columns as fit
       minmax(280px, 1fr) = each column is at least 280px wide,
       and they all grow equally to fill the available space */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

/* Each photo card */
.photo-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;     /* Clip the image to the card's rounded corners */
    border: 1px solid var(--color-border);
    transition: transform var(--transition), box-shadow var(--transition);
    cursor: pointer;      /* Show a hand cursor — indicates it's clickable */
}

.photo-card:hover {
    transform: translateY(-4px); /* Float up slightly on hover */
    box-shadow: var(--shadow-lg);
}

/* The image inside a card — we use aspect-ratio to make all
   thumbnails the same height regardless of the original photo's shape */
.photo-card__image {
    aspect-ratio: 4 / 3;  /* Width : Height ratio */
    overflow: hidden;
}

.photo-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* Cover the area, cropping if needed */
    object-position: center;
    transition: transform 0.4s ease;
}

.photo-card:hover .photo-card__image img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

/* Text content below the image */
.photo-card__body {
    padding: var(--space-sm);
}

.photo-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.photo-card__desc {
    font-size: 0.875rem;
    color: var(--color-text-light);
    line-height: 1.5;
    margin-bottom: var(--space-xs);
}

.photo-card__desc:last-child {
    margin-bottom: 0;
}

/* Location badge — a small pill-shaped label */
.photo-card__location {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.78rem;
    color: var(--color-primary);
    background: rgba(26, 107, 138, 0.1);
    padding: 0.2em 0.6em;
    border-radius: 999px;  /* 999px = fully rounded pill shape */
    font-weight: 500;
}

.photo-card__location::before {
    content: '📍';
    font-size: 0.8em;
}


/* ============================================================
   8. LIGHTBOX
   ============================================================
   The lightbox is a fullscreen overlay that appears when you
   click a photo, showing the full-size version.

   It works with JavaScript (main.js) that adds/removes the
   class "lightbox--open" to show and hide it.
   ============================================================ */

/* The overlay that covers the whole screen */
.lightbox {
    display: none;               /* Hidden by default */
    position: fixed;             /* Fixed = stays in place as you scroll */
    inset: 0;                    /* inset: 0 = top:0, right:0, bottom:0, left:0 */
    background: rgba(0, 0, 0, 0.92);
    z-index: 1000;               /* On top of everything */
    justify-content: center;
    align-items: center;
    padding: var(--space-md);
}

/* JavaScript adds this class to show the lightbox */
.lightbox--open {
    display: flex;
}

/* The content box inside the overlay */
.lightbox__inner {
    position: relative;
    max-width: 90vw;             /* Never wider than 90% of the viewport */
    max-height: 90vh;            /* Never taller than 90% of the viewport */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

/* The full-size image in the lightbox */
.lightbox__img {
    max-width: 100%;
    max-height: 75vh;
    border-radius: var(--radius-sm);
    object-fit: contain;         /* Show the whole image without cropping */
}

/* Caption area below the image */
.lightbox__caption {
    color: #ffffff;
    text-align: center;
    max-width: 60ch;
}

.lightbox__caption h3 {
    color: #ffffff;
    font-size: 1.1rem;
    margin-bottom: 0.3em;
}

.lightbox__caption p {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    max-width: none;
    margin-bottom: 0.2em;
}

.lightbox__caption .photo-card__location {
    color: var(--color-accent);
    background: rgba(244, 168, 35, 0.2);
}

/* Close button (×) in the top-right corner */
.lightbox__close {
    position: absolute;
    top: -2.5rem;
    right: 0;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.2em;
    transition: color var(--transition);
}

.lightbox__close:hover {
    color: var(--color-accent);
}


/* ============================================================
   9. MISSION BLUE PAGE
   ============================================================ */

/* Banner image for the Mission Blue page */
.mission-banner {
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    overflow: hidden;
    max-height: 400px;
}

.mission-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* "How You Can Help" section — two-column grid for the checklist */
.help-section {
    background: linear-gradient(135deg, rgba(26,107,138,0.05), rgba(26,107,138,0.1));
    border: 1px solid rgba(26,107,138,0.15);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
}

.help-section h2 {
    margin-bottom: var(--space-md);
}

/* Two-column checklist on larger screens */
.checklist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
}


/* ============================================================
   10. CONTACT PAGE
   ============================================================ */

/* Large centred Instagram call-to-action */
.instagram-cta {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    max-width: 500px;
    margin: 0 auto;
}

.instagram-icon {
    font-size: 4rem;
    margin-bottom: var(--space-sm);
    display: block;
}

.instagram-cta h2 {
    margin-bottom: var(--space-sm);
}

.instagram-cta p {
    max-width: none;
    color: var(--color-text-light);
    margin-bottom: var(--space-lg);
}

/* The big Instagram button */
.btn-instagram {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #ffffff;
    padding: 0.9em 2em;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity var(--transition), transform var(--transition);
    box-shadow: var(--shadow-md);
}

.btn-instagram:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    text-decoration: none;
    color: #ffffff;
}


/* ============================================================
   11. ADMIN PANEL
   ============================================================ */

/* Admin-specific page wrapper — slightly narrower than the main site */
.admin-wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-sm) var(--space-xl);
}

/* Top admin bar showing who's logged in */
.admin-topbar {
    background: var(--color-primary);
    color: #ffffff;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-topbar a {
    color: rgba(255,255,255,0.8);
}

/* Admin page title */
.admin-heading {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-border);
}

/* Upload form card */
.upload-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-sm);
}

.upload-card h2 {
    margin-bottom: var(--space-md);
}

/* Form layout — label stacked above input */
.form-group {
    margin-bottom: var(--space-md);
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4em;
    color: var(--color-text);
}

/* Small helper text below a field */
.form-hint {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-top: 0.3em;
}

/* Text inputs, textareas, selects */
.form-control {
    width: 100%;
    padding: 0.6em 0.9em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: 1rem;
    color: var(--color-text);
    background: #ffffff;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 107, 138, 0.15);
}

textarea.form-control {
    resize: vertical;      /* Allow vertical resize but not horizontal */
    min-height: 100px;
}

/* Two-column form row (used for location + date side by side) */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

/* Required field asterisk */
.required {
    color: var(--color-danger);
    margin-left: 0.2em;
}

/* Success / error message banners */
.alert {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
    font-size: 0.95rem;
}

.alert--success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert--error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Photo management table */
.photo-table {
    width: 100%;
    border-collapse: collapse;  /* Remove space between table cells */
    font-size: 0.9rem;
}

.photo-table th {
    background: var(--color-primary);
    color: #ffffff;
    padding: 0.7em 1em;
    text-align: left;
    font-weight: 600;
}

.photo-table th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.photo-table th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }

.photo-table td {
    padding: 0.7em 1em;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

/* Alternating row colours (zebra striping) for readability */
.photo-table tr:nth-child(even) td {
    background: rgba(0,0,0,0.02);
}

.photo-table tr:hover td {
    background: rgba(26, 107, 138, 0.04);
}

/* Small thumbnail in the admin table */
.admin-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}

/* Sort order number input in the table */
.sort-input {
    width: 70px;
    padding: 0.3em 0.5em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    text-align: center;
}

/* Table wraps in a scrollable box on small screens */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}


/* ============================================================
   12. BUTTONS
   ============================================================ */

/* Base button style — all buttons share this */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.6em 1.4em;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
    line-height: 1;
    white-space: nowrap;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

/* Primary (blue) button */
.btn-primary {
    background: var(--color-primary);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    color: #ffffff;
}

/* Danger (red) button — used for delete */
.btn-danger {
    background: var(--color-danger);
    color: #ffffff;
    font-size: 0.85rem;
    padding: 0.4em 0.9em;
}

.btn-danger:hover {
    background: var(--color-danger-dark);
    color: #ffffff;
}

/* Small secondary/outline button */
.btn-sm {
    font-size: 0.82rem;
    padding: 0.4em 0.8em;
}

/* Accent (amber) button — used for CTAs like "See all photos" */
.btn-accent {
    background: var(--color-accent);
    color: #1a1a1a;
}

.btn-accent:hover {
    background: var(--color-accent-dark);
    color: #1a1a1a;
}


/* ============================================================
   13. FOOTER
   ============================================================ */

.site-footer {
    background-color: var(--color-primary-dark);
    /* Background image layered over the colour */
    background-image: url('../images/footer-bg.png');
    background-size: cover;
    background-position: center;
    color: rgba(255,255,255,0.9);
    padding: var(--space-xl) var(--space-sm) var(--space-lg);
    text-align: center;
    /* A subtle border on top to separate footer from content */
    border-top: 4px solid var(--color-accent);
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.footer-logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--space-sm);
}

.footer-tagline {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: var(--space-md);
    max-width: none;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.footer-links a {
    color: rgba(255,255,255,0.75);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color var(--transition);
}

.footer-links a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.footer-copy {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    max-width: none;
}


/* ============================================================
   14. UTILITY CLASSES
   ============================================================ */

/* Screen-reader only — visually hidden but readable by screen readers.
   Important for accessibility (e.g. hiding button labels that are
   represented visually by icons). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Text alignment */
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Margin helpers */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Empty gallery message */
.gallery-empty {
    text-align: center;
    padding: var(--space-xl);
    color: var(--color-text-light);
    grid-column: 1 / -1;   /* Span all grid columns */
}

.gallery-empty p {
    max-width: none;
}


/* ============================================================
   15. RESPONSIVE BREAKPOINTS
   ============================================================
   @media queries apply styles only at certain screen widths.
   We use a "desktop-first" approach here, so the defaults
   above are for large screens and we override for smaller ones.

   Common breakpoints:
   - 768px  = tablet portrait / large mobile
   - 480px  = small mobile
   ============================================================ */

/* --- Tablet and below (≤ 768px) --- */
@media (max-width: 768px) {

    /* Show the hamburger button */
    .nav-hamburger {
        display: flex;
    }

    /* Hide the nav links by default on mobile */
    .nav-links {
        display: none;
        flex-direction: column;
        gap: 0;
        position: absolute;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: var(--color-primary-dark);
        padding: var(--space-sm) 0;
        box-shadow: var(--shadow-lg);
        z-index: 99;
    }

    /* JavaScript adds .nav-open to <body> when hamburger is clicked */
    body.nav-open .nav-links {
        display: flex;
    }

    .nav-links a {
        padding: 0.8em var(--space-md);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        width: 100%;
    }

    .nav-links a:last-child {
        border-bottom: none;
    }

    /* Animated hamburger → X when open */
    body.nav-open .nav-hamburger span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    body.nav-open .nav-hamburger span:nth-child(2) {
        opacity: 0;
    }
    body.nav-open .nav-hamburger span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* Stack the two-column About layout */
    .two-col {
        grid-template-columns: 1fr;
    }

    .two-col--portrait {
        grid-template-columns: 1fr;
    }

    .two-col--portrait .roarger-portrait {
        max-width: 220px;
        margin: 0 auto;
    }

    /* Stack the form row (location + date) */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Stack the Mission Blue checklist */
    .checklist-grid {
        grid-template-columns: 1fr;
    }

    /* Banner — use mobile version on smaller screens */
    .site-banner-desktop { display: none; }
    .site-banner-mobile  { display: block; }

    /* Slightly smaller padding on mobile */
    main {
        padding-top: var(--space-md);
    }

    .site-footer {
        padding: var(--space-md) var(--space-sm);
    }

    .footer-logo {
        margin-bottom: var(--space-xs);
    }

    .footer-tagline {
        margin-bottom: var(--space-sm);
    }

    .footer-links {
        margin-bottom: var(--space-sm);
    }
}

/* --- Small mobile (≤ 480px) --- */
@media (max-width: 480px) {

    /* Single-column photo grid on very small screens */
    .photo-grid {
        grid-template-columns: 1fr;
    }

    .upload-card {
        padding: var(--space-md);
    }

    .footer-links {
        flex-direction: column;
        gap: var(--space-sm);
        align-items: center;
    }
}

/* --- Large screens only (> 768px): show desktop banner, hide mobile banner --- */
@media (min-width: 769px) {
    .site-banner-mobile  { display: none; }
    .site-banner-desktop { display: block; }
}