/*
Theme Name: Rinehart Bryant
Theme URI: https://rblawva.com
Description: Modernized rebuild of the Rinehart Bryant, PLLC family law website. A block theme child of Twenty Twenty-Five — preserves the original navy-and-gold brand identity while refreshing typography, spacing, responsiveness, and accessibility.
Author: Baltzer Marketing
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rinehart-bryant
*/

/*
 * Most styling is handled by theme.json. This file holds only the small set of
 * rules that block supports can't yet express cleanly (decorative underlines,
 * the navy footer logo treatment, sticky header, and card hover states).
 */

/* Gold rule under section titles ("SERVICES", "CONTACT INFO", etc.). */
.rb-section-title {
	position: relative;
}

/* Service cards: lift + gold top border on hover/focus-within. */
.rb-service-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.rb-service-card:hover,
.rb-service-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(19, 75, 125, 0.16);
}

/* Sticky header. Applied to the OUTER template-part <header> wrapper, not the
   inner .rb-header div: a sticky element can only travel within its own
   containing block, and the inner div's box is only as tall as the header, so
   sticky on it had no room to stick (it scrolled away). The outer wrapper's
   containing block is the page, so it sticks correctly. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
	/* Soft shadow separates the header from page content without a hard
	   hairline (which read as a stray "remnant" line under the nav). */
	box-shadow: 0 2px 12px rgba(12, 47, 79, 0.07);
}

/* Remove the default block-gap (1.5rem) the theme inserts between the header
   and the page content, so content sits flush under the nav instead of
   leaving a wasted strip below it. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Desktop: center the primary nav between the logo (left) and CTA (right)
   using a 3-zone grid, so the menu is page-centered regardless of the
   logo/button widths. Below the breakpoint the nav collapses to the
   hamburger (see media query further down), so this only applies wide. */
@media (min-width: 1120px) {
	/* .rb-header prefix raises specificity above WP's generated
	   .wp-container-* { display:flex } layout rule, which otherwise wins. */
	.rb-header .rb-main-row {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.rb-header .rb-main-row > .wp-block-site-logo {
		justify-self: start;
	}

	.rb-header .rb-main-row > .rb-nav {
		justify-self: center;
	}

	.rb-header .rb-main-row > .wp-block-buttons {
		justify-self: end;
	}
}

/* Utility contact strip: a quiet info ribbon, not a second nav bar. */
.rb-utility-bar {
	line-height: 1.4;
}

.rb-utility-bar a {
	text-decoration: none;
}

.rb-utility-bar a:hover {
	text-decoration: underline;
}

/* Pay with Clio unit: native button + accepted-cards box. Clio blue is a
   deliberate brand one-off sampled from Clio's artwork, not a theme token.
   The .rb-utility-bar a prefix outranks the bar's elements.link navy color,
   which otherwise wins over a bare class selector. */
.rb-utility-bar a.rb-clio-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: #1079e2;
	color: #ffffff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.6rem 1.25rem;
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
}

.rb-utility-bar a.rb-clio-btn:hover,
.rb-utility-bar a.rb-clio-btn:focus-visible {
	background-color: #0d63bd;
	color: #ffffff;
	text-decoration: none;
}

.rb-clio-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

.rb-clio-cards {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: 0.3rem 0.55rem;
	line-height: 0;
}

/* Letter-spaced serif display caps used for the hero + section titles. */
.rb-display {
	letter-spacing: 0.04em;
}

/* Footer "Site Links" list: drop the default bullets/indent. */
.rb-footer .wp-block-list.is-style-rb-plain {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rb-footer .wp-block-list.is-style-rb-plain a {
	text-decoration: none;
}

.rb-footer .wp-block-list.is-style-rb-plain a:hover {
	text-decoration: underline;
}

/* Section titles: centered serif caps with a short gold rule beneath. */
.rb-section-title {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.rb-section-title.has-text-align-center::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 0.75rem auto 0;
	background: var(--wp--preset--color--accent);
}

/* Third-party reviews widget embed. */
.rb-reviews-widget {
	min-height: 360px;
}

/* Blog archive post cards: equal-height, lift on hover, cover-fit images. */
.rb-post-grid {
	gap: var(--wp--preset--spacing--40);
}

.rb-post-card {
	overflow: hidden;
	height: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rb-post-card:hover,
.rb-post-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(19, 75, 125, 0.16);
}

.rb-post-card .wp-block-post-featured-image {
	margin: 0;
}

.rb-post-card .wp-block-post-featured-image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

/* Form placeholders left during migration (pre native-form wiring). */
.rb-form-placeholder {
	border: 1px dashed var(--wp--preset--color--accent-dark);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	padding: 1rem 1.25rem;
	border-radius: 6px;
	font-size: 0.9rem;
}

/* Service card title + Learn More links: card styling owns the color. */
.rb-service-card .rb-card-link {
	color: inherit;
	text-decoration: none;
}

.rb-service-card .rb-card-link:hover {
	color: inherit;
	text-decoration: underline;
}

.rb-service-card .rb-learn-more {
	text-decoration: none;
}

.rb-service-card .rb-learn-more:hover {
	text-decoration: underline;
}

/* Practice-page mid-page contact callout. */
.rb-callout {
	background: var(--wp--preset--color--navy);
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 6px;
	padding: 1.5rem 1.75rem;
	margin: 2.5rem 0;
}

.rb-callout,
.rb-callout p {
	color: var(--wp--preset--color--base);
}

.rb-callout a {
	color: var(--wp--preset--color--accent);
}

.rb-callout a:hover {
	color: var(--wp--preset--color--base);
}

/* Mobile header: keep the topbar to tap-to-call lines; badge + email live
   in the footer and menu instead. */
@media (max-width: 900px) {
	.rb-utility-bar .rb-clio-unit,
	.rb-utility-bar .rb-utility-email {
		display: none;
	}

	.rb-utility-bar .wp-block-group {
		row-gap: 0.25rem;
	}
}

/* Collapse the primary nav to the hamburger at <=1119px so the larger,
   page-centered desktop nav only appears once there's room for it (the grid
   above kicks in at >=1120px). Also avoids any wrap in the tablet range.
   Core's own min-width:600px rules restore the inline menu; the higher
   specificity here (.rb-nav prefix) wins in the overlap band. */
@media (max-width: 1119px) {
	.rb-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.rb-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
}

/* In the collapsed single-row range, keep the logo alone on the left and group
   the hamburger next to the CTA on the right (otherwise space-between floats
   the hamburger in the dead center). Mobile (<=600px) keeps its natural wrap. */
@media (min-width: 601px) and (max-width: 1119px) {
	.rb-header .rb-main-row > .rb-nav {
		margin-left: auto;
	}
}

/* Brand the keyboard focus ring across the nav (incl. the mobile overlay)
   instead of the harsh UA default black box. Stays clearly visible. */
.rb-nav a:focus-visible,
.rb-nav button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-dark);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Suppress the harsh default focus box on mouse/programmatic focus (e.g. the
   first item when the overlay opens); keyboard users still get the branded
   :focus-visible ring above. */
