/* ==========================================================================
   site.css  -  LAYER 1
   Loaded by every template via the SiteHead chunk.
   Contains: variables, body, container, header, nav, burger menu, footer.
   Nothing page-specific and no reusable components go in this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --gm-green: #00A36C;
    --gm-green-dark: #007A52;   /* use where green is text or sits behind text */
    --gm-green-tint: #E6F4EE;
    --gm-green-muted: #91A19B;

    /* Text */
    --gm-text: #333333;
    --gm-heading: #1e293b;
    --gm-slate-dark: #0f172a;
    --gm-slate: #334155;
    --gm-slate-mid: #475569;
    --gm-slate-light: #64748b;

    /* Surfaces and borders */
    --gm-white: #ffffff;
    --gm-surface-hover: #f1f5f9;
    --gm-header-border: #cccccc;
    --gm-divider: #e2e8f0;
    --gm-border: #cbd5e1;
    --gm-border-strong: #94a3b8;
    --gm-overlay: rgba(15, 23, 42, 0.5);
	--gm-alert: #b91c1c;

    /* Fonts */
    --gm-font-body: sans-serif;
    --gm-font-ui: -apple-system, BlinkMacSystemFont, sans-serif;

    /* Layout */
    --gm-page-padding: 15px;
    --gm-page-max-width: 1200px;
}

/* Note: the desktop breakpoint is 1024px. CSS variables cannot be used inside
   @media conditions, so the value is typed in each media query. */

/* --------------------------------------------------------------------------
   2. Page shell
   -------------------------------------------------------------------------- */
body {
    margin: 0;
    font-family: var(--gm-font-body);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    padding: var(--gm-page-padding);
    flex: 1;
}

#site_content {
    padding: 20px 0;
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */
#site_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--gm-header-border);
    position: relative; /* anchor for the mobile drop-down menu */
}

#site_header_title {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    font-family: var(--gm-font-ui);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gm-heading);
    white-space: nowrap;
}

/* Position of the back arrow when it is shown inside the header title */
#site_header_title .back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0 10px;
}

#contextIcon {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    margin: 0;
    height: auto; /* keeps aspect ratio from the width attribute */
}

/* --------------------------------------------------------------------------
   4. Burger button (phone and tablet)
   -------------------------------------------------------------------------- */
#menu_toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

#menu_toggle span {
    width: 30px;
    height: 3px;
    background-color: var(--gm-text);
    transition: all 0.3s ease;
}

/* Burger becomes an X when the menu is open */
#menu_toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
#menu_toggle.active span:nth-child(2) { opacity: 0; }
#menu_toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* --------------------------------------------------------------------------
   5. Header menu - PHONE AND TABLET (narrower than 1024px)
   The burger opens a full-width list, one row per link.
   The #site_header_menu a selector outranks .nav-pills-link in
   components.css, so the pill styling is replaced by row styling here.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
    #site_header_menu {
        display: none; /* hidden until the burger is pressed */
        flex-direction: column;
        position: absolute;
        top: 100%;
        /* reach the screen edges, past the .container padding */
        left: calc(-1 * var(--gm-page-padding));
        right: calc(-1 * var(--gm-page-padding));
        z-index: 100;
        max-height: 80vh; /* a long menu scrolls inside itself */
        overflow-y: auto;
        background-color: var(--gm-white);
        border-top: 1px solid var(--gm-header-border);
        /* dims the page below the menu; clip-path stops it covering the header */
        box-shadow: 0 100vmax 0 100vmax var(--gm-overlay);
        clip-path: inset(0 0 -200vmax 0);
    }

    #site_header_menu.active {
        display: flex;
    }

    /* One row per link */
    #site_header_menu a {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        width: auto;
        min-height: 56px;
        padding: 0 16px 0 20px;
        box-sizing: border-box;
        border: 0;
        border-top: 1px solid var(--gm-divider);
        border-radius: 0;
        background-color: var(--gm-white);
        color: var(--gm-heading);
        font-family: var(--gm-font-ui);
        font-size: 1.05rem;
        font-weight: 500;
        line-height: 1.2;
        text-align: left;
        text-decoration: none;
        transform: none;
    }

    #site_header_menu a:first-child {
        border-top: 0;
    }

    /* Row icons: inline SVG on section links, <img> on utility links */
    #site_header_menu a svg,
    #site_header_menu a img {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
    }

    /* Chevron at the right of each section row */
    #site_header_menu a.nav-pills-link::after {
        content: "";
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        margin-left: auto;
        border-top: 2px solid var(--gm-slate-light);
        border-right: 2px solid var(--gm-slate-light);
        transform: rotate(45deg);
    }

    #site_header_menu a:hover {
        background-color: var(--gm-surface-hover);
    }

    /* Utility links (contact, log out): quieter colour */
    #site_header_menu a.nav-util {
        color: var(--gm-slate-mid);
    }

    /* Thick divider above the first utility link */
    #site_header_menu a.nav-group-start {
        border-top: 8px solid var(--gm-surface-hover);
    }

    /* The page you are on. aria-current is set by the SiteMenuToggle script */
    #site_header_menu a[aria-current="page"] {
        padding-left: 16px;
        border-left: 4px solid var(--gm-green-dark);
        background-color: var(--gm-green-tint);
        color: var(--gm-green-dark);
        font-weight: 700;
    }

    #site_header_menu a[aria-current="page"]::after {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */
footer {
    margin-top: auto;
    padding: 12px var(--gm-page-padding);
    border-top: 1px solid var(--gm-header-border);
    background-color: var(--gm-white);
    color: var(--gm-slate-light);
    font-family: var(--gm-font-ui);
    font-size: 0.8rem;
    text-align: center;
}

footer p {
    padding: 0;
    margin: 0;
}

/* --------------------------------------------------------------------------
   7. Desktop (1024px and wider)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .container {
        max-width: var(--gm-page-max-width);
        margin: 0 auto;
        width: 100%;
        box-sizing: border-box;
    }

    #menu_toggle {
        display: none;
    }

    /* Menu is a row in the header. Pill links are styled in components.css */
    #site_header_menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    /* Icon links */
    #site_header_menu a:not(.nav-pills-link) {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        color: var(--gm-text);
    }

    /* Row icons are for the phone list only */
    #site_header_menu .nav-icon {
        display: none;
    }

    /* Text labels on icon links: hidden from view, still read by screen readers */
    #site_header_menu .nav-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}