/* =====================================================
   style.css = the DESIGN part: colours, fonts, layout.
   ===================================================== */

/* ---------- 1. COLOURS & SETTINGS ----------
   :root holds CSS variables. We write a colour once here and reuse it with var(--name).
   To change the site's look, you only edit these lines. */
:root {
    --ink: #16283a;        /* main dark text colour */
    --muted: #51606e;      /* softer grey text (menu links) */
    --paper: #f6f8f9;      /* light page background */
    --surface: #ffffff;    /* white, used for the header */
    --line: #d7dee4;       /* thin border lines */
    --brand: #1f5f6b;      /* teal, used for the logo icon */
    --accent: #e8a33d;     /* yellow, used for the button and active link */
    --accent-ink: #2b1c00; /* dark text that sits on top of the yellow */
    --footer-bg: #16283a;  /* footer background */
    --footer-text: #dfe7ec;
    --footer-muted: #9fb1bd;
    --footer-bar: #0f1d2a; /* the darker strip at the very bottom */
    --header-h: 72px;      /* header height, reused by the mobile menu */
    --font-head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; /* headings (2nd+ fonts = backups) */
    --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;             /* normal text */
}

/* ---------- 2. BASIC RESET ----------
   box-sizing: border-box means padding is included inside an element's width,
   so boxes don't grow unexpectedly. */
*, *::before, *::after { box-sizing: border-box; }

/* body is a flex column with min-height 100vh (full screen height).
   Together with "flex: 1" on <main>, this pushes the footer to the bottom
   even when the page has very little content. */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
}

main { flex: 1 0 auto; }   /* main takes all the leftover space */

/* .wrap keeps the content centred and not too wide on big screens.
   margin-inline: auto centres it; padding-inline adds space on the sides */
.wrap {
    width: 100%;
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: 20px;
}

a { color: inherit; }   /* links use the surrounding text colour */

/* When someone uses the keyboard (Tab), draw a yellow outline around the focused item */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Skip link: parked off-screen (top: -60px) and slides into view when focused */
.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    padding: 10px 16px;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
    border-radius: 6px;
    z-index: 2000;
}
.skip-link:focus { top: 12px; }

/* ---------- 3. LOGO ----------
   Icon and text side by side using flexbox (display: inline-flex) */
.brand {
    display: inline-flex;
    align-items: center;   /* vertically centres icon and text */
    gap: 10px;             /* space between them */
    text-decoration: none; /* removes the underline */
    color: var(--brand);   /* the SVG uses currentColor, so it becomes teal */
}
.brand-mark { width: 34px; height: 34px; }
.brand-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* ---------- 4. HEADER ----------
   position: sticky + top: 0 keeps the header at the top while you scroll.
   z-index makes it appear above other content. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

/* Flexbox with space-between: logo goes to the left, menu to the right */
.header-inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Menu links in a row */
.site-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Normal links (":not(.nav-cta)" = every link except the yellow button) */
.site-nav > a:not(.nav-cta) {
    padding: 8px 14px;
    text-decoration: none;
    font-weight: 500;
    color: var(--muted);
    border-radius: 6px;
    transition: color .2s, background-color .2s;  /* smooth change on hover */
}
.site-nav > a:not(.nav-cta):hover { color: var(--ink); background: var(--paper); }

/* The current page link: bold, with a yellow line under it.
   [aria-current="page"] selects the link that has that attribute in the HTML.
   "inset box-shadow" is a trick to draw an underline inside the box. */
.site-nav > a[aria-current="page"]:not(.nav-cta) {
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--accent);
    border-radius: 6px 6px 0 0;
}

/* Contact Us yellow button */
.nav-cta {
    margin-left: 8px;
    padding: 10px 20px;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: filter .2s;
}
.nav-cta:hover { filter: brightness(1.07); }   /* slightly brighter on hover */

/* ---------- 5. HAMBURGER BUTTON ----------
   Hidden on desktop (display: none). The media query in section 6 shows it on phones. */
.menu-btn {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    place-items: center;   /* centres the bars (used when display is grid) */
}

/* The 3 lines: the middle bar is the <span> itself,
   the top and bottom bars are made with ::before and ::after (extra pieces CSS can add) */
.menu-bars,
.menu-bars::before,
.menu-bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}
.menu-bars { position: relative; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -6px; }   /* top bar sits 6px above the middle */
.menu-bars::after  { top: 6px; }    /* bottom bar sits 6px below */

/* When the menu is open (JavaScript sets aria-expanded="true"), turn the 3 lines into an X:
   hide the middle bar, rotate the top and bottom bars into a cross */
.menu-btn[aria-expanded="true"] .menu-bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-bars::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 6. PHONE LAYOUT ----------
   @media applies these rules ONLY when the screen is 820px wide or less. */
@media (max-width: 820px) {
    .menu-btn { display: grid; }   /* show the hamburger */

    /* The menu becomes a dropdown panel under the header.
       position: absolute + top: var(--header-h) puts it right below the header.
       It starts hidden (display: none) and JavaScript adds .is-open to show it. */
    .site-nav {
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        flex-direction: column;   /* links stacked vertically */
        align-items: stretch;     /* each link is full width */
        gap: 4px;
        padding: 14px 20px 20px;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
        display: none;
    }
    .site-nav.is-open { display: flex; }   /* JavaScript adds "is-open" -> menu appears */

    .site-nav > a:not(.nav-cta) { padding: 12px 14px; }

    /* On phones the current page gets a yellow bar on the left instead of an underline */
    .site-nav > a[aria-current="page"]:not(.nav-cta) {
        box-shadow: inset 4px 0 0 var(--accent);
        border-radius: 6px;
        background: var(--paper);
    }
    .nav-cta { margin: 8px 0 0; text-align: center; }
}

/* ---------- 7. FOOTER ---------- */
.site-footer {
    flex-shrink: 0;
    margin-top: 64px;
    background: var(--footer-bg);
    color: var(--footer-text);
}
.site-footer .brand-name { color: #fff; }       /* logo text must be white on the dark background */
.site-footer .brand { color: var(--accent); }   /* logo icon is yellow in the footer */

/* CSS Grid: 3 columns. "1.4fr 1fr 1.2fr" = the columns share the width in these proportions */
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 48px;
    padding-block: 56px 40px;   /* top 56px, bottom 40px */
}
.footer-brand p {
    max-width: 34ch;            /* limits line length to about 34 characters */
    margin: 14px 0 0;
    color: var(--footer-muted);
}
.footer-title {
    margin: 0 0 14px;
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
}

/* Remove bullet points from the lists and space the items out */
.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.footer-col li { color: var(--footer-muted); }
.footer-col a {
    color: var(--footer-text);
    text-decoration: none;
    transition: color .2s;
}
.footer-col a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Darker strip with the copyright text */
.footer-bar {
    background: var(--footer-bar);
    padding-block: 14px;
    font-size: .875rem;
    color: var(--footer-muted);
}
.footer-bar p { margin: 0; }

/* Footer on tablets: 2 columns, brand takes the full first row ("1 / -1" = from first to last column) */
@media (max-width: 820px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; padding-block: 44px 32px; }
    .footer-brand { grid-column: 1 / -1; }
}
/* Footer on small phones: 1 column */
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* If the user's device is set to "reduce motion", turn off animations */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}