/*
Theme Name:   Verus FoTo
Template:     astra
Description:  Child theme for verusfoto.cz on Astra – brand colours, typography, header, floating contact buttons.
Version:      1.0.0
Text Domain:  verus-foto
*/

:root {
	--vf-paper: #faf6f2;
	--vf-paper-2: #f3ebe4;
	--vf-ink: #2b2420;
	--vf-muted: #6f625a;
	--vf-brown: #5f4840;
	--vf-accent: #a16f6f;
	--vf-sand: #dec2b6;
	--vf-peach: #f6d8c2;
	--vf-line: #e8ddd5;
	--vf-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
	--vf-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
body,
.ast-separate-container,
.ast-plain-container,
.site-content {
	background-color: var(--vf-paper);
}
body,
button,
input,
select,
textarea,
.elementor-widget-text-editor {
	font-family: var(--vf-sans);
	font-weight: 300;
	color: var(--vf-ink);
	-webkit-font-smoothing: antialiased;
}
body { font-size: 17px; line-height: 1.7; }
strong, b { font-weight: 500; }

h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title,
.site-title,
.site-title a {
	font-family: var(--vf-serif);
	font-weight: 500;
	color: var(--vf-ink);
	letter-spacing: -.005em;
	line-height: 1.12;
}
h1, .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(2rem, 4.2vw, 3rem); }
h3, .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(1.5rem, 2.6vw, 2rem); }

a { color: var(--vf-brown); text-underline-offset: .18em; }
a:hover, a:focus { color: var(--vf-accent); }
::selection { background: var(--vf-peach); color: var(--vf-ink); }

/* Small caps eyebrow used above headings (Elementor: CSS class "vf-eyebrow") */
.vf-eyebrow .elementor-heading-title,
.vf-eyebrow {
	font-family: var(--vf-sans) !important;
	font-size: .78rem !important;
	font-weight: 500 !important;
	letter-spacing: .22em !important;
	text-transform: uppercase;
	color: var(--vf-accent) !important;
}

