/* =============================================================================
   Raven Tech — Secondary pages, group B
   OWNED BY PHASE 5B — do not edit from other phases.
   Resources/blog (home.php, single.php, card-blog), Contact, 404, page.php.
   ========================================================================== */

/* ============================================================ RESOURCES (archive) */
/* home.php — hero-page (shared component, styled in services.css) + grid of
   Blog Cards (.rt-blog-card / .rt-blog__cards shared with the homepage Blog
   section, styled in home.css) + pagination + shared CTA split. */

.rt-resources {
	padding: max(48px, min(6vw, 90px)) 0 max(56px, min(7vw, 96px));
}

.rt-resources__intro {
	max-width: 740px;
	margin: 0 0 32px;
	opacity: 0.85;
}

.rt-resources__grid {
	margin-top: 0;
}

.rt-resources__empty {
	padding: 48px 0;
	text-align: center;
}

/* Pagination — square tiles per the design system's carousel-dot motif:
   inactive = white/outlined, current/hover = the red gradient. */
.rt-pagination {
	margin-top: max(40px, min(5vw, 64px));
	display: flex;
	justify-content: center;
}

.rt-pagination ul.page-numbers {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.rt-pagination .page-numbers li {
	display: flex;
}

.rt-pagination a.page-numbers,
.rt-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 6px;
	font: 700 16px var(--rt-font-heading);
	color: var(--rt-black);
	background: var(--rt-white);
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

/* Safari <15.4 invalidates any selector containing :focus-visible and drops
   the whole rule — which also killed the :hover halves that shared these
   selectors. Rings are therefore declared on plain :focus (understood
   everywhere) and suppressed for pointer focus by a :focus:not(:focus-visible)
   rule that old Safari drops, leaving it with a ring on every focus. */
.rt-pagination a.page-numbers:hover,
.rt-pagination a.page-numbers:focus {
	background: var(--rt-gradient);
	border-color: transparent;
	color: var(--rt-white);
	transform: translateY(-2px);
}

.rt-pagination span.page-numbers.current {
	background: var(--rt-gradient);
	border-color: transparent;
	color: var(--rt-white);
}

.rt-pagination .page-numbers.dots {
	border: 0;
	background: transparent;
}

/* ==================================================================== SINGLE POST */
/* single.php — dark photo-band hero, narrow prose column, related-posts row. */

.rt-post-hero {
	position: relative;
	min-height: max(280px, min(32vw, 440px));
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	background-color: var(--rt-black);
	overflow: hidden;
}

.rt-post-hero__wash {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.55) 100%);
}

.rt-post-hero__inner {
	position: relative;
	padding-bottom: max(32px, min(4vw, 56px));
}

.rt-post-hero__meta {
	color: var(--rt-white-soft);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.8em;
}

.rt-post-hero__title {
	color: var(--rt-white);
	margin: 0;
	max-width: 900px;
}

/* Narrow prose column shared by single.php and page.php's generic fallback. */
.rt-single__content {
	max-width: 740px;
	margin: 0 auto;
}

.rt-prose h2,
.rt-prose h3 {
	margin-top: 1.4em;
}
.rt-prose h2:first-child,
.rt-prose h3:first-child {
	margin-top: 0;
}
.rt-prose h2 { font-size: max(26px, min(2.6vw, 34px)); }
.rt-prose h3 { font-size: max(20px, min(2vw, 26px)); }

.rt-prose p {
	opacity: 0.85;
}

.rt-prose ul {
	margin: 0 0 1.4em;
	padding-left: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rt-prose ul li {
	position: relative;
	padding-left: 26px;
	opacity: 0.85;
}
.rt-prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	background: var(--rt-gradient);
}

.rt-prose a {
	color: var(--rt-red-mid);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.rt-prose a:hover { color: var(--rt-red-deep); }

/* Notched blockquote with a gradient accent bar — Figma's "notch" motif
   (top-right/bottom-left corner) applied to pull-quotes inside long-form copy. */
.rt-prose blockquote {
	position: relative;
	margin: 1.8em 0;
	padding: 24px 28px 24px 34px;
	background: #faf8f8;
	border-radius: var(--rt-radius);
	font-family: var(--rt-font-heading);
	font-weight: 700;
	font-size: max(18px, min(1.8vw, 22px));
	line-height: 1.4;
}
.rt-prose blockquote::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	background: var(--rt-gradient);
}
.rt-prose blockquote p {
	margin: 0;
	opacity: 1;
}

.rt-related {
	background: #faf8f8;
	padding: max(48px, min(6vw, 90px)) 0;
}

.rt-related__grid {
	margin-top: 16px;
}

/* ========================================================================= 404 */

.rt-404 {
	background: var(--rt-black);
	min-height: max(360px, min(40vw, 560px));
	display: flex;
	align-items: center;
}

.rt-404__inner {
	text-align: center;
	padding-top: max(40px, min(6vw, 64px));
	padding-bottom: max(40px, min(6vw, 64px));
}

