/*
Theme Name:   Roberts PT Divi Child
Theme URI:    https://robertspt.golf
Description:  Child theme for the Roberts PT website. All custom code lives here, never in the Divi parent theme.
Author:       Bradley Beach
Template:     Divi
Version:      0.8.1
Text Domain:  robertspt-divi-child
*/

/*
 * Roberts PT design tokens. Source of truth: docs/design-system.md.
 * Divi 5 global variables and presets must use the same names and values.
 * Prefix custom properties with --rpt-
 */

/* Self-hosted variable fonts (latin subset). OFL licensed. Fraunces includes the optical-size (opsz) axis so large headings use the display cut. */
@font-face {
	font-family: 'Fraunces';
	src: url('fonts/Fraunces-latin.woff2') format('woff2');
	font-weight: 500 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Hanken Grotesk';
	src: url('fonts/Hanken-Grotesk-latin.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Color */
	--rpt-slate: #3c4f53;
	--rpt-slate-body: #42555a;
	--rpt-slate-muted: #52656a;
	--rpt-slate-deep: #2a3a3d;
	--rpt-footer-bg: #2e3d40;
	--rpt-text-dark: #d9d2c3;
	--rpt-line-on-dark: #6b8084;
	--rpt-copper: #a15b32;
	--rpt-copper-deep: #8f4f2a;
	--rpt-copper-hover: #86471f;
	--rpt-peach: #e8b896;
	--rpt-cream: #f7f3eb;
	--rpt-sand: #eee8dd;
	--rpt-sand-deep: #e4dccb;
	--rpt-white: #ffffff;
	--rpt-line: #e4dccb;
	--rpt-line-strong: #d8cfbd;
	--rpt-error: #b3261e;

	/* Typography */
	--rpt-font-heading: 'Fraunces', Georgia, serif;
	--rpt-font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--rpt-fs-h1: clamp(36px, 5.2vw, 64px);
	--rpt-fs-h2: clamp(30px, 3.8vw, 46px);
	--rpt-fs-h2-band: clamp(34px, 3.6vw, 52px);
	--rpt-fs-btn: 15px;
	--rpt-fs-btn-lg: 17px;
	--rpt-fs-h3: clamp(22px, 2.2vw, 28px);
	--rpt-fs-lead: clamp(18px, 1.6vw, 21px);
	--rpt-fs-body: 17px;
	--rpt-fs-small: 14px; /* floor for fine print */
	--rpt-fs-eyebrow: 13px;
	--rpt-lh-heading: 1.1;
	--rpt-lh-body: 1.55;
	--rpt-tracking-eyebrow: 0.16em;

	/* Layout */
	--rpt-container: 1200px;
	--rpt-gutter: 24px;
	--rpt-section-pad: clamp(56px, 8vw, 104px);
	--rpt-bp-stack: 820px;
	--rpt-bp-wide: 1180px;

	/* Shape and elevation */
	--rpt-radius-sm: 10px;
	--rpt-radius-card: 18px;
	--rpt-radius-lg: 28px;
	--rpt-radius-pill: 999px;
	--rpt-shadow-raised: 0 8px 28px rgba(60, 79, 83, 0.16);

	/* Interaction */
	--rpt-tap-min: 48px;
	--rpt-focus-ring: 3px solid var(--rpt-slate);

	/* Logo heights */
	--rpt-logo-h-desktop: 60px;
	--rpt-logo-h-mobile: 50px;
}

/* Accessibility: visible focus on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: var(--rpt-focus-ring);
	outline-offset: 2px;
}

/* On dark (slate) bands the focus ring must stay visible. */
.rpt-on-dark a:focus-visible,
.rpt-on-dark button:focus-visible {
	outline-color: var(--rpt-peach);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Logo sizing: 60px tall on desktop, 50px on phones. */
.rpt-logo img {
	display: block;
	height: var(--rpt-logo-h-desktop);
	width: auto;
}

@media (max-width: 820px) {
	.rpt-logo img {
		height: var(--rpt-logo-h-mobile);
	}
}

/*
 * Mobile primary CTA: sticky bottom bar. Same wording as the desktop CTA
 * ("Book a Free 20-Minute Body Screening"). Hidden on desktop.
 * Markup is added later in the Theme Builder (a Code or Button module with
 * class rpt-sticky-cta).
 */
.rpt-sticky-cta {
	display: none;
}

@media (max-width: 820px) {
	.rpt-sticky-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		padding: 10px var(--rpt-gutter) calc(10px + env(safe-area-inset-bottom));
		background: var(--rpt-cream);
		border-top: 1px solid var(--rpt-line);
		box-shadow: 0 -4px 16px rgba(60, 79, 83, 0.1);
	}

	.rpt-sticky-cta a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: var(--rpt-tap-min);
		padding: 12px 20px;
		border-radius: var(--rpt-radius-sm);
		background: var(--rpt-copper);
		color: var(--rpt-white);
		font-family: var(--rpt-font-body);
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;
	}

	.rpt-sticky-cta a:hover {
		background: var(--rpt-copper-hover);
	}

	/* Keep the footer clear of the sticky bar. */
	body {
		padding-bottom: calc(var(--rpt-tap-min) + 28px);
	}
}

