/*
 * Habitation Realty — global site CSS (type, buttons, Formats, bands,
 * header and footer). Loads after brand-identity.css and the parent's
 * header/footer CSS. Per-block overrides of parent blocks live in
 * css/blocks/<block>.css (loaded with each block); the child blocks carry
 * their own CSS.
 *
 * Figma: ePU1opiEZTW5NmrXabEwSm, version 2411005051577086219. Measurements
 * in comments are the 1440 frames' pixels.
 */

/* ==== Base ============================================================== */

body {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--text-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Smooth scrolling — Build default (WebMO, 2026-10-16): internal links and
   in-page anchors scroll smoothly, never under reduced motion; anchored
   sections land below the sticky header. */
html {
	scroll-padding-top: var(--hr-header-h, 139px);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* The parent's tint is a vertical gradient (opacity at the top, 0.2 less
   at the bottom); Figma's overlays are flat (hero and page header black
   55%, Let's Talk 40%). Brain: launchpad-child-themes.md, traps. */
.lp-tint {
	background: rgb(from var(--tint-color) r g b / var(--tint-opacity));
}

/* Section headings: Yeseva One 30/36 #1E2023 (Figma components 1, 2, 5,
   6, 7, 11, 12, 14, 17); page titles and the hero 40/40. The parent prints
   every block header as h1 and sub headers as h2; sizes are set here. */
.lp-block :is(.lp-two-column__header, .lp-multi-column__header, .lp-callout__header) {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h2);
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-heading);
}

/* The sub-line under a section heading: Yeseva One 17 deep teal. */
.lp-block :is(.lp-two-column__sub-header, .lp-multi-column__sub-header) {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: 17px;
	font-weight: 400;
	line-height: 20px;
	color: var(--hr-teal-deep);
}

/* Body copy: Josefin Sans 16/28 in primary text (the parent's blocks use
   --text-secondary for body; Figma's body is #1E2023). */
.lp-block :is(.lp-two-column__body, .lp-callout__content, .lp-hero__content, .lp-multi-column__card-body) {
	font-family: var(--font-family-body);
	font-size: 16px;
	line-height: 28px;
	color: var(--text-primary);
}

.lp-block :is(.lp-two-column__body, .lp-callout__content, .lp-hero__content, .lp-multi-column__card-body) > p {
	margin: 0 0 12px;
}

.lp-block :is(.lp-two-column__body, .lp-callout__content, .lp-hero__content, .lp-multi-column__card-body) > :last-child {
	margin-bottom: 0;
}

/* Header accent ("Get In Touch"): light teal. */
.hr-accent {
	color: var(--primary-300);
}

/* ==== Buttons =========================================================== */

/* Figma "Primary Button" / "Secondary Button": 44 tall, padding 10/20,
   radius 5, Yeseva One 16/24, white on deep teal / deep rose; hover is the
   outline (transparent, the colour as text and border). */
a.btn,
.lp-block a.btn {
	display: inline-block;
	box-sizing: border-box;
	border: 1px solid var(--btn-bg);
	border-radius: var(--btn-radius);
	padding: calc(var(--btn-padding-y) - 1px) calc(var(--btn-padding-x) - 1px);
	box-shadow: none;
	font-family: var(--font-family-button);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

a.btn-primary:hover,
a.btn-primary:focus-visible {
	background-color: var(--btn-bg-hover);
	color: var(--btn-text-hover);
}

a.btn:focus-visible {
	outline: 2px solid var(--border-focus);
	outline-offset: 2px;
}

a.btn.hr-btn-rose {
	--btn-bg: var(--hr-rose-deep);
	--btn-text-hover: var(--hr-rose-deep);
}

/* On a photo or dark band the outline hover would vanish: keep it legible. */
.is-dark a.btn-primary:hover,
.is-dark a.btn-primary:focus-visible {
	background-color: var(--white);
}

/* Two buttons in one paragraph (Formats: Button teal + Button rose) sit
   side by side, 12 apart (Figma). Build default (WebMO, 2026-10-14): a
   button sits at least 20 below the text above it. */
.lp-block p:has(> a.btn) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.lp-block * + p:has(> a.btn),
.lp-block :is(.lp-two-column__body, .lp-callout__content, .lp-hero__content) + a.btn {
	margin-top: 24px;
}

.lp-block :is(.lp-two-column__body, .lp-callout__content, .lp-hero__content) > p:has(+ p > a.btn) {
	margin-bottom: 0;
}

/* ==== Formats (functions.php → habitation_tinymce_formats) ============= */

.hr-teal {
	color: var(--hr-teal-deep);
}

/* Price figure: Yeseva One 40/48 deep teal (Figma component 16). */
.lp-block p.hr-price {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: 40px;
	line-height: 48px;
	color: var(--hr-teal-deep);
}

/* Muted note: Josefin Sans 16/24 #6D6E70. */
.lp-block p.hr-muted {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--text-secondary);
}

