/* ============================================================================
   Custom homepage wrapper
   ----------------------------------------------------------------------------
   Loaded only when a church's home page is running its own HTML
   (ChurchHomepageContent.LayoutMode = 'Custom').

   This file is deliberately TINY. It is not a component library for custom
   pages — the church's own markup brings its own look, and everything shared
   already exists in components.css. All this does is give that markup a sane
   box to live in and label a draft preview.

   It may only consume --ac-* tokens. It must never redefine one.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Full-bleed by default.

   _Layout wraps @RenderBody in .container-fluid, which carries Bootstrap's
   gutter padding. That padding is right for a normal admin screen and wrong
   for a designed home page, where the first thing an author wants is an
   edge-to-edge hero. The built-in template already fights it — see
   .key-hero-bleed in pages/index.css, which cancels the same gutter by hand.

   Cancelling it once here means a custom page starts at the true page edge and
   the author opts back IN to a measured column with Bootstrap's own
   .container, exactly as they would on any other site. That is far easier to
   explain to an AI than "subtract var(--bs-gutter-x) from anything you want
   full width".
   --------------------------------------------------------------------------- */
/* HALF the gutter, not all of it. Bootstrap's container sets
   `--bs-gutter-x: 1.5rem` on ITSELF and then pads `calc(var(--bs-gutter-x) * .5)`
   — the variable is the full gutter, the padding is half. Cancelling the full
   variable therefore pulls twice as far as the padding being cancelled.
   Measured at 414px: padding 10.5px, margin -21px, so the wrapper started at
   -10.5px and every inner `.container` had its 10.5px gutter exactly consumed
   by the overhang — text landed hard on the screen edge and clipped. Desktop
   hid it, because `.container` gets a max-width there and re-centres inside the
   too-wide box; only viewports below the first breakpoint showed it.
   `.key-hero-bleed` in pages/index.css had the identical bug. */
.ac-home-custom {
    margin-left: calc(-.5 * var(--bs-gutter-x, 1.5rem));
    margin-right: calc(-.5 * var(--bs-gutter-x, 1.5rem));
}

/* A custom page is arbitrary authored markup, and a single oversized element
   would otherwise give the whole SITE a horizontal scrollbar — including the
   navbar and footer, which are not the author's to break. Contain it here. */
.ac-home-custom {
    overflow-x: hidden;
}

/* Images in pasted markup routinely carry fixed pixel widths from wherever
   they were designed. Keep them inside the viewport on a phone. */
.ac-home-custom img {
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Draft preview banner (?homepagePreview=1)
   ---------------------------------------------------------------------------
   Loud on purpose. The failure this prevents is an admin previewing a draft,
   liking it, and walking away believing it shipped — the preview URL and the
   live URL are the same page.
   --------------------------------------------------------------------------- */
.ac-home-draft-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ac-gap, 0.75rem);
    padding: 0.75rem var(--ac-card-pad, 1rem);
    background: var(--ac-warning-soft);
    color: var(--ac-warning-text);
    border-bottom: var(--ac-border-width, 1px) solid var(--ac-warning);
    font-size: var(--ac-text-sm);
    font-weight: var(--ac-weight-medium);
}

.ac-home-draft-bar__spacer {
    flex: 1 1 auto;
}