/*
Theme Name: BestLine (Unibiz Child)
Theme URI: https://bestline.net
Description: Child theme of Unibiz for the BestLine marketing site. Holds the single, intentional override layer (design tweaks, custom CSS) so Unibiz updates never clobber customizations. Replaces the old "bestline-static" (Travele) hack. Edited via the block editor + Gutenverse.
Author: BestLine Solutions
Template: unibiz
Version: 0.1.0
*/

/* Custom styles live here. Keep this lean — prefer Gutenverse Global Styles and
   theme.json/global settings over CSS overrides. The old site rotted because of a
   199KB override stylesheet; do not recreate it. */

/* Sticky header: keep the navbar pinned to the top while scrolling. The header
   template part renders as <header class="wp-block-template-part">. */
header.wp-block-template-part{
	position: sticky !important;   /* beat any theme/nfd position rule */
	top: 0 !important;
	z-index: 1000 !important;       /* beat nfd's z-index:1 on headers */
	background: #fff;
	/* soft shadow instead of a hard 1px line; only reads when scrolling over light content */
	box-shadow: 0 2px 10px rgba(16, 31, 70, 0.06);
}

/* Remove the template's 40px top padding so full-bleed hero sits flush under the nav.
   Our pages lead with sections that carry their own internal spacing. */
.wp-site-blocks > main{
	padding-top: 0 !important;
}

/* ---- Utility bar (navy strip above the nav) ----
   Desktop/tablet: phone · hours · 24/7 Emergency Support (left) + email (right).
   On phones that all wraps into a messy stack, so collapse to a single centered
   tap-to-call line: "(512) 328-9095 · 24/7". Hours + email live in the footer. */
.bl-utilbar .util-email-m{ display: none; }        /* inline email, mobile only */
@media (max-width: 600px){
	.bl-utilbar{ justify-content: center !important; }
	.bl-utilbar .util-extra{ display: none; }      /* hide hours + 24/7 text */
	.bl-utilbar .util-email-m{ display: inline; }   /* show "phone · email" */
	.bl-utilbar .util-email{ display: none; }        /* hide the separate desktop email <p> */
	/* allow the "phone · email" line to wrap to two centered lines on narrow
	   phones (~320px) instead of forcing one line that overflowed horizontally */
	.bl-utilbar p{ line-height: 1.5; }
}

/* ---- Header nav row ----
   Desktop: logo (left) + menu and Pay Invoice (right).
   Mobile: nav collapses to a hamburger — put it to the LEFT of the logo,
   keep Pay Invoice on the right. */
.bl-navrow{ gap: 24px; }
.bl-navrow .wp-block-navigation{ margin-left: auto; }   /* push menu + button to the right */
.bl-navrow .wp-block-button__link{ white-space: nowrap; }  /* never break "Pay Invoice" mid-word */
/* Collapse to the hamburger drawer up to tablet width (860px). Above ~810px the
   full horizontal menu wraps to two lines (Contact Us drops, Pay Invoice breaks),
   so iPad-portrait and smaller get the clean left drawer; the full menu only
   appears from ~861px up, where it has room for one tidy row. */
@media (max-width: 860px){
	.bl-navrow{ gap: 14px; }
	.bl-navrow .wp-block-navigation{ order: -1; margin-left: 0; }  /* hamburger far left (matches the left drawer) */
	.bl-navrow .wp-block-buttons{ margin-left: auto; }              /* Pay Invoice to the right */
	/* Override the nav block's own 600px breakpoint: keep it collapsed to the
	   hamburger and hide the inline horizontal menu until the drawer is opened. */
	.bl-navrow .wp-block-navigation__responsive-container-open:not(.always-shown){ display: flex !important; }
	.bl-navrow .wp-block-navigation__responsive-container:not(.is-menu-open){ display: none !important; }
	.bl-navrow .wp-block-navigation__responsive-container-close{ display: block !important; }
}
/* Very narrow phones (≤380px, e.g. iPhone SE): the 34px logo + Pay Invoice
   button overrun the row and force horizontal page scroll. Shrink both so the
   header fits within the viewport. */
