/*
 * Atrium Dental - Blocksy child theme stylesheet.
 * Loaded after Blocksy's main styles (see inc/assets.php).
 *
 * Source of every value: the production Betheme options and its Customizer CSS
 * (post 86), as recorded in audit-reports/ and docs/. Betheme rules that styled
 * Betheme-only markup (#Top_bar, #Subheader, #Footer, .mhb-*, .section_wrapper,
 * Gravity Forms, Complianz, inactive widgets) are NOT copied: they are replaced
 * by the Blocksy equivalents below or were dead (see docs/migration-manifest.md).
 *
 * Sections:
 *   1 Fonts          5 Header          9 Betheme Customizer CSS carried over
 *   2 Global values  6 Title band     10 Responsive notes
 *   3 Typography     7 Footer          11 Elementor content parity
 *   4 Containers     8 Sidebar and widgets
 *                    12 Replacement widget shortcodes
 */


/* ==========================================================================
   1. Fonts
   Betheme served these from uploads/betheme/fonts. Copies live in the child
   theme so removing Betheme's folder later does not break text.
   ========================================================================== */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/poppins-400italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/roboto-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/roboto-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/roboto-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/roboto-700italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


/* ==========================================================================
   2. Global values (Betheme options: color-*, background-*, font-*)
   Blocksy reads these variables; they replace the Customizer palette and
   typography so no Customizer save is needed.
   ========================================================================== */
html:root {
	--theme-palette-color-1: #1363df;   /* brand: buttons, action bar (color-one) */
	--theme-palette-color-2: #095fe1;   /* links (color-theme) */
	--theme-palette-color-3: #2d2d2d;   /* body text (color-text) */
	--theme-palette-color-4: #161922;   /* headings, page title (color-subheader) */
	--theme-palette-color-5: #e8e8e8;   /* borders */
	--theme-palette-color-6: #f2f2f2;   /* footer / subheader background */
	--theme-palette-color-7: #ffffff;   /* page background (background-body) */
	--theme-palette-color-8: #ffffff;

	--theme-link-initial-color: var(--theme-palette-color-2);
	--theme-link-hover-color: var(--theme-palette-color-1);

	--theme-font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--theme-font-size: 16px;
	--theme-line-height: 24px;          /* Betheme body line-height is 24px at every size */

	/* Buttons: Betheme used Roboto 600, 14px, 5px radius. */
	--theme-button-font-family: Roboto, Arial, sans-serif;
	--theme-button-font-weight: 600;
	--theme-button-font-size: 14px;
	--theme-button-border-radius: 5px;
	--theme-button-background-initial-color: #1363df;
	--theme-button-background-hover-color: #095fe1;
}


/* ==========================================================================
   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: 32px; --theme-font-weight: 400; --theme-line-height: 36px; }
html h2 { --theme-font-size: 28px; --theme-font-weight: 400; --theme-line-height: 32px; }
html h3 { --theme-font-size: 26px; --theme-font-weight: 400; --theme-line-height: 28px; }
html h4 { --theme-font-size: 24px; --theme-font-weight: 400; --theme-line-height: 32px; }
html h5 { --theme-font-size: 20px; --theme-font-weight: 400; --theme-line-height: 28px; }
html h6 { --theme-font-size: 12px; --theme-font-weight: 400; --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; }
	html h1, html h2, html h3 { --theme-font-weight: 600; }
}


/* ==========================================================================
   4. Containers and content spacing (Betheme: container 1260px, #Content padding)
   ========================================================================== */
html:root {
	--theme-normal-container-max-width: 1260px;
	--theme-content-vertical-spacing: 30px;
}

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

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

/* 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. */
.atrium-flush [data-vertical-spacing] {
	padding-top: 0;
	padding-bottom: 0;
}

/* Blocksy pads the top of the content area ([data-vertical-spacing*=top], parent
   main.min.css: padding-top: var(--theme-content-vertical-spacing)). On a page that
   shows the title band the band belongs directly under the header, as Betheme's
   Subheader did, so that top padding is a white gap above it. Only content areas
   that contain the title band are affected; other pages keep Blocksy's spacing. */
html .ct-container-full[data-vertical-spacing*="top"]:has(> article > .hero-section[data-type="type-1"]) {
	padding-top: 0;
}


/* ==========================================================================
   5. Header (production classic Betheme header)
   Blocksy prints its own generated rules for the header and footer (inline,
   after this file) with selectors such as
   [data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-menu-link
   and its defaults (white dropdown text, 700-weight 20px mobile menu, 120px
   rows). A rule with the same selector loses to them, so every header and
   footer rule below starts with "html " to outrank them without !important.
   ========================================================================== */

/* 5a. Contact action bar (markup: inc/header.php). Hidden below 767px, as in
   Betheme. It scrolls away; only the main bar sticks. */
.atrium-action-bar {
	background: #1363df;
	color: #fff;
	font-size: 16px;
	line-height: 24px;
}

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

.atrium-action-bar__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 45px;
}

.atrium-action-bar__phone {
	position: absolute;
	left: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.atrium-action-bar__info {
	margin: 0;
	padding: 10px 0;
	text-align: center;
}

.atrium-action-bar__sep {
	margin: 0 4px;
}

.atrium-stars {
	letter-spacing: 1px;
}

@media (max-width: 999.98px) {
	.atrium-action-bar__inner {
		flex-wrap: wrap;
		gap: 0 24px;
		padding: 6px 0;
	}

	.atrium-action-bar__phone {
		position: static;
	}
}

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

/* 5b. Main bar: white, 110px (100px on tablet/mobile). Betheme's header stuck to
   the top; Blocksy's own sticky option needs the Companion plugin, so use CSS.
   #main-container uses overflow: clip, which keeps position: sticky working. */
#header.ct-header {
	position: sticky;
	top: 0;
	z-index: 99;
}

