/*
Theme Name: SBD Classic
Theme URI: https://www.shebitzlaw.com/
Author: ASAP WebWorks
Description: Faithful WordPress recreation of the Shebitz Berman & Delforte, P.C. concrete5 site (SBCD2015 / "Florida" base). Layout, grid, typography and colour are carried over from the original stylesheets, which are enqueued from assets/legacy-css/.
Version: 1.0.0
License: Proprietary - client work
Text Domain: sbd-classic
*/

/* ------------------------------------------------------------------
 * This file holds ONLY the additions and corrections layered on top of
 * the original SBCD2015 stylesheets. The originals are enqueued first
 * (see functions.php) and are not edited, so the base design stays
 * byte-identical to the site being replaced.
 * ---------------------------------------------------------------- */


/* --- WordPress body classes mapped onto the legacy "current" class ---
 * The legacy markup marked the active nav item with .current; WordPress
 * emits .current-menu-item / .current-menu-ancestor instead.
 * ------------------------------------------------------------------ */
#nav > li.current-menu-item:after,
#nav > li.current-menu-ancestor:after,
#nav > li.current-menu-parent:after,
#nav > li.current_page_item:after {
	display: block;
	float: left;
	content: "";
	width: 100%;
	height: 4px;
	background: #0093d0;
	bottom: 0;
	margin-bottom: -4px;
}

#nav ul li.current-menu-item > a,
#nav ul li.current-menu-ancestor > a {
	color: #0093d0;
}

#side-nav li.current-menu-item > a,
#side-nav li.current-menu-item > a:after,
#side-nav li.current-menu-ancestor > a,
#side-nav li.current-menu-ancestor > a:after {
	color: #0093d0;
}


/* ==================================================================
 * FIX-2 — "Developmental Disability Agencies" must read in full.
 *
 * The legacy dropdown was a fixed 182px wide and pinned each row to a
 * 24px single line, so the longest practice-area name was clipped.
 * Widen the dropdown and let rows wrap to as many lines as they need.
 * ================================================================== */
#nav ul {
	width: 260px;
	padding-left: 14px;
	padding-right: 8px;
}

#nav ul li a,
#nav ul li:hover > a {
	height: auto;          /* was a hard 24px */
	line-height: 1.35;
	white-space: normal;   /* allow wrapping */
	padding: 9px 6px 9px 0;
}

/* Third-level flyouts sit beside the (now wider) second level. */
#nav ul li ul {
	margin: -44px 0 0 260px;
	width: 240px;
}

/* Keep the last menu item's dropdown on screen. */
#nav > li:last-child ul {
	left: auto;
	right: 0;
}

/* The legacy sheet draws a caret on parent items via #nav li.submenu:after,
 * but #nav li is not positioned at desktop, so the caret escaped to the top
 * of the header. The original site showed no caret at desktop; keep it that
 * way and let the mobile rules re-enable it inside the drawer. */
@media only screen and (min-width: 768px) {
	#nav li.submenu:after {
		content: none;
		display: none;
	}
}

@media only screen and (max-width: 767px) {
	#nav li.submenu { position: relative; }
}

/* Back-to-top button: the legacy rule hides the inner <a>, so reveal it
 * on the anchor rather than the wrapper. */
#scroll-top a { display: none; }
#scroll-top.is-visible a { display: block; }

/* Side menus: same problem, same cure. */
#side-nav a {
	white-space: normal;
	line-height: 1.35;
	padding-right: 18px;   /* room for the chevron */
	position: relative;
}

#side-nav a:after {
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -5px;
	float: none;
}

@media only screen and (max-width: 767px) {
	#nav ul,
	#nav ul li ul {
		width: auto;
		margin: 0;
		padding-left: 10px;
	}
}


/* ==================================================================
 * FIX-1 — the Attorneys side menu lists the four attorneys.
 * (Handled in the section-menu code; these are just presentation
 * touches so a longer list still reads well.)
 * ================================================================== */
#side-nav .well > h2 {
	padding-left: 10px;
	color: #555;
	font-size: 20px;
	font-weight: bolder;
	margin-bottom: 6px;
}


/* ------------------------------------------------------------------
 * Homepage hero. Reproduces the single-slide LayerSlider stage from
 * the original theme (same photograph, same copy, same entrance
 * timings) without the commercial slider library.
 * ---------------------------------------------------------------- */
.sbd-hero {
	position: relative;
	width: 100%;
	height: 530px;
	overflow: hidden;
	background: #22303a;
}

.sbd-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
}

.sbd-hero__slide.is-active {
	opacity: 1;
}

