/*
 * layout.css — page chrome: header (utility bar, logo masthead, dark menu bar),
 * footer and bottom bar. Component-level styles live in components.css; page
 * blocks in blocks.css.
 *
 * The header follows the three-row layout the client chose as the reference:
 *   1 .topbar    phone / email / location + social icons
 *   2 .masthead  logo + contact cards (+ mobile menu button)
 *   3 .navbar    full-width dark menu bar, sticky once it reaches the top
 */

/* Anchor for the mobile menu panel, which drops out of the header. */
.site-header { position: relative; }

/* -------------------------------------------------------------------------
 * 1 · Utility bar
 * ---------------------------------------------------------------------- */
.topbar {
    background: var(--gg-green-950);
    color: var(--gg-ink-200);
    font-size: var(--gg-text-sm);
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gg-space-4);
    min-height: 2.75rem;
    padding-block: 0.35rem;
}

.topbar__contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gg-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Each item is one line: icon, then the detail beside it.
 *
 * Two of the three wrap their contents in an <a>, so the row has to be the
 * ANCHOR as well as the <li> — with the gap only on the <li>, the icon sat
 * above the text and the bar grew to two ragged lines. flex: none stops a
 * squeezed bar shrinking an item below its own content instead.
 */
.topbar__contacts li,
.topbar__contacts li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.topbar__contacts li { flex: none; }

/* Right-hand end of the utility bar: account links, then the social icons. */
.topbar__right { display: flex; align-items: center; gap: var(--gg-space-4); }

.topbar__account {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.topbar__account:hover { color: var(--gg-gold-300); }

.topbar__account--cta {
    padding: 0.2rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--gg-radius-full);
}

.topbar__account--cta:hover { background: var(--gg-accent-strong); border-color: var(--gg-accent-strong); color: #fff; }
.topbar__contacts a { color: inherit; text-decoration: none; }
.topbar__contacts a:hover { color: var(--gg-gold-300); }
.topbar__contacts svg { width: 1rem; height: 1rem; flex: none; color: var(--gg-gold-400); }

/* -------------------------------------------------------------------------
 * 2 · Masthead (logo + contact cards)
 * ---------------------------------------------------------------------- */
.masthead { background: var(--gg-surface); }

.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gg-space-5);
    padding-block: var(--gg-space-4);
}

.brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.brand img { width: auto; height: 3.75rem; }

/*
 * The right of the logo band. Without it the band was a 172px logo in a
 * 1216px row — 86% of it empty — because the contact cards that used to fill
 * it were removed as duplicates of the utility bar.
 */
.masthead__aside {
    display: flex;
    align-items: center;
    gap: var(--gg-space-5);
}

/* Takes the space between the logo and the action, so the band reads as three
   deliberate parts rather than a logo with a hole beside it. */
.masthead__tagline {
    flex: 1;
    margin: 0;
    color: var(--gg-ink-muted);
    font-family: var(--gg-font-display);
    font-size: 0.9375rem;
    font-style: italic;
    letter-spacing: 0.01em;
    text-align: center;
}

.masthead__meta {
    display: flex;
    align-items: center;
    gap: var(--gg-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.meta-card { display: inline-flex; align-items: center; gap: 0.7rem; }

.meta-card__body { display: flex; flex-direction: column; line-height: 1.3; }

.meta-card__label {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    color: var(--gg-primary);
}

.meta-card__value {
    font-size: var(--gg-text-sm);
    color: var(--gg-ink-700);
    text-decoration: none;
    word-break: break-word;
}

a.meta-card__value:hover { color: var(--gg-accent-strong); }

.icon-circle {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: 50%;
    background: var(--gg-green-50);
    color: var(--gg-primary-strong);
}

.icon-circle svg { width: 1.25rem; height: 1.25rem; }

/* -------------------------------------------------------------------------
 * 3 · Menu bar
 * ---------------------------------------------------------------------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--gg-green-900);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.site-header.is-scrolled .navbar { box-shadow: var(--gg-shadow); }

.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gg-space-4);
}

.site-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--gg-space-4); flex: 1; }

.site-nav__list {
    display: flex;
    /* Never wrap on desktop: wrapping orphaned "Contact Us" onto a row of its
       own and doubled the height of the bar. Deliberately NOT paired with
       overflow-x — that computes overflow-y to auto as well, which would clip
       the About Us and Solar Services drop-downs. The narrow-desktop band
       below frees the width instead. The mobile block restores wrapping. */
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A menu item must not be squeezed narrower than its own words. */
.site-nav__list > li { flex: 0 0 auto; }


/* -------------------------------------------------------------------------
 * Drop-down menu (Solar Services)
 *
 * Opens on hover and on keyboard focus, so it works without JavaScript. On
 * phones the panel is part of the stacked menu instead (see the media query).
 * ---------------------------------------------------------------------- */
.site-nav__list .has-menu { position: relative; }
.site-nav__list .has-menu > a { display: inline-flex; align-items: center; gap: 0.3rem; }
.site-nav__list .has-menu > a .icon { width: 0.85em; height: 0.85em; transition: transform var(--gg-speed) var(--gg-ease); }
.site-nav__list .has-menu:hover > a .icon { transform: rotate(180deg); }

/* Desktop opens the submenu on hover, so the disclosure button is mobile-only.
   The mobile block below turns it back on. */
.site-nav__disclosure { display: none; }

.site-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 19rem;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: var(--gg-surface);
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow-lg);
    opacity: 0;
    visibility: hidden;
    /* Closed means closed: without this an invisible panel still takes clicks. */
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity var(--gg-speed) var(--gg-ease), transform var(--gg-speed) var(--gg-ease), visibility var(--gg-speed);
}

