/* ------------------------------------------------------------------
   layout5PublicGeneral.css
   Styles for master/Site5PublicGeneral.master - the minimal public
   master used by unauthenticated pages under /general/.

   Bootstrap 5 does the heavy lifting; this file only adds TWPG
   branding on top of it. Keep it small.

   Created : 21-Aug-2026
   ------------------------------------------------------------------ */

:root {
    --twpg-green: #65b741;
    --twpg-green-dark: #2f5c20;
    --twpg-grey: #555555;
    --twpg-grey-light: #f5f5f5;

    /* Body text colour and top rule are taken from layout5Subpages.css, so a customer moving
       between the signed-out and signed-in sides of the site sees the same page.
       Keep them in step if that file changes. */
    --twpg-green-rule: #3E7129;
    --twpg-text: #6e6e6e;

    /* The header follows Retail.master instead (the public site's own look): grey bar,
       white links, and this lighter green for Login and the hover rule. */
    --twpg-nav-green: #6cbe45;
}

body {
    /* Matches layout5Subpages.css. Roboto is not loaded as a webfont there either - it applies
       only where it happens to be installed, and otherwise falls through to the system stack.
       Copied verbatim so both sides of the site resolve to the same face. */
    font-family: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;

    /* The green rule sits at the very top of the PAGE on the Site5 masters, not under the nav.
       That placement, and the darker green, is most of what made this header feel like a
       different site. */
    border-top: 3px solid var(--twpg-green-rule);

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--twpg-text);
}

body > form {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

/* Site-wide content width. Bootstrap 5 lets .container grow to 1320px at
   xxl, so cap it at 1200px. Applied to the nav, the main content and the
   footer so everything lines up on one grid. */
.twpg-container {
    max-width: 1200px;
}

/* ---------- Header ----------
   Matches Retail.master (css/MasterRetail.css .tembus / .navbar-default / .hvrcenter), with
   the bar in the same grey as the footer. Used only for signed-out visitors. */

.twpg-navbar {
    /* Retail.master's font (MasterRetail.css body). Header only - the page body keeps the
       Site5 font so it matches the signed-in pages. Didact Gothic has a single 400 weight,
       so the bold links are browser-synthesised exactly as they are on Retail.master. */
    font-family: 'Didact Gothic', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    background-color: var(--twpg-grey);
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* TWPG-Logo.png is the white cut-out, 230x55 - shown full size as Retail.master does */
.twpg-logo {
    max-height: 55px;
    width: auto;
}

.twpg-navbar .nav-link {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
}

    .twpg-navbar .nav-link:hover,
    .twpg-navbar .nav-link:focus {
        color: #ffffff;
    }

@media (min-width: 992px) {
    .twpg-navbar .nav-item {
        padding-left: 10px;
        padding-right: 10px;
    }

        /* Keep the search box flush with the right edge of the grid, like the footer text */
        .twpg-navbar .nav-item:last-child {
            padding-right: 0;
        }
}

.twpg-navbar .twpg-nav-login,
.twpg-navbar .twpg-nav-login:hover,
.twpg-navbar .twpg-nav-login:focus {
    color: var(--twpg-nav-green);
}

/* Retail.master .hvrcenter: a green underline that grows out from the centre on hover */
.twpg-hvr {
    position: relative;
}

    .twpg-hvr::before {
        content: "";
        position: absolute;
        left: 50%;
        right: 50%;
        bottom: 0;
        height: 2px;
        background: var(--twpg-nav-green);
        transition: left .3s ease-out, right .3s ease-out;
    }

    .twpg-hvr:hover::before,
    .twpg-hvr:focus::before {
        left: 0;
        right: 0;
    }

/* ---------- Header product search (js/twpg-public-nav.js) ---------- */

.twpg-search {
    position: relative;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

@media (min-width: 992px) {
    .twpg-search {
        width: 220px;
    }
}

.twpg-search-result {
    top: 100%;
    right: 0;
    left: auto;
    width: 400px;
    max-height: 70vh;
    overflow-y: auto;
    padding: .5rem .75rem;
    background-color: #ffffff;
    z-index: 1050;
}

/* In the collapsed mobile menu let the results push the page down instead of floating */
@media (max-width: 991.98px) {
    .twpg-search-result {
        position: static;
        width: 100%;
    }
}

.twpg-search-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

.twpg-search-sub {
    font-weight: bold;
    color: #333333;
    margin-top: .5rem;
}

.twpg-search-list {
    list-style: none;
    padding-left: .75rem;
    margin-bottom: .25rem;
}

    .twpg-search-list a {
        color: var(--twpg-green-dark);
        text-decoration: none;
    }

        .twpg-search-list a:hover,
        .twpg-search-list a:focus {
            text-decoration: underline;
        }

.twpg-search-empty {
    color: var(--twpg-text);
    margin-bottom: 0;
}

/* ---------- Main ---------- */

.twpg-main {
    flex: 1 0 auto;
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* ---------- Footer ----------
   Matches the Site5 footer used by customer/TwpgMenu.aspx: dark grey
   background, white text. See css/layout5.css #footerSection. */

#footerSection {
    flex-shrink: 0;
    background-color: var(--twpg-grey);
    color: #ffffff;
}

    #footerSection p,
    #footerSection li,
    #footerSection a,
    #footerSection address,
    #footerSection h2,
    #footerSection h5 {
        color: #ffffff;
        font-size: 14px;
    }

    #footerSection h5,
    #footerSection h2 {
        font-size: 16px;
        margin-bottom: .75rem;
    }

    #footerSection a {
        text-decoration: none;
    }

        #footerSection a:hover,
        #footerSection a:focus {
            text-decoration: underline;
        }

    #footerSection address {
        font-style: normal;
    }

.twpg-logo-footer {
    max-height: 44px;
    width: auto;
}