/* ==========================================================================
   Contact Page — Get in Touch sections
   --------------------------------------------------------------------------
   Covers all four sub-sections of the Contact page:
     .azuri-ct-header      — "Get in touch" heading block
     .azuri-ct-booking     — Medical + Cosmetic booking cards
     .azuri-ct-info        — Location / hours info card + map
     .azuri-ct-afterhours  — After-hours emergency banner

   Tokens reference variables declared in style.css :root.
   Contact-page-specific tokens are declared below.
   ========================================================================== */

/* ── Contact-page tokens ─────────────────────────────────────────────────── */
:root {
	/* Booking card gradients */
	--azuri-ct-grad-medical:  linear-gradient(156deg, #2aadb5 0%, #1d8c94 100%);
	--azuri-ct-grad-cosmetic: linear-gradient(156deg, #d4789a 0%, #b85e7e 100%);

	/* Info card gradient (dark navy → dark teal) */
	--azuri-ct-grad-info: linear-gradient(163deg, #11143f 0%, #07443f 100%);

	/* After-hours banner */
	--azuri-ct-afterhours-bg-start: #fffbeb;
	--azuri-ct-afterhours-bg-end:   #fff7ed;
	--azuri-ct-afterhours-border:   #ffb900;
	--azuri-ct-afterhours-icon-bg:  #ffb900;
	--azuri-ct-afterhours-title:    #7b3306;
	--azuri-ct-afterhours-body:     #973c00;

	/* Card radius */
	--azuri-ct-card-radius: 16px;

	/* Card shadow */
	--azuri-ct-card-shadow:
		0 10px 8px -2px rgba(0, 0, 0, 0.10),
		0 4px 3px -1px rgba(0, 0, 0, 0.10);
	--azuri-ct-info-shadow:
		0 20px 25px -5px rgba(0, 0, 0, 0.10),
		0 8px 10px -6px rgba(0, 0, 0, 0.10);
}

/* ==========================================================================
   SHARED: Page wrapper — removes GP's built-in container and sidebar padding
   ========================================================================== */

.azuri-template-contact .site-content,
.azuri-template-contact #primary {
	padding: 0;
	max-width: none;
	width: 100%;
}

/* ==========================================================================
   1. SECTION HEADER
   ========================================================================== */

.azuri-ct-header {
	background: var(--azuri-color-white);
	padding-top: var(--azuri-space-10);
	padding-bottom: var(--azuri-space-8);
}

.azuri-ct-header__row {
	justify-content: center;
}

.azuri-ct-header__inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--azuri-space-3);
	justify-content: center;
	text-align: center;
}

.azuri-ct-header__heading {
	color: #11143f;
	font-family: var(--azuri-font-family-base);
	font-size: 36px;
	font-weight: 300; /* DM Sans Light */
	line-height: 1.111;
	margin: 0;
}

.azuri-ct-header__subtitle {
	color: #4a5565;
	font-family: var(--azuri-font-family-base);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

/* ==========================================================================
   2. BOOKING CARDS
   ========================================================================== */

.azuri-ct-booking {
	background: var(--azuri-color-white);
	padding-bottom: var(--azuri-space-8);
}

.azuri-ct-booking__row {
	align-items: stretch;
}

/* Full height for inner so card fills the column */
.azuri-ct-booking__col.azuri_inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
}

/* ── Base card ──────────────────────────────────────────────────────────── */

.azuri-ct-card {
	border-radius: var(--azuri-ct-card-radius);
	box-shadow: var(--azuri-ct-card-shadow);
	display: flex;
	flex-direction: column;
	gap: 0;
	height: 100%;
	min-height: 260px;
	overflow: hidden;
	padding: var(--azuri-space-8);
	position: relative;
}

.azuri-ct-card--medical  { background: var(--azuri-ct-grad-medical); }
.azuri-ct-card--cosmetic { background: var(--azuri-ct-grad-cosmetic); }

/* Card header: icon badge + label */
.azuri-ct-card__header {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
}

