/*
Theme Name: Codee Rouse Child
Theme URI: https://codeerouse.com
Description: Custom child theme for Codee Rouse Realty, built on Astra. Warm, editorial, boutique lifestyle-advisory look and feel.
Author: Codee Rouse Realty Website Project
Template: astra
Version: 1.0.6
Text Domain: codee-rouse-child
*/

/* ==========================================================================
   1. BRAND VARIABLES
   ========================================================================== */

:root {
	--cr-brass: #AC811C;
	--cr-brass-hover: #8A6816;
	--cr-ink: #1A1A1A;
	--cr-body-text: #333333;
	--cr-cream: #FAF7F2;
	--cr-white: #FFFFFF;

	--cr-font-display: 'Fraunces', Georgia, serif;
	--cr-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

body,
button,
input,
select,
textarea {
	font-family: var(--cr-font-body);
	color: var(--cr-body-text);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.wp-block-heading,
.ast-woocommerce-container h2,
.site-title,
.site-title a {
	font-family: var(--cr-font-display) !important;
	font-weight: 600;
	color: var(--cr-ink);
	letter-spacing: -0.01em;
}

h1, .entry-title, .entry-content h1 {
	font-weight: 500;
}

p {
	color: var(--cr-body-text);
	line-height: 1.7;
}

a {
	color: var(--cr-brass);
	transition: color 0.2s ease;
}

a:hover {
	color: var(--cr-brass-hover);
}

/* ==========================================================================
   3. HEADER
   ========================================================================== */

.ast-primary-header-bar,
.main-header-bar {
	background-color: var(--cr-white) !important;
	border-bottom: 1px solid var(--cr-brass);
}

.ast-above-header,
.ast-below-header-bar {
	background-color: var(--cr-cream) !important;
}

.main-header-bar .main-navigation ul li a,
.ast-primary-header-bar .main-navigation ul li a {
	color: var(--cr-ink) !important;
	font-family: var(--cr-font-body);
	font-weight: 500;
	letter-spacing: 0.01em;
}

.main-header-bar .main-navigation ul li a:hover,
.main-header-bar .main-navigation ul li.current-menu-item > a {
	color: var(--cr-brass) !important;
}

.ast-header-social a,
.ast-header-social-wrap a,
.ast-header-social a svg,
.ast-header-social a svg path,
.ast-header-social-wrap svg path {
	color: var(--cr-ink) !important;
	fill: var(--cr-ink) !important;
	opacity: 1 !important;
}

.ast-header-social a:hover,
.ast-header-social-wrap a:hover,
.ast-header-social a:hover svg path {
	color: var(--cr-brass) !important;
	fill: var(--cr-brass) !important;
}

.site-title a {
	color: var(--cr-ink) !important;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.wp-block-button__link,
.ast-button,
button,
input[type="submit"],
input[type="button"],
.wpforms-submit {
	background-color: var(--cr-brass) !important;
	border-color: var(--cr-brass) !important;
	color: var(--cr-ink) !important;
	font-family: var(--cr-font-body);
	font-weight: 700;
	border-radius: 999px !important;
	padding: 16px 32px !important;
	box-shadow: 0 4px 14px rgba(172, 129, 28, 0.25);
	border: none !important;
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.wp-block-button__link:hover,
.ast-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wpforms-submit:hover {
	background-color: var(--cr-brass-hover) !important;
	color: var(--cr-white) !important;
	box-shadow: 0 6px 18px rgba(138, 104, 22, 0.35);
	transform: translateY(-1px);
}

/* ==========================================================================
   5. FOOTER
   FIX (this update): Astra generates an inner wrapper, .site-below-footer-wrap,
   with its own opaque white background that sits on top of the outer <footer>
   element and was hiding the intended dark background — leaving the cream text
   nearly invisible against white (contrast ratio ~1.07:1, confirmed via
   computed styles). Adding that wrapper to this selector list fixes it at
   the actual visible layer.
   ========================================================================== */

.ast-small-footer,
footer.site-footer,
.site-footer,
.site-below-footer-wrap {
	background-color: var(--cr-ink) !important;
}

.ast-small-footer .ast-footer-copyright,
.ast-small-footer p,
.ast-small-footer a,
.site-footer p,
.site-footer a {
	color: var(--cr-cream) !important;
}

.ast-small-footer a:hover,
.site-footer a:hover {
	color: var(--cr-brass) !important;
}

/* ==========================================================================
   6. SIGNATURE ELEMENT: BRASS RING / FRAME ON IMAGES
   Apply the "brass-ring-frame" class to an image block (Advanced settings
   > Additional CSS class) to echo the circular badge in Codee's logo.
   ========================================================================== */

.brass-ring-frame img,
.wp-block-image.brass-ring-frame img {
	border: 3px solid var(--cr-brass);
	border-radius: 50%;
	padding: 6px;
	box-sizing: border-box;
}

.brass-ring-frame.is-style-rounded img {
	border-radius: 50%;
}

/* Rectangular variant — use for portrait/non-square photos where a
   forced circle crop would cut off the subject. Same brass accent,
   no circular mask. */
.brass-frame img,
.wp-block-image.brass-frame img {
	border: 3px solid var(--cr-brass);
	padding: 8px;
	box-sizing: border-box;
	border-radius: 4px;
}

/* ==========================================================================
   7. SECTION BACKGROUNDS
   Apply "cr-bg-cream" as an Additional CSS class on Group/Cover blocks
   to alternate section backgrounds for visual rhythm.
   ========================================================================== */

.cr-bg-cream {
	background-color: var(--cr-cream) !important;
}

.cr-bg-ink {
	background-color: var(--cr-ink) !important;
}

.cr-bg-ink h1,
.cr-bg-ink h2,
.cr-bg-ink h3,
.cr-bg-ink p {
	color: var(--cr-cream) !important;
}

/* ==========================================================================
   8. WPFORMS OVERRIDES
   ========================================================================== */

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea,
.wpforms-container select {
	border: 1px solid #D9D2C4 !important;
	border-radius: 8px !important;
	font-family: var(--cr-font-body);
	padding: 12px 14px !important;
}

.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container input[type="tel"]:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
	border-color: var(--cr-brass) !important;
	box-shadow: 0 0 0 3px rgba(172, 129, 28, 0.15) !important;
}

.wpforms-container label.wpforms-field-label {
	font-family: var(--cr-font-body);
	font-weight: 600;
	color: var(--cr-ink);
}

/* ==========================================================================
   10. SCROLL TO TOP BUTTON
   ========================================================================== */

#scroll-top,
.ast-scroll-top-icon,
.ast-scroll-top {
	background-color: var(--cr-brass) !important;
	border-color: var(--cr-brass) !important;
}

#scroll-top:hover,
.ast-scroll-top-icon:hover,
.ast-scroll-top:hover {
	background-color: var(--cr-brass-hover) !important;
}

#scroll-top svg,
#scroll-top path,
.ast-scroll-top-icon svg,
.ast-scroll-top-icon path {
	fill: var(--cr-white) !important;
}

/* ==========================================================================
   11. HERO BACKGROUND PHOTO
   Add the "cr-hero" class to a Group block (Block settings > Advanced >
   Additional CSS class(es)) to give it a full-bleed background photo with
   a dark overlay and white text — used for the homepage hero.
   ========================================================================== */

.cr-hero {
	position: relative;
	background-image: url('https://codeethecloser.com/wp-content/uploads/2026/07/7OMkzUEBBIo-mQqdOAdR8fZ-9H-20LedMh0Jru0O5uY3pb3udXihSqWzjr5WkeRuTSCo2BXxNS3my9jRawc6nW_hJS0Ui6DvYUebYjDdbl6W51cLCbY6qTboD6WJFPjiv9PtNYAVAVUjpgo2Kk4MkNIhWnGB8ElYWGgoqqz1PoPvNM_QPX7x2V1wU4m6oVHO-3.jpeg');
	background-size: cover;
	background-position: center;
	border-radius: 6px;
	padding: 80px 48px;
	overflow: hidden;
}

.cr-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--cr-ink);
	opacity: 0.5;
	z-index: 0;
}

.cr-hero > * {
	position: relative;
	z-index: 1;
}

.cr-hero h1,
.cr-hero h2,
.cr-hero h3,
.cr-hero p,
.cr-hero .wp-block-heading {
	color: var(--cr-white) !important;
}

/* Sellers page hero — interior/design photo */
.cr-hero-listing {
	position: relative;
	background-image: url('https://codeethecloser.com/wp-content/uploads/2026/07/BQlv5IwHFP8KVp8hnmYnm2AppMC1b0tNoSr2b6-ZSEfa9xH3-vWl45_uSWkLGiy-L_gAUnFlvxVI7J7zy0b74un09eeBLSc9ichtBLS-AcnTbQOEnP9XHNni_LIbq3I7wNWLRNke7wbcCBglgC2ec7GJ9CmhPS4sZxXZd-XvkIM-2.jpeg');
	background-size: cover;
	background-position: center;
	border-radius: 6px;
	padding: 80px 48px;
	overflow: hidden;
}

.cr-hero-listing::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--cr-ink);
	opacity: 0.55;
	z-index: 0;
}

