/*
 * Dynamic Spine Sport - Blocksy child theme stylesheet.
 * Loaded after Blocksy's main styles (see inc/assets.php).
 *
 * Source of every value: the saved Betheme options (option `betheme`), its
 * Additional CSS (custom_css post #39) and be.css, as recorded in docs/. Betheme
 * rules that styled Betheme-only markup (#Top_bar, #Subheader, #Footer,
 * #Action_bar, .section_wrapper, Complianz overrides, per-widget #block-NN rules
 * that had no markup, .header-bottom and .billing-phone-top which no content
 * uses) are NOT copied: they are replaced by the Blocksy equivalents below or
 * were dead (docs/reuse-map.md).
 *
 * Nothing here has been compared in a browser. Every value marked "check" in
 * docs/migration-status.md is an estimate from the Betheme code and needs a
 * visual comparison with the live site before activation.
 *
 * Global overrides (why they are needed):
 *   - html:root palette / typography variables: Blocksy reads these instead of
 *     Customizer values, so no Customizer save is needed.
 *   - "html " prefix on header and footer rules: Blocksy prints generated rules
 *     (inline, after this file) with equal selectors; the prefix outranks them
 *     without !important.
 *
 * Sections:
 *   1 Fonts            5 Header                9 Contact Form 7 / forms
 *   2 Global values    6 Title band            10 Elementor content parity
 *   3 Typography       7 Footer                11 Replacement widgets
 *   4 Containers       8 Sidebar and widgets   12 Mobile call bar
 */


/* ==========================================================================
   1. Fonts
   Betheme loaded Rubik (content, menu, headings) from Google Fonts. A local
   copy of the Latin subset (variable weight 400-700, SIL OFL) removes that
   external request. Roboto (Betheme blockquote / decorative font) is not used
   by any audited content and is not bundled.
   ========================================================================== */
@font-face {
	font-family: Rubik;
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(../fonts/rubik-latin-variable.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Betheme's own icon font (copied unchanged from betheme/fonts/mfn/icons.woff2,
   the file the live site loads). Used for the hamburger (icon-menu-fine,
   U+E960) and the button arrow (icon-right-open, U+E915). */
@font-face {
	font-family: mfn-icons;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/mfn-icons.woff2) format("woff2");
}

/* Betheme's Font Awesome Solid (betheme/fonts/fontawesome/fa-solid-900.woff2),
   own family name so it never clashes with Elementor's copy. Only the
   map-marker glyph (U+F3C5) used by the contact bar is requested. */
@font-face {
	font-family: "DSS FA Solid";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url(../fonts/fa-solid-900.woff2) format("woff2");
}


/* ==========================================================================
   2. Global values (Betheme options: color-*, background-*, font-*)
   ========================================================================== */
html:root {
	--theme-palette-color-1: #bb2c28;   /* brand red: links, active menu, buttons (color-one, color-a) */
	--theme-palette-color-2: #024c79;   /* navy: menu, action bar, footer (color-menu-a, background-footer) */
	--theme-palette-color-3: #232323;   /* body text (color-text) */
	--theme-palette-color-4: #024c79;   /* headings (color-h1 .. color-h6) */
	--theme-palette-color-5: #ebebeb;   /* borders (border-form) */
	--theme-palette-color-6: #f7f7f7;   /* title band ground (background-subheader) */
	--theme-palette-color-7: #f2f2f2;   /* submenu / hover ground */
	--theme-palette-color-8: #ffffff;   /* page background (background-body) */

	--theme-link-initial-color: #bb2c28;
	--theme-link-hover-color: #bb2c28;

	--theme-font-family: Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--theme-font-size: 16px;
	--theme-font-weight: 500;           /* Betheme font-size-content weight_style */
	--theme-line-height: 28px;

	/* Buttons: Rubik 500, 16px, 50px radius, 16px 35px padding (button-*), red
	   #bb2c28 (colour measured on the live site: Post Comment, header button and
	   the other buttons are all rgb(187,44,40); Betheme's saved orange
	   button-background is not what the site shows). Hover darkens to #ae1f1b. */
	--theme-button-font-family: Rubik, Arial, sans-serif;
	--theme-button-font-weight: 500;
	--theme-button-font-size: 16px;
	--theme-button-border-radius: 50px;
	--theme-button-padding: 16px 35px;
	--theme-button-background-initial-color: #bb2c28;
	--theme-button-background-hover-color: #ae1f1b;
	--theme-button-text-initial-color: #ffffff;
	--theme-button-text-hover-color: #ffffff;

	/* Forms (color-form, background-form, border-form). */
	--theme-form-text-initial-color: #024c79;
	--theme-form-field-background-initial-color: #f4f4f9;
	--theme-form-field-border-initial-color: #ebebeb;
	--theme-form-field-border-focus-color: #a7c4d6;
}


/* ==========================================================================
   3. Typography (Betheme font-size-h1..h6; desktop / tablet / mobile)
   Elementor widgets set their own typography and are not affected.
   ========================================================================== */
html h1 { --theme-font-size: 30px; --theme-font-weight: 500; --theme-line-height: 35px; }
html h2 { --theme-font-size: 26px; --theme-font-weight: 500; --theme-line-height: 35px; }
html h3 { --theme-font-size: 24px; --theme-font-weight: 500; --theme-line-height: 30px; }
html h4 { --theme-font-size: 22px; --theme-font-weight: 500; --theme-line-height: 30px; }
html h5 { --theme-font-size: 20px; --theme-font-weight: 500; --theme-line-height: 20px; }
html h6 { --theme-font-size: 18px; --theme-font-weight: 500; --theme-line-height: 18px; }

@media (max-width: 959.98px) {
	html h1 { --theme-font-size: 24px; }
	html h2 { --theme-font-size: 22px; }
	html h3 { --theme-font-size: 20px; }
	html h4 { --theme-font-size: 18px; }
	html h5 { --theme-font-size: 16px; }
	html h6 { --theme-font-size: 16px; }
}

@media (max-width: 767.98px) {
	html:root { --theme-font-size: 15px; }
}


/* ==========================================================================
   4. Containers and content spacing (Betheme: site width 1280px)
   ========================================================================== */
html:root {
	--theme-normal-container-max-width: 1280px;
	--theme-content-vertical-spacing: 30px;
}

@media (max-width: 1391.98px) {
	html:root { --theme-container-edge-spacing: calc(100vw - 112px); }
}

/* Betheme's Additional CSS: phones keep a 7px gutter. */
@media (max-width: 767.98px) {
	html:root { --theme-container-edge-spacing: calc(100vw - 14px); }
}

/* Pages with Betheme's "remove padding" (mfn-post-remove-padding = 1) are
   Elementor pages that manage their own spacing. Class set in inc/layout.php. */
.dss-flush [data-vertical-spacing] {
	padding-top: 0;
	padding-bottom: 0;
}

/* Blocksy pads the top of the content area. On a page that shows the title
   band the band belongs directly under the header, as Betheme's Subheader did. */
html :is(.ct-container, .ct-container-full)[data-vertical-spacing*="top"]:has(> article > .hero-section[data-type="type-1"], > section > .hero-section[data-type="type-1"]) {
	padding-top: 0;
}


/* ==========================================================================
   5. Header (Betheme classic header with action bar)
   ========================================================================== */

/* 5a. Contact action bar (markup: inc/header.php). Measured on the live site at
   1920px: 46px high, navy, 14px white text; phone 1 sits between two thin
   dividers (Additional CSS "li.phone.phone-1 { border-left / border-right }"),
   phone 2 follows with 10px margin and no divider, the locations link sits at
   the right, about 45px from the container edge (be.css "#Action_bar .column
   { padding: 0 20px }" + li margin). Hidden below 768px (mini header). It
   scrolls away with the page. */
.dss-action-bar {
	background: #024c79;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
}

.dss-action-bar a {
	color: #fff;
	text-decoration: none;
}

