/* ==================================================
   Garden Layout CSS
   --------------------------------------------------
   Primary layout, navigation, responsive grids, home
   panels, zone selector, footer, and branding styles.

   Navigation classes expected in header.php:
   - .garden-header-nav      = topbar inner flex wrapper
   - .garden-main-nav        = desktop/mobile navigation links
   - .garden-mobile-toggle   = hamburger button
   - .is-open                = added by garden.js on mobile
   ================================================== */


/* ==================================================
   1. Page Shell / Global Layout Container
   ================================================== */

.garden-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* ==================================================
   2. Header / Topbar
   ================================================== */

.garden-topbar {
    position: relative;
    z-index: 100;
    padding: 22px 0;
}

/*
   Header navigation wrapper.

   Important:
   This replaces the old layout use of .garden-nav on the wrapper.
   The wrapper should now be:
   <div class="garden-shell garden-header-nav">
*/

.garden-header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    position: relative;
}

/*
   Legacy safety:
   If any older template still uses:
   <div class="garden-shell garden-nav">
   this keeps desktop alignment from breaking.
   Once all headers use .garden-header-nav, this can be removed.
*/

.garden-shell.garden-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    position: relative;
}


/* ==================================================
   3. Main Navigation - Desktop
   ================================================== */

.garden-main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.garden-main-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .5rem .72rem;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    line-height: 1;
}

.garden-main-nav a:hover,
.garden-main-nav a:focus {
    background: rgba(95, 143, 69, .1);
    text-decoration: none;
}

/*
   Legacy nav-link class retained in case another page uses it.
*/

.garden-nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}


/* ==================================================
   4. Mobile Hamburger Button
   ================================================== */

