/*
Theme Name: Kokologiannakis
Theme URI: https://www.kokologiannakis.gr/
Author: kokologiannakis.gr
Description: Block theme (Full Site Editing) for the site of nephrologist Georgios I. Kokologiannakis. Recreates the original boxed design, fully responsive.
Version: 1.0.6
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kokologiannakis
Tags: full-site-editing, one-column, custom-logo, editor-style
*/

/* ---------- Base ---------- */
html { overflow-x: hidden; }
body { margin: 0; overflow-x: hidden; }
img, iframe, video { max-width: 100%; }

/* ---------- Sheet (boxed page) ---------- */
.kk-sheet {
	box-sizing: border-box;
	max-width: 1000px;
	margin: 20px auto;
	padding: 20px 30px 10px;
	background: var(--wp--preset--color--sheet, #fff);
}
.kk-sheet > * { margin-block-start: 0; }
.kk-main {
	padding-block: 20px 30px;
	padding-inline: 0 !important;
}
.kk-main > .wp-block-post-title { margin: 0 0 .6em; }

/* ---------- Header ---------- */
.kk-header { margin: 0; }
.kk-header > * { margin-block-start: 0; }
.kk-header .wp-block-site-logo {
	padding: 14px 0 18px;
	line-height: 0;
}
.kk-header .wp-block-site-logo img {
	width: 420px;
	max-width: 100%;
	height: auto;
}

/* ---------- Navigation (desktop tabs) ---------- */
.kk-header .wp-block-navigation.kk-nav {
	position: relative;
	width: 100%;
	padding-top: 9px;
	background: none;
	font-size: 17px;
}
.kk-header .wp-block-navigation.kk-nav::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: linear-gradient(90deg, #F7CA9E 0%, #F9B570 50%, #F9993F 100%);
}
.kk-nav .wp-block-navigation__responsive-container:not(.is-menu-open),
.kk-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	background: none !important;
}
/* Core copies the block's classes onto the inner <ul>; keep the strip on the <nav> only. */
.kk-header .wp-block-navigation__container::before { content: none !important; }
.kk-nav .wp-block-navigation__responsive-container:not(.is-menu-open),
.kk-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content,
.kk-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	width: 100%;
}
.kk-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	margin: 0;
	padding: 0;
}
.kk-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}
.kk-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
	width: 100%;
	height: 100px;
	padding: 0 10px;
	background: var(--wp--preset--color--grey-light, #f3f3f3);
	border: 0;
	border-radius: 0;
	outline-offset: -3px;
	color: #999;
	text-transform: lowercase;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color .2s, color .2s;
}
.kk-nav .wp-block-navigation-item__content:hover,
.kk-nav .wp-block-navigation-item__content:focus-visible,
.kk-nav .current-menu-item > .wp-block-navigation-item__content,
.kk-nav .wp-block-navigation-item__content[aria-current="page"] {
	background: var(--wp--preset--color--orange-light, #F7C89B) !important;
	color: #fff !important;
	text-decoration: none;
}

/* Hamburger / close buttons */
.kk-nav .wp-block-navigation__responsive-container-open,
.kk-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--orange, #F97F13);
}
.kk-nav .wp-block-navigation__responsive-container-open {
	padding: 8px 0;
	margin-left: auto;
}
.kk-nav .wp-block-navigation__responsive-container-open svg { width: 32px; height: 32px; }

/* Mobile overlay */
.kk-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: #fff !important;
	color: var(--wp--preset--color--text) !important;
	padding: 20px 16px;
}
.kk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px;
	align-items: stretch;
}
.kk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0;
	align-items: stretch;
	border-top: 5px solid #F9993F;
}
.kk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid #e6e6e6;
}
.kk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px !important;
	background: #f9f9f9;
	color: #777;
	font-size: 19px;
	text-transform: lowercase;
}

/* Tablet range: keep tabs fitting */
@media (max-width: 960px) {
	.kk-sheet { padding: 16px 20px 10px; margin: 12px auto; }
	.kk-header .wp-block-navigation.kk-nav { font-size: 15px; }
	.kk-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
		height: 72px;
		padding: 0 8px;
	}
}
@media (max-width: 782px) {
	.kk-header .wp-block-navigation.kk-nav { font-size: 14px; }
	.kk-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { gap: 2px; }
	.kk-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
		height: 56px;
		padding: 0 4px;
		justify-content: center;
		text-align: center;
	}
}
@media (max-width: 599px) {
	.kk-sheet { margin: 0; padding: 10px 16px; }
	.kk-header .wp-block-navigation.kk-nav { padding-top: 0; }
	.kk-header .wp-block-navigation.kk-nav::before { content: none; }
	.kk-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		border-bottom: 4px solid #F9993F;
	}
	.kk-header .wp-block-site-logo { padding: 8px 0; flex: 1 1 auto; min-width: 0; }
	.kk-header .wp-block-navigation.kk-nav {
		width: auto;
		flex: 0 0 auto;
		padding-top: 0;
		background: none;
	}
}