.lp-block p.hr-small {
	font-size: 14px;
	line-height: 21px;
}

/* ==== Lists — Build default (WebMO, 2026-10-14): bullets flush with the
   text's left edge, wrapped lines hanging under the text. ================ */

:is(.entry-content, .is-root-container) .lp-block :is(.lp-two-column__body, .lp-callout__content, .lp-hero__content, .lp-multi-column__card-body, .hr-faq__answer, .hr-bio__body) ul {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

:is(.entry-content, .is-root-container) .lp-block :is(.lp-two-column__body, .lp-callout__content, .lp-hero__content, .lp-multi-column__card-body, .hr-faq__answer, .hr-bio__body) ul > li {
	position: relative;
	padding-left: 1.1em;
}

:is(.entry-content, .is-root-container) .lp-block :is(.lp-two-column__body, .lp-callout__content, .lp-hero__content, .lp-multi-column__card-body, .hr-faq__answer, .hr-bio__body) ul > li::before {
	content: "•";
	position: absolute;
	left: 0;
}

/* ==== Bands (core/group block styles) =================================== */

/* core/group is not an lp-block, and the parent caps .entry-content
   children at the content width: bands span the page (brain, traps). */
.entry-content > .wp-block-group:is(.is-style-hr-texture, .is-style-hr-dark) {
	max-width: none;
	margin: 0;
}

/* Texture band (Figma components 5 and 6): #E8E9E9 under the designer's
   "witewall" pattern (node 4011:296, a 400px tile). */
.wp-block-group.is-style-hr-texture {
	background-color: var(--neutral-100);
	background-image: image-set(url("../assets/texture-tile.png") 1x, url("../assets/texture-tile@2x.png") 2x);
	background-size: 400px 400px;
	background-repeat: repeat;
}

/* Dark band (Figma component 8, Get In Touch): #1E2023, white text. */
.wp-block-group.is-style-hr-dark {
	--text-primary: var(--white);
	--text-secondary: var(--neutral-200);
	--color-heading: var(--white);

	background-color: var(--neutral-400);
	color: var(--white);
}

/* ==== Header (Figma Nav Bar 4001:117) =================================== */

:root {
	--hr-header-h: 139px;
}

.site-header {
	box-shadow: none;
}

/* The strip: 36 tall, deep teal, Josefin Sans 14/21 white; phone and
   email 32 apart (icon 16, 8 to the text); the login on the right. */
.hr-strip {
	margin-inline: -4vw;
	padding-inline: 4vw;
	background: var(--hr-teal-deep);
	color: var(--white);
	font-family: var(--font-family-body);
	font-size: 14px;
	line-height: 21px;
}

.hr-strip__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 36px;
	max-width: var(--content-max-width);
	margin-inline: auto;
}

.hr-strip__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hr-strip__contact li {
	margin: 0;
}

.hr-strip a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.hr-strip a:hover span,
.hr-strip a:focus-visible span {
	text-decoration: underline;
}

.hr-strip svg {
	flex: none;
	width: 16px;
	height: 16px;
}

/* The main bar: the logo (184 wide) and the menu, 18 under the strip and
   20 above the bar's foot. Figma's logo frame is 65 tall with the image
   (70 at 184 wide) running past its foot, so the bar keeps 139 with 15. */
.lp-header__inner {
	height: auto;
	min-height: 65px;
	padding-block: 18px 15px;
}

