/* ─── top bar ─── */

div#top-wrap {top:0; margin:0;padding:0;height: var(--header-height); width: 100%; position: fixed; z-index: 130;}

@media screen and (max-width: 940px) {
    div#top-wrap { position: fixed; z-index: 160; }
}

@media screen and (max-width: 800px) {
    body.panel-on div#top-wrap { top: var(--panel-mob-h, 2.2rem); }
}

@media screen and (max-width: 1190px) { body { background-image: url('../images/bg/bg-1200.jpg'); } }
@media screen and (max-width: 800px) { body { background-image: url('../images/bg/bg-800-scale.jpg'); } }
@media screen and (max-width: 600px) { body { background-image: url('../images/bg/bg-600-scale.jpg'); } }

div.top { position: relative; width: 92%; max-width: 70.5rem; height: 2.6rem; margin: 0 auto; padding: 0 4%; z-index: 130; }
div.top ul.top { position: absolute; list-style: none; margin: 0; padding: 0; top: 0.5rem; right: 0; margin-right: 4%; }
div.top ul.top li { float: left; margin-left: 0.65rem; display: inline-block; }
div.top ul.top a.soc { display: block; width: 1.6rem; height: 1.6rem; }
div.top ul.top li div.login,
div.top ul.top li div.planner { position: relative; height: 1.6rem; line-height: 1.6rem; font-size: 0.9rem; }

/* language dropdown */

/*
#langSel { position: relative; width: 3.6rem; height: 1.6rem; 
    background: linear-gradient(to bottom, #525254, #525254) 100% 0 / 40% 100% no-repeat, #dbdcde; }

#langSel button.dropdown {
    position: relative; width: 100%; height: 1.6rem; line-height: 1.6rem; padding: 0 0 0 0.35rem;
    margin: 0; border: 0; background: transparent; color: inherit;
    font: inherit; text-align: left; cursor: pointer;
}

#langSel button.dropdown::after {
    content: ""; position: absolute;
    top: calc(50% - 0.177rem);
    right: 0.45rem;
    width: 0.5rem; height: 0.5rem;
    border-right: 1px solid #fff; border-bottom: 1px solid #fff;
    transform: translateY(-50%) rotate(45deg);
}
#langSel button.dropdown:focus-visible { outline: 0.15rem solid var(--brand-primary); outline-offset: 0.1rem; }

#langSel ul.langs { position: absolute; list-style: none; margin: 0; padding: 0; top: 1.6rem; left: 0; display: none; }
#langSel[data-open] ul.langs { display: block; }
html[data-no-js] #langSel:hover ul.langs,
html[data-no-js] #langSel:focus-within ul.langs { display: block; }
#langSel ul.langs li { margin: 0; }
#langSel ul.langs li a { background: #e2e3e4; display: block; color: #2c2c2c; width: 3.6rem; line-height: 1em; padding: .25em 0 .25em 0.35rem; text-decoration: none; transition: background-color 0.15s, color 0.15s; }
#langSel ul.langs li a:hover,
#langSel ul.langs li a:focus-visible { background: #323232; color: #fff; }
*/


#langSel { position: relative; width: 5rem; height: 1.6rem; color:#fff;
    background: linear-gradient(to bottom, #525254, #525254) 100% 0 / 40% 100% no-repeat, rgba(0,0,0,0.6); 
    background:   rgba(0,0,0,0.6); line-height:1;
}

#langSel button.dropdown {
    position: relative; width: 100%; height: 1.6rem; line-height: 1.6rem; padding: 0 0 0 0.35rem;
    margin: 0; border: 0; background: transparent; color: inherit;
    font: inherit; text-align: left; cursor: pointer;
}
#langSel button.dropdown img{height:1em;width:auto;margin-right:0.4em;vertical-align: bottom;border:solid 1px rgba(255,255,255,0.5);}

