/* ============================================================
   Hotrod Wien — SITE FRAME
   Boxes every DEFAULT (non-Bricks) page's content to the SAME container as the
   homepage — max-width var(--wb-container) (134rem / 1340px) centered, with
   var(--wb-gutter) side padding — so nothing runs edge-to-edge full-width.

   THREE content roots exist on this Bricks site (verified against the live DOM,
   incl. an adversarial audit of every reachable page type, DE + EN):

     1. WooCommerce SINGLE PRODUCT (+ classic WP templates):
          <div id="primary" class="content-area"><main id="main" class="site-main">
        → full-width, framed by rule 1.

     2. DEFAULT the_content() pages — cart, checkout, order-received, my-account
        (+ orders / edit-account / edit-address / lost-password / view-order /
        downloads / payment-methods / order-pay), and the shortcode pages
        book / tour-details / tour-maps (also future single posts + password-
        protected pages), in BOTH languages:
          <article id="brx-content" class="wordpress ...">
        → full-width, framed by rule 2.

     3. BRICKS-DESIGNED / Bricks-rendered pages — homepage, shop, product-category
        archives, search, 404, author archive:
          <main id="brx-content"> …with their OWN .brxe-section / .brxe-container
        → already boxed to 1340 by Bricks itself. DELIBERATELY NOT targeted here
          (the <article> vs <main> tag cleanly separates default content from
          Bricks content, so this frame never double-boxes a designed page).

   LOAD / DURABILITY: enqueued by functions.php after base.css (loads last, wins
   layout). Lives in the theme but is NOT part of the Claude-Design export
   package, and dev-deploy-design.sh rsyncs assets/ additively (no --delete) +
   never touches functions.php → this frame survives every design redeploy.
   ============================================================ */

/* ---- 1) WooCommerce single product + any classic WP template (#primary/#main) */
#primary.content-area,
main#main.site-main {
	max-width: var(--wb-container);
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--wb-gutter);
	padding-block: clamp(3rem, 4vw, 6rem);
	box-sizing: border-box;
}
/* nested case (#primary > #main): outer owns the frame, inner goes flush so the
   gutter + block padding are never doubled. */
#primary.content-area main#main.site-main {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
	padding-block: 0;
}

/* ---- 2) Default the_content() wrapper — cart, checkout, order-received,
   my-account (+ endpoints), book, tour-details, tour-maps, single posts,
   password-protected pages (DE + EN). Rendered as <article id="brx-content">,
   which Bricks-designed pages never use (they use <main id="brx-content">). --- */
article#brx-content.wordpress {
	max-width: var(--wb-container);
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--wb-gutter);
	padding-block: clamp(3rem, 4vw, 6rem);
	box-sizing: border-box;
}

/* ---- 3) Nothing inside a framed wrapper may punch back out to full-bleed ---- */
#primary.content-area > *,
main#main.site-main > *,
article#brx-content.wordpress > * {
	max-width: 100%;
}

/* ---- 3a) EXCEPTIONS: self-framed shortcode landing pages (groups / vouchers /
   media) bring their own full-bleed design (width:100vw breakout + inner
   max-width wrap) — the frame must not clamp them back to 1340px. ---- */
article#brx-content.wordpress > .hotrod-groups,
article#brx-content.wordpress > .hotrod-vouchers,
article#brx-content.wordpress > .hotrod-media,
article#brx-content.wordpress > .hotrod-contact {
	max-width: none;
}

/* ---- 4) Framed shortcode pages render their OWN hero H1 — hide the auto page
   title WordPress prepends inside the frame (privacy-policy, groups, vouchers,
   book, imprint, terms, media …) so exactly one H1 stays visible. ---- */
article#brx-content.wordpress > h1:first-child {
	display: none;
}

/* ---- 5) Sticky header on TEMPLATE pages. The baked homepage header sticks
   because it sits inside the page-height main; on every other page Bricks
   wraps the same section in <header id="brx-header"> — a wrapper exactly as
   tall as the header, so the inner section's sticky has zero room to travel.
   Making the wrapper itself sticky restores site-wide consistency. ---- */
header#brx-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
body.admin-bar header#brx-header {
	top: 32px;
}