.cr-hero-listing > * {
	position: relative;
	z-index: 1;
}

.cr-hero-listing h1,
.cr-hero-listing h2,
.cr-hero-listing h3,
.cr-hero-listing p,
.cr-hero-listing .wp-block-heading {
	color: var(--cr-white) !important;
}

/* ==========================================================================
   12. SELLERS PAGE HERO (auto-applied by page ID, no manual class needed)
   ========================================================================== */

body.page-id-43 .entry-content > .wp-block-heading:first-of-type {
	position: relative;
	background-image: url('https://codeethecloser.com/wp-content/uploads/2026/07/BQlv5IwHFP8KVp8hnmYnm2AppMC1b0tNoSr2b6-ZSEfa9xH3-vWl45_uSWkLGiy-L_gAUnFlvxVI7J7zy0b74un09eeBLSc9ichtBLS-AcnTbQOEnP9XHNni_LIbq3I7wNWLRNke7wbcCBglgC2ec7GJ9CmhPS4sZxXZd-XvkIM-2.jpeg');
	background-size: cover;
	background-position: center;
	border-radius: 6px;
	padding: 100px 48px !important;
	overflow: hidden;
	color: var(--cr-white) !important;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 280px;
	box-sizing: border-box;
}

body.page-id-43 .entry-content > .wp-block-heading:first-of-type::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--cr-ink);
	opacity: 0.55;
	z-index: -1;
}