.admin-bar #header.ct-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Stuck state (Betheme custom CSS: "div#Top_bar.is-sticky { border-bottom:
   1px solid #8f8f8f; background: #fff }"; option sticky-header-style = white).
   The class comes from assets/js/header-state.js; the border is drawn as an
   inset shadow so the header keeps its height. */
html #header.ct-header.is-stuck [data-row*="middle"] {
	background-color: #fff;
	box-shadow: inset 0 -1px 0 #8f8f8f;
}

/* Stuck size: 60px bar (Betheme sticky bar height) with the 54px sticky logo
   (custom CSS "#Top_bar.is-sticky #logo img.logo-sticky { max-height: 54px }").
   The header element keeps its full height (min-height below), so the page
   below never moves when the bar shrinks, and the shrink cannot re-trigger
   the stuck test. The spare strip is click-through. */
html #header.ct-header {
	min-height: var(--header-height);
	pointer-events: none;
}

html #header.ct-header [data-row] { pointer-events: auto; }

html [data-header*="type-1"] #header.ct-header.is-stuck [data-row*="middle"] { --height: 60px; }

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

/* Below 601px WordPress's admin bar scrolls away instead of staying fixed. */
@media (max-width: 600px) {
	.admin-bar #header.ct-header { top: 0; }
}

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

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

@media (max-width: 1239.98px) {
	html [data-header*="type-1"] { --header-height: 100px; }
	html [data-header*="type-1"] .ct-header [data-row*="middle"] { --height: 100px; }
}

/* 5b2. Mobile navigation from 1240px down, as in Betheme (its "mobile menu"
   breakpoint). Blocksy switches at 1000px, and the full menu plus the
   Appointment button needs about 1100px, so between 1000px and 1239px the
   desktop bar would overflow. Show Blocksy's own mobile header, and the
   mobile 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; }
}

/* 5b3. Phones: menu button on the left, logo centred (Betheme
   mobile-tb-right layout in the 390px baseline). Tablet keeps logo left and
   Appointment + menu button right. The button is hidden below 690px (5e). */
@media (max-width: 689.98px) {
	#header [data-device="mobile"] [data-row*="middle"] > div {
		grid-template-columns: 1fr auto 1fr;
	}

	#header [data-device="mobile"] [data-row*="middle"] [data-column="start"] {
		grid-column: 2;
		grid-row: 1;
	}

	#header [data-device="mobile"] [data-row*="middle"] [data-column="end"] {
		grid-column: 1;
		grid-row: 1;
	}

	#header [data-device="mobile"] [data-row*="middle"] [data-column="end"] > [data-items] {
		justify-content: flex-start;
	}
}

/* 5c. Logo: image only, 80px high (Betheme logo-height). */
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: 80px;
}

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

/* 5d. Menu: Poppins 15px, #0a0a0a; dropdown white, 300px wide, 5px radius,
   divider #cdcdcd, hover #1363df (Customizer CSS: "#Top_bar .menu li ul"). */
html [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
	--theme-font-weight: 400;
	--theme-text-transform: none;
	--theme-font-size: 15px;
	--theme-line-height: 1.3;
	--theme-link-initial-color: #0a0a0a;
	--theme-link-hover-color: #1363df;
}

html [data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu {
	--dropdown-width: 300px;
	--dropdown-divider: 1px solid #cdcdcd;
	--theme-box-shadow: 0 0 3px 0 #000;
	--theme-border-radius: 5px;
	background-color: #fff;
}

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

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: #1363df;
	color: #fff;
	outline: none;
}

/* Betheme: each row has a bottom divider (#cdcdcd), none above the first, and
   the first/last rows follow the 5px corner radius. */
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:first-child > .ct-menu-link {
	border-radius: 5px 5px 0 0;
}

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

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

/* 5e. Appointment button (Betheme .action_button): #1363df, 5px radius,
   15px 35px padding. Hidden on phones, as in Betheme. */
html [data-header*="type-1"] .ct-header [data-id="button"] {
	--theme-button-background-initial-color: #1363df;
	--theme-button-background-hover-color: #095fe1;
	--theme-button-text-initial-color: #fff;
	--theme-button-text-hover-color: #fff;
	--theme-button-border-radius: 5px;
	--theme-button-padding: 15px 35px;
	--theme-button-min-height: 47px;
	--theme-button-font-size: 14px;
	--theme-button-font-weight: 600;
}

@media (max-width: 689.98px) {
	html [data-header*="type-1"] .ct-header [data-id="button"] { display: none; }
}

/* 5f. Mobile / tablet menu panel (Betheme side-slide, be.css "#Side_slide"):
   panel #2a2b39, links #ffb128, hover and current item #ffc86b, 16px / 400,
   rows 11px 5px 10px 20px with a 19px line, nested levels indented to 35px and
   50px on a slightly lighter ground, 40px "+" / "-" toggles at 50 percent
   opacity (full when open). Width 320px (90vw on small phones); markup and opening
   behaviour are Blocksy's. */
html [data-header*="type-1"] #offcanvas {
	--side-panel-width: min(320px, 90vw);
}

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

html [data-header*="type-1"] [data-id="mobile-menu"] {
	--theme-font-size: 16px;
	--theme-font-weight: 400;
	--theme-line-height: 19px;
	--theme-text-transform: none;
	--theme-link-initial-color: #ffb128;
	--theme-link-hover-color: #ffc86b;
	--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, .025);
}

#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: 35px; }
#offcanvas .mobile-menu .sub-menu .sub-menu .ct-menu-link { padding-inline-start: 50px; }

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

