/* =====================================================
   GLOBAL RESET & TYPOGRAPHY
   ===================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    background-color: #f4f1eb;   /* off white */
    color: #222;
    line-height: 1.65;
}


/* =====================================================
   HEADER & NAVIGATION (CHARCOAL)
   ===================================================== */

.site-header {
    background-color: #101518;
}

.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-title {
    font-weight: bold;
    letter-spacing: 0.08em;
    color: #f5f5f2;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.2rem;
}

nav a {
    text-decoration: none;
    color: #f5f5f2;
}

nav a.active {
    text-decoration: underline;
}

.colour-bar {
    height: 6px;
    background-color: #444444;
}


/* =====================================================
   LANDING PAGE LAYOUT
   ===================================================== */
.visually-hidden {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

main.landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.2rem 1rem 2.5rem;
}

/* Single calm column */
main.landing > * {
    max-width: 720px;
    width: 100%;
}


/* =====================================================
   HERO LOGO (TMBTB) 
   ===================================================== */

.hero-logo {
 padding-top: 0.5rem;    
max-height: 200px;              width: auto;
    height: auto;
    display: block;
    margin: 0 auto 0.25rem;     
}


/* =====================================================
   SECONDARY / SMALL LOGOS
   ===================================================== */

.page-logo-centre {
    display: flex;
    justify-content: center;
    margin: 0.6rem auto 0.2rem;
}

.page-logo-centre img {
    max-width: 75px;
    height: auto;
    margin: 0;
}


/* =====================================================
   HEADINGS
   ===================================================== */

h1 {
    text-align: center;
    margin: 0.2rem 0 0.15rem;
}
.landing-intro h1 {
    text-align: center;
}

.subtitle {
    text-align: center;
    font-style: italic;
    font-weight: bold;
    margin: 0 0 0.9rem;

}


/* =====================================================
   CONTENT BLOCKS
   ===================================================== */
.landing-intro {
    text-align: center;
}

.intro-box {
    margin: 1.3rem auto;
}

/* Book-quality line length */
.intro-box p {
    max-width: 65ch;
    margin: 0 auto 1rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    word-spacing: 0.03em;
}

/* Lists */
.intro-box ul {
    padding-left: 1.2rem;
}

.intro-box li {
    max-width: 65ch;
    margin: 0 auto 0.6rem;
    text-align: justify;
}


/* =====================================================
   IMAGES & FIGURES (NON-HERO)
   ===================================================== */

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.2rem auto;
    border-radius: 12px;
}
figure {
    border-radius: 12px;
    overflow: hidden;
}

/* Ensure hero logo is not affected by generic img rules */
.hero-logo {
    margin-top: 0;
}

figure {
    margin: 1.4rem auto;
    text-align: center;
}

figcaption {
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 0.4rem;
    opacity: 0.8;
}


/* =====================================================
   DETAILS / PROJECT SECTIONS
   ===================================================== */

details.intro-box {
    border-top: 1px solid #ccc;
    padding-top: 0.9rem;
}

details.intro-box > summary {
    cursor: pointer;
    font-size: 1.05rem;
    padding: 0.5rem 0;
    list-style: none;
    position: relative;
}

details.intro-box > summary::-webkit-details-marker {
    display: none;
}

details.intro-box > summary {
    cursor: pointer;
    font-size: 1.05rem;
    padding: 0.5rem 0;
    list-style: none;
    position: relative;
}

/* Newlands Arrow */
details.intro-box > summary::after {
    content: "▸";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rotated state */
details.intro-box[open] > summary::after {
    transform: translateY(-50%) rotate(90deg);
}

}

details[open] > summary::after {
    transform: rotate(90deg);
}

details.intro-box > summary:hover {
    text-decoration: underline;
}


/* =====================================================
   PROJECTS HINT
   ===================================================== */

.projects-hint {
    font-style: italic;
    opacity: 0.75;
    margin: 1.4rem 0;
    text-align: center;
}


/* =====================================================
   LINKS
   ===================================================== */

a {
    color: #2f4f4f;
}

a:hover {
    text-decoration: underline;
}
.nova-wrap {
    overflow: hidden; /* clears the float */
}
/* =====================================================
   Image grids
   ===================================================== */
/* =====================================================
   Image grids
   ===================================================== */

.photo-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.photo-grid-2x2 figure {
    margin: 0;
}

/* Force all images to the same visual size */
.photo-grid-2x2 img {
    width: 100%;
    aspect-ratio: 4 / 3;     
    object-fit: cover;       /* crop, don’t stretch */
    display: block;
    border-radius: 12px;
}

.photo-grid-2x2 figcaption {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #444;
}
/* =====================================================
   Image grid – 2x1
   ===================================================== */

.photo-grid-2x1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.photo-grid-2x1 figure {
    margin: 0;
}

/* Same visual size as your 2x2 grid */
.photo-grid-2x1 img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.photo-grid-2x1 figcaption {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #444;
    text-align: center;
}
/* =====================================================
   Single image with caption + paragraph
   ===================================================== */