.garden-mobile-toggle {
    display: none;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(80, 100, 70, .2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
    color: var(--garden-ink, #243126);
    cursor: pointer;
}

.garden-mobile-toggle-line {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px auto;
    border-radius: 999px;
    background: currentColor;
}

.garden-mobile-toggle:hover,
.garden-mobile-toggle:focus {
    background: rgba(95, 143, 69, .1);
}


/* ==================================================
   5. Section Layout
   ================================================== */

.garden-section {
    padding: 52px 0 0;
}

.garden-section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.garden-section-header h2 {
    margin: 0;
    color: var(--garden-sage, #9ab68c);
    font-family: var(--garden-font-display);
    font-size: clamp(1.85rem, 3.5vw, 3rem);
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -.04em;
}

.garden-section-header p {
    max-width: 620px;
    margin: 8px 0 0;
    color: var(--garden-text-on-dark-muted, rgba(237, 245, 232, .86));
}

.garden-section-header-compact {
    margin-bottom: 1rem;
}


/* ==================================================
   6. Grid Layouts
   ================================================== */

.garden-grid {
    display: grid;
    gap: 16px;
}

.garden-grid-categories {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.garden-grid-crops {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.garden-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.garden-month-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    align-items: stretch;
}


/* ==================================================
   7. Month Crop List / Cards
   ================================================== */

.garden-month-crop-list {
    display: grid;
    gap: .75rem;
}

.garden-month-crop-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem;
    border: 1px solid rgba(80, 100, 70, .18);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.garden-month-crop-card:hover {
    transform: translateY(-1px);
    border-color: rgba(80, 120, 60, .35);
    box-shadow: 0 10px 24px rgba(30, 50, 25, .08);
}

.garden-crop-thumb,
.garden-category-thumb {
    width: 3rem;
    height: 3rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    background: rgba(126, 157, 93, .14);
    font-size: 1.6rem;
}

.garden-month-crop-body {
    display: grid;
    gap: .15rem;
}

.garden-month-crop-body small {
    color: rgba(40, 55, 35, .68);
}


/* ==================================================
   8. Panels / Category Cards / Actions
   ================================================== */

.garden-panel-action {
    margin-top: 1rem;
}

.garden-panel-action a {
    font-weight: 700;
}

.garden-category-card {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.garden-category-card h3 {
    margin-bottom: .35rem;
}

.garden-category-card-body {
    min-width: 0;
}

.garden-search-hint {
    margin: .65rem 0 0;
    color: #8a4b18;
    font-size: .92rem;
    font-weight: 700;
}


/* ==================================================
   9. Jump Form
   ================================================== */

.garden-jump-form {
    max-width: 620px;
    padding: 1rem;
    border: 1px solid rgba(80, 100, 70, .18);
    border-radius: 18px;
    background: rgba(255, 255, 255, .7);
}

.garden-jump-form label {
    display: block;
    margin-bottom: .5rem;
    font-weight: 800;
}

.garden-jump-control {
    display: flex;
    gap: .65rem;
}

.garden-jump-control select {
    flex: 1;
    min-width: 0;
    padding: .75rem .85rem;
    border: 1px solid rgba(80, 100, 70, .25);
    border-radius: 12px;
    font: inherit;
}

.garden-jump-control button {
    padding: .75rem 1rem;
    border: 0;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
}


/* ==================================================
   10. Garden Zone Map
   ================================================== */

.garden-zone-panel {
    overflow: hidden;
}

.garden-zone-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 1rem;
    align-items: stretch;
}

.garden-zone-form {
    margin-top: 1rem;
}

.garden-zone-form label {
    display: block;
    margin-bottom: .45rem;
    font-weight: 800;
}

.garden-zone-control {
    display: flex;
    gap: .65rem;
    max-width: 520px;
}

.garden-zone-control select {
    flex: 1;
    min-width: 0;
    padding: .75rem .85rem;
    border: 1px solid rgba(80, 100, 70, .25);
    border-radius: 12px;
    font: inherit;
}

.garden-zone-control button {
    padding: .75rem 1rem;
    border: 0;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
}

.garden-zone-map-card a {
    height: 100%;
    display: grid;
    align-content: center;
    gap: .4rem;
    padding: 1rem;
    border: 1px solid rgba(80, 100, 70, .18);
    border-radius: 18px;
    background: rgba(126, 157, 93, .12);
    color: inherit;
    text-decoration: none;
}

.garden-zone-map-thumb {
    width: 3.25rem;
    height: 3.25rem;
    display: inline-grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    font-size: 1.75rem;
}

.garden-zone-map-card small {
    color: rgba(40, 55, 35, .68);
}


/* ==================================================
   11. Source Note
   ================================================== */

.garden-source-note {
    margin-top: 1rem;
}

.garden-source-note p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.5;
    color: rgba(233, 236, 232, 0.66);
}


/* ==================================================
   12. Footer
   ================================================== */

.garden-footer {
    padding: 60px 0 34px;
    color: var(--muted);
    text-align: center;
    font-size: .95rem;
}


/* ==================================================
   13. Branding
   ================================================== */

.garden-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.garden-brand:hover,
.garden-brand:focus {
    text-decoration: none;
}

.garden-brand-mark {
    width: 2.45rem;
    height: 2.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.42), transparent 34%),
        linear-gradient(135deg, #9fc85d 0%, #5e9b45 48%, #2f6f3a 100%);
    box-shadow:
        0 8px 18px rgba(47, 111, 58, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    flex: 0 0 auto;
}

.garden-brand-mark svg {
    width: 1.58rem;
    height: 1.58rem;
    display: block;
    fill: none !important;
    stroke: #ffffff !important;
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.garden-brand-mark svg path,
.garden-brand-mark svg circle {
    fill: none !important;
    stroke: #ffffff !important;
}

.garden-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 1;
    min-width: 0;
    white-space: normal;
}

.garden-brand-name {
    display: block;
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--garden-ink, #243126);
}

.garden-brand-tagline {
    display: block;
    margin-top: 0.24rem;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.105em;
    text-transform: uppercase;
    color: var(--garden-muted, #697464);
}


/* ==================================================
   14. Brand Lockup Overrides
   --------------------------------------------------
   These rules intentionally use higher specificity because
   earlier global link or logo rules may be overriding the logo.
   ================================================== */

a.garden-brand {
    display: inline-grid !important;
    grid-template-columns: 2.45rem auto !important;
    align-items: center !important;
    column-gap: 0.72rem !important;
    color: inherit !important;
    text-decoration: none !important;
    line-height: 1 !important;
    white-space: normal !important;
}

a.garden-brand .garden-brand-mark {
    width: 2.45rem !important;
    height: 2.45rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,.42), transparent 34%),
        linear-gradient(135deg, #9fc85d 0%, #5e9b45 48%, #2f6f3a 100%) !important;
    box-shadow:
        0 8px 18px rgba(47,111,58,.24),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
    overflow: hidden !important;
}

a.garden-brand .garden-brand-mark svg {
    width: 1.58rem !important;
    height: 1.58rem !important;
    display: block !important;
    color: #ffffff !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.35 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

a.garden-brand .garden-brand-mark svg path,
a.garden-brand .garden-brand-mark svg circle {
    fill: none !important;
    stroke: currentColor !important;
}

a.garden-brand .garden-brand-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0.18rem !important;
    line-height: 1 !important;
    white-space: normal !important;
}

a.garden-brand .garden-brand-line {
    display: block !important;
    width: 100% !important;
}

a.garden-brand .garden-brand-name {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.22rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.045em !important;
    color: var(--garden-ink, #243126) !important;
    white-space: nowrap !important;
}

a.garden-brand .garden-brand-tagline {
    display: block !important;
    margin-top: 0.12rem !important;
    padding: 0 !important;
    font-size: 0.55rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
    color: rgba(105, 116, 100, 0.78) !important;
    white-space: nowrap !important;
}


/* ==================================================
   15. Responsive Layout - Tablet
   ================================================== */

@media (max-width: 880px) {
    .garden-grid-categories,
    .garden-grid-crops,
    .garden-stats,
    .garden-month-grid {
        grid-template-columns: 1fr 1fr;
    }

    .garden-section-header {
        display: block;
    }
}


/* ==================================================
   16. Responsive Navigation - Tablet + Phone
   ================================================== */

@media (max-width: 900px) {
    .garden-topbar {
        padding: 16px 0;
    }

    .garden-header-nav,
    .garden-shell.garden-nav {
        align-items: center;
        justify-content: space-between;
    }

    .garden-mobile-toggle {
        display: grid;
        margin-left: auto;
    }

    .garden-main-nav {
        display: none;
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        z-index: 1000;

        width: 100%;
        margin-left: 0;
        padding: .65rem;

        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: .25rem;
        flex-wrap: nowrap;

        border: 1px solid rgba(80, 100, 70, .18);
        border-radius: 18px;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 18px 34px rgba(30, 50, 25, .14);
    }

    .garden-main-nav.is-open {
        display: flex;
    }

    .garden-main-nav a {
        justify-content: flex-start;
        min-height: 44px;
        width: 100%;
        padding: .85rem .95rem;
        border-radius: 12px;
        background: transparent;
    }

    .garden-main-nav a:hover,
    .garden-main-nav a:focus {
        background: rgba(95, 143, 69, .1);
    }
}


/* ==================================================
   17. Responsive Layout - Phone
   ================================================== */

@media (max-width: 620px) {
    .garden-grid-categories,
    .garden-grid-crops,
    .garden-stats,
    .garden-month-grid,
    .garden-search-form {
        grid-template-columns: 1fr;
    }

    /*
       Do not set .garden-header-nav or .garden-nav to flex-direction: column here.
       That was the rule causing the logo and nav/menu to stack oddly on phones.
    */

    .garden-nav-links {
        width: 100%;
    }

    .garden-nav-links a {
        background: rgba(95, 143, 69, .1);
    }
}


/* ==================================================
   18. Responsive Forms / Zone Panels
   ================================================== */

@media (max-width: 760px) {
    .garden-zone-content {
        grid-template-columns: 1fr;
    }

    .garden-zone-control {
        display: grid;
    }
}

@media (max-width: 640px) {
    .garden-jump-control {
        display: grid;
    }
}

/* ==================================================
   Header Navigation — Final Override
   ================================================== */

.garden-header-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    position: relative !important;
}

.garden-main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .65rem !important;
    margin-left: auto !important;
}

.garden-mobile-toggle {
    display: none !important;
}

/* Tablet + Phone */
@media (max-width: 900px) {
    .garden-header-nav {
        flex-wrap: wrap !important;
    }

    .garden-mobile-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 44px !important;
        height: 44px !important;
        margin-left: auto !important;
        border: 1px solid rgba(40, 55, 35, .18) !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.75) !important;
        color: var(--garden-ink, #243126) !important;
        cursor: pointer !important;
    }

    .garden-mobile-toggle-line {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background: currentColor !important;
        border-radius: 999px !important;
    }

    .garden-main-nav {
        display: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .35rem !important;
        padding: .75rem !important;
        background: #ffffff !important;
        border: 1px solid rgba(40, 55, 35, .12) !important;
        border-radius: 16px !important;
        box-shadow: 0 14px 28px rgba(20, 35, 20, .12) !important;
    }

    .garden-main-nav.is-open {
        display: flex !important;
    }

    .garden-main-nav a {
        display: block !important;
        padding: .8rem .9rem !important;
        border-radius: 10px !important;
    }
}


/*  Add To Phone Screen */

.garden-install-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .65rem 1rem;
    border: 0;
    border-radius: 999px;
    background: #6f8f3a;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.garden-install-status,
.garden-install-guidance {
    margin-top: .75rem;
    padding: .75rem 1rem;
    border-radius: .75rem;
    background: #f3f6ed;
    color: #26301f;
    font-size: .95rem;
}

.garden-install-status[hidden],
.garden-install-guidance[hidden],
.garden-install-guidance [data-install-guide][hidden] {
    display: none;
}

.garden-install-guidance h3 {
    margin: 0 0 .6rem;
    color: #26301f;
    font-size: 1.05rem;
}

.garden-install-guidance ol {
    margin: 0;
    padding-left: 1.35rem;
    text-align: left;
}

.garden-install-guidance li + li {
    margin-top: .45rem;
}

.garden-install-guidance p {
    margin: 0;
}

.garden-share-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(38, 48, 31, .16);
}