/*
 * Header, final CTA band and footer layout.
 * Measured against RobertsPT Homepage Concept.html at 1440px. Source: scripts/build-divi5-header-footer.py.
 * Layout lives here (grid/flex) because Divi columns cannot express it; colors, type and button styling
 * come from Divi presets.
 */

/* Shared 1200px container; columns become grid/flex children. */
.rpt-header .et_pb_row,
.rpt-cta-band .et_pb_row,
.rpt-footer .et_pb_row {
	width: calc(100% - (2 * var(--rpt-gutter)));
	max-width: var(--rpt-container);
	padding: 0;
}

.rpt-header .et_pb_row .et_pb_column.et_pb_column,
.rpt-cta-band .et_pb_row .et_pb_column.et_pb_column,
.rpt-footer .et_pb_row .et_pb_column.et_pb_column {
	width: auto;
	margin: 0;
}

.rpt-header .et_pb_module,
.rpt-cta-band .et_pb_module,
.rpt-footer .et_pb_module {
	margin-bottom: 0;
}

/* Eyebrow label */
.rpt-eyebrow {
	margin: 0;
	font-family: var(--rpt-font-body);
	font-size: var(--rpt-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--rpt-tracking-eyebrow);
	line-height: 20px;
	text-transform: uppercase;
	color: var(--rpt-copper-deep);
}

.rpt-eyebrow--dark {
	color: var(--rpt-peach);
}

.rpt-eyebrow--muted {
	color: var(--rpt-text-dark);
	letter-spacing: 0.12em;
}

/* ---- Header (97px: 18px + 60px logo + 18px) ---- */
.rpt-header .et_pb_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.rpt-header .et_pb_column:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.rpt-header .et_pb_column:last-child {
	flex: 0 0 auto;
}

.rpt-header-cta {
	text-align: right;
}

.rpt-header-cta .et_pb_button {
	white-space: nowrap;
}

.rpt-header .et_pb_menu {
	margin: 0;
	padding: 0;
}

.rpt-header .et_pb_menu__logo-wrap {
	margin-right: 31px;
}

.rpt-header .et_pb_menu .et-menu-nav > ul > li {
	padding-left: 12px;
	padding-right: 12px;
}

.rpt-header .et_pb_menu .et-menu-nav > ul > li > a {
	padding: 10px 4px;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
}

.rpt-header .et_pb_menu .et-menu-nav > ul > li.menu-item-has-children > a {
	padding-right: 20px;
}

@media (min-width: 981px) {
	.rpt-header .et_pb_menu .et-menu-nav > ul,
	.rpt-header .et_pb_menu .et_pb_menu__wrap {
		flex-wrap: nowrap;
	}

	.rpt-header .et_pb_menu .et-menu-nav > ul > li > a {
		white-space: nowrap;
	}
}

/* Dropdown: always a vertical list. */
.rpt-header .et_pb_menu .et-menu .sub-menu {
	display: block;
	width: max-content;
	min-width: 260px;
	white-space: normal;
}

.rpt-header .et_pb_menu .et-menu .sub-menu li {
	display: block;
	width: 100%;
}

.rpt-header .et_pb_menu .et-menu .sub-menu li a {
	display: block;
	width: auto;
	padding: 9px 20px;
	white-space: nowrap;
}

@media (max-width: 820px) {
	.rpt-header-cta {
		display: none;
	}
}

/* ---- Final CTA band (493px at 1440) ---- */
.rpt-cta-band .et_pb_row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	column-gap: 48px;
	align-items: center;
}

.rpt-cta-band .rpt-eyebrow {
	margin-bottom: 18px;
}

.rpt-cta-band .et_pb_heading {
	margin-bottom: 28px;
}

.rpt-cta-band .et_pb_button {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}

