/*
Theme Name: KD-MED
Description: KD-MED clinic theme, child of Twenty Twenty-Five.
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 8.2
Text Domain: kdmed
*/

/* Booking link in the main menu shown as an outlined button. */
.kdmed-nav-cta .wp-block-navigation-item__content {
	border: 1px solid var(--wp--preset--color--accent-1);
	padding: 0.45em 1.1em;
	color: var(--wp--preset--color--accent-2);
}

.kdmed-nav-cta .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}

.kdmed-clinic-info p {
	margin: 0 0 1em;
	font-size: var(--wp--preset--font-size--small);
}

.kdmed-copyright {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--accent-4);
	text-align: left;
}

/* Main menu gap as a variable, so the language toggle can join its two halves. */
.kdmed-nav-main {
	--kdmed-nav-gap: 1.2rem;
}

.kdmed-nav-main .wp-block-navigation__container {
	gap: var(--kdmed-nav-gap);
}

/* Staff login: round person icon; filled when logged in. The text label is only
   shown in the mobile menu (it stays the link's accessible name everywhere). */
.kdmed-nav-login .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--accent-3);
	border-radius: 50%;
	color: var(--wp--preset--color--contrast);
}

.kdmed-nav-login .wp-block-navigation-item__content:hover,
.kdmed-nav-login .wp-block-navigation-item__content:focus-visible {
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-2);
}

.kdmed-nav-login.is-logged-in .wp-block-navigation-item__content {
	border-color: var(--wp--preset--color--accent-2);
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}

.kdmed-nav-login .wp-block-navigation-item__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.kdmed-nav-login__icon {
	flex: none;
}

.kdmed-nav-login__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Account menu behind the icon when logged in (plugin: account_menu()). */
.kdmed-account {
	position: relative;
}

.kdmed-account__toggle {
	padding: 0;
	font: inherit;
	cursor: pointer;
}

.kdmed-account__menu {
	display: none;
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 0;
	z-index: 100;
	min-width: 14rem;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	border: 1px solid var(--wp--preset--color--accent-3);
	background: var(--wp--preset--color--base);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
}

.kdmed-account.is-open .kdmed-account__menu {
	display: block;
}

.kdmed-account__menu a {
	display: block;
	padding: 0.5rem 1rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.kdmed-account__menu a:hover,
.kdmed-account__menu a:focus-visible {
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-2);
}

.kdmed-account__name {
	padding: 0.5rem 1rem 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent-4);
}

.kdmed-account__logout {
	margin-top: 0.3rem;
	border-top: 1px solid var(--wp--preset--color--accent-3);
}

/* Mobile menu: the account links are listed under the account pill. */
.kdmed-nav-main .is-menu-open .kdmed-account {
	flex-direction: column;
	align-items: flex-end;
}

.kdmed-nav-main .is-menu-open .kdmed-account__menu {
	display: block;
	position: static;
	min-width: 0;
	margin-top: 0.5rem;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-align: right;
}

.kdmed-nav-main .is-menu-open .kdmed-account__name {
	display: none;
}

.kdmed-nav-main .is-menu-open .kdmed-account__menu a {
	padding: 0.35rem 0;
}

.kdmed-nav-main .is-menu-open .kdmed-account__logout {
	border-top: 0;
}

/* Language toggle: RO | HU, the current language filled. */
.kdmed-nav-main .lang-item .wp-block-navigation-item__content {
	padding: 0.3em 0.6em;
	border: 1px solid var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
}

.kdmed-nav-main .lang-item .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--contrast);
}

.kdmed-nav-main .lang-item.current-lang .wp-block-navigation-item__content {
	border-color: var(--wp--preset--color--accent-2);
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}

.kdmed-nav-main .lang-item:first-of-type .wp-block-navigation-item__content {
	border-radius: 2px 0 0 2px;
}

.kdmed-nav-main .lang-item + .lang-item {
	margin-inline-start: calc(-1 * var(--kdmed-nav-gap));
}

.kdmed-nav-main .lang-item + .lang-item .wp-block-navigation-item__content {
	border-left: 0;
	border-radius: 0 2px 2px 0;
}

/* Mobile menu: icon with its text. Every other item takes a full row, so the two
   language buttons share the last row and still read as one toggle. */
.kdmed-nav-main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* The open menu resets item padding with a long selector; restore it for the toggle. */
.kdmed-nav-main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .lang-item .wp-block-navigation-item__content {
	padding: 0.35em 0.75em;
}

.kdmed-nav-main .is-menu-open .wp-block-navigation-item:not(.lang-item) {
	flex-basis: 100%;
	justify-content: flex-end;
}

.kdmed-nav-main .is-menu-open .kdmed-nav-login .wp-block-navigation-item__content {
	width: auto;
	height: auto;
	padding: 0.4em 0.9em 0.4em 0.5em;
	border-radius: 2rem;
}

.kdmed-nav-main .is-menu-open .kdmed-nav-login__text {
	position: static;
	width: auto;
	height: auto;
	clip-path: none;
}


/*
 * Footer at the bottom of the window on short pages: the page is a full-height
 * column and <main> takes the remaining space (window − header − footer).
 * The admin bar, when shown, is subtracted.
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex-grow: 1;
}

/* Homepage sections (content in the "Acasă" / "Kezdőlap" page). */
.kdmed-eyebrow {
	color: var(--wp--preset--color--accent-2);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.kdmed-rule {
	width: 3rem;
	margin-left: 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--accent-1);
}