.garden-share-panel[hidden],
.garden-share-status[hidden],
.garden-share-qr[hidden] {
    display: none;
}

.garden-share-panel h3 {
    margin: 0 0 .45rem;
    color: #26301f;
    font-size: 1.1rem;
}

.garden-share-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .65rem;
    margin-top: .85rem;
}

.garden-share-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .65rem 1rem;
    border: 1px solid #6f8f3a;
    border-radius: 999px;
    background: transparent;
    color: #496524;
    font-weight: 700;
    cursor: pointer;
}

.garden-share-status {
    margin: .75rem auto 0;
    color: #26301f;
    font-size: .9rem;
    font-weight: 600;
}

.garden-share-qr {
    margin: 1rem auto 0;
}

.garden-share-qr img {
    display: block;
    width: min(240px, 100%);
    height: auto;
    margin: 0 auto;
    padding: .5rem;
    border: 1px solid rgba(38, 48, 31, .14);
    border-radius: .75rem;
    background: #fff;
}

.garden-share-qr figcaption {
    margin-top: .5rem;
    color: #405034;
    font-size: .85rem;
}

.garden-share-qr a {
    color: #496524;
    font-weight: 700;
}


/* ==================================================
   Forest App Header — Reversed Brand and Navigation
   --------------------------------------------------
   The public app background now carries the forest
   gradient, so the header reads in light ink instead
   of introducing a separate pale navigation bar.
   ================================================== */

