/* ================================================================
   ESSENCE ND — 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;

    /* ── LAYOUT — fluid scaling via clamp(MIN, PREFERRED, MAX) ──
       Values interpolate smoothly across all screen sizes.
       No hard jumps — adjust MIN/MAX to tune each extreme.      */
    --logo-width:         clamp(150px, 13vw,  190px); /* 150px mobile → 190px wide desktop */
    --logo-top:           clamp(20px,  2.5vh, 32px);   /* logo fixed top-left               */
    --logo-left:          clamp(20px,  2.8vw, 40px);
    --nav-bottom:         clamp(14px,  2vh,   22px);
    --content-top-pad:    clamp(120px, 16vh,  200px); /* clears logo height + breathing room */
    --content-bottom-pad: clamp(60px,  8vh,   100px); /* clears nav only                   */
    --content-side-pad:   clamp(24px,  3.3vw, 40px);  /* 24px mobile → 40px desktop        */
    --min-page-width:     360px;
}


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

html {
    scroll-behavior: smooth;
    height: 100%;
    min-width: var(--min-page-width);
    overflow-x: auto; /* Shows horizontal scrollbar if viewport < --min-page-width */
}

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%;
    min-width: var(--min-page-width);
    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 top-left corner. Content padding starts below it.
   EDIT: Change --logo-width / --logo-top / --logo-left in :root   */
#logo {
    position: fixed;
    top:  var(--logo-top);
    left: var(--logo-left);
    z-index: 1000;
    width: var(--logo-width);
}

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


/* ── MAIN NAVIGATION ───────────────────────────────────────────────
   Fixed to bottom-left, directly below the logo.
   EDIT: Change --nav-bottom / --logo-left in :root              */
.main-nav {
    position: fixed;
    bottom: var(--nav-bottom);
    left:   var(--logo-left);   /* always aligns with logo        */
    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.

   CLEARANCE: padding-top clears the logo (top); padding-bottom clears
   the nav (bottom). Both scale via clamp() — no magic numbers.    */
section.content {
    position: relative;
    height: 100vh;
    scroll-snap-align: start;
    padding: var(--content-top-pad) var(--content-side-pad) var(--content-bottom-pad) var(--content-side-pad);
    max-width: 660px;
    z-index: 10;
}


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

    /* Spacing is handled by clamp() in :root — no overrides needed.
       Only behaviour and typography change here.                  */

    h1 { font-size: 38px; line-height: 46px; }
    h5 { font-size: 20px; line-height: 28px; }

    body { scroll-snap-type: none; }

    section.content {
        height: auto;      /* Let long sections grow past 100vh on mobile */
        min-height: 100vh;
        max-width: 100%;
    }

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

}