#langSel button.dropdown::after {
    content: ""; position: absolute;
    top: calc(50% - 0.177rem);
    right: 0.45rem;
    width: 0.5rem; height: 0.5rem;
    border-right: 1px solid #fff; border-bottom: 1px solid #fff;
    transform: translateY(-50%) rotate(45deg);
}
#langSel button.dropdown:focus-visible { outline: 0.15rem solid var(--brand-primary); outline-offset: 0.1rem; }

#langSel ul.langs { position: absolute; list-style: none; width:auto;margin: 0; padding: 0; top: 1.6rem; left: 0; display: none; }
#langSel[data-open] ul.langs { display: block; }
html[data-no-js] #langSel:hover ul.langs,
html[data-no-js] #langSel:focus-within ul.langs { display: block; }
#langSel ul.langs li { margin: 0; }
#langSel ul.langs li a { background: #e2e3e4; display: block; color: #2c2c2c; width: 6rem; line-height: 1em; padding: .25em 0 .25em 0.35rem; text-decoration: none; transition: background-color 0.15s, color 0.15s; }
#langSel ul.langs li a img{height:1em;width:auto;margin-right:0.3em;vertical-align:baseline;}
#langSel ul.langs li a:hover,
#langSel ul.langs li a:focus-visible { background: #323232; color: #fff; }

@media screen and (max-width: 940px) {
    div.top ul.top { margin-right: 0.45rem; }
    div.top ul.top li { float: left; margin: 0; padding: 0; }
    div.top ul.top li a { margin-right: 0.45rem; }
    div.top ul.top li.search { display: none; }
}

@media screen and (max-width: 600px) {
    div.top ul.top li div.user,
    div.top ul.top li div.signin { position: absolute; right: 3.8rem; top: 2.6rem; }
    div.top ul.top li div.logout { position: absolute; right: 3.8rem; top: 4.2rem; }
    div.top ul.top li div.logout a.label { background: none; }
}

/* ─── header-bg ─── */

div#header-bg { position: absolute; top: 2.6rem; left: 0; width: 100%; height: calc(var(--header-height) - 2.6rem); overflow: hidden; z-index: 11; }
div#header-bg div#header-bg-wrap { position: relative; width: 96%; height: 100%; max-width: 70.5rem; margin: 0 auto; }
div#header-bg div#header-bg-wrap div.bg { position: absolute; background: var(--header-bg-url) 0 0 no-repeat; background-size: 164.1rem 6rem; width: 164.1rem; height: 100%; margin-left: -51.3rem; top: 0; left: 0; }

@media screen and (max-width: 600px) {
    :root { --header-height: 6.4rem; }
    div#header-bg div#header-bg-wrap { width:100%; }
    div#header-bg div#header-bg-wrap div.bg { margin-left: -31.1rem;background-size: auto 100%; }
	div#header a#logo{margin-left:0;}
}

/* ─── header ─── */

div#header { position: relative; height: calc(var(--header-height) - 2.6rem); z-index: 12; margin: 0; padding: 0; }
div#header div#header-wrap { position: relative; max-width: 70.5rem; width: 96%; padding: 0; height: 100%; margin: 0 auto; }
div#header a#logo {display: block; width: 6.05rem; height: 6rem; left: 0; float: left; line-height: 0; background: var(--logo-url) 0 0 no-repeat; background-size: auto 100%;   transform-origin: 50% 0;}

@media screen and (max-width: 600px) {
    div#header a#logo { width: 3.8rem; height: 3.8rem; background-size: 3.8rem 3.8rem; }
}

/* ─── gauja header buttons (sprite-based) ─── */

div#header div.buttons { position: absolute; right: 2.9rem; top: 0.9rem; margin-right: 0; text-align: right; }

a.gauja-help,
a.gauja-map {
    position: relative;
    display: inline-block;
    text-decoration: none;
    line-height: 1em;
    text-align: left;
    background-repeat: no-repeat;
    background-image: url('../images/btn-gauja.svg');
    background-size: auto 400%;
    min-width: 5.1rem;
    height: 2.28rem;
}