.garden-topbar {
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    background: rgba(18, 39, 25, .16);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.garden-topbar .garden-brand {
    color: #ffffff;
}

.garden-topbar .garden-brand-name,
a.garden-brand .garden-brand-name {
    color: #ffffff !important;
}

.garden-topbar .garden-brand-mark,
a.garden-brand .garden-brand-mark {
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .34) !important;
}

.garden-topbar .garden-main-nav,
.garden-topbar .garden-main-nav-test {
    color: rgba(246, 250, 243, .88);
}

.garden-topbar .garden-main-nav a,
.garden-topbar .garden-main-nav-test a {
    color: inherit !important;
}

.garden-topbar .garden-main-nav a:hover,
.garden-topbar .garden-main-nav a:focus-visible,
.garden-topbar .garden-main-nav-test a:hover,
.garden-topbar .garden-main-nav-test a:focus-visible {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .12) !important;
}

@media (max-width: 900px) {
    .garden-topbar .garden-mobile-toggle,
    .garden-topbar .garden-mobile-toggle-test {
        border-color: rgba(255, 255, 255, .30) !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
    }

    .garden-topbar .garden-mobile-toggle-line,
    .garden-topbar .garden-mobile-toggle-test span {
        background: var(--garden-primary, #285238) !important;
    }
}

/* ==================================================
   Public Header — Translucent White Glass Bar
   --------------------------------------------------
   Keeps the brand and navigation visible above the
   botanical home background on desktop and mobile.
   ================================================== */

.garden-topbar {
    position: relative;
    z-index: 500;
    color: #f8faf5;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .20);
    box-shadow: 0 8px 24px rgba(8, 26, 15, .10);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
}

.garden-topbar .garden-brand,
.garden-topbar a.garden-brand,
.garden-topbar .garden-brand-name,
.garden-topbar a.garden-brand .garden-brand-name {
    color: #ffffff !important;
}

.garden-topbar .garden-main-nav,
.garden-topbar .garden-main-nav-test {
    color: rgba(255, 255, 255, .92) !important;
}

.garden-topbar .garden-main-nav a,
.garden-topbar .garden-main-nav-test a,
.garden-topbar .garden-nav-signout-button {
    color: inherit !important;
}

.garden-topbar .garden-main-nav a:hover,
.garden-topbar .garden-main-nav a:focus-visible,
.garden-topbar .garden-main-nav-test a:hover,
.garden-topbar .garden-main-nav-test a:focus-visible,
.garden-topbar .garden-nav-signout-button:hover,
.garden-topbar .garden-nav-signout-button:focus-visible {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .14) !important;
}

.garden-topbar .garden-main-nav a.is-active,
.garden-topbar .garden-main-nav-test a.is-active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .22) !important;
}

