/*
Theme Name: RR Child
Description: Shared block child theme for rank-and-rent lead-generation sites. Colors come from site options (see functions.php); layout and patterns are shared.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: rr
*/

/* ---- Calls to action: Call / Text / Quote ---- */
.rr-cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.25rem 0; }
.rr-cta .rr-btn { text-decoration: none; }
.rr-btn-secondary.wp-element-button {
	background: transparent; color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--primary);
}
.rr-btn-secondary.wp-element-button:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); }
.rr-btn-icon { font-size: 1.1em; }
.rr-cta-small { margin: 0; gap: .5rem; flex-wrap: nowrap; }
.rr-cta-center .rr-cta { justify-content: center; }
.rr-hero .rr-cta, .has-surface-background-color .rr-cta { margin-bottom: 0; }

/* Sticky bar on phones: the primary action is always one tap away. */
.rr-sticky-cta { display: none; }
@media (max-width: 700px) {
	.rr-sticky-cta {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
		background: var(--wp--preset--color--primary); box-shadow: 0 -2px 10px rgba(0,0,0,.2);
		padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom)); gap: .5rem;
	}
	.rr-sticky-cta a {
		flex: 1; text-align: center; padding: .8rem .5rem; border-radius: 6px; font-weight: 700; text-decoration: none;
		color: var(--wp--preset--color--on-primary); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
	}
	.rr-sticky-cta a:first-child { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); box-shadow: none; }
	body { padding-bottom: 4.5rem; }
	.rr-header-cta { display: none; } /* the sticky bar replaces it on phones */
}

/* Home hero with a short form beside the pitch. */
.rr-hero-form { background: var(--wp--preset--color--base); border-radius: 10px; padding: 1.25rem 1.25rem .25rem; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.rr-hero-form h2 { font-size: 1.25rem; margin: 0 0 .75rem; }
.rr-quote-form-compact p { margin: 0 0 .75rem; }
.rr-quote-form-compact input, .rr-quote-form-compact select { max-width: none; }
.rr-quote-form-compact button { width: 100%; }

/* Header call/quote button stays compact and visible on phones. */
.rr-header-cta .wp-element-button { padding: .6rem 1.1rem; font-size: var(--wp--preset--font-size--small); white-space: nowrap; }
@media (max-width: 600px) { .rr-header-cta .wp-element-button { padding: .5rem .8rem; } }

/* Photos */
.rr-page-image img { border-radius: 10px; width: 100%; height: auto; }
.rr-page-image { margin: 1.5rem 0; }
.rr-card .wp-block-image { margin: 0 0 1rem; }
.rr-card .wp-block-image img { border-radius: 6px; width: 100%; }

/* Service/city cards */
.rr-card { height: 100%; box-sizing: border-box; }
.rr-card .wp-block-heading a { text-decoration: none; }

/* FAQ accordions */
.rr-faq details { border-bottom: 1px solid var(--wp--preset--color--accent-6); padding: .9rem 0; }
.rr-faq summary { cursor: pointer; font-weight: 600; }
.rr-faq details > :not(summary) { margin-top: .6rem; }

/* Tables: on phones, scroll sideways inside the table instead of crushing columns. */
@media (max-width: 700px) {
	.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.wp-block-table table.has-fixed-layout { table-layout: auto; min-width: 34rem; }
	.wp-block-table td, .wp-block-table th { word-break: normal !important; overflow-wrap: normal !important; hyphens: none; }
	.wp-block-table td:first-child { white-space: nowrap; }
}

/* Disclosure */
.rr-disclosure { font-size: var(--wp--preset--font-size--small); opacity: .85; max-width: 60rem; }

/* VERIFY markers should never reach the public, but make them obvious in drafts. */
mark.rr-verify, .rr-verify { background: #fff3a6; color: #111; padding: 0 .2em; }

/* ---- Header logo: optional SVG mark + one or two lines of name ---- */
.rr-site-header p:has(> .rr-logo) { margin: 0; }
.rr-logo { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--wp--preset--color--primary); }
.rr-logo-mark svg { display: block; width: 46px; height: 46px; }
.rr-logo-words { display: flex; flex-direction: column; line-height: 1; }
.rr-logo-top { font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; }
.rr-logo-bottom { font-size: .75rem; font-weight: 700; letter-spacing: .42em; text-transform: uppercase; margin-top: .3rem; color: color-mix(in srgb, var(--wp--preset--color--accent) 70%, black); }
@media (max-width: 400px) { .rr-logo-mark svg { width: 40px; height: 40px; } .rr-logo-top { font-size: 1.2rem; } }

/* ---- Dark header (style.header: dark): brand-color bar, light text ---- */
.rr-header-dark .rr-site-header { background: var(--wp--preset--color--primary) !important; border-bottom: 0 !important; color: var(--wp--preset--color--on-primary); }
.rr-header-dark .rr-site-header .rr-logo { color: var(--wp--preset--color--on-primary); }
.rr-header-dark .rr-site-header .rr-logo-bottom { color: color-mix(in srgb, var(--wp--preset--color--accent) 60%, white); }
.rr-header-dark .rr-site-header .wp-block-navigation { color: var(--wp--preset--color--on-primary); }
.rr-header-dark .rr-site-header .wp-block-navigation__submenu-container,
.rr-header-dark .rr-site-header .wp-block-navigation__responsive-container.is-menu-open { color: var(--wp--preset--color--contrast); }
.rr-header-dark .rr-site-header .rr-btn-secondary.wp-element-button { color: var(--wp--preset--color--on-primary); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--on-primary) 70%, transparent); }
.rr-header-dark .rr-site-header .rr-btn-secondary.wp-element-button:hover { background: var(--wp--preset--color--on-primary); color: var(--wp--preset--color--primary); }