@media (max-width: 380px){
	.bl-navrow{ gap: 8px; }
	.bl-navrow .wp-block-button__link{ padding-left: 0.8rem; padding-right: 0.8rem; font-size: 13px; }
	/* logo font-size override lives after the ≤600px rule below (source order) */
}

/* ---- Mobile menu: right-side drawer instead of a full-screen takeover ----
   The WP Navigation overlay defaults to a fixed, full-viewport navy panel.
   Reshape it to a right drawer (max 320px) and dim the rest of the page with
   a huge box-shadow, with dividers + comfortable tap rows. */
@media (max-width: 860px){
	/* the container is a full-screen dim backdrop that captures outside clicks */
	.wp-block-navigation__responsive-container.is-menu-open{
		background-color: rgba(8, 14, 32, 0.55) !important;
	}
	/* the dialog is the right-side drawer */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{
		position: fixed;
		top: 0; left: 0; bottom: 0; right: auto;
		width: max-content;       /* hug the widest (unwrapped) menu item */
		max-width: 90vw;
		margin: 0;
		padding: 4.25rem 1.5rem 1.75rem;
		background-color: #0d1b40;
		box-shadow: 10px 0 34px rgba(0, 0, 0, 0.4);
		overflow-y: auto;
	}
	/* stacked rows with hairline dividers (full-width via flex stretch) */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item{
		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
		display: block;
		white-space: nowrap;       /* no wrapping, so max-content = true menu width */
		padding-top: 0.72rem;
		padding-bottom: 0.72rem;
	}
	/* indent + soften the Services sub-items */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
		padding-left: 0.85rem;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
		padding-top: 0.55rem;
		padding-bottom: 0.55rem;
		font-size: 0.95rem;
		opacity: 0.85;
	}
}

/* ---- Hero background ----
   The photo is loaded as a CSS background ONLY on desktop/tablet (>=601px),
   so phones never download it (faster mobile load). On phones the hero is a
   solid color: the #80858c base under the existing 80% navy overlay renders
   as #263354 — the same color the photographed hero shows. Path is relative
   to this stylesheet so it survives the staging->bestline.net cutover. */
