/* Theme Name: Astra Child — Rap Joint Lagos Theme URI: https://rapjointlagos.com Description: Rap Joint Lagos front end. Child of Astra. Carries the RJL design system (tokens, type scale, spacing scale), the flattened navigation, and the page and WooCommerce templates. Beat the Norm. Author: rapjointlagos.com maintenance Author URI: https://rapjointlagos.com Template: astra Version: 1.0.0 Text Domain: astra-child Tags: e-commerce, woocommerce, shop, blog, custom-menu, featured-images, full-width-template, translation-ready, accessibility-ready */ /* * This file is intentionally almost empty. * * WordPress requires it for the theme header above, but the design system is * split across assets/css/ in dependency order and enqueued from functions.php: * * rjl-tokens.css colours, type scale, spacing scale, motion, z-index * rjl-base.css element defaults, the type scale applied * rjl-layout.css containers, section rhythm, grid primitives * rjl-nav.css header, mobile drawer, the flattened navigation * rjl-components.css buttons, cards, badges, forms, notices, empty states * rjl-woocommerce.css shop, product, cart, checkout, payment methods * rjl-content.css editorial, page heroes, hub sections, footer, 404 * * Put new rules in the layer they belong to, not here. Anything added to this * file loads outside that cascade and will be hard to reason about later. * * The rules below are the two that have to win against the parent theme. */ /* Astra paints the page background from its customizer output. Without this the white default repaints underneath the design system. */ body { background-color: var(--rjl-bg); } /* Astra's content wrapper. The page-builder content layout forced in inc/rjl-astra.php already removes its width and padding, but Astra Pro and some starter-template CSS re-assert a max-width here. Belt and braces: the RJL containers do all the width work, so this wrapper must stay neutral or the site gets doubled gutters and heroes that cannot reach the viewport edge. display:block is the ROOT-CAUSE FIX for the black gap reported on staging. Astra's dynamic CSS sets this wrapper to display:flex above its tablet breakpoint. That breakpoint defaults to 921 (astra/inc/core/common-functions.php:1592) and astra_parse_css emits min-width: breakpoint + 1, which is exactly the 922px seen on the live site. Once it is a flex row, every direct child becomes a flex item that shrinks to its own content width instead of filling the row. This theme puts TWO children in there — the breadcrumb