/*
Theme Name: TheGem Child Clinic (Dr. Lai)
Theme URI: https://drvoicelaiclinic.com/
Description: TheGem child theme for Dr. Lai medical aesthetics clinic — luxury minimal clinical styling.
Author: Dr. Lai Clinic
Template: thegem
Version: 1.0.0
Text Domain: thegem-child-clinic
*/

/* ==========================================================================
   Design Tokens — Medical / Luxury Aesthetic
   Accent: #C5A880 | Deep Gray: #1A1A1A | White: #FFFFFF
   ========================================================================== */
:root {
	--clinic-accent: #C5A880;
	--clinic-accent-soft: #D4C0A0;
	--clinic-accent-dark: #A88B5E;
	--clinic-ink: #1A1A1A;
	--clinic-ink-soft: #4A4A4A;
	--clinic-muted: #8A8A8A;
	--clinic-white: #FFFFFF;
	--clinic-bg: #FFFFFF;
	--clinic-bg-soft: #FAF8F5;
	--clinic-border: rgba(197, 168, 128, 0.28);
	--clinic-section-pad: 80px 0;
	--clinic-tracking: 0.75px;
	--clinic-tracking-tight: 0.5px;
	--clinic-tracking-wide: 1px;
	--clinic-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Global Base — Korean Luxury Minimal Whitespace
   ========================================================================== */
body {
	background-color: var(--clinic-bg);
	color: var(--clinic-ink);
	letter-spacing: var(--clinic-tracking-tight);
}

a {
	color: var(--clinic-accent-dark);
	transition: color var(--clinic-transition), opacity var(--clinic-transition);
}

a:hover,
a:focus {
	color: var(--clinic-accent);
}

/* Section spacing — generous clinical whitespace */
.vc_section,
.gem-section,
.page-content-wrap .vc_row-has-fill,
.clinic-section,
.entry-content .wpb_row {
	padding-top: 80px;
	padding-bottom: 80px;
}

.block-content {
	padding: var(--clinic-section-pad);
}

/* Headings & body copy — refined letter-spacing */
h1, h2, h3, h4, h5, h6,
.title-h1, .title-h2, .title-h3, .title-h4,
.light .title-h1, .light .title-h2, .light .title-h3,
.page-title-title h1,
.custom-header h1,
.custom-header h2 {
	color: var(--clinic-ink);
	letter-spacing: var(--clinic-tracking-wide);
	font-weight: 400;
}

p,
.entry-content,
.entry-content p,
.wpb_text_column,
.wpb_text_column p,
.body,
.text-body {
	color: var(--clinic-ink-soft);
	letter-spacing: var(--clinic-tracking);
	line-height: 1.85;
}

/* Soft accent accents */
.clinic-accent,
.text-accent {
	color: var(--clinic-accent);
}

.clinic-divider,
.gem-button-separator-line {
	background-color: var(--clinic-accent);
}

/* Buttons — quiet luxury */
.gem-button,
.wpcf7-submit,
button[type="submit"],
input[type="submit"] {
	letter-spacing: var(--clinic-tracking-wide);
	border-radius: 0;
	transition: background-color var(--clinic-transition), border-color var(--clinic-transition), color var(--clinic-transition);
}

.gem-button.gem-button-style-flat {
	background-color: var(--clinic-ink);
	border-color: var(--clinic-ink);
	color: var(--clinic-white);
}

.gem-button.gem-button-style-flat:hover {
	background-color: var(--clinic-accent);
	border-color: var(--clinic-accent);
	color: var(--clinic-white);
}

.gem-button.gem-button-style-outline {
	border-color: var(--clinic-accent);
	color: var(--clinic-ink);
}

.gem-button.gem-button-style-outline:hover {
	background-color: var(--clinic-accent);
	border-color: var(--clinic-accent);
	color: var(--clinic-white);
}

/* Forms — clinical clarity */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select,
.wpcf7-form-control {
	border-color: var(--clinic-border);
	letter-spacing: var(--clinic-tracking-tight);
	background-color: var(--clinic-white);
}

input:focus,
textarea:focus,
select:focus,
.wpcf7-form-control:focus {
	border-color: var(--clinic-accent);
	outline: none;
	box-shadow: 0 0 0 1px rgba(197, 168, 128, 0.35);
}

/* Soft page atmosphere */
#page {
	background-color: var(--clinic-bg);
}

.page-title-block {
	background-color: var(--clinic-bg-soft);
	letter-spacing: var(--clinic-tracking-wide);
}

/* ==========================================================================
   Floating Action Buttons — LINE / Booking / Social (right side)
   ========================================================================== */
.clinic-fab {
	position: fixed;
	right: 20px;
	bottom: 28px;
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.clinic-fab__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 52px;
	height: 52px;
	padding: 0 18px;
	border-radius: 0;
	background-color: var(--clinic-ink);
	color: var(--clinic-white) !important;
	text-decoration: none !important;
	letter-spacing: var(--clinic-tracking-wide);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	box-shadow: 0 8px 24px rgba(26, 26, 26, 0.12);
	transition: transform var(--clinic-transition), background-color var(--clinic-transition), box-shadow var(--clinic-transition);
	white-space: nowrap;
}

.clinic-fab__item:hover,
.clinic-fab__item:focus {
	background-color: var(--clinic-accent);
	color: var(--clinic-white) !important;
	transform: translateX(-4px);
	box-shadow: 0 10px 28px rgba(197, 168, 128, 0.28);
}

.clinic-fab__item--line {
	background-color: #06C755;
}

.clinic-fab__item--line:hover,
.clinic-fab__item--line:focus {
	background-color: #05a847;
}

.clinic-fab__item--booking {
	background-color: var(--clinic-accent);
	color: var(--clinic-ink) !important;
}

.clinic-fab__item--booking:hover,
.clinic-fab__item--booking:focus {
	background-color: var(--clinic-accent-dark);
	color: var(--clinic-white) !important;
}

.clinic-fab__item--social {
	background-color: var(--clinic-ink);
	width: 52px;
	padding: 0;
}

.clinic-fab__icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.clinic-fab__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.clinic-fab__label {
	display: inline-block;
}

@media (max-width: 767px) {
	.clinic-fab {
		right: 12px;
		bottom: 16px;
		gap: 10px;
	}

	.clinic-fab__item {
		min-width: 48px;
		height: 48px;
		padding: 0 14px;
		font-size: 11px;
	}

	.clinic-fab__item--social {
		width: 48px;
		padding: 0;
	}

	.clinic-fab__label {
		display: none;
	}

	.vc_section,
	.gem-section,
	.clinic-section,
	.entry-content .wpb_row,
	.block-content {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}