.kdmed-hero__logo img {
	width: 100%;
	max-width: 260px;
	height: auto;
}

.kdmed-card {
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--accent-3);
	background: var(--wp--preset--color--base);
}

.kdmed-card h3 {
	margin-top: 0;
}

/* The homepage's coloured sections touch the footer; no white gap between them. */
.home .wp-site-blocks > footer {
	margin-block-start: 0;
}

/* The header already shows the logo on phones. Core centres images with
   .wp-block-image.aligncenter, so match that specificity. */
@media (max-width: 781px) {
	.wp-block-image.kdmed-hero__logo {
		display: none;
	}
}

/* [kdmed_doctors] from the booking plugin. */
.kdmed-doctors {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.kdmed-doctor p {
	color: var(--wp--preset--color--accent-4);
}

.kdmed-doctor__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: center;
	margin-bottom: 0;
}

.kdmed-doctor .wp-element-button {
	padding: 0.6em 1.1em;
	font-size: var(--wp--preset--font-size--small);
}

/* Doctor profile photo (featured image) and its placeholder. */
.kdmed-profile__photo img {
	border-radius: 2px;
}

.kdmed-profile__photo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	margin: 0;
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-1);
}

.kdmed-profile__photo--empty svg {
	width: 40%;
	height: auto;
}

.kdmed-doctor__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* [kdmed_doctor_services] price table. */
.kdmed-price-table {
	width: 100%;
	max-width: 720px;
	border-collapse: collapse;
}

.kdmed-price-table th,
.kdmed-price-table td {
	padding: 0.8em 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-3);
	text-align: left;
	vertical-align: top;
}

.kdmed-price-table th {
	font-weight: 400;
}

.kdmed-price-table th small {
	display: block;
	margin-top: 0.2em;
	color: var(--wp--preset--color--accent-4);
}

.kdmed-price-table td {
	padding-left: 1.5em;
	white-space: nowrap;
	text-align: right;
}

/* Services overview cards (query loop). */
.wp-block-query .kdmed-card .wp-block-post-title {
	margin-top: 0;
}

.wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 0.5em;
}

@media (max-width: 781px) {
	.kdmed-profile__photo {
		max-width: 16rem;
	}
}

/* Clinic details on the contact page ([kdmed_clinic_info layout="contact"]). */
.kdmed-clinic-info--contact p {
	margin: 0 0 1.25em;
	font-size: inherit;
}

.kdmed-clinic-info--contact .kdmed-clinic-info__address {
	font-family: var(--wp--preset--font-family--literata);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	line-height: 1.4;
}

.kdmed-clinic-info__note {
	color: var(--wp--preset--color--accent-4);
}

/* [kdmed_clinic_map] */
.kdmed-clinic-map {
	margin: 0;
}

.kdmed-clinic-map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--wp--preset--color--accent-3);
}

.kdmed-clinic-map figcaption {
	margin-top: 0.5em;
	font-size: var(--wp--preset--font-size--small);
}

.kdmed-doctor .kdmed-doctor__locations {
	margin-top: -0.4em;
	color: var(--wp--preset--color--accent-2);
	font-size: var(--wp--preset--font-size--small);
}

/* Cookie consent banner (inc/cookies.php). Reject and Accept look the same on
   purpose: refusing must be as easy as accepting. */
.kdmed-cookies {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--base);
	box-shadow: 0 -8px 24px rgb(0 0 0 / 0.06);
	font-size: var(--wp--preset--font-size--small);
}

.kdmed-cookies[hidden] {
	display: none;
}

.kdmed-cookies__inner {
	max-width: 960px;
	margin: 0 auto;
}

.kdmed-cookies__title {
	margin: 0 0 0.4em;
	font-size: var(--wp--preset--font-size--large);
}

.kdmed-cookies__text {
	margin: 0 0 1em;
}

.kdmed-cookies__settings {
	display: grid;
	gap: 0.75em;
	margin-bottom: 1em;
}

.kdmed-cookies__settings[hidden] {
	display: none;
}

.kdmed-cookies__category {
	display: flex;
	gap: 0.75em;
	align-items: flex-start;
}

.kdmed-cookies__category input {
	margin-top: 0.25em;
	accent-color: var(--wp--preset--color--accent-2);
}

.kdmed-cookies__category span {
	display: flex;
	flex-direction: column;
}

.kdmed-cookies__category em {
	color: var(--wp--preset--color--accent-4);
	font-style: normal;
}

.kdmed-cookies__category small {
	color: var(--wp--preset--color--accent-4);
}

.kdmed-cookies__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	justify-content: flex-end;
}

.kdmed-cookies__buttons .wp-element-button {
	padding: 0.7em 1.4em;
	font-size: inherit;
}

.kdmed-cookies__buttons [hidden] {
	display: none;
}

.kdmed-cookies .kdmed-cookies__settings-button {
	margin-right: auto;
	border: 1px solid var(--wp--preset--color--contrast);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 600px) {
	.kdmed-cookies__buttons .wp-element-button {
		flex: 1 1 100%;
	}
}

/* [kdmed_cookie_table] on the cookie policy page. */
.kdmed-cookie-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.kdmed-cookie-table th,
.kdmed-cookie-table td {
	padding: 0.6em 0.75em 0.6em 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-3);
	text-align: left;
	vertical-align: top;
}

.kdmed-cookie-table code {
	font-size: 0.9em;
	word-break: break-word;
}