.wp-block-cover.bl-hero{ background-color: #80858c; }
@media (min-width: 601px){
	.wp-block-cover.bl-hero{
		background-image: url('../../uploads/2026/06/bestline-hero.jpg');
		background-size: cover;
		background-position: center;
	}
}

/* ---- Concept A wordmark + Concept C "Pulse Line" ----
   2-column grid aligned to the wordmark:
     row 1:  BEST      | LINE
     row 2:  SOLUTIONS | ~pulse~
   "SOLUTIONS" sits under BEST (justified inter-character to BEST's width).
   The orange EKG pulse line sits under LINE and stretches to fill its width
   (Concept C: a flat line interrupted by a signal spike). */
/* Full traced brand art inlined by [bestline_logo] (assets/bestline-logo.svg).
   The SVG's navy paths are fill:currentColor (this color), so the footer can
   flip them white; the LINE + longhorn path carries the accent var itself.
   font-size drives the rendered width (em-based), so the existing footer and
   mobile size overrides below keep working unchanged. */
.bl-logo{
	display: inline-block;
	font-size: 42px;
	line-height: 0;
	text-decoration: none;
	color: var(--wp--preset--color--navy, #101f46);
}
.bl-logo svg{ display: block; width: 4.9em; height: auto; overflow: visible; }
/* the logo art is always solid (never looks broken); a bright glint sweeps
   along the longhorn like a heart monitor. */
/* The glint MUST NOT use vector-effect:non-scaling-stroke (it did until
   2026-08-05). With it, the dash pattern is measured in rendered pixels while
   the path is in user units, so `pathLength="100"` stops normalizing and the
   numbers below silently mean something else: dash 8 lit ~80% of the horn, not
   8%, and the lit length changed with logo size (worse on the 25px mobile
   logo). The sweep range also became ~12x the path, so the glint was off-path
   for most of the cycle and the "sweep" was really a 0.13s flash of a huge
   white blob. The scan path now scales with the SVG (stroke-width 24 user
   units ~= 2.4px at the 42px header logo), so dash 8 really is 8% of the horn
   at every size and the sweep below traverses it smoothly.
   Verified by freezing the animation and measuring orange pixel loss. */
.bl-logo .bl-pulse-scan{
	stroke-dasharray: 8 200;     /* one short lit segment, length 8 of pathLength 100 */
	stroke-dashoffset: 10;
	/* No drop-shadow filter: it's a paint-triggering property on a forever-
	   looping animation in the sticky header, so it repainted the SVG every
	   frame for the life of the tab. The dashoffset sweep alone reads fine. */
	animation: bl-pulse-scan 2.6s linear infinite;
}
/* Sweep ends at 39%, not 60%. Before pathLength normalization was fixed the
   horn measured only ~10 dash-units, so the glint crossed it in a ~0.13s blink
   and sat idle the rest of the cycle. Normalizing made the path a full 100
   units, which at the old 60% timing stretched the crossing to ~1.32s — a
   noticeably slower drift than the mark used to have.
   The pre-longhorn flat pulse (commit 90b09d7) measured 65 dash-units and swept
   118 units over 1.56s = 75.6 units/s, so it crossed in ~0.86s. Matching that
   crossing time on a 100-unit path needs 116 units/s, i.e. the 118-unit sweep
   in ~1.01s = 39% of the 2.6s cycle. Same travel speed as the original mark,
   with the remaining 61% as the pause. */
@keyframes bl-pulse-scan{
	0%   { stroke-dashoffset: 10; }     /* glint waiting just off the left edge */
	39%  { stroke-dashoffset: -108; }   /* swept all the way across and off the right */
	100% { stroke-dashoffset: -108; }   /* pause before the next sweep */
}
/* respect reduced-motion: no sweep, just the solid line */
@media (prefers-reduced-motion: reduce){
	.bl-logo .bl-pulse-scan{ animation: none; stroke: transparent; }
}
/* Footer sits on navy: navy art (BEST + SOLUTIONS) flips to white via
   currentColor; the orange LINE + longhorn carries its own accent fill. */
footer.wp-block-template-part .bl-logo{ color: #fff; font-size: 38px; }
@media (max-width: 600px){ .bl-logo{ font-size: 34px; } }
/* ≤380px override must follow the ≤600px rule to win on source order */
@media (max-width: 380px){ .bl-logo{ font-size: 25px; } }

/* Footer link lists: no bullets. Was inline list-style:none in the markup,
   which isn't representable in list-block attrs and made the editor flag the
   block as invalid ("Attempt recovery" would resurrect the bullets). */
.bl-footer-list{ list-style: none; }

/* ---- Button contrast ----
   Buttons use the brand accent #ec6f1c (matching the logo/eyebrows). White on
   this accent is ~3.06:1 — that clears WCAG AA for LARGE text (>=18.66px bold),
   but the buttons render at 15px bold, so as normal text they're still below
   the 4.5:1 bar. A deliberate brand-over-contrast call for the CTA buttons;
   the "Request a Consultation" buttons instead use navy text (5.2:1, passes).
   theme.json sets the same accent for default buttons; this rule covers buttons
   authored with the accent background class. */
.wp-block-button__link.has-accent-background-color{
	background-color: var(--wp--preset--color--accent, #ec6f1c) !important;
}
.wp-block-button__link.has-accent-background-color:hover{
	filter: brightness(0.93);
}

/* ---- Fluent Forms styling (brand-matched, same look as the reference) ---- */
.fluentform .ff-el-input--label label{
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--wp--preset--color--navy, #101f46);
	margin-bottom: 5px;
}
.fluentform .ff-el-group{ margin-bottom: 14px; }
.fluentform .ff-el-form-control{
	width: 100%;
	padding: 11px 13px;
	border: 1px solid #d8dfea;
	border-radius: 7px;
	background: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	color: #1c2435;
	box-shadow: none;
}
.fluentform .ff-el-form-control:focus{
	border-color: var(--wp--preset--color--primary, #086abd);
	/* solid, visible focus ring (WCAG 2.4.7) — the old 15% rgba was invisible */
	outline: 2px solid var(--wp--preset--color--primary, #086abd);
	outline-offset: 1px;
}
.fluentform textarea.ff-el-form-control{ min-height: 96px; }
.fluentform .ff-el-group.ff-text-right .ff-btn-submit,
.fluentform .ff-btn-submit{
	width: 100%;
	background-color: var(--wp--preset--color--accent, #ec6f1c) !important;  /* brand accent — see Button contrast note */
	color: #101f46 !important;  /* navy label on the accent submit (matches R-a-C buttons) */
	font-family: 'Raleway', sans-serif;
	font-weight: 800;
	font-size: 16px;
	padding: 14px 18px;
	border: 0;
	border-radius: 7px;
	cursor: pointer;
	transition: filter .15s ease;
}
.fluentform .ff-btn-submit:hover{ filter: brightness(0.93); }

/* ---- Fluent Forms status messages ----
   Fluent Forms ships `.ff-message-success` and `.ff-errors-in-stack .error`
   with padding and a border but NO `color`, so both inherit from their
   ancestor. Every embed of form 3 (home hero, /contact-us/) sits inside a navy
   `wp-block-cover`, whose white text was inherited straight onto the white
   form card — the confirmation rendered as invisible text.

   That combined badly with the form's `samePageFormBehavior: hide_form`:
   on submit the form hid itself and the only thing left was an empty bordered
   box. The lead was captured and the notification email sent, but the visitor
   saw a blank card and no confirmation. Screen-reader users were fine (FF sets
   role="status" aria-live="polite") — it was purely a visual failure.

   Both selectors are two-class (0,2,0) so they outrank FF's own single-class
   rules no matter which stylesheet the plugin loads last. Any plugin status
   message placed over a cover block needs an explicit color for this reason. */
.fluentform .ff-message-success{
	color: #14532d;
	background: #f1f9f3;
	border: 1px solid #b7dcc3;
	border-left: 4px solid #2f9e5e;
	border-radius: 8px;
	box-shadow: none;
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	line-height: 1.55;
}
.fluentform .ff-errors-in-stack,
.fluentform .ff-errors-in-stack .error{
	color: #8c1c13;
}
.fluentform .ff-errors-in-stack{
	background: #fdf3f2;
	border: 1px solid #f0c8c4;
	border-left: 4px solid #c0392b;
	border-radius: 8px;
	padding: 12px 14px;
}

/* ---- Restore markers on content lists ----
   The PARENT theme's preset.css sets a blanket `ul > li{list-style:none}`, which
   strips bullets from every list in page content site-wide — the legal pages and
   the brand page's usage notes all rendered as unmarked indented lines. Scoped
   to `.wp-block-list` (the class WP puts on list blocks) so navigation menus and
   our own deliberately unmarked lists (.bl-swatches, .bl-brand-dl) are untouched. */
ul.wp-block-list > li{ list-style: disc; }
ol.wp-block-list > li{ list-style: decimal; }
ul.wp-block-list ul > li{ list-style: circle; }

/* ---- Brand assets page (/brand/) ----
   Download rows for marketing and ad agencies. Each asset previews on the
   background it is actually meant for, because the whole point of shipping four
   lockups is that people pick the wrong one when they all sit on white. */
.bl-brand-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.5rem;
	margin: 0 0 1rem;
}
/* The logo set is 4 items; at the 1040px content width the default track size
   yields 3 columns and strands the fourth on a row of its own. Two-up keeps the
   rows even and gives the lockups more room, which they need more than the
   icons do. */
.bl-brand-grid.is-2up{ grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
@media (max-width: 900px){
	.bl-brand-grid.is-2up{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
.bl-brand-item{ border: 1px solid var(--wp--preset--color--hairline, #e3e7ee); border-radius: 10px; overflow: hidden; }
.bl-brand-prev{
	display: flex; align-items: center; justify-content: center;
	padding: 1.6rem 1.4rem; min-height: 118px; background: #fff;
	border-bottom: 1px solid var(--wp--preset--color--hairline, #e3e7ee);
}
.bl-brand-prev.is-dark{ background: #101f46; }
.bl-brand-prev.is-check{
	/* Chequerboard makes the transparent PNG background legible at a glance. */
	background-image: linear-gradient(45deg, #eef0f4 25%, transparent 25%),
		linear-gradient(-45deg, #eef0f4 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #eef0f4 75%),
		linear-gradient(-45deg, transparent 75%, #eef0f4 75%);
	background-size: 16px 16px;
	background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.bl-brand-prev img{ max-width: 100%; height: auto; display: block; }
.bl-brand-prev img.is-mark{ width: 76px; }
.bl-brand-body{ padding: 1rem 1.15rem 1.15rem; }
.bl-brand-name{
	font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 1rem;
	color: var(--wp--preset--color--navy, #101f46); margin: 0 0 .3rem;
}
.bl-brand-note{ font-size: .92rem; line-height: 1.5; color: #5b6478; margin: 0 0 .8rem; }
.bl-brand-dl{ display: flex; flex-wrap: wrap; gap: .5rem; }
.bl-brand-dl a{
	font-family: 'Raleway', sans-serif; font-weight: 700; font-size: .78rem;
	letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
	color: var(--wp--preset--color--navy, #101f46);
	border: 1px solid var(--wp--preset--color--hairline, #d8dfea);
	border-radius: 6px; padding: .5rem .75rem; min-height: 34px;
	display: inline-flex; align-items: center; transition: background .15s ease, border-color .15s ease;
}
.bl-brand-dl a:hover, .bl-brand-dl a:focus-visible{
	background: var(--wp--preset--color--accent, #ec6f1c);
	border-color: var(--wp--preset--color--accent, #ec6f1c);
	color: #101f46;
}
.bl-swatches{ display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.bl-swatch{ flex: 1 1 150px; }
.bl-swatch span{ display: block; height: 74px; border-radius: 8px; border: 1px solid rgba(16,31,70,.12); }
.bl-swatch b{
	display: block; font-family: 'Raleway', sans-serif; font-size: .9rem;
	color: var(--wp--preset--color--navy, #101f46); margin-top: .55rem;
}
.bl-swatch code{ font-size: .82rem; color: #5b6478; }

/* ---- Product photo cards (Phones We Deploy band) ----
   The product images ship on a white background; a radius + soft shadow makes
   each read as a floating card on the white band. */
.bl-phone-img img{
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(16, 31, 70, 0.10);
	width: 100%;
	height: auto;
}
/* Centered wrapping grid so an odd number of phone cards (5) wraps to a tidy
   3 + 2 with the short row centered, instead of left-aligned columns. */
.bl-phone-grid{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.5rem 2rem;
}
.bl-phone-grid > .wp-block-group{ width: 300px; max-width: 100%; }

/* ---- Verkada product cards (Cloud Physical Security page) ----
   Each card: a device render sitting on a subtle surface panel (so the
   transparent product PNGs read as a floating photo on the white band),
   then a title + short blurb. Fixed-width flex cards wrap 3-up on desktop,
   2-up on tablet, 1-up on mobile. */
.bl-product-grid{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;   /* top-align cards so images/headings line up across a row */
	gap: 2.25rem 1.75rem;
}
/* Zero WP's is-layout-constrained "> * + *" margin-block-start, which otherwise
   pushes every card except the first down by one blockGap and breaks row alignment. */
.bl-product-grid > .wp-block-group{ width: 340px; max-width: 100%; margin-block-start: 0; }
/* Fixed-height CONTAIN box: every device render occupies identical vertical
   space (so the cards align across a row) and is never cropped, regardless of
   the source image's native aspect ratio. White bg blends the renders' own
   white backgrounds seamlessly. */
.bl-product-img img{
	width: 100%;
	height: 210px;
	object-fit: contain;
	border-radius: 14px;
	background: #fff;
	padding: 10px;
	box-sizing: border-box;
}

/* ---- Vendor badge list (service pages) ----
   A plain paragraph of links (className "bl-badges") rendered as pill tags,
   so the block stays editor-safe core markup and marketing can edit the
   names/links as ordinary text. */
.bl-badges{ text-align: center; }
.bl-badges a{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 5px 4px;
	padding: 9px 16px;   /* ~40px tap target (was ~31px, below comfortable mobile size) */
	border: 1px solid #e3e9f1;
	border-radius: 999px;
	background: #fff;
	color: #5b6478;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
	transition: border-color .15s ease, color .15s ease;
}
/* Small partner logo/favicon before each badge name. */
.bl-badges a img{
	width: 18px;
	height: 18px;
	object-fit: contain;
	border-radius: 3px;
	flex: 0 0 auto;
}
.bl-badges a:hover,
.bl-badges a:focus-visible{
	border-color: var(--wp--preset--color--primary, #086abd);
	color: var(--wp--preset--color--primary, #086abd);
}

/* ---- FAQ accordion (core wp:details, className "bl-faq") ----
   Brand-styled to match the hairline aesthetic: navy question text, a cyan
   +/– marker, hairline dividers between rows. Native <details> = no JS,
   keyboard-accessible for free. */
.bl-faq{
	border-bottom: 1px solid var(--wp--preset--color--hairline, #e3e9f1);
}
.bl-faq summary{
	list-style: none;                 /* hide the default triangle (we draw our own) */
	cursor: pointer;
	padding: 1.15rem 2.2rem 1.15rem 0;
	position: relative;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 1.06rem;
	color: var(--wp--preset--color--navy, #101f46);
}
.bl-faq summary::-webkit-details-marker{ display: none; }
.bl-faq summary::after{
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--secondary, #1ec8e7);
}
.bl-faq[open] summary::after{ content: "\2013"; }   /* en dash when open */
.bl-faq summary:focus-visible{
	outline: 2px solid var(--wp--preset--color--primary, #086abd);
	outline-offset: 2px;
}
.bl-faq > p,
.bl-faq > .wp-block-paragraph{
	margin: 0 0 1.15rem;
	color: #4a5468;
	line-height: 1.6;
}


/* ===== Verkada landing-page-style sections (Cloud Physical Security page) ===== */

/* ---- "Why Organizations Choose Verkada" — icon + text grid ---- */
.bl-why-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.75rem 2.5rem;
	max-width: 1000px;
	margin: 0 auto;
}
.bl-why-head{
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.5rem;
}
.bl-why-item svg{
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent, #ec6f1c);
	display: block;
}
.bl-why-item h3{
	font-size: 1.12rem;
	margin: 0;
	color: var(--wp--preset--color--navy, #101f46);
}
.bl-why-item p{
	color: #5b6478;
	font-size: 0.97rem;
	line-height: 1.55;
	margin: 0;
}
@media (max-width: 820px){ .bl-why-grid{ grid-template-columns: 1fr 1fr; gap: 2.25rem 2rem; } }
@media (max-width: 520px){ .bl-why-grid{ grid-template-columns: 1fr; } }

/* ---- "Secure Every Location" — photo cards with caption below ---- */
.bl-loc-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem 2rem;
	max-width: 1000px;
	margin: 0 auto;
}
.bl-loc-card img{
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 14px;
	display: block;
}
.bl-loc-card h3{
	font-size: 1.15rem;
	margin: 0.9rem 0 0.3rem;
	color: var(--wp--preset--color--navy, #101f46);
}
.bl-loc-card p{
	color: #5b6478;
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
}
@media (max-width: 620px){ .bl-loc-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   Blog index (child theme home template)
   ============================================================ */
.bl-blog-hero{ padding: 3.75rem 1.25rem; text-align: center; }
.bl-blog-hero .bl-blog-eyebrow{
	font-size: 0.82rem; font-weight: 800; letter-spacing: 2px;
	text-transform: uppercase; margin: 0 0 0.6rem;
}
.bl-blog-hero h1{
	font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem);
	line-height: 1.1; margin: 0 0 0.85rem;
}
.bl-blog-hero p{
	color: #c5cee0; font-size: 1.1rem; line-height: 1.55;
	max-width: 640px; margin: 0 auto;
}

.bl-blog-wrap{ padding: 3.5rem 1.25rem 4.5rem; }

/* grid of post cards */
.bl-blog-grid{ margin: 0; padding: 0; list-style: none; gap: 2rem; }
.bl-blog-grid .wp-block-post{
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid #e3e9f1;
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bl-blog-grid .wp-block-post:hover{
	border-color: #cfd8e6;
	box-shadow: 0 10px 30px rgba(16, 31, 70, 0.08);
	transform: translateY(-2px);
}
.bl-blog-grid .wp-block-post-featured-image{ margin: 0; }
.bl-blog-grid .wp-block-post-featured-image img{
	width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}

/* card body */
.bl-blog-card__body{
	display: flex; flex-direction: column; gap: 0.5rem;
	padding: 1.4rem 1.5rem 1.6rem;
	flex: 1 1 auto;
}
.bl-blog-cat{
	font-size: 0.72rem; font-weight: 800; letter-spacing: 1.2px;
	text-transform: uppercase; margin: 0;
	color: var(--wp--preset--color--accent, #ec6f1c);
}
.bl-blog-cat a{ color: inherit; text-decoration: none; }
.bl-blog-cat a:hover{ text-decoration: underline; }
.bl-blog-grid .wp-block-post-title{
	font-size: 1.16rem; line-height: 1.3; font-weight: 800; margin: 0;
	color: var(--wp--preset--color--navy, #101f46);
}
.bl-blog-grid .wp-block-post-title a{ color: inherit; text-decoration: none; }
.bl-blog-grid .wp-block-post-title a:hover{ color: var(--wp--preset--color--accent, #ec6f1c); }
.bl-blog-date{ font-size: 0.82rem; color: #8a93a6; margin: 0; }
.bl-blog-grid .wp-block-post-excerpt{ margin: 0.15rem 0 0; }
.bl-blog-grid .wp-block-post-excerpt p{
	color: #5b6478; font-size: 0.95rem; line-height: 1.55; margin: 0;
}
.bl-blog-wrap .bl-blog-grid .wp-block-post-excerpt__more-link{
	display: inline-block; margin-top: 0.7rem; width: auto;
	background: none; border: 0; border-radius: 0; padding: 0;
	font-size: 0.9rem; font-weight: 700; text-decoration: none; text-transform: none;
	color: var(--wp--preset--color--accent, #ec6f1c);
}
.bl-blog-wrap .bl-blog-grid .wp-block-post-excerpt__more-link:hover{
	background: none; color: var(--wp--preset--color--accent, #ec6f1c); text-decoration: underline;
}

/* pagination */
.bl-blog-wrap .wp-block-query-pagination{ justify-content: center; gap: 0.5rem; margin-top: 3rem; }
.bl-blog-wrap .wp-block-query-pagination a{ color: var(--wp--preset--color--navy, #101f46); text-decoration: none; }
.bl-blog-wrap .wp-block-query-pagination a:hover{ color: var(--wp--preset--color--accent, #ec6f1c); }
.bl-blog-wrap .wp-block-query-pagination .page-numbers.current{
	font-weight: 800; color: var(--wp--preset--color--accent, #ec6f1c);
}
@media (max-width: 520px){ .bl-blog-hero{ padding: 2.75rem 1.25rem; } }

/* ============================================================
   Single post (child theme single template)
   ============================================================ */
.bl-single-hero{ padding: 3.5rem 1.25rem 2.75rem; text-align: center; }
.bl-single-hero .bl-single-cat{
	font-size: 0.78rem; font-weight: 800; letter-spacing: 1.5px;
	text-transform: uppercase; margin: 0 0 0.9rem;
}
.bl-single-hero .bl-single-cat a{ color: var(--wp--preset--color--accent, #ec6f1c); text-decoration: none; }
.bl-single-hero .bl-single-cat a:hover{ text-decoration: underline; }
.bl-single-hero h1{
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
	line-height: 1.15; margin: 0 0 1rem;
}
.bl-single-date{ font-size: 0.9rem; color: #c5cee0; margin: 0; }

.bl-single-banner{ padding: 2.5rem 1.25rem 0; }
.bl-single-banner .wp-block-post-featured-image{ margin: 0; }
.bl-single-banner img{
	width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
	border-radius: 16px; display: block;
}

.bl-single-content{ padding: 2.75rem 1.25rem 3.5rem; }
.bl-single-content .wp-block-post-content{ font-size: 1.05rem; line-height: 1.75; color: #2d3444; }
.bl-single-content .wp-block-post-content h2{
	font-size: 1.55rem; line-height: 1.25; margin: 2.25rem 0 0.75rem;
	color: var(--wp--preset--color--navy, #101f46);
}
.bl-single-content .wp-block-post-content h3{
	font-size: 1.22rem; margin: 1.75rem 0 0.5rem;
	color: var(--wp--preset--color--navy, #101f46);
}
.bl-single-content .wp-block-post-content a{ color: var(--wp--preset--color--primary, #086abd); }
.bl-single-back{ margin-top: 2.75rem; font-weight: 700; }
.bl-single-back a{ color: var(--wp--preset--color--accent, #ec6f1c); text-decoration: none; }
.bl-single-back a:hover{ text-decoration: underline; }
@media (max-width: 520px){ .bl-single-hero{ padding: 2.75rem 1.25rem 2.25rem; } }

/* Contact page — Google map embed below "Reach Us Directly" */
.bl-map{ margin-top: 2.75rem; }
.bl-map iframe{
	width: 100%; height: 420px; border: 0;
	border-radius: 16px; display: block;
}
@media (max-width: 600px){ .bl-map iframe{ height: 320px; } }
/* two-column variant: map beside the contact info, fills the column height */
.bl-map-side{ margin-top: 0; height: 100%; }
.bl-map-side iframe{ height: 100%; min-height: 460px; }
@media (max-width: 781px){ .bl-map-side{ margin-top: 1.75rem; } .bl-map-side iframe{ min-height: 340px; } }

/* ============================================================
   Editor-only WYSIWYG fix — icon-chip parity
   ------------------------------------------------------------
   The hairline-grid icon chips hold their SVG in a core/html
   (Custom HTML) block. On the FRONT END that outputs raw inline
   <svg> with no wrapper, so the navy chip hugs the icon. In the
   EDITOR, WordPress previews the Custom HTML block inside a
   sandboxed <iframe> that defaults to full width, stretching the
   chip into a wide bar. WP's SandBox auto-sets the iframe HEIGHT to
   the icon's natural size (16 or 19px); aspect-ratio:1 + width:auto
   makes the WIDTH follow that height, so the sandbox becomes a
   square matching each icon and the chip fits exactly like the
   front end (47x39 for 19px icons, 38x32 for 16px). line-height/
   font-size:0 removes stray text spacing. This file is loaded as an
   editor stylesheet via add_editor_style() in functions.php; the
   `.wp-block-html` wrapper only exists in the editor, so this rule
   is a no-op on the front end.
   ============================================================ */
.wp-block-group.has-navy-background-color > .wp-block-html{
	width: auto !important; min-width: 0 !important;
	line-height: 0 !important; font-size: 0 !important; display: block !important;
}
.wp-block-group.has-navy-background-color > .wp-block-html iframe{
	aspect-ratio: 1 !important; width: auto !important;
	min-width: 0 !important; display: block !important;
}
/* The sandbox srcdoc ALSO inlines the theme's global styles, whose
   body{background-color:var(--wp--preset--color--base)} paints the sandbox
   body WHITE inside the navy chips (visible in real browsers; some headless
   builds skip the paint). This stylesheet is itself injected into the
   sandbox, and only WP sandbox bodies carry data-resizable-iframe-connected,
   so this override reaches inside every icon sandbox and nothing else. */
body[data-resizable-iframe-connected]{ background: transparent !important; }