/* ==========================================================================
   Grain of Sand — module stylesheet (TRIMMED)

   UPLOAD THIS TO:  modules/grainofsand/views/css/front.css
   It is NOT part of the child theme. It replaces the previous 950-line file.

   --------------------------------------------------------------------------
   Why this file shrank from 950 lines to ~60
   --------------------------------------------------------------------------
   Module CSS loads AFTER theme CSS. The old file therefore beat the theme on
   every shared selector, and needed 58 !important declarations to do it.
   All of its theming has moved into the child theme, where it belongs, and
   this file now keeps only what the module itself owns:

     - .gos-sidebar-trigger  — the mobile sidebar toggle its front.js injects
     - .grainofsand-home-text / .grainofsand-nav1-text — its own text blocks

   Three defects in the old file are fixed by the move, not carried over:
     1. @import for Manrope sat on line 586, after ~585 rule sets. CSS requires
        @import to precede all rules, so it was discarded and the font never
        loaded. It is now the first statement of the theme's custom.css.
     2. --color-primary / --font-family-base / --border-radius-base /
        --ps-primary were remapped, but none of those names exist in
        Hummingbird's compiled theme.css. The real tokens are --bs-*.
     3. Two conflicting :root blocks (an amber system and a sand/gold system).

   The --gos-* tokens referenced below are defined by the child theme at :root,
   so this file inherits the palette instead of redeclaring it.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Module text blocks
   -------------------------------------------------------------------------- */

.grainofsand-home-text {
    max-width: 83em;
    margin-inline: auto;
    padding: 1em;
}

.grainofsand-nav1-text {
    font-size: 0.87em;
    padding: 1em;
    max-width: 37em;
    color: var(--gos-muted, #5f5952);
}


/* --------------------------------------------------------------------------
   Mobile sidebar trigger — injected by this module's front.js
   --------------------------------------------------------------------------
   Restyled onto the brand palette. The previous version was near-black with an
   amber accent (#212121 / #ffc107), left over from the earlier colour scheme. */

.gos-sidebar-trigger {
    display: none;
}

@media screen and (max-width: 991px) {
    #left-column {
        display: none;
        width: 100%;
        flex: 0 0 100%;
    }

    #left-column.gos-sidebar-open {
        display: block;
    }

    .gos-sidebar-trigger {
        display: flex;
        align-items: center;
        gap: 0.5em;
        width: 100%;
        flex: 0 0 100%;
        padding: 0.75em 1em;
        margin-bottom: 0.75em;
        background: var(--gos-sand-soft, #f2ece1);
        border: 1px solid var(--gos-rule, #ded2be);
        border-radius: var(--gos-radius, 3px);
        color: var(--gos-ink, #3e3a35);
        cursor: pointer;
        font-family: inherit;
        font-size: 0.875em;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-align: left;
        transition: border-color 220ms ease, color 220ms ease;
    }

    .gos-sidebar-trigger:hover,
    .gos-sidebar-trigger[aria-expanded="true"] {
        border-color: var(--gos-gold, #bfa274);
        color: var(--gos-gold-text, #6b5426);
    }

    .gos-sidebar-trigger:focus-visible {
        outline: 2px solid var(--gos-gold-text, #6b5426);
        outline-offset: 2px;
    }

    .gos-sidebar-trigger .material-icons {
        font-size: 1.2em;
        color: inherit;
    }
}