/* ============================================================
   HOMEPAGE CSS - Styling for index.html
   
   CSS works by selecting HTML elements and applying styles to them.
   The format is always:
   
       selector {
           property: value;
       }
   
   A selector can be:
   - An element name like  body  or  h1  (affects ALL of those elements)
   - A class name like  .sidebar  (affects elements with class="sidebar")
   - An id like  #may4  (affects the one element with id="may4")
============================================================ */


/* This imports two fonts from Google Fonts (a free font library online) */
/* Playfair Display = elegant serif font used for headings */
/* Lora = readable serif font used for the italic subtitle */
/* DM Sans = clean modern font used 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 {
    /* smooth scrolling makes the page glide when you click a jump link */
    /* instead of jumping instantly */
    scroll-behavior: smooth;
}

/* The * selector means "apply this to EVERY element on the page" */
* {
    /* box-sizing: border-box makes sizing more predictable */
    /* It means padding and borders are included in the element's total width */
    box-sizing: border-box;
}

body {
    /* Sets the font for the whole page - everything inherits this unless overridden */
    font-family: 'DM Sans', sans-serif;

    /* The warm off-white background colour for the whole page */
    background-color: #faf9f6;

    /* Removes the default gap around the edge of the page */
    margin: 0;

    /* Default text colour - a dark grey (not pure black, softer to read) */
    color: #2c2c2c;
}


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

.site-header {
    /* Creates a gradient that goes from a lighter blue to a darker blue */
    /* 135deg means the gradient goes diagonally */
    background: linear-gradient(135deg, #0277bd 0%, #01579b 100%);

    /* Padding adds space inside the element (top, right, bottom, left) */
    padding: 22px 28px 16px;
}

/* The h1 inside the site-header (the main title "Morgan's Travels") */
.site-header h1 {
    /* Use our imported Playfair Display font for the title */
    font-family: 'Playfair Display', serif;

    font-size: 32px;

    /* 400 is normal weight (not bold) - Playfair looks elegant when not bold */
    font-weight: 400;

    /* White text so it shows up on the blue background */
    color: #fff;

    /* Remove default margins around headings */
    margin: 0;

    /* Slightly tighten the spacing between letters */
    letter-spacing: -0.01em;

    text-align: left;

    /* Remove default h1 styling that might carry over */
    background: none;
    padding: 0;
}

/* The h3 inside the site-header (the italic subtitle) */
.site-header h3 {
    font-size: 13px;

    /* Semi-transparent white (0.7 = 70% opacity) so it looks softer than the title */
    color: rgba(255, 255, 255, 0.7);

    /* Small gap above, pushing it away from the h1 */
    margin: 5px 0 0;

    /* italic makes the text slant to the right */
    font-style: italic;

    /* Use the Lora font for this - gives a different texture to the subtitle */
    font-family: 'Lora', serif;

    font-weight: 400;
    text-align: left;
    background: none;
    padding: 0;
}


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

nav {
    /* Slightly darker blue than the header */
    background: #01579b;

    /* display: flex makes the links sit side by side in a row */
    display: flex;

    /* Padding only on the left and right sides */
    padding: 0 20px;

    margin: 0;
}

/* All links inside the nav */
nav a {
    /* Space inside each link so it's easy to click */
    padding: 10px 14px;

    font-size: 13px;

    /* Semi-transparent white for non-active links */
    color: rgba(255, 255, 255, 0.65);

    /* Removes the default underline from links */
    text-decoration: none;

    /* Slight spacing between letters */
    letter-spacing: 0.03em;

    /* Makes each link a block that responds to padding properly */
    display: inline-block;
}

/* This prevents visited links turning purple */
nav a:visited {
    color: rgba(255, 255, 255, 0.65);
}

/* When you hover your mouse over a nav link */
nav a:hover {
    /* Make it slightly brighter */
    color: rgba(255, 255, 255, 0.9);
}

/* The currently active page link (set by adding class="active" in the HTML) */
nav a.active {
    /* Bright white so it stands out */
    color: #fff;

    /* A white underline on just the bottom edge */
    border-bottom: 2px solid #fff;

    font-weight: 500;
}


/* ---- TWO-COLUMN LAYOUT ---- */

/* The container holds the sidebar and main content side by side */
.container {
    /* display: flex puts child elements in a row next to each other */
    display: flex;

    /* Makes sure they line up at the top, not stretched to the same height */
    align-items: flex-start;

    /* Sets a minimum height so the page doesn't look empty */
    min-height: 60vh; /* vh = viewport height, so 60vh = 60% of the screen height */
}


/* ---- SIDEBAR (the "Jump to date" panel on the left) ---- */

.sidebar {
    /* Fixed width so it doesn't grow or shrink */
    width: 160px;

    /* flex-shrink: 0 stops it getting squashed when the screen gets smaller */
    flex-shrink: 0;

    /* Slightly darker cream than the main background */
    background: #f2efe8;

    /* A thin line on the right edge to separate it from the main content */
    border-right: 1px solid #ede9e0;

    padding: 24px 18px;

    /* position: sticky means it stays visible when you scroll down the page */
    position: sticky;

    /* It sticks to the very top of the screen when scrolling */
    top: 0;

    min-height: 100%;
}

/* The "Jump to date" label text at the top of the sidebar */
.sidebar-label {
    /* Very small, spaced-out, uppercase text - a common style for labels */
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase; /* Forces all letters to be capitals */
    color: #aaa; /* Light grey */
    margin: 0 0 12px;
}

/* The date links inside the sidebar */
.sidebar a {
    /* display: block makes each link take up the full width and stack vertically */
    display: block;

    font-size: 12px;

    /* Blue to match the header colour */
    color: #0277bd;

    /* Space above and below each link */
    padding: 7px 0;

    /* A thin line under each link to separate them */
    border-bottom: 1px solid #e8e4dc;

    text-decoration: none;
    line-height: 1.3;
}

/* Remove the line under the very last link */
.sidebar a:last-child {
    border-bottom: none;
}

/* Darker blue when hovering over a sidebar link */
.sidebar a:hover {
    color: #01579b;
}


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

.main {
    /* flex: 1 means "take up all the remaining space" after the sidebar */
    flex: 1;

    /* Padding gives breathing room around the blog posts */
    padding: 28px 36px;
}


/* ---- INDIVIDUAL BLOG POSTS ---- */

/* Each blog post div */
.blogpost {
    /* Space below each post */
    margin-bottom: 32px;

    /* Space between the content and the bottom line */
    padding-bottom: 32px;

    /* A thin horizontal line at the bottom to separate posts */
    border-bottom: 1px solid #ede9e0;
}

/* Remove the bottom line and extra space from the very last post */
.blogpost:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* The date text above each post title */
.post-date {
    font-size: 11px;
    color: #bbb; /* Light grey */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 6px;
    text-align: left;
    padding: 0;
}

/* The h2 heading inside each blog post */
.blogpost h2 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 400;
    color: #1a1a1a; /* Near black */
    margin: 0 0 10px;
    padding: 0;
    text-align: left;
}