/* ==========================================================================
   13. BUYERS PAGE HERO (auto-applied by page ID, no manual class needed)
   ========================================================================== */

body.page-id-41 .entry-content > .wp-block-heading:first-of-type {
	position: relative;
	background-image: url('https://codeethecloser.com/wp-content/uploads/2026/07/C3O40fO4hLYcbBJhwIoV2VTk88JyD_F6pFa0zb6E4Rp7Ds9or5tD0DlPhK6BfLBDAgWHI7u7tkD5P6Jk8ynYJbW2uSu4Dx2695eLqxCvu5yCQSBI-iIxmXTGzl1EFPU37JvRlaG9sNaIuLF6_-cKgAD5ROS8-KFxM7TE-HzqyM0-2.jpeg');
	background-size: cover;
	background-position: center;
	border-radius: 6px;
	padding: 100px 48px !important;
	overflow: hidden;
	color: var(--cr-white) !important;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 280px;
	box-sizing: border-box;
}

body.page-id-41 .entry-content > .wp-block-heading:first-of-type::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--cr-ink);
	opacity: 0.55;
	z-index: -1;
}

/* ==========================================================================
   14. ABOUT CODEE HOMEPAGE SECTION — vertical centering fix
   Targets the specific columns block instance via its Gutenberg-generated
   layout hash (unique to this block, does not affect other two-column
   sections on the homepage, e.g. the Buyer/Seller split).
   Fixes: right column (heading/bio/button) was top-aligned inside a taller
   stretched column, leaving ~326px of empty space below the button.
   ========================================================================== */

.wp-container-core-columns-is-layout-7387b849 .wp-block-column:last-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ==========================================================================
   15. HEADER — ATLANTA COMMUNITIES LOGO ALONGSIDE SITE LOGO
   Targets Astra's standard, stable branding container (.site-branding /
   .ast-site-identity) — not a custom or Pro-only class. Inserts the
   brokerage logo as a background image immediately after Codee's own
   circular logo mark via a ::after pseudo-element, so no new HTML/blocks
   are needed. Sized to match the source image's real aspect ratio
   (1880x877, ~2.14:1) to avoid any stretching or distortion.
   ========================================================================== */

.site-branding.ast-site-identity {
	display: flex !important;
	align-items: center;
}

.site-branding.ast-site-identity::after {
	content: '';
	display: inline-block;
    width: 222px;
    height: 104px;
    background-image: url('https://codeethecloser.com/wp-content/uploads/2026/07/ATCM-LOGO-GOLD-HORIZONTAL.jpg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
	margin-left: 24px;
	flex-shrink: 0;
}

/* ==========================================================================
   16. HOMEPAGE — BUYING/SELLING BUTTON ALIGNMENT FIX
   IMPORTANT: this shares the same Gutenberg layout hash
   (wp-container-core-columns-is-layout-7387b849) as the About Codee
   section below it — Gutenberg reuses this hash across ANY columns block
   with matching layout settings, it is NOT unique per block instance.

   Selector history/lesson learned: an earlier version of this rule used
   ":first-of-type" to distinguish Buying/Selling from About Codee, but
   that failed silently — :first-of-type only counts among same-tag
   siblings, and the hero section above it is ALSO a <div>, making
   Buying/Selling actually the 2nd div, not the 1st.

   Current approach: target via :not(:has(img)) instead. About Codee's
   columns contain a photo; Buying/Selling's don't. This is tied to real
   content structure rather than fragile sibling position, so it won't
   silently break if a future edit adds/removes/reorders sections above
   this one on the page.

   Fixes: "Find Out What Your Home Could Sell For" button sat lower than
   "Start Your Home Search" because the Selling paragraph wraps to three
   lines vs Buying's two. Both buttons now anchor to the bottom of their
   column via margin-top: auto, regardless of paragraph length.
   ========================================================================== */

.wp-container-core-columns-is-layout-7387b849:not(:has(img)) .wp-block-column {
	display: flex;
	flex-direction: column;
}

.wp-container-core-columns-is-layout-7387b849:not(:has(img)) .wp-block-column .wp-block-button {
	margin-top: auto;
}

.wp-container-core-columns-is-layout-7387b849:not(:has(img)) .wp-block-column .wp-block-buttons {
	margin-top: auto;
}