.photo-single {
    margin: 2rem 0;
}

.photo-single figure {
    margin: 0;
    overflow: hidden; /* ensures rounded corners clip */
}

.photo-single img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

/* =====================================================
   Single image (Raleigh Nova detail)
   ===================================================== */

.photo-single {
    margin: 2rem auto;
    max-width: 520px;   /* controls image size */
}

.photo-single figure {
    margin: 0;
    overflow: hidden;   /* ensures rounded corners clip */
}

.photo-single img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 12px;   /* rounded edges */
}

.photo-single figcaption {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    font-style: italic;
    color: #444;
    text-align: center;
}

/* Paragraph under the image */
.photo-single .photo-description {
    max-width: 65ch;
    margin: 1rem auto 0;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
.image-pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.image-pair figure {
    margin: 0;
    text-align: center;
}

.image-pair img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.image-pair figcaption {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
}

/* Stack on small screens */
@media (max-width: 700px) {
    .image-pair {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   Mobile fixes (navigation + text)
   ===================================================== */

@media (max-width: 700px) {

    /* Stack header instead of squeezing it */
    .header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    /* Allow nav items to wrap */
    nav ul {
        flex-wrap: wrap;
        gap: 0.6rem 1rem;
    }

    /* Prevent text feeling too wide on phones */
    .intro-box p {
        text-align: left;
        hyphens: auto;
    }

}/* Mobile text width fix */
@media (max-width: 768px) {
    .content,
    .text-container,
    main {
        max-width: 92%;
        margin-left: auto;
        margin-right: auto;
    }
}
/* Landing page intro width control */
.landing-intro {
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (max-width: 768px) {
    .landing-intro {
        max-width: 92%;
    }
}
/* =========================================
   SIP PLANTER CALCULATOR
   ========================================= */

.sip-calculator {
    max-width: 420px;
    margin: 2rem auto;
    padding: 1.25rem;
    background: #f6f6f6;
    border: 1px solid #bbb;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-size: 0.95em;
}

.sip-calculator h3 {
    text-align: center;
    margin: 0 0 0.75rem 0;
}

.sip-intro {
    font-size: 0.9em;
    line-height: 1.4;
    margin: 0 0 0.75rem 0;
}

/* Units */

.unit-toggle {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 0.9em;
}

/* Fieldsets */

.sip-fieldset {
    border: 1px solid #bbb;
    padding: 0.75rem;
    margin: 0 0 1rem 0;
    background: #f9f9f9;
}

.sip-fieldset legend {
    font-size: 0.85em;
    padding: 0 0.4em;
}

/* Form grid */

.sip-form-grid {
    display: grid;
    gap: 0.5rem;
}

.sip-row {
    display: grid;
    grid-template-columns: 7.5rem auto;
    align-items: center;
    column-gap: 0.75rem;
}

.sip-label {
    text-align: right;
    color: #333;
    font-size: 0.9em;
}

.sip-calculator input[type="number"] {
    width: 7rem;
}

/* Buttons */

.sip-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.sip-buttons button {
    padding: 0.4rem 1.2rem;
    font-size: 0.9em;
    cursor: pointer;
}

/* Results */

.sip-results {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #ffffff;
    border-left: 4px solid #666;
    font-size: 0.9em;
}

.sip-results p {
    margin: 0.25rem 0;
}

/* Assumptions */

.sip-assumptions {
    margin-top: 0.75rem;
    font-size: 0.75em;
    color: #555;
    line-height: 1.4;
}

/* Light humour */

.sip-humour {
    margin-top: 0.5rem;
    font-size: 0.75em;
    color: #666;
    text-align: center;
}


/* =====================================================
   WORKSHOP PAGE ONLY
   Standardised galleries & images
   ===================================================== */

.workshop-page .project-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.4rem;
    margin: 1.6rem 0;
}

.workshop-page .project-gallery figure {
    margin: 0;
}

/* Standard image appearance */
.workshop-page .project-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 12px;

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Soft hover */
.workshop-page .project-gallery img:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.workshop-page .project-gallery figcaption {
    margin-top: 0.45rem;
    font-size: 0.9rem;
    text-align: center;
    font-style: italic;
    opacity: 0.85;
}

/* Tighten spacing inside workshop sections */
.workshop-page details.intro-box {
    margin-bottom: 1.8rem;
}

/* Prevent giant margins on gallery images */
.workshop-page .project-gallery img {
    margin: 0;
}
/* =====================================================
   WILLIE JOE / VEG PATCH WIDGET
   ===================================================== */

/* Intro text above widget */
.willie-intro {
    max-width: 520px;
    margin: 10px auto 6px;
    font-size: 0.95rem;
    text-align: center;
    opacity: 0.75;
}

/* Main widget container */
.year-widget {
    max-width: 520px;
    margin: 30px auto 10px;
    padding: 30px 22px 34px;
    border: 2px solid #222;
    border-radius: 14px;
    background: #f4f1eb;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: background 0.6s ease;
}

/* Seasonal modes */
.year-widget.winter-mode {
    background: #808080;
}

.year-widget.spring-mode {
    background: #f1f5ef;
}

/* Month row layout */
.month-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 72px;
}

.month-box {
    font-weight: bold;
}

/* Season icon box */
.season-icon {
    width: 34px;
    height: 34px;
    border: 1px solid #222;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Winter contrast fixes */
.year-widget.winter-mode .month-box,
.year-widget.winter-mode .season-caption,
.year-widget.winter-mode .season-icon {
    color: white;
    border-color: #ddd;
}

/* Timeline line */
.year-line {
    position: relative;
    height: 4px;
    background: #222;
    border-radius: 2px;
    margin: 18px 6px 0;
}

/* Willie sprite */
.willie {
    position: absolute;
    top: -87px;
    width: 42px;
    image-rendering: pixelated;
    transition: left 0.8s ease;
}

/* =====================================================
   SNOW EFFECT (WINTER)
   ===================================================== */

.snow {
    position: absolute;
    inset: -90px 0 0 0;
    pointer-events: none;
    overflow: hidden;
}

.snowflake {
    position: absolute;
    top: -10px;
    width: 6px;
    height: 6px;
    background: white;
    opacity: 0.7;
    animation: fall linear infinite;
}

.snowflake::before,
.snowflake::after {
    content: "";
    position: absolute;
    inset: 0;
    background: white;
}

.snowflake::before {
    transform: rotate(60deg);
}

.snowflake::after {
    transform: rotate(120deg);
}

@keyframes fall {
    to {
        transform: translateY(110px) translateX(6px);
        opacity: 0.2;
    }
}

/* =====================================================
   SPRING DRIZZLE EFFECT
   ===================================================== */

.drizzle {
    position: absolute;
    inset: -90px 0 0 0;
    pointer-events: none;
    overflow: hidden;
}

.raindrop {
    position: absolute;
    top: -10px;
    width: 2px;
    height: 10px;
    background: rgba(120, 160, 180, 0.45);
    border-radius: 2px;
    opacity: 0.5;
    animation: drizzle-fall linear infinite;
}

@keyframes drizzle-fall {
    to {
        transform: translateY(110px) translateX(2px);
        opacity: 0.15;
    }
}

/* =====================================================
   VEG PATCH TEXT TWEAKS
   ===================================================== */

.vegpatch-heading {
    text-align: center;
}

.vegpatch-subtitle {
    font-weight: bold;
    font-style: italic;
}

/* =========================
   VEG PATCH DIARY
   ========================= */

.diary-section {
    max-width: 900px;
    margin: 2rem auto;
}


.diary-controls {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
}

.diary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    background: #fff;
    table-layout: fixed;
}


.diary-table th {
    text-align: left;
    border-bottom: 2px solid #ccc;
    padding: 0.5rem;
}

.diary-table td {
    padding: 0.5rem;
    border-bottom: 1px solid #e5e5e5;
}

.diary-table tr:hover {
    background-color: #f8f6f2;
}

.diary-table td:last-child {
    color: #555;
    font-style: italic;
}
/* =========================
   Diary solution for phones
   ========================= */

@media (max-width: 768px) {

    .diary-table,
    .diary-table thead,
    .diary-table tbody,
    .diary-table th,
    .diary-table td,
    .diary-table tr {
        display: block;
        width: 100%;
    }

    .diary-table thead {
        display: none; /* hide headers */
    }

    .diary-table tr {
        background: #fff;
        margin-bottom: 1rem;
        padding: 0.8rem;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .diary-table td {
        border: none;
        padding: 0.3rem 0;
    }

    .diary-table td::before {
        font-weight: bold;
        display: inline-block;
        width: 90px;
    }

    .diary-table td:nth-child(1)::before { content: "Date: "; }
    .diary-table td:nth-child(2)::before { content: "Season: "; }
    .diary-table td:nth-child(3)::before { content: "Crop: "; }
    .diary-table td:nth-child(4)::before { content: "State: "; }
    .diary-table td:nth-child(5)::before { content: "Pests: "; }
    .diary-table td:nth-child(6)::before { content: "Notes: "; }

}
/* =====================================================
   PAGE LAYOUT FIX (Sticky Footer)
   ===================================================== */

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

/* Main content expands to push footer down */
main {
    flex: 1;
}


/* =====================================================
   LANDING PAGE FOOTER - keep 'em informed
   ===================================================== */

.landing-footer {
    margin-top: 3rem;
    padding: 1.2rem 0;
    text-align: center;
    font-size: 0.7rem;
    color: #777;
    opacity: 0.7;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* Footer links */
.landing-footer a {
    color: #777;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

/* Hover behaviour */
.landing-footer a:hover {
    text-decoration: underline;
    opacity: 1;
}
/* Privacy text toggle */

.privacy-text {
    display: none;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: #777;
    text-align: center;
    line-height: 1.4;
}