.rb-nav a:focus:not(:focus-visible),
.rb-nav button:focus:not(:focus-visible) {
	outline: none;
}

/* Mobile menu overlay: full-height white panel, left-aligned items. */
.rb-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	min-height: 100dvh;
	background: var(--wp--preset--color--base);
	padding: 4.5rem clamp(1.25rem, 6vw, 2.5rem) 2rem;
	overflow-y: auto;
}

.rb-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content,
.rb-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.rb-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	align-items: flex-start !important;
	text-align: left;
}

.rb-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: 1rem;
	width: 100%;
}

.rb-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center !important;
	width: 100%;
}

.rb-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
	margin-top: 0.65rem;
}

.rb-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	padding-left: 1rem;
	gap: 0.65rem;
	width: 100%;
}

/* Collapse submenus in the overlay until their toggle is opened. */
.rb-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle[aria-expanded="false"] + .wp-block-navigation__submenu-container {
	display: none;
}

/* WP hides submenu toggles in the open overlay (it expects always-expanded
   submenus there). We collapse them instead, so bring the toggles back. */
.rb-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-icon {
	display: flex;
}

/* Bigger toggle hit area in the overlay. */
.rb-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle {
	padding: 0.25rem 0.75rem;
	min-width: 44px;
	min-height: 28px;
	justify-content: center;
}

/* Menu-only CTA + call links: hidden in the desktop nav row. */
.rb-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .rb-menu-cta,
.rb-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .rb-menu-call {
	display: none;
}

.rb-nav .wp-block-navigation__responsive-container.is-menu-open .rb-menu-cta {
	margin-top: 1.25rem;
}

.rb-nav .wp-block-navigation__responsive-container.is-menu-open .rb-menu-cta a {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy-deep);
	border-radius: 4px;
	padding: 0.9rem 1.5rem;
}

.rb-nav .wp-block-navigation__responsive-container.is-menu-open .rb-menu-call a {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

/* Service + value icons. */
.rb-service-icon,
.rb-value-icon {
	margin-bottom: 0.25rem;
}

.rb-value-icon svg {
	margin-bottom: 0.5rem;
}

/* Newsletter inline form. */
.rb-newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-width: 460px;
	margin: 1.5rem auto 0;
}

.rb-newsletter-form input[type="email"] {
	flex: 1 1 220px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	padding: 0.85rem 1rem;
	font-size: 1rem;
	background: #ffffff;
	color: var(--wp--preset--color--contrast);
}

/* Contact form. */
.rb-contact-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 640px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.97);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: 8px;
	box-shadow: 0 18px 40px rgba(12, 47, 79, 0.35);
}

.rb-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.rb-field-row .rb-field {
	flex: 1 1 220px;
}

.rb-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.rb-contact-form label {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--navy);
}

.rb-contact-form input,
.rb-contact-form textarea {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	padding: 0.75rem 0.85rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--wp--preset--color--contrast);
	background: #ffffff;
}

.rb-contact-form input:focus,
.rb-contact-form textarea:focus,
.rb-newsletter-form input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.rb-contact-form .wp-element-button {
	align-self: flex-start;
}

/* Shared button look for the raw HTML form submit buttons. */
.rb-newsletter-form .wp-element-button,
.rb-contact-form .wp-element-button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy-deep);
	border: none;
	border-radius: 4px;
	padding: 0.9rem 1.75rem;
	font-weight: 700;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background 0.2s ease;
}

.rb-newsletter-form .wp-element-button:hover,
.rb-contact-form .wp-element-button:hover {
	background: var(--wp--preset--color--accent-dark);
}

/* Honeypot field — visually removed, kept in the a11y tree off-screen. */
.rb-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Form fine print + notices. */
.rb-form-fineprint {
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
	margin: 0.25rem 0 0;
}

.rb-form-notice {
	padding: 0.75rem 1rem;
	border-radius: 4px;
	font-size: 0.9rem;
}

.rb-form-notice--error {
	background: #fdecea;
	color: #8a1c11;
	border: 1px solid #f3c0bb;
}

/* Required-field asterisk in labels. */
.rb-contact-form label span[aria-hidden="true"] {
	color: var(--wp--preset--color--accent-dark);
}

/* Accessible screen-reader-only utility (newsletter label). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}