/*
Theme Name: CareBridge Horizons
Theme URI:    https://carebridge.nukind.co/
Description:  Hello Elementor child theme for CareBridge Horizons. Holds the brand font and a small set of component styles that Elementor (free) cannot express natively. Layout, colours, typography and spacing live in Elementor (Site Settings + widget settings).
Author:       NuKind Digital
Author URI:   https://nukindigital.com.au/
Template:     hello-elementor
Version:      1.4.0
Text Domain:  carebridge-horizons
*/

/* ==========================================================================
   HOW THIS FILE IS ORGANISED
   1. Brand font + tokens        (mirror Elementor Site Settings > Global Colors)
   2. Base + accessibility
   3. Header (Header Footer Elementor template)
   4. Utility classes            (add in Elementor > Advanced > CSS Classes)
        .cb-hero        home hero cream gradient over the background photo
        .cb-nowrap      keep each <br> line of a heading on one line (desktop/tablet)
        .cb-text-link   underlined teal text link (Heading widget with a link)
        .cb-video       rounded 4:3 self-hosted video
        .cb-map         rounded Google Map
        .cb-footer-list footer link lists (Icon List widget)
        .cb-faq         FAQ accordion
        .cb-portrait    leader portrait framing
        .cb-value-text  Core Values card text
        .cb-checklist   tick list panels on Services
   5. Contact form (Contact Form 7, wrapped in .cb-form)
   ========================================================================== */

/* 1. Brand font + tokens ------------------------------------------------- */
/* Moontime file: Media Library > moontime.woff2 (preloaded on the home page). */
@font-face {
	font-family: "Moontime";
	src: url("../../uploads/2026/10/moontime.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--cb-navy: #1f2c5c;
	--cb-teal: #009d9a;
	--cb-purple: #6b4199;
	--cb-sun: #ffc332;
	--cb-cream: #fff5e7;
	--cb-white: #fff;
}

/* 2. Base + accessibility ------------------------------------------------ */
html { scroll-behavior: smooth; }
body { background: var(--cb-white); }

/* Hello's reset colours links pink; the design inherits text colour. */
a, a:hover, a:active { color: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
	outline: 3px solid var(--cb-purple);
	outline-offset: 3px;
}

/* Paragraph rhythm inside Text Editor widgets. Spacing between widgets is
   set on each widget (Advanced > Margin), so the last paragraph has none. */
.elementor-widget-text-editor p { margin: 0 0 1em; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget-text-editor ul { margin: 0; padding-left: 20px; }
.elementor-widget-text-editor li { margin: 10px 0; }
.elementor-widget-text-editor li:first-child { margin-top: 0; }
.elementor-widget-text-editor li:last-child { margin-bottom: 0; }

/* Button lift on hover (colours come from Site Settings > Buttons). */
.elementor-button,
input[type="submit"] {
	transition: transform .2s, background-color .2s, border-color .2s, color .2s;
}
.elementor-button:hover,
input[type="submit"]:hover { transform: translateY(-2px); }

/* Anchor targets clear the sticky header. */
[id] { scroll-margin-top: 100px; }

/* 3. Header -------------------------------------------------------------- */
/* Sticky header. "body." outranks Header Footer Elementor's
   ".ehf-header #masthead { position: relative }". The negative offset
   (--cb-topbar-h, set by a small script in functions.php) lets the top bar
   scroll away while the logo and menu row stays pinned. */
body.ehf-header #masthead {
	position: sticky;
	top: calc(0px - var(--cb-topbar-h, 0px));
	z-index: 100;
}
body.admin-bar.ehf-header #masthead { top: calc(32px - var(--cb-topbar-h, 0px)); }
@media (max-width: 782px) { body.admin-bar.ehf-header #masthead { top: calc(46px - var(--cb-topbar-h, 0px)); } }
@media (max-width: 600px) { body.admin-bar.ehf-header #masthead { top: calc(0px - var(--cb-topbar-h, 0px)); } }

/* Top bar (Site Header > "Top Bar" container, class cb-topbar).
   Edit the email and phone in its Text Editor widget. */
.cb-topbar p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 12px 32px;
	margin: 0;
	padding-block: 4px;
}
.cb-topbar a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	color: var(--cb-white);
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.cb-topbar a:hover { color: var(--cb-white); text-decoration: underline; text-underline-offset: 4px; }
.cb-topbar a:focus-visible { outline-color: var(--cb-sun); }
.cb-topbar__label { color: var(--cb-sun); font-weight: 700; }
@media (max-width: 650px) {
	.cb-topbar p { justify-content: center; gap: 0 22px; padding-block: 6px; }
}
@media (max-width: 380px) {
	.cb-topbar .elementor-widget-text-editor { width: 100%; }
	.cb-topbar p { flex-direction: column; align-items: flex-start; }
}

/* Primary navigation ([carebridge_nav] shortcode in the Site Header). */
.cb-nav-widget,
.cb-nav-widget .elementor-widget-container { position: static; }
.cb-nav {
	display: flex;
	align-items: center;
	gap: 27px;
}
.cb-nav a {
	color: var(--cb-navy);
	font-size: 15px;
	font-weight: 650;
	line-height: 1.65;
	text-decoration: none;
	white-space: nowrap;
}
.cb-nav a:hover,
.cb-nav a[aria-current="page"] { color: var(--cb-teal); }
.cb-nav .cb-nav__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 11px 23px;
	border: 2px solid var(--cb-navy);
	border-radius: 9px;
	background: var(--cb-navy);
	color: var(--cb-white);
	transition: transform .2s, background-color .2s, border-color .2s;
}
.cb-nav .cb-nav__button:hover {
	transform: translateY(-2px);
	background: var(--cb-purple);
	border-color: var(--cb-purple);
	color: var(--cb-white);
}
.cb-navbar .cb-menu-toggle,
.cb-navbar .cb-menu-toggle:hover,
.cb-navbar .cb-menu-toggle:focus {
	display: none;
	padding: 10px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--cb-navy);
	font: inherit;
	font-weight: 700;
	line-height: 1.65;
	cursor: pointer;
}
@media (max-width: 900px) {
	.cb-navbar .cb-menu-toggle,
	.cb-navbar .cb-menu-toggle:hover,
	.cb-navbar .cb-menu-toggle:focus { display: block; }
	.cb-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 20;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		padding: 20px 24px 28px;
		background: var(--cb-white);
		box-shadow: 0 15px 20px rgba(31, 44, 92, .125);
	}
	.cb-nav.is-open { display: flex; }
	.cb-nav a { padding: 10px; }
	.cb-nav .cb-nav__button { margin-top: 8px; }
}