.site-branding .custom-logo-link {
	display: block;
	line-height: 0;
}

.site-branding .custom-logo {
	display: block;
	width: 184px;
	height: auto;
}

/* The site title prints beside the logo; the logo's alt names the site. */
.site-branding .custom-logo-link ~ .site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Menu items: Yeseva One 18/27 #1E2023, padding 8/10, 5 apart; hover and
   the current page deep teal, the current page underlined. */
.lp-header__nav .lp-header__menu {
	gap: 5px;
}

.lp-header__nav .lp-header__link {
	padding: 8px 10px;
	font-family: var(--font-family-heading);
	font-size: 18px;
	font-weight: 400;
	line-height: 27px;
	color: var(--neutral-400);
	text-decoration: none;
}

.lp-header__nav .lp-header__link:hover,
.lp-header__nav .lp-header__link:focus-visible,
.lp-header__nav .current-menu-item > .lp-header__link {
	color: var(--hr-teal-deep);
}

.lp-header__nav .current-menu-item > .lp-header__link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* Mobile panel: the login keeps the strip's place as a button. */
.lp-header__panel .lp-header__link {
	font-family: var(--font-family-heading);
}

@media screen and (max-width: 1080px) {
	:root {
		--hr-header-h: 124px;
	}

	.lp-header__inner {
		padding-block: 12px;
	}

	.site-branding .custom-logo {
		width: 150px;
	}
}

@media screen and (max-width: 600px) {
	/* Phone and email as icons only; the login keeps its words. */
	.hr-strip__contact span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.hr-strip__contact {
		gap: 20px;
	}

	.hr-strip svg {
		width: 18px;
		height: 18px;
	}
}

/* ==== Forms (Gravity Forms in the Get In Touch band) =====================
   Figma component 8: labels Josefin Sans 14/21 white, 6 above the field;
   fields white, radius 5, 52 tall (Message 193), placeholder Josefin Sans
   16 #6D6E70; rows 20 apart; Email and Phone side by side, 20 apart; the
   button (Primary) right-aligned 25 under Message. */

.lp-block .gform_wrapper.gform-theme {
	--gf-ctrl-border-color: transparent;
	--gf-ctrl-bg-color: var(--white);
	--gf-ctrl-radius: 5px;
	--gf-form-gap-y: 20px;
	--gf-form-gap-x: 20px;

	/* The submit: Gravity Forms' theme framework sizes it through these
	   (its selectors outrank ours), so the Primary Button is set here. */
	--gf-ctrl-btn-size: 44px;
	--gf-ctrl-btn-size-md: 44px;
	--gf-ctrl-btn-padding-x: 19px;
	--gf-ctrl-btn-padding-x-md: 19px;
	--gf-ctrl-btn-font-size-md: 16px;
	--gf-ctrl-btn-line-height: 24px;
	--gf-ctrl-btn-font-family: var(--font-family-button);
	--gf-ctrl-btn-font-size: 16px;
	--gf-ctrl-btn-font-weight: 400;
	--gf-ctrl-btn-radius: 5px;
	--gf-ctrl-btn-shadow: none;
	--gf-ctrl-btn-shadow-hover: none;
	--gf-ctrl-btn-bg-color-primary: var(--hr-teal-deep);
	--gf-ctrl-btn-bg-color-hover-primary: var(--white);
	--gf-ctrl-btn-color-primary: var(--white);
	--gf-ctrl-btn-color-hover-primary: var(--hr-teal-deep);
	--gf-ctrl-btn-border-color-primary: var(--hr-teal-deep);
	--gf-ctrl-btn-border-color-hover-primary: var(--white);
	--gf-ctrl-btn-border-width-primary: 1px;
	--gf-ctrl-btn-border-style-primary: solid;

	font-family: var(--font-family-body);
}