.sbd-hero__bg {
	position: absolute;
	inset: 0;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.sbd-hero__inner {
	position: relative;
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.sbd-hero__phone {
	position: absolute;
	top: 12px;
	right: 20px;
	padding: 8px 12px;
	background-color: rgba(255, 255, 255, .7);
	font-size: 14px;
	line-height: 17px;
	z-index: 3;
}

.sbd-hero__phone a {
	color: #777;
	font-size: 14px;
	font-weight: bold;
}

.sbd-hero__phone a:hover {
	color: #0093d0;
}

.sbd-hero__title {
	position: absolute;
	top: 78px;
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	color: #3366ff;
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	font-size: 68px;
	line-height: 1;
	letter-spacing: 2px;
}

.sbd-hero__lead {
	position: absolute;
	top: 200px;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 980px;
	padding: 20px 24px;
	background-color: rgba(255, 255, 255, .7);
	color: #3366ff;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 24px;
	line-height: 1.35;
}

.sbd-hero__cta {
	position: absolute;
	top: 400px;
	left: 0;
	right: 0;
	text-align: center;
}

.sbd-hero__cta a {
	display: inline-block;
	padding: 13px 30px;
	background: #0093d0;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .3px;
	border-radius: 3px;
	text-decoration: none;
	transition: background .15s ease-in-out;
}

.sbd-hero__cta a:hover {
	background: #007dc1;
	color: #fff;
}

/* Entrance animations: same durations and delays as the original layers.
 *
 * The resting state of every layer is fully visible. The animation is added
 * by JavaScript (the .is-animating class) and removed again once it has had
 * time to finish, so the hero copy can never be left invisible — not with
 * JavaScript off, not in a background tab where the animation timeline is
 * frozen, and not in a headless screenshot. */
.sbd-hero.is-animating .sbd-hero__slide.is-active .sbd-hero__title { animation: sbdInRight 3s cubic-bezier(.86,0,.07,1) .4s both; }
.sbd-hero.is-animating .sbd-hero__slide.is-active .sbd-hero__lead  { animation: sbdInUp    3s cubic-bezier(.86,0,.07,1) .5s both; }
.sbd-hero.is-animating .sbd-hero__slide.is-active .sbd-hero__cta   { animation: sbdInUp    3s cubic-bezier(.86,0,.07,1) .6s both; }
.sbd-hero.is-animating .sbd-hero__slide.is-active .sbd-hero__phone { animation: sbdInDown  1.5s ease-out both; }

@keyframes sbdInRight { from { opacity: 0; transform: translateX(120px); } to { opacity: 1; transform: none; } }
@keyframes sbdInUp    { from { opacity: 0; transform: translateY(70px); }  to { opacity: 1; transform: none; } }
@keyframes sbdInDown  { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.sbd-hero.is-animating .sbd-hero__slide.is-active .sbd-hero__title,
	.sbd-hero.is-animating .sbd-hero__slide.is-active .sbd-hero__lead,
	.sbd-hero.is-animating .sbd-hero__slide.is-active .sbd-hero__cta,
	.sbd-hero.is-animating .sbd-hero__slide.is-active .sbd-hero__phone {
		animation: none;
	}
}

/* Hero dots, shown only when the firm adds a second slide. */
.sbd-hero__dots {
	position: absolute;
	bottom: 18px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 4;
}

.sbd-hero__dots button {
	width: 11px;
	height: 11px;
	margin: 0 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	cursor: pointer;
}

.sbd-hero__dots button.is-active {
	background: #0093d0;
}

@media only screen and (max-width: 959px) {
	.sbd-hero { height: 430px; }
	.sbd-hero__title { font-size: 48px; top: 60px; }
	.sbd-hero__lead { font-size: 18px; top: 150px; }
	.sbd-hero__cta { top: 330px; }
}

@media only screen and (max-width: 767px) {
	.sbd-hero { height: auto; min-height: 380px; padding: 40px 0 50px; }
	.sbd-hero__inner { min-height: 300px; }
	.sbd-hero__phone { position: static; display: inline-block; margin-bottom: 16px; }
	.sbd-hero__title { position: static; font-size: 38px; margin-bottom: 16px; }
	.sbd-hero__lead { position: static; font-size: 16px; margin-bottom: 20px; }
	.sbd-hero__cta { position: static; }
}


/* ------------------------------------------------------------------
 * Interior page banner
 * ---------------------------------------------------------------- */
/* .blox from the legacy sheet sets its own padding; match its specificity
 * so the banner keeps room for the phone box above the heading. */
.sbd-banner,
.blox.sbd-banner {
	position: relative;
	background-color: #384852;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 78px 0 46px;
}

/* The three banner photographs vary a lot in brightness, and the title
 * is white. A light scrim keeps it readable on all of them. */
.sbd-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 28, 38, .52) 0%, rgba(16, 28, 38, .38) 60%, rgba(16, 28, 38, .5) 100%);
}

.sbd-banner .container {
	position: relative;
	z-index: 1;
}