/* 4. Utility classes ----------------------------------------------------- */

/* Home hero: cream fade from the left (top on mobile) keeps copy readable. */
.cb-hero { position: relative; }
.cb-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(90deg, rgba(255,245,231,.99) 0%, rgba(255,245,231,.96) 29%, rgba(255,245,231,.78) 48%, rgba(255,245,231,.12) 70%, rgba(255,245,231,0) 100%);
}
.cb-hero > .e-con-inner { position: relative; z-index: 1; }
@media (max-width: 650px) {
	.cb-hero::before {
		background-image: linear-gradient(180deg, rgba(255,245,231,.99) 0%, rgba(255,245,231,.97) 46%, rgba(255,245,231,.45) 71%, rgba(255,245,231,.04) 100%);
	}
}

.cb-nowrap .elementor-heading-title { white-space: nowrap; }
@media (max-width: 650px) {
	.cb-nowrap .elementor-heading-title { white-space: normal; }
}

.cb-text-link a {
	font-weight: 800;
	text-decoration: underline;
	text-decoration-color: var(--cb-teal);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	overflow-wrap: anywhere;
}
.cb-text-link a:hover { color: var(--cb-purple); }

.cb-video .elementor-wrapper {
	border-radius: 24px;
	overflow: hidden;
	background: var(--cb-navy);
}
.cb-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cb-map iframe { border-radius: 16px; background: var(--cb-cream); }

.cb-footer-list a { text-decoration: none; overflow-wrap: anywhere; }
.cb-footer-list a:hover .elementor-icon-list-text { text-decoration: underline; }

.cb-faq .e-n-accordion-item {
	border-bottom: 1px solid rgba(31, 44, 92, .2);
	padding: 20px 0;
}
.cb-faq summary { list-style: none; }
.cb-faq summary::-webkit-details-marker { display: none; }

/* About: leader portrait framing (Image widget). */
.cb-portrait img { object-position: center 28%; }

/* About: Core Values card text (Text Editor with an H4 and a paragraph). */
.cb-value-text { min-width: 0; overflow-wrap: break-word; }
.cb-value-text h4 {
	margin: 0 0 10px;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -.015em;
}
.cb-value-text p { margin: 0; }

/* Services: tick list in the tinted panels (Text Editor bulleted list). */
.cb-checklist ul { list-style: none; margin: 0; padding: 0; }
.cb-checklist li {
	position: relative;
	margin: 0;
	padding: 18px 0 18px 32px;
	border-bottom: 1px solid rgba(31, 44, 92, .125);
	font-size: 16px;
	line-height: 1.6;
	overflow-wrap: break-word;
}
.cb-checklist li:first-child { padding-top: 0; }
.cb-checklist li:last-child { padding-bottom: 0; border-bottom: 0; }
.cb-checklist li::before {
	content: "\2713";
	position: absolute;
	top: 18px;
	left: 0;
	font-weight: 700;
	color: var(--cb-navy);
}
.cb-checklist li:first-child::before { top: 0; }

/* 5. Contact form (Contact Form 7) --------------------------------------- */
.cb-form .wpcf7 form { margin: 0; }
.cb-form .cb-field { margin-bottom: 20px; }
.cb-form .cb-field > label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.65;
	margin-bottom: 7px;
}
.cb-form .wpcf7-form-control-wrap { display: block; }
.cb-form input[type="text"],
.cb-form input[type="email"],
.cb-form input[type="tel"],
.cb-form select,
.cb-form textarea {
	width: 100%;
	min-height: 48px;
	border: 1.5px solid var(--cb-navy);
	border-radius: 8px;
	background: var(--cb-white);
	color: var(--cb-navy);
	padding: 12px 14px;
	font: inherit;
}
.cb-form textarea { height: 140px; min-height: 140px; resize: vertical; }
.cb-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.cb-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}
.cb-form .wpcf7-acceptance .wpcf7-list-item-label {
	font-size: 15px;
	font-weight: 700;
}
.cb-form .wpcf7-acceptance input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--cb-navy);
}
.cb-form .cb-form-note { font-size: 14px; margin: 0 0 14px; }
.cb-form input[type="submit"] { min-height: 50px; cursor: pointer; }
.cb-form .wpcf7-spinner { vertical-align: middle; }
.cb-form .wpcf7-not-valid-tip { font-size: 14px; margin-top: 6px; color: #b3261e; }
.cb-form .wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 15px;
}