/* ---------- Buttons ---------- */
.elementor-button,
.wp-block-button__link,
.ast-button,
button.ff-btn-submit,
.ff-btn-submit,
input[type="submit"] {
	font-family: var(--vf-sans) !important;
	font-weight: 400 !important;
	font-size: .92rem !important;
	letter-spacing: .06em;
	border-radius: 999px !important;
	padding: 14px 28px !important;
	background-color: var(--vf-ink) !important;
	color: #fff !important;
	border: 1px solid var(--vf-ink) !important;
	transition: background-color .25s, color .25s, border-color .25s;
}
.elementor-button:hover,
.wp-block-button__link:hover,
.ff-btn-submit:hover,
input[type="submit"]:hover {
	background-color: var(--vf-accent) !important;
	border-color: var(--vf-accent) !important;
	color: #fff !important;
}
/* Outline variant: Elementor button CSS class "vf-ghost" */
.vf-ghost .elementor-button {
	background-color: transparent !important;
	color: var(--vf-ink) !important;
}
.vf-ghost .elementor-button:hover { color: #fff !important; }
/* Light variant on dark/photo backgrounds: CSS class "vf-light" */
.vf-light .elementor-button {
	background-color: #fff !important;
	border-color: #fff !important;
	color: var(--vf-ink) !important;
}
.vf-light.vf-ghost .elementor-button { background-color: transparent !important; color: #fff !important; }

/* ---------- Header ---------- */
.ast-primary-header-bar,
.main-header-bar {
	background-color: rgba(250, 246, 242, .92) !important;
	backdrop-filter: saturate(1.2) blur(8px);
	-webkit-backdrop-filter: saturate(1.2) blur(8px);
	border-bottom: 1px solid var(--vf-line) !important;
}
.site-header .custom-logo-link img,
.site-header .custom-logo { max-height: 58px; width: auto; }
.site-title, .site-title a {
	font-variant: small-caps;
	font-size: 1.7rem !important;
	letter-spacing: .04em;
	color: var(--vf-ink) !important;
}
.ast-site-identity { padding: 10px 0; }
.site-description {
	font-family: var(--vf-serif);
	font-style: italic;
	font-size: 1.06rem !important;
	color: var(--vf-muted) !important;
	margin: 0;
}
@media (min-width: 922px) {
	/* Logo · tagline · menu on one line */
	.ast-site-title-wrap { display: flex; align-items: baseline; gap: 28px; }
	.site-description { padding-left: 28px; border-left: 1px solid var(--vf-line); }
}
.main-header-menu .menu-link,
.ast-builder-menu .menu-item > .menu-link {
	font-family: var(--vf-sans);
	font-weight: 400;
	font-size: .9rem;
	letter-spacing: .06em;
	color: var(--vf-ink) !important;
}
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .menu-link:hover { color: var(--vf-accent) !important; }
.vf-lang-switch .menu-link { font-size: .78rem !important; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.vf-lang-switch .menu-link:hover { opacity: 1; }
.ast-mobile-menu-trigger-minimal { color: var(--vf-ink) !important; }

/* ---------- Elementor pages: full-width sections ---------- */
.page-template-elementor_header_footer #content > .ast-container,
.page-template-elementor_header_footer .site-content > .ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	display: block;
}

/* ---------- Footer ---------- */
.site-footer,
.site-footer .site-below-footer-wrap,
.site-footer .ast-builder-grid-row-container {
	background-color: var(--vf-ink) !important;
	color: rgba(255, 255, 255, .78);
}
.site-footer,
.site-footer p,
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright * { color: rgba(255, 255, 255, .78) !important; }
.site-footer a { color: #fff !important; }
.site-footer small { color: rgba(255, 255, 255, .55) !important; }

/* Back-to-top button in brand colours, above the mobile contact bar */
#ast-scroll-top {
	background-color: var(--vf-ink) !important;
	color: #fff !important;
	border-radius: 50% !important;
	right: 22px !important;
	bottom: 86px !important;
}
@media (max-width: 767px) {
	#ast-scroll-top { bottom: calc(72px + env(safe-area-inset-bottom)) !important; right: 14px !important; }
}

/* Mobile menu */
.ast-mobile-header-content,
.ast-mobile-header-content .main-header-menu,
.ast-mobile-header-content .main-navigation {
	background-color: var(--vf-paper) !important;
}
.ast-mobile-header-content .menu-item > .menu-link {
	font-size: 1.05rem !important;
	padding: 14px 20px !important;
	border-bottom: 1px solid var(--vf-line) !important;
}
.ast-mobile-header-content .current-menu-item > .menu-link { background: transparent !important; color: var(--vf-accent) !important; }
.ast-header-break-point .main-header-bar .ast-button-wrap .menu-toggle,
.ast-mobile-menu-trigger-minimal,
.menu-toggle .ast-mobile-svg { color: var(--vf-ink) !important; fill: var(--vf-ink) !important; border-color: transparent !important; background: transparent !important; }

/* Tagline only where there is room for it */
@media (min-width: 922px) and (max-width: 1279px) {
	#masthead .site-description { display: none !important; }
}
@media (min-width: 922px) {
	/* Seven menu items + language switcher on one line next to the logo */
	.main-header-menu > .menu-item > .menu-link { padding-left: 11px !important; padding-right: 11px !important; }
	.ast-site-title-wrap { gap: 20px; }
	.site-description { padding-left: 20px; }
}
.ast-footer-copyright { font-size: .85rem; }

/* ---------- Floating contact (desktop pill + mobile bar) ---------- */
.vf-float {
	position: fixed; right: 22px; bottom: 22px; z-index: 9990;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 13px 22px; border-radius: 999px;
	background: var(--vf-ink); color: #fff !important; text-decoration: none;
	font-family: var(--vf-sans); font-weight: 400; font-size: .92rem; letter-spacing: .05em;
	box-shadow: 0 10px 30px rgba(43, 36, 32, .25);
	transform: translateY(120%); opacity: 0;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .35s, background-color .25s;
}
.vf-float.is-visible { transform: none; opacity: 1; }
.vf-float:hover { background: var(--vf-accent); }
.vf-float svg { width: 18px; height: 18px; }

.vf-mbar { display: none; }
@media (max-width: 767px) {
	.vf-float { display: none; }
	.vf-mbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
		display: grid; grid-template-columns: 1fr 1fr 1.3fr;
		background: var(--vf-ink); box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.vf-mbar a {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		min-height: 58px; color: #fff !important; text-decoration: none;
		font-size: .74rem; letter-spacing: .06em;
	}
	.vf-mbar a + a { border-left: 1px solid rgba(255, 255, 255, .12); }
	.vf-mbar a.vf-mbar__main { background: var(--vf-accent); font-weight: 500; }
	.vf-mbar svg { width: 20px; height: 20px; }
	body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}

/* ---------- Content helpers used in Elementor ---------- */
.vf-quote .elementor-testimonial-content {
	font-family: var(--vf-serif);
	font-size: 1.3rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--vf-ink);
}
.vf-quote .elementor-testimonial-name { font-family: var(--vf-sans); font-weight: 500; letter-spacing: .04em; }
.vf-quote .elementor-testimonial-job { color: var(--vf-muted); font-size: .85rem; }
.vf-quote .elementor-testimonial-image img { width: 56px !important; height: 56px !important; object-fit: cover; }

.vf-card-box {
	background: #fff;
	border: 1px solid var(--vf-line);
	border-radius: 4px;
}
.vf-price .elementor-heading-title { font-family: var(--vf-serif); font-size: 2.4rem; color: var(--vf-ink); }
.vf-list ul { list-style: none; margin: 0; padding: 0; }
.vf-list li { position: relative; padding-left: 22px; margin: 0 0 8px; }
.vf-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--vf-accent); }