#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: #ffc86b;
}

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

/* Social icons in the panel (Betheme: centred, 44px tap targets, 20px icons,
   8px apart). */
#offcanvas .ct-header-socials .ct-social-box {
	--items-spacing: 8px;
	--theme-icon-size: 20px;
	--theme-icon-color: #ffb128;
	justify-content: center;
}

#offcanvas .ct-header-socials .ct-social-box a {
	justify-content: center;
	width: 44px;
	height: 44px;
	box-sizing: border-box;
	padding: 8px;
}

#offcanvas .ct-header-socials .ct-social-box a:hover { --theme-icon-color: #ffc86b; }

#offcanvas .ct-header-socials .ct-social-box a:focus-visible {
	outline: 2px solid #ffc86b;
	outline-offset: -2px;
}

/* Appointment button at the top of the panel (inc/header.php; Betheme "action
   button" in the side panel): full width, centred, blue #1363df with white text
   at every width (the original mobile menu shows it blue), 5px radius, 52px
   tall with 30px side padding, space above and below. */
#offcanvas .atrium-panel-cta {
	display: block;
	box-sizing: border-box;
	align-self: stretch;     /* the panel content may be a centring flex column */
	width: 100%;
	max-width: none;
	margin: 10px 0 24px;
}

#offcanvas .atrium-panel-cta__button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 16px 30px;
	border-radius: 5px;
	background: #1363df;
	color: #fff;
	font-family: Roboto, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

#offcanvas .atrium-panel-cta__button:hover { background: #095fe1; color: #fff; }

#offcanvas .atrium-panel-cta__button:focus-visible {
	outline: 2px solid #ffc86b;
	outline-offset: 2px;
}

/* Panel social links ([inc/header.php], from the Betheme side panel): centred,
   44px tap targets, 8px apart, 20px icons, the panel link colours. */
#offcanvas .atrium-panel-social {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;            /* one row of five */
	justify-content: space-between;
	gap: 4px;
	margin: 20px 0 0;             /* the panel already pads its content */
	padding: 0;
	list-style: none;
}

#offcanvas .atrium-panel-social li { flex: 0 1 44px; min-width: 0; margin: 0; list-style: none; }

#offcanvas .atrium-panel-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	padding: 8px 0;
	color: #ffb128;
	text-decoration: none;
}

#offcanvas .atrium-panel-social a:hover { color: #ffc86b; }

#offcanvas .atrium-panel-social a:focus-visible {
	outline: 2px solid #ffc86b;
	outline-offset: -2px;
}

/* Phone gutters (Betheme: about 18px at 390px) for the header and footer rows.
   Content pages keep section 4. */
@media (max-width: 689.98px) {
	.ct-header .ct-container,
	.ct-footer .ct-container,
	.atrium-action-bar .ct-container {
		--theme-container-width: min(100%, calc(100vw - 36px));
	}
}


/* ==========================================================================
   6. Title band (Betheme Subheader): banner image on #f2f2f2, centred title,
   breadcrumbs beneath. 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);
	padding: 30px 0;
	background: #f2f2f2 url(../images/subheader-banner.webp) center / cover no-repeat;
	border-bottom: 1px solid #c7c7c7;
	text-align: center;
}

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

.hero-section[data-type="type-1"] .page-title {
	--theme-font-size: 32px;
	--theme-font-weight: 400;
	--theme-line-height: 36px;
	color: #161922;
	margin: 0;
}

.hero-section[data-type="type-1"] .ct-breadcrumbs {
	--theme-font-size: 16px;
	--theme-font-weight: 400;
	--theme-text-transform: none;
	justify-content: center;
	margin-top: 10px;
	/* Betheme: grey crumbs on the banner, links included (Blocksy shows blue). */
	--theme-text-color: rgba(0, 0, 0, .6);
	--theme-link-initial-color: rgba(0, 0, 0, .6);
	--theme-link-hover-color: #1363df;
}

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

@media (max-width: 767.98px) {
	.hero-section[data-type="type-1"] { padding: 8px 0; }
	.hero-section[data-type="type-1"] .page-title { --theme-font-size: 18px; --theme-font-weight: 500; }
}


/* ==========================================================================
   7. Footer (Betheme: four columns on #f2f2f2, credit bar #00388f)
   Columns hold the existing Betheme footer widgets (inc/legacy-bridge.php).
   ========================================================================== */
.ct-footer {
	--theme-text-color: #282828;
	--theme-headings-color: #282828;
	--theme-link-initial-color: #1363df;
	--theme-link-hover-color: #59c1bd;
	color: #282828;
}

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

html [data-footer*="type-1"] .ct-footer [data-row*="middle"] > div {
	--container-spacing: 20px;
}

/* Footer columns. Blocksy sets the grid through --grid-template-columns from its
   generated CSS; when that value is missing or "initial" (its tablet default) the
   four widget areas fall into one tall stack with a 50px gap between them, and
   the blue rule on each Latest Posts item lands at the far right of a full-width
   row. State the Betheme layout explicitly: four equal columns (315px pitch at
   1260px, so a 30px gap), two columns on tablet (Betheme's one-fourth columns
   became halves below 960px), one column on phones with compact spacing. The
   rules apply only to a middle row that really has that many columns. */
html [data-footer] .ct-footer [data-row*="middle"] > div {
	--columns-gap: 30px;
	--container-spacing: 20px;
}

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

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

@media (max-width: 689.98px) {
	/* The :has() terms make this as specific as the tablet rule above, which comes
	   first, so this one wins on phones (one column, stacked). */
	html [data-footer] .ct-footer [data-row*="middle"] > div,
	html [data-footer] .ct-footer [data-row*="middle"] > div:has(> :nth-child(1)),
	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);
		--columns-gap: 20px;
	}

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

