/* ========================================================================== Astra theme overrides — THE ONLY FILE ALLOWED TO TARGET ASTRA CLASSES Everything here touches .ast-*, .site-*, .entry-* or Astra's menu markup. Keeping it isolated means that when a rule fights the theme, there is exactly one file to look in. Because the child stylesheet is enqueued AFTER the parent, most of these need no !important. Where one is genuinely required (Astra ships an inline dynamic style block with high specificity), it is commented with why. ========================================================================== */ /* --- Content width release --------------------------------------------- Old CSS did this with `body.page-id-73` and 12 !important declarations. Now it is a body class added by functions.php whenever the template opts in, so it works for every review/compare page without editing CSS. ------------------------------------------------------------------------ */ .bma-fullwidth .site-content .ast-container { max-width: 100%; padding-inline: 0; } .bma-fullwidth #primary, .bma-fullwidth .content-area, .bma-fullwidth .entry-content { max-width: none; width: 100%; margin: 0; padding-inline: 0; background: transparent; } .bma-fullwidth .site-content, .bma-fullwidth #page { background: var(--bma-cream); } /* Gutenberg wraps Custom HTML in .wp-block-html; let our own bleed classes through it rather than forcing every block full width. */ .bma-fullwidth .entry-content > .wp-block-html { padding: 0; } /* NOTE: an earlier version hid .entry-header here. That was wrong for Phase 1, which must be a visual no-op — it silently removed the post title and byline from every review. The duplicate title is still worth addressing (the hero already carries its own heading, so the page renders two), but hiding an H1 with display:none is the wrong fix: it keeps the heading in the DOM where Google discounts it, and removes the byline, which is an E-E-A-T signal on review content. Decide it properly in Phase 2 — most likely by removing the duplicate from the hero markup rather than hiding the theme's real title. */ /* --- Desktop header menu ------------------------------------------------ */ .ast-header-menu > .menu-item > a { color: rgba(255, 255, 255, 0.85); } .ast-header-menu > .menu-item > a:hover { color: #fff; } .ast-desktop .main-header-menu .sub-menu .menu-item > .menu-link, .ast-header-menu .sub-menu .menu-item > a, .ast-desktop .ast-mega-menu-enabled .sub-menu .menu-item > .menu-link { color: var(--bma-navy); background: var(--bma-white); } .ast-desktop .main-header-menu .sub-menu .menu-item:hover > .menu-link, .ast-header-menu .sub-menu .menu-item:hover > a { color: var(--bma-gold); background: #F5EFE0; } /* --- Mobile mega menu grid — REMOVED ----------------------------------- The two-column button grid lived here. The mobile menu now drills down one level at a time (see below), so a grid of buttons inside an accordion has nothing left to do. A copy of these rules also sits in legacy-additional.css with !important on every property, and that file loads last. It only bites while a menu item still carries the `mega-grid-menu` CSS class — remove the class in Appearance → Menus and the old grid stops applying anywhere. ------------------------------------------------------------------------ */ /* --- Menu --------------------------------------------------------------- Fed by inc/menu.php: the score comes from data/scores.json and the accent colour from a small inline block, so the menu cannot drift from the pages it links to. Desktop and mobile want different shapes from the same menu. Desktop is fine as a flat bar — Reviews, Guides, Comparisons, Deals, Quiz — and the "Mattresses" wrapper only pushed every dropdown a level deeper until the third-level flyouts ran off the right of the screen. Mobile is the opposite: 43 items need grouping. So the wrapper exists in the menu and is dissolved on desktop. ------------------------------------------------------------------------ */ .bma-menu-icon { flex-shrink: 0; margin-right: 11px; color: var(--bma-gold); vertical-align: -3px; } /* * On the navy header bar the icons need the lighter gold — #B8860B against * #1B2A4A is close enough in value to read as muddy brown, which is why they * looked wrong on desktop and right on the white mobile drawer. * --bma-gold-light exists in tokens.css for exactly this: gold on dark. */ .ast-header-menu > .menu-item > .menu-link .bma-menu-icon, .ast-header-menu > .menu-item > a .bma-menu-icon, .main-header-menu > .menu-item > .menu-link .bma-menu-icon { color: var(--bma-gold-light); } /* Inside a dropdown the background is white again, so the darker gold returns. */ .sub-menu .bma-menu-icon { color: var(--bma-gold); } .bma-menu-score { margin-left: auto; padding-left: 8px; font-size: 11.5px; font-weight: var(--bma-w-body-med); color: #8A8375; font-variant-numeric: tabular-nums; } /* ----- Desktop --------------------------------------------------------- The "#" groups are removed in inc/menu.php before Astra renders this menu, so the bar is flat and every dropdown behaves as it always has. The display:contents version that used to live here made the whole menu invisible — see the note in menu.php. ------------------------------------------------------------------------ */ @media (min-width: 992px) { /* * A dropdown was reading as one solid block of text. These give each row an * edge to sit on: a hairline between rows, the brand's own colour down the * left of a review row, and the score set apart from the name. */ /* * !important throughout. Astra ships a dynamic style block in the head that * sets borders on submenu links with enough specificity to win, which is why * the first attempt drew no lines at all — every dropdown still read as one * unbroken block of text. */ .ast-desktop .main-header-menu .sub-menu > li > .menu-link, .ast-header-menu .sub-menu > li > a { display: flex !important; align-items: center; gap: 10px; border-bottom: 1px solid #E5DDD0 !important; border-left: 3px solid transparent !important; } .ast-desktop .main-header-menu .sub-menu > li:last-child > .menu-link, .ast-header-menu .sub-menu > li:last-child > a { border-bottom: 0 !important; } .ast-desktop .main-header-menu .sub-menu > li.bma-menu-brand > .menu-link, .ast-header-menu .sub-menu > li.bma-menu-brand > a { border-left-color: var(--bma-menu-accent, transparent) !important; } /* A flyout is a level of its own, so it gets a rule of its own to sit against rather than blending into the panel that opened it. */ .ast-desktop .main-header-menu .sub-menu .sub-menu { border-left: 2px solid var(--bma-gold); } /* * The Reviews dropdown goes two-up. Twelve brands in a single column runs * past the bottom of the viewport, so the last few are unreachable without * scrolling a menu that closes when the pointer leaves it. * * :has() rather than a class, because the class would have to go on the