/* ================================================================
   Malvern Insight — styles.css
   ================================================================
   QUICK REFERENCE:
   - Site colours       → edit :root variables below
   - Slide images       → search "SLIDE IMAGES"
   - Logo size          → search "#logo"
   - Overlay darkness   → search "bg-overlay"
   - Font sizes         → search "TYPOGRAPHY"
   - Add a 5th slide    → search "ADDING A 5th SLIDE"
   ================================================================ */


/* ── THEME VARIABLES ───────────────────────────────────────────────
   Edit these values to retheme the entire site at once.          */
:root {
    --color-gold:   #ffa800;          /* Active nav link colour     */
    --color-grey:   #b7b7b7;          /* Nav links, subtitles       */
    --color-white:  #ffffff;          /* Main headings              */
    --color-black:  #000000;          /* Page background            */
    --font-heading: 'Coustard', serif;
    --font-body:    'Open Sans', sans-serif;
}


/* ── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    color: var(--color-grey);
    background: var(--color-black);
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory; /* Each section snaps to full screen */
}


/* ── TYPOGRAPHY ────────────────────────────────────────────────────
   EDIT font sizes here if needed.                                */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-white);
    font-weight: normal;
    letter-spacing: 1px;
}

h1 { font-size: 63px; line-height: 70px; margin-bottom: 12px; }
h5 { font-size: 28px; line-height: 35px; color: var(--color-grey); margin-bottom: 20px; }

p {
    color: var(--color-white);
    margin-bottom: 14px;
    max-width: 560px; /* Keeps lines readable — do not remove */
}

a       { color: var(--color-grey); text-decoration: none; }
a:hover { color: var(--color-white); text-decoration: underline; }


/* ── BACKGROUND SLIDESHOW ──────────────────────────────────────────
   Slides are cycled by JS (see bottom of index.html).
   To change images: edit the style="background-image:..." in index.html
   To add a slide:   copy a <div class="slide"> line in index.html     */

.bg-slideshow {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Fade duration */
}

.slide.active {
    opacity: 1;
}

/* ── BACKGROUND OVERLAY ────────────────────────────────────────────
   Darkens the slideshow so white text remains readable.
   z-index: 1 places it above the slideshow (z-index: -1)
   but below all content (z-index: 10+).

   EDIT DARKNESS: change the last value in rgba(0, 0, 0, X)
     0.0 = fully transparent (images at full brightness)
     0.65 = current setting (recommended)
     1.0 = completely black                                       */
.bg-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.65);
    pointer-events: none; /* Clicks pass through to content below  */
}


/* ── LOGO ──────────────────────────────────────────────────────────
   Fixed to bottom-left corner. Never overlaps content.
   EDIT: Change width to resize the logo.                        */
#logo {
    position: fixed;
    bottom: 60px;    /* Sits above the nav bar                     */
    left: 40px;
    z-index: 1000;
    width: 180px;    /* EDIT: logo display width                   */
    max-width: 20vw; /* Safety cap on small screens                */
}

#logo img {
    width: 100%;
    height: auto;
    display: block;
}


/* ── MAIN NAVIGATION ───────────────────────────────────────────────
   Fixed to bottom-left, directly below the logo.               */
.main-nav {
    position: fixed;
    bottom: 23px;
    left: 40px;
    z-index: 1001; /* Above logo so it's always clickable          */
}

.main-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* Wraps to next line if many links are added  */
    padding: 0;
    margin: 0;
}

.main-nav ul li {
    padding: 0 10px;
    border-left: 1px solid var(--color-grey);
}

.main-nav ul li:first-child {
    border-left: none;
    padding-left: 0;
}

.main-nav ul li a {
    color: var(--color-grey);
    font-family: var(--font-body);
    font-size: 14px;
    transition: color 0.2s;
}

.main-nav ul li a:hover  { color: var(--color-white); text-decoration: none; }
.main-nav ul li a.active { color: var(--color-gold);  text-decoration: none; }


/* ── CONTENT SECTIONS ──────────────────────────────────────────────
   Each section fills the full viewport height (100vh).
   scroll-snap-align: start makes each section snap into view.

   WHY TEXT DOES NOT OVERLAP THE LOGO:
   - padding-bottom: 140px reserves space for logo + nav at bottom
   - max-width: 660px keeps text in the left column only
   - z-index: 10 places content above overlay (z-index: 1)
     but the logo/nav are z-index: 1000+ so they always show     */
section.content {
    position: relative;
    height: 100vh;
    scroll-snap-align: start;
    padding: 200px 40px 140px 40px;
    max-width: 660px;
    z-index: 10;
}


/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Smaller headings on mobile */
    h1 { font-size: 38px; line-height: 46px; }
    h5 { font-size: 20px; line-height: 28px; }

    /* Disable scroll-snap on mobile for natural touch scrolling */
    body { scroll-snap-type: none; }

    section.content {
        padding: 100px 24px 180px 24px;
        max-width: 100%;
    }

    #logo {
        width: 120px;
        bottom: 55px;
        left: 20px;
    }

    .main-nav {
        bottom: 16px;
        left: 20px;
    }

    .main-nav ul li a { font-size: 12px; }

}