/**
 * Vastworx — L1.5 Layout
 *
 * 🔴 WHY THIS FILE HAD TO BE WRITTEN, AND WHY IT DID NOT EXIST BEFORE.
 *
 * In the block theme this replaces, NOT ONE LINE OF LAYOUT LIVED IN THE THEME.
 * Grepping assets/css for `is-layout|wp-container|alignwide|alignfull|
 * has-global-padding|wp-site-blocks` returned zero matches: components.css is
 * pure component skin. Every structural property — the 720px content measure,
 * the 1200px wide escape, the root inline padding, the gap between sibling
 * blocks, the header row, the footer columns — was GENERATED AT RENDER TIME by
 * core's block layout engine, keyed on `wp-container-*` hashes that appear in
 * no file here.
 *
 * That engine still runs for blocks inside post content (it is hooked to
 * `render_block`, not to the theme type), which is why every pattern on the
 * home page still lays itself out. It does NOT run for hand-written PHP, and
 * it no longer emits the root wrapper that carried the global padding.
 *
 * So this file supplies exactly what disappeared, and nothing more. It is
 * deliberately L1.5: it sits between the presets and the components, uses only
 * var() references, and contains no colour.
 *
 * 🔴 THE WIDTHS ARE NOT RESTATED HERE. THEME.JSON IS STILL THE ONE PLACE.
 *
 * An earlier version of this file hardcoded 720px and 1200px with a note
 * saying "if theme.json changes, change them here too". That was wrong twice
 * over: it is a drift hazard by construction, and it was unnecessary.
 *
 * Verified against WordPress 7.1 with this theme active: a CLASSIC theme
 * carrying a theme.json still gets
 *     --wp--style--global--content-size
 *     --wp--style--global--wide-size
 * emitted in the global stylesheet, and core still emits its own
 * `.is-layout-constrained > :where(...)` rule built from them. Only the
 * *root wrapper* rules are block-theme-only.
 *
 * So the size is read from core's variables, with the theme.json values as a
 * literal fallback in case global styles are ever dequeued. TO CHANGE THE SITE
 * WIDTH, EDIT theme.json settings.layout — nothing here needs touching, and
 * the hand-written rules below cannot disagree with core's because both now
 * resolve the same variable.
 *
 * The two spacing values genuinely are theme.json's, by preset:
 *     styles.spacing.padding  left/right: spacing--50 (24px)
 *     styles.spacing.blockGap spacing--50 (24px)
 */

:root {
    --vw-content-width: var(--wp--style--global--content-size, 720px);
    --vw-wide-width: var(--wp--style--global--wide-size, 1200px);
    --vw-gutter: var(--wp--preset--spacing--50);
    --vw-block-gap: var(--wp--preset--spacing--50);
}

/* --------------------------------------------------------------------------
   THE CONSTRAINED MEASURE

   Reproduces core's `is-layout-constrained`: children get the content measure
   and centre themselves; .alignwide widens; .alignfull escapes entirely.

   Both selectors are listed because content coming through the_content() may
   already carry core's class, while hand-written PHP carries ours. Supporting
   both means a pattern and a template can sit in the same page and agree.
   -------------------------------------------------------------------------- */

.vw-constrained > *,
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--vw-content-width);
    margin-left: auto;
    margin-right: auto;
}

.vw-constrained > .alignwide,
.is-layout-constrained > .alignwide {
    max-width: var(--vw-wide-width);
}

.vw-constrained > .alignfull,
.is-layout-constrained > .alignfull {
    max-width: none;
}

/* --------------------------------------------------------------------------
   THE GUTTER

   Was theme.json's styles.spacing.padding routed through
   `useRootPaddingAwareAlignments` onto `.wp-site-blocks > *`. A classic theme
   emits neither that wrapper nor that class, so the padding is applied to the
   band and to the two site chrome rows instead — the three things that span
   the viewport.
   -------------------------------------------------------------------------- */

.vw-band,
.vw-header,
.vw-footer {
    padding-inline: var(--vw-gutter);
}

/* --------------------------------------------------------------------------
   BLOCK GAP

   Core's flow layout puts margin-block-start on every subsequent sibling. The
   :where() keeps specificity at zero so any component rule still wins.
   -------------------------------------------------------------------------- */

.vw-flow > :where(* + *) {
    margin-block-start: var(--vw-block-gap);
}

/* --------------------------------------------------------------------------
   SITE HEADER

   🔴 position:sticky was NOT in any stylesheet. It came from the header block's
      `position` support, which core rendered as an inline style. Losing it is
      silent — the header simply stops sticking and nobody can find the rule
      that used to do it, because there never was one.
   -------------------------------------------------------------------------- */