.ct-footer .wp-block-heading,
.ct-footer .widget-title {
	margin-bottom: 0;
	font-size: 24px;
	font-weight: 400;
}

@media (max-width: 767.98px) {
	.ct-footer .wp-block-heading,
	.ct-footer .widget-title { font-size: 16px; font-weight: 600; }
}

/* Latest posts column: blue rule on the right of each item. */
.ct-footer .wp-block-latest-posts li {
	margin: 0 0 10px;
	padding: 8px 10px 8px 5px;
	border-right: 3px solid #1363df;
	/* Hover: a blue block slides in from the right behind the item. */
	background-image: linear-gradient(#1363df, #1363df);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 0 100%;
	transition: background-size .3s ease;
}

.ct-footer .wp-block-latest-posts li:hover,
.ct-footer .wp-block-latest-posts li:focus-within { background-size: 100% 100%; }

.ct-footer .wp-block-latest-posts li a { transition: color .3s ease; }

.ct-footer .wp-block-latest-posts li:hover a,
.ct-footer .wp-block-latest-posts li:focus-within a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.ct-footer .wp-block-latest-posts li,
	.ct-footer .wp-block-latest-posts li a { transition: none; }
}

/* Social icons in the first column (Betheme CSS: svg 30px). */
/* Betheme spaced the footer social icons about 16px apart; Blocksy's block gap
   spreads them wider and the fourth icon wraps in a narrow column. */
html .ct-footer ul.wp-block-social-links { gap: 16px; }

.ct-footer .wp-block-social-links svg {
	width: 30px;
	height: 30px;
}

/* Bottom bar: credit line left, legal menu right. */
html [data-footer*="type-1"] .ct-footer [data-row*="bottom"] {
	background-color: #00388f;
	--theme-text-color: #fff;
	--theme-link-initial-color: #fff;
	--theme-link-hover-color: #fff;
	color: #fff;
}

html [data-footer*="type-1"] .ct-footer [data-row*="bottom"] > div {
	--container-spacing: 30px;
}

/* Bar text and links stay opaque white (be.css .footer_copy). */
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;
}

/* Bottom bar layout. Blocksy's footer grid takes its columns from a generated
   variable that is "initial" here, so the copyright and the legal menu stacked.
   Markup: [data-row="bottom"] > .ct-container > [data-column="copyright"] and
   [data-column="menu"] > nav > ul.menu > li > a.ct-menu-link. One row on desktop
   and tablet (copyright left, menu right, wrapping if it must); stacked and
   centred on phones. Upper footer rows are not touched. */
html [data-footer] .ct-footer [data-row="bottom"] > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
}

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="menu"] {
	margin-inline-start: auto;
	align-items: flex-end;
}

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"] .menu {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}

html [data-footer] .ct-footer [data-row="bottom"] [data-column="menu"] .menu li {
	display: flex;
	margin: 0;
}

@media (max-width: 689.98px) {
	html [data-footer] .ct-footer [data-row="bottom"] > div {
		flex-direction: column;
		justify-content: center;
		gap: 30px;
		text-align: center;
	}

	html [data-footer] .ct-footer [data-row="bottom"] [data-column="menu"] { order: 1; }
	html [data-footer] .ct-footer [data-row="bottom"] [data-column="copyright"] { order: 2; }

	html [data-footer] .ct-footer [data-row="bottom"] [data-column="copyright"],
	html [data-footer] .ct-footer [data-row="bottom"] [data-column="menu"] {
		align-items: center;
		margin-inline: 0;
		text-align: center;
	}

	html [data-footer] .ct-footer [data-row="bottom"] [data-column="menu"] .menu { justify-content: center; }
}

@media (max-width: 689.98px) {
	/* Betheme phone footer: credit and legal links centred, wrapping. */
	html [data-footer*="type-1"] .ct-footer [data-row*="bottom"] [data-column],
	html [data-footer*="type-1"] .ct-footer [data-row*="bottom"] [data-items] {
		justify-content: center;
		text-align: center;
	}

	html [data-footer*="type-1"] .ct-footer [data-row*="bottom"] .menu {
		flex-wrap: wrap;
		justify-content: center;
	}
}

@media (max-width: 766.98px) {
	/* Room for the fixed call / appointment bar below the footer, only where that
	   bar (.footer-cta, Elementor Custom Code "Footer Buttons") is on the page. */
	body:has(.footer-cta) { padding-bottom: 66px; }
}

html [data-footer*="type-1"] [data-id="copyright"],
html [data-footer*="type-1"] .ct-footer [data-row*="bottom"] .menu a {
	--theme-font-size: 16px;
	--theme-font-weight: 400;
	--theme-line-height: 1.5;
	--theme-text-transform: none;
}

.ct-footer [data-row*="bottom"] .menu li + li {
	border-left: 1px solid rgba(255, 255, 255, .3);
}

/* Scroll-to-top (Betheme #back_to_top): white circle, teal arrow. */
.ct-back-to-top {
	--theme-icon-color: #59c1bd;
	background: #fff;
	color: #59c1bd;
	border-radius: 100px;
}

/* On phones the fixed call / appointment bar (below) covers the corner the
   scroll-to-top button sits in; lift the button above it. */
@media (max-width: 766.98px) {
	.ct-back-to-top { --back-top-bottom-offset: 85px; }
}

/* Mobile call / appointment bar. The markup is injected on every page by the
   Elementor Custom Code snippet "Footer Buttons" (ID 14195); only its CSS lived
   in the Betheme Customizer. Hidden from 767px up. */
.footer-cta { display: none; }
.ctctaus,
.apointment { display: inline-block; }

