/* plain.css — neutral "Design Off" mode for the Simple Series public pages.
   Self-contained: loaded INSTEAD of theme.css + the Google fonts when the
   visitor flips design=off. No brand tokens, no web fonts, no decorative layer.
   Intentional Bootstrap-default look (system font, #212529 on #fff). This file
   is identical across all sites — copy it verbatim into each public/assets/.
   theme.js still runs in plain mode, so the ES/EN toggle + interactions work;
   the rules below just give the bespoke markup a clean, readable fallback. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #212529;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

/* ---- Layout container (target the existing structural hooks) ---- */
.wrap, main, .nav-inner, .row, .post-grid, .reserve-grid, .loc-grid,
.lede-grid, .hero-grid, .ck-grid, .hl-grid, .about-grid, .safety-grid {
    max-width: 960px;
    margin-inline: auto;
    padding-inline: 16px;
}
main { display: block; }
section { padding-block: 1.5rem; }

/* ---- Typography ---- */
h1, h2, h3, h4, h5 { margin: 0 0 .5rem; line-height: 1.2; font-weight: 600; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
p { margin: 0 0 1rem; }
small { font-size: .875em; color: #6c757d; }
a { color: #0d6efd; text-decoration: underline; }
a:hover { color: #0a58ca; }
img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid #dee2e6; margin: 1rem 0; }

/* ---- Header / nav ---- */
header, .nav, .masthead, .topbar, .filterbar, .site-head {
    border-bottom: 1px solid #dee2e6;
    background: #fff;
}
.nav-inner, .masthead .row, .topbar .row, .filterbar .row {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    justify-content: space-between; padding-block: .6rem;
}
.brand, .title { font-weight: 700; font-size: 1.25rem; color: #212529; text-decoration: none; }
.links { display: flex; flex-wrap: wrap; gap: 1rem; }
.links a { color: #212529; text-decoration: none; }
.links a:hover { text-decoration: underline; }

/* ---- ES/EN + Design toggles (kept usable; theme.js runs in plain mode) ---- */
.lang, .design-toggle, .nav-right { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.lang button, .design-toggle a {
    display: inline-block; padding: .25rem .55rem; font-size: .8125rem; line-height: 1.2;
    border: 1px solid #ced4da; background: #fff; color: #212529; border-radius: .25rem;
    cursor: pointer; text-decoration: none;
}
.lang button.on, .design-toggle a.on { background: #212529; color: #fff; border-color: #212529; }
.design-toggle .dt-label { color: #6c757d; font-size: .8125rem; margin-right: .15rem; }

/* ---- Buttons / CTAs ---- */
.btn-cta, .submit, .book, .cat, .add, .go, .btn-post, button[type="submit"],
button.submit, .filled, .pill {
    display: inline-block; font-weight: 500; line-height: 1.5; text-align: center;
    text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none;
    color: #fff; background: #0d6efd; border: 1px solid #0d6efd;
    padding: .5rem 1rem; border-radius: .375rem;
}
.btn-cta:hover, .submit:hover, .book:hover, .add:hover, .go:hover, .btn-post:hover,
button.submit:hover, .filled:hover, .pill:hover { background: #0b5ed7; border-color: #0a58ca; color: #fff; }
.cat { color: #212529; background: #fff; border-color: #ced4da; }
.cat.on { background: #212529; color: #fff; border-color: #212529; }
.link-arrow { color: #0d6efd; text-decoration: underline; }

/* ---- Forms ---- */
form { display: block; }
.field, .f-row2, .f-row3, .row label { margin-bottom: 1rem; }
label { display: block; margin-bottom: .35rem; font-weight: 500; }
input, select, textarea {
    display: block; width: 100%; padding: .5rem .75rem; font-size: 1rem; line-height: 1.5;
    color: #212529; background: #fff; border: 1px solid #ced4da; border-radius: .375rem;
    font-family: inherit;
}
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: 0; border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}
input::placeholder, textarea::placeholder { color: #6c757d; }
.form-foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ---- Cards / list items (bespoke grids collapse to readable cards) ---- */
.card, .feat, .space, .listing, .amen-item, .offer-card, .pol, .room, .tour-card,
.tour-feature, .cls, .req-card, .prod, .prod-card, .dish, .m-row {
    border: 1px solid #dee2e6; border-radius: .375rem; padding: 1rem; margin-bottom: 1rem; background: #fff;
}
.cards, .featured, .amen-grid, .prod-grid, .tour-grid, .classes, .pol-grid, .menu-cols {
    display: block;
}
.price, .pay { font-weight: 600; }
.chip, .tg, .cat-tag, .badge, .new {
    display: inline-block; padding: .15rem .5rem; margin: .1rem .25rem .1rem 0;
    font-size: .8125rem; border: 1px solid #dee2e6; border-radius: .25rem; color: #495057; background: #f8f9fa;
}

/* ---- Image placeholders ---- */
.ph { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: .375rem; min-height: 2.5rem; padding: .5rem; }
.ph .ph-label { display: inline-block; color: #6c757d; font-size: .75rem; }
.ph img { border-radius: .375rem; }

/* ---- Tables ---- */
table { border-collapse: collapse; width: 100%; margin-bottom: 1rem; }
th, td { border: 1px solid #dee2e6; padding: .5rem; text-align: left; vertical-align: top; }
th { background: #f8f9fa; }

/* ---- Footer ---- */
footer { border-top: 1px solid #dee2e6; margin-top: 2rem; padding-block: 1.5rem; color: #6c757d; }
footer a { color: #0d6efd; }
.foot-top { display: block; }

/* ---- Neutralize the decorative scroll-reveal (theme.js adds reveal-on) ---- */
.reveal { opacity: 1 !important; transform: none !important; }

/* ---- Flash / confirmation (server messages) ---- */
.flashes { margin: 1rem auto; max-width: 960px; padding-inline: 16px; }
.flash { padding: .75rem 1rem; border: 1px solid #dee2e6; border-radius: .375rem; margin-bottom: .5rem; background: #f8f9fa; }
.flash-success { border-color: #badbcc; background: #d1e7dd; color: #0f5132; }
.flash-error { border-color: #f5c2c7; background: #f8d7da; color: #842029; }
.confirm-panel, .confirm, .notfound-panel { max-width: 720px; margin: 2rem auto; padding: 1.5rem; border: 1px solid #dee2e6; border-radius: .375rem; }

/* HOMES: the chip-filter empty message is JS-toggled; keep it hidden in plain mode too */
.empty-filter{ display:none; }
.empty-filter.show{ display:block; }