.dss-action-bar a:hover,
.dss-action-bar a:focus-visible { text-decoration: underline; }

.dss-action-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	min-height: 46px;
}

.dss-action-bar__phones,
.dss-action-bar__phones li,
.dss-action-bar__location {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dss-action-bar__phones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.dss-action-bar__phones li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-inline-end: 10px;
	padding: 12px 0;
}

.dss-action-bar__phones li:first-child {
	padding-inline: 2px 15px;
	border-inline: 1px solid rgba(255, 255, 255, .28);
}

.dss-action-bar__location {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding-inline-end: 45px;
}

/* Glyphs: Betheme icon-phone (mfn-icons U+E8F4) and the Font Awesome
   map-marker (U+F3C5) the Additional CSS put before "See All Locations". */
.dss-action-bar .dss-icon { display: inline-block; line-height: 1; }

.dss-icon--phone::before {
	content: "\e8f4";
	font-family: mfn-icons;
	font-weight: 400;
}

.dss-icon--pin::before {
	content: "3c5";
	font-family: "DSS FA Solid";
	font-weight: 900;
}

@media (max-width: 767.98px) {
	.dss-action-bar { display: none; }
}

/* 5b. Main bar and sticky behaviour.
   Source (read from the Betheme files, not from screenshots):
   - normal bar: logo box 60px (include-logo.php / style.php default
     logo-height) + saved logo-vertical-padding 30px twice = 120px;
   - sticky (js/scripts.js mfnSticky): when the page is scrolled past the whole
     header (action bar + top bar), the top bar becomes position: fixed, 60px
     high, and slides down from -60px to the admin-bar offset in 300ms. A
     placeholder keeps the old height, so nothing jumps. It is NOT a bar that
     shrinks in place at the first pixel of scroll (the earlier implementation).
   - sticky look (style-responsive.php .is-sticky): white at 97 percent, shadow
     0 2px 5px rgba(0,0,0,.1), sticky logo: measured on the live site (screenshot, ~132px wide = 60px tall), not the 35px of the stylesheet.
   Blocksy's own sticky engine lives in the Companion plugin, which this project
   does not contain (the parent theme only reads its settings), so it is not
   available. One mechanism is used here: assets/js/header-state.js sets
   body.dss-stuck once the header has scrolled out; this CSS then fixes the
   visible [data-device] block. #header itself stays in the flow with its normal
   height (the placeholder), so there is no layout shift. */
#header.ct-header {
	position: relative;
	z-index: 99;
	min-height: var(--header-height);
}

html [data-header*="type-1"] { --header-height: 120px; }

html [data-header*="type-1"] .ct-header [data-row*="middle"] {
	--height: 120px;
	background-color: #fff;
}

body.dss-stuck #header.ct-header [data-device] {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	z-index: 99;
	width: 100%;
	animation: dss-sticky-in .3s ease-out;
}

@keyframes dss-sticky-in {
	from { transform: translateY(-70px); }
	to { transform: none; }
}

html body.dss-stuck[data-header*="type-1"] .ct-header [data-row*="middle"] > div {
	height: 70px;
	min-height: 70px;
	max-height: 70px;
}

html body.dss-stuck[data-header*="type-1"] .ct-header [data-row*="middle"] {
	--height: 70px;   /* sticky bar: 70px on desktop and phones (requested) */
	background-color: rgba(255, 255, 255, .97);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
}

html body.dss-stuck[data-header*="type-1"] .ct-header [data-id="logo"],
html body.dss-stuck[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
	--logo-max-height: 60px;
}

/* WordPress's admin bar scrolls away below 601px. */
@media (max-width: 600px) {
	body.dss-stuck.admin-bar #header.ct-header [data-device] { top: 0; }
}

/* Anchors and focus targets clear the 60px sticky bar. */
html { scroll-padding-top: calc(80px + var(--wp-admin--admin-bar--height, 0px)); }

/* Phones: Betheme mini header. Logo 50px tall with 5px above and below (60px
   bar) in both states, 15px from the left; sticky logo 50px. */
