/*
Theme Name:   MOB Community Services
Theme URI:    https://mobcommunityservices.com
Description:  Child theme of Astra for MOB Community Services, a community-centered alternative to traditional security in Asheville, NC. Owns the document shell, Astra neutralisation, the design system (tokens, base, section CSS) and the interaction script. Phase 1 renders the approved HTML design through Elementor HTML widgets; Phase 2 replaces those with custom Elementor widgets in a core plugin.
Author:       TGP Brand Studio
Template:     astra
Version:      0.1.0
Requires PHP: 7.4
Text Domain:  mob-community
*/

/* ==========================================================================
   The design system itself is in assets/css/ (GENERATED from design/src by
   wordpress/tools/export.py — never edit those files by hand).
   This file holds ONLY the WordPress-specific glue: Astra and Elementor
   neutralisation. Each rule is here for a reason; the reason is written down.
   ========================================================================== */

/* 1. Our header/footer come from HFE templates. Astra's own must never also
      render (belt and braces: functions.php removes the markup too). */
.site-header, .site-footer, .ast-above-header, .ast-below-header, .main-header-bar-wrap { display: none; }

/* 2. Sections are full-bleed and bring their own .mob-wrap. Astra's and
      Elementor's containers must add no width cap and no padding. */
.ast-page-builder-template .site-content > .ast-container,
.ast-page-builder-template .entry-content,
.ast-page-builder-template .site-content #primary { max-width: none; width: 100%; padding: 0; margin: 0; }
.elementor .e-con.mob-e-section,
.elementor .e-con.mob-e-section > .e-con-inner { padding: 0; gap: 0; max-width: none; }
.elementor .mob-e-section .elementor-widget-html,
.elementor .mob-e-section .elementor-widget-container { width: 100%; margin: 0; padding: 0; }
.elementor .mob-e-section > .elementor-element,
.elementor .mob-e-section > .e-con-inner > .elementor-element { width: 100%; max-width: 100%; }

/* 3. The fixed header must clear the WordPress admin bar when logged in. */
.admin-bar .mob-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mob-header { top: 46px; } }

/* 4. Astra shrinks the root font-size to 91.2% at <=921px and <=544px
      (hard-coded in its inline CSS). The design is in rem, so that would
      scale the entire system down 8.8% on tablet + phone. `html:root` is
      (0,1,1) and beats Astra's `html` (0,0,1). Lesson from the ORA build. */
@media (max-width: 921px) { html:root { font-size: 100%; } }
@media (max-width: 544px) { html:root { font-size: 100%; } }

/* 5. Astra paints <button> blue on hover/focus. Our buttons are components
      with their own states; the exported CSS is specificity-bumped (html .x)
      so it wins these ties, but the base colour is reset here too. */
[data-mob] button:hover, [data-mob] button:focus { color: inherit; }

/* 6. Elementor's HTML widget adds a margin-bottom between widgets
      (--widgets-spacing). Sections butt up against each other in the design. */
.elementor .mob-e-section { --widgets-spacing: 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px; }

/* 7. The 404 page (404.php) prints straight into Astra's .ast-container, which
      is display:flex, so our full-bleed section shrank to its content width. */
.error404 .site-content > .ast-container { display: block; max-width: none; padding: 0; margin: 0; }