.rt-404__code {
	margin: 0 0 0.1em;
	font-size: max(64px, min(10vw, 140px));
	line-height: 1;
}

.rt-404__title {
	color: var(--rt-white);
	margin-bottom: 0.5em;
}

.rt-404__text {
	color: var(--rt-white-soft);
	max-width: 520px;
	margin: 0 auto 2em;
}

.rt-404__btn {
	margin: 0 auto;
}

/* ===================================================================== CONTACT */
/* page-templates/contact.php — hero-page (shared) + info/form split + brand
   map strip + shared CTA split. */

.rt-contact-split {
	padding: max(48px, min(6vw, 90px)) 0;
}

.rt-contact-split__inner {
	display: grid;
	grid-template-columns: minmax(0, 440fr) minmax(0, 700fr);
	gap: max(24px, min(4vw, 56px));
	align-items: stretch;
}

.rt-contact-info,
.rt-contact-form-panel {
	background: var(--rt-white);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--rt-radius);
	box-shadow: var(--rt-shadow);
	padding: max(28px, min(3.4vw, 44px));
}

.rt-contact-info__title { margin-bottom: 0.5em; }
.rt-contact-info__text { opacity: 0.8; margin-bottom: 1.4em; }

.rt-contact-list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rt-contact-list__item {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 16px;
}

.rt-contact-list__item a {
	color: inherit;
	text-decoration: none;
}
.rt-contact-list__item a:hover { color: var(--rt-red); }

.rt-contact-list__icon-wrap {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.rt-contact-list__icon {
	width: 22px;
	height: 22px;
	color: var(--rt-red);
}

.rt-contact-info__social {
	display: flex;
	gap: 14px;
}
.rt-contact-info__social .rt-social__link { color: var(--rt-black); }
.rt-contact-info__social .rt-social__link:hover { color: var(--rt-red); }

.rt-contact-form-panel {
	display: flex;
	flex-direction: column;
}

.rt-contact-form__heading {
	margin-bottom: 1em;
}

/* Fallback panel (raventech-core/includes/forms.php — Gravity Forms is not
   installed on this build, so this is what actually renders today). */
.rt-form-fallback p {
	opacity: 0.85;
	margin-bottom: 1em;
}
.rt-form-fallback__contacts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.rt-form-fallback__contacts a {
	display: inline-flex;
	align-items: center;
	font: 700 16px var(--rt-font-heading);
	color: var(--rt-black);
	text-decoration: none;
	padding: 12px 20px;
	background: #faf8f8;
	border-radius: var(--rt-radius-btn);
}
.rt-form-fallback__contacts a:hover { color: var(--rt-red); }

/* Gravity Forms wrapper — styled ahead of GF actually being installed
   (gform_disable_css is forced true in inc/gf-styles.php), so the form reads
   correctly the moment a real form is wired up. White fields, thin border,
   notched radius; submit button already becomes .rt-btn.rt-btn--gradient via
   the gform_submit_button filter. */
.rt-contact-form .gform_wrapper { width: 100%; }
.rt-contact-form .gform_fields {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.rt-contact-form .gfield { list-style: none; }
.rt-contact-form .gfield_label {
	display: block;
	font: 700 14px var(--rt-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 6px;
}
.rt-contact-form input[type="text"],
.rt-contact-form input[type="email"],
.rt-contact-form input[type="tel"],
.rt-contact-form input[type="number"],
.rt-contact-form select,
.rt-contact-form textarea {
	width: 100%;
	font: 400 16px var(--rt-font-body);
	color: var(--rt-black);
	background: var(--rt-white);
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 0 8px 0 8px;
	padding: 12px 16px;
}
.rt-contact-form textarea { min-height: 140px; resize: vertical; }
.rt-contact-form input:focus,
.rt-contact-form select:focus,
.rt-contact-form textarea:focus {
	outline: 2px solid var(--rt-red);
	outline-offset: 1px;
}
.rt-contact-form .gform_footer { margin-top: 6px; }
.rt-contact-form .gform_footer .rt-btn { width: 100%; }
.rt-contact-form .gform_validation_errors {
	background: #fdecec;
	border: 1px solid var(--rt-red);
	border-radius: var(--rt-radius);
	padding: 16px 20px;
	margin-bottom: 18px;
}
.rt-contact-form .gform_confirmation_message {
	background: #faf8f8;
	border-radius: var(--rt-radius);
	padding: 24px;
	font-weight: 700;
}

/* Booking band (#book) — template-parts/components/booking-calendly.php. Tinted
   band so it separates the two panels above from the map below, with the
   Calendly widget (or its call/email fallback) in a white card matching the
   info/form panels. The widget div needs a real height: Calendly's own CSS sizes
   the iframe it injects to 100% of it, so a height-less parent collapses. */
.rt-book {
	background: var(--rt-hero-tint);
	padding: max(48px, min(6vw, 90px)) 0;
	scroll-margin-top: 140px;
}

/* "Free consultation within 4 hours of our office" callout. Deliberately louder
   than body copy — the designer's note asks for it prominent next to the
   calendar — but still lighter than the section head above it. */
.rt-book__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: max-content;
	margin: 0 auto 20px;
	padding: 12px 22px;
	background: var(--rt-white);
	border-left: 4px solid var(--rt-red);
	border-radius: var(--rt-radius-btn);
	box-shadow: var(--rt-shadow);
	font: 700 max(15px, min(1.4vw, 18px)) / 1.3 var(--rt-font-heading);
	color: var(--rt-black);
	text-align: left;
}
.rt-book__note-icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--rt-red);
}