/* ---- Picket edge (style.header_edge: pickets): page-color pickets rise into the
   header, or into the bottom of a hero when the page starts with one. ---- */
.rr-edge-pickets .rr-site-header, .rr-edge-pickets .rr-hero { position: relative; }
.rr-edge-pickets .rr-site-header { padding-bottom: calc(var(--wp--preset--spacing--20) + 24px) !important; }
.rr-edge-pickets .rr-site-header::after, .rr-edge-pickets .rr-hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 24px; pointer-events: none;
	background: var(--wp--preset--color--base);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24'%3E%3Cpath d='M3 24V8l7-7 7 7v16z'/%3E%3C/svg%3E") left bottom / 20px 24px repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24'%3E%3Cpath d='M3 24V8l7-7 7 7v16z'/%3E%3C/svg%3E") left bottom / 20px 24px repeat-x;
}
.rr-edge-pickets:has(.rr-hero) .rr-site-header { padding-bottom: var(--wp--preset--spacing--20) !important; }
.rr-edge-pickets:has(.rr-hero) .rr-site-header::after { display: none; }
.rr-edge-pickets .rr-hero { padding-bottom: calc(var(--wp--preset--spacing--70) + 24px) !important; }
/* Pickets only read against a dark band: on a light header with no photo hero, skip them. */
.rr-edge-pickets:not(.rr-header-dark) .rr-site-header::after, .rr-edge-pickets .rr-hero:not(.rr-hero-photo)::after { display: none; }

/* ---- Photo hero (front matter hero_image: true) ---- */
.rr-hero-photo { position: relative; overflow: hidden; isolation: isolate; }
.rr-hero-photo > .rr-hero-bg { position: absolute; inset: 0; margin: 0 !important; max-width: none !important; z-index: -2; }
.rr-hero-photo > .rr-hero-bg img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.rr-hero-photo::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--primary) 94%, black) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 82%, transparent) 45%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent) 100%);
}
@media (max-width: 781px) {
	.rr-hero-photo::before { background: color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent); }
}
.rr-hero-photo .wp-block-column:first-child :is(h1, p) { color: var(--wp--preset--color--on-primary); }
.rr-hero-photo .wp-block-column:first-child .rr-btn-secondary.wp-element-button { color: var(--wp--preset--color--on-primary); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--on-primary) 75%, transparent); }
.rr-hero-photo .rr-hero-form { box-shadow: 0 10px 30px rgba(0,0,0,.3); }