@media (max-width: 900px) {
    .garden-topbar .garden-mobile-toggle,
    .garden-topbar .garden-mobile-toggle-test {
        display: inline-flex !important;
        border-color: rgba(255, 255, 255, .34) !important;
        background: rgba(255, 255, 255, .84) !important;
        color: var(--garden-primary, #285238) !important;
        box-shadow: 0 8px 18px rgba(8, 26, 15, .14);
    }

    .garden-topbar .garden-mobile-toggle-line,
    .garden-topbar .garden-mobile-toggle-test span {
        background: currentColor !important;
    }

    /*
     | Opened mobile menu remains a readable parchment panel.
     */
    .garden-topbar .garden-main-nav-test,
    .garden-topbar .garden-main-nav {
        z-index: 550 !important;
    }
}
/* ==================================================
   Header Stacking Repair
   Keeps the actual header controls above home artwork
   and any fixed background/pseudo-element layers.
   ================================================== */

.garden-topbar {
    position: relative !important;
    z-index: 1000 !important;
    isolation: isolate;
}

.garden-topbar .garden-shell,
.garden-topbar .garden-header-nav-test,
.garden-topbar .garden-header-nav {
    position: relative !important;
    z-index: 1001 !important;
}

.garden-topbar .garden-brand,
.garden-topbar .garden-brand-mark,
.garden-topbar .garden-brand-name,
.garden-topbar .garden-main-nav-test,
.garden-topbar .garden-main-nav,
.garden-topbar .garden-mobile-toggle-test,
.garden-topbar .garden-mobile-toggle {
    position: relative !important;
    z-index: 1002 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Transparent white glass bar over the botanical home background. */
.garden-topbar {
    background: rgba(255, 255, 255, .20) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .22) !important;
    box-shadow: 0 8px 24px rgba(8, 26, 15, .14) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
}

/* Reverse the visible brand and desktop navigation. */
.garden-topbar .garden-brand,
.garden-topbar .garden-brand-name,
.garden-topbar a.garden-brand .garden-brand-name {
    color: #ffffff !important;
}

.garden-topbar .garden-main-nav-test a,
.garden-topbar .garden-main-nav a,
.garden-topbar .garden-nav-signout-button {
    color: rgba(255, 255, 255, .94) !important;
}

.garden-topbar .garden-brand-mark {
    color: #ffffff !important;
}

@media (max-width: 900px) {
    .garden-topbar .garden-mobile-toggle-test,
    .garden-topbar .garden-mobile-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, .90) !important;
        border-color: rgba(255, 255, 255, .48) !important;
        color: var(--garden-primary, #285238) !important;
        box-shadow: 0 8px 18px rgba(8, 26, 15, .16) !important;
    }

    .garden-topbar .garden-mobile-toggle-test span,
    .garden-topbar .garden-mobile-toggle-line {
        background: currentColor !important;
    }
}

/* ==================================================
   Mobile Dropdown Navigation — Light Panel Text Fix
   --------------------------------------------------
   The header itself stays reversed, but the expanded
   mobile menu is a light parchment panel with dark text.
   ================================================== */

