/* ============================================================
   BASE CSS - Shared styling for all pages except the homepage
   
   This file is used by: About Me, My Trip, My Gear, and Contact pages.
   
   It contains all the shared styles (header, nav, footer, text)
   so we don't have to repeat the same code in every single CSS file.
============================================================ */


/* Import fonts from Google Fonts - a free online font library */
/* Playfair Display = elegant font for headings */
/* Lora = italic font for the subtitle */
/* DM Sans = clean font for body text */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lora:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap');


/* ---- BASE PAGE SETTINGS ---- */

html {
    /* Makes the page glide smoothly when clicking jump links */
    scroll-behavior: smooth;
}

/* The star * means "apply to every element on the page" */
* {
    /* Makes sizing easier - padding and borders count within the element width */
    box-sizing: border-box;
}

body {
    /* Default font for the whole page */
    font-family: 'DM Sans', sans-serif;

    /* Warm off-white background */
    background-color: #faf9f6;

    /* Remove the default white border around the page edge */
    margin: 0;

    /* Dark grey default text colour */
    color: #2c2c2c;
}


/* ---- HEADER (blue title block at the top) ---- */

.site-header {
    /* Blue gradient going diagonally from lighter to darker blue */
    background: linear-gradient(135deg, #0277bd 0%, #01579b 100%);
    padding: 22px 28px 16px;
}

/* The main site title inside the header */
.site-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 400; /* Normal weight - Playfair looks elegant not bolded */
    color: #fff;
    margin: 0;
    letter-spacing: -0.01em;
    text-align: left;
    background: none;
    padding: 0;
}

/* The italic subtitle inside the header */
.site-header h3 {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7); /* White at 70% opacity - softer than full white */
    margin: 5px 0 0;
    font-style: italic;
    font-family: 'Lora', serif;
    font-weight: 400;
    text-align: left;
    background: none;
    padding: 0;
}


/* ---- NAVIGATION BAR ---- */

nav {
    background: #01579b; /* Dark blue, slightly darker than the header */
    display: flex; /* Makes the links sit in a horizontal row */
    padding: 0 20px;
    margin: 0;
}

/* All links inside the nav */
nav a {
    padding: 10px 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65); /* Dim white for non-active links */
    text-decoration: none; /* Remove default underline */
    letter-spacing: 0.03em;
    display: inline-block;
}

/* Stop visited links going purple */
nav a:visited {
    color: rgba(255, 255, 255, 0.65);
}

/* Brighten the link when hovering */
nav a:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* The active link = the page you are currently on */
/* Set by adding class="active" to the right link in the HTML */
nav a.active {
    color: #fff;
    border-bottom: 2px solid #fff; /* White underline shows which page is active */
    font-weight: 500;
}


/* ---- MAIN CONTENT AREA ---- */

/* This wraps the page content for all non-homepage pages */
.main {
    /* max-width stops the text stretching too wide on big screens */
    max-width: 800px;

    /* auto margins centre the content horizontally on the page */
    margin: 0 auto;

    padding: 36px 36px;
}

/* Section headings inside the main content */
.main h2 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 10px;
    padding: 0;
    text-align: left;
}

/* The short blue decorative line that appears under headings */
.post-rule {
    width: 30px;  /* Short - only 30px wide */
    height: 1px;
    background: #0277bd;
    opacity: 0.4; /* 40% see-through - subtle look */
    margin-bottom: 16px;
}

/* Regular body text paragraphs */
.main p {
    font-size: 14px;
    color: #666; /* Medium grey - softer than black */
    line-height: 1.85; /* Generous line spacing for readability */
    font-weight: 300; /* Light weight */
    margin: 0 0 20px;
    text-align: left;
    padding: 0;
}

/* Images inside the main content area */
.main img {
    display: block;
    width: 100%;  /* Fills the full width */
    max-width: 100%;
    height: auto; /* Height adjusts to keep correct proportions */
    border-radius: 6px; /* Gently rounded corners */
    margin: 18px 0;
}

/* A full-width horizontal line used to separate sections */
.section-divider {
    width: 100%;
    height: 1px;
    background: #ede9e0; /* Light cream colour */
    margin: 28px 0;
}


/* ---- FOOTER ---- */

footer {
    text-align: center;
    padding: 16px;
    background-color: #01579b; /* Same dark blue as the nav */
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin: 0;
}


/* ---- MOBILE RESPONSIVE STYLES ---- */
/* Only applies when the screen is 800px wide or narrower (phones/tablets) */

@media (max-width: 800px) {

    /* Reduce padding on smaller screens */
    .main {
        padding: 20px;
    }

    .site-header {
        padding: 16px 20px 12px;
    }

    /* Allow nav links to wrap onto two lines if the screen is narrow */
    nav {
        flex-wrap: wrap;
        padding: 0 8px;
    }

    /* Make sure images don't overflow on small screens */
    .main img {
        width: 100%;
    }
}