/*
Theme Name:        Boutique Apartments
Description:       Custom lightweight theme for Boutique Apartments (Slovenia). Gutenberg patterns, Polylang-ready, no page builder.
Version:           2.0.0
Requires at least: 6.6
Requires PHP:      7.4
Text Domain:       boutique
*/

/* Colors, fonts, headings & buttons: see theme.json */
:root {
	--ba-radius: 20px;
	--ba-gap: clamp(1rem, 2vw, 1.5rem);
	--ba-section: clamp(4rem, 8vw, 7rem);
	--ba-shadow: 0 10px 30px rgb(0 0 0 / .08);
	--c-base: var(--wp--preset--color--base);
	--c-surface: var(--wp--preset--color--surface);
	--c-sand: var(--wp--preset--color--sand);
	--c-accent: var(--wp--preset--color--accent);
	--c-muted: var(--wp--preset--color--muted);
	--c-contrast: var(--wp--preset--color--contrast);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; }
.ba-wrap { width: min(1280px, 100% - 32px); margin-inline: auto; }
.ba-muted { color: var(--c-muted); }
.ba-eyebrow { margin: 0 0 .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); }
.ba-eyebrow a { color: inherit; text-decoration: none; }
.wp-block-cover .ba-eyebrow { color: var(--c-sand); }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { clip: auto; width: auto; height: auto; z-index: 100; top: 1rem; left: 1rem; padding: .75rem 1rem; background: var(--c-surface); }

