/*
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> */
	.bl-utilbar p{ white-space: nowrap; }            /* keep it on one line */
}

/* ---- 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; }
}

/* ---- 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). */
.bl-logo{
	display: inline-grid;
	grid-template-columns: auto auto;
	row-gap: 4px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 42px;
	line-height: 1;
	letter-spacing: -1.5px;
	text-decoration: none;
	white-space: nowrap;
}
.bl-logo .bl-best{ grid-column: 1; grid-row: 1; color: var(--wp--preset--color--navy, #101f46); }
.bl-logo .bl-line{ grid-column: 2; grid-row: 1; color: var(--wp--preset--color--accent, #f4762a); }
/* "Solutions" fitted under BEST, colored to match BEST */
.bl-logo .bl-tag-solutions{
	grid-column: 1;
	grid-row: 2;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	text-align: justify;
	text-align-last: justify;
	text-justify: inter-character;
	color: var(--wp--preset--color--navy, #101f46);
	/* nudge right by B's side bearing so the first S's left edge aligns with
	   the B's left edge (justify keeps the last S pinned at T's end) */
	box-sizing: border-box;
	padding-left: 2px;
}
/* Safari has no text-justify support, so SOLUTIONS would sit unstretched at
   its natural width there. Approximate the spread with letter-spacing
   (tuned per logo size: header 42px / footer 38px / mobile 34px). */
@supports not (text-justify: inter-character) {
	.bl-logo .bl-tag-solutions{
		text-align: left;
		text-align-last: auto;
		letter-spacing: 5px;
	}
	footer.wp-block-template-part .bl-logo .bl-tag-solutions{ letter-spacing: 3.9px; }
	@media (max-width: 600px){
		.bl-logo .bl-tag-solutions{ letter-spacing: 2.8px; }
	}
}
/* "Pulse line" under LINE (orange). width:0 + min-width:100% lets it fill the
   LINE column without growing it past the wordmark. The left pad (~L's side
   bearing) starts the line at the L's left edge; the spike is centered in the
   resulting L->E line (SVG peak at viewBox x=60). Ends at E. */
.bl-logo .bl-pulse{
	grid-column: 2;
	grid-row: 2;
	align-self: center;
	box-sizing: border-box;
	width: 0;
	min-width: calc(100% + 0.5px);   /* +0.5px so the right end reaches E's ink (sits just past the LINE box) */
	padding-left: 0.048em;            /* left end starts at the L's ink */
	line-height: 0;
	transform: translateY(-4px);      /* raise the line up a touch */
	color: var(--wp--preset--color--accent, #f4762a);
}
.bl-logo .bl-pulse svg{ display: block; width: 100%; height: 13px; overflow: visible; }
/* flat caps so the line ends exactly at L and E (round caps overhang ~half the
   stroke); the spike corners stay rounded via stroke-linejoin on the polyline */
.bl-logo .bl-pulse polyline{ stroke-linecap: butt; }
/* base line is always solid (logo never looks broken); a bright glint sweeps
   along it like a heart monitor, tracing the whole name and the spike. */
.bl-logo .bl-pulse .bl-pulse-scan{
	stroke-dasharray: 8 200;     /* one short lit segment, length 8 of pathLength 100 */
	stroke-dashoffset: 10;
	filter: drop-shadow(0 0 1.5px var(--wp--preset--color--accent, #f4762a));
	animation: bl-pulse-scan 2.6s linear infinite;
}
@keyframes bl-pulse-scan{
	0%   { stroke-dashoffset: 10; }     /* glint waiting just off the left edge */
	60%  { 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 .bl-pulse-scan{ animation: none; stroke: transparent; }
}
/* Footer sits on navy: BEST + "Solutions" flip to white (pulse stays orange) */
footer.wp-block-template-part .bl-logo .bl-best{ color: #fff; }
footer.wp-block-template-part .bl-logo .bl-tag-solutions{ color: #fff; }
footer.wp-block-template-part .bl-logo{ font-size: 38px; }
@media (max-width: 600px){ .bl-logo{ font-size: 34px; } }

/* 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 ----
   Brand accent #f4762a with white text measures ~2.8:1 — below WCAG even for
   large text. Buttons (and only buttons) use a slightly deeper CTA orange
   (#d95f14, ~3.8:1). Brand accents elsewhere (pulse line, LINE wordmark,
   stat band) keep the original orange. theme.json sets the same color for
   default buttons; this rule covers buttons authored with the accent
   background class. */
.wp-block-button__link.has-accent-background-color{
	background-color: #d95f14;
}

/* ---- 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: #d95f14 !important;  /* CTA orange — see Button contrast note */
	color: #fff !important;
	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); }

/* ---- 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-block;
	margin: 4px 3px;
	padding: 5px 13px;
	border: 1px solid #e3e9f1;
	border-radius: 999px;
	background: #fff;
	color: #5b6478;
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 600;
	transition: border-color .15s ease, color .15s ease;
}
.bl-badges a:hover{
	border-color: var(--wp--preset--color--primary, #086abd);
	color: var(--wp--preset--color--primary, #086abd);
}