@media (max-width: 900px) {
    .garden-topbar .garden-main-nav-test.is-open,
    .garden-topbar .garden-main-nav.is-open {
        color: var(--garden-ink, #1d2b20) !important;
        background: rgba(247, 244, 237, .98) !important;
    }

    .garden-topbar .garden-main-nav-test.is-open a,
    .garden-topbar .garden-main-nav.is-open a,
    .garden-topbar .garden-main-nav-test.is-open .garden-nav-signout-button,
    .garden-topbar .garden-main-nav.is-open .garden-nav-signout-button {
        color: var(--garden-ink, #1d2b20) !important;
        text-shadow: none !important;
    }

    .garden-topbar .garden-main-nav-test.is-open a:nth-of-type(odd),
    .garden-topbar .garden-main-nav.is-open a:nth-of-type(odd) {
        background: rgba(251, 248, 242, .96) !important;
    }

    .garden-topbar .garden-main-nav-test.is-open a:nth-of-type(even),
    .garden-topbar .garden-main-nav.is-open a:nth-of-type(even) {
        background: rgba(238, 245, 233, .96) !important;
    }

    .garden-topbar .garden-main-nav-test.is-open a:hover,
    .garden-topbar .garden-main-nav-test.is-open a:hover,
    .garden-topbar .garden-main-nav-test.is-open a:focus-visible,
    .garden-topbar .garden-main-nav.is-open a:focus-visible,
    .garden-topbar .garden-main-nav-test.is-open .garden-nav-signout-button:hover,
    .garden-topbar .garden-main-nav.is-open .garden-nav-signout-button:hover,
    .garden-topbar .garden-main-nav-test.is-open .garden-nav-signout-button:focus-visible,
    .garden-topbar .garden-main-nav.is-open .garden-nav-signout-button:focus-visible {
        color: var(--garden-primary, #285238) !important;
        background: rgba(218, 232, 211, .98) !important;
        border-color: rgba(40, 82, 56, .20) !important;
    }
}

/* ==================================================
   Mobile Menu Toggle — Sage Thumbprint
   --------------------------------------------------
   Transparent button with only a fingerprint icon.
   Keeps a good tap target, but removes the boxed look.
   ================================================== */

@media (max-width: 900px) {
    .garden-topbar .garden-mobile-toggle-test,
    .garden-topbar .garden-mobile-toggle {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 56px !important;
        height: 56px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #8faa84 !important;
        overflow: visible !important;
    }

    /* Hide hamburger bars */
    .garden-topbar .garden-mobile-toggle-test span,
    .garden-topbar .garden-mobile-toggle-line {
        display: none !important;
    }

/* Edaphia mobile menu thumbprint */
.garden-topbar .garden-mobile-toggle-test::before,
.garden-topbar .garden-mobile-toggle::before {
    content: "";
    display: block;
    width: 34px;
    height: 34px;
    transform: rotate(-6deg);
    transform-origin: center;
    background:
        url("../img/thumbprint-v2.svg")
        center / contain
        no-repeat;
    opacity: .96;
}

.garden-topbar .garden-mobile-toggle-test:hover,
.garden-topbar .garden-mobile-toggle-test:focus-visible,
.garden-topbar .garden-mobile-toggle:hover,
.garden-topbar .garden-mobile-toggle:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

.garden-topbar .garden-mobile-toggle-test:hover::before,
.garden-topbar .garden-mobile-toggle-test:focus-visible::before,
.garden-topbar .garden-mobile-toggle:hover::before,
.garden-topbar .garden-mobile-toggle:focus-visible::before {
    opacity: 1;
}

.garden-topbar .garden-mobile-toggle-test[aria-expanded="true"],
.garden-topbar .garden-mobile-toggle[aria-expanded="true"] {
    background: transparent !important;
    box-shadow: none !important;
}

.garden-topbar .garden-mobile-toggle-test[aria-expanded="true"]::before,
.garden-topbar .garden-mobile-toggle[aria-expanded="true"]::before {
    background-image: url("../img/thumbprint-active-v2.svg");
    opacity: 1;
}
}
/* ==================================================
   Sticky Public Header
   ================================================== */

.garden-topbar {
    position: sticky !important;
    top: 0;
    z-index: 1000 !important;
}

/* Brand readability over lighter background areas */
.garden-topbar .garden-brand-name,
.garden-topbar a.garden-brand .garden-brand-name {
    text-shadow:
        0 1px 2px rgba(8, 26, 15, .42),
        0 3px 10px rgba(8, 26, 15, .24);
}

/* ==================================================
   Public Interior Pages — Light Working Ground
   --------------------------------------------------
   Home remains the dark botanical landing page.
   All other public pages return to parchment.
   ================================================== */

.garden-main:not(.garden-home-page) {
    min-height: calc(100vh - 76px);
    background: var(--garden-page, #f7f4ed);
}

/* Restore the parchment canvas on all non-home public pages */
html:has(.garden-main:not(.garden-home-page)),
body:has(.garden-main:not(.garden-home-page)) {
    background: var(--garden-page, #f7f4ed) !important;
    background-attachment: scroll !important;
}

.garden-main:not(.garden-home-page) {
    min-height: calc(100vh - 76px);
    background: var(--garden-page, #f7f4ed) !important;
}
/* ==================================================
   Interior Pages — Darker Header Glass
   --------------------------------------------------
   The home page keeps its lighter glass treatment
   over the forest artwork. Light working pages get a
   deeper translucent forest bar for contrast.
   ================================================== */

.garden-topbar {
    background: rgba(24, 58, 37, .82) !important;
    border-bottom-color: rgba(255, 255, 255, .16) !important;
    box-shadow: 0 8px 24px rgba(8, 26, 15, .18) !important;
}

/* Home keeps the lighter translucent bar over its botanical field. */
body:has(.garden-home-page) .garden-topbar {
    background: rgba(255, 255, 255, .20) !important;
    border-bottom-color: rgba(255, 255, 255, .22) !important;
    box-shadow: 0 8px 24px rgba(8, 26, 15, .14) !important;
}


/* ==================================================
   Home Hero — selective centering
   --------------------------------------------------
   Keep main hero copy flush left.
   Center only the location/date eyebrow and buttons.
   ================================================== */

.garden-home-page .garden-hero .garden-eyebrow {
    display: block;
    width: 100%;
    text-align: center;
}

.garden-home-page .garden-hero .garden-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 26px;
}

/* ==================================================
   Home Install Panel
   --------------------------------------------------
   Centers the install button and tightens vertical rhythm
   without affecting other panels.
   ================================================== */

.garden-home-page .garden-install-panel {
    text-align: center;
}

.garden-home-page .garden-install-panel h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.garden-home-page .garden-install-panel p {
    max-width: 660px;
    margin: 0 auto 18px;
    line-height: 1.55;
}

.garden-home-page .garden-install-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.garden-home-page .garden-ios-install-hint {
    max-width: 660px;
    margin: 14px auto 0;
    line-height: 1.5;
    text-align: center;
}

/* ==================================================
   Footer Visibility / Home Page Footer Reset
   ================================================== */

.garden-footer {
    position: relative;
    z-index: 5;
    display: block;
    margin-top: clamp(36px, 6vw, 72px);
    background: var(--garden-forest, #1d402b);
    color: rgba(255, 255, 255, .82);
}

.garden-footer a {
    color: #ffffff;
}

.garden-main {
    position: relative;
    z-index: 1;
}

.garden-home-page {
    overflow: visible;
}

.garden-home-page .garden-shell {
    position: relative;
    z-index: 2;
}

/* ==================================================
   Compact Footer
   ================================================== */

.garden-footer {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: .76rem;
    line-height: 1.25;
}

.garden-footer .garden-shell {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 10px;
}

.garden-footer p {
    margin: 0;
}

.garden-footer a {
    display: inline;
    font-size: inherit;
    color: #ffffff;
}

/* ==================================================
   Calendar Result Groups
   ================================================== */

.garden-result-group {
    margin-top: 28px;
}

.garden-result-group:first-child {
    margin-top: 0;
}

.garden-result-group + .garden-result-group {
    padding-top: 10px;
}

.garden-result-group-header {
    margin-bottom: 14px;
}

.garden-result-group .garden-grid-crops {
    gap: 18px;
}

/* ==================================================
   Calendar Crop Cards — Mobile Breathing Room
   ================================================== */

.garden-result-group .garden-card {
    display: grid;
    gap: 12px;
}

.garden-result-group .garden-card h3,
.garden-result-group .garden-card p {
    margin-top: 0;
    margin-bottom: 0;
}

.garden-result-group .garden-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 620px) {
    .garden-result-group {
        margin-top: 34px;
    }

    .garden-result-group-header {
        margin-bottom: 12px;
    }

    .garden-result-group .garden-grid-crops {
        gap: 20px;
    }
}

/* ------------------------------------------------------------
   Companion Planting Cards
   ------------------------------------------------------------ */

.garden-companion-section {
    margin-top: clamp(32px, 5vw, 56px);
}

.garden-companion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 18px;
    margin-top: 20px;
}

.garden-companion-card {
    padding: 18px;
    border: 1px solid rgba(40, 82, 56, .16);
    border-left: 6px solid rgba(40, 82, 56, .28);
    border-radius: 20px;
    background: rgba(255, 252, 242, .92);
    box-shadow: 0 14px 34px rgba(29, 64, 43, .08);
}

.garden-companion-card-top {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.garden-companion-badge,
.garden-companion-evidence {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
}

.garden-companion-badge {
    background: rgba(91, 128, 69, .14);
    color: #285238;
}

.garden-companion-evidence {
    background: rgba(29, 64, 43, .08);
    color: rgba(29, 64, 43, .72);
}

.garden-companion-card h3 {
    margin: 0;
    font-size: 1.16rem;
    line-height: 1.2;
}

.garden-companion-card h3 a {
    color: #1d402b;
    text-decoration: none;
}

.garden-companion-card h3 a:hover {
    text-decoration: underline;
}

.garden-companion-card p {
    margin: 10px 0 0;
    color: rgba(29, 64, 43, .78);
    font-size: .95rem;
    line-height: 1.5;
}

.garden-companion-intro {
    font-weight: 700;
    color: rgba(29, 64, 43, .86) !important;
}

.garden-companion-meta,
.garden-companion-note,
.garden-companion-source {
    font-size: .88rem !important;
}

.garden-companion-source {
    color: rgba(29, 64, 43, .58) !important;
}

/* Relationship accents */

.garden-companion-card.is-good {
    border-left-color: rgba(91, 128, 69, .72);
}

.garden-companion-card.is-beneficial {
    border-left-color: rgba(207, 143, 46, .78);
}

.garden-companion-card.is-pest-support {
    border-left-color: rgba(111, 135, 71, .72);
}

.garden-companion-card.is-trap {
    border-left-color: rgba(179, 111, 45, .78);
}

.garden-companion-card.is-caution {
    border-left-color: rgba(151, 71, 55, .78);
}

.garden-companion-card.is-caution .garden-companion-badge {
    background: rgba(151, 71, 55, .12);
    color: #7a382c;
}

.garden-companion-card.is-beneficial .garden-companion-badge {
    background: rgba(207, 143, 46, .14);
    color: #7a5118;
}

.garden-companion-card.is-trap .garden-companion-badge {
    background: rgba(179, 111, 45, .14);
    color: #74451b;
}

/* ------------------------------------------------------------
   Sources Page
   ------------------------------------------------------------ */

.garden-sources-page .garden-page-section {
    padding-block: clamp(28px, 5vw, 72px);
}

.garden-sources-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: clamp(18px, 3vw, 28px);
    margin-top: clamp(22px, 4vw, 36px);
}

.garden-sources-intro-card h2,
.garden-sources-note-card h2,
.garden-sources-list-section h2 {
    margin-top: 0;
}

.garden-sources-list-section {
    margin-top: clamp(28px, 5vw, 48px);
}

.garden-sources-list {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

.garden-source-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.garden-source-card h3 {
    margin: 0;
}

.garden-source-publisher {
    margin: 6px 0 0;
    color: var(--color-ink-muted, #61705d);
    font-size: .95rem;
}

.garden-source-notes {
    margin: 14px 0 0;
}

.garden-source-link {
    flex: 0 0 auto;
    white-space: nowrap;
}

.garden-sources-disclaimer {
    margin-top: clamp(26px, 5vw, 44px);
    border-left: 6px solid rgba(91, 128, 69, .45);
}

.garden-alert {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: var(--radius-md, 18px);
}

.garden-alert-warning {
    background: rgba(255, 242, 180, .55);
    color: #5e4b12;
}

@media (max-width: 820px) {
    .garden-sources-layout {
        grid-template-columns: 1fr;
    }

    .garden-source-card-top {
        display: block;
    }

    .garden-source-link {
        margin-top: 14px;
        width: 100%;
        justify-content: center;
    }
}
/* ------------------------------------------------------------
   Sources Page Width Wrapper
   ------------------------------------------------------------ */

.garden-sources-wrap {
    width: min(100%, 1120px);
    margin-inline: auto;
    padding-inline: clamp(18px, 4vw, 32px);
}

.garden-sources-page .garden-detail-hero,
.garden-sources-page .garden-card,
.garden-sources-page .garden-section-block {
    max-width: 100%;
}

/* ==================================================
   Legal / Policy Pages
   ================================================== */

.garden-page-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(28px, 5vw, 56px) 0;
}

.garden-content-card {
    border: 1px solid rgba(40, 82, 56, .14);
    border-radius: 18px;
    background: rgba(255, 252, 242, .92);
    box-shadow: 0 18px 50px rgba(29, 64, 43, .10);
}

.garden-legal-card {
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 44px);
}

.garden-legal-card h1 {
    margin: 0 0 10px;
}

.garden-legal-card h2 {
    margin: 30px 0 10px;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.garden-legal-card p {
    max-width: 76ch;
}

.garden-legal-card a {
    color: var(--garden-forest, #1d402b);
    font-weight: 700;
}


/* ==================================================
   Calendar ZIP-Derived Location
   ================================================== */

.garden-calendar-location-field {
    display: block;
    width: 100%;
    min-width: 0;
}

/*
 | Calendar filter layouts may use grid columns on desktop.
 | The location field should occupy one normal grid cell.
 */
.garden-calendar-location-field .garden-calendar-filter-label {
    display: block;
    margin: 0 0 8px;
    color: var(--color-ink, #243328);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.garden-calendar-location-value {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid rgba(40, 82, 56, .16);
    border-radius: 10px;
    background: rgba(40, 82, 56, .06);
    box-sizing: border-box;
}

.garden-calendar-location-value strong {
    display: block;
    margin: 0;
    color: var(--color-ink, #243328);
    font-size: .94rem;
    line-height: 1.3;
}

.garden-calendar-location-value small {
    display: block;
    margin-top: 3px;
    color: var(--color-ink-muted, #61705d);
    font-size: .76rem;
    line-height: 1.35;
}

.garden-calendar-location-change {
    display: inline-block;
    margin-top: 8px;
    color: var(--color-forest, #285238);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.garden-calendar-location-change:hover,
.garden-calendar-location-change:focus-visible {
    text-decoration: underline;
}


/* ==================================================
   Edaphia Brand Lockup
   ================================================== */

.garden-topbar a.garden-brand.garden-brand--lockup {
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0;
}

.garden-topbar .garden-brand-lockup {
    display: block;
    width: clamp(10.75rem, 17vw, 13.25rem);
    max-width: none;
    height: auto;
    aspect-ratio: 1502 / 431;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(9, 25, 15, 0.26));
}

@media (max-width: 900px) {
    .garden-topbar .garden-header-nav-test {
        flex-wrap: wrap !important;
        max-width: calc(100% - 32px);
        min-width: 0;
    }

    .garden-topbar a.garden-brand.garden-brand--lockup {
        flex: 0 1 auto;
        max-width: calc(100% - 72px);
    }

    .garden-topbar .garden-brand-lockup {
        width: min(11.5rem, 100%);
    }

    .garden-topbar .garden-mobile-toggle-test,
    .garden-topbar .garden-mobile-toggle {
        flex: 0 0 56px;
        margin-left: auto !important;
    }
}

@media (max-width: 380px) {
    .garden-topbar .garden-brand-lockup {
        width: min(9.75rem, calc(100vw - 6rem));
    }
}