/* =========================================================================
   HOMEVILLA — base.css
   Shared base for every site (hub + all property kits).
   Per-property "character kit" values arrive as CSS custom properties,
   set inline in index.php from the template's Template Manager params —
   see TEMPLATE_PARAMS_TO_VARS in index.php. Do not hardcode colours or
   fonts here; reference the variables so a new kit needs param changes
   only, not CSS edits.
   ========================================================================= */

:root{
	/* Fallback defaults — overridden inline per template style */
	--accent: #1B1B19;
	--accent-soft: #F4F4F2;
	--ink: #1B1B19;
	--ink-muted: #6B6B66;
	--hairline: rgba(0,0,0,0.08);
	--bg: #FFFFFF;

	--font-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-display: 'Cormorant Garamond', Georgia, serif;
	--font-display-style: italic;
	--font-display-weight: 600;
	--font-body: 'Inter', sans-serif;

	--container-max: 1180px;
}

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

/* Joomla core (mod_menu and others) outputs accessibility-only text in
   elements with this exact class name, expecting the surrounding
   framework (normally Bootstrap, via Cassiopeia) to define it. Our
   custom template never loaded that, so this text was rendering fully
   visible instead of screen-reader-only — e.g. mod_menu's dropdown
   toggle button text ("More about: Pärnu"). Standard WCAG-compliant
   definition, matching Bootstrap's own .visually-hidden exactly. */
