/* Theme Name: The Bugmy Bar Book Author: Susan McNab Author URI: Description: A theme for the Bugmy Bar Book, high quality, accessible summaries of key research relating to various experiences which may impact people in contact with the legal system. Requires at least: 7.0 Tested up to: 7.0 Requires PHP: 8.4 Version: 0.4.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bugmybarbook Tags: full-site-editing, block-patterns, wide-blocks */ /* ============================================================================ * LIGHT-ONLY COLOUR SCHEME * Without this, a phone in Dark Mode resolves the UA `buttontext`/`fieldtext` * system colours to WHITE while every page background here stays white. Any * button that leaves its colour to the UA — a transparent background with a * `currentColor` border — then renders white-on-white and is invisible, which * is how the 404 page's Search button disappeared on an iPhone. The site has * no dark palette, so opting out is the honest declaration. * Desktop browsers in light mode are unaffected, which is why emulators never * reproduced it. * ========================================================================== */ :root { color-scheme: light; } /* temporary workaround for poor structure of wp separator block. This is a temporary fix until the block actually supports line thickness in core. */ .wp-block-separator { border: 6px solid #000; height: 6px; } /* Single column chapter list item hover state */ :has(.bbb_chapter.type-bbb_chapter.status-publish) li > *.titlesingle:hover { background-color: rgba(3,169,244,0.3) !important; } /* Single column Chapter Titles */ :has(.titlesingle) h5 { align-content: center !important; height: 40px !important; } /* Double column Chapter Titles */ :has(.titlehoverbackgroundcolour) h5 { min-height: 74px !important; padding:auto; } :has(.titlehoverbackgroundcolour) h5:hover { background-color: rgba(3,169,244,0.67) !important; } /* Add bullets to core wordpress query template output */ .custom-bullet-query::before { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin: 0 0.5rem 0.2rem 0; vertical-align: middle; background-color: #061F3F; border-radius: 50%; } /* Navigation state styling variables. item = any current menu item. parent = menu items that own submenus. submenu-child = current item inside submenu containers. */ :root { /* Global base for navigation items */ --bbb-nav-item-font: var(--wp--preset--font-family--open-sans, sans-serif); --bbb-nav-item-font-variant: normal; --bbb-nav-item-text: #efefef; --bbb-nav-item-bg: transparent; --bbb-nav-item-text-hover: #ffffff; --bbb-nav-item-bg-hover: #17426c; /* Parent current navigation items */ --bbb-nav-parent-font-variant: uppercase; --bbb-nav-parent-text: #28b6f8; --bbb-nav-parent-bg: transparent; --bbb-nav-parent-text-hover: #ffffff; --bbb-nav-parent-bg-hover: rgba(40, 182, 248, 0.12); /* Submenu child navigation items */ --bbb-nav-submenu-child-text: #0b1f33; --bbb-nav-submenu-child-bg: #28b6f8; --bbb-nav-submenu-child-text-hover: #0b1f33; --bbb-nav-submenu-child-bg-hover: #28b6f8; --bbb-nav-state-radius: 0; --bbb-nav-state-padding-inline: 0.5rem; --bbb-nav-state-padding-block: 0.25rem; --bbb-nav-state-border: none; } /* Base item behavior for all non-current parent menu items. */ .wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle { text-transform: var(--bbb-nav-item-font-variant); color: var(--bbb-nav-item-text); background-color: var(--bbb-nav-item-bg); border-radius: var(--bbb-nav-state-radius); padding-inline: var(--bbb-nav-state-padding-inline); padding-block: var(--bbb-nav-state-padding-block); border: var(--bbb-nav-state-border) !important; } /* Base item hover behavior for all non-current child menu items. */ .wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle:hover { color: var(--bbb-nav-item-text-hover); background-color: var(--bbb-nav-item-bg-hover); } /* Base current-item behavior for all current parent and child menu items. */ .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-submenu__toggle, .wp-block-navigation .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item.current_page_item > .wp-block-navigation-submenu__toggle, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-child > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-child > .wp-block-navigation-submenu__toggle, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-parent > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-parent > .wp-block-navigation-submenu__toggle { text-transform: var(--bbb-nav-item-font-variant); color: var(--bbb-nav-item-text) !important; background-color: var(--bbb-nav-item-bg) !important; border-radius: var(--bbb-nav-state-radius); padding-inline: var(--bbb-nav-state-padding-inline); padding-block: var(--bbb-nav-state-padding-block); border: var(--bbb-nav-state-border); } .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-submenu__toggle:hover, .wp-block-navigation .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.current_page_item > .wp-block-navigation-submenu__toggle:hover, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-child > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-child > .wp-block-navigation-submenu__toggle:hover, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-parent > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-parent > .wp-block-navigation-submenu__toggle:hover { color: var(--bbb-nav-item-text-hover) !important; background-color: var(--bbb-nav-item-bg-hover) !important; } /* Submenu-capable parent menu item behavior. */ .wp-block-navigation .wp-block-navigation-item.has-child.current-menu-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item.has-child.current-menu-item > .wp-block-navigation-submenu__toggle, .wp-block-navigation .wp-block-navigation-item.has-child.current_page_item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item.has-child.current_page_item > .wp-block-navigation-submenu__toggle, .wp-block-navigation .wp-block-navigation-item.has-child.current-menu-parent > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item.has-child.current-menu-parent > .wp-block-navigation-submenu__toggle, .wp-block-navigation .wp-block-navigation-item.has-child.current-menu-ancestor > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item.has-child.current-menu-ancestor > .wp-block-navigation-submenu__toggle, .wp-block-navigation .wp-block-navigation-item.has-child.current-page-parent > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item.has-child.current-page-parent > .wp-block-navigation-submenu__toggle, .wp-block-navigation .wp-block-navigation-item.has-child.current-page-ancestor > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item.has-child.current-page-ancestor > .wp-block-navigation-submenu__toggle, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-parent > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-parent > .wp-block-navigation-submenu__toggle, .wp-block-navigation .wp-block-navigation-item.bbb-nav-has-current-child > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item.bbb-nav-has-current-child > .wp-block-navigation-submenu__toggle { color: var(--bbb-nav-parent-text) !important; background-color: var(--bbb-nav-parent-bg) !important; } .wp-block-navigation .wp-block-navigation-item.has-child.current-menu-item > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.has-child.current-menu-item > .wp-block-navigation-submenu__toggle:hover, .wp-block-navigation .wp-block-navigation-item.has-child.current_page_item > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.has-child.current_page_item > .wp-block-navigation-submenu__toggle:hover, .wp-block-navigation .wp-block-navigation-item.has-child.current-menu-parent > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.has-child.current-menu-parent > .wp-block-navigation-submenu__toggle:hover, .wp-block-navigation .wp-block-navigation-item.has-child.current-menu-ancestor > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.has-child.current-menu-ancestor > .wp-block-navigation-submenu__toggle:hover, .wp-block-navigation .wp-block-navigation-item.has-child.current-page-parent > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.has-child.current-page-parent > .wp-block-navigation-submenu__toggle:hover, .wp-block-navigation .wp-block-navigation-item.has-child.current-page-ancestor > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.has-child.current-page-ancestor > .wp-block-navigation-submenu__toggle:hover, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-parent > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-parent > .wp-block-navigation-submenu__toggle:hover, .wp-block-navigation .wp-block-navigation-item.bbb-nav-has-current-child > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item.bbb-nav-has-current-child > .wp-block-navigation-submenu__toggle:hover { color: var(--bbb-nav-parent-text-hover) !important; background-color: var(--bbb-nav-parent-bg-hover) !important; } /* Current submenu-child item behavior. */ .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-submenu__toggle, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.current_page_item > .wp-block-navigation-submenu__toggle, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.bbb-nav-current-child > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.bbb-nav-current-child > .wp-block-navigation-submenu__toggle { color: var(--bbb-nav-submenu-child-text) !important; background-color: var(--bbb-nav-submenu-child-bg) !important; border: var(--bbb-nav-state-border) !important; } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-submenu__toggle:hover, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.current_page_item > .wp-block-navigation-submenu__toggle:hover, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.bbb-nav-current-child > .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.bbb-nav-current-child > .wp-block-navigation-submenu__toggle:hover { color: var(--bbb-nav-submenu-child-text-hover) !important; background-color: var(--bbb-nav-submenu-child-bg-hover) !important; } /* Keep label text aligned with content colors. */ .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.current_page_item > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.current-page-parent > .wp-block-navigation-item__content .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.current-page-parent > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.current-page-ancestor > .wp-block-navigation-item__content .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.current-page-ancestor > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-parent > .wp-block-navigation-item__content .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-parent > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.bbb-nav-has-current-child > .wp-block-navigation-item__content .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.bbb-nav-has-current-child > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-child > .wp-block-navigation-item__content .wp-block-navigation-item__label, .wp-block-navigation .wp-block-navigation-item.bbb-nav-current-child > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label { color: inherit !important; } /* highlight custom mark style in search results for standard users */ h3 > a > mark { background-color: #e4f3ff !important; color: #0c2d4e; border-radius: 3px; padding: 0.3rem 0; font-weight: 700; } p > mark, a > mark, li > mark, span > mark { background-color: #e4f3ff !important; color: #0c2d4e; border-radius: 3px; padding: 0.3rem 0; font-weight: 600; } /* Revert match highligter to user's system choices if an accessibility mode is active */ @media (forced-colors: active) { h3 > a > mark, p > mark, a > mark, li > mark, span > mark { background-color: Mark; color: MarkText; } } /* ============================================================================ * MOBILE GUTTER * theme.json sets root padding to 0, which is correct for the 1200px desktop * measure but leaves body text and card borders flush against both screen * edges on a phone. Reinstating the custom properties below the breakpoint is * enough: core's `.has-global-padding` consumes them, and the matching * negative margin on `.alignfull` children keeps full-bleed blocks full-bleed. * `html body` outbids core's `body` rule regardless of stylesheet order. * ========================================================================== */ @media (max-width: 781px) { html body { --wp--style--root--padding-left: 1rem; --wp--style--root--padding-right: 1rem; } } /* ============================================================================ * HEADER LOGO * The image block pins itself to a 242px flex-basis, which on a 390px screen * left the header 152px tall and the menu only 87px wide. Scale it with the * viewport instead. 28vw reaches 242px at 864px, so every width at or above * that renders exactly as before. * Specificity beats the generated `.wp-container-content-*` flex-basis rule. * ========================================================================== */ .site-header > figure.wp-block-image { flex: 0 1 auto; width: clamp(120px, 28vw, 190px); } .site-header > figure.wp-block-image img { max-width: 100%; min-width: 120px; height: auto; } /* Below the overlay breakpoint the nav collapses to a toggle, so the figure is * no longer flex-shrunk and snaps back to the full 190px. Continue the taper on * a smaller range instead. `:has(.is-overlay)` tracks the site-navigation * block's `overlayBreakpoint` attribute, which view.js applies as a class — * there is no media query at that width to hook. The 782px query is the no-JS * fallback matching the breakpoint the block stylesheet hard-codes. * The img `min-width` must come down too or it floors the figure at 120px. */ .site-header:has(.bbb-nav.is-overlay) > figure.wp-block-image { width: clamp(120px, 16vw, 150px); } .site-header:has(.bbb-nav.is-overlay) > figure.wp-block-image img { min-width: 120px; } @media (max-width: 782px) { .site-header > figure.wp-block-image { width: clamp(120px, 16vw, 150px); } .site-header > figure.wp-block-image img { min-width: 120px; } } /* ============================================================================ * TOUCH TARGETS (WCAG 2.2 SC 2.5.8 — 24x24 CSS px minimum) * Mobile layout and touch pointers only, so desktop rendering is unchanged. * ========================================================================== */ @media (max-width: 781px), (pointer: coarse) { .bbb-breadcrumbs__link, .bbb-breadcrumbs__current { min-block-size: 24px; } } /* ============================================================================ * PUBLISHED JUDGMENTS PAGE * Custom styling for the published judgments page query loop only. * ========================================================================== */ ul > li.wp-block-post.bbb_judgment.type-bbb_judgment > div > div.wp-block-group > div > ul > li { margin: 0 0 1rem 0; list-style-type: disc; } ul > li.wp-block-post.bbb_judgment.type-bbb_judgment > div > div.wp-block-group { margin: 0; } ul > li.wp-block-post.bbb_judgment.type-bbb_judgment > div > div.wp-block-group > div > blockquote { margin: 0 2rem 0 4rem; border-left-color: var(--wp--preset--color--accent); border-left-width: 2px; border-left-style: solid; background-color: #f9f9f9; } ul > li.wp-block-post.bbb_judgment.type-bbb_judgment > div > div.wp-block-group > div > blockquote { margin: 0 2rem 0 3rem; border-left-color: var(--wp--preset--color--accent); border-left-width: 2px; border-left-style: solid; } /* Target tablets/intermediate screens */ @media (max-width: 1080px) and (min-width: 300px) { /* Replace .published-judgments-grid with a class assigned to main Grid block */ .published-judgments-grid { /* Redefine the template to ignore the default 10rem restriction */ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ============================================================================ * JUDGMENTS ACCORDION * Custom styling for the judgments accordion only. * ========================================================================== */ #bbb-judgments > div.bbb-judgments-accordion__results > div > details > div > div > ul > li { margin: 0 0 1rem 0; } /* #bbb-judgments > div.bbb-judgments-accordion__results > div > details > div > div > blockquote { margin: 0 2rem 0 2rem; border-left-style: none; } */ #bbb-judgments > div.bbb-judgments-accordion__results > div > details > div > div > blockquote { margin: 0 2rem 0 2rem; border-left-style: none; } #bbb-judgments > div.bbb-judgments-accordion__results > div > details > div > div > blockquote > p { margin: 0 0 0.6rem 0; } /* double indent */ #bbb-judgments > div.bbb-judgments-accordion__results > div > details > div > div > blockquote > blockquote { margin: 0; border-left-style: none; } #bbb-judgments > div.bbb-judgments-accordion__results > div > details > div > div > blockquote > blockquote > p { margin: -1rem 0 0.6rem 2rem; } /* ============================================================================ * FOOTER * Custom styling for footer elements. Includes subscription form. * ========================================================================== */ form > div > label { color: #d2d8dd; }