/* ============================================================
   CLARITY ASSESSMENTS — SimplyBook.me Custom CSS
   Paste into: Custom Features → Custom CSS
   ============================================================

   BRAND TOKENS (reference only — SimplyBook.me strips :root
   variables in some themes, so hex values are written inline
   throughout rather than as var() calls.)

   Deep teal      #172E2A   headers, dark surfaces
   Rust           #855434   primary action / accent
   Rust hover     #6D4329
   Cream          #F8F6F2   light surface
   Border cream   #EFE6DD   hairlines, dividers
   Mushroom       #7D6E62   secondary / caption text
   Body brown     #3D3630   body copy
   Near-black     #1B140F   high-contrast text
   White          #FFFFFF

   TYPE
   Martina Plantijn — display serif, used with restraint
                      (Light 300 is the only hosted cut)
   Instrument Sans  — body
   Inter            — buttons, labels, captions
   ============================================================ */


/* ===== 0. FONT LOADING =====================================
   @import must be the very first thing in the file or the
   browser discards it. If SimplyBook.me reorders your CSS,
   the font-family declarations below will silently fall back
   to system fonts — check the rendered page, not the editor.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

/* Martina Plantijn is self-hosted on your WordPress theme —
   it's a Klim retail font, not on Google Fonts, so it loads
   by @font-face rather than @import. Only Light (300) and
   Light Italic are on the server, which is why every Martina
   rule below is weight 300; asking for 500 would make the
   browser fake a bold from the Light file. */

@font-face {
	font-family: 'Martina Plantijn';
	src: url('https://clarityassessments.org/wp-content/themes/clarity-assessments/fonts/MartinaPlantijn-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Martina Plantijn';
	src: url('https://clarityassessments.org/wp-content/themes/clarity-assessments/fonts/MartinaPlantijn-LightItalic.woff2') format('woff2');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}


/* ===== 1. GLOBAL BASE ====================================== */

body,
#sb-container,
.sb-widget {
	font-family: 'Instrument Sans', sans-serif;
	color: #3D3630;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: 'Martina Plantijn', Georgia, serif;
	color: #172E2A;
	font-weight: 300 !important;
	font-synthesis: none;
	-webkit-font-synthesis: none;
}


/* ===== 2. SERVICE CARDS ====================================
   The "For Your Child" / "For Yourself" selection cards.
   ========================================================== */

#events h3 {
	font-family: 'Instrument Sans', sans-serif;
	color: #172E2A;
	font-weight: 600 !important;
	font-size: 16px;
}

#events p.duration,
#events div.duration {
	color: #7D6E62;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 13px;
	font-weight: 500;
}

#events p.description,
#events div.description {
	color: #3D3630;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 13.5px;
	line-height: 1.5;
}

/* Card container */
#events .event,
#events li.event {
	background-color: #FFFFFF;
	border: 1px solid #EFE6DD;
	border-radius: 2px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

#events .event:hover {
	border-color: #7D6E62;
}

/* Selected state */
#events .selectedEvent {
	border: 2px solid #855434 !important;
	background-color: #F8F6F2 !important;
}

/* Kill the stock caduceus / medical clip-art icons */
#events .event .event-icon,
#events .event img.icon,
#events .service-icon {
	display: none !important;
}


/* ===== 3. BUTTONS ========================================== */

/* Primary — "Select" on each service card */
#events input.reserve_time_btn {
	background-color: #855434;
	color: #FFFFFF;
	border: none;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 10px 20px;
	transition: background-color 0.2s ease;
}

#events input.reserve_time_btn:hover {
	background-color: #6D4329;
}

/* Secondary — "Select another" */
#events input.select_another_btn {
	background-color: transparent;
	color: #172E2A;
	border: 1px solid #172E2A;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 10px 20px;
}

#events input.select_another_btn:hover {
	background-color: #172E2A;
	color: #F8F6F2;
}

/* Final confirm */
#eventForm #save_button {
	background-color: #855434;
	color: #FFFFFF;
	border: none;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 12px 28px;
}

#eventForm #save_button:hover {
	background-color: #6D4329;
}


/* ===== 4. STEP HEADERS ===================================== */

#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
	font-family: 'Martina Plantijn', Georgia, serif;
	font-weight: 300 !important;
	font-synthesis: none;
	-webkit-font-synthesis: none;
	font-style: italic;
	color: #172E2A;
	font-size: 22px;
	letter-spacing: 0;
}