a.gauja-help span.gauja,
a.gauja-map span.gauja {
    position: absolute;
    top: 0.4rem;
    left: 1.5rem;
    display: block;
    color: white;
    font-size: 0.65rem;
}

a.gauja-help span.txt,
a.gauja-map span.txt {
    padding: 1.1rem 0.65rem 0 1.5rem;
    display: block;
    font-size: 0.82rem;
}

a.gauja-help {
    background-position: 0% 0%;
}
a.gauja-help:hover {
    background-position: 0% 33.3%;
}
a.gauja-help span.txt {
    color: #00c0c0;
}

a.gauja-map {
    background-position: 0% 67%;
}
a.gauja-map:hover {
    background-position: 0% 100%;
}
a.gauja-map span.txt {
    color: #51B23E;
}

div#header div.buttons a.gauja-help { margin-right: 1.3rem; }

/* ─── primary nav (desktop) ─── */

#primary-nav > .menu { position: absolute; bottom: 0.35rem; right: 0; list-style: none; margin: 0 4% 0 0; padding: 0; }
#primary-nav li.txt { position: relative; float: left; height: 1.8rem; padding: 0 0 0.35rem 0; }
#primary-nav li.txt a { display: inline-block; text-transform: uppercase; text-decoration: none; color: black; height: 1.8rem; line-height: 1.8rem; font-size: 1rem; }
#primary-nav li.txt > a span.txt { display: inline-block; padding: 0 0.85rem; }
#primary-nav li.txt.active > a span.txt { color: var(--nav-active-color); background: var(--nav-active-bg); }
#primary-nav li.txt:hover,
#primary-nav li.txt.roll,
#primary-nav li.txt[data-open] { padding-bottom: 0; }
#primary-nav li.txt:hover > a span.txt,
#primary-nav li.txt.roll > a span.txt,
#primary-nav li.txt[data-open] > a span.txt { background: var(--nav-active-bg); color: var(--nav-active-color); padding-bottom: 0.35rem; }
#primary-nav li.search { display: none; }
#primary-nav li.buttons { display: none; }
#primary-nav li.txt span.gap { display: inline-block; width: 0.2rem; height: 1em; }

/* ─── submenus ─── */

#primary-nav li.txt ul.sub a.enter span.data-picture { position: absolute; }
#primary-nav li.txt ul.sub a.enter span.eg-ico { position: absolute; width: 1.676rem; height: 2.7rem; top: -0.4rem; left: 0; }

#primary-nav li.txt ul.sub {
    list-style: none; padding: 1rem 0 1rem 1rem; margin: 0; position: absolute;
    display: flex; flex-wrap: wrap; gap: 2rem 1rem;
    top: 2.1rem; left: 0; opacity: 0; visibility: hidden; pointer-events: none;
    background: var(--overlay-color); transition: opacity 0.4s, visibility 0s 0.4s;
}

#primary-nav li.txt[data-open] > ul.sub { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.4s, visibility 0s 0s; }

html[data-no-js] #primary-nav li.txt:hover > ul.sub,
html[data-no-js] #primary-nav li.txt:focus-within > ul.sub { opacity: 1; visibility: visible; }
html[data-reduced-motion="true"] #primary-nav li.txt ul.sub,
html[data-reduced-motion="true"] #primary-nav li.txt ul.sub[data-open] { transition: none; }

#primary-nav li.txt ul.sub li { list-style: none; padding: 0; margin: 0; display: block; min-height: 0; }

#primary-nav li.txt ul.sub a.enter {
    position: relative; display: block; width: 100%; height: 9rem; padding: 0; margin: 0;
    line-height: 1em; background-position: 50% 0; background-repeat: no-repeat; text-transform: none;
}