.azuri-ct-card__icon-wrap {
	align-items: center;
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--azuri-radius-pill);
	color: var(--azuri-color-white);
	display: inline-flex;
	flex-shrink: 0;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.azuri-ct-card__icon {
	height: 20px;
	width: 20px;
}

.azuri-ct-card__label {
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--azuri-font-family-base);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

/* Phone number (large, clickable) */
.azuri-ct-card__phone {
	color: var(--azuri-color-white);
	display: block;
	font-family: var(--azuri-font-family-base);
	font-size: 36px;
	font-weight: 300;
	line-height: 1.111;
	margin-bottom: 8px;
	text-decoration: none;
	transition: opacity var(--azuri-transition, 0.2s ease);
}
.azuri-ct-card__phone:hover,
.azuri-ct-card__phone:focus-visible {
	opacity: 0.65;    
	color: #fff;
}

/* Description */
.azuri-ct-card__desc {
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--azuri-font-family-base);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0 0 auto 0;
	padding-bottom: 24px;
}

/* Book button: white pill spanning full card width */
.azuri-ct-card__btn {
	background: var(--azuri-color-white);
	border-radius: var(--azuri-radius-pill);
	display: block;
	font-family: var(--azuri-font-family-base);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	margin-top: auto;
	padding: 12px 16px;
	text-align: center;
	text-decoration: none;
	transition: opacity var(--azuri-transition, 0.2s ease);
}

.azuri-ct-card--medical  .azuri-ct-card__btn { color: var(--azuri-color-teal); }
.azuri-ct-card--cosmetic .azuri-ct-card__btn { color: var(--azuri-color-pink); }

.azuri-ct-card__btn:hover,
.azuri-ct-card__btn:focus-visible {
	opacity: 0.88;
}

/* ==========================================================================
   3. LOCATION + MAP INFO CARD
   ========================================================================== */

.azuri-ct-info {
	background: var(--azuri-color-white);
	padding-bottom: var(--azuri-space-8);
}

/* Single card wrapping both halves */
.azuri-ct-info__card {
	border-radius: var(--azuri-ct-card-radius);
	box-shadow: var(--azuri-ct-info-shadow);
	display: flex;
	min-height: 368px;
	overflow: hidden;
}

/* Left panel */
.azuri-ct-info__panel {
	background: var(--azuri-ct-grad-info);
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	gap: var(--azuri-space-8);
	padding: var(--azuri-space-8);
}

/* Right panel */
.azuri-ct-info__map {
	flex: 0 0 50%;
	overflow: hidden;
	position: relative;
}

.azuri-ct-info__map-img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* ── Info blocks ──────────────────────────────────────────────────────── */

