/**
 * Layout Utilities
 *
 * Schema-driven containers, flex alignment, and text alignment.
 */

/* Containers */
.container-sm {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.container-md {
    width: 100%;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

.container-lg {
    width: 100%;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

.container-xl {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.container-full {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Section layout — contained */
.layout-contained {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .layout-contained { max-width: 768px; }
}

@media (min-width: 1024px) {
    .layout-contained { max-width: 1024px; }
}

@media (min-width: 1280px) {
    .layout-contained { max-width: 1280px; }
}

@media (min-width: 1536px) {
    .layout-contained { max-width: 1536px; }
}

/* Container mobile padding */
@media (max-width: 767px) {
    [class*="container-"] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Flex alignment (align-items) */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

/* Flex justify (justify-content) */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Flex direction */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }

/* Min-height utilities */
.min-h-inherit { min-height: inherit; }

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

/* ==========================================================================
   Content Wrapper - Sidebar Layouts
   ========================================================================== */

.content-wrapper {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Full-width: single column */
.content-wrapper--full-width {
    display: block;
}

.content-wrapper--full-width .content-main {
    width: 100%;
}

/* Content-Sidebar: content left, sidebar right */
.content-wrapper--content-sidebar {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
}

/* Sidebar-Content: sidebar left, content right */
.content-wrapper--sidebar-content {
    display: grid;
    grid-template-columns: 256px 1fr;
    gap: 2rem;
}

/* Main content area */
.content-wrapper .content-main {
    min-width: 0; /* Prevent grid blowout */
}

/* Sidebar container - must stretch to enable sticky inside */
.content-wrapper .content-sidebar {
    min-width: 0; /* Prevent grid blowout */
    align-self: stretch; /* Explicit stretch to full grid row height */
}

/* Sticky sidebar - the aside sticks within the sidebar column */
.content-wrapper .content-sidebar > .plexa-sidebar.sticky,
.content-wrapper .content-sidebar > aside.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky !important;
    top: calc(var(--header-height, 80px) + 1rem) !important;
}

/* Ensure no ancestors break sticky positioning */
body > main,
.content-wrapper,
.content-wrapper .content-main,
.content-wrapper .content-sidebar {
    overflow: visible;
}

/* Responsive: stack on tablet and below */
@media (max-width: 1023px) {
    .content-wrapper--content-sidebar,
    .content-wrapper--sidebar-content {
        grid-template-columns: 1fr;
    }

    /* Sidebar below content on mobile */
    .content-wrapper--content-sidebar .content-sidebar,
    .content-wrapper--sidebar-content .content-sidebar {
        order: 2;
    }

    .content-wrapper--content-sidebar .content-main,
    .content-wrapper--sidebar-content .content-main {
        order: 1;
    }
}

/* Cloned/legacy post content sometimes carries unsized inline SVG icons (e.g. Font Awesome
   SVGs pasted from another site). Without dimensions they render at container width. */
.plexa-post-content svg:not([width]):not([height]):not([class*="w-"]):not([class*="h-"]) {
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    vertical-align: -0.2em;
}

/* ==========================================================================
   The sidebar split
   ==========================================================================

   EVERY SIDEBAR IN THE THEME WAS STACKING AT DESKTOP. Plexa_Page_Template
   emits `grid grid-cols-1 lg:grid-cols-12` with `lg:col-span-8` and
   `lg:col-span-4` on its two halves, and `.lg\:grid-cols-12` is not in the
   compiled theme.css — it carries lg:grid-cols-2 through 6 and nothing wider.
   The container therefore stayed one column at every width, the two halves
   spanned it in turn, and the sidebar sat above the content instead of beside
   it. That is blog, archive, search, service and single: every page type that
   declares a sidebar.

   Found on 2026-09-15 building the category archive and the single post, both
   of which are two-column pages and neither of which rendered as one.

   The rule is written here rather than fixed by rebuilding theme.css because
   structural layout should not depend on a scanner finding a string inside a
   PHP heredoc — the same reason .post-loop__grid stopped using Tailwind's
   container-query column classes. The PHP already emits these BEM classes, so
   nothing there changes.

   NOTE, NOT FIXED HERE: theme.css is evidently stale with respect to
   includes/**/*.php, which input.css does declare as a @source. This rule
   covers the case that was found; it does not establish that nothing else is
   missing, and a rebuild wants its own review.

   The 8/4 split is the template's own hardcoded ratio. The sidebar's `width`
   property (sm/md/lg) is not read by anything — also not fixed here. */

.plexa-page-template__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .plexa-page-template__split {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .plexa-page-template__main {
        grid-column: span 8 / span 8;
    }

    .plexa-page-template__sidebar {
        grid-column: span 4 / span 4;
    }
}

/* STICKY NEEDS SOMEWHERE TO STICK.

   Plexa_Default_Sidebar has carried a `sticky` option defaulting to true since
   it was written, the aside renders with `sticky top-4`, and both utilities are
   in the compiled CSS — and it has never held. `position: sticky` pins an
   element inside its containing block, so the block has to be TALLER than the
   element or there is no travel to pin through. The split sets `items-start`,
   which makes each cell hug its content, so the sidebar cell was exactly as
   tall as the aside and the aside stuck to nothing.

   Only the sidebar cell stretches. The main column keeps start alignment,
   because a content column stretched to a taller neighbour is how the void
   under the blog lead happened.

   The max-height is the other half. A sidebar taller than the viewport pins its
   top and puts its own bottom permanently out of reach — the archive's tags
   plus latest posts come to about 900px, and a contents list for a long article
   will pass it. Capping it to the viewport and letting it scroll itself is what
   makes a long sidebar usable rather than truncated. Overflow on the sticky
   element is safe; it is overflow on an ANCESTOR that kills sticky. */

@media (min-width: 1024px) {
    .plexa-page-template__sidebar {
        align-self: stretch;
    }

    .plexa-sidebar.sticky {
        /* --plexa-chrome-top, not a bare 100vh: the admin bar is fixed over the
           top of the viewport, so for a logged-in editor the cap was 32px taller
           than the space actually available and the sidebar's own bottom went
           back out of reach — the exact failure this block was added to fix. */
        max-height: calc(100vh - var(--plexa-chrome-top, 0px) - 2rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}