#primary-nav li.txt ul.sub a.enter img.image { display: block; width: 100%;height:72%; object-fit:cover;}
#primary-nav li.txt ul.sub a.enter span.bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-color); opacity: 0.4; }
#primary-nav li.txt ul.sub a.enter:hover span.bg { opacity: 0.000000001; }
#primary-nav li.txt ul.sub a.enter span.txt { position: absolute; display: block; height: 28%; width: 100%; bottom: 0; left: 0; }
#primary-nav li.txt ul.sub a.enter span.txt span { position: absolute; font-size: 0.89em; color: white; bottom: 0.35em; left: 0.35em; }

/* submenu tiles: flex layout */

#primary-nav li.txt ul.gauja li,
#primary-nav li.txt ul.things li { flex: 0 0 calc(20% - 1rem); }
#primary-nav li.txt ul.eat li,
#primary-nav li.txt ul.relax li { flex: 0 0 calc(33.33% - 1rem); }
#primary-nav li.txt ul.gauja,
#primary-nav li.txt ul.things { width: calc(11rem * 5); }
#primary-nav li.txt ul.eat,
#primary-nav li.txt ul.relax { width: calc(11rem * 3); }

/* events submenu */

#primary-nav li.txt ul.events li { flex: 0 0 calc(50% - 1rem); }
#primary-nav li.txt ul.events { width: calc(12rem * 2); }
#primary-nav li.txt ul.events a.enter span.txt { background: #bebd00; }
#primary-nav li.txt ul.events a.enter:hover span.txt { background: #9f9e0d; }
#primary-nav li.txt ul.events li:has(> #events-list) { flex: 1 0 100%; }
#primary-nav li.txt ul.events div#events-list { padding: 1rem; line-height: 1em; }
#primary-nav li.txt ul.events div#events-list div.title { text-transform: uppercase; color: #cecfd0; font-size: 1.15rem; margin: 0; padding: 0 0 .5em 0; border-bottom: 3px solid #363636; }
#primary-nav li.txt ul.events div#events-list table { width: 100%; border: 0; border-collapse: collapse; }
#primary-nav li.txt ul.events div#events-list table tr td { border-bottom: 1px solid #363636; padding: .5em 0; }
#primary-nav li.txt ul.events div#events-list table tr td a { display: inline; color: #bebd00; margin: 0; padding: 0; line-height: 1em; text-transform: none; font-size: 0.75rem; }
#primary-nav li.txt ul.events div#events-list table tr td a:hover { text-decoration: underline; }
#primary-nav li ul.events div#events-list table tr td.date { width: 4.4rem; vertical-align: middle; color: #cecfd0; text-transform: uppercase; font-size: 0.9rem; }

#primary-nav li.txt ul.eat a span.txt { background: #fbba00; }
#primary-nav li.txt ul.eat a:hover span.txt { background: #ce9a0b; }
#primary-nav li.txt ul.relax a span.txt { background: #b20e10; }
#primary-nav li.txt ul.relax a:hover span.txt { background: #a60f15; }

/* ─── hamburger ─── */

div#header button#menu-icon {
    display: none; width: 6rem; height: 6rem; cursor: pointer;
    position: absolute; right: 0; top: 0; line-height: 0;
    margin: 0; padding: 0; border: 0;
    background-color: var(--header-bg-color); background-size: 200% 100%;
    background-repeat: no-repeat; background-position: 0 0;
    background-image: url('../images/menu/btn-menu.svg');
    transition: background-position 0.4s;
}

div#header button#menu-icon.active { background-position: 100% 0; }

/* ─── responsive (≤940px) ─── */

@media screen and (max-width: 940px) {
    div#header div#header-wrap { width: 100%; }
	div#header a#logo{margin-left:1.15rem;}
    div#header div.buttons { display: none; }
    #langSel,
    div.top ul.top li.search { display: none; }
    div#header button#menu-icon { display: block; }
    #primary-nav > .menu { display: none !important; }
}