@media only screen and (max-width: 766px) {
	.footer-cta {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background: #1363df;
		z-index: 2;
	}
}

.footer-cta a {
	width: 50%;
	margin: 10px 5px;
	padding: 10px 0;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	background: #fff;
	color: #1363df !important;
	border: 1px solid #fff;
	border-radius: 25px;
	text-decoration: none !important;
}


/* ==========================================================================
   8. Sidebar and widgets
   ========================================================================== */
:root {
	--sidebar-width: 26%;            /* Betheme sidebar-width */
	--sidebar-width-no-unit: 26;
}

/* Blog sidebar "Popular Services" list (widget block with class popular-services). */
.popular-services li {
	margin: 10px 0;
	background-color: #1363df;
	border: 2px solid #1363df60;
	border-radius: 10px;
	transition: all .3s;
}

.popular-services li a {
	display: block;
	padding: 10px 5px;
	color: #fff;
	text-decoration: none;
	transition: all .3s;
}

.popular-services li:hover { background-color: #bdd7ff9c; }
.popular-services li:hover a { color: #000; }

/* Blog sidebar "Latest Articles": thumbnail beside each title. */
.ct-sidebar .wp-block-latest-posts li {
	display: flex;
	align-items: center;
}

.ct-sidebar .wp-block-latest-posts__featured-image { margin: 0 15px 0 0; }

/* ==========================================================================
   9. Betheme Customizer CSS carried over (only rules whose markup still exists)
   ========================================================================== */

/* Orange banner used inside 28 Elementor pages/templates (HTML widgets). */
.subheader-custom {
	height: 45px;
	background: #ffb128;
}

.subheader-custom a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #464646;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	transition: all .3s;
}

.subheader-custom a:hover {
	background: #1363df;
	color: #fff;
}

@media only screen and (min-width: 767px) {
	.subheader-custom a { font-size: 18px; }
}

@media only screen and (max-width: 766px) {
	.subheader-custom { padding: 15px 5px; }
	.subheader-custom a { font-size: 20px; }
}

/* Bullet lists inside Elementor text-editor widgets: see section 11c. */


/* ==========================================================================
   10. Responsive notes
   Betheme switched to its mobile menu below 1240px; Blocksy switches below
   1000px. Section 5b2 shows the mobile header from 1000px to 1239px as well.
   ========================================================================== */


/* ==========================================================================
   11. Elementor content parity
   Betheme gave Elementor pages its own reset and spacing, and let Elementor
   lay out its sections untouched. Blocksy's Elementor integration
   (parent: static/bundle/elementor-frontend.min.css) 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).
   ========================================================================== */

/* 11a. Stretched sections (homepage hero and the two full-width bands).
   Elementor's script sets an inline width and left offset to reach the
   viewport edges. Blocksy's max-width (1260px) and auto margins cap that
   width, so the band stops short and sits off-centre. Inline width still
   wins over the 100% below; 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;
}

/* 11b. Pages with Betheme's "remove padding" (body.atrium-flush, inc/layout.php)
   are laid out by Elementor itself: sections span the page and the boxed
   container is centred. The container width above (section 4, minus 112px
   below 1372px) is for plain content pages and would narrow these sections
   on tablet and phone. Boxed width stays the theme's 1260px maximum. */
.atrium-flush.ct-elementor-default-template .elementor-top-section:not(.ct-section-stretched):not(.elementor-sticky) {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

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

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

/* 11b2. Homepage side gutter. Betheme wraps the content in
   .the_content_wrapper { margin: 0 1%; width: 98% } (be.css), so on narrow
   screens the cards sat about 4px further in than the bare Elementor wrapper
   does here (measured at 378px: about 14px against 10px). Full-width bands
   still reach the viewport edges through Elementor's stretch script. */
.home.atrium-flush.ct-elementor-default-template .elementor[data-elementor-type="wp-page"] {
	margin-inline: 1%;
}

/* 11c. Text spacing inside Elementor text-editor widgets. Betheme (be.css
   "Typography" and "list ul ol li"): paragraphs 15px, lists indented 20px
   (bullets, Customizer CSS) or 30px (numbers), 15px below, items 10px apart.
   Blocksy uses 1.5em and a 2.5em list indent, and drops the last paragraph's
   margin. */
.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 {
	list-style: decimal;
}

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

/* 11c2. Elementor content pages that are not "remove padding" (appointment,
   free virtual consultation and the like). Measured against production at 1920px
   on two such pages: the card sits 50px below the title band (Blocksy's hero
   margin is 40px) and 60px above the footer (Blocksy gives 50px), and is 1250px
   wide (the theme gives 1260px). */
.ct-elementor-default-template:not(.atrium-flush) .hero-section[data-type="type-1"] {
	--margin-bottom: 50px;
}

html .ct-elementor-default-template:not(.atrium-flush) [data-vertical-spacing*="bottom"] {
	padding-bottom: 40px;
}

@media (min-width: 1372px) {
	/* Blocksy sizes top sections with a fixed width and max-width (it reads
	   --theme-block-max-width first), so margins on the wrapper do nothing. */
	.ct-elementor-default-template:not(.atrium-flush) .elementor-top-section {
		--theme-block-max-width: 1250px;
	}
}

/* 11c1. Blog and category archives (Elementor Pro Archive template, wrapper
   class .elementor-location-archive). The template holds a Search widget that
   production never showed. The earlier rule keyed on the .e-search.hidden class,
   which Elementor's script removes once the widget starts, so on the demo the
   widget showed anyway; the rule now hides the widget itself and only inside the
   archive template (header, mobile panel and other searches are untouched). */
.elementor-location-archive .elementor-widget-search { display: none; }

/* 11c1b. Blog archive, category archive and single posts (Elementor Pro
   templates): the title band's 50px bottom margin from 11c2 is too much on
   phones, the template's own top container already adds space, and the cards
   and text ran edge to edge. Phones get a 16px side gutter and a 20px band
   margin; desktop and tablet keep the rules above. */
@media (max-width: 689.98px) {
	html .ct-elementor-default-template:not(.atrium-flush):is(.single-post, .archive, .blog) .hero-section[data-type="type-1"] {
		--margin-bottom: 20px;
	}

	.elementor-location-archive,
	.elementor-location-single {
		padding-inline: 16px;
	}
}

/* Top container of the archive and single-post templates: no extra top padding
   under the title band. Only the outermost container of those two templates. */
.elementor-location-archive > .e-con.e-parent,
.elementor-location-single > .e-con.e-parent {
	padding-block-start: 0 !important;
	padding-top: 0 !important;
}

/* 11c3. Content pages with a sidebar (for example /services/night-guards/).
   Production puts the text 40px below the title band; the page measured 60px
   with the 50px band margin above (it already carries about 10px of its own). */
html .ct-elementor-default-template:not(.atrium-flush):has(.ct-sidebar) .hero-section[data-type="type-1"] {
	--margin-bottom: 30px;
}

/* 11c4. Comments on Elementor content pages, as on production: the form runs
   the full content width (Blocksy's default is a 750px narrow column), blue
   field borders, orange right-aligned "Post Comment" button, 40px below it
   instead of 100px, and no extra 60px above the "Leave a Reply" heading. */
.ct-elementor-default-template:not(.atrium-flush) .ct-comments-container {
	--theme-narrow-container-max-width: 1240px;
}

.ct-elementor-default-template:not(.atrium-flush) .ct-comments-container > div {
	padding-top: 0;
	padding-bottom: 40px;
}

.ct-elementor-default-template:not(.atrium-flush) .ct-comments .comment-reply-title {
	--theme-font-size: 22px;
	--theme-font-weight: 400;
}

.ct-elementor-default-template:not(.atrium-flush) .ct-comments .comment-form {
	--theme-form-field-border-initial-color: #1363df;
	--theme-form-field-border-focus-color: #1363df;
	--theme-button-background-initial-color: #ffb128;
	--theme-button-background-hover-color: #e89f12;
	--theme-button-text-initial-color: #fff;
	--theme-button-text-hover-color: #fff;
	--theme-button-font-weight: 600;
	--theme-button-min-height: 46px;
	--theme-button-padding: 0 35px;
}

.ct-elementor-default-template:not(.atrium-flush) .ct-comments .comment-form .form-submit {
	text-align: end;
}

/* 11d. Appointment page (page ID 59): the "OFFICE HOURS" heading in the blue
   column sat about 30px lower than on Betheme, which gave headings no top
   margin. Scoped to that heading widget. */
.page-id-59 .elementor-element-462907f h4 { margin-top: 0; }


/* ==========================================================================
   12. Shortcodes replacing Betheme widgets (inc/widgets.php)
   Values from Betheme be.css: .fancy_heading, .get_in_touch, .hover_box and the
   blog grid; colours from the options already in section 2.
   ========================================================================== */

/* 12a. Blog grid ([atrium_blog]), Betheme "grid" style: white card, 3:2 image,
   20px padding (meta 8px below, excerpt 15px below), footer bar full width at
   rgba(0,0,0,.02) with the read-more link on the right after a 1px rule.
   The image sits in a fixed-ratio box, so a missing or failed image cannot
   stretch the card. Columns come from --atrium-cols. */
.atrium-blog {
	display: grid;
	grid-template-columns: repeat(var(--atrium-cols, 3), minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

.atrium-blog__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	transition: box-shadow .2s ease;
}

.atrium-blog__item:hover,
.atrium-blog__item:focus-within { box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }

.atrium-blog__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: linear-gradient(135deg, #e9eef5, #d5dde8);
}

.atrium-blog__photo {
	position: absolute;
	inset: 0;
	display: block;
}

.atrium-blog__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .3s ease;
}

.atrium-blog__item:hover .atrium-blog__photo img { transform: scale(1.03); }
.atrium-blog--grey .atrium-blog__photo img { filter: grayscale(1); }

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

.atrium-blog__meta {
	margin-bottom: 8px;
	color: #3a3a3a;
	font-size: 14px;
	line-height: 22px;
}

.atrium-blog__meta a {
	color: inherit;
	border-bottom: 1px dotted currentColor;
	text-decoration: none;
}

.atrium-blog__meta a:hover { color: var(--theme-link-hover-color); }
.atrium-blog__date { white-space: nowrap; }
.atrium-blog__cat { margin-left: 8px; }

.atrium-blog__icon svg {
	display: inline-block;
	margin-right: .3em;
	vertical-align: -.15em;
}

.atrium-blog__title {
	margin: 0 0 10px;
	overflow-wrap: anywhere;
}

.atrium-blog__title a {
	color: inherit;
	text-decoration: none;
}

.atrium-blog__title a:hover { color: var(--theme-link-hover-color); }

.atrium-blog__excerpt {
	flex: 1 0 auto;
	margin: 0 0 15px;
}

.atrium-blog__title + .atrium-blog__footer { margin-top: auto; }

.atrium-blog__footer {
	margin: 20px -20px -20px;
	padding: 7px 15px;
	background: rgba(0, 0, 0, .02);
	line-height: 30px;
	text-align: right;
}

.atrium-blog__links {
	display: inline-block;
	padding-left: 10px;
	border-left: 1px solid rgba(0, 0, 0, .1);
}

.atrium-blog__comments { margin-right: 10px; }

.atrium-blog a:focus-visible {
	outline: 2px solid var(--theme-palette-color-1);
	outline-offset: 2px;
}

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

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

/* 12b. Fancy heading ([atrium_fancy_heading]), be.css ".fancy_heading_icon
   .icon_top": 50px icon (50px wide, the font glyph filled its em box) in the
   link blue, 50px line box, 15px below. The title is 42px (38 / 34 / 30px on
   narrower screens). spacing="tight" is the page-level custom CSS saved on the
   location pages: icon margin-bottom -20px, heading padding-top 10px. */
.atrium-fancy-heading { text-align: center; }

.atrium-fancy-heading__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	margin-bottom: 15px;
	overflow: hidden;
	color: var(--theme-palette-color-2);
	font-size: 50px;
	line-height: 50px;
}

.atrium-fancy-heading__icon svg {
	display: block;
	width: 1em;
	height: auto;
}

.atrium-fancy-heading__title {
	--theme-font-size: 42px;
	--theme-line-height: 42px;
	margin: 0 0 15px;
}

.atrium-fancy-heading--tight .atrium-fancy-heading__icon { margin-bottom: -20px; }
.atrium-fancy-heading--tight .atrium-fancy-heading__title { padding-top: 10px; }

@media (max-width: 959.98px) {
	.atrium-fancy-heading__title { --theme-font-size: 38px; --theme-line-height: 38px; }
}

@media (max-width: 767.98px) {
	.atrium-fancy-heading__title { --theme-font-size: 34px; --theme-line-height: 34px; }
}

@media (max-width: 479.98px) {
	.atrium-fancy-heading__title { --theme-font-size: 30px; --theme-line-height: 30px; }
}

/* 12c. Contact box ([atrium_contact_box]). Betheme .get_in_touch with the
   "simple" style the site used: white text, title and links (be.css and the
   option CSS: ".get_in_touch, a, .title, ul { color: #fff }"), rows 13px 0 13px
   50px with a 1px divider (rgba white .1) between rows, 30px icon box at
   left 5px / top 5px, 23px glyph at 70 percent white (Customizer CSS), links
   without underline until hover, title = h3 scale (section 3) with 15px below.
   tone="dark" swaps in the normal site colours for light backgrounds. */
.atrium-contact {
	--atrium-contact-color: #fff;
	--atrium-contact-icon: rgba(255, 255, 255, .7);
	--atrium-contact-line: rgba(255, 255, 255, .1);
	--atrium-contact-link: #fff;
	box-sizing: border-box;
	height: 100%;
	color: var(--atrium-contact-color);
}

.atrium-contact--dark {
	--atrium-contact-color: var(--theme-palette-color-3);
	--atrium-contact-icon: rgba(0, 0, 0, .7);
	--atrium-contact-line: rgba(0, 0, 0, .1);
	--atrium-contact-link: var(--theme-link-initial-color);
}

.atrium-contact .atrium-contact__title {
	margin: 0 0 15px;
	color: var(--atrium-contact-color);
}

.atrium-contact--dark .atrium-contact__title { color: var(--theme-palette-color-4); }

.atrium-contact .atrium-contact__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 100%;
	line-height: normal;
}

