/* =============================================================================
 * TRST LAYOUT SYSTEM — src/layout.css
 *
 * Site-wide layout primitives for The Read Scope theme.
 *
 *   Layout Widths
 *   ├── Boxed     (default)   → max-width: var(--trst-content-width, 1200px)
 *   ├── Wide      (.alignwide)→ max-width: var(--trst-wide-width, 1440px)
 *   └── Full      (.alignfull)→ 100vw, edge-to-edge
 *
 *   Layout Containers
 *   ├── .trst-section  → page section with bg/padding/width
 *   ├── .trst-row      → horizontal flex row
 *   └── .trst-col-*    → responsive column
 *
 * ============================================================================= */

/* ── 1. Layout Design Tokens ──────────────────────────────────────────────── */

:root {
    --trst-content-width: 1200px;
    --trst-wide-width:    1440px;
    --trst-gap-none:  0;
    --trst-gap-xs:    0.5rem;
    --trst-gap-sm:    1rem;
    --trst-gap-md:    1.5rem;
    --trst-gap-lg:    2.5rem;
    --trst-gap-xl:    4rem;
}

/* ── 2. Gutenberg Align Helpers ────────────────────────────────────────────── */

.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: calc( 50% - 50vw ) !important;
}

.alignwide {
    max-width: var(--trst-wide-width) !important;
    margin-inline: auto !important;
}

.aligncenter,
.alignnone {
    max-width: var(--trst-content-width);
    margin-inline: auto;
}

/* ── 3. Section Block ─────────────────────────────────────────────────────── */