.rpt-cta-band .et_pb_text,
.rpt-cta-band .et_pb_text p {
	color: var(--rpt-cream);
	font-size: var(--rpt-fs-body);
}

.rpt-cta-band .rpt-phone-line {
	margin: 16px 0 0;
	font-size: var(--rpt-fs-body);
	font-weight: 600;
	line-height: 44px;
	text-align: center;
}

.rpt-checklist,
.rpt-footer-links,
.rpt-social {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpt-checklist li {
	position: relative;
	margin: 0 0 14px;
	padding: 0 0 0 32px;
	font-size: var(--rpt-fs-body);
	line-height: 26px;
}

.rpt-checklist li:last-child {
	margin-bottom: 0;
}

.rpt-checklist li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--rpt-peach);
	font-weight: 700;
}

/* ---- Footer (384px at 1440) ---- */
.rpt-footer .rpt-footer-grid {
	display: grid;
	grid-template-columns: 340px 402px minmax(0, 1fr);
	column-gap: 48px;
	align-items: start;
}

.rpt-footer .et_pb_image img {
	display: block;
	width: 240px;
	max-width: 100%;
	height: auto;
}

.rpt-footer .et_pb_text,
.rpt-footer .et_pb_text p {
	margin: 0;
	color: var(--rpt-text-dark);
	font-size: 16px;
	line-height: 1.6;
}

.rpt-footer-heading {
	margin: 0 0 12px;
	font-size: var(--rpt-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 21px;
	text-transform: uppercase;
	color: var(--rpt-cream);
}

.rpt-footer .et_pb_text p + p {
	margin-top: 8px;
}

.rpt-footer .et_pb_text .rpt-footer-heading + p {
	margin-top: 0;
}

.rpt-footer .et_pb_text a {
	color: var(--rpt-cream);
	font-weight: 600;
}

.rpt-footer .et_pb_text a:hover {
	color: var(--rpt-white);
}

.rpt-footer-links li {
	padding: 0 0 12px;
}

.rpt-footer .rpt-footer-links a {
	color: var(--rpt-text-dark);
	font-weight: 400;
}

.rpt-social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.rpt-footer .rpt-social a {
	display: inline-block;
	padding: 0 20px;
	border: 1px solid var(--rpt-slate-muted);
	border-radius: var(--rpt-radius-pill);
	font-size: var(--rpt-fs-small);
	font-weight: 500;
	line-height: 44px;
	text-decoration: none;
}

.rpt-footer .rpt-footer-legalrow {
	margin-top: 32px;
}

/* On dark: links and focus */
.rpt-on-dark .et_pb_text a {
	text-decoration-thickness: 1px;
}

@media (max-width: 980px) {
	.rpt-cta-band .et_pb_row,
	.rpt-footer .rpt-footer-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}

	.rpt-cta-band .et_pb_button {
		width: 100%;
	}
}

/* ---- v0.6.1: specificity fixes found by measuring against the concept ---- */

/* Divi adds padding-bottom:1em to every paragraph and 10px under headings; the layouts own their spacing. */
.rpt-header .et_pb_text p,
.rpt-cta-band .et_pb_text p,
.rpt-footer .et_pb_text p {
	padding-bottom: 0;
}

.rpt-cta-band .et_pb_heading .et_pb_heading_container h2,
.rpt-cta-band .et_pb_heading .et_pb_heading_container h1 {
	padding-bottom: 0;
}

/* Buttons: header CTA is 48px tall; band CTA fills its 460px column at 56px. */
.rpt-header .et_pb_button.et_pb_button {
	line-height: 24px;
}

.rpt-cta-band .et_pb_button_module_wrapper {
	width: 100%;
}

.rpt-cta-band a.et_pb_button.et_pb_button {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	line-height: 24px;
}

/* Eyebrow keeps its own size and color inside the band. */
.rpt-cta-band .et_pb_text p.rpt-eyebrow {
	font-size: var(--rpt-fs-eyebrow);
	font-weight: 700;
	line-height: 20px;
	color: var(--rpt-peach);
}

/* Checklist and links inside the band. */
.rpt-cta-band .et_pb_text ul.rpt-checklist {
	margin: 0;
	padding: 0;
}

.rpt-cta-band .et_pb_text ul.rpt-checklist li {
	font-weight: 400;
	color: var(--rpt-cream);
}

.rpt-cta-band .et_pb_text .et_pb_text_inner a,
.rpt-cta-band .et_pb_text .et_pb_text_inner a:visited {
	color: var(--rpt-cream);
	font-weight: 600;
}