.visually-hidden{
	position:absolute !important;
	width:1px !important;
	height:1px !important;
	padding:0 !important;
	margin:-1px !important;
	overflow:hidden !important;
	clip:rect(0,0,0,0) !important;
	white-space:nowrap !important;
	border:0 !important;
}
html{ -webkit-text-size-adjust:100%; }
body{
	margin:0;
	background:var(--bg);
	color:var(--ink);
	font-family:var(--font-body);
	font-weight:400;
	font-size:13.5px;
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* No rounded corners anywhere, as a hard rule. */
*{ border-radius:0 !important; }

/* ---------- layout ---------------------------------------------------- */
.hv-container{
	max-width:var(--container-max);
	margin:0 auto;
	padding:0 40px;
}
body.hv-boxed .hv-container{ max-width:1180px; }
body.hv-full_width .hv-container{ max-width:1320px; }

.hv-hairline{
	border:0;
	border-top:0.5px solid var(--hairline);
	margin:48px 0;
}

section{ padding:56px 0; }
@media (max-width:720px){ section{ padding:40px 0; } }
@media (max-width:600px){
	.hv-container{ padding:0 20px; }
	.hv-hero-text{ padding:0 20px 32px; }
}

/* ---------- typography roles ------------------------------------------ */
.hv-eyebrow{
	font-family:var(--font-base);
	font-weight:500;
	font-size:10px;
	text-transform:uppercase;
	letter-spacing:0.18em;
	color:var(--accent);
	display:block;
	margin-bottom:10px;
}

h1.hv-h1{
	font-family:var(--font-display);
	font-style:var(--font-display-style);
	font-weight:var(--font-display-weight);
	font-size:clamp(26px,4vw,34px);
	letter-spacing:var(--display-tracking,0);
	margin:0 0 8px 0;
	color:var(--ink);
}
.hv-tagline{
	font-family:var(--font-display);
	font-style:italic;
	font-weight:400;
	font-size:15px;
	color:var(--ink-muted);
	margin:0 0 28px 0;
}
h2.hv-h2{
	font-family:var(--font-display);
	font-style:var(--font-display-style);
	font-weight:600;
	font-size:19px;
	letter-spacing:var(--display-tracking,0);
	margin:0 0 18px 0;
}
.hv-body{
	max-width:980px;
	margin:0 auto;
}
.hv-body p{ margin:0 0 16px 0; }
/* Top-level menu list — Joomla's mod_menu renders <ul class="mod-menu mod-list nav">.
   Scope deliberately to .mod-menu, not a bare "ul" selector — a bare "ul"
   selector also matches the nested .mod-menu__sub dropdown and, having
   real CSS specificity, overrides Joomla's own zero-specificity
   :where(.mod-menu__sub[aria-hidden]) show/hide rule, permanently
   breaking the dropdown toggle. Lesson learned the hard way. */
nav.hv-mainnav ul.mod-menu{
	list-style:none; display:flex; gap:28px; margin:0; padding:0;
	position:relative;
}
nav.hv-mainnav .nav-item{ position:relative; }
nav.hv-mainnav .nav-item > a{
	display:inline-block;
	color:var(--ink);
	padding-bottom:3px;
	border-bottom:1px solid transparent;
	transition:border-color .15s ease, color .15s ease;
}
nav.hv-mainnav .nav-item > a:hover,
nav.hv-mainnav .nav-item.current > a,
nav.hv-mainnav .nav-item.active > a{
	border-bottom-color:var(--accent);
	color:var(--accent);
}

/* Dropdown submenu — only positioning/visual styles here. Deliberately
   NOT touching `display`: Joomla's own CSS controls show/hide via the
   [aria-hidden] attribute, toggled by Joomla's own JS (auto-loaded with
   mod_menu, works out of the box). We only style it once visible. */
nav.hv-mainnav .mod-menu__sub{
	position:absolute; top:100%; left:0; min-width:180px;
	flex-direction:column; gap:0;
	background:var(--bg); border:0.5px solid var(--hairline);
	padding:6px 0; margin:6px 0 0; list-style:none;
	box-shadow:0 8px 24px rgba(0,0,0,.08);
	z-index:40;
}
nav.hv-mainnav .mod-menu__sub .nav-item > a{
	display:block; padding:8px 16px; border-bottom:none;
}
nav.hv-mainnav .mod-menu__sub .nav-item > a:hover{
	background:var(--accent-soft); color:var(--accent);
}
nav.hv-mainnav .mod-menu__toggle-sub{
	color:inherit; font-size:10px; margin-inline-start:4px;
	cursor:pointer;
	display:inline-flex; align-items:center; justify-content:center;
	min-width:24px; min-height:24px;
	background:transparent; border:0;
}
/* Joomla's own mod-menu.css (loaded automatically with the module)
   already handles rotating this on [aria-expanded="true"] — we only
   need to supply a visible default shape. No icon font is loaded in
   this template, so .icon-chevron-down would otherwise be empty,
   collapsing the whole button to zero size (exactly what happened
   before this was added). Built with border-triangle, not transform,
   so Joomla's own rotate(180deg) rule applies cleanly without conflict. */
nav.hv-mainnav .icon-chevron-down{
	display:inline-block;
	width:0; height:0;
	border-left:4px solid transparent;
	border-right:4px solid transparent;
	border-top:5px solid currentColor;
}

.hv-nav, .hv-caption{
	font-family:var(--font-base);
	font-weight:400;
	font-size:12px;
	letter-spacing:0.02em;
}

/* ---------- header ------------------------------------------------------ */
header.hv-header{
	padding:22px 0;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.hv-brand{ display:flex; align-items:baseline; gap:10px; }
.hv-parent-mark{
	font-family:'Inter',sans-serif;
	font-weight:300;
	font-size:10px;
	color:var(--ink-muted);
	text-decoration:none;
	letter-spacing:0.01em;
}
.hv-parent-mark:hover{ text-decoration:underline; }
.hv-brand-sep{ color:var(--hairline); font-size:13px; }
.hv-property-name{
	font-family:var(--font-display);
	font-style:var(--font-display-style);
	font-weight:600;
	font-size:17px;
	color:var(--ink);
}

.hv-langswitcher{
	font-family:var(--font-base); font-size:11px; color:var(--ink-muted);
	margin-left:20px; display:flex; align-items:center; gap:8px;
}
.hv-langswitcher a{ color:var(--ink-muted); text-decoration:none; }
.hv-langswitcher a:hover, .hv-langswitcher a.active{ color:var(--accent); }
.hv-langswitcher ul{ list-style:none; display:flex; gap:8px; margin:0; padding:0; }
.hv-langswitcher img{ display:none; } /* discrete: text codes, not flag icons, matches the brief's restrained aesthetic */

/* hamburger (mobile) */
.hv-burger{ display:none; background:none; border:0; cursor:pointer; }
@media (max-width:860px){
	nav.hv-mainnav{ display:none; }
	nav.hv-mainnav.is-open{
		display:block; position:absolute; left:0; right:0; top:64px;
		background:var(--bg); padding:20px 28px; border-top:0.5px solid var(--hairline);
		z-index:50;
	}
	nav.hv-mainnav.is-open ul.mod-menu{ flex-direction:column; gap:16px; }
	nav.hv-mainnav.is-open .mod-menu__sub{
		position:static; box-shadow:none; border:0; margin:8px 0 0 12px; padding:0;
	}
	.hv-burger{ display:block; }
}

/* ---------- guest nav strip --------------------------------------------- */
.hv-guestnav{
	border-top:0.5px solid var(--hairline);
	padding:10px 0;
	font-size:11px;
}
.hv-guestnav .hv-container{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hv-guestnav-label{
	text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-muted); font-size:9.5px;
}
/* Same mod_menu markup as the main nav — reset its list styling the same
   deliberate way (target .mod-menu, not a bare ul) rather than leaving
   it to render with default browser bullets, which is what it did before. */
.hv-guestnav ul.mod-menu{
	list-style:none; display:flex; gap:18px; flex-wrap:wrap; margin:0; padding:0;
}
.hv-guestnav .nav-item > a{
	text-decoration:underline; text-underline-offset:3px; color:var(--ink);
}
.hv-guestnav .nav-item > a:hover{ color:var(--accent); }

/* ---------- hero ---------------------------------------------------------- */
.hv-hero{
	position:relative;
	width:100%;
	height:78vh;
	min-height:460px;
	max-height:760px;
	overflow:hidden;
	background:#111;
}
/* Adjustable banner height — full is the Home default; shorter options
   turn the same hero module into a lighter subpage orientation banner. */
.hv-hero.hv-h-tall{ height:55vh; min-height:360px; max-height:600px; }
.hv-hero.hv-h-medium{ height:38vh; min-height:280px; max-height:440px; }
.hv-hero.hv-h-short{ height:24vh; min-height:200px; max-height:320px; }
.hv-hero-slide{
	position:absolute; inset:0;
	background-size:cover; background-position:center;
	opacity:0;
	transition:opacity 1.1s ease;
}
.hv-hero-slide.is-active{ opacity:1; }
.hv-hero[data-transition="kenburns"] .hv-hero-slide{
	transform:scale(1);
	transition:transform linear;
}
.hv-hero[data-transition="kenburns"] .hv-hero-slide.is-zooming{
	transform:scale(1.08);
}

.hv-hero[data-transition="slide"] .hv-hero-slide{
	transition:transform 1s ease, opacity 0s;
	transform:translateX(100%);
	opacity:1;
}
.hv-hero[data-transition="slide"] .hv-hero-slide.is-active{ transform:translateX(0); }
.hv-hero[data-transition="slide"] .hv-hero-slide.is-prev{ transform:translateX(-100%); }

.hv-hero[data-transition="flip"] .hv-hero-slide{
	transition:transform .9s cubic-bezier(.4,0,.2,1), opacity .4s ease;
	transform:perspective(1200px) rotateY(90deg);
}
.hv-hero[data-transition="flip"] .hv-hero-slide.is-active{ transform:perspective(1200px) rotateY(0deg); }

.hv-hero-mask{ position:absolute; inset:0; pointer-events:none; }
.hv-hero-mask.mask-dark{ background:rgba(0,0,0,.35); }
.hv-hero-mask.mask-warm{ background:rgba(120,72,18,.30); }
.hv-hero-mask.mask-cool{ background:rgba(20,55,110,.28); }
.hv-hero-mask.mask-none{ display:none; }

.hv-hero-text{
	position:absolute; left:0; right:0; bottom:0; padding:0 40px 44px;
	max-width:var(--container-max); margin:0 auto;
}
.hv-hero-eyebrow{
	color:rgba(255,255,255,.7); text-transform:uppercase; font-size:9px;
	letter-spacing:0.18em; font-family:var(--font-base); font-weight:500; margin-bottom:10px;
}
.hv-hero-title{
	color:#fff; font-family:var(--font-display); font-style:var(--font-display-style);
	font-weight:var(--font-display-weight); font-size:clamp(30px,5.5vw,52px);
	text-shadow:0 2px 18px rgba(0,0,0,.35); margin:0 0 8px;
}
.hv-hero-tagline{
	color:rgba(255,255,255,.85); font-family:var(--font-display); font-style:italic;
	font-size:16px; max-width:560px;
}
.hv-hero-dots{
	position:absolute; right:28px; bottom:44px; display:flex; gap:8px;
}
.hv-hero-dots button{
	width:7px; height:7px; border:1px solid rgba(255,255,255,.7); background:transparent;
	padding:0; cursor:pointer;
}
.hv-hero-dots button.is-active{ background:#fff; }
.hv-hero-progress{
	position:absolute; left:0; bottom:0; height:2px; background:rgba(255,255,255,.85);
	width:0%;
}
.hv-hero-badge{
	position:absolute; top:24px; right:28px; width:34px; height:34px; opacity:.85;
}
.hv-hero-badge svg{ width:100%; height:100%; fill:none !important; stroke:#fff !important; }

.hv-hero.mode-single .hv-hero-slide{ transition:transform 6s ease; }
.hv-hero.mode-single:hover .hv-hero-slide{ transform:scale(1.05); }

/* mosaic mode */
.hv-mosaic{ display:grid; gap:4px; height:78vh; min-height:460px; max-height:760px; }
.hv-mosaic.hv-h-tall{ height:55vh; min-height:360px; max-height:600px; }
.hv-mosaic.hv-h-medium{ height:38vh; min-height:280px; max-height:440px; }
.hv-mosaic.hv-h-short{ height:24vh; min-height:200px; max-height:320px; }
.hv-mosaic.layout-2x2{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.hv-mosaic.layout-featured{ grid-template-columns:1.6fr 1fr; grid-template-rows:1fr 1fr; }
.hv-mosaic.layout-featured .hv-mosaic-cell:first-child{ grid-row:1 / span 2; }
.hv-mosaic.layout-3col{ grid-template-columns:1fr 1fr 1fr; }
.hv-mosaic-cell{ position:relative; overflow:hidden; }
.hv-mosaic-cell img{
	width:100%; height:100%; object-fit:cover; transition:transform .5s ease;
}
.hv-mosaic-cell:hover img{ transform:scale(1.06); }

/* video mode */
.hv-hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- teaser two-column -------------------------------------------- */
.hv-teasers{
	display:grid; grid-template-columns:1fr 1fr; gap:48px;
}
@media (max-width:720px){ .hv-teasers{ grid-template-columns:1fr; gap:32px; } }
.hv-teaser h3{ font-family:var(--font-display); font-style:var(--font-display-style); font-size:19px; margin:0 0 10px; }
.hv-teaser a.hv-link{ color:var(--accent); font-size:12.5px; }
.hv-teaser a.hv-link:hover{ text-decoration:underline; }

/* ---------- at-a-glance strip --------------------------------------------- */
.hv-glance{
	background:var(--accent-soft);
	padding:18px 0;
	font-size:12.5px;
	letter-spacing:0.01em;
	text-align:center;
}
.hv-glance span{ margin:0 6px; }

/* ---------- detail rows (guest guide, facts) ------------------------------ */
.hv-detailrow{
	display:flex; justify-content:space-between; gap:24px;
	padding:12px 0; border-top:0.5px solid var(--hairline);
	font-size:13px;
}
.hv-detailrow:last-child{ border-bottom:0.5px solid var(--hairline); }
.hv-detailrow dt{ color:var(--ink-muted); font-weight:500; }

.hv-body p:first-child em{
	font-family:var(--font-display);
	font-style:italic;
	color:var(--ink-muted);
	font-size:14.5px;
}

/* Generic main-scoped heading styling — applies to Joomla's own article
   title / page heading output, which carries no guaranteed class names
   and must never be hand-edited inside article HTML (editor-safety). */
main h1{
	font-family:var(--font-display);
	font-style:var(--font-display-style);
	font-weight:var(--font-display-weight);
	font-size:clamp(26px,4vw,34px);
	margin:10px 0 24px;
}
.hv-body h2{
	font-family:var(--font-display);
	font-style:var(--font-display-style);
	font-weight:600;
	font-size:19px;
	margin:36px 0 16px;
}
.hv-body strong{ color:var(--ink); }

/* ---------- breadcrumbs (Joomla's real mod_breadcrumbs markup) ----------- */
.hv-breadcrumb-wrap nav.mod-breadcrumbs__wrapper{ display:block; }
.hv-breadcrumb-wrap ol.mod-breadcrumbs{
	list-style:none; display:flex; flex-wrap:wrap; align-items:center;
	margin:0; padding:0; gap:0;
	font-size:11px; color:var(--ink-muted);
}
.hv-breadcrumb-wrap li.mod-breadcrumbs__here{ display:none; }
.hv-breadcrumb-wrap li.mod-breadcrumbs__item{ display:flex; align-items:center; }
.hv-breadcrumb-wrap li.mod-breadcrumbs__item:not(:last-child)::after{
	content:"/"; margin:0 8px; color:var(--hairline);
}
.hv-breadcrumb-wrap li.mod-breadcrumbs__item a{
	color:var(--ink-muted); text-decoration:none;
}
.hv-breadcrumb-wrap li.mod-breadcrumbs__item a:hover{ color:var(--accent); }
.hv-breadcrumb-wrap li.mod-breadcrumbs__item.active span{ color:var(--ink); }

/* ---------- page header band (non-home pages — gives the top of the
   page some presence without a full photo hero, which is reserved for
   Home by design) ------------------------------------------------------ */
.hv-page-header{
	background:var(--accent-soft);
	padding:14px 0 12px;
	margin-bottom:8px;
}
.hv-page-header .hv-breadcrumb-wrap{ margin-bottom:4px; line-height:1; }
.hv-breadcrumb-inline{ padding-top:18px; margin-bottom:0; }
.hv-body ul{ padding-left:18px; margin:0 0 16px; }
.hv-body li{ margin-bottom:6px; }

/* ---------- in-article image effects -----------------------------------
   Two effects are defined below. One is active, one is commented out.
   To swap: comment out the active block and uncomment the other one.
   Both work automatically on every plain <img> inside an article body —
   no special class needed when inserting images in the editor.
   -----------------------------------------------------------------------

   EFFECT A — Hover zoom (active by default)
   The image scales up slightly on mouse-over. The overflow:hidden on the
   wrapper (added by JS, see main.js) keeps the zoomed image cleanly
   clipped inside its original frame so it never spills into surrounding
   text.                                                                 */

.hv-body .hv-img-wrap{
	display:block; overflow:hidden;
	margin:28px 0;
}
.hv-body .hv-img-wrap img{
	width:100%; height:auto; display:block;
	transform:scale(1);
	transition:transform 0.6s ease;
	will-change:transform;
}
.hv-body .hv-img-wrap:hover img{ transform:scale(1.04); }

/*  EFFECT B — Scroll fade-up (commented out — uncomment to use instead)
    Each image gently fades and rises into view as it enters the
    viewport while scrolling. Pairs well with the hover-zoom above if
    you want both simultaneously — just uncomment this block AND keep
    Effect A active; the JS observer adds .hv-visible which triggers
    the fade, and hover-zoom then layers on top independently.

.hv-body .hv-img-wrap img{
	opacity:0;
	transform:translateY(18px);
	transition:opacity 0.7s ease, transform 0.7s ease;
	will-change:opacity, transform;
}
.hv-body .hv-img-wrap img.hv-visible{
	opacity:1;
	transform:translateY(0);
}
.hv-body .hv-img-wrap:hover img{ transform:scale(1.04); }
*/


.hv-gallery{
	display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
}
@media (max-width:720px){ .hv-gallery{ grid-template-columns:repeat(2,1fr);} }
.hv-gallery a{ display:block; overflow:hidden; aspect-ratio:16/9; }
.hv-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.hv-gallery a:hover img{ transform:scale(1.05); }

/* ---------- forms (booking / contact) -------------------------------------- */
.hv-form{ max-width:520px; }
.hv-form .hv-field{ margin-bottom:18px; }
.hv-form label{
	display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.1em;
	color:var(--ink-muted); margin-bottom:6px;
}
.hv-form input, .hv-form textarea{
	width:100%; border:0; border-bottom:1px solid var(--hairline);
	background:transparent; padding:8px 2px; font-family:var(--font-base);
	font-size:14px; color:var(--ink);
}
.hv-form input:focus, .hv-form textarea:focus{ outline:none; border-bottom-color:var(--accent); }
.hv-form-row{ display:flex; gap:16px; }
.hv-form-row .hv-field{ flex:1; }
.hv-btn{
	display:inline-block; background:var(--accent); color:#fff; border:0;
	padding:12px 26px; font-family:var(--font-base); font-size:12px;
	text-transform:uppercase; letter-spacing:0.1em; cursor:pointer;
}
.hv-btn:hover{ opacity:.88; }
.hv-btn-ghost{
	background:transparent; color:var(--accent); border:1px solid var(--accent);
}
.hv-form-note{ font-size:11.5px; color:var(--ink-muted); margin-top:10px; }
.hv-honeypot{ position:absolute; left:-9999px; }

/* ---------- booking: two clearly distinct options, Airbnb emphasized ---- */
.hv-booking-options{
	display:grid; grid-template-columns:1.2fr auto 1fr; gap:40px;
	align-items:start; margin-top:28px;
}
.hv-booking-options.hv-booking-options--single{ grid-template-columns:1fr; max-width:520px; }
.hv-booking-divider{ width:0.5px; background:var(--hairline); align-self:stretch; }
.hv-booking-option--primary .hv-eyebrow{ color:var(--accent); }
.hv-booking-option--primary h2.hv-h2{ font-size:24px; }
.hv-booking-option-desc{ font-size:13px; color:var(--ink-muted); margin:0 0 22px; }
.hv-btn-primary{ padding:14px 32px; font-size:12.5px; }
.hv-booking-option--secondary{ opacity:.92; }
.hv-booking-option--secondary h2.hv-h2{ font-size:17px; }
.hv-booking-option--secondary .hv-eyebrow{ color:var(--ink-muted); }
@media (max-width:860px){
	.hv-booking-options{ grid-template-columns:1fr; gap:32px; }
	.hv-booking-divider{ width:auto; height:0.5px; }
}

/* ---------- footer -------------------------------------------------------- */
footer.hv-footer{
	border-top:0.5px solid var(--hairline);
	padding:36px 0; font-size:11.5px; color:var(--ink-muted);
	display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
footer.hv-footer a{ color:var(--ink-muted); }
footer.hv-footer a:hover{ color:var(--accent); }

/* ---------- prev/next (guest guide) ---------------------------------------- */
.hv-prevnext{
	display:flex; justify-content:space-between; margin-top:48px;
	border-top:0.5px solid var(--hairline); padding-top:18px; font-size:12px;
}
.hv-prevnext a:hover{ color:var(--accent); }

/* ---------- breadcrumb / motif placement ------------------------------------ */
.hv-motif{ width:18px; height:18px; opacity:.6; }
.hv-motif svg{ width:100%; height:100%; fill:none; stroke:var(--accent); stroke-width:1.4; }