/* ---------- Content ---------- */
.wp-block-post-content a { text-underline-offset: 2px; }

/* Lists: postbullets.png */
.wp-block-post-content ul.wp-block-list,
.editor-styles-wrapper ul.wp-block-list {
	list-style: none;
	padding-left: 1.4em;
}
.wp-block-post-content ul.wp-block-list > li,
.editor-styles-wrapper ul.wp-block-list > li {
	position: relative;
	margin-bottom: .35em;
}
.wp-block-post-content ul.wp-block-list > li::before,
.editor-styles-wrapper ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	left: -1.3em;
	top: .45em;
	width: 11px;
	height: 9px;
	background: url("assets/images/postbullets.png") no-repeat center / contain;
}
.wp-block-post-content ol li::marker,
.editor-styles-wrapper ol.wp-block-list li::marker { color: var(--wp--preset--color--orange); }

/* Hero */
.kk-hero, .kk-hero img { border-radius: 0; }
.kk-hero img { display: block; width: 100%; height: auto; }

/* Three coloured boxes */
.wp-block-columns.kk-boxes { gap: 20px; margin-block: 24px; }
.kk-box {
	box-sizing: border-box;
	padding: 10px;
	border-top: 5px solid #F7CA9E;
}
.kk-box.kk-box-1 { border-top-color: #F7CA9E; }
.kk-box.kk-box-2 { border-top-color: #F9B570; }
.kk-box.kk-box-3 { border-top-color: #F9993F; }
.kk-box h3,
.kk-box h3.wp-block-heading {
	color: #F97F13;
	font-weight: 400;
	font-size: 20px;
	margin: 0 0 .5em;
}
.kk-box > :last-child { margin-bottom: 0; }
@media (max-width: 781px) {
	.wp-block-columns.kk-boxes { gap: 24px; }
}

/* Opening hours */
.kk-hours, .kk-hours * { color: #739E35; }

/* Small gallery */
.wp-block-gallery.kk-gallery {
	gap: 10px;
	max-width: 420px;
}
.wp-block-gallery.kk-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
	width: calc(50% - 5px);
}
.wp-block-gallery.kk-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	border: 1px solid #e3e3e3;
	padding: 3px;
	box-sizing: border-box;
	background: #fff;
}

/* Contact columns with maps */
.wp-block-columns.kk-contact-columns { gap: 24px; }
.kk-contact-columns iframe {
	display: block;
	width: 100% !important;
	height: 250px !important;
	border: 0 !important;
}

/* Contact Form 7 */
.wpcf7 form p { margin: 0 0 1em; }
.wpcf7 label { display: block; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-top: 4px;
	padding: 8px 10px;
	border: 1px solid #c8cfcf;
	border-radius: 0;
	background: #fff;
	color: var(--wp--preset--color--text);
	font: inherit;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	outline: none;
	border-color: #F97F13;
	box-shadow: 0 0 0 2px rgba(249, 127, 19, .2);
}
.wpcf7 textarea { min-height: 160px; resize: vertical; }
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	padding: 10px 28px;
	border: 0;
	border-radius: 0;
	background: #F97F13;
	color: #fff;
	font: inherit;
	cursor: pointer;
	transition: background-color .2s;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover { background: #e06d08; }
.wpcf7 .wpcf7-spinner { vertical-align: middle; }

/* ---------- Footer ---------- */
.kk-footer {
	padding: 18px 0 10px;
	border-top: 1px solid #e5eaea;
	color: #748685;
	font-size: 13px;
}
.kk-footer p { margin: 0 0 .3em; }
.kk-footer a { color: var(--wp--preset--color--orange, #F97F13); }
.kk-footer a:hover { color: #d96a0a; }
.kk-footer .site-footer__sep { margin: 0 .5em; opacity: .6; }
.kk-footer .kk-credits a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.kk-footer .kk-credits img { width: 20px; height: 20px; vertical-align: middle; }
@media (max-width: 600px) {
	.kk-footer .site-footer__sep { display: none; }
	.kk-footer .kk-credits a { display: flex; justify-content: center; flex-wrap: wrap; margin-top: .3em; }
}

/* ---------- Misc ---------- */
.wp-block-query .wp-block-post-title a { color: var(--wp--preset--color--orange); }
.wp-block-post-date { color: #999; font-size: 13px; }

/* ---------- CF7 arithmetic CAPTCHA ---------- */
.kk-captcha {
	margin: 4px 0 16px;
	padding: 12px 16px 14px;
	border: 1px dashed #cfd8d8;
	background: #fafbfb;
}
.kk-captcha legend {
	padding: 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	color: #8a9a99;
}
.kk-captcha-help { margin: 0 0 10px; font-size: 13px; color: #8a9a99; }
.kk-captcha-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.wpcf7 .kk-captcha-row label { display: inline-block; margin: 0; font-weight: 600; }
.kk-captcha .wpcf7-form-control-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.wpcf7 .kk-captcha input.kk-captcha-input { width: 80px; text-align: center; }
.kk-captcha .wpcf7-not-valid-tip { font-size: 13px; }
.kk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }