/* ==========================================================================
   Cheetah Layout System
   ==========================================================================
   Container, grid, and spacing utilities.
   Mobile-first approach with CSS custom properties.
   No sidebar support — full-width layout by default.
   ========================================================================== */

.page-content {
    flex: 1 0 auto;
}

/* ─── Container ─── */
.cheetah-container {
    width: 100%;
    max-width: var(--cheetah-container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cheetah-container-padding);
    padding-right: var(--cheetah-container-padding);
}

/* Element-level modifiers (e.g. shop archive: .cheetah-container.cheetah-container--wide) */
.cheetah-container--fluid,
.cheetah-container--full {
    max-width: none;
}

.cheetah-container--narrow {
    max-width: 800px;
}

.cheetah-container--wide {
    max-width: 1400px;
}

/*
 * Page-level overrides (body classes from Layout metabox).
 * Applied to every .cheetah-container on the singular view so header,
 * content, and footer stay consistent without touching templates.
 */
body.cheetah-container--narrow .cheetah-container {
    max-width: 800px;
}

body.cheetah-container--wide .cheetah-container {
    max-width: 1400px;
}

body.cheetah-container--full .cheetah-container,
body.cheetah-container--fluid .cheetah-container {
    max-width: none;
}

/* Custom max-width is injected via inline CSS (--cheetah-page-container-width). */
body.cheetah-container--custom .cheetah-container {
    max-width: var(--cheetah-page-container-width, var(--cheetah-container-width));
}

/* Content / horizontal padding overrides */
body.cheetah-padding--none .cheetah-container {
    padding-left: 0;
    padding-right: 0;
}

body.cheetah-padding--small .cheetah-container {
    padding-left: 12px;
    padding-right: 12px;
}

body.cheetah-padding--large .cheetah-container {
    padding-left: 48px;
    padding-right: 48px;
}

@media (max-width: 768px) {
    body.cheetah-padding--large .cheetah-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Custom padding is injected via inline CSS (--cheetah-page-container-padding). */
body.cheetah-padding--custom .cheetah-container {
    padding-left: var(--cheetah-page-container-padding, var(--cheetah-container-padding));
    padding-right: var(--cheetah-page-container-padding, var(--cheetah-container-padding));
}

/*
 * Keep Gutenberg / WooCommerce block "wide" alignments inside the container.
 * Without this, .alignwide on the Cart/Checkout blocks can escape max-width.
 */
.cheetah-container > .alignwide,
.cheetah-container .wp-block-woocommerce-cart.alignwide,
.cheetah-container .wp-block-woocommerce-checkout.alignwide,
.cheetah-container .entry-content > .alignwide {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.cheetah-container > .alignfull,
.cheetah-container .entry-content > .alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* ─── Row ─── */
.cheetah-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--cheetah-container-padding) * -0.5);
    margin-right: calc(var(--cheetah-container-padding) * -0.5);
}

.cheetah-row--align-center {
    align-items: center;
}

.cheetah-row--align-start {
    align-items: flex-start;
}

.cheetah-row--align-end {
    align-items: flex-end;
}

.cheetah-row--justify-between {
    justify-content: space-between;
}

.cheetah-row--justify-center {
    justify-content: center;
}

.cheetah-row--justify-end {
    justify-content: flex-end;
}

.cheetah-row--no-gutter {
    margin-left: 0;
    margin-right: 0;
}

.cheetah-row--no-gutter > [class*="cheetah-col"] {
    padding-left: 0;
    padding-right: 0;
}

/* ─── Columns ─── */
[class*="cheetah-col"] {
    flex: 1 0 0%;
    padding-left: calc(var(--cheetah-container-padding) * 0.5);
    padding-right: calc(var(--cheetah-container-padding) * 0.5);
}

.cheetah-col-auto {
    flex: 0 0 auto;
    width: auto;
}

.cheetah-col-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
.cheetah-col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.cheetah-col-3  { flex: 0 0 25%; max-width: 25%; }
.cheetah-col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.cheetah-col-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.cheetah-col-6  { flex: 0 0 50%; max-width: 50%; }
.cheetah-col-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.cheetah-col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.cheetah-col-9  { flex: 0 0 75%; max-width: 75%; }
.cheetah-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.cheetah-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.cheetah-col-12 { flex: 0 0 100%; max-width: 100%; }

/* ─── Main Content Area ───
   The single source of truth for the main wrapper's vertical rhythm.

   Every page template renders its content inside a `<main class="cheetah-main">`
   element (or an equivalent wrapper such as `.cheetah-shop-wrap` on the
   shop archive). The padding below defines the page-wide top and bottom
   breathing room that used to be declared ad-hoc on each page:

     • padding-top is deliberately SMALL (1rem). It only exists so the
       sticky header never sits directly on top of the first content
       pixel. Pages whose first element is a page title own their own
       title padding (2.5rem on desktop, 1.75rem on mobile) — adding
       that on top of the main wrapper would double the spacing above
       the title, so the wrapper stays minimal.

     • padding-bottom is deliberately LARGE (4rem). Every page gets the
       same generous gap between its content and the site footer, which
       used to be inconsistent across templates (3rem on cart/checkout/
       account, 2rem on shop, no value at all on blog posts and pages).

   The single product page uses `.cheetah-single-product-main` instead
   of `.cheetah-main` (a template-level decision) and declares the
   exact same values on that class. Both rules are intentional and must
   stay in sync.

   DO NOT add page-specific top or bottom padding to the main wrapper.
   If a page needs more top spacing, give its page title (or its first
   content block) the padding instead. */
.cheetah-main {
    width: 100%;
    max-width: 100%;
    padding-top: var(--cheetah-space-md, 1rem);
    padding-bottom: var(--cheetah-space-3xl, 4rem);
}

/* ─── Page Title Wrapper ───
   The <header> element that wraps every page title across the theme.

   Cheetah's page-title spacing contract has two halves:

     1. The H1 owns the entire vertical rhythm above the title
        (padding-top is set per page in the page-specific CSS files).
     2. The wrapper stays completely free of top padding and margin.

   This rule enforces half #2 globally, in a stylesheet that loads on
   every page, so the invariant holds across every page template —
   cart, checkout, account, landing, and the default page.php fallback
   (which uses .entry-header instead of .cheetah-page-header).

   Why this is not just defensive noise: without it, the invariant was
   enforced only by each page CSS file zeroing its own page-specific
   wrapper class (.cheetah-cart-page-header, .cheetah-checkout-page-header,
   .cheetah-account-page-header). The shared .cheetah-page-header class
   itself was never zeroed, so any rule that added padding-top to it
   (a plugin, the Customizer preview, or a future CSS addition) would
   silently double the title's top spacing on any page whose page-specific
   reset did not override it. The account page was the first to manifest
   this because it also renders via .entry-header under the default
   page.php fallback, which no page CSS file ever zeroed. */
.cheetah-page-header,
.entry-header {
    padding-top: 0;
    margin-top: 0;
}

/* ─── Spacing Utilities ─── */
.cheetah-section {
    padding-top: var(--cheetah-space-3xl);
    padding-bottom: var(--cheetah-space-3xl);
}

.cheetah-section--sm {
    padding-top: var(--cheetah-space-xl);
    padding-bottom: var(--cheetah-space-xl);
}

.cheetah-section--lg {
    padding-top: var(--cheetah-space-4xl);
    padding-bottom: var(--cheetah-space-4xl);
}

/* ─── Responsive Grid ─── */
@media (max-width: 1024px) {
    .cheetah-col-md-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .cheetah-col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .cheetah-col-md-3  { flex: 0 0 25%; max-width: 25%; }
    .cheetah-col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .cheetah-col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .cheetah-col-md-6  { flex: 0 0 50%; max-width: 50%; }
    .cheetah-col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .cheetah-col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .cheetah-col-md-9  { flex: 0 0 75%; max-width: 75%; }
    .cheetah-col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .cheetah-col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .cheetah-col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 768px) {
    .cheetah-col-sm-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .cheetah-col-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .cheetah-col-sm-3  { flex: 0 0 25%; max-width: 25%; }
    .cheetah-col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .cheetah-col-sm-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .cheetah-col-sm-6  { flex: 0 0 50%; max-width: 50%; }
    .cheetah-col-sm-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .cheetah-col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .cheetah-col-sm-9  { flex: 0 0 75%; max-width: 75%; }
    .cheetah-col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .cheetah-col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .cheetah-col-sm-12 { flex: 0 0 100%; max-width: 100%; }

    .cheetah-row {
        margin-left: calc(var(--cheetah-container-padding) * -0.25);
        margin-right: calc(var(--cheetah-container-padding) * -0.25);
    }

    [class*="cheetah-col"] {
        padding-left: calc(var(--cheetah-container-padding) * 0.25);
        padding-right: calc(var(--cheetah-container-padding) * 0.25);
    }
}