/* ===== 5. DATE LINE / DATE STRIP ===========================
   .date-line--caption is the small label inside the date
   row — day-of-week or contextual date text depending on
   theme. Both treatments are here; comment out the one you
   don't want.
   ========================================================== */

/* (A) Small utility label — day-of-week, "Today", etc. */
.date-line--caption {
	font-family: 'Inter', sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #7D6E62 !important;
}

/* (B) Larger display date — uncomment to use instead of (A)
.date-line--caption {
	font-family: 'Martina Plantijn', Georgia, serif !important;
	font-style: italic !important;
	font-weight: 300 !important;
	font-synthesis: none !important;
	-webkit-font-synthesis: none !important;
	font-size: 22px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #172E2A !important;
}
*/

/* Parent row — spacing and divider */
.date-line {
	border-bottom: 1px solid #EFE6DD;
	padding-bottom: 10px;
	margin-bottom: 14px;
}


/* ===== 6. CALENDAR / DATEPICKER ============================ */

div.ui-widget-content {
	background-color: #FFFFFF;
	border: 1px solid #EFE6DD;
	color: #1B140F;
	font-family: 'Instrument Sans', sans-serif;
	border-radius: 2px;
}

div.ui-widget-header {
	background-color: #172E2A;
	color: #F8F6F2;
	border: none;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 0;
}

/* Prev / next arrows on the dark header */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	filter: invert(1) brightness(2);
}

/* Day-of-week column labels */
.ui-datepicker th {
	font-family: 'Inter', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7D6E62;
}

/* Available day cells */
.ui-datepicker td a.ui-state-default {
	background: #FFFFFF;
	border: 1px solid #EFE6DD;
	color: #172E2A;
	font-weight: 500;
	text-align: center;
	transition: background-color 0.15s ease;
}

.ui-datepicker td a.ui-state-default:hover {
	background: #F8F6F2;
	border-color: #855434;
}

/* Selected day */
.ui-datepicker td a.ui-state-active,
.ui-datepicker td.ui-datepicker-current-day a {
	background: #855434 !important;
	border-color: #855434 !important;
	color: #FFFFFF !important;
}

/* Today */
.ui-datepicker td.ui-datepicker-today a {
	background: #F8F6F2;
	border-color: #7D6E62;
	color: #172E2A;
}

/* Unavailable / disabled days */
.ui-datepicker td.ui-state-disabled,
.ui-datepicker td.ui-datepicker-unselectable span {
	background: #FFFFFF;
	color: #C9BFB4;
	opacity: 1;
}


/* ===== 7. TIME SLOT GRID =================================== */

#timeline-container table.timeline {
	font-family: 'Instrument Sans', sans-serif;
	border-color: #EFE6DD;
}

/* Available slot — cream, not the stock blue */
.timeline td.free_time,
.timeline td.available {
	background-color: #F8F6F2;
	border: 1px solid #EFE6DD;
	color: #172E2A;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.timeline td.free_time:hover,
.timeline td.available:hover {
	background-color: #855434;
	border-color: #855434;
	color: #FFFFFF;
}

/* Selected slot */
.timeline td.selected,
.timeline td.active_time {
	background-color: #855434 !important;
	border-color: #855434 !important;
	color: #FFFFFF !important;
}

/* Booked / unavailable */
.timeline td.busy_time,
.timeline td.booked {
	background-color: #EFE6DD;
	color: #A49689;
	border: 1px solid #EFE6DD;
}

/* Outside working hours */
.timeline td.not_worked_time {
	background-color: #F8F6F2;
	color: #C9BFB4;
	border: 1px solid #F1EBE4;
}

/* Hour labels down the side */
.timeline th,
.timeline td.hour_label {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #7D6E62;
	background: transparent;
	border: none;
}


/* ===== 8. CLIENT DETAILS FORM ==============================
   HIPAA note: keep these fields to non-PHI contact info only
   (name, email, phone). No reason-for-visit, no condition,
   no diagnosis free-text — that changes the compliance
   picture for anything tracking this page.
   ========================================================== */

#eventForm label,
.sb-form label {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #7D6E62;
}

#eventForm input[type="text"],
#eventForm input[type="email"],
#eventForm input[type="tel"],
#eventForm textarea,
#eventForm select {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 14px;
	color: #1B140F;
	background-color: #FFFFFF;
	border: 1px solid #EFE6DD;
	border-radius: 2px;
	padding: 10px 12px;
	transition: border-color 0.15s ease;
}

