/*
Theme Name: Doctor AI
Theme URI: http://doctorai.test
Author: Doctor AI
Description: Custom theme for Doctor AI, rebuilding the legacy Wix site's design in native WordPress.
Version: 1.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: doctorai
*/

/* -------------------------------------------------------------------------
   Design tokens — colors verified against the live Wix snapshot
   (see CLAUDE.md: real brand colors extracted from the actual old site).
   ---------------------------------------------------------------------- */
:root {
	--color-bg: #FFFEFC;
	--color-ink: #1A1A2E;
	--color-text: #262633;
	--color-teal: #2A7C6F;
	--color-teal-light: #BDE9E2;
	--color-teal-mid: #7DD3C6;
	--color-teal-deep: #40BCA8;
	--color-purple: #5F5BCD;
	--color-sky: #5CC2EF;
	--color-pink: #ED1566;
	--color-lavender: #E9E3F3;

	--font-body: 'Assistant', sans-serif;
	--font-accent: 'Poppins', sans-serif;

	--header-height: 84px;
	--container-width: 1240px;
}

/* -------------------------------------------------------------------------
   Reset / base
   ---------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
	direction: rtl;
	text-align: right;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1, h2, h3, h4, p {
	margin: 0;
}

.doctorai-content {
	padding-top: var(--header-height);
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: 24px;
}

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: .5rem;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: transform .15s ease, opacity .15s ease;
}

.btn:hover {
	opacity: .9;
}

.btn--solid {
	background: var(--color-purple);
	color: #fff;
}

.btn--outline {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.btn--white {
	background: #fff;
	color: var(--color-purple);
}

/* -------------------------------------------------------------------------
   Section heading helpers (shared across front-page sections)
   ---------------------------------------------------------------------- */
.section-title {
	font-family: var(--font-accent);
	font-size: 30px;
	font-weight: 600;
	color: var(--color-text);
}

.section-title--light {
	color: #fff;
}

.section-subtitle {
	margin-top: 10px;
	font-size: 18px;
	color: var(--color-teal);
	position: relative;
	padding-bottom: 14px;
}

.section-subtitle::after {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 46px;
	height: 2px;
	background: currentColor;
}

.section-subtitle--light {
	color: var(--color-teal-light);
}

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */
.site-header {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 500;
	height: var(--header-height);
	background: linear-gradient(90deg, rgba(89, 91, 167, .32) 0%, rgba(136, 108, 174, .32) 100%);
	transition: backdrop-filter .2s ease;
}

.site-header.is-scrolled {
	background: linear-gradient(90deg, rgba(89, 91, 167, .85) 0%, rgba(136, 108, 174, .85) 100%);
	backdrop-filter: blur(6px);
}

.site-header__inner {
	max-width: var(--container-width);
	margin-inline: auto;
	height: 100%;
	padding-inline: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-header__logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	height: 100%;
}

.site-header__logo svg {
	width: auto;
	height: calc(var(--header-height) * 0.65);
}

.site-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: 28px;
}

.primary-menu li {
	position: relative;
}

.primary-menu a {
	font-size: 15px;
	font-weight: 500;
	color: #fff;
	white-space: nowrap;
}

.primary-menu .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.primary-menu .menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -3px;
	flex-shrink: 0;
	transition: transform .15s ease;
}

.primary-menu .menu-item-has-children > ul {
	display: none;
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	background: #fff;
	box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
	border-radius: 8px;
	padding: 8px;
	min-width: 160px;
	z-index: 10;
}

.primary-menu .menu-item-has-children:hover > ul,
.primary-menu .menu-item-has-children:focus-within > ul {
	display: block;
}

.primary-menu .menu-item-has-children:hover > a::after,
.primary-menu .menu-item-has-children:focus-within > a::after {
	transform: rotate(225deg);
	margin-top: 3px;
}

.primary-menu .menu-item-has-children > ul a {
	color: var(--color-text);
	display: block;
	padding: 8px 10px;
	border-radius: 6px;
}

.primary-menu .menu-item-has-children > ul a:hover {
	background: var(--color-teal-light);
}

.site-header__social {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.social-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-bg);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The artwork only fills the middle of its 113.4 unit viewBox, so the svg box
   fills almost the whole circle to make the visible glyph read at a usable size. */
.social-icon svg {
	width: 99%;
	height: 99%;
}

.site-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	background: transparent;
	border: none;
	cursor: pointer;
}

.site-header__toggle span {
	display: block;
	height: 2px;
	background: #fff;
	border-radius: 2px;
}

.site-header__nav-mobile {
	display: none;
}

@media (max-width: 900px) {
	.site-header__nav {
		display: none;
	}

	/* Swap the logo and the hamburger on mobile. The desktop nav is hidden
	   here, so pulling the toggle to the front of the flex order leaves
	   toggle, logo, social and the logo takes the middle slot the burger
	   used to hold. */
	.site-header__toggle {
		display: flex;
		order: -1;
	}

	.site-header__nav-mobile.is-open {
		display: block;
		position: absolute;
		top: 100%;
		inset-inline: 0;
		background: var(--color-purple);
		padding: 16px 24px 24px;
	}

	.primary-menu--mobile {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */
.site-footer {
	background: var(--color-ink);
	color: #d9d9e6;
	padding-top: 56px;
}

.site-footer__grid {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: 24px;
	display: grid;
	grid-template-columns: 1fr 1.4fr 1.2fr;
	gap: 40px;
}

.site-footer__heading {
	font-family: var(--font-accent);
	color: #fff;
	font-size: 18px;
	margin-bottom: 18px;
}

.site-footer__col--nav .footer-menu {
	column-count: 2;
	column-gap: 24px;
}

.footer-menu li {
	break-inside: avoid;
	margin-bottom: 12px;
}

.footer-menu a {
	font-size: 14px;
	color: #d9d9e6;
}

.footer-menu a:hover {
	color: var(--color-teal-mid);
}

.site-footer__col--about p {
	font-size: 14px;
	line-height: 1.8;
}

.site-footer__col--about a {
	color: var(--color-teal-mid);
	text-decoration: underline;
}

.site-footer__disclaimer {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dashed rgba(255, 255, 255, .25);
	font-size: 12px;
	line-height: 1.8;
	color: #9c9cb0;
}

.site-footer__logo {
	width: 170px;
	margin-bottom: 18px;
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.site-footer__contact li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

.site-footer__contact-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--color-teal-mid);
}

.site-footer__contact-icon svg {
	width: 100%;
	height: 100%;
}

.site-footer__bottom {
	margin-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 20px 24px;
	text-align: center;
}

.site-footer__bottom p {
	font-size: 12px;
	color: #9c9cb0;
}

@media (max-width: 900px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Chat widget placeholder — pinned to the physical right regardless of
   direction, per project rule (matches the original Wix chat app position).
   ---------------------------------------------------------------------- */
.chat-widget {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 400;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.chat-widget__bubble {
	background: var(--color-purple);
	color: #fff;
	font-size: 13px;
	padding: 10px 16px;
	border-radius: 16px;
	border-bottom-right-radius: 4px;
	white-space: nowrap;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.chat-widget__button {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-sky);
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

.chat-widget__button img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chat-widget__badge {
	position: absolute;
	top: -4px;
	left: -4px;
	background: var(--color-pink);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}