.vw-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding-block: var(--wp--preset--spacing--30);
}

.vw-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: var(--wp--preset--spacing--40);
    max-width: var(--vw-wide-width);
    margin-inline: auto;
}

.vw-header-brand {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--wp--preset--spacing--30);
    min-width: 0;
}

.vw-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--wp--preset--spacing--40);
}

.vw-nav-setup {
    font-size: var(--wp--preset--font-size--2-xs);
}

/* --------------------------------------------------------------------------
   PRIMARY NAVIGATION

   The list is ours; the item and submenu skins are already in components.css
   and are matched by the class names Vastworx_Nav_Walker emits.
   -------------------------------------------------------------------------- */

.vw-nav-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vw-nav-list .wp-block-navigation-item {
    position: relative;
}

.vw-nav-list a {
    display: block;
    text-decoration: none;
}

/* Submenus: hidden until hover or keyboard focus enters the item. :focus-within
   is what makes them reachable by keyboard without any JavaScript at all. */
.vw-nav-list .wp-block-navigation__submenu-container {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 200px;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
}

.vw-nav-list .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.vw-nav-list .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
    opacity: 1;
    visibility: visible;
}

/* --------------------------------------------------------------------------
   MOBILE NAVIGATION

   Replaces core/navigation's overlayMenu:"mobile". The button is hidden on
   wide viewports and the list is always visible there, so the desktop header
   needs no JavaScript whatsoever — the script only manages the overlay.
   -------------------------------------------------------------------------- */

.vw-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--wp--preset--spacing--20);
    border: var(--vw-border-width) solid var(--vw-border);
    border-radius: var(--vw-radius-sm);
    background: none;
    color: inherit;
    cursor: pointer;
}

/* One icon or the other, never both. */
.vw-nav-toggle .vw-icon--x,
.vw-nav-toggle[aria-expanded="true"] .vw-icon--menu {
    display: none;
}

.vw-nav-toggle[aria-expanded="true"] .vw-icon--x {
    display: block;
}

@media (max-width: 781px) {

    .vw-nav-toggle {
        display: inline-flex;
    }

    .vw-nav {
        position: fixed;
        inset: 0;
        z-index: 30;
        display: none;
        padding: var(--wp--preset--spacing--80) var(--vw-gutter);
        overflow-y: auto;
        background-color: var(--vw-canvas);
    }

    .vw-nav.is-open {
        display: block;
    }

    .vw-nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--wp--preset--spacing--30);
    }

    /* On a touch overlay there is no hover and nowhere to pop out to, so
       submenus are simply always shown, indented. */
    .vw-nav-list .wp-block-navigation__submenu-container {
        position: static;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        padding-left: var(--wp--preset--spacing--40);
        border: 0;
        box-shadow: none;
        background: none;
    }
}

/* --------------------------------------------------------------------------
   MAIN AND BANDS
   -------------------------------------------------------------------------- */

.vw-main {
    display: block;
}

/*
 * 🔴 BANDS CONSTRAIN THEIR CHILDREN TO THE *WIDE* SIZE, NOT THE CONTENT SIZE.
 *
 * This rule originally used --vw-content-width (720px) and was wrong twice:
 *
 *   1. It disagreed with core. Every band pattern declares
 *      layout {"type":"constrained","wideSize":"1200px"} and NO contentSize,
 *      so for pattern-rendered bands core generates
 *          .wp-container-core-group-is-layout-<hash> > :where(...)
 *              { max-width: 1200px }
 *      at the SAME specificity as this rule. Whichever stylesheet came last
 *      won, and this one was squeezing 1200px sections into 720px.
 *
 *   2. 720px is a prose measure, not a section measure. It is right for an
 *      article and wrong for a three-up feature grid or a pricing table, which
 *      is what these bands hold.
 *
 * Using the wide size makes this rule and core's agree by construction, so a
 * band rendered from a pattern and a band written by hand in page.php or
 * single.php lay out identically. Prose is narrowed separately, by
 * .vw-constrained on the post-content wrapper.
 */