#eventForm input[type="text"]:focus,
#eventForm input[type="email"]:focus,
#eventForm input[type="tel"]:focus,
#eventForm textarea:focus,
#eventForm select:focus {
	border-color: #855434;
	outline: 2px solid rgba(133, 84, 52, 0.25);
	outline-offset: 1px;
}

::placeholder {
	color: #A49689;
	opacity: 1;
}

/* Validation */
.error,
.field-error,
#eventForm .invalid {
	color: #8A3324;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 12.5px;
}

#eventForm input.invalid,
#eventForm .invalid input {
	border-color: #8A3324;
}


/* ===== 9. SUMMARY / CONFIRMATION =========================== */

.booking-summary,
#booking-details,
.sb-summary {
	background-color: #F8F6F2;
	border: 1px solid #EFE6DD;
	border-radius: 2px;
	padding: 20px 24px;
	font-family: 'Instrument Sans', sans-serif;
	color: #3D3630;
}

.booking-summary h3,
.sb-summary h3 {
	font-family: 'Martina Plantijn', Georgia, serif;
	font-style: italic;
	font-weight: 300 !important;
	font-synthesis: none;
	-webkit-font-synthesis: none;
	font-size: 20px;
	color: #172E2A;
}


/* ===== 10. CLEANUP ========================================= */

/* SimplyBook.me's own branding line */
.powered-by,
#powered_by,
.sb-powered-by {
	display: none !important;
}

/* Social sharing tabs */
#social_tabs,
.social-share {
	display: none !important;
}


/* ===== 11. ACCESSIBILITY & MOBILE ========================== */

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid #855434;
	outline-offset: 2px;
}

@media (max-width: 640px) {
	#eventForm #start_date-block-container h3,
	#eventForm #timeline-container h3 {
		font-size: 19px;
	}

	#events input.reserve_time_btn,
	#eventForm #save_button {
		width: 100%;
		padding: 14px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}


/* ===== 12. LINKS ===========================================
   The contact block (phone / email / booking URL) renders in
   default browser blue because SimplyBook.me never styles
   these. Targeted by href scheme rather than class name, so
   this holds even if they rename the wrapper.

   :visited is included deliberately — without it, the email
   and URL turn default purple after someone clicks once,
   which is a second off-brand color most people miss.
   ========================================================== */

a[href^="tel:"],
a[href^="mailto:"],
a[href^="http"],
a[href^="tel:"]:visited,
a[href^="mailto:"]:visited,
a[href^="http"]:visited {
	color: #855434 !important;
	text-decoration: none;
	transition: color 0.15s ease;
}

a[href^="tel:"]:hover,
a[href^="mailto:"]:hover,
a[href^="http"]:hover {
	color: #6D4329 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Alternative — quieter treatment in deep teal, if three
   stacked rust links read too loud against the heading.
   Swap the color values above to #172E2A / #855434 on hover.
*/


/* ===== 13. SERVICE TITLES (modern widget) ==================
   The service card header ("For Your Child — Discovery Call")
   is not an h1–h4, so the global heading rule in Section 1
   never reaches it. This widget uses BEM-style class names —
   .date-line--caption was the giveaway — rather than the
   classic #events structure Section 2 assumes.

   Without the exact class, this casts a wide net by matching
   any class containing "title" or "name" inside a service or
   event container. It only sets type properties, so a stray
   match changes a font, not a layout.

   Once you inspect that header and send me the real class,
   this whole section collapses to one clean selector.
   ========================================================== */

[class*="service"] [class*="title"],
[class*="service"] [class*="name"],
[class*="event"] [class*="title"],
[class*="event"] [class*="name"],
[class*="item"] [class*="title"],
[class*="service--title"],
[class*="service__title"],
[class*="event--title"],
[class*="event__title"] {
	font-family: 'Martina Plantijn', Georgia, serif !important;
	font-weight: 300 !important;
	font-synthesis: none !important;
	-webkit-font-synthesis: none !important;
	font-style: normal !important;
	color: #172E2A !important;
	letter-spacing: 0 !important;
}