/* Footer: logo 240px wide, headings 13px, lists reset, weights 400. */
.rpt-footer .et_pb_module.et_pb_image img {
	width: 240px;
	max-width: 100%;
	height: auto;
}

.rpt-footer .et_pb_text .et_pb_text_inner p.rpt-footer-heading {
	margin: 0 0 12px;
	font-size: var(--rpt-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 21px;
	color: var(--rpt-cream);
}

.rpt-footer .et_pb_text .et_pb_text_inner ul {
	margin: 0;
	padding: 0;
}

.rpt-footer .et_pb_text .et_pb_text_inner li {
	font-size: 16px;
	font-weight: 400;
}

.rpt-footer .et_pb_text .et_pb_text_inner ul.rpt-footer-links li {
	padding: 0 0 12px;
}

.rpt-footer .et_pb_text .et_pb_text_inner p {
	font-weight: 400;
}

.rpt-footer .rpt-footer-legalrow {
	margin-top: 40px;
}

.rpt-footer .et_pb_text .et_pb_text_inner a.rpt-link-arrow {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rpt-link-arrow::after {
	content: "\2197";
	margin-left: 8px;
	text-decoration: none;
	display: inline-block;
}

/* ---- v0.6.2: beat Divi's per-module margins, button caps and the Smush lazyload width ---- */

/* Divi writes margin-bottom per module (about 33px at desktop); these layouts own their spacing. */
.rpt-header .et_pb_module,
.rpt-cta-band .et_pb_module,
.rpt-footer .et_pb_module {
	margin-bottom: 0 !important;
}

.rpt-cta-band .et_pb_heading .et_pb_heading_container {
	padding-bottom: 28px;
}

/* Divi caps buttons at max-content and forces line-height 1.7em !important. */
.rpt-header .et_pb_module.et_pb_button.et_pb_button,
.rpt-cta-band .et_pb_module.et_pb_button.et_pb_button {
	line-height: 24px !important;
}

.rpt-cta-band .et_pb_module.et_pb_button.et_pb_button {
	max-width: none;
	width: 100%;
}

/* Smush lazyload forces an inline width (!important); logos must keep their set size. */
.rpt-footer .et_pb_image img,
.rpt-footer .et_pb_image img.lazyload,
.rpt-footer .et_pb_image img.lazyloaded {
	width: 240px !important;
	height: auto !important;
}

/* ---- v0.6.3: footer rhythm per concept (384px) ---- */

.rpt-footer .et_pb_text .et_pb_text_inner ul.rpt-social {
	margin-top: 30px;
}

.rpt-footer .et_pb_text .et_pb_text_inner p.rpt-footer-heading + ul {
	margin-top: 20px;
}

.rpt-footer .et_pb_text .et_pb_text_inner ul.rpt-footer-links li:last-child {
	padding-bottom: 0;
}

.rpt-footer .et_pb_text .et_pb_text_inner p.rpt-tap {
	margin: 0;
	line-height: 44px;
}

.rpt-footer .et_pb_text .et_pb_text_inner p.rpt-tap--first {
	margin-top: 8px;
}

.rpt-footer .et_pb_text .et_pb_text_inner p.rpt-address {
	margin: 0;
	line-height: 25.5px;
}

.rpt-footer .rpt-footer-legalrow {
	margin-top: 41px;
}

/* ---- v0.6.4: lists, band button, legal row, list rhythm (found by pixel comparison with the concept) ---- */

/* Divi's .et_pb_text ul { list-style: disc } must not show next to custom markers. */
.rpt-on-dark .et_pb_text .et_pb_text_inner ul,
.rpt-on-dark .et_pb_text .et_pb_text_inner ul li {
	list-style: none;
}

/* Thin check mark, like the concept (CSS-drawn, no icon font). */
.rpt-checklist li::before {
	content: "";
	left: 3px;
	top: 6px;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--rpt-peach);
	border-bottom: 2px solid var(--rpt-peach);
	transform: rotate(-45deg);
}

/* Band button: centered label with an arrow, like the concept. */
.rpt-cta-band .et_pb_module.et_pb_button.et_pb_button {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.rpt-cta-band .et_pb_button::after {
	content: "\2192";
	position: static;
	margin: 0;
	opacity: 1;
	font-family: var(--rpt-font-body);
	font-size: 1.1em;
	line-height: 1;
}

/* Footer legal row spans the full container. */
.rpt-footer .rpt-footer-legalrow .et_pb_column.et_pb_column {
	width: 100%;
}

.rpt-footer .et_pb_text .et_pb_text_inner ul.rpt-footer-links li {
	line-height: 21px;
}

/* ---- v0.6.5: neutralise Divi's icon positioning on the band button ---- */
.rpt-cta-band .et_pb_module.et_pb_button.et_pb_button::before {
	display: none !important;
}

.rpt-cta-band .et_pb_module.et_pb_button.et_pb_button::after {
	position: static !important;
	top: auto !important;
	transform: none !important;
	margin: 0 !important;
	font-size: 20px !important;
	line-height: 1 !important;
	opacity: 1 !important;
}

/* ---- v0.6.6: mobile menu submenu toggle belongs to its own row ---- */
.rpt-header .et_mobile_menu li.menu-item-has-children {
	position: relative;
}

/* ---- v0.7.0: social icons = 46px stroke circles with matching icons (concept) ---- */
.rpt-footer .et_pb_text .et_pb_text_inner ul.rpt-social li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--rpt-line-on-dark);
	border-radius: 50%;
	color: var(--rpt-cream);
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.rpt-footer .et_pb_text .et_pb_text_inner ul.rpt-social li a:hover {
	border-color: var(--rpt-cream);
}

.rpt-footer .rpt-social svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* ---- v0.8.0: footer legal row = eyebrow, "Footer Legal" menu (Privacy, Terms, Accessibility), copyright ---- */
.rpt-footer .rpt-footer-legalrow .et_pb_column.et_pb_column {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 24px;
	row-gap: 0;
	padding-top: 20px;
	border-top: 1px solid var(--rpt-slate-muted);
}

.rpt-footer .et_pb_text p.rpt-copyright {
	font-size: var(--rpt-fs-small);
	line-height: 44px;
}

/* Eyebrow may wrap on phones: normal line height, padded to the 44px row. */
.rpt-footer .et_pb_text p.rpt-legal-eyebrow {
	padding: 11px 0;
	font-size: var(--rpt-fs-small);
	line-height: 22px;
}

.rpt-footer .rpt-footer-legalmenu {
	margin-left: auto;
	padding: 0;
	background: transparent;
}

/* Menu module as a plain link row: no hamburger, links wrap on narrow screens. */
.rpt-footer .rpt-footer-legalmenu .et_pb_menu_inner_container,
.rpt-footer .rpt-footer-legalmenu .et_pb_menu__wrap,
.rpt-footer .rpt-footer-legalmenu .et_pb_menu__menu,
.rpt-footer .rpt-footer-legalmenu .et-menu-nav {
	display: flex !important;
	flex-wrap: wrap;
	padding: 0;
}

.rpt-footer .rpt-footer-legalmenu .et_mobile_nav_menu,
.rpt-footer .rpt-footer-legalmenu .mobile_nav {
	display: none !important;
}

.rpt-footer .rpt-footer-legalmenu .et-menu {
	display: flex !important;
	flex-wrap: wrap;
	column-gap: 24px;
	margin: 0;
	padding: 0;
}

.rpt-footer .rpt-footer-legalmenu .et-menu li {
	margin: 0;
	padding: 0;
}

.rpt-footer .rpt-footer-legalmenu .et-menu li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	color: var(--rpt-text-dark);
	font-size: var(--rpt-fs-small);
	font-weight: 400;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 1;
}

.rpt-footer .rpt-footer-legalmenu .et-menu li a:hover {
	color: var(--rpt-white);
	opacity: 1;
}

@media (max-width: 820px) {
	.rpt-footer .rpt-footer-legalrow .et_pb_column.et_pb_column {
		flex-direction: column;
		align-items: flex-start;
	}

	.rpt-footer .rpt-footer-legalmenu {
		margin-left: 0;
	}
}

/* ---- v0.8.1: header CTA changes color on hover only; Divi's hover arrow icon is removed there ---- */
.rpt-header .et_pb_button.et_pb_button::before,
.rpt-header .et_pb_button.et_pb_button::after,
.rpt-header .et_pb_button.et_pb_button:hover::before,
.rpt-header .et_pb_button.et_pb_button:hover::after {
	content: none !important;
	display: none !important;
}

/* Divi also widens the button's padding on hover to make room for that icon; keep the resting 20px. */
.rpt-header .et_pb_button.et_pb_button:hover {
	padding-left: 20px !important;
	padding-right: 20px !important;
}