.site-nav__list .has-menu:hover > .site-nav__menu,
.site-nav__list .has-menu:focus-within > .site-nav__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

/* Scoped through .site-nav__list: the menu-bar link rules below carry the same
   specificity and would otherwise win on source order, painting these links
   white on a white panel. */
.site-nav__list .site-nav__menu a {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: var(--gg-radius-sm);
    color: var(--gg-ink-800);
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.site-nav__list .site-nav__menu a::after { display: none; }
.site-nav__list .site-nav__menu a:hover { background: var(--gg-green-50); color: var(--gg-green-800); }
.site-nav__list .site-nav__menu a.is-active { background: var(--gg-green-50); color: var(--gg-green-800); font-weight: 600; }

.site-nav__list a {
    position: relative;
    display: inline-block;
    /* 0.7rem here made the ten items 1030px wide in a 997px bar, so "Contact
       Us" wrapped alone onto a second row and the navbar grew to 109px. */
    padding: 1rem 0.55rem;
    color: rgba(255, 255, 255, 0.86);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);   /* 14px — was 13px */
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--gg-speed) var(--gg-ease);
}

.site-nav__list a::after {
    content: "";
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.65rem;
    height: 2px;
    border-radius: 2px;
    background: var(--gg-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--gg-speed) var(--gg-ease);
}

.site-nav__list a:hover,
.site-nav__list a.is-active { color: #fff; }
.site-nav__list a:hover::after,
.site-nav__list a.is-active::after { transform: scaleX(1); }


.navbar__actions { display: flex; align-items: center; gap: var(--gg-space-4); flex: none; }

/* Account links live in the utility bar on desktop; these copies exist for the
   stacked mobile menu, where that bar has no room for them. */
.navbar__account {
    display: none;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.86);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.navbar__account:hover { color: #fff; }

/* Cart link in the menu bar, with a count badge. */
.navbar__cart {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.86);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.navbar__cart:hover { color: #fff; }

.navbar__cart-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--gg-accent-strong);
    color: #fff;
    font-size: 0.7rem;
    letter-spacing: 0;
}

/* Mobile menu button: the round accent button from the reference layout. */
.site-header__toggle {
    display: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gg-accent-strong);
    color: #fff;
    cursor: pointer;
}

.site-header__toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--gg-speed) var(--gg-ease), opacity var(--gg-speed) var(--gg-ease);
}

.site-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Tablet: contact cards give way gradually. */
@media (max-width: 78rem) {
    .meta-card--last { display: none; }
    .site-nav__list a { padding-inline: 0.5rem; font-size: 0.8125rem; }
    /* The action earns its place on a narrower masthead; the brand line does
       not — it is on the hero of every page as well. */
    .masthead__tagline { display: none; }
}

/*
 * 60–75rem: the band where ten uppercase items plus the cart and the call to
 * action genuinely do not fit on one line — at 965px the row wanted 945px in
 * an 813px bar and pushed the whole page sideways.
 *
 * The call to action goes first: it is repeated in the hero and in the footer
 * of every page, while the menu is repeated nowhere. The type then tightens to
 * close the rest of the gap. Must sit after the 78rem block above, which sets
 * the same two properties.
 */