.trst-section {
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

.trst-section__inner {
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
    width: 100%;
    max-width: var(--trst-content-width);
}

/* Width variants */
.trst-section--boxed .trst-section__inner { max-width: var(--trst-content-width); }
.trst-section--wide  .trst-section__inner { max-width: var(--trst-wide-width); }
.trst-section--full  .trst-section__inner { max-width: none; padding-inline: 0; }
.trst-section--full                        { padding-inline: 0; }

/* Padding variants */
.trst-section--pad-none { padding-block: 0; }
.trst-section--pad-xs   { padding-block: 2rem; }
.trst-section--pad-sm   { padding-block: 3rem; }
.trst-section--pad-md   { padding-block: 5rem; }
.trst-section--pad-lg   { padding-block: 7rem; }
.trst-section--pad-xl   { padding-block: 10rem; }

/* Background variants */
.trst-section--bg-white  { background-color: #ffffff; }
.trst-section--bg-light  { background-color: #f8fafc; }
.trst-section--bg-forest { background-color: #1a3c2e; color: #fff; }
.trst-section--bg-dark   { background-color: #0f172a; color: #fff; }
.trst-section--bg-hero   {
    background: linear-gradient(135deg, #0f2318 0%, #1a3c2e 60%, #2d6a4f 100%);
    color: #fff;
}

.trst-section--bg-forest h1, .trst-section--bg-forest h2, .trst-section--bg-forest h3,
.trst-section--bg-dark h1,   .trst-section--bg-dark h2,   .trst-section--bg-dark h3,
.trst-section--bg-hero h1,   .trst-section--bg-hero h2,   .trst-section--bg-hero h3 {
    color: #fff;
}

/* Text alignment */
.trst-section--text-left   { text-align: left; }
.trst-section--text-center { text-align: center; }
.trst-section--text-right  { text-align: right; }

/* ── 4. Row Block ─────────────────────────────────────────────────────────── */

.trst-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--trst-gap-md);
    width: 100%;
    box-sizing: border-box;
}

/* Gap */
.trst-row--gap-none { gap: 0; }
.trst-row--gap-xs   { gap: var(--trst-gap-xs); }
.trst-row--gap-sm   { gap: var(--trst-gap-sm); }
.trst-row--gap-md   { gap: var(--trst-gap-md); }
.trst-row--gap-lg   { gap: var(--trst-gap-lg); }
.trst-row--gap-xl   { gap: var(--trst-gap-xl); }

/* Vertical alignment */
.trst-row--align-top     { align-items: flex-start; }
.trst-row--align-center  { align-items: center; }
.trst-row--align-bottom  { align-items: flex-end; }
.trst-row--align-stretch { align-items: stretch; }

/* Horizontal justification */
.trst-row--justify-start   { justify-content: flex-start; }
.trst-row--justify-center  { justify-content: center; }
.trst-row--justify-end     { justify-content: flex-end; }
.trst-row--justify-between { justify-content: space-between; }

/* Reverse column order */
.trst-row--reverse { flex-direction: row-reverse; }

/* ── 5. Column Block ──────────────────────────────────────────────────────── */

.trst-col {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
}

/* Desktop widths */
.trst-col--1-1 { flex: 0 0 100%; max-width: 100%; }
.trst-col--1-2 { flex: 0 0 calc(50%    - var(--trst-gap-md) / 2); }
.trst-col--1-3 { flex: 0 0 calc(33.333% - var(--trst-gap-md) * 2 / 3); }
.trst-col--2-3 { flex: 0 0 calc(66.666% - var(--trst-gap-md) / 3); }
.trst-col--1-4 { flex: 0 0 calc(25%    - var(--trst-gap-md) * 3 / 4); }
.trst-col--3-4 { flex: 0 0 calc(75%    - var(--trst-gap-md) / 4); }
.trst-col--auto { flex: 1 1 auto; }

/* Tablet: 1/3 → 1/2, 1/4 → 1/2 */
@media (min-width: 640px) and (max-width: 1023px) {
    .trst-col--1-3,
    .trst-col--1-4 {
        flex: 0 0 calc(50% - var(--trst-gap-md) / 2);
        max-width: calc(50% - var(--trst-gap-md) / 2);
    }
}

/* Mobile: all columns → full width */
@media (max-width: 639px) {
    .trst-col,
    .trst-col--1-2,
    .trst-col--1-3,
    .trst-col--2-3,
    .trst-col--1-4,
    .trst-col--3-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Opt-out: .trst-col--no-stack keeps 2-col on mobile */
    .trst-col--no-stack.trst-col--1-2 {
        flex: 0 0 calc(50% - var(--trst-gap-sm) / 2) !important;
        max-width: calc(50% - var(--trst-gap-sm) / 2) !important;
    }
}

/* ── 6. Divider Component ─────────────────────────────────────────────────── */

.trst-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-block: 2rem;
    color: #94a3b8;
}

.trst-divider::before,
.trst-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.trst-divider--thick::before,
.trst-divider--thick::after { height: 2px; }
.trst-divider--forest::before,
.trst-divider--forest::after { background: #2d6a4f; }
.trst-divider--accent::before,
.trst-divider--accent::after { background: var(--trst-accent, #f59e0b); }

.trst-divider__icon  { font-size: 1.25rem; flex-shrink: 0; }
.trst-divider__text  {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

/* ── 7. Editor Preview Placeholder ───────────────────────────────────────── */

.trst-editor-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: ui-sans-serif, system-ui, sans-serif;
    gap: 0.5rem;
    padding: 1.5rem;
    text-align: center;
}

/* ── 8. Responsive Utility Helpers ────────────────────────────────────────── */

.trst-stack { display: flex; flex-direction: column; gap: 0.75rem; }
.trst-clearfix::after { content: ''; display: table; clear: both; }

.trst-hide-mobile { display: block; }
@media (max-width: 639px) {
    .trst-hide-mobile  { display: none !important; }
    .trst-hide-desktop { display: block !important; }
}
.trst-hide-desktop { display: none; }

/* ── 9. Mobile Navigation — Hamburger & Drawer ─────────────────────────────── */

/* Hide the hamburger toggle on large screens (≥1024px) */
@media (min-width: 1024px) {
    #trst-menu-toggle,
    .menu-toggle {
        display: none !important;
    }
}

/* Ensure the mobile drawer and overlay work on ALL screen sizes.
   Visibility is controlled exclusively by JS (transform / opacity).
   Previously md:hidden was used which blocked the drawer from opening on desktop. */
#trst-mobile-drawer {
    display: flex; /* drawer needs flex to layout its children */
}

#trst-overlay {
    display: block;
}