/* ---------- Header ---------- */
.ba-header {
	position: sticky; top: 12px; z-index: 50;
	display: flex; align-items: center; gap: 1.5rem;
	margin-top: 12px; padding: .7rem 1rem .7rem 1.4rem;
	background: var(--c-surface); border-radius: 14px; box-shadow: var(--ba-shadow);
}
.admin-bar .ba-header { top: 44px; }
.ba-site-title { margin: 0; font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.custom-logo { display: block; max-height: 40px; width: auto; }
.ba-nav ul { list-style: none; margin: 0; padding: 0; }
.ba-nav a { font-size: .9rem; text-decoration: none; }
.ba-nav .current-menu-item > a, .ba-nav a:hover { color: var(--c-accent); }
/* Menu item with CSS class "menu-cta" (Appearance > Menus) = pill button */
.ba-nav .menu-cta > a { display: inline-block; padding: .55em 1.3em; border-radius: 999px; background: var(--c-accent); color: #fff; }
.ba-nav .menu-cta > a:hover { background: var(--c-contrast); color: #fff; }
.ba-lang { display: flex; gap: .6rem; font-size: .8rem; text-transform: uppercase; }
.ba-lang .current-lang a { font-weight: 700; color: var(--c-accent); }

.ba-menu-toggle { margin-left: auto; padding: .6rem; background: none; border: 0; cursor: pointer; }
.ba-menu-toggle span, .ba-menu-toggle span::before, .ba-menu-toggle span::after { display: block; width: 22px; height: 2px; background: var(--c-contrast); position: relative; }
.ba-menu-toggle span::before, .ba-menu-toggle span::after { content: ""; position: absolute; }
.ba-menu-toggle span::before { top: -7px; }
.ba-menu-toggle span::after { top: 7px; }

@media (min-width: 900px) {
	.ba-menu-toggle { display: none; }
	.ba-nav[popover] {
		display: flex; flex: 1; align-items: center; gap: 1.5rem;
		position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0;
		border: 0; background: none; overflow: visible; color: inherit;
	}
	.ba-nav .menu { display: flex; flex: 1; align-items: center; gap: 1.75rem; }
	.ba-nav .menu > li:first-child, .ba-nav .menu-cta { margin-left: auto; } /* centers links, pushes CTA right */
	.ba-nav .menu > li { position: relative; padding-block: .4rem; }
	.ba-nav .sub-menu {
		display: none; position: absolute; top: 100%; left: -1rem; min-width: 220px;
		padding: .9rem 1.1rem; background: var(--c-surface); border-radius: 12px; box-shadow: var(--ba-shadow);
	}
	.ba-nav .sub-menu li + li { margin-top: .5rem; }
	.ba-nav li:hover > .sub-menu, .ba-nav li:focus-within > .sub-menu { display: block; }
}
@media (max-width: 899px) {
	.ba-nav:popover-open {
		inset: 84px 16px auto; width: auto; height: auto; margin: 0; padding: 1.5rem;
		border: 0; border-radius: var(--ba-radius); background: var(--c-surface); box-shadow: var(--ba-shadow);
	}
	.ba-nav::backdrop { background: rgb(0 0 0 / .3); }
	.ba-nav .menu li { padding: .45rem 0; }
	.ba-nav .sub-menu { padding-left: 1rem; }
	.ba-lang { margin-top: 1rem; }
}

/* ---------- Content ---------- */
.ba-main { padding-block: 2rem var(--ba-section); }
.ba-entry-header { max-width: var(--wp--style--global--content-size); margin: 3rem auto 2rem; }
.ba-entry-header h1 { margin: 0; }
.ba-featured { display: block; width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--ba-radius); margin-bottom: 2.5rem; }

/* Root alignments for the_content (classic theme) */
.entry-content > * { max-width: var(--wp--style--global--content-size); margin-inline: auto; }
.entry-content > .alignwide { max-width: var(--wp--style--global--wide-size); }
.entry-content > .alignfull { max-width: none; }
.page-template-page-landing .entry-content > * + * { margin-top: var(--ba-section); }
.page-template-page-landing .ba-main { padding-top: 1.25rem; }

/* Shared card / tile / glass */
.ba-card { background: var(--c-surface); border-radius: var(--ba-radius); padding: clamp(1.25rem, 3vw, 2rem); }
.wp-block-cover.ba-tile { margin: 0; padding: 1rem; border-radius: var(--ba-radius); overflow: hidden; background: var(--c-sand); }
.ba-tile .wp-block-cover__inner-container { width: 100%; }
.ba-glass {
	max-width: 360px; padding: 1rem 1.25rem; border-radius: 14px; color: var(--c-contrast);
	background: rgb(255 255 255 / .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ba-glass > * { margin: 0; }
.ba-glass h3 { font-size: 1.2rem; margin-bottom: .25rem; }
.ba-glass p { font-size: .85rem; }
.ba-glass a { color: inherit; text-decoration: none; }
.ba-glass a:hover { color: var(--c-accent); }

/* Buttons */
.ba-btn-light .wp-block-button__link { background: #fff; color: var(--c-contrast); }
.is-style-outline .wp-block-button__link { background: transparent; color: inherit; border: 1px solid currentColor; }
.is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--c-contrast); }

/* ---------- Hero (cover + overlapping "who we are" card) ---------- */
.ba-hero { position: relative; }
.wp-block-cover.ba-hero-media { isolation: isolate; /* keep cover overlay z-index below the hero card */ margin: 0; border-radius: var(--ba-radius); overflow: hidden; padding: clamp(1.5rem, 6vw, 5rem); background: var(--c-contrast); }
.ba-hero-media h1 { max-width: 13ch; color: #fff; }
.ba-hero-media p { max-width: 44ch; }
.ba-hero-card { background: var(--c-base); }
.ba-hero-card h2 { font-size: 1.6rem; margin: 0 0 .5rem; }
.ba-hero-card .ba-muted { font-size: .9rem; margin: 0 0 1.25rem; }
.wp-block-group.ba-stats { display: flex; gap: 1.75rem; }
.wp-block-group.ba-stats > * { margin: 0; }
.ba-stat-num { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--c-accent); }
.ba-stat-label { margin: .35rem 0 0; font-size: .8rem; color: var(--c-muted); }
@media (min-width: 900px) {
	.ba-hero-card { position: absolute; right: 0; bottom: 0; width: min(440px, 40%); padding: 1.75rem 0 0 1.75rem; border-top-left-radius: var(--ba-radius); }
}
@media (max-width: 899px) {
	.ba-hero-card { margin-top: 1rem !important; padding: 1.5rem; border-radius: var(--ba-radius); background: var(--c-surface); }
	.wp-block-cover.ba-hero-media { min-height: 520px !important; }
}

/* ---------- Highlights: split heading + bento grid ---------- */
.ba-split { gap: 2rem 4rem; align-items: end; }
.ba-split h2 { margin: 0; }
.wp-block-group.ba-bento { display: grid; gap: var(--ba-gap); margin-top: 2.5rem; }
.wp-block-group.ba-bento > * { margin: 0; }
@media (min-width: 782px) {
	.wp-block-group.ba-bento { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(260px, 1fr)); }
	.ba-bento > :first-child { grid-row: span 2; }
	.ba-bento > :last-child { grid-column: span 2; }
}

/* ---------- About (dark panel + photo) ---------- */
.wp-block-group.ba-about { display: grid; overflow: hidden; border-radius: var(--ba-radius); background: var(--c-contrast); color: #e9e6e1; }
.wp-block-group.ba-about > * { margin: 0; }
.ba-about-text { padding: clamp(1.75rem, 5vw, 4rem); }
.ba-about-text h2 { color: #fff; margin-top: 0; }
.ba-about .wp-block-cover.ba-tile { border-radius: 0; min-height: 320px !important; }
@media (min-width: 782px) { .wp-block-group.ba-about { grid-template-columns: 45fr 55fr; } }

/* ---------- Showcase carousel (CSS scroll-snap, no JS) ---------- */
.wp-block-group.ba-carousel {
	display: flex; gap: var(--ba-gap); margin-top: 2rem; padding-bottom: 1rem;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.wp-block-group.ba-carousel > * { flex: 0 0 min(82%, 340px); margin: 0; scroll-snap-align: start; }

/* ---------- Experiences (query loop) ---------- */
.ba-experiences .wp-block-post { overflow: hidden; border-radius: var(--ba-radius); background: var(--c-surface); padding-bottom: 1.25rem; }
.ba-experiences .wp-block-post > * { margin-inline: 1.25rem; }
.ba-experiences .wp-block-post > .wp-block-post-featured-image { margin: 0 0 1rem; }
.wp-block-post-terms a { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); text-decoration: none; }
.wp-block-post-title a { text-decoration: none; }

/* ---------- CTA band ---------- */
.ba-cta { padding: clamp(2.5rem, 6vw, 5rem) 1.5rem; border-radius: var(--ba-radius); background: var(--c-contrast); color: #e9e6e1; text-align: center; }
.ba-cta h2 { color: #fff; margin-top: 0; }

/* ---------- Detail page (apartment / wellness / camper) ---------- */
.ba-price { position: sticky; top: 110px; }
.ba-price-num { margin: 0 0 1rem; font-size: 2rem; font-weight: 700; color: var(--c-accent); }
.ba-checklist { list-style: none; padding: 0; }
.ba-checklist li { padding: .3rem 0; }
.ba-checklist li::before { content: "✓"; margin-right: .6rem; color: var(--c-accent); font-weight: 700; }
.wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: 14px; }

/* ---------- Lists / archive ---------- */
.ba-grid { display: grid; gap: var(--ba-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ba-post-card { padding: 0; overflow: hidden; }
.ba-post-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ba-card-body { padding: 1.25rem 1.5rem 1.5rem; }
.ba-card-title { margin: .25rem 0 .5rem; font-size: 1.25rem; }
.ba-card-title a { text-decoration: none; }
.nav-links { display: flex; justify-content: center; gap: .5rem; margin-top: 2.5rem; }
.page-numbers { padding: .5em .95em; border-radius: 999px; background: var(--c-surface); text-decoration: none; }
.page-numbers.current { background: var(--c-accent); color: #fff; }

/* ---------- Forms (Contact Form 7, Brevo) ---------- */
input:not([type="submit"], [type="checkbox"], [type="radio"]), textarea, select {
	width: 100%; padding: .8em 1em; font: inherit;
	background: var(--c-base); border: 1px solid transparent; border-radius: 12px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }
input[type="submit"], .wpcf7-submit, .sib-default-btn {
	padding: .8em 1.8em; border: 0; border-radius: 999px; cursor: pointer;
	font: inherit; font-weight: 500; background: var(--c-accent); color: #fff;
}
input[type="submit"]:hover { background: var(--c-contrast); }
.ba-map iframe { display: block; width: 100%; height: 380px; border: 0; border-radius: var(--ba-radius); }

/* ---------- Footer ---------- */
.ba-footer { padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem) 1.5rem; border-radius: var(--ba-radius) var(--ba-radius) 0 0; background: var(--c-contrast); color: #cfcac2; }
.ba-footer a { color: #fff; text-decoration: none; }
.ba-footer a:hover { color: var(--c-sand); }
.ba-footer .ba-site-title { color: #fff; }
.ba-footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ba-footer ul { list-style: none; margin: 0; padding: 0; }
.ba-footer li + li { margin-top: .5rem; }
.ba-widget-title, .ba-footer :is(h2, h3) { margin-top: 0; color: #fff; font-size: 1.1rem; }
.ba-footer input:not([type="submit"]) { background: rgb(255 255 255 / .08); color: #fff; }
.ba-copy { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / .12); font-size: .8rem; }

@media (max-width: 781px) {
	.wp-block-buttons { flex-direction: column; align-items: stretch; }
	.wp-block-button { text-align: center; }
}