@media (min-width: 60rem) and (max-width: 75rem) {
    .site-nav__list a {
        /* 0.3rem left the row flush against the edge with nothing to spare, so
           any font that renders a little wider would push it over again. */
        padding-inline: 0.25rem;
        font-size: 0.7rem;
        letter-spacing: 0;
    }
}

@media (max-width: 64rem) {
    .masthead__meta { display: none; }
    /* Scoped to beat `.topbar__contacts li`, which also sets display. */
    .topbar__contacts .topbar__hide-md { display: none; }
}

/* Phones: the menu bar becomes a drop-down panel under the logo. */
@media (max-width: 60rem) {
    /*
     * STICKY HEADER ON PHONES.
     *
     * On desktop it is .navbar that sticks, because that is where the menu
     * lives. On a phone the menu is behind the hamburger, and the hamburger is
     * in the masthead — so with nothing pinned you had to scroll all the way
     * back to the top of the page to reach the menu at all.
     *
     * It is the whole .site-header that sticks, not just the masthead, and
     * that is deliberate: the open drawer is positioned `absolute; top: 100%`
     * against .site-header, so pinning only the masthead would leave the menu
     * anchored to a header that had scrolled away — it would open off-screen.
     * Pinning the header keeps the drawer with it.
     */
    .site-header {
        position: sticky;
        top: 0;
        /* Above page content and above the drawer (55) it slides out from
           under; below the floating quick-nav (70) at the bottom. */
        z-index: 60;
    }

    /*
     * 126px of header — 12% of a phone screen — is too much to hold there for
     * the whole visit. The utility bar collapses once scrolling starts,
     * leaving the logo and the hamburger, which is what the bar is FOR.
     *
     * max-height rather than display:none so it eases away instead of the page
     * jumping 44px the moment a thumb moves. nav.js already toggles
     * .is-scrolled on this element, so no new script is needed — and if that
     * script never loads the bar simply stays open, which costs height and
     * breaks nothing.
     */
    .topbar {
        max-height: 5rem;
        overflow: hidden;
        transition: max-height var(--gg-speed) var(--gg-ease);
    }

    .site-header.is-scrolled .topbar { max-height: 0; }

    /* Someone who asked for less motion still wants the height back — they
       just do not want it animated. */
    @media (prefers-reduced-motion: reduce) {
        .topbar { transition: none; }
    }

    /* The hamburger takes the right of the masthead on a phone, and the
       floating bar at the bottom of the screen carries Contact already. */
    .masthead__aside { display: none; }

    .site-header__toggle { display: block; }
    .topbar__contacts .topbar__hide-sm { display: none; }
    .topbar__inner { justify-content: center; }
    .brand img { height: 3rem; }

    /* Phone number, Sign in and Register earn their place on a narrow bar;
       the social icons repeat in the footer, so they go. */
    .topbar__right .social { display: none; }
    .topbar__inner { gap: var(--gg-space-3); }
    .topbar__contacts a { white-space: nowrap; }

    .navbar { position: static; background: transparent; box-shadow: none; }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 55;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--gg-space-3) var(--gg-gutter) var(--gg-space-5);
        background: var(--gg-green-900);
        box-shadow: var(--gg-shadow-lg);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: transform var(--gg-speed) var(--gg-ease), opacity var(--gg-speed) var(--gg-ease), visibility var(--gg-speed);
    }

    .site-nav.is-open { transform: none; opacity: 1; visibility: visible; }

    .site-nav__list { flex-direction: column; align-items: stretch; margin-bottom: var(--gg-space-4); }

    .site-nav__list a {
        display: block;
        padding: 0.85rem 0.25rem;
        font-size: var(--gg-text-sm);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .site-nav__list a::after { display: none; }
    .site-nav__list a.is-active { color: var(--gg-gold-300); }

    /* The drop-down becomes an indented list inside the stacked menu: there is
       no hovering on a phone, so the services sit under their parent item.
       `visibility: inherit` matters — `visible` on a child would keep these
       links painted and clickable while the whole menu panel is closed. */
    .site-nav__menu {
        position: static;
        min-width: 0;
        margin: 0 0 var(--gg-space-2) var(--gg-space-3);
        padding: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: inherit;
        pointer-events: auto;
        transform: none;
    }

    /* Collapsed until tapped — but ONLY once nav.js has marked the menu as an
       accordion. Without the script the rule above still applies and every
       link stays reachable, rather than being hidden with no way to open it. */
    .site-nav--accordion .has-menu > .site-nav__menu { display: none; }
    .site-nav--accordion .has-menu.is-expanded > .site-nav__menu { display: block; }

    /* The parent row becomes "link | chevron": the link navigates, the button
       expands. Hit area is a full 44px so it is not a pixel-hunt on a phone. */
    .site-nav--accordion .has-menu {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .site-nav--accordion .has-menu > .site-nav__menu { grid-column: 1 / -1; }

    .site-nav__disclosure {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        /* Not `inherit`: the button's parent is the <li>, which carries the
           page's dark body colour rather than the nav link's white. That drew a
           near-black chevron on dark green (1.8:1) — an affordance nobody could
           see. Match the label it sits beside. */
        color: rgba(255, 255, 255, 0.86);
        cursor: pointer;
    }

    .site-nav__disclosure .icon {
        width: 1.15rem;
        height: 1.15rem;
        transition: transform var(--gg-speed) var(--gg-ease);
    }
    .site-nav__disclosure[aria-expanded="true"] .icon { transform: rotate(180deg); }
    .site-nav__disclosure:focus-visible { outline: var(--gg-focus); outline-offset: -3px; }

    .site-nav__list .site-nav__menu a {
        padding: 0.6rem 0.25rem;
        color: rgba(255, 255, 255, 0.78);
        font-size: var(--gg-text-sm);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .site-nav__list .site-nav__menu a:hover,
    .site-nav__list .site-nav__menu a.is-active { background: transparent; color: var(--gg-gold-300); }
    .site-nav__list .has-menu > a .icon { display: none; }

    /* Account links return inside the stacked menu, where there is room. */
    .navbar__actions { flex-direction: column; align-items: stretch; gap: var(--gg-space-3); }
    .navbar__account { display: inline-flex; padding: 0.4rem 0.25rem; font-size: var(--gg-text-sm); }
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */
.site-footer {
    background: var(--gg-green-950);
    color: var(--gg-ink-200);
    padding-top: var(--gg-space-8);
}

.site-footer a { color: var(--gg-ink-300); text-decoration: none; }
.site-footer a:hover { color: var(--gg-gold-300); }

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr 1.3fr;
    gap: var(--gg-space-7);
    padding-bottom: var(--gg-space-7);
}

.site-footer__logo {
    height: 3.5rem;
    width: auto;
    margin-bottom: var(--gg-space-4);
    padding: 0.5rem 0.75rem;
    background: #fff;
    border-radius: var(--gg-radius);
}

.site-footer__tagline {
    color: var(--gg-gold-300);
    font-family: var(--gg-font-display);
    font-weight: 600;
    margin: 0 0 var(--gg-space-3);
}

.site-footer__brand .social { margin-top: var(--gg-space-4); }

.site-footer__heading {
    position: relative;
    margin: 0 0 var(--gg-space-5);
    padding-bottom: var(--gg-space-3);
    color: #fff;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-lg);
    font-weight: 600;
}

.site-footer__heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.5rem;
    height: 3px;
    border-radius: 3px;
    background: var(--gg-accent);
}

.site-footer__list { margin: 0; padding: 0; list-style: none; }
.site-footer__list li { margin-bottom: var(--gg-space-3); font-size: var(--gg-text-card); }
.site-footer__list a { font-size: var(--gg-text-card); }

.site-footer__list--contact li { display: flex; align-items: flex-start; gap: 0.6rem; }
.site-footer__list--contact svg { width: 1rem; height: 1rem; margin-top: 0.3rem; flex: none; color: var(--gg-gold-400); }

.site-footer__note { color: var(--gg-ink-300); font-size: var(--gg-text-card); margin-top: calc(-1 * var(--gg-space-3)); }
.site-footer__contact .button { margin-top: var(--gg-space-3); }

.site-footer__bottom {
    background: rgba(0, 0, 0, 0.35);
    font-size: var(--gg-text-sm);
    color: var(--gg-ink-400);
}

.site-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gg-space-3) var(--gg-space-5);
    align-items: center;
    justify-content: space-between;
    padding-block: var(--gg-space-4);
}

.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--gg-space-4); }
/* Keep the credit clear of the fixed WhatsApp button, which sits over this bar. */
.site-footer__credit { color: var(--gg-ink-500); padding-right: 4rem; }

@media (max-width: 68rem) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 40rem) {
    .site-footer__grid { grid-template-columns: 1fr; gap: var(--gg-space-6); }
    .site-footer__bottom-inner { justify-content: center; text-align: center; }
    .site-footer__credit { padding-right: 0; padding-bottom: 3rem; }
}