/* ─── blur overlay (desktop state) ─── */

div#blur[data-open] { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.6s, visibility 0s 0s; }
html[data-reduced-motion="true"] div#blur,
html[data-reduced-motion="true"] div#blur[data-open] { transition: none; }

/* ═══ sticky header ══════════════════════════════════════════════════════════════
   Toggled via data-header-compact on <html> (set by nav.js from scroll
   position AND direction - scrolling up restores the full header).
   Desktop only (≤940px header is relative, not fixed).
   Manual tuning expected — keep all sticky rules in this block.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- instant swaps --- */

html[data-header-compact] div.top { opacity: 0; overflow: hidden; height: 0; transform: scaleY(0); transform-origin: top; }
html[data-header-compact] div#header div.buttons { opacity: 0; pointer-events: none; }

/* --- backdrop while scrolled ---
   At the top of the page the header floats over the page background and the
   bg-header.png band (with its logo notch) is meant to be seen through. Once
   the page is scrolled, content slides under the fixed header, so it needs a
   backdrop of its own.

   The blur lives on a pseudo-element at z-index -1, i.e. BEHIND #top-wrap's
   own background. The compact header's solid white and its finely tuned
   background-color timing (0.45s / 0.25s in, 0s out) are therefore untouched -
   this layer only carries the blur, which is what the expanded state lacks.

   backdrop-filter cannot be transitioned, so the layer fades on opacity. Going
   in it is immediate: the backdrop must already be there while the header
   expands, or content shows sharp behind it. Coming out it is delayed, which
   reads as a soft release on the way back to the top. */
div#top-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(0.5rem);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease 0.15s;
}
html[data-scrolled] div#top-wrap::before {
	opacity: 1;
	transition: opacity 0.3s ease 0s;
}
/* sits behind #top-wrap's opaque white here, so don't composite a blur */
html[data-header-compact] div#top-wrap::before { backdrop-filter: none; }

/* --- container --- */
:root[data-header-compact] { --header-height : 4.7rem; }
html[data-header-compact] div#top-wrap {top:0; background:#fff; height: 4.7rem; }

/* --- header-bg (notch-critical — shrink all three layers) --- */

html[data-header-compact] div#header-bg,
html[data-header-compact] div#header-bg div#header-bg-wrap,
html[data-header-compact] div#header-bg div#header-bg-wrap div.bg { top: 0; height: 4.7rem; }

/* --- header content --- */

html[data-header-compact] div#header,
html[data-header-compact] div#header div#header-wrap { height: 4.7rem; }

/* --- logo (center-top scale) --- */

html[data-header-compact] div#header a#logo { transform: scale(0.77);}

/* --- nav centering --- */

html[data-header-compact] #primary-nav > .menu { bottom: auto; top: 1.5rem; }

/* --- transitions --- */

div.top { transition: opacity 0.3s ease 0s, height 0.3s ease 0s, transform 0.3s ease 0s; }
div#header div.buttons { transition: opacity 0.3s ease, height 0.3s ease; }
div#top-wrap{transition:background-color 0s ease 0s, height 0.3s ease 0s;}
html[data-header-compact] div#top-wrap{transition:background-color 0.45s ease 0.25s, height 0.3s ease 0s;}
div#header, div#header-wrap,
div#header-bg, div#header-bg-wrap, div.bg { transition:top 0.3s ease, height 0.3s ease; }
html[data-header-compact] div#header-bg, html[data-header-compact] div#header-bg-wrap, html[data-header-compact] div.bg { transition: top 0.3s ease,  height 0.3s ease 0.1s; }
div#header a#logo { transition: transform 0.3s ease 0.1s; }
html[data-header-compact] div#header a#logo { transition: transform 0.3s ease 0s; }

html[data-header-compact] div.top { transition: opacity 0.3s ease 0.3s, height 0.3s ease 0s, transform 0.3s ease 0.3s; }