.atrium-contact .atrium-contact__list > li {
	position: relative;
	margin: 0;
	padding: 13px 0 13px 50px;
	list-style: none;
	overflow-wrap: break-word;
}

.atrium-contact .atrium-contact__list > li:not(:last-child) {
	border-bottom: 1px solid var(--atrium-contact-line);
}

.atrium-contact .atrium-contact__list > li::before,
.atrium-contact .atrium-contact__list > li::marker { content: none; }

.atrium-contact li p { margin: 0; }

.atrium-contact a {
	color: var(--atrium-contact-link);
	text-decoration: none;
}

.atrium-contact a:hover { text-decoration: underline; }

.atrium-contact__icon {
	position: absolute;
	left: 5px;
	top: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--atrium-contact-icon);
	font-size: 23px;
	line-height: 30px;
}

.atrium-contact__icon svg { display: block; }

/* 12d. Hover box ([atrium_hover_box]): second photo fades in over the first. */
.atrium-hover-box { text-align: center; line-height: 0; }
.atrium-hover-box a { display: block; }

.atrium-hover-box__wrapper {
	position: relative;
	max-width: 100%;
	overflow: hidden;
}

.atrium-hover-box__visible,
.atrium-hover-box__hidden { transition: opacity .4s ease-in-out; }