/* Photo carousel: keep it calm */
.vf-carousel .swiper-slide img { width: 100%; height: clamp(320px, 62vh, 640px); object-fit: cover; }
.vf-carousel .elementor-swiper-button { color: #fff; }

/* Hero: Veronika's portrait.
   Explicit heights (not aspect-ratio): Elementor's flex containers measure aspect-ratio
   images too short, and the photo then overlaps the headline. */
.vf-hero-photo img {
	display: block;
	width: 100%;
	max-width: 432px;
	height: auto;
	margin: 0 auto;
	border-radius: 4px;
}
.vf-hero-caption { font-size: .82rem; letter-spacing: .08em; }
.vf-hero-caption p { margin: 0; }
@media (max-width: 767px) {
	/* On phones Veronika comes first, in a lower crop, so the headline still fits on screen */
	.e-con:has(> .vf-hero-photo) { order: -1; }
	.vf-hero-photo img {
		max-width: none;
		height: min(62vw, 340px) !important;
		object-fit: cover;
		object-position: center 35%;
	}
	.vf-hero-caption { display: none; }
}

/* Photo strip under the hero: three photos side by side, one on phones */
.vf-carousel.vf-strip .swiper-slide img { height: clamp(260px, 30vw, 440px); }
.vf-carousel.vf-strip .swiper-pagination { position: static; margin-top: 14px; }
@media (max-width: 767px) {
	.vf-carousel.vf-strip .swiper-slide img { height: 300px; }
}

/* Contact info + socials shortcode */
.vf-contact { display: grid; gap: 10px; font-size: 1.05rem; }
.vf-contact a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--vf-line); }
.vf-contact a:hover { color: var(--vf-accent); border-color: var(--vf-accent); }
.vf-socials { display: flex; gap: 12px; margin-top: 8px; }
.vf-socials a {
	display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center;
	border: 1px solid currentColor; border-radius: 50%; color: inherit; border-bottom-width: 1px;
}
.vf-socials svg { width: 18px; height: 18px; fill: currentColor; }
.vf-ico { font-size: .82rem; color: var(--vf-muted); }
.vf-on-dark .vf-contact { justify-items: center; text-align: center; color: #fff; }
.vf-on-dark .vf-contact a { color: #fff; border-color: rgba(255, 255, 255, .25); }
.vf-on-dark .vf-ico { color: rgba(255, 255, 255, .6); }
.vf-on-dark .vf-socials { justify-content: center; }

/* Fluent Forms – match the site */
.fluentform .ff-el-form-control {
	border: 1px solid var(--vf-line) !important;
	border-radius: 4px !important;
	background: #fff !important;
	font-family: var(--vf-sans) !important;
	font-size: 1rem !important;
	padding: 12px 14px !important;
}
.fluentform .ff-el-form-control:focus { border-color: var(--vf-accent) !important; box-shadow: none !important; }
.fluentform .ff-el-input--label label { font-weight: 400 !important; font-size: .9rem; color: var(--vf-muted); }

/* Blog cards (Astra archive) */
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single { background: transparent; }
.blog .entry-title a, .archive .entry-title a { color: var(--vf-ink); text-decoration: none; }

/* ---------- Link hub ([vf_links]) ---------- */
.vf-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vf-links li { margin: 0; }
/* The section centres its content; the link grid should still use the full width */
.elementor-widget-shortcode:has(.vf-links) { align-self: stretch; width: 100%; }
.vf-links a {
	position: relative; display: flex; flex-direction: column; gap: 2px; height: 100%;
	padding: 18px 44px 18px 78px; min-height: 92px; background: #fff; border: 1px solid var(--vf-line); border-radius: 6px;
	color: var(--vf-ink); text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.vf-links a:hover, .vf-links a:focus-visible { border-color: var(--vf-accent); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(43, 36, 32, .08); color: var(--vf-ink); }
.vf-links__icon {
	position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--vf-paper-2); color: var(--vf-accent);
	transition: background-color .2s, color .2s;
}
.vf-links__icon svg { width: 20px; height: 20px; fill: currentColor; }
.vf-links a:hover .vf-links__icon, .vf-links a:focus-visible .vf-links__icon { background: var(--vf-accent); color: #fff; }
.vf-links__name { font-family: var(--vf-serif); font-size: 1.35rem; line-height: 1.2; }
.vf-links__handle { font-size: .88rem; color: var(--vf-accent); }
.vf-links__desc { font-size: .88rem; color: var(--vf-muted); }
.vf-links__arrow { position: absolute; top: 16px; right: 18px; color: var(--vf-muted); }
@media (max-width: 1024px) { .vf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .vf-links { grid-template-columns: 1fr; } }

/* ---------- Cookie banner ---------- */
.vf-cookie {
	position: fixed; left: 22px; bottom: 22px; z-index: 9995;
	width: min(420px, calc(100vw - 44px));
	padding: 22px 22px 18px;
	background: var(--vf-paper); color: var(--vf-ink);
	border: 1px solid var(--vf-line); border-radius: 6px;
	box-shadow: 0 18px 50px rgba(43, 36, 32, .22);
	font-size: .92rem; line-height: 1.55;
}
.vf-cookie[hidden] { display: none; }
.vf-cookie__title { margin: 0 0 6px; font-family: var(--vf-serif); font-size: 1.35rem; font-weight: 500; }
.vf-cookie__text { margin: 0 0 16px; color: var(--vf-muted); }
.vf-cookie__text a { color: var(--vf-brown); }
.vf-cookie__buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.vf-cookie__btn {
	flex: 1 1 140px; cursor: pointer;
	padding: 11px 18px !important; border-radius: 999px !important;
	background: var(--vf-ink) !important; color: #fff !important; border: 1px solid var(--vf-ink) !important;
	font-family: var(--vf-sans) !important; font-size: .88rem !important; font-weight: 400 !important; letter-spacing: .04em;
}
.vf-cookie__btn:hover { background: var(--vf-accent) !important; border-color: var(--vf-accent) !important; }
.vf-cookie__btn--ghost { background: transparent !important; color: var(--vf-ink) !important; }
.vf-cookie__btn--ghost:hover { color: #fff !important; }
@media (max-width: 767px) {
	.vf-cookie { left: 10px; right: 10px; width: auto; bottom: calc(66px + env(safe-area-inset-bottom)); padding: 18px 16px 14px; }
}
/* While the banner is open the floating "Napsat mi" pill steps aside */
.vf-cookie-open .vf-float { opacity: 0 !important; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.vf-float { transition: none; }
}