.sbd-banner h2,
.sbd-banner h4 {
	text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.sbd-banner h2 {
	color: #fff;
	margin: 0;
	font-weight: 300;
}

.sbd-banner h2 strong {
	font-weight: 300;
}

.sbd-banner h4 {
	color: rgba(255, 255, 255, .85);
	margin: 6px 0 0;
	font-weight: 300;
}

.sbd-banner__phone {
	position: absolute;
	top: -46px;
	right: 0;
	padding: 10px;
	background-color: rgba(255, 255, 255, .7);
	font-size: 14px;
	line-height: 17px;
}

.sbd-banner__phone a {
	color: #777;
	font-size: 14px;
	font-weight: bold;
}

@media only screen and (max-width: 767px) {
	.sbd-banner { padding: 34px 0 28px; }
	.sbd-banner__phone { position: static; display: inline-block; margin-bottom: 14px; }
}


/* ------------------------------------------------------------------
 * Attorney and practice-area listings
 * ---------------------------------------------------------------- */
.sbd-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.sbd-list > li {
	padding: 14px 0;
	border-bottom: 1px solid #eaeaea;
}

.sbd-list > li:last-child {
	border-bottom: 0;
}

.sbd-list h4 {
	margin: 0 0 4px;
	font-size: 18px;
}

.sbd-list h4 a {
	color: #444;
}

.sbd-list h4 a:hover {
	color: #0093d0;
}

.sbd-list p {
	margin: 0;
	color: #777;
	font-size: 13px;
}


/* ------------------------------------------------------------------
 * SBD Chalkboard
 * ---------------------------------------------------------------- */
.sbd-chalk-list {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.sbd-chalk-list > li {
	padding: 0 0 22px;
	margin-bottom: 22px;
	border-bottom: 1px solid #eaeaea;
}

.sbd-chalk-list > li:last-child {
	border-bottom: 0;
}

.sbd-chalk-list h4 {
	margin: 0 0 6px;
	font-size: 19px;
	line-height: 1.3;
}

.sbd-chalk-list h4 a {
	color: #0093d0;
}

.sbd-chalk-list h4 a:hover {
	color: #007dc1;
}

.sbd-chalk-date {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: bold;
	color: #555;
}

.sbd-chalk-excerpt {
	margin: 0 0 6px;
	color: #666;
}

.sbd-readmore {
	font-style: italic;
	font-size: 13px;
}

.sbd-single-date {
	margin: 6px 0 14px;
	font-weight: bold;
	font-size: 16px;
}

.sbd-single-author {
	font-style: italic;
	color: #777;
}

.sbd-backlink {
	float: right;
	margin-left: 20px;
}

.sbd-nextprev {
	margin-top: 34px;
	padding-top: 16px;
	border-top: 1px solid #eaeaea;
	overflow: hidden;
	font-size: 13px;
}

.sbd-nextprev .prev { float: left; }
.sbd-nextprev .next { float: right; }


/* ------------------------------------------------------------------
 * Contact form (styles shared with the plugin markup)
 * ---------------------------------------------------------------- */
.sbd-hp {
	position: absolute !important;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sbd-form .sbd-row-2 {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.sbd-form .sbd-row-2 > .sbd-field {
	flex: 1 1 220px;
	min-width: 0;
}

.sbd-form .sbd-field {
	margin: 0 0 16px;
}

.sbd-form label,
.sbd-form legend {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: #555;
}

.sbd-form .sbd-req {
	color: #c0392b;
}

.sbd-form input[type="text"],
.sbd-form input[type="tel"],
.sbd-form input[type="email"],
.sbd-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 10px;
	border: 1px solid #d8d8d8;
	border-radius: 2px;
	background: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	color: #555;
}

.sbd-form input:focus,
.sbd-form textarea:focus {
	border-color: #0093d0;
	outline: 0;
}

.sbd-form fieldset.sbd-radios {
	border: 0;
	padding: 0;
	margin: 0 0 16px;
}

.sbd-form .sbd-radio {
	display: inline-block;
	margin-right: 18px;
	font-weight: 400;
}

.sbd-form .sbd-radio input {
	margin-right: 6px;
}

.sbd-button {
	display: inline-block;
	padding: 11px 28px;
	border: 0;
	border-radius: 3px;
	background: #0093d0;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s ease-in-out;
}

.sbd-button:hover {
	background: #007dc1;
}

.sbd-form-notice {
	padding: 14px 16px;
	margin-bottom: 20px;
	border-radius: 3px;
	border-left: 4px solid;
}

.sbd-form-notice p {
	margin: 0;
}

.sbd-form-success {
	background: #eaf7ed;
	border-color: #2e9e50;
	color: #1d6b36;
}

.sbd-form-error {
	background: #fdeceb;
	border-color: #c0392b;
	color: #922b21;
}

.sbd-form-error ul {
	margin: 8px 0 0 18px;
}


/* ------------------------------------------------------------------
 * Small corrections
 * ---------------------------------------------------------------- */
.sbd-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 10px 16px;
	background: #fff;
	color: #0093d0;
}

.sbd-skip-link:focus {
	left: 10px;
	top: 10px;
}

#side-content article img {
	max-width: 100%;
	height: auto;
}

.sbd-entry-content ul,
.sbd-entry-content ol {
	margin-left: 22px;
}

.sbd-entry-content p {
	margin-bottom: 14px;
}

.white-space {
	clear: both;
	height: 60px;
}