.atrium-hover-box__hidden {
	position: absolute;
	left: 50%;
	top: 50%;
	opacity: 0;
	transform: translate(-50%, -50%);
}

.atrium-hover-box:hover .atrium-hover-box__visible { opacity: 0; }
.atrium-hover-box:hover .atrium-hover-box__hidden { opacity: 1; }


/* 12e. Testimonial slider ([atrium_testimonials], inc/testimonials.php and
   assets/js/testimonials-slider.js). Values from Betheme be.css
   ".testimonials_slider" with the site's "simple" style and options: slide
   padding 0 80px (0 below 480px); quote box without background, centred,
   italic 17px / 25px in #444 (15 / 14 / 13px on narrower screens); three
   #1363df dots; author in the h5 style, company in #3a3a3a; "single-photo":
   85px round photo, quote box margin 0 6%, 12px dot pager; arrows 46px at
   top 30px (hidden below 480px). Before the script runs every slide shows. */
.atrium-ts {
	--ts-arrow-bg: #0b3954;
	--ts-arrow-color: #fff;
	--ts-arrow-radius: 5px;
	position: relative;
}

.atrium-ts--teal {
	--ts-arrow-bg: #59c1bd;
	--ts-arrow-radius: 100px;
}

.atrium-ts__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.atrium-ts__slide {
	box-sizing: border-box;
	margin: 0;
	padding: 0 80px;
	list-style: none;
}