.azuri-ct-info__block {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.azuri-ct-info__block-header {
	align-items: center;
	display: flex;
	gap: 12px;
}

.azuri-ct-info__icon-wrap {
	align-items: center;
	background: var(--azuri-color-teal);
	border-radius: var(--azuri-radius-pill);
	color: var(--azuri-color-white);
	display: inline-flex;
	flex-shrink: 0;
	height: 36px;
	justify-content: center;
	width: 36px;
}

.azuri-ct-info__icon {
	height: 20px;
	width: 20px;
}

.azuri-ct-info__block-label {
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--azuri-font-family-base);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

/* Address */
.azuri-ct-info__address {
	display: flex;
	flex-direction: column;
	font-style: normal;
	gap: 0;
}

.azuri-ct-info__address-line {
	color: var(--azuri-color-white);
	font-family: var(--azuri-font-family-base);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.azuri-ct-info__address-line--muted {
	opacity: 0.8;
}

/* Get Directions link */
.azuri-ct-info__directions-link {
	color: var(--azuri-color-teal);
	font-family: var(--azuri-font-family-base);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: opacity var(--azuri-transition, 0.2s ease);
}
.azuri-ct-info__directions-link:hover,
.azuri-ct-info__directions-link:focus-visible {
	opacity: 0.8;    
	color: #fff;
}

/* Hours list */
.azuri-ct-info__hours-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.azuri-ct-info__hours-row {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.azuri-ct-info__hours-day {
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--azuri-font-family-base);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.azuri-ct-info__hours-time {
	color: var(--azuri-color-teal);
	font-family: var(--azuri-font-family-base);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.azuri-ct-info__hours-note {
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--azuri-font-family-base);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
}

/* ==========================================================================
   4. AFTER-HOURS BANNER
   ========================================================================== */

.azuri-ct-afterhours {
	background: var(--azuri-color-white);
	padding-bottom: var(--azuri-space-10);
}

.azuri-ct-afterhours__inner {
	padding: 0;
}

.azuri-ct-afterhours__card {
	align-items: flex-start;
	background: linear-gradient(to right, var(--azuri-ct-afterhours-bg-start), var(--azuri-ct-afterhours-bg-end));
	border-left: 4px solid var(--azuri-ct-afterhours-border);
	border-radius: 10px;
	display: flex;
	gap: var(--azuri-space-4);
	padding: var(--azuri-space-6) var(--azuri-space-6) var(--azuri-space-6) 28px;
}

.azuri-ct-afterhours__icon-wrap {
	align-items: center;
	background: var(--azuri-ct-afterhours-icon-bg);
	border-radius: var(--azuri-radius-pill);
	color: var(--azuri-color-white);
	display: inline-flex;
	flex-shrink: 0;
	height: 36px;
	justify-content: center;
	width: 36px;
}

.azuri-ct-afterhours__icon {
	height: 20px;
	width: 20px;
}

.azuri-ct-afterhours__content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.azuri-ct-afterhours__title {
	color: var(--azuri-ct-afterhours-title);
	font-family: var(--azuri-font-family-base);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}

.azuri-ct-afterhours__body {
	color: var(--azuri-ct-afterhours-body);
	font-family: var(--azuri-font-family-base);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
}

/* ==========================================================================
   RESPONSIVE — Tablet (≤1023.98px)
   ========================================================================== */

@media (max-width: 1023.98px) {

	/* Header */
	.azuri-ct-header__heading {
		font-size: 28px;
	}

	/* Booking cards */
	.azuri-ct-card__phone {
		font-size: 28px;
	}

	/* Info card: stack panel above map */
	.azuri-ct-info__card {
		flex-direction: column;
	}

	.azuri-ct-info__panel {
		flex: 0 0 auto;
	}

	.azuri-ct-info__map {
		flex: 0 0 auto;
		min-height: 220px;
	}

	/* Features strip: 4 columns → 2 columns */
	.azuri-ct-features .azuri_col_3 {
		flex: 0 0 50%;
		max-width: 50%;
		width: 50%;
	}

	/* New patient: stack left + right panels to full width */
	.azuri-ct-newpatient .azuri_col_6 {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}

	.azuri-ct-newpatient__left.azuri_inner {
		padding-right: 0;
		padding-bottom: var(--azuri-space-8);
	}

	.azuri-ct-newpatient {
		padding-top: 56px;
		padding-bottom: 56px;
	}

}

/* ==========================================================================
   RESPONSIVE — Mobile (≤768px — matches azuri grid breakpoint)
   ========================================================================== */

@media (max-width: 768px) {

	/* ── Header ─────────────────────────────────────────────────────────── */
	.azuri-ct-header {
		padding-top: var(--azuri-space-8);
		padding-bottom: var(--azuri-space-6);
	}

	.azuri-ct-header__heading {
		font-size: 24px;
	}

	.azuri-ct-header__subtitle {
		font-size: 15px;
	}

	/* ── Booking cards ───────────────────────────────────────────────────── */
	.azuri-ct-booking {
		padding-bottom: var(--azuri-space-6);
	}

	/* Gap between stacked cards on mobile */
	.azuri-ct-booking__row {
		gap: var(--azuri-space-4) 0;
	}

	.azuri-ct-booking__col.azuri_inner {
		padding-bottom: 0;
	}

	.azuri-ct-card {
		min-height: auto;
	}

	.azuri-ct-card__phone {
		font-size: 24px;
	}

	/* ── Info card ───────────────────────────────────────────────────────── */
	.azuri-ct-info {
		padding-bottom: var(--azuri-space-6);
	}

	/* Prevent the dark card from bleeding past container on mobile */
	.azuri-ct-info__card {
		border-radius: 12px;
	}

	.azuri-ct-info__panel {
		padding: var(--azuri-space-5);
	}

	.azuri-ct-info__map {
		min-height: 200px;
	}

	/* ── After-hours ─────────────────────────────────────────────────────── */
	.azuri-ct-afterhours {
		padding-bottom: var(--azuri-space-8);
	}

	.azuri-ct-afterhours__card {
		flex-direction: column;
		gap: var(--azuri-space-3);
		padding: var(--azuri-space-5);
	}

	.azuri-ct-afterhours__body {
		font-size: 13px;
	}

	/* ── Features strip: 1 column on mobile ─────────────────────────────── */
	.azuri-ct-features .azuri_col_3 {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}

	/* Gap between stacked feature cards */
	.azuri-ct-features__row {
		gap: var(--azuri-space-3) 0;
	}

	.azuri-ct-features {
		padding-top: var(--azuri-space-6);
		padding-bottom: var(--azuri-space-6);
	}

	/* ── New patient ─────────────────────────────────────────────────────── */
	.azuri-ct-newpatient .azuri_col_6 {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}

	.azuri-ct-newpatient {
		padding-top: var(--azuri-space-8);
		padding-bottom: var(--azuri-space-8);
	}

	.azuri-ct-newpatient__left.azuri_inner {
		padding-right: 0;
		padding-bottom: var(--azuri-space-6);
	}

	.azuri-ct-newpatient__heading {
		font-size: 22px;
	}

	/* Bring card full width, no overflow */
	.azuri-ct-bring-card {
		padding: var(--azuri-space-5);
	}

}

/* ==========================================================================
   5. CLINIC FEATURES STRIP — Figma 432:2640
   Four info cards in a horizontal row on white background.
   ========================================================================== */

:root {
	--azuri-ct-feature-bg:     #f5f9fa;
	--azuri-ct-feature-border: #deeaec;
	--azuri-ct-feature-title:  #2e404f;
	--azuri-ct-feature-desc:   #5a6f80;
}

.azuri-ct-features {
	background: var(--azuri-color-white);
	padding-top: var(--azuri-space-8);
	padding-bottom: var(--azuri-space-8);
}

.azuri-ct-features__row {
	align-items: stretch;
}

.azuri-ct-features__col.azuri_inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
}

.azuri-ct-feature-card {
	background: var(--azuri-ct-feature-bg);
	border: 0.5px solid var(--azuri-ct-feature-border);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: var(--azuri-space-2);
	height: 100%;
	padding: var(--azuri-space-6);
}

.azuri-ct-feature-card__title {
	color: var(--azuri-ct-feature-title);
	font-family: var(--azuri-font-family-base);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.23px;
	line-height: 1.5;
	margin: 0;
}

.azuri-ct-feature-card__desc {
	color: var(--azuri-ct-feature-desc);
	font-family: var(--azuri-font-family-base);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: -0.08px;
	line-height: 1.7;
	margin: 0;
}

/* ==========================================================================
   6. NEW PATIENT — Figma 432:2662
   Light blue full-bleed section. Left: heading + numbered steps.
   Right: "What to bring" white checklist card.
   ========================================================================== */

:root {
	--azuri-ct-np-bg:           #f5f9fa;
	--azuri-ct-np-heading:      #2e404f;
	--azuri-ct-np-subtitle:     #5a6f80;
	--azuri-ct-np-step-num-bg:  rgba(42, 173, 181, 0.10);
	--azuri-ct-np-step-num:     #2aadb5;
	--azuri-ct-np-step-title:   #2e404f;
	--azuri-ct-np-step-desc:    #5a6f80;
	--azuri-ct-bring-bg:        #ffffff;
	--azuri-ct-bring-border:    #deeaec;
	--azuri-ct-bring-title:     #2e404f;
	--azuri-ct-bring-item:      #2e404f;
	--azuri-ct-bring-divider:   #e4edf0;
	--azuri-ct-bring-check-bg:  #2aadb5;
}

/* Full-bleed background on the section itself */
.azuri-ct-newpatient {
	background: var(--azuri-ct-np-bg);
	padding-top: 80px;
	padding-bottom: 80px;
}

.azuri-ct-newpatient__row {
	align-items: stretch;
	gap: 0;
}

/* ── Left panel ─────────────────────────────────────────────────────────── */

.azuri-ct-newpatient__left.azuri_inner {
	display: flex;
	flex-direction: column;
	gap: var(--azuri-space-6);
	justify-content: center;
	padding-right: var(--azuri-space-8);
}

.azuri-ct-newpatient__heading {
	color: var(--azuri-ct-np-heading);
	font-family: var(--azuri-font-family-base);
	font-size: 28px;
	font-weight: 300;
	letter-spacing: -0.02px;
	line-height: 1.5;
	margin: 0;
}

.azuri-ct-newpatient__heading-plain {
	font-style: normal;
}

.azuri-ct-newpatient__heading-italic {
	color: var(--azuri-color-teal);
	font-style: italic;
}

.azuri-ct-newpatient__subtitle {
	color: var(--azuri-ct-np-subtitle);
	font-family: var(--azuri-font-family-base);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: -0.23px;
	line-height: 1.8;
	margin: 0;
}

/* Numbered steps list */
.azuri-ct-newpatient__steps {
	display: flex;
	flex-direction: column;
	gap: var(--azuri-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.azuri-ct-newpatient__step {
	align-items: flex-start;
	display: flex;
	gap: var(--azuri-space-4);
}

.azuri-ct-newpatient__step-num {
	align-items: center;
	background: var(--azuri-ct-np-step-num-bg);
	border-radius: var(--azuri-radius-pill);
	color: var(--azuri-ct-np-step-num);
	display: inline-flex;
	flex-shrink: 0;
	font-family: var(--azuri-font-family-base);
	font-size: 14px;
	font-weight: 500;
	height: 48px;
	justify-content: center;
	letter-spacing: -0.15px;
	line-height: 1;
	width: 48px;
}

.azuri-ct-newpatient__step-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 0;
}

.azuri-ct-newpatient__step-title {
	color: var(--azuri-ct-np-step-title);
	display: block;
	font-family: var(--azuri-font-family-base);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.31px;
	line-height: 1.5;
}

.azuri-ct-newpatient__step-desc {
	color: var(--azuri-ct-np-step-desc);
	font-family: var(--azuri-font-family-base);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.15px;
	line-height: 1.7;
	margin: 0;
}

/* ── Right panel — "What to bring" card ─────────────────────────────────── */

.azuri-ct-newpatient__right.azuri_inner {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.azuri-ct-bring-card {
	background: var(--azuri-ct-bring-bg);
	border: 0.5px solid var(--azuri-ct-bring-border);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	gap: var(--azuri-space-6);
	padding: var(--azuri-space-8);
}

.azuri-ct-bring-card__title {
	color: var(--azuri-ct-bring-title);
	font-family: var(--azuri-font-family-base);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.45px;
	line-height: 1.5;
	margin: 0;
}

.azuri-ct-bring-card__list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.azuri-ct-bring-card__item {
	align-items: center;
	border-bottom: 0.5px solid var(--azuri-ct-bring-divider);
	display: flex;
	gap: 12px;
	padding: 12px 0;
}

.azuri-ct-bring-card__item:last-child {
	border-bottom: none;
}

.azuri-ct-bring-card__check {
	align-items: center;
	background: var(--azuri-ct-bring-check-bg);
	border-radius: var(--azuri-radius-pill);
	color: var(--azuri-color-white);
	display: inline-flex;
	flex-shrink: 0;
	height: 20px;
	justify-content: center;
	padding: 5px;
	width: 20px;
}

.azuri-ct-bring-card__check svg {
	display: block;
	height: 10px;
	width: 10px;
}

.azuri-ct-bring-card__text {
	color: var(--azuri-ct-bring-item);
	font-family: var(--azuri-font-family-base);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.15px;
	line-height: 1.65;
}

@media only screen and ( min-width:240px) and (max-width:1023px) {
    .azuri-ct-info__map-img {
        min-height: 200px;
    }
    azuri-ct-newpatient {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}