@media (max-width: 767.98px) {
	html [data-header*="type-1"] { --header-height: 60px; }
	html [data-header*="type-1"] .ct-header [data-row*="middle"] { --height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
	body.dss-stuck #header.ct-header [data-device] { animation: none; }
}

/* 5b2. Mobile navigation from 1240px down, as in Betheme (option
   mobile-menu-initial = 1240). Blocksy switches at 1000px, and the full menu
   plus the button needs about 1100px, so between 1000px and 1239px the desktop
   bar would overflow. Show Blocksy's own mobile header and panel content for
   that range. */
@media (min-width: 1000px) and (max-width: 1239.98px) {
	#header [data-device="desktop"],
	#offcanvas [data-device="desktop"] { display: none; }

	#header [data-device="mobile"],
	#offcanvas [data-device="mobile"] { display: block; }
}

/* 5c. Logo: image only, 60px high (Betheme logo-height default). */
html [data-header*="type-1"] .ct-header [data-id="logo"],
html [data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
	--logo-max-height: 60px;
}

html [data-header*="type-1"] .ct-header [data-id="logo"] .site-title-container {
	display: none;
}

/* The menu follows the logo (live site: 30px gap, Betheme ".logo { margin: 0 30px
   0 20px }" with the "no margin" logo option), the button alone sits at the
   right. */
html [data-header*="type-1"] .ct-header [data-column="start"] [data-id="logo"] {
	flex: 0 0 auto;
	width: auto;
	margin-inline-end: 25px;   /* + the menu item's own 15px = 40px from logo to first menu text */
}

/* The logo box is exactly as large as the logo image. */
html [data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
	display: inline-flex;
	width: auto;
	max-width: none;
}

html [data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container img {
	width: auto;
	max-width: none;
}

/* Desktop row layout independent of where the items were placed in the header
   builder (a header saved in the Customizer keeps its own placement): logo and
   menu together on the left, the button pushed to the right edge. */
html [data-header*="type-1"] .ct-header [data-device="desktop"] [data-row*="middle"] > .ct-container {
	display: flex;
	align-items: center;
}

html [data-header*="type-1"] .ct-header [data-device="desktop"] [data-column="start"] { flex: 0 0 auto; }

html [data-header*="type-1"] .ct-header [data-device="desktop"] [data-column="end"] {
	flex: 1 1 auto;
	justify-content: flex-start;
}

html [data-header*="type-1"] .ct-header [data-device="desktop"] [data-column="end"] [data-items] {
	flex: 1 1 auto;
	justify-content: flex-start;
}

html [data-header*="type-1"] .ct-header [data-device="desktop"] [data-id="button"] { margin-inline-start: auto; }

/* Phones: 50px logo, 15px from the left, same in the sticky state (declared
   after the desktop logo rules so it wins at equal specificity). */
@media (max-width: 767.98px) {
	html [data-header*="type-1"] .ct-header [data-id="logo"],
	html [data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container,
	html body.dss-stuck[data-header*="type-1"] .ct-header [data-id="logo"],
	html body.dss-stuck[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container { --logo-max-height: 50px; }

	html [data-header*="type-1"] .ct-header [data-id="logo"] { margin-inline-start: 15px; }
}

/* 5d. Menu: Rubik 16px / 500, navy, active red; dropdown dark red (#670b0b at
   97 percent), 350px wide, white text, divider rgba(255,255,255,.18), hover red.
   (Additional CSS: "#Top_bar .menu li ul"). Item padding 0 15px. */
html [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
	--theme-font-weight: 500;
	--theme-text-transform: none;
	--theme-font-size: 16px;
	--theme-line-height: 1.3;
	--theme-link-initial-color: #024c79;
	--theme-link-hover-color: #bb2c28;
	--menu-item-padding: 0 15px;
}

/* Dropdown indicators. Blocksy's SVG chevron is replaced everywhere by one custom
   indicator, so no item shows two arrows:
   - first level: Betheme's 5px CSS triangle (be.css ".menuo-arrows ... a:after",
     colour #024c79 from the Additional CSS);
   - levels two and three: one small right-pointing chevron (Betheme glyph
     icon-right-open) at the right edge, 7px in, white at about 70 percent (Betheme
     ".menu-arrow", Additional CSS). */
html [data-header*="type-1"] .ct-header [data-id="menu"] .ct-toggle-dropdown-desktop svg { display: none; }

html [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a > .ct-toggle-dropdown-desktop::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 5px solid #024c79;
	border-inline: 5px solid transparent;
	opacity: .6;
}

html [data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-menu-link {
	position: relative;
	padding-inline-end: 32px;
}

html [data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-toggle-dropdown-desktop {
	position: absolute;
	inset-inline-end: 7px;
	top: 50%;
	margin: 0;
	transform: translateY(-50%);
}

html [data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-toggle-dropdown-desktop::after {
	content: "\e915";
	display: block;
	font-family: mfn-icons;
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	color: rgba(255, 255, 255, .7);
}

html [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li[class*="current-menu-"] > a {
	--theme-link-initial-color: #bb2c28;
}

@media (min-width: 1240px) and (max-width: 1350px) {
	html [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a { --menu-item-padding: 0 11px; }
}

html [data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu {
	--dropdown-width: 350px;
	--dropdown-divider: 1px solid rgba(255, 255, 255, .18);
	--theme-box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
	--theme-border-radius: 0;
	background-color: rgba(103, 11, 11, .97);
}

html [data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-menu-link {
	--theme-link-initial-color: #fff;
	--theme-link-hover-color: #fff;
	--theme-font-weight: 500;
	--theme-font-size: 16px;
	padding: 10px 20px;
}

html [data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu li:hover > .ct-menu-link,
html [data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-menu-link:hover,
html [data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-menu-link:focus-visible {
	background: #bb2c28;
	color: #fff;
	outline: none;
}

html [data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .menu-item {
	border-top: 0;
	border-bottom: var(--dropdown-divider);
}

html [data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu > .menu-item:last-child {
	border-bottom: 0;
}

/* 5e. Header button (Betheme .action_button + Additional CSS "a.action_button
   { padding: 15px 20px !important }" and "...top-bar-right-button { background:
   #bb2c28; font-weight: bold }"): red pill, 15px 20px, bold, followed by the
   Betheme icon-right-open arrow (10px gap, option button-gap). Measured on the
   live site: about 225px x 48px. Ends 20px before the container edge. */
html [data-header*="type-1"] .ct-header [data-id="button"] {
	--theme-button-background-initial-color: #bb2c28;
	--theme-button-background-hover-color: #ae1f1b;
	--theme-button-text-initial-color: #fff;
	--theme-button-text-hover-color: #fff;
	--theme-button-border-radius: 50px;
	--theme-button-padding: 15px 20px;
	--theme-button-min-height: 48px;   /* 48px high (requested), also while sticky */
	--theme-button-font-size: 16px;
	--theme-button-font-weight: 700;
	margin-inline-end: 20px;
}

html [data-header*="type-1"] .ct-header [data-id="button"] .ct-button {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 48px;
	min-height: 48px;
	padding-block: 0;
}

html [data-header*="type-1"] .ct-header [data-id="button"] .ct-button::after {
	content: "\e915";
	margin-inline-start: 10px;
	font-family: mfn-icons;
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
}

/* 5f. Mobile / tablet menu panel (Betheme side-slide: ground #191919,
   links #a6a6a6, hover #fff. Markup and opening behaviour are Blocksy's. */
html [data-header*="type-1"] #offcanvas {
	--side-panel-width: min(480px, 80vw);
}

/* Phones: the panel opens to 80 percent of the screen width (requested; Betheme's
   saved 250px was too narrow against the live site). Tablets: 80 percent up to
   480px. */
@media (max-width: 767.98px) {
	html [data-header*="type-1"] #offcanvas { --side-panel-width: 80vw; }
}

/* Hamburger: Betheme "#Top_bar a.responsive-menu-toggle": 34px box, glyph
   icon-menu-fine (mfn-icons U+E960) at 22px, colour color-menu-responsive-icon
   #bb2c28, 10px from the edge. Blocksy's SVG is replaced by the same glyph. */
html [data-header*="type-1"] .ct-header .ct-header-trigger[data-id="trigger"] {
	--theme-icon-color: #bb2c28;
	width: 34px;
	height: 34px;
	margin-inline-end: 3px;
	padding: 0;
	background: none;
	color: #bb2c28;
}

html [data-header*="type-1"] .ct-header .ct-header-trigger[data-id="trigger"] .ct-icon { display: none; }

html [data-header*="type-1"] .ct-header .ct-header-trigger[data-id="trigger"]::before {
	content: "\e960";
	display: block;
	width: 34px;
	height: 34px;
	font-family: mfn-icons;
	font-size: 22px;
	font-weight: 400;
	line-height: 34px;
	text-align: center;
}

html [data-header*="type-1"] #offcanvas .ct-panel-inner {
	background-color: #191919;
}

html [data-header*="type-1"] [data-id="mobile-menu"] {
	--theme-font-size: 16px;
	--theme-font-weight: 500;
	--theme-line-height: 20px;
	--theme-text-transform: none;
	--theme-link-initial-color: #a6a6a6;
	--theme-link-hover-color: #fff;
	--mobile-menu-divider: 1px solid rgba(255, 255, 255, .08);
}

/* No list markers at any level; Blocksy's "dots" before nested links
   (data-submenu-dots) are the bullets, so they are switched off too. */
#offcanvas .mobile-menu ul,
#offcanvas .mobile-menu li {
	margin: 0;
	list-style: none;
}

#offcanvas .mobile-menu li::marker { content: none; }

#offcanvas .mobile-menu [class*="children"] > ul {
	padding-inline-start: 0;
	background: rgba(255, 255, 255, .03);
}

#offcanvas .mobile-menu li a:not(:empty)::before { content: none; }

#offcanvas .mobile-menu .ct-menu-link {
	padding: 11px 5px 10px 20px;
	text-align: start;
	justify-content: flex-start;
}

#offcanvas .mobile-menu .sub-menu .ct-menu-link { padding-inline-start: 32px; }
#offcanvas .mobile-menu .sub-menu .sub-menu .ct-menu-link { padding-inline-start: 44px; }

/* Dropdown toggles: Blocksy's SVG is replaced by one custom chevron (Betheme
   glyph icon-down-dir) that turns upside down when the item is open. */
#offcanvas .mobile-menu .ct-toggle-dropdown-mobile svg { display: none; }

#offcanvas .mobile-menu .ct-toggle-dropdown-mobile::before {
	content: "\e866";
	display: block;
	font-family: mfn-icons;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	transition: transform .2s ease;
}

#offcanvas .mobile-menu .dropdown-active > .ct-sub-menu-parent > .ct-toggle-dropdown-mobile::before { transform: rotate(180deg); }

#offcanvas .mobile-menu .ct-toggle-dropdown-mobile {
	--toggle-button-size: 40px;
	--toggle-button-margin-end: 5px;
	flex: 0 0 40px;
	opacity: .6;
}

#offcanvas .mobile-menu .dropdown-active > .ct-sub-menu-parent > .ct-toggle-dropdown-mobile { opacity: 1; }

#offcanvas .mobile-menu .ct-sub-menu-parent { column-gap: 0; }

#offcanvas .mobile-menu li[class*="current-menu-"] > .ct-sub-menu-parent > .ct-menu-link,
#offcanvas .mobile-menu li[class*="current-menu-"] > .ct-menu-link {
	color: #fff;
}

#offcanvas .mobile-menu a:focus-visible,
#offcanvas .mobile-menu button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

/* Button at the top of the panel (inc/header.php; Betheme "action button" in
   the side panel). */
.dss-panel-cta {
	align-self: stretch;
	box-sizing: border-box;
	width: 100%;
	padding: 20px 20px 4px;
}

#offcanvas .dss-panel-cta__button {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 14px 20px;
	border-radius: 50px;
	background: #bb2c28;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}

#offcanvas .dss-panel-cta__button:hover,
#offcanvas .dss-panel-cta__button:focus-visible {
	background: #ae1f1b;
	color: #fff;
}

/* Social links at the bottom of the panel: centred row, 44px tap targets. */
.dss-panel-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin: 0;
	padding: 16px 20px 24px;
	list-style: none;
}

.dss-panel-social li { margin: 0; }

.dss-panel-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #a6a6a6;
	font-size: 20px;
}

.dss-panel-social a:hover,
.dss-panel-social a:focus-visible { color: #fff; }

/* Phone gutters (Betheme Additional CSS: 7px) for the header and footer rows. */
@media (max-width: 767.98px) {
	.ct-header .ct-container,
	.ct-footer .ct-container {
		--theme-container-width: min(100%, calc(100vw - 14px));
	}
}


/* ==========================================================================
   6. Title band (Betheme Subheader, option subheader-style = both-left: the
   title and the breadcrumbs are BOTH on the left, one under the other; the
   earlier "title left, breadcrumbs right" reading was wrong). Measured on the
   live site at 1920px: band 134px high, text 324px from the left edge (the
   container edge), title 30px, colour #0a527d, 1px letter-spacing, then the
   breadcrumbs 15px lower at 16px, colour #024c79, grey chevron separators, the
   banner image (option subheader-image) behind, cover, centred.
   Which pages get it is decided in inc/hero.php.
   ========================================================================== */
.hero-section[data-type="type-1"] {
	/* full-bleed band, whatever width the parent container has */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-bottom: 0;      /* no gap under the band: the content starts right below it (requested) */
	padding: 30px 0;
	background-color: #f7f7f7;
	background-image: var(--dss-subheader-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: left;
}

.hero-section[data-type="type-1"] > .entry-header {
	display: block;
	width: var(--theme-container-width);
	max-width: var(--theme-normal-container-max-width);
	margin-inline: auto;
	padding-inline: 4px;
}

.hero-section[data-type="type-1"] .page-title {
	--theme-font-size: 30px;
	--theme-font-weight: 500;
	--theme-line-height: 35px;
	margin: 0 0 15px;
	letter-spacing: 1px;
	color: #0a527d;
	text-align: left;
}

.hero-section[data-type="type-1"] .ct-breadcrumbs {
	--theme-font-size: 16px;
	--theme-font-weight: 500;
	--theme-line-height: 24px;
	--theme-text-transform: none;
	--theme-text-color: #024c79;
	--theme-link-initial-color: #024c79;
	--theme-link-hover-color: #bb2c28;
	margin: 0;
	justify-content: flex-start;
	text-align: left;
}

/* Separator: Betheme's thin chevron glyph (icon-right-open), light grey, in place
   of Blocksy's small SVG. */
.hero-section[data-type="type-1"] .ct-breadcrumbs .ct-separator { display: none; }

.hero-section[data-type="type-1"] .ct-breadcrumbs > span:not(.last-item)::after {
	content: "\e915";
	margin-inline: 12px;
	font-family: mfn-icons;
	font-weight: 400;
	color: rgba(2, 76, 121, .35);
}

@media (max-width: 959.98px) {
	.hero-section[data-type="type-1"] .page-title { --theme-font-size: 24px; }
}

@media (max-width: 766.98px) {
	/* Betheme Additional CSS: on phones the banner keeps its natural size at the left. */
	.hero-section[data-type="type-1"] {
		background-position: left;
		background-size: auto;
	}
}


/* ==========================================================================
   7. Footer (Betheme: navy #024c79, white text). Measured on the live site
   (screenshot at 1920px): three equal columns inside a 1260px block centred on
   the 1280px container (column pitch 420px, text starts 12px in), headings at
   H3 size, body text 14px / about 25px, 40px above the widgets and 44px below,
   a hairline, then the credit line (left) and the legal links (right, ending
   about 35px from the block edge). Columns hold the existing Betheme footer
   widgets (inc/legacy-bridge.php); the legal links are menu 15.
   ========================================================================== */
.ct-footer {
	--theme-text-color: #fff;
	--theme-headings-color: #fff;
	--theme-link-initial-color: #fff;
	--theme-link-hover-color: #fff;
	--theme-normal-container-max-width: 1260px;
	color: #fff;
	font-size: 14px;
	font-weight: 400;       /* Additional CSS: "#Footer { font-weight: 400 }" */
	line-height: 25px;
}

html [data-footer*="type-1"] .ct-footer { background-color: #024c79; }

/* Main row: equal columns for however many areas are filled (up to four), no
   gap (the columns carry their own inner padding), one column on phones. */
html [data-footer] .ct-footer [data-row*="middle"] > div {
	--columns-gap: 0px;
	--container-spacing: 40px;
}

html [data-footer] .ct-footer [data-row*="middle"] [data-column] { padding-inline: 12px; }

html [data-footer] .ct-footer [data-row*="middle"] > div:has(> :nth-child(2)) {
	--grid-template-columns: repeat(2, minmax(0, 1fr));
}

html [data-footer] .ct-footer [data-row*="middle"] > div:has(> :nth-child(3)) {
	--grid-template-columns: repeat(3, minmax(0, 1fr));
}

html [data-footer] .ct-footer [data-row*="middle"] > div:has(> :nth-child(4)) {
	--grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 767.98px) {
	html [data-footer] .ct-footer [data-row*="middle"] > div,
	html [data-footer] .ct-footer [data-row*="middle"] > div:has(> :nth-child(2)),
	html [data-footer] .ct-footer [data-row*="middle"] > div:has(> :nth-child(3)),
	html [data-footer] .ct-footer [data-row*="middle"] > div:has(> :nth-child(4)) {
		--grid-template-columns: minmax(0, 1fr);
		--container-spacing: 30px;
	}

	html [data-footer] .ct-footer [data-column="ghost"] { display: none; }
}

.ct-footer .wp-block-heading,
.ct-footer .widget-title,
.ct-footer .ct-widget h3 {
	margin: 0 0 10px;
	color: #fff;
	--theme-font-size: 24px;
	--theme-line-height: 30px;
	--theme-font-weight: 500;
}

.ct-footer .ct-widget { margin: 0 0 10px; }
.ct-footer .ct-widget p { margin: 0 0 10px; }
.ct-footer .ct-widget a { text-decoration: none; }
.ct-footer .ct-widget a:hover { text-decoration: underline; }

/* Bottom bar (be.css ".footer_copy": border-top, ".one" padding-top 30px,
   margin-bottom 20px, min-height 33px; border colour = option border-copyright). */
html [data-footer*="type-1"] .ct-footer [data-row*="bottom"] {
	background-color: #024c79;
	border-top: 1px solid rgba(255, 255, 255, .78);
	--theme-text-color: #fff;
	--theme-link-initial-color: #fff;
	--theme-link-hover-color: #fff;
	color: #fff;
}

html [data-footer] .ct-footer [data-row="bottom"] > div {
	--container-spacing: 0px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	min-height: 33px;
	padding: 30px 12px 20px;
	box-sizing: border-box;
}

html [data-footer*="type-1"] .ct-footer [data-row*="bottom"] .ct-footer-copyright,
html [data-footer*="type-1"] .ct-footer [data-row*="bottom"] .ct-footer-copyright a,
html [data-footer*="type-1"] .ct-footer [data-row*="bottom"] .menu a {
	color: #fff;
	opacity: 1;
	font-size: 14px;
	font-weight: 400;
}

html [data-footer] .ct-footer [data-row="bottom"] [data-column="copyright"] {
	align-items: flex-start;
	text-align: start;
}

html [data-footer] .ct-footer [data-row="bottom"] [data-column="copyright"] p { margin: 0; }

html [data-footer] .ct-footer [data-row="bottom"] [data-column="menu"] {
	margin-inline-start: auto;
	padding-inline-end: 23px;
	align-items: flex-end;
}

html [data-footer] .ct-footer [data-row="bottom"] [data-column="menu"] .menu {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 4px 0;
	margin: 0;
}

/* Betheme ".social-menu li": 6px margin + 6px padding with a 1px divider that is
   10 percent white (practically invisible on the navy). */
html [data-footer] .ct-footer [data-row="bottom"] [data-column="menu"] .menu > li {
	margin-inline-end: 12px;
	padding-inline-end: 12px;
	border-inline-end: 1px solid rgba(255, 255, 255, .1);
}

html [data-footer] .ct-footer [data-row="bottom"] [data-column="menu"] .menu > li:last-child {
	margin-inline-end: 0;
	padding-inline-end: 0;
	border-inline-end: 0;
}

html [data-footer] .ct-footer [data-row="bottom"] [data-column="menu"] .menu a { padding: 0; }

@media (max-width: 767.98px) {
	html [data-footer] .ct-footer [data-row="bottom"] > div { justify-content: center; text-align: center; }
	html [data-footer] .ct-footer [data-row="bottom"] [data-column] { align-items: center; margin-inline: 0; padding-inline: 0; text-align: center; }
	html [data-footer] .ct-footer [data-row="bottom"] [data-column="menu"] .menu { justify-content: center; }
	html [data-footer] .ct-footer [data-row="bottom"] [data-column="menu"] .menu > li { margin-inline-end: 6px; padding-inline-end: 6px; }
}

/* Footer social icons (widget with the WordPress "Social Icons" block): white
   discs with dark glyphs (Additional CSS "#block-111"). */
.ct-footer .wp-block-social-links .wp-social-link { background-color: transparent; }

.ct-footer .wp-block-social-links svg {
	width: 30px;
	height: 30px;
	padding: 5px;
	border-radius: 50px;
	background-color: #fff;
	fill: #000;
}

html .ct-footer ul.wp-block-social-links { gap: 12px; }


/* ==========================================================================
   8. Sidebar and widgets (Betheme: right sidebar 27 percent, left border)
   Widgets are the existing "block" widgets of the Betheme sidebars
   (inc/legacy-bridge.php). Rules key on what the widget contains, not on
   widget IDs.
   ========================================================================== */
.ct-sidebar {
	border-inline-start: 1px solid #c3c3c3;
	text-align: left;
}

.ct-sidebar .ct-widget { margin-bottom: 20px; }

/* Widgets holding a Contact Form 7 form: navy-blue box, centred, full-width
   fields (Additional CSS ".sidebar-1 aside"). */
.ct-sidebar .ct-widget:has(.wpcf7) {
	padding: 15px 10px 5px;
	border-radius: 5px;
	background: #0a527d;
	color: #fff;
	text-align: center;
}

.ct-sidebar .ct-widget:has(.wpcf7) h2,
.ct-sidebar .ct-widget:has(.wpcf7) h3,
.ct-sidebar .ct-widget:has(.wpcf7) a { color: #fff; }

.ct-sidebar .ct-widget:has(.wpcf7) h2 { margin-top: 10px; }

.ct-sidebar .ct-widget:has(.wpcf7) ::placeholder { color: #024c79; opacity: 1; }

.ct-sidebar .ct-widget:has(.wpcf7) input:not([type="checkbox"]):not([type="submit"]),
.ct-sidebar .ct-widget:has(.wpcf7) select,
.ct-sidebar .ct-widget:has(.wpcf7) textarea {
	margin-bottom: 10px;
}

.ct-sidebar .ct-widget:has(.wpcf7) textarea { height: 100px; }
.ct-sidebar .ct-widget:has(.wpcf7) input[type="submit"] { width: 100%; }
.ct-sidebar .ct-widget:has(.wpcf7) .wpcf7-list-item { margin: 0; text-align: left; }
.ct-sidebar .ct-widget:has(.wpcf7) .wpcf7-list-item-label { font-size: 16px; }
.ct-sidebar .ct-widget:has(.wpcf7) .wpcf7-response-output { color: #fff !important; }

@media (max-width: 767.98px) {
	.ct-sidebar .ct-widget:has(.wpcf7) input[type="submit"] { width: auto; }
}

/* Widgets that print an Elementor template (the sidebar offer): no box padding. */
.ct-sidebar .ct-widget:has(.elementor) { padding: 0; }

/* Link lists: "Popular Services" / "Other Services" and "Latest Posts". */
.ct-sidebar .popular-services,
.ct-sidebar .popular-posts {
	margin: 0;
	padding: 0;
	background: #0a527d;
	list-style: none;
}

.ct-sidebar .popular-services li,
.ct-sidebar .popular-posts li {
	margin: 0;
	text-align: left;
}

.ct-sidebar .popular-services li:not(:last-child),
.ct-sidebar .popular-posts li:not(:last-child) { border-bottom: 1px solid #fff; }

.ct-sidebar .popular-services li a,
.ct-sidebar .popular-posts li a {
	display: block;
	padding: 12px 20px;
	color: #fff;
	text-decoration: none;
}

.ct-sidebar .wp-block-latest-posts.post-sidebar {
	margin: 0;
	padding: 0;
	background: #0a527d;
	list-style: none;
}

.ct-sidebar .wp-block-latest-posts.post-sidebar li { margin: 0; padding: 0; }

.ct-sidebar .wp-block-latest-posts.post-sidebar .wp-block-latest-posts__post-title {
	display: block;
	padding: 12px 20px;
	color: #fff;
	text-decoration: none;
}

.ct-sidebar .wp-block-latest-posts.post-sidebar li:not(:last-child) { border-bottom: 1px solid #fff; }

/* Widgets listing services as grey rows (Additional CSS "aside#block-124"). */
.ct-sidebar .ct-widget > ul[style*="margin-bottom"],
.ct-sidebar .ct-widget ul:has(> li[style*="margin-bottom:10px"]) {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.ct-sidebar .ct-widget ul:has(> li[style*="margin-bottom:10px"]) li {
	padding: 10px 5px 10px 20px;
	background: #ededed;
}

.ct-sidebar .ct-widget ul:has(> li[style*="margin-bottom:10px"]) a {
	font-size: 14px;
	text-decoration: none;
}


/* ==========================================================================
   9. Contact Form 7 and form fields
   Several Contact Form 7 forms (appointment popup, sidebar forms) were built
   with Betheme's grid classes (.column.one, .column.one-second) inside the
   form. Betheme gave those a 50 / 100 percent float grid with 10px padding;
   without it the fields would stack unstyled. Third-party iframes (GoHighLevel
   forms) cannot be styled from here.
   ========================================================================== */
.wpcf7::after {
	clear: both;
	content: "";
	display: block;
}

.wpcf7-form .column {
	float: left;
	box-sizing: border-box;
	padding: 0 10px 10px;
}

.wpcf7-form .column.one { width: 100%; }
.wpcf7-form .column.one-second { width: 50%; }

@media (max-width: 767.98px) {
	.wpcf7-form .column.one-second { width: 100%; }
}

.wpcf7-form span.wpcf7-form-control-wrap {
	display: inline-block;
	position: relative;
	width: 100%;
	margin-bottom: 3px;
}

.wpcf7-response-output { color: #000; }

/* Field skin (Betheme options color-form #024c79, background-form #f4f4f9,
   form-border-width 0, focus: background #ebe7ed with border #a7c4d6,
   placeholder #717577; be.css field padding 10px). Scoped to Contact Form 7
   and the comment form: the only form markup the theme controls. */
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wpcf7 select,
.wpcf7 textarea,
.comment-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.comment-form textarea {
	width: 100%;
	padding: 10px;
	border: 0;
	background-color: #f4f4f9;
	color: #024c79;
}

.wpcf7 ::placeholder,
.comment-form ::placeholder { color: #717577; opacity: 1; }

.wpcf7 input:not([type="submit"]):focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus,
.comment-form input:not([type="submit"]):focus,
.comment-form textarea:focus {
	outline: 2px solid #a7c4d6;
	outline-offset: 0;
	background-color: #ebe7ed;
}

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] { width: auto; margin-inline-end: 6px; }

.wpcf7 input[type="submit"] { width: auto; cursor: pointer; }

/* Contact Form 7 6.x status messages. Betheme coloured the old classes
   (.wpcf7-mail-sent-ok green #7dcc68, .wpcf7-mail-sent-ng red #fb5455, white
   text, centred, full width, 25px above); the current plugin sets the state on
   the form element instead. Same colours. */
.wpcf7 form .wpcf7-response-output {
	clear: both;
	box-sizing: border-box;
	margin: 25px 0 0;
	padding: 7px;
	border: 0;
	text-align: center;
}

.wpcf7 form.sent .wpcf7-response-output {
	background: #7dcc68;
	color: #fff;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	background: #fb5455;
	color: #fff;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 2px;
	color: #fb5455;
	font-size: 13px;
}

/* Comment form: Betheme right-aligned its submit button at 14px
   ("#respond .form-submit input[type=submit]"). */
.comment-form .form-submit { text-align: end; }
.comment-form .form-submit input[type="submit"] { font-size: 14px; }


/* ==========================================================================
   10. Elementor content parity
   Betheme gave Elementor pages its own reset and spacing, and let Elementor
   lay out its sections untouched. Blocksy's Elementor integration constrains
   every top section to the theme container, and its "stretched" exception keys
   on a class (.ct-section-stretched) that nothing adds. Only the differences
   that change layout or spacing are restored here. Nothing targets Elementor's
   generated per-page CSS; if that file is missing or stale, regenerate it
   (Elementor > Tools > Regenerate CSS & Data).
   ========================================================================== */

/* 10a. Stretched sections (full-width bands). Elementor's script sets an inline
   width and left offset to reach the viewport edges. Blocksy's max-width and auto
   margins cap that width; only the cap and the auto margins are removed. */
.ct-elementor-default-template .elementor-top-section.elementor-section-stretched:not(.ct-section-stretched):not(.elementor-sticky) {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* 10b. Pages with Betheme's "remove padding" (body.dss-flush, inc/layout.php)
   are laid out by Elementor itself: sections span the page and the boxed
   container is centred at the theme's maximum width. */
.dss-flush.ct-elementor-default-template .elementor-top-section:not(.ct-section-stretched):not(.elementor-sticky) {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.dss-flush.ct-elementor-default-template .elementor-section.elementor-section-boxed > .elementor-container {
	width: 100%;
	max-width: var(--theme-normal-container-max-width);
}

.dss-flush.ct-elementor-default-template .e-con > .e-con-inner {
	width: 100%;
}

/* 10c. Text spacing inside Elementor text-editor widgets. Betheme (be.css
   "Typography" and "list ul ol li" plus the Additional CSS): paragraphs 15px,
   bullet lists indented 20px, numbers 15px, items 10px apart. */
.elementor .elementor-widget-text-editor p,
.elementor .elementor-widget-text-editor p:last-child {
	margin-block-end: 15px;
}

.elementor .elementor-widget-text-editor ul,
.elementor .elementor-widget-text-editor ol {
	margin: 0 0 15px 30px;
	padding: 0;
}

.elementor .elementor-widget-text-editor ul {
	margin-left: 20px;
	list-style: disc outside;
}

.elementor .elementor-widget-text-editor ol {
	margin-left: 15px;
	list-style: decimal;
}

.elementor .elementor-widget-text-editor li {
	margin-bottom: 10px;
}

/* 10d. Service tabs (widget CSS class "tabserv", set on 261 Elementor tab
   widgets; Additional CSS). Rounded grey tabs with a soft shadow. */
.tabserv.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title {
	display: table-cell;
	border-radius: 10px;
	margin: 8px 8px 1px;
	box-shadow: 0 0 10px 0 #0000004d;
	background: #f3f3f3;
}

.tabserv .elementor-tabs-content-wrapper {
	border-radius: 20px;
	box-shadow: 0 0 10px 0 #0000004d;
}

.tabserv .elementor-tab-title.elementor-tab-mobile-title {
	margin-bottom: 10px;
	border-radius: 10px;
	box-shadow: 0 0 10px 0 #0000004d;
	background: #f3f3f3;
}

/* 10e. Landing / appointment page helper (HTML widget on /online-appointment/). */
@media (max-width: 600px) {
	.coming-soon { margin-top: 5px; }
}


/* ==========================================================================
   11. Replacement widgets (inc/elementor-compat-widgets.php)
   Values from Betheme be.css (.accordion, .faq, .get_in_touch, blog grid) and
   the options color-tab-title / background-getintouch.
   ========================================================================== */

/* 11a. Accordion (mfn_accordion) and FAQ (mfn_faq). */
.dss-acc { margin-bottom: 20px; }

.dss-acc__title { margin: 0 0 10px; }

.dss-acc__item {
	margin-bottom: 5px;
	border: 1px solid #ebebeb;
	border-radius: 5px;
	overflow: hidden;
	background: #fff;
}

.dss-acc__item:last-child { margin-bottom: 0; }

.dss-acc__question {
	position: relative;
	display: block;
	padding: 14px 14px 14px 60px;
	background: #f9f9f9;
	box-shadow: inset 0 4px 3px -2px rgba(0, 0, 0, .04);
	font-size: 14px;
	font-weight: 700;
	color: #bb2c28;
	cursor: pointer;
	list-style: none;
}

.dss-acc__question::-webkit-details-marker { display: none; }

/* Plus / minus box on the left (Betheme icon column). */
.dss-acc__question::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 49px;
	height: 100%;
	border-right: 1px solid #ebebeb;
}

.dss-acc__question::after {
	content: "+";
	position: absolute;
	left: 0;
	top: 50%;
	width: 48px;
	transform: translateY(-50%);
	text-align: center;
	font-size: 22px;
	line-height: 1;
	color: rgba(0, 0, 0, .35);
}

.dss-acc__item[open] > .dss-acc__question { border-bottom: 1px solid #ebebeb; }
.dss-acc__item[open] > .dss-acc__question::after { content: "\2212"; color: #bb2c28; }

.dss-acc__question:focus-visible { outline: 2px solid #024c79; outline-offset: -2px; }

.dss-acc__answer {
	padding: 15px 20px 20px;
	box-shadow: inset 0 4px 3px -2px rgba(0, 0, 0, .06);
}

.dss-acc__answer > :last-child { margin-bottom: 0; }
.dss-acc__answer::after { content: ""; display: block; clear: both; }

.dss-acc__answer img.alignleft,
.dss-acc__answer img.alignnone { float: left; margin: 0 20px 10px 0; max-width: 40%; height: auto; }

.dss-acc__answer ul,
.dss-acc__answer ol { margin: 0 0 15px 30px; }

@media (max-width: 767.98px) {
	.dss-acc__answer img.alignleft,
	.dss-acc__answer img.alignnone { float: none; display: block; margin: 0 0 10px; max-width: 100%; }
}

/* FAQ: numbered, plus / minus at the right, tinted rows. */
.dss-acc--faq .dss-acc__item { border: 0; background: rgba(0, 0, 0, .02); }

.dss-acc--faq .dss-acc__question {
	padding: 20px 40px 20px 80px;
	background: transparent;
	box-shadow: none;
	font-size: 15px;
	font-weight: 500;
	color: inherit;
}

.dss-acc--faq .dss-acc__question::before {
	width: 60px;
	background: rgba(0, 0, 0, .03);
	border-right: 1px solid rgba(0, 0, 0, .1);
}

.dss-acc--faq .dss-acc__question::after {
	left: auto;
	right: 15px;
	width: 20px;
}

.dss-acc--faq .dss-acc__num {
	position: absolute;
	left: 0;
	top: 50%;
	width: 60px;
	transform: translateY(-50%);
	text-align: center;
	font-weight: 700;
}

.dss-acc--faq .dss-acc__item[open] > .dss-acc__question { border-bottom: 0; }
.dss-acc--faq .dss-acc__answer { padding: 0 20px 20px 80px; box-shadow: none; }

/* 11b. Contact box (mfn_contact_box): navy block (background-getintouch
   #024c79), white text and icons (the library template also set
   ".get_in_touch_wrapper span i { color: #fff }"). Metrics from be.css
   ".get_in_touch" and, because the site uses the "simple" style (option
   style = simple), a 1px divider rgba(255,255,255,.2) under each row. */
.dss-contact {
	box-sizing: border-box;
	height: 100%;
	padding: 25px 20px 25px 30px;
	background: #024c79;
	color: #fff;
}

.dss-contact__title { margin: 0 0 10px; color: #fff; }

.dss-contact__list {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

.dss-contact__list li {
	position: relative;
	margin: 0;
	padding: 13px 0 13px 50px;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
	overflow-wrap: anywhere;
}

.dss-contact__list li:last-child { border-bottom: 0; }

.dss-contact__list p { margin: 0; }

.dss-contact__icon {
	position: absolute;
	left: 0;
	top: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 23px;
	color: #fff;
}

.dss-contact a,
.dss-contact a:hover { color: #fff; }

/* 11c. Blog grid (mfn_blog, "grid" style): white card, 3:2 image, meta, title,
   excerpt, "Read more". Columns come from the widget (--dss-blog-cols). */
.dss-blog {
	display: grid;
	grid-template-columns: repeat(var(--dss-blog-cols, 3), minmax(0, 1fr));
	gap: 30px 20px;
}

@media (max-width: 959.98px) {
	.dss-blog { grid-template-columns: repeat(min(var(--dss-blog-cols, 3), 2), minmax(0, 1fr)); }
}

@media (max-width: 689.98px) {
	.dss-blog { grid-template-columns: minmax(0, 1fr); }
}

.dss-blog__item {
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 0 6px rgba(0, 0, 0, .12);
}

.dss-blog__media {
	aspect-ratio: 3 / 2;
	background: #f2f2f2;
	overflow: hidden;
}

.dss-blog__photo,
.dss-blog__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dss-blog__desc {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px;
}

.dss-blog__meta {
	margin-bottom: 8px;
	font-size: 13px;
	color: #717577;
}

.dss-blog__meta a { color: inherit; text-decoration: none; }
.dss-blog__meta span + span::before { content: "\00b7"; margin: 0 6px; }

.dss-blog__title { margin: 0 0 10px; }
.dss-blog__title a { color: inherit; text-decoration: none; }
.dss-blog__title a:hover { color: #bb2c28; }

.dss-blog__excerpt { margin-bottom: 14px; font-size: 15px; line-height: 24px; }

.dss-blog__footer { margin-top: auto; }

.dss-blog__more {
	font-weight: 700;
	text-decoration: none;
}


/* ==========================================================================
   11d. Blog archive, category / tag / author archives
   Measured on the live Betheme page (1920px): filter bar 40px under the title
   band; three columns, 387px images at 4:3 on a transparent card, gap 25px, 60px
   between rows; card order image, author + date, title (H4 size, #024c79),
   excerpt (16/28), "Read more". The card order itself is set in
   inc/theme-defaults.php (Blocksy card layers), the filter bar is
   inc/blog.php. Betheme tablet: 2 columns below 960px, 1 below 768px.
   ========================================================================== */

/* Filter bar (Betheme "#Filters ul.filters_buttons"): label dark, groups red with
   a Betheme glyph and a caret, "Show all" pushed to the right. */
.dss-filters {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 22px;
	margin: 0 0 40px;
	padding-top: 20px;
	font-size: 16px;
	font-weight: 500;
}

.dss-filters__label { color: #232323; margin-inline-end: -4px; }

.dss-filters__group { position: relative; }

.dss-filters__group summary {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #bb2c28;
	cursor: pointer;
	list-style: none;
}

.dss-filters__group summary::-webkit-details-marker { display: none; }
.dss-filters__group summary:focus-visible,
.dss-filters__reset:focus-visible { outline: 2px solid #024c79; outline-offset: 2px; }

.dss-filters__icon::before,
.dss-filters__caret::before,
.dss-filters__x::before { font-family: mfn-icons; font-weight: 400; line-height: 1; }

.dss-filters__group--categories .dss-filters__icon::before { content: "\e85f"; }
.dss-filters__group--tags .dss-filters__icon::before { content: "\e92f"; }
.dss-filters__group--authors .dss-filters__icon::before { content: "\e94b"; }
.dss-filters__caret::before { content: "\e866"; font-size: 12px; }

.dss-filters__list {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	min-width: 190px;
	margin: 8px 0 0;
	padding: 6px 0;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
	list-style: none;
}

.dss-filters__list li { margin: 0; }

.dss-filters__list a {
	display: block;
	padding: 6px 16px;
	color: #232323;
	text-decoration: none;
}

.dss-filters__list a:hover,
.dss-filters__list a:focus-visible { background: #f2f2f2; color: #bb2c28; }

.dss-filters__reset {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-inline-start: auto;
	margin-inline-end: 60px;
	color: #bb2c28;
	text-decoration: none;
}

.dss-filters__x::before { content: "\e82a"; font-size: 12px; }

@media (max-width: 767.98px) {
	.dss-filters__reset { margin-inline-end: 0; }
}

/* Cards. Scoped to the post listings. */
.blog .entries[data-layout="grid"],
.archive .entries[data-layout="grid"],
.search .entries[data-layout="grid"] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 60px 25px;
}

@media (max-width: 959.98px) {
	.blog .entries[data-layout="grid"],
	.archive .entries[data-layout="grid"],
	.search .entries[data-layout="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
	.blog .entries[data-layout="grid"],
	.archive .entries[data-layout="grid"],
	.search .entries[data-layout="grid"] { grid-template-columns: minmax(0, 1fr); gap: 40px 0; }
}

.entries .entry-card {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.entries .entry-card .ct-media-container { box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }

/* Meta: "<user glyph> Name on <clock glyph> Date", 16px, author underlined with a
   dotted rule. Blocksy's slash dividers are removed. */
.entries .entry-card .entry-meta[data-type] {
	margin: 20px 0 0;
	font-size: 16px;
	font-weight: 500;
	color: #232323;
	text-transform: none;
}

.entries .entry-card .entry-meta[data-type] li::before,
.entries .entry-card .entry-meta[data-type] li::after { content: none; }

.entries .entry-card .entry-meta[data-type] a { color: #232323; }

.entries .entry-card .entry-meta .meta-author a::before,
.entries .entry-card .entry-meta .meta-date time::before {
	font-family: mfn-icons;
	font-weight: 400;
	margin-inline-end: 4px;
	display: inline-block;
	text-decoration: none;
}

.entries .entry-card .entry-meta .meta-author a::before { content: "\e94b"; }
.entries .entry-card .entry-meta .meta-date time::before { content: "\e843"; }

.entries .entry-card .entry-meta .meta-author .ct-meta-element-author span { border-bottom: 1px dotted #232323; }

.entries .entry-card .entry-meta[data-type] .meta-date::before {
	content: "on";
	margin-inline: 4px;
}

.entries .entry-card .entry-title {
	--theme-font-size: 22px;
	--theme-line-height: 30px;
	--theme-font-weight: 500;
	margin: 10px 0 12px;
}

.entries .entry-card .entry-title a { color: #024c79; }
.entries .entry-card .entry-title a:hover { color: #bb2c28; }

.entries .entry-card .entry-excerpt {
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
}

/* "Read more": document glyph + link, as Betheme's post footer. */
.entries .entry-card .ct-button-ghost,
.entries .entry-card .more-link,
.entries .entry-card .entry-button {
	color: #232323;
	font-weight: 500;
}

@media (max-width: 959.98px) {
	.entries .entry-card .entry-title { --theme-font-size: 18px; --theme-line-height: 24px; }
}


/* ==========================================================================
   11e. Single post (Betheme includes/content-single.php, be.css ".post-nav.minimal",
   ".post-meta", ".author-box"; Additional CSS for the author box).
   Header block printed by inc/single.php: minimal navigation, meta row with the
   Tags / Categories drop-downs, full-width image (16:9, Betheme 1200 x 675).
   The author box is shown without the avatar on a 6 percent red tint (Additional
   CSS ".author-box-wrapper"). The sidebar is the blog sidebar (inc/layout.php).
   ========================================================================== */
.dss-post-head { margin: 0 0 30px; }

.dss-post-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 40px;
	margin-bottom: 10px;
}

.dss-post-nav a {
	display: inline-flex;
	align-items: center;
	color: #626262;
	opacity: .6;
	text-decoration: none;
	transition: opacity .3s ease-in-out;
}

.dss-post-nav a:hover,
.dss-post-nav a:focus-visible { opacity: 1; }

.dss-post-nav__prev::before,
.dss-post-nav__next::before {
	font-family: mfn-icons;
	font-size: 25px;
	font-weight: 400;
	line-height: 30px;
}

.dss-post-nav__prev::before { content: "\e8b8"; }
.dss-post-nav__next::before { content: "\e916"; }

.dss-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px 20px;
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 500;
	color: #232323;
}

.dss-post-meta a { color: #232323; text-decoration: none; }
.dss-post-meta__by a { border-bottom: 1px dotted #232323; }

.dss-post-meta__icon::before {
	font-family: mfn-icons;
	font-weight: 400;
}

.dss-post-meta__icon--user::before { content: "\e94b"; }
.dss-post-meta__icon--clock::before { content: "\e843"; }

.dss-post-meta__terms { display: flex; gap: 10px; }

.dss-post-terms { position: relative; }

.dss-post-terms__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: #232323;
	font: inherit;
	cursor: pointer;
}

.dss-post-terms__caret::before {
	content: "\e866";
	font-family: mfn-icons;
	font-size: 12px;
	font-weight: 400;
}

.dss-post-terms__list {
	position: absolute;
	z-index: 21;
	top: 100%;
	right: 0;
	display: none;
	min-width: 70px;
	margin: 0;
	padding: 7px;
	background: #f9f9f9;
	list-style: none;
}

.dss-post-terms:hover .dss-post-terms__list,
.dss-post-terms:focus-within .dss-post-terms__list { display: block; }

.dss-post-terms__list li { margin: 0; border-bottom: 1px solid rgba(0, 0, 0, .05); }
.dss-post-terms__list li:last-child { border-bottom: 0; }
.dss-post-terms__list a { display: block; padding: 3px 4px; white-space: nowrap; }

.dss-post-image { margin: 0; }

.dss-post-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}

/* Author box: no avatar, name in the heading colour, black 400 text, red tint. */
.single-post .author-box {
	padding: 20px;
	background-color: #bb2c2810;
}

.single-post .author-box .ct-media-container,
.single-post .author-box [class*="avatar"] { display: none; }

.single-post .author-box .author-box-bio {
	color: #000;
	font-weight: 400;
}


/* 11f. Card footer with the like heart and the comment count (inc/love.php),
   Betheme ".post-footer": "Do you like it?" heart + count at the left, comments
   at the right. Heart glyphs icon-heart-empty-fa / icon-heart-fa. */
.dss-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	padding-top: 10px;
	border-top: 1px solid rgba(0, 0, 0, .08);
	font-size: 14px;
	font-weight: 500;
}

.dss-love { display: inline-flex; align-items: center; gap: 6px; }

.dss-love__button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: #bb2c28;
	font: inherit;
	cursor: pointer;
}

.dss-love__icon::before,
.dss-card-comments__icon::before {
	font-family: mfn-icons;
	font-weight: 400;
}

.dss-love__icon::before { content: "\e898"; }
.dss-love__button.is-loved .dss-love__icon::before { content: "\e899"; }
.dss-love__button.is-loved { cursor: default; }
.dss-card-comments__icon::before { content: "0e5"; }
.dss-card-comments a { color: inherit; text-decoration: none; }

/* 11g. Previous / next tabs at the screen edge (Betheme ".fixed-nav"). */
.dss-fixed-nav {
	position: fixed;
	bottom: 40px;
	z-index: 90;
	display: flex;
	height: 80px;
	color: inherit;
	text-decoration: none;
}

.dss-fixed-nav--prev { left: 0; }
.dss-fixed-nav--next { right: 0; flex-direction: row-reverse; }

.dss-fixed-nav__arrow {
	position: relative;
	z-index: 92;
	display: block;
	width: 35px;
	height: 80px;
	background: #bb2c28;
	color: #fff;
	font-size: 15px;
	line-height: 80px;
	text-align: center;
}

.dss-fixed-nav__arrow::before { font-family: mfn-icons; font-weight: 400; }
.dss-fixed-nav--prev .dss-fixed-nav__arrow::before { content: "\e8b8"; }
.dss-fixed-nav--next .dss-fixed-nav__arrow::before { content: "\e916"; }

.dss-fixed-nav__photo {
	position: relative;
	z-index: 92;
	display: block;
	width: 80px;
	height: 80px;
	overflow: hidden;
	background: #eee;
	line-height: 0;
}

.dss-fixed-nav__photo img { width: 80px; height: 80px; object-fit: cover; }

.dss-fixed-nav__desc {
	z-index: 91;
	display: block;
	width: 190px;
	min-height: 68px;
	padding: 6px 15px;
	background: #fff;
	box-shadow: 0 0 6px rgba(0, 0, 0, .15);
	font-size: 14px;
	line-height: 1.3;
	transition: margin .3s ease-in-out;
}

.dss-fixed-nav--prev .dss-fixed-nav__desc { margin-left: -335px; }
.dss-fixed-nav--next .dss-fixed-nav__desc { margin-right: -335px; }
.dss-fixed-nav--prev:hover .dss-fixed-nav__desc,
.dss-fixed-nav--prev:focus-visible .dss-fixed-nav__desc { margin-left: 0; }
.dss-fixed-nav--next:hover .dss-fixed-nav__desc,
.dss-fixed-nav--next:focus-visible .dss-fixed-nav__desc { margin-right: 0; }

.dss-fixed-nav__title { display: block; font-weight: 500; }
.dss-fixed-nav__date { display: block; margin-top: 3px; padding-top: 3px; border-top: 1px solid rgba(0, 0, 0, .1); font-size: 12px; }

@media (max-width: 767.98px) {
	.dss-fixed-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dss-fixed-nav__desc { transition: none; }
}


/* ==========================================================================
   12. Mobile call / appointment bar
   The markup (<div class="footer-cta"> with "Call Us Now" and "Online
   Appointment") is the Elementor Custom Code snippet "Footer Mobile Button"
   (#6587), printed on every page; its phone number and appointment link live in
   that snippet, not in the theme. Betheme's Additional CSS styled it: hidden from
   767px up, fixed to the bottom on phones, red bar with two white pills. The
   theme only supplies the CSS, reserves room so the bar never covers the last
   content or the footer, and keeps it under the off-canvas panel
   (Blocksy .ct-panel z-index 999999).
   ========================================================================== */
html body .footer-cta { display: none; }

@media (max-width: 766.98px) {
	html body .footer-cta {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 98;
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: #b30000;
	}

	.footer-cta a {
		flex: 1 1 0;
		margin: 10px 5px;
		padding: 10px 0;
		border: 1px solid #fff;
		border-radius: 25px;
		background: #fff;
		color: #b30000 !important;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.4;
		text-align: center;
		text-decoration: none !important;
	}

	/* Bar height: 10px margin + 10px padding + one 22px line + 10px padding + 2px
	   border + 10px margin = 74px, plus the safe-area inset. */
	body:has(.footer-cta) { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}