html[data-reduced-motion="true"] div.top,
html[data-reduced-motion="true"] div#top-wrap::before,
html[data-reduced-motion="true"] div#header div.buttons,
html[data-reduced-motion="true"] div#top-wrap,
html[data-reduced-motion="true"] div#header,
html[data-reduced-motion="true"] div#header-wrap,
html[data-reduced-motion="true"] div#header-bg,
html[data-reduced-motion="true"] div#header-bg-wrap,
html[data-reduced-motion="true"] div.bg,
html[data-reduced-motion="true"] div#header a#logo { transition: none !important; }

/* ═══ /sticky header ════════════════════════════════════════════════════════════════ */

/* ═══ mobile sticky (≤940) — pin + top-bar collapse only; logo row keeps its size ═══ */

@media screen and (max-width: 940px) {
    :root[data-header-compact] { --header-height: 6rem; }
    html[data-header-compact] div#top-wrap { top: 0; height: 6rem; }
    html[data-header-compact] div#header-bg,
    html[data-header-compact] div#header-bg div#header-bg-wrap,
    html[data-header-compact] div#header-bg div#header-bg-wrap div.bg { top: 0; height: 6rem; }
    html[data-header-compact] div#header,
    html[data-header-compact] div#header div#header-wrap { height: 6rem; }
    html[data-header-compact] div#header a#logo { transform: none; }
}

@media screen and (max-width: 600px) {
    :root[data-header-compact] { --header-height: 3.8rem; }
    html[data-header-compact] div#top-wrap { top: 0; height: 3.8rem; }
    html[data-header-compact] div#header-bg,
    html[data-header-compact] div#header-bg div#header-bg-wrap,
    html[data-header-compact] div#header-bg div#header-bg-wrap div.bg { top: 0; height: 3.8rem; }
    html[data-header-compact] div#header,
    html[data-header-compact] div#header div#header-wrap { height: 3.8rem; }
}

/* ═══ /mobile sticky ════════════════════════════════════════════════════════════════ */

/* ===== Header illustration / fade slider ===== */

.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
    z-index: 1;
}

.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
}

.rslides li:first-child {
    position: relative;
    display: block;
    float: left;
}

.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
}

#header_illustration {
    margin-top: -8.6rem;
    position: relative;
    overflow: hidden;
    height: 37.6rem;
}

.hi_image {
    width: 100%;
    height: 37.6rem;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

#ti_badge {
    position: absolute;
    top: 28.2rem;
    right: 0.65rem;
    z-index: 2;
}

.ti_badge_text {
    background-image: url('../../images/eg-header-right-manors-slogan.svg');
    width: 19.2rem;
    height: 6.4rem;
    float: left;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.nosvg .ti_badge_text {
    background-image: url('../../images/eg-header-right-manors-slogan.png');
}

#scroll_arrow {
    background-image: url('../../images/eg-header-arrow.svg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 3.6rem 3.6rem;
    width: 3.6rem;
    height: 3.6rem;
    float: left;
    position: absolute;
    top: 30.1rem;
    left: 3.2rem;
    z-index: 2;
    -webkit-animation-name: up_and_down;
    -o-animation-name: up_and_down;
    animation-name: up_and_down;
    -webkit-animation-duration: 4s;
    -o-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes up_and_down {
    0%   { top: 30.1rem; }
    50%  { top: 31.4rem; }
    100% { top: 30.1rem; }
}

@-o-keyframes up_and_down {
    0%   { top: 30.1rem; }
    50%  { top: 31.4rem; }
    100% { top: 30.1rem; }
}

@keyframes up_and_down {
    0%   { top: 30.1rem; }
    50%  { top: 31.4rem; }
    100% { top: 30.1rem; }
}

.nosvg #scroll_arrow {
    background-image: url('../../images/eg-header-arrow.png');
}