/*
 * 🔴 TWO CLASSES, DELIBERATELY, TO OUTRANK CORE'S PER-BAND RULE.
 *
 * Core's is `.wp-container-core-group-is-layout-<hash> > :where(...)`, which
 * is specificity (0,1,0) because :where() contributes nothing. A single-class
 * rule here would tie, and the winner would be decided by stylesheet order -
 * which is not something to leave to chance.
 *
 * It has to win because the width is otherwise UNREACHABLE. Every band pattern
 * hardcodes layout {"wideSize":"1200px"} in its own block attributes, and the
 * home page is stored in the DATABASE as saved block content, so that 1200px
 * is baked into each section. Changing theme.json does nothing to it; the only
 * other way to widen the site would be to re-edit every band in the block
 * editor, on every page.
 *
 * The trade: a per-band width set in the editor no longer takes effect. That
 * is a deliberate choice for this theme - one site width, set in one place,
 * consistent with how every other value here is a single token. If per-section
 * widths are ever wanted, delete this rule and set them in the content.
 *
 * TO CHANGE THE SITE WIDTH: theme.json -> settings.layout.wideSize.
 */
.vw-main .vw-band > * {
    max-width: var(--vw-wide-width);
    margin-inline: auto;
}

/* Two classes as well, or the rule above out-ranks this one and alignfull
   silently stops escaping the measure. */
.vw-main .vw-band > .alignfull {
    max-width: none;
}

.vw-band > :where(* + *) {
    margin-block-start: var(--vw-block-gap);
}

/* --------------------------------------------------------------------------
   POST LISTS AND PAGINATION
   -------------------------------------------------------------------------- */

.vw-post-list > :where(* + *) {
    margin-block-start: var(--wp--preset--spacing--70);
}

.vw-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30);
    align-items: center;
}

.vw-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--wp--preset--spacing--30);
    margin-block-start: var(--wp--preset--spacing--80);
}

.vw-pagination .page-numbers {
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    border-radius: var(--vw-radius-sm);
    text-decoration: none;
}

.vw-post-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--30);
    margin-block-start: var(--wp--preset--spacing--60);
}

/* Featured images: core/post-featured-image rendered aspectRatio as an inline
   style on the <img>. the_post_thumbnail() does not, so unequal source ratios
   would break both the page and single layouts. */
.vw-featured-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--vw-radius-md);
}

.vw-featured-image {
    margin: 0 0 var(--wp--preset--spacing--60);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.vw-footer {
    padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
    border-top: 1px solid var(--wp--preset--color--border);
}

.vw-footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
    max-width: var(--vw-wide-width);
    margin-inline: auto;
}

.vw-footer-columns > .wp-block-column {
    flex: 1;
    min-width: 180px;
}

.vw-footer-col-brand {
    flex-basis: 40%;
    min-width: 260px;
}

.vw-footer .wp-block-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vw-footer .wp-block-list > li + li {
    margin-block-start: var(--wp--preset--spacing--20);
}

.vw-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vw-footer-rule,
.vw-footer > p {
    max-width: var(--vw-wide-width);
    margin-inline: auto;
}

.vw-footer-rule {
    margin-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

/* Spacing utilities matching the inline margins the block markup carried, so
   the templates need no style attributes of their own. */
.vw-mt-30 { margin-block-start: var(--wp--preset--spacing--30); }
.vw-mt-40 { margin-block-start: var(--wp--preset--spacing--40); }
.vw-mt-50 { margin-block-start: var(--wp--preset--spacing--50); }
.vw-mt-60 { margin-block-start: var(--wp--preset--spacing--60); }
.vw-mb-60 { margin-block-end: var(--wp--preset--spacing--60); }
.vw-pb-90 { padding-block-end: var(--wp--preset--spacing--90); }

/* --------------------------------------------------------------------------
   COMMENTS
   -------------------------------------------------------------------------- */

.vw-comments {
    margin-block-start: var(--wp--preset--spacing--90);
}

.vw-comment-list,
.vw-comment-list .children {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vw-comment-list > li + li,
.vw-comment-list .children > li {
    margin-block-start: var(--wp--preset--spacing--60);
}

.vw-comment-list .children {
    margin-inline-start: var(--wp--preset--spacing--70);
}

.vw-comment {
    display: flex;
    gap: var(--wp--preset--spacing--40);
    align-items: flex-start;
}

.vw-comment-avatar {
    flex: 0 0 40px;
}

.vw-comment-body {
    flex: 1;
    min-width: 0;
}

.vw-comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------------
   SCREEN READER TEXT

   Was inherited from core's block library stylesheet. It is used by the skip
   link and by the copy-code live region in assets/js/vastworx.js, so it is
   declared here rather than left to a dependency that may not load.
   -------------------------------------------------------------------------- */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    z-index: 100;
    clip-path: none;
    width: auto;
    height: auto;
    margin: 0;
}