/* The short decorative blue line under each post title */
.post-rule {
    width: 30px;   /* Only 30px wide - a short line, not full width */
    height: 1px;
    background: #0277bd; /* Blue to match the header */
    opacity: 0.4; /* 40% see-through so it's subtle */
    margin-bottom: 14px;
}

/* Photos inside blog posts */
.blogpost img {
    display: block;
    width: 100%; /* Fill the full width of the blog post area */
    max-width: 100%;
    height: auto; /* Height adjusts automatically to keep the right proportions */
    border-radius: 6px; /* Slightly rounded corners */
    margin: 14px 0; /* Gap above and below the image */
}

/* Body text paragraphs inside blog posts */
.blogpost p {
    font-size: 14px;
    color: #666; /* Medium grey - easier on the eyes than black */
    line-height: 1.85; /* Generous spacing between lines makes it easier to read */
    font-weight: 300; /* Light weight - thin, elegant text */
    margin: 0 0 8px;
    text-align: left;
    padding: 0;
}


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

footer {
    text-align: center;
    padding: 16px;

    /* Same dark blue as the nav bar */
    background-color: #01579b;

    /* Semi-transparent white text */
    color: rgba(255, 255, 255, 0.7);

    font-size: 13px;
    margin: 0;
}


/* ---- MOBILE RESPONSIVE STYLES ---- */
/* These rules ONLY apply when the screen is 800px wide or narrower */
/* This makes the page work on phones and tablets */

@media (max-width: 800px) {

    /* On mobile, stack the sidebar ABOVE the main content instead of side by side */
    .container {
        flex-direction: column; /* column = stacked vertically instead of horizontal */
    }

    /* On mobile, make the sidebar stretch across the full width */
    .sidebar {
        width: 100%;
        position: static; /* Remove the sticky positioning on mobile */
        border-right: none;
        border-bottom: 1px solid #ede9e0; /* Line below the sidebar instead */
        padding: 16px 20px;
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap onto new lines if needed */
        gap: 8px;
        align-items: center;
    }

    /* Make the sidebar label full width on its own line */
    .sidebar-label {
        margin: 0;
        width: 100%;
    }

    /* Style the sidebar links as small pill-shaped buttons on mobile */
    .sidebar a {
        border-bottom: none;
        padding: 4px 8px;
        background: #e8e4dc;
        border-radius: 4px;
    }

    /* Less padding around posts on small screens */
    .main {
        padding: 20px;
    }

    /* Less padding on the header on small screens */
    .site-header {
        padding: 16px 20px 12px;
    }

    /* Allow nav links to wrap onto two lines if needed on small screens */
    nav {
        flex-wrap: wrap;
        padding: 0 8px;
    }
}