/* ===========================
   Homestead Central – base.css
   =========================== */

/* --- CSS variables (theme) --- */
:root {
    --bg: #496f25;
    --text: #0f172a;
    /* slate-900 */
    --muted: #64748b;
    /* slate-500 */
    --line: #e2e8f0;
    /* slate-200 */
    --card-bg: #dadb95;
    --card-hover: #f8fafc;
    /* slate-50 */
    --btn-bg: #f1f5f9;
    /* slate-100 */
    --btn-text: #0f172a;
    --btn-border: #e2e8f0;
    --link: #0b3b8f;
    --card-bg-2: #eceeaf;
    /* soft lighter end of your #dadb95 */
    --card-border: rgba(0, 0, 0, .10);
    /* subtle edge */
    --shadow-1: rgba(0, 0, 0, .08);
    /* near shadow */
    --shadow-2: rgba(0, 0, 0, .14);
    /* far shadow */
    --focus-ring: #3b82f6;
    /* keyboard ring */
}

/* --- Reset-ish --- */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--text);
    font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

body.site-bg {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)),
        var(--site-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

body.modal-page {
    background-image: none;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* --- Layout --- */
.topbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .6rem .9rem;
}

.topbar-row {
    width: 100%;
}

.topbar-row-main {
    display: grid;
    /* Equal outer tracks, so the middle cell's centre is the ribbon's centre and the
       homestead name lines up with the Menu button in the row below.

       These were `auto ... auto`, which sized each side to its own content: the logo is
       106.7px and the account button is as wide as the username, so the middle track sat
       half the difference off centre -- 39.8px left with `ehowell151@gmail.com`, and it
       moved every time the username's width changed. `1fr` on both sides removes the
       dependency on their contents entirely.

       The middle stays `auto` rather than `1fr`; see the min-width rules below. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .75rem;
}

.topbar-row-main>* {
    min-width: 0;
}

/* ...but not the logo and the account button. With `min-width: 0` an `auto`-sized middle
   track takes its full max-content width first and leaves these two to split whatever is
   left -- equally, since both sides are `1fr` -- so a long homestead name or username
   squeezed the account button out of its own track and on top of the name.

   Keeping their automatic minimum means the name is what yields under pressure: it
   ellipsizes, exactly as it did before, while these two always get the room they need.
   The trade is that on a narrow window with a long name AND a long username the outer
   tracks fall back to their differing content widths and the name drifts off centre
   again -- which is only ever as bad as the behaviour this replaced. */
.topbar-row-main>.hc-brand,
.topbar-row-main>.account-nav {
    min-width: auto;
}

.topbar-row-menu {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.hc-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.topbar-homestead-name {
    font-size: clamp(1.3rem, 2.2vw, 2rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: .01em;
    color: #1f2937;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 .25rem;
}

.topbar-brand-tagline {
    font-size: clamp(.95rem, 1.6vw, 1.3rem);
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: .01em;
    color: #1f2937;
    text-align: center;
    padding: 0 .25rem;
    /* Unlike the homestead name this is a full sentence, so it wraps instead of
       truncating with an ellipsis. */
    white-space: normal;
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
}

.nav-logo-img {
    height: 60px;
    width: auto;
    /* An image that is a flex item resolves its own automatic minimum size to 0, so
       nothing upstream had a width to report: `.hc-brand`'s min-content measured 0 and
       the `1fr` brand track above happily collapsed, squashing the logo out of shape
       (107px -> 69px -> gone) whenever the homestead name needed the room. Stating the
       floor here is what gives the track something to hold on to. */
    min-width: min-content;
}

.nav-logo-text {
    font-weight: 700;
    color: #334155;
    max-width: 420px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-nav {
    display: flex;
    justify-content: center;
    width: 100%;
}

.account-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
}

.menu {
    position: relative;
}

.menu-items[hidden] {
    display: none;
}

.menu-items {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 220px;
    padding: .5rem;
    z-index: 1000;
}

.menu-items.card,
.menu-items.card:hover,
.menu-items.card:active {
    cursor: default;
    transform: none;
}

/* Keep the centered desktop app menu anchored while hovered/active. */
.menu-items.card.app-menu-items,
.menu-items.card.app-menu-items:hover,
.menu-items.card.app-menu-items:active {
    transform: translateX(-50%);
}

.menu-items .nav-link {
    display: block;
    padding: .35rem .25rem;
    border: 1px solid transparent;
    border-radius: 8px;
}

.menu-items .nav-link:hover {
    text-decoration: none;
    background: rgba(226, 232, 240, .6);
}

.menu-items hr {
    margin: .4rem 0;
}

.menu-items form {
    margin: 0;
}

.menu-logout {
    width: 100%;
}

.app-menu {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.app-menu-trigger {
    min-width: 260px;
    justify-content: center;
    padding: .65rem 1rem;
    font-size: 1rem;
}

.app-menu-items {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    margin-top: 0;
    width: min(92vw, 420px);
    max-height: min(70vh, 520px);
    overflow-y: auto;
    z-index: 1200;
}

.app-menu-link {
    width: 100%;
    padding: .55rem .65rem;
}

.menu-title {
    padding: .25rem .25rem .45rem .25rem;
    margin-bottom: .25rem;
    font-weight: 700;
    color: #334155;
    border-bottom: 1px solid var(--line);
}

.account-menu-trigger {
    padding: .4rem .6rem;
}

/* Overlay the account dropdown instead of letting it sit in the flow, so opening
   it cannot stretch the ribbon or push the page down -- the same behaviour the
   desktop app menu already has.

   The three-class selector is load-bearing. `.card` below also sets
   `position: relative`, and `.menu-items` above is a single class too, so `.card`
   wins that tie on source order and drags the panel back into the flow. Out-
   specifying it is the trick `.menu-items[hidden]` and `.menu-items.card` already
   use against `.card`'s own `display` and `transform`. */
.menu-items.card.account-menu-items {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    width: max-content;
    max-width: min(92vw, 320px);
    margin-top: 0;
    /* Nine entries can outrun a short screen, and an overlay taller than the
       viewport has no way to be scrolled into view -- so the panel scrolls. */
    max-height: min(70vh, 520px);
    overflow-y: auto;
}

main {
    max-width: 1100px;
    margin: 1rem auto;
    padding: 0 .75rem;
}

/* --- Typography helpers --- */
.page-title {
    margin: 0 0 .5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.muted {
    color: var(--muted);
}

/* --- Buttons --- */
.btn,
a.btn,
button,
.button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border: 1px solid var(--btn-border);
    border-radius: 8px;
    background: var(--btn-bg);
    color: var(--btn-text);
    text-decoration: none;
    cursor: pointer;
}

.btn:hover,
a.btn:hover,
button:hover,
.button:hover {
    background: #e2e8f0;
    text-decoration: none;
}

/* --- Cards --- */
.card {
    display: block;
    /* NEW: hard background-color so card isn’t transparent even if gradient fails */
    background-color: var(--card-bg, #dadb95);
    /* keep gradient, but fall back to card-bg if --card-bg-2 is missing */
    background-image: linear-gradient(180deg, var(--card-bg, #dadb95), var(--card-bg-2, var(--card-bg, #dadb95)));
    border: 1px solid var(--card-border, rgba(0, 0, 0, .10));
    border-radius: 14px;
    padding: 1rem;
    box-shadow:
        0 1px 2px var(--shadow-1, rgba(0, 0, 0, .08)),
        0 8px 20px var(--shadow-2, rgba(0, 0, 0, .14));
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    cursor: pointer;
    will-change: transform;
    position: relative;
    /* you already set this lower—keep it here */
}

/* “lift” on hover */
.card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 4px var(--shadow-1, rgba(0, 0, 0, .08)),
        0 14px 32px var(--shadow-2, rgba(0, 0, 0, .14));
    border-color: rgba(0, 0, 0, .14);
}

/* “press” on active */
.card:active {
    transform: translateY(0);
    box-shadow:
        0 0 0 rgba(0, 0, 0, 0),
        0 6px 16px var(--shadow-1);
}

/* keyboard focus ring */
.card:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px color-mix(in oklab, var(--focus-ring) 30%, white),
        0 1px 2px var(--shadow-1),
        0 8px 20px var(--shadow-2);
}

/* add a subtle top highlight + bottom edge for a beveled hint */
.card::before,
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}


.card::before {
    /* top edge highlight */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.card::after {
    /* bottom edge shade */
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06);
}

/* optional: icon/chevron nudge on hover */
.card .chev {
    display: inline-block;
    transition: transform .15s ease;
}

.card:hover .chev {
    transform: translateX(2px);
}

/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {

    .card,
    .card .chev {
        transition: none;
    }
}

@media (max-width: 900px) {
    .topbar {
        padding: .7rem;
        gap: .5rem;
    }

    .topbar-row-main {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    /* One stacked column here, so there is no side-by-side squeeze to protect against.
       Put the automatic minimum back to 0 so an unbreakable long username cannot widen
       the page on a phone -- this keeps the sub-900px layout exactly as it was. */
    .topbar-row-main>.hc-brand,
    .topbar-row-main>.account-nav {
        min-width: 0;
    }

    .hc-brand,
    .app-nav,
    .account-nav {
        width: 100%;
        justify-content: center;
    }

    .topbar-homestead-name {
        font-size: clamp(1.05rem, 5vw, 1.45rem);
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        text-align: center;
    }

    .topbar-brand-tagline {
        font-size: clamp(.9rem, 4vw, 1.15rem);
        text-align: center;
    }

    .nav-logo {
        width: 100%;
        justify-content: center;
    }

    .nav-logo-text {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        text-align: center;
    }

    .app-menu {
        justify-content: stretch;
        align-items: stretch;
    }

    .app-menu-trigger {
        width: 100%;
        min-width: 0;
        padding: .75rem .9rem;
        font-size: 1.05rem;
    }

    .menu-items {
        width: 100%;
    }

    .app-menu-items {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
        margin-top: .45rem;
        max-height: none;
        overflow-y: visible;
    }

    .menu-items.card.app-menu-items,
    .menu-items.card.app-menu-items:hover,
    .menu-items.card.app-menu-items:active {
        transform: none;
    }

    .account-nav {
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .account-nav .btn {
        width: 100%;
        justify-content: center;
    }

    .account-nav .menu {
        width: 100%;
    }

    /* Overlay here as well. In the flow this landed in the ribbon's first row,
       so opening it stretched that row and shoved every row below it -- and the
       whole page -- downward. Selector matches the one above so it still wins. */
    .menu-items.card.account-menu-items {
        width: 100%;
        max-width: none;
        margin-top: 0;
    }
}

.card h3 {
    margin: .1rem 0 .25rem 0;
    font-size: 1.05rem;
}

.card .muted {
    font-size: .9rem;
}

/* --- Card layouts --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .8rem;
}

.card-stack {
    display: grid;
    gap: .6rem;
}

/* --- Forms --- */
form .field,
form p {
    margin: .5rem 0;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: .25rem;
}

input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: .45rem .55rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, .25);
}

footer .button.secondary {
    background: #fff;
}

/* --- Calendar --- */
.cal-header .btn {
    padding: .25rem .55rem;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-right: 0;
    border-bottom: 0;
}

.cal-grid>div {
    min-height: 92px;
    padding: .45rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.cal-day {
    background: #fff;
}

.cal-day--out {
    background: #fafafa;
    color: #94a3b8;
}

.cal-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-weight: 700;
}

.cal-today {
    background: #dbeafe;
    color: #1e3a8a;
}

/* --- Modal shell (structural only; inline styles live in base.html) --- */
.modal-backdrop {
    /* present for class hooks */
}

.modal {
    /* present for class hooks */
}

.modal-header {
    /* present for class hooks */
}

.modal-body {
    /* present for class hooks */
}

/* --- Utilities --- */
.split {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.pref-background-preview {
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.pref-background-preview img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.pref-radio-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pref-radio-group li {
    margin: 0 0 .4rem 0;
}

.pref-radio-group label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 500;
    margin: 0;
}

.background-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
    max-height: 330px;
    overflow: auto;
    padding: .2rem;
}

.background-thumb {
    display: block;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .45rem;
    background: #fff;
    cursor: pointer;
}

.background-thumb input[type="radio"] {
    margin: 0 0 .4rem 0;
}

.background-thumb img {
    width: 100%;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.background-thumb input[type="radio"]:checked + img {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .35);
}

.background-thumb-text {
    display: block;
    margin-top: .35rem;
    font-size: .85rem;
    color: #334155;
    line-height: 1.3;
}

/* ==========================================
   SPECIAL: Modal-link tiles / buttons styling
   ========================================== */

/* If you use small button-style modal links */
a.button.modal-link {
    background: #eef6ff;
    color: #0b3b8f;
    border-color: #93c5fd;
}

a.button.modal-link:hover,
a.button.modal-link:focus {
    background: #dbeafe;
    border-color: #60a5fa;
}

/* If you use tile-style add cards that open a modal.
   Strong override (+ !important) to beat base*/


/* ============ Big touch-friendly tiles ============ */
a.action-card {
    display: block;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    min-height: 64px;
    /* nice thumb target */
    box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
    transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, transform .08s ease;
}

a.action-card:hover,
a.action-card:focus {
    background: var(--card-hover);
    border-color: #cbd5e1;
    box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
    transform: translateY(-1px);
}

a.action-card .title {
    font-weight: 700;
    margin: 0 0 .15rem 0;
}

a.action-card .subtitle {
    color: var(--muted);
    font-size: .92rem;
}

/* Optional color accents (pick one or remove) */
a.action-card.primary {
    background: #eef6ff;
    border-color: #93c5fd;
}

a.action-card.primary:hover {
    background: #dbeafe;
    border-color: #60a5fa;
}

a.action-card.neutral {
    background: #fff;
}

/* put at end of base.css if desired */
.gallery img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
}

/* make cards sit side-by-side */
.grid.cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.cards-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
}

.cards-scroll .card {
    flex: 0 0 260px;
    /* fixed card width */
    scroll-snap-align: start;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    align-items: stretch;
}

/* Garden page background (body) */
.bg-garden {
    /* Subtle overlay + image underneath */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        url("/static/img/Homestead backgrounds/Homestead Background Official.3da8df28502e.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Make the main content sit on a soft panel so text is always legible */
.bg-garden main {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem .9rem;
}

/* Optional: reduce panel effect on small screens */
@media (max-width: 640px) {
    .bg-garden main {
        background: rgba(255, 255, 255, 0.8);
    }
}

/* Card with photo background via CSS variable --photo */
.card.photo {
    position: relative;
    overflow: hidden;
}

.card.photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--photo);
    background-size: cover;
    background-position: center;
    opacity: .28;
    /* fade strength */
    filter: grayscale(15%) contrast(95%);
}

.card.photo>* {
    position: relative;
}

/* keep text above the image */

.btn.photo {
    position: relative;
    color: #0f172a;
    background: #fff;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.btn.photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--photo);
    background-size: cover;
    background-position: center;
    opacity: .18;
    /* lighter than cards */
    filter: grayscale(20%);
}

.btn.photo>* {
    position: relative;
}

/* Active nav state */
.btn.active {
    font-weight: 600;
    border-color: rgba(51, 65, 85, .35);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

.btn.active::after {
    content: "";
    display: block;
    height: 3px;
    margin-top: 4px;
    border-radius: 2px;
    background: currentColor;
}

/* Active state for .btn and .nav-link */
.btn.active,
.nav-link.active {
    font-weight: 600;
    border-color: rgba(51, 65, 85, .35);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

.btn.active::after,
.nav-link.active::after {
    content: "";
    display: block;
    height: 3px;
    margin-top: 4px;
    border-radius: 2px;
    background: currentColor;
}