.rt-book__panel {
	background: var(--rt-white);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--rt-radius);
	box-shadow: var(--rt-shadow);
	overflow: hidden; /* keeps the square-cornered widget inside the notched card. */
	padding: max(16px, min(2vw, 28px));
}

/* Calendly's own snippet carries min-width:320px; overriding it to 0 is what
   keeps the widget inside the card instead of spilling past the gutter on a
   360–390px phone (the ≤480px rule drops the card padding to win that space
   back, so the widget still gets ~335px of the 320 it wants). */
.rt-book__widget {
	min-width: 0;
	height: 700px;
}

.rt-book__noscript,
.rt-book__fallback { margin: 0; padding: max(12px, min(1.6vw, 20px)); }

/* Map strip — full-bleed Google Map embed for the Kearney office. The band's
   height lives on the embed itself (it is the row), so no vertical padding here;
   the caption below carries its own. The NE/KS service-area SVG rules stay for
   the Core-inactive fallback branch in contact.php, which does sit in a wrap. */
.rt-contact-map {
	padding: 0;
}
.rt-contact-map__inner {
	text-align: center;
	padding-top: max(20px, min(2.4vw, 30px));
	padding-bottom: max(40px, min(5vw, 64px));
}
.rt-contact-map__embed {
	position: relative;
	/* Edge-to-edge: width is 100% of the section, not 100vw, so this can never
	   introduce a horizontal scrollbar. Height is fixed rather than an
	   aspect-ratio — an auto-width box with a definite height derives its width
	   from the ratio and overflows the viewport (only hidden by body's
	   overflow-x: clip), which is exactly the bug the earlier version had. */
	width: 100%;
	height: max(320px, min(38vw, 560px));
	overflow: hidden;
	background: var(--rt-hero-tint);
}
.rt-contact-map__embed iframe {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.rt-contact-map__svg {
	width: max(220px, min(40vw, 520px));
	height: auto;
	margin: max(40px, min(5vw, 64px)) auto 0;
	opacity: 0.9;
}
.rt-contact-map__caption {
	max-width: 620px;
	margin: 0 auto;
	font-weight: 700;
	font-family: var(--rt-font-heading);
}
.rt-contact-map__directions {
	color: var(--rt-red);
	white-space: nowrap;
}

/* ============================================================= RESPONSIVE (5B) */

@media (max-width: 1024px) {
	.rt-contact-split__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.rt-post-hero__title { max-width: 100%; }
	/* Calendly's mobile layout stacks the month grid above the time list, so it
	   needs materially more room than the desktop side-by-side. */
	.rt-book__widget { height: 1000px; }
}

@media (max-width: 480px) {
	.rt-404__code { font-size: 72px; }
	.rt-contact-info,
	.rt-contact-form-panel { padding: 24px; }
	.rt-book__panel { padding: 0; }
}

/* =============================================================================
   LEGACY FALLBACK — flexbox `gap`
   `gap` only works on flex containers from Safari 14.1; before that it is
   ignored outright and every flex row/stack in this file collapses to zero
   spacing. WebKit shipped flex `gap` and the `inset` shorthand in the same
   release, so `@supports not (inset: 0)` is an exact probe for "this engine
   has no flex gap" on Safari (and only catches a few pre-2020 Chrome/Firefox
   builds, which get the same correct spacing anyway).

   Recipes below, matching each container's direction:
     column        -> `> * + *` margin-top
     row, no wrap  -> `> * + *` margin-left
     row + wrap    -> margin-bottom on every child + margin-right on all but
                      the last, with a negative margin-bottom on the container
                      cancelling the trailing row. Containers that are
                      themselves children of another wrapping container skip
                      that compensation, since their parent already sets
                      margin-bottom on them.
   Modern browsers never see any of this.
   ========================================================================== */
@supports not (inset: 0) {
	/* column stacks */
	.rt-prose ul > * + * { margin-top: 10px; }
	.rt-contact-list > * + * { margin-top: 16px; }
	.rt-form-fallback__contacts > * + * { margin-top: 12px; }
	.rt-contact-form .gform_fields > * + * { margin-top: 18px; }

	/* single-line rows */
	.rt-pagination ul.page-numbers > * + * { margin-left: 10px; }
	.rt-contact-list__item > * + * { margin-left: 14px; }
	.rt-contact-info__social > * + * { margin-left: 14px; }
	.rt-book__note > * + * { margin-left: 10px; }
}