/* Horizontal slider. The viewport clips; the list is a flex row of full-width
   slides moved with translateX (--atrium-ts-i = active index, --atrium-ts-drag =
   live drag offset). Before the script runs the viewport simply clips everything
   after the first slide, so there is no stacked flash. The viewport height follows
   the active slide (--atrium-ts-h, set by testimonials-slider.js). */
.atrium-ts__viewport { overflow: hidden; }

.atrium-ts.is-ready .atrium-ts__viewport {
	height: var(--atrium-ts-h, auto);
	transition: height .3s ease;
}

.atrium-ts__list {
	display: flex;
	align-items: flex-start;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.atrium-ts.is-ready .atrium-ts__list {
	transform: translateX(calc(var(--atrium-ts-i, 0) * -100% + var(--atrium-ts-drag, 0px)));
	transition: transform .35s ease;
	cursor: grab;
}

.atrium-ts.is-ready.is-dragging .atrium-ts__list {
	transition: none;
	cursor: grabbing;
}

.atrium-ts__slide {
	flex: 0 0 100%;
	min-width: 0;
}

/* Slides that are not showing cannot be tabbed to; the delay keeps them visible
   while they slide out. */
.atrium-ts:not(.is-ready) .atrium-ts__slide:not(:first-child),
.atrium-ts.is-ready .atrium-ts__slide:not(.is-active) {
	visibility: hidden;
	transition: visibility 0s linear .35s;
}

.atrium-ts.is-ready .atrium-ts__slide.is-active { visibility: visible; transition-delay: 0s; }

/* Room for the pager the script adds, so the card does not grow when it appears. */
.atrium-ts--photos:not(.is-ready)::after {
	content: "";
	display: block;
	height: 50px;
}

@media (prefers-reduced-motion: reduce) {
	.atrium-ts.is-ready .atrium-ts__list,
	.atrium-ts.is-ready .atrium-ts__viewport { transition: none; }
}

.atrium-ts__pager,
.atrium-ts__arrow { position: relative; z-index: 3; }
.atrium-ts__arrow { position: absolute; }

.atrium-ts__photo {
	position: relative;
	display: block;
	width: 85px;
	height: 85px;
	margin: 0 auto 20px;
	overflow: hidden;
	border-radius: 50%;
	background: #8c5a42;   /* brown badge behind the photo */
	line-height: 0;
}

.atrium-ts__initials {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1;
}

.atrium-ts__photo img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.atrium-ts__photo.is-broken img { display: none; }

.atrium-ts__quote {
	margin-bottom: 20px;
	padding: 0 40px 1px;
	text-align: center;
}

.atrium-ts--photos .atrium-ts__quote { margin: 0 6% 20px; padding: 0 0 1px; }

.atrium-ts__quote blockquote {
	margin: 0 0 25px;
	padding: 0;
	border: 0;
	color: #444;
	font-size: 17px;
	font-style: italic;
	line-height: 25px;
	text-align: center;
	quotes: none;
}

.atrium-ts__quote blockquote::before,
.atrium-ts__quote blockquote::after { content: none; }

.atrium-ts__dots {
	margin: 0 auto 15px;
	text-align: center;
	line-height: 0;
}

.atrium-ts__dots span {
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 5px;
	border-radius: 5px;
	background: #1363df;
}

.atrium-ts__author { text-align: center; }

.atrium-ts__name { margin: 0 0 2px; }
.atrium-ts__name a { color: inherit; text-decoration: none; }
.atrium-ts__name a:hover { color: var(--theme-link-hover-color); }
.atrium-ts__company { display: block; color: #3a3a3a; }

.atrium-ts__arrow {
	position: absolute;
	top: 30px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--ts-arrow-radius);
	background: var(--ts-arrow-bg);
	color: var(--ts-arrow-color);
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease;
}

.atrium-ts__arrow--prev { left: 0; }
.atrium-ts__arrow--next { right: 0; }
.atrium-ts__arrow:hover { opacity: .85; }

.atrium-ts a:focus-visible,
.atrium-ts button:focus-visible,
.atrium-ts:focus-visible {
	outline: 2px solid #1363df;
	outline-offset: 2px;
}

.atrium-ts__pager {
	margin-top: 30px;
	text-align: center;
	line-height: 0;
}

.atrium-ts__pager-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 4px 8px;
	padding: 0;
	border: 0;
	border-radius: 100%;
	background: rgba(0, 0, 0, .15);
	cursor: pointer;
	transition: background-color .2s ease;
}

.atrium-ts__pager-dot:hover { background: rgba(0, 0, 0, .25); }
.atrium-ts__pager-dot.is-active { background: #1363df; }

@media (max-width: 959.98px) {
	.atrium-ts__quote blockquote { font-size: 15px; }
}

@media (max-width: 767.98px) {
	.atrium-ts__quote blockquote { font-size: 14px; }
}

@media (max-width: 479.98px) {
	.atrium-ts__quote blockquote { font-size: 13px; }
	.atrium-ts__slide { padding: 0; }
	.atrium-ts__arrow { display: none; }
	.atrium-ts__quote { padding: 0; }
}


/* Simple testimonial grid (inc/testimonials.php while the slider migration is
   switched off; the markup used before commit a757125). */
.atrium-testimonials {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.atrium-testimonial {
	margin: 0;
	padding: 20px;
	border-radius: 8px;
	background: #f2f2f2;
}

.atrium-testimonial__photo img {
	width: 85px;
	height: 85px;
	margin-bottom: 10px;
	border-radius: 50%;
	object-fit: cover;
}

.atrium-testimonial__author { margin-top: 10px; }