.lp-block .gform_wrapper .gfield_label,
.lp-block .gform_wrapper .gform-field-label {
	margin-bottom: 6px;
	font-family: var(--font-family-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	color: var(--text-primary);
}

/* Figma marks nothing required; the fields still say so to assistive
   technology (aria-required, and this text, visually hidden). */
.lp-block .gform_wrapper .gfield_required {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.lp-block .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	box-sizing: border-box;
	min-height: 52px;
	padding: 14px 16px;
	border: 1px solid transparent;
	border-radius: 5px;
	background: var(--white);
	box-shadow: none;
	font-family: var(--font-family-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--neutral-400);
}

/* Gravity Forms' theme sets a 288 minimum block size on large textareas. */
.lp-block .gform_wrapper.gform-theme .gfield textarea.large,
.lp-block .gform_wrapper textarea {
	block-size: 193px;
	min-block-size: 193px;
	resize: vertical;
}

.lp-block .gform_wrapper :is(input, textarea)::placeholder {
	color: var(--neutral-300);
	opacity: 1;
}

.lp-block .gform_wrapper :is(input, textarea):focus {
	outline: 2px solid var(--primary-300);
	outline-offset: 1px;
	border-color: transparent;
}

.lp-block .gform_wrapper .gform_footer {
	justify-content: flex-end;
	margin-top: 25px;
	padding: 0;
}

/* The parent forces background-color and font-size on Gravity Forms
   submits with !important through these properties: set them, not the
   properties (brain, traps). */
.lp-block .gform_wrapper.gform-theme .gform_footer .gform_button {
	--btn-bg: var(--hr-teal-deep);
	--font-size-body: 16px;
	block-size: 44px;
	min-block-size: 44px;
	padding: 9px 19px;
	border: 1px solid var(--hr-teal-deep);
	border-radius: 5px;
	box-shadow: none;
	font-family: var(--font-family-button);
	font-weight: 400;
	line-height: 24px;
	color: var(--white);
	cursor: pointer;
}

.lp-block .gform_wrapper .gform_footer .gform_button:hover,
.lp-block .gform_wrapper .gform_footer .gform_button:focus-visible {
	--btn-bg: var(--white);
	color: var(--hr-teal-deep);
}

.lp-block .gform_wrapper .gform_validation_errors,
.lp-block .gform_wrapper .validation_message {
	font-family: var(--font-family-body);
}

.lp-block .gform_confirmation_message {
	font-family: var(--font-family-body);
	font-size: 16px;
	line-height: 28px;
	color: var(--text-primary);
}

/* ==== Footer (Figma component 9) ========================================
   Deep teal, 50 above and below; left (400 wide): the name Yeseva One
   18/27, the blurb Josefin Sans 12, then the legal lines Josefin Sans 16
   after a blank line; right: the menu Josefin Sans 16/28 right-aligned,
   the icons (16, 10 apart) under it. */

.site-footer.lp-footer {
	background: var(--hr-teal-deep);
}

/* Figma: 50 above, 24 under the icons (the left column ends 50 above the
   foot). */
.lp-footer__top.hr-footer {
	padding-block: 50px 24px;
	border-bottom: 0;
}

.hr-footer__inner {
	display: flex;
	justify-content: space-between;
	gap: 48px;
	font-family: var(--font-family-body);
	color: var(--white);
}

.hr-footer__about {
	max-width: 400px;
}

.hr-footer p {
	margin: 0;
}

.hr-footer .hr-footer__name {
	font-family: var(--font-family-heading);
	font-size: 18px;
	line-height: 27px;
}

.hr-footer .hr-footer__blurb {
	font-size: 12px;
	line-height: 18px;
}

.hr-footer__legal {
	margin-top: 27px;
	font-size: 16px;
	line-height: 27px;
}

.hr-footer a {
	color: inherit;
	text-decoration: none;
}

.hr-footer a:hover,
.hr-footer a:focus-visible {
	text-decoration: underline;
}

.hr-footer__nav {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.hr-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
	font-size: 16px;
	line-height: 28px;
}

.hr-footer__links li {
	margin: 0;
}

.hr-footer__social {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hr-footer__social a {
	display: flex;
	color: var(--white);
}

.hr-footer__social svg {
	width: auto;
	height: 16px;
}

.hr-footer__social-img {
	width: 16px;
	height: 16px;
}

@media screen and (max-width: 700px) {
	.hr-footer__inner {
		flex-direction: column;
		gap: 32px;
	}

	.hr-footer__nav {
		align-items: flex-start;
	}

	.hr-footer__links {
		text-align: left;
	}
}