@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(images/fonts/heebo-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(images/fonts/heebo-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(images/fonts/heebo-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(images/fonts/heebo-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(images/fonts/heebo-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(images/fonts/heebo-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(images/fonts/heebo-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(images/fonts/heebo-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(images/fonts/lato-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(images/fonts/lato-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(images/fonts/playfair-display-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(images/fonts/playfair-display-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(images/fonts/playfair-display-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(images/fonts/playfair-display-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(images/fonts/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(images/fonts/poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(images/fonts/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(images/fonts/poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(images/fonts/roboto-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(images/fonts/roboto-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Medves Hotel static rebuild. Own CSS written from measurements of the
 * rendered live site; no theme stylesheet is copied.
 * Measured live values: gold #ad9271, near-black #181818, body grey #666,
 * border #e9ebef, panel grey #f8f8f8. Body type is Arial (the theme sets Arial
 * for body and the home page headings); inner pages use Lato, Playfair Display,
 * Roboto, Heebo and Poppins, as the live pages do.
 */
:root {
  --gold: #ad9271;
  --ink: #181818;
  --text: #666666;
  --line: #e9ebef;
  --panel: #f8f8f8;
  --orange: #e98f50;
  --shadow: 0 5px 30px rgba(1, 1, 1, 0.1);
  --sans: Arial, "Liberation Sans", Helvetica, sans-serif;
  --wrapw: 1140px;
}

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

html { background: #fff; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: break-word;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrapw); margin: 0 auto; }
.gold { color: var(--gold); }

/* ---------- header ---------- */
.site-header { position: relative; z-index: 10; background: #fff; }
.topbar, .headbar {
  position: relative;
  background-image: url(images/DSC05331-scaled.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.topbar::before, .headbar::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.topbar > *, .headbar > * { position: relative; }
.topbar {
  height: 42px;
  background-color: #bebebe;
  background-position: 0 -477px;
  background-blend-mode: luminosity;
  border-bottom: 1px solid rgba(225, 225, 225, 0.08);
}
.topbar::before { background: linear-gradient(180deg, #fff 0%, #616060 100%); opacity: .6; }
.topbar-inner { height: 100%; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; }
.headbar {
  height: 134px;
  background-color: rgba(0, 0, 0, 0.37);
  background-position: 0 -519px;
  background-blend-mode: multiply;
}
.headbar::before { background: linear-gradient(180deg, #383838 0%, rgba(255,255,255,.26) 100%); opacity: .9; }
.headbar-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; }

.brand {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 161px; height: 127px; margin-left: 10px; padding-top: 44px;
  color: #000; text-transform: uppercase; line-height: 1;
}
/* A logo a szalloda SAJAT feltoltese (wp-content/uploads), nem a tema eszkoze.
   CSS-bol jon, mert a stiluslap a dist gyokereben all, tehat ugyanaz az utvonal
   mukodik a magyar es az angol oldalrol is -- igy a {{root}} tokent nem kell
   megduplazni a layoutban, ahol a build szandekosan egyszer engedi. */
.brand { background: url(images/medves-logo.png) no-repeat center 18px / 118px auto; }
/* The logo is a link to the home page. The anchor is absolutely positioned over the whole brand
   box, because the box has 44px of top padding and the logo image is drawn INSIDE that padding
   (background position: center 18px). A plain block-level anchor only covered 83 of the 127
   pixels, measured, so the top of the mark was not clickable. */
.brand { position: relative; }
.brand-link { position: absolute; inset: 0; }
.brand-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tb-tel, .tb-addr { color: inherit; }
.tb-tel { text-decoration: none; }
.tb-tel:hover, .tb-tel:focus-visible { text-decoration: underline; }
.contact-tel a { color: inherit; text-decoration: none; }
.contact-tel a:hover, .contact-tel a:focus-visible { text-decoration: underline; }
.brand-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.brand-name { font-family: "Heebo", var(--sans); font-weight: 600; font-size: 36px; letter-spacing: 3px; margin-right: -3px; }
.brand-sub { font-family: "Heebo", var(--sans); font-weight: 300; font-size: 24px; letter-spacing: 0; margin-top: 2px; }

/* The switch held ONE link while the site had two languages, so nothing separated the entries.
   With four it offers three, and they ran together: "Magyar English Slovencina". A thin rule
   between them, not a gap alone, so the group still reads as one control. */
.lang-switch { font-size: 12px; letter-spacing: .6px; line-height: 19.2px; display: flex; align-items: center; }
.lang-switch a + a { border-left: 1px solid rgba(37, 36, 37, .28); margin-left: 8px; padding-left: 12px; }
.lang-switch a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px;
  color: var(--ink); text-decoration: none; font-weight: 700;
}
.lang-switch a:hover { color: #fff; }
.lang-switch a:focus-visible, .nav a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

nav { margin-right: -10px; }
.nav { display: flex; align-items: center; }
.nav a, .nav-pending {
  display: block; padding-left: 40px; padding-right: 0;
  font-size: 12px; letter-spacing: 2.4px; line-height: 19.2px; text-transform: uppercase;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.nav li:last-child a, .nav li:last-child .nav-pending { padding-right: 10px; }
.nav a:hover { color: var(--gold); }
.nav a[aria-current="page"] { color: var(--gold); }
.nav-pending { color: #fff; }

.menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.menu-button { display: none; }

/* ---------- common ---------- */
main { display: block; }
.panel { background: #fff; box-shadow: var(--shadow); }

footer { padding: 0 0 20px; background: #fff; }
.footer-inner { border-top: 1px solid var(--line); margin-top: 0; }
.footer-inner p { padding: 10px; font-size: 16px; line-height: 25.6px; color: #666; }

/* ---------- home ---------- */
.hero { position: relative; height: 726px; background: #000; overflow: hidden; margin-top: 0; }
/* Az angol kezdolapon a hero URES: nincs angol cim-szoveg az elo oldalon, es
   kitalalni nem szabad. Egy 700 pixeles fekete sav viszont nem minimalista,
   hanem befejezetlen. Annyi marad belole, amennyire a kartyak ralognak.
   Az `aria-hidden` a toredekbol jon, tehat a szabaly magatol all be, ha egyszer
   lesz angol hero-szoveg. */
.hero[aria-hidden="true"] { min-height: 0; height: 260px; }

.hero-lines { position: absolute; inset: 0 52px; background:
  linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 25% 100% repeat-x,
  linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 100% 0 / 1px 100% no-repeat; }

.features { position: relative; z-index: 2; margin-top: -60px; padding-bottom: 80px; }
.card-row { display: grid; grid-template-columns: repeat(3, 360px); justify-content: space-between; }
.features .card-row { max-width: 1140px; }
.card {
  background: #fff; box-shadow: var(--shadow); text-align: center;
  min-height: 299px; padding: 78px 50px 20px;
}
.card h1, .card h2 { font-size: 24px; line-height: 28.8px; font-weight: 600; color: var(--ink); margin: 8px 0 16px; }
.card p { font-size: 16px; line-height: 25.6px; font-weight: 300; color: var(--text); margin-bottom: 10px; }
.card:nth-child(2) { padding-top: 68px; }
.card:nth-child(3) { padding-top: 73px; }
.card-dark { background: var(--ink); }
.card-dark h2 { color: #fff; }
.card-dark p { color: #fff; }

.newsband { position: relative; height: 422px; padding-top: 100px; }
.newsband-bg {
  position: absolute; inset: 0;
  background: url(images/DSC05225-scaled.jpg) center center / auto no-repeat;
}
.newsband-bg::after { content: ""; position: absolute; inset: 0; background: var(--ink); opacity: .8; }
.newsband > .wrap { position: relative; }
.eyebrow { font-size: 18px; line-height: 21.6px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); }
.newsband .eyebrow { text-align: center; margin-bottom: 20px; }
.band-title { font-size: 32px; line-height: 41.6px; font-weight: 600; letter-spacing: .32px; text-transform: uppercase; color: #fff; text-align: center; margin-bottom: 10px; }
.band-lead { font-size: 16px; line-height: 25.6px; color: #fff; text-align: center; }
.news-row { margin-top: 20px; }
.news-card { background: #fff; box-shadow: var(--shadow); text-align: center; min-height: 462px; }
.news-card img { width: 100%; height: 235px; object-fit: cover; }
.news-body { padding: 35px 20px 0; }
.news-body h2 { font-size: 24px; line-height: 28.8px; font-weight: 600; color: var(--ink); }
.news-body p { font-size: 16px; line-height: 25.6px; font-weight: 300; margin-top: 16px; }

.about { position: relative; margin-top: 249px; padding-top: 110px; padding-bottom: 90px; }
.about-inner { position: relative; display: grid; grid-template-columns: 570px 570px; min-height: 509px; }
.about-text { padding: 0 70px 0 10px; }
.about-text .eyebrow { margin-bottom: 10px; }
.about-title { font-size: 42px; line-height: 54.6px; font-weight: 600; letter-spacing: .42px; text-transform: uppercase; color: var(--ink); margin-bottom: 20px; }
.about-quote { font-size: 16px; line-height: 25.6px; padding-left: 6px; width: 468px; margin-top: 7px; }
.about-quote strong { font-weight: 700; color: var(--text); }
.about-source { font-size: 18px; line-height: 21.6px; color: var(--ink); margin-top: 33px; padding-top: 0; }
.about-source .gold { color: var(--gold); }
.about-photo { padding: 0 10px; }
.about-photo img { width: 550px; height: 412px; object-fit: cover; }
.about-review {
  position: absolute; left: 305px; top: 280px; width: 393px; height: 208px;
  background: #fff; box-shadow: var(--shadow); padding: 25px 25px 0 25px;
}
.review-text { position: relative; margin-left: 0; padding: 14px 0 0 30px; border-left: 2px solid var(--gold); font-size: 16px; line-height: 26px; color: var(--text); }
.review-name { margin-top: 20px; font-size: 18px; line-height: 21.6px; font-weight: 400; color: var(--gold); }

.logos { margin-top: 0; }
.logos .wrap { min-height: 156px; }
.image-slot { display: none; }

.cta { margin-top: 0; padding: 0 55px 74px; }
.cta-box { max-width: 1170px; margin: 0 auto; background: var(--ink); padding: 60px 25px 40px; min-height: 204px; }
.cta-box h2 { font-size: 32px; line-height: 38.4px; font-weight: 600; color: #fff; margin-bottom: 20px; }
.cta-box p { font-size: 16px; line-height: 25.6px; color: #e1e1e1; }
.cta + * { }

/* ---------- inner pages: shared ---------- */
.eyebrow-lato, .title-lato { font-family: "Lato", var(--sans); font-weight: 700; }
.eyebrow-lato { font-size: 18px; line-height: 21.6px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.title-lato { font-size: 42px; line-height: 54.6px; letter-spacing: .42px; text-transform: uppercase; color: var(--ink); margin-bottom: 20px; }
.panel p { font-size: 16px; line-height: 26px; color: var(--text); }

.accordions { padding-bottom: 50px; }
.acc-grid { display: grid; grid-template-columns: 530px 530px; justify-content: space-between; }
.acc { background: #fff; box-shadow: var(--shadow); margin-bottom: 25px; scroll-margin-top: 24px; }
.acc summary {
  position: relative; display: block; list-style: none; cursor: pointer;
  height: 69px; padding: 0 70px 0 40px; line-height: 69px;
  font-family: Helvetica, var(--sans); font-size: 16px; color: #3a3a4a;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; position: absolute; right: 32px; top: 50%; width: 9px; height: 9px;
  border-right: 3px solid var(--orange); border-bottom: 3px solid var(--orange);
  transform: translateY(-75%) rotate(45deg); transition: transform .2s;
}
.acc[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.acc summary:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.acc-body { padding: 10px 30px 30px; text-align: center; }
.acc-body p { font-size: 16px; line-height: 27.2px; color: #787878; }
.acc-body p + p { margin-top: 0; }
.acc-body img { margin: 0 auto; }

/* hotel */
.hotel-intro { padding-top: 21px; }
.intro-inner { position: relative; }
.hotel-intro .intro-inner { display: grid; grid-template-columns: 569px 571px; min-height: 700px; }
.hotel-photo img { width: 569px; height: 700px; object-fit: cover; }
.hotel-side { position: relative; padding-top: 40px; }
.hotel-side .panel { margin-left: -60px; width: 569px; padding: 60px; min-height: 387px; position: relative; }
.stats { display: grid; grid-template-columns: 242px 242px; margin: 60px 0 0 0; }
.stat { text-align: center; }
.stat-plus { font-family: Heebo, var(--sans); font-weight: 600; font-size: 32px; line-height: 54.4px; color: var(--ink); }
.stat-label { font-family: Heebo, var(--sans); font-weight: 300; font-size: 16px; line-height: 27.2px; color: var(--text); }
.hotel-intro + .accordions { padding-top: 83px; }

/* medves */
.medves-intro { padding-top: 61px; }
.medves-intro .intro-inner { min-height: 604px; }
.medves-panel { position: relative; z-index: 2; margin-left: 60px; width: 545px; padding: 40px; min-height: 451px; }
.medves-photo { position: absolute; left: 545px; top: 20px; }
.medves-photo img { width: 479px; height: 497px; object-fit: cover; }
.medves-intro + .accordions { padding-top: 0; }
.acc-col-offset { padding-top: 47px; }
.medves-acc .acc-col { }

/* gallery */
.gallery { padding: 80px 0 50px; }
.gallery .wrap { padding: 0 15px; }
.gallery-filter { display: flex; justify-content: center; margin-bottom: 45px; }
.gallery-filter li { margin: 0 5px; }
.gf {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: Heebo, var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 2.4px; line-height: 21.6px;
  text-transform: uppercase; color: #343333; padding: 15px 20px 5px; height: 52px; margin: 0 0;
}
.gf.is-active { background: #916c3d; color: #fff; }
.gf:focus-visible { outline: 2px solid #916c3d; outline-offset: 2px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gi[hidden] { display: none; }
.gi figure { margin: 0; position: relative; height: 300px; overflow: hidden; }
.gi img { width: 100%; height: 100%; object-fit: cover; }
.gi figcaption {
  position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%); opacity: 0; transition: opacity .2s;
  font-family: Heebo, var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 2px; line-height: 14px;
  background: #916c3d; color: #fff; padding: 5px 10px 5px 15px; text-align: center; max-width: 90%;
}
.gi figure:hover figcaption, .gi figure:focus-within figcaption { opacity: 1; }

/* IMAGE VIEWER, and it is CSS only: no script, no library, no second <img>.
   Clicking a tile points the URL at that tile's own id, and `:target` turns the SAME list item
   into a full-screen overlay. Reusing the existing image matters twice over: the page gains no
   second copy of 29 photos, and the content checker still counts 29 images on this page, not 58.
   The close control carries no text -- the cross is drawn in CSS -- so the page's words and
   accents are unchanged too. */
.gi-open { display: block; color: inherit; text-decoration: none; }
.gi-close { display: none; }

.gi:target {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(0, 0, 0, .92);
  display: grid; place-items: center;
  padding: 24px;
}
.gi:target .gi-open { width: 100%; max-width: 1400px; cursor: zoom-out; }
.gi:target figure { height: auto; max-height: 86vh; overflow: visible; }
.gi:target img { width: auto; max-width: 100%; max-height: 86vh; height: auto; object-fit: contain; margin: 0 auto; display: block; }
.gi:target figcaption {
  /* transform:none is load-bearing: the grid caption is centred with translateX(-50%), which in
     the overlay would slide it half its own width off the left edge. Measured: x = -602. */
  position: static; transform: none; max-width: none;
  opacity: 1; background: none; color: #e8e8e8;
  text-align: center; padding: 14px 0 0;
}
.gi:target .gi-close {
  display: block; position: fixed; top: 18px; right: 22px;
  width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%;
}
.gi:target .gi-close::before,
.gi:target .gi-close::after {
  content: ""; position: absolute; left: 13px; top: 21px; width: 17px; height: 1.5px; background: #fff;
}
.gi:target .gi-close::before { transform: rotate(45deg); }
.gi:target .gi-close::after { transform: rotate(-45deg); }
.gi:target .gi-close:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.gi-open:focus-visible, .gi-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* kiknek */
/* The section is full width so the yellow frame can bleed off the right-hand edge of the screen
   and be cut there (overflow-x: clip) instead of widening the page. The content sits in .wrap,
   like every other page, so it lines up with the header and the footer. */
.kiknek { overflow-x: clip; padding-top: 123px; padding-bottom: 194px; }
.kiknek-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 40px; }
.kiknek-text { max-width: 545px; }
.kiknek h1 { font-family: Roboto, var(--sans); font-weight: 600; font-size: 48px; line-height: 62.4px; color: #333; margin-bottom: 10px; }
.kiknek p { font-size: 16px; line-height: 27.2px; color: #444; }
.kiknek h2 { font-family: Roboto, var(--sans); font-weight: 600; font-size: 24px; line-height: 28.8px; color: #333; padding-left: 87px; margin-top: 0; }
.kiknek p + h2 { margin-top: 20px; }
.kiknek h2 + h2 { margin-top: 73px; }
.kiknek-photo { margin: 53px 0 0; position: relative; align-self: start; }
.kiknek-photo img { width: 100%; aspect-ratio: 602 / 451; object-fit: cover; }
/* Frame geometry is the original 53/16/640/400 px on a 602 x 451 photo, written as percentages
   of the photo so it keeps its shape at every width. */
.kiknek-photo::after { content: ""; position: absolute; left: 8.8%; top: 3.55%; width: 106.3%; height: 88.7%; border: 30px solid #fcc236; border-right: 0; }

/* contact */
.contact { padding: 45px 0 50px; }
.contact-inner { display: block; }
.contact-col { width: 490px; flex: none; }
/* Ha nincs urlap-kartya mellette (D-884: az urlap lekerult), a hasab ne maradjon
   feloldalas egy space-between elrendezesben. A :only-child magatol all be, tehat
   nem kell karbantartani, ha az urlap valaha visszajon. */
.contact-inner > .contact-col:only-child { width: 100%; max-width: 760px; flex: 1 1 auto; }
.eyebrow-ui { font-family: Helvetica, var(--sans); font-size: 14px; line-height: 16.8px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--orange); margin: 8px 0 10px; }
.title-playfair { font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: 42px; line-height: 42px; letter-spacing: .42px; color: #3a3a4a; margin-bottom: 20px; }
.contact-mail, .contact-tel { font-size: 16px; line-height: 26px; color: #787878; }
/* The envelope sits to the LEFT of the e-mail address (D-901). It is a background image, not an
   element and not an icon font: that way the fragment gains no tag, the page gains no request,
   and the mark scales with the text. aria-hidden by construction, since a background image is
   never announced. */
.contact-mail {
  padding-left: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23c9a227' stroke-width='1.6'%3E%3Crect x='1.5' y='4' width='17' height='12' rx='1.5'/%3E%3Cpath d='M1.8 5 10 11 18.2 5'/%3E%3C/svg%3E") no-repeat left 0 top 4px / 20px 20px;
}
.contact-mail a { color: var(--gold); text-decoration: none; }
/* The 404 page's two explanatory lines used .contact-mail and .contact-tel purely as text
   styling. That stopped being harmless when .contact-mail gained the envelope (D-901): the page
   drew an envelope beside "Lehet, hogy elírás történt a címben". These two classes mean
   "an e-mail address" and "a phone number" now, so the prose has its own. */
.nf-lead { font-size: 16px; line-height: 26px; color: #787878; }
.nf-en { color: #9a9a9a; font-weight: 400; }
/* The map sits under the address block. 16:9 on a phone, a fixed 320px on a desktop, because the
   contact column is narrow and a tall map would push the footer off the first screen. */
.map { margin-top: 26px; }
.map iframe { display: block; width: 100%; height: 320px; border: 0; }
@media (max-width: 860px) { .map iframe { height: 240px; } }
.place { margin-top: 35px; padding-left: 80px; }
.place h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: 24px; line-height: 28.8px; color: #3a3a4a; padding: 5px 0 0 10px; }
.place p { font-family: Helvetica, var(--sans); font-weight: 300; font-size: 15px; line-height: 25.5px; color: #787878; margin: 5px 0 0 10px; }

/* news */
.news { padding: 26px 0 50px; }
.news-inner { display: grid; grid-template-columns: 710px 360px; justify-content: space-between; padding: 0 10px; max-width: 1140px; }
.post { margin-bottom: 40px; }
.post-media { position: relative; }
.post-media img { width: 710px; height: 488px; object-fit: cover; border-radius: 8px; }
.post-cat {
  position: absolute; left: 0; bottom: 0; height: 39px; padding: 0 20px; line-height: 40px;
  background: #fff; border-top-right-radius: 8px;
  font-family: Heebo, var(--sans); font-size: 14px; letter-spacing: .48px; color: #7a7a7a;
}
.post-title { font-family: Poppins, var(--sans); font-weight: 500; font-size: 18px; line-height: 23.4px; color: #252425; margin-top: 22px; }
.post-excerpt { font-family: Heebo, var(--sans); font-weight: 300; font-size: 16px; line-height: 22.4px; color: #7a7a7a; margin-top: 7px; }
.post-excerpt + * { }
.post + .post { margin-top: 0; }
.news-side .side-card { border-radius: 8px; padding: 35px 40px; margin-bottom: 40px; }
.side-recent { background: #fff; box-shadow: 0 5px 20px rgba(1,1,1,.1); }
.side-contact { background: var(--panel); padding: 35px 35px 28px !important; }
.news-side h2 { font-family: Poppins, var(--sans); font-weight: 500; font-size: 20px; line-height: 24px; color: #252425; margin-bottom: 10px; }
.recent-item { line-height: 1; margin-top: 0; padding-bottom: 1.4px; }
.recent-title { display: block; font-family: Poppins, var(--sans); font-size: 16px; line-height: 27.2px; color: #252425; }
.recent-date { display: block; font-family: Heebo, var(--sans); font-size: 12px; line-height: 20.4px; color: #96989b; margin-top: 3px; }
.side-lead { font-size: 16px; line-height: 27.2px; color: #7a7a7a; }
.side-line { font-family: Heebo, var(--sans); font-weight: 300; font-size: 16px; line-height: 27.2px; color: #252425; padding: 0 0 5px 33px; }

/* ---------- buttons and copied live strings ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-transform: uppercase; color: #fff; }
.btn span { display: block; font-size: 14px; line-height: 14px; letter-spacing: 1.4px; }
.btn-dark { background: var(--ink); border: 1px solid var(--ink); padding: 18px 32px; }
.btn-dark:hover { background: #000; }
.btn-outline { border: 1px solid #fff; padding: 20px 40px; background: transparent; }
.btn-outline:hover { background: rgba(255,255,255,.12); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.topbar-info { display: flex; align-items: center; margin-right: auto; font-size: 12px; letter-spacing: .6px; line-height: 19.2px; color: var(--ink); }
.topbar-info strong { font-weight: 400; }
.tb-addr { padding-left: 20px; }
.tb-tel { padding-left: 41px; }

.hero-content { position: relative; text-align: center; padding: 176px 20px 0; }
.hero-title { font-size: 72px; line-height: 72px; font-weight: 600; letter-spacing: 7.2px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.hero-sub { font-size: 30px; line-height: 30px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #fff; margin-bottom: 20px; }
.hero-content .btn { margin-top: 40px; }
.hero-content .btn span { font-size: 16px; line-height: 16px; letter-spacing: 1.6px; }

.news-body .btn { margin-top: 30px; }
.about-btn { margin-top: 26px; }
.cta-box { position: relative; }
.cta-btn { position: absolute; right: 25px; top: 84px; padding: 20px 40px; }

.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; }
.copyright { text-align: right; }

.stat-num { margin-right: 10px; font-variant-numeric: tabular-nums; }

.readmore { display: inline-block; margin-top: 32px; font-family: Poppins, var(--sans); font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: 1.4px; text-transform: uppercase; color: #fcbc45; text-decoration: none; }
.readmore:hover { text-decoration: underline; }
.load-more { margin: 0 0 0 231px; }
.load-more span { display: inline-block; background: #fcbc45; border-radius: 4px; padding: 20px 46px; font-family: Heebo, var(--sans); font-weight: 500; font-size: 16px; line-height: 16px; letter-spacing: 1.6px; text-transform: uppercase; color: #252425; }

.contact-inner { display: flex; align-items: flex-start; justify-content: space-between; }
.form-card { width: 550px; margin-top: -24px; padding: 40px; background: #fff; box-shadow: var(--shadow); }
.form-title { font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: 32px; line-height: 38.4px; letter-spacing: .32px; color: #3a3a4a; margin-bottom: 30px; }
.form-grid { display: grid; grid-template-columns: 220px 220px; justify-content: space-between; }
.field { margin-bottom: 40px; }
.field-wide { grid-column: 1 / -1; }
.field-label { font-family: Helvetica, var(--sans); font-weight: 600; font-size: 12px; line-height: 18px; letter-spacing: 3px; text-transform: uppercase; color: #3a3a4a; margin-bottom: 20px; }
.req { color: #d60000; margin-left: 1px; }
.field-box { height: 50px; padding: 0 30px; border: 1px solid var(--line); font-family: Helvetica, var(--sans); font-size: 14px; line-height: 48px; color: #787878; }
.field-area { height: 176px; padding-top: 14px; line-height: 24px; font-size: 16px; }
.form-submit { margin-top: -12px; }
.form-submit span { display: inline-block; background: var(--orange); padding: 22px 25px 22px 45px; font-family: Heebo, var(--sans); font-size: 14px; line-height: 17px; letter-spacing: 1.4px; text-transform: uppercase; color: #fff; }

/* ---------- tablet ---------- */
/* 1139, not 1100, and the number is not a taste: the shared container's max-width is 1140px, and
   the desktop layout is built from fixed columns that add up to exactly that (570+570 on the home
   page, 569 for the hotel panel). Between 1101 and 1139 the viewport is narrower than the layout,
   so the page scrolled sideways by up to 39px on /index and /a-hotel. The intermediate layout in
   this block already handles narrower screens; its breakpoint was simply 39px too low. */
@media (max-width: 1139px) {
  .wrap { padding-left: 15px; padding-right: 15px; }
  /* The news page's own fixed columns, 710+360, overflow anywhere under 1090. They are fluid from
     here down, and the phone block below still turns the pair into one column. */
  .news-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); column-gap: 30px; }
  /* minmax(0, 1fr), not 1fr: a grid track will not shrink below its content's minimum
     width, and a long German compound ('Naturlandschaft') made the middle card 0.75px
     wider than its third at exactly 861px. One width, one language, one pixel of sideways
     scroll -- measured, not guessed. */
  .card-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .hotel-intro .intro-inner, .about-inner { grid-template-columns: 1fr 1fr; }
  .hotel-photo img { width: 100%; }
  .hotel-side .panel { width: auto; }
  .acc-grid { grid-template-columns: 1fr 1fr; gap: 0 30px; }
  .nav a, .nav-pending { padding-left: 24px; }
  .form-card { width: 48%; }
  .contact-col { width: 46%; }
}

/* ---------- phone ---------- */
@media (max-width: 860px) {
  .topbar-info { display: none; }
  .hero-content { padding-top: 70px; }
  .hero-title { font-size: 36px; line-height: 40px; letter-spacing: 3px; }
  .hero-sub { font-size: 20px; line-height: 26px; }
  .hero-content .btn { margin-top: 24px; }
  .cta-btn { position: static; margin-top: 24px; }
  .footer-inner { flex-direction: column; }
  .copyright { text-align: left; }
  .load-more { margin: 0 0 30px; }
  .contact-inner { display: block; }
  .form-card { width: auto; margin-top: 36px; padding: 28px 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .topbar { height: 40px; background-position: 60% 50%; }
  .headbar { background-position: 60% 55%; }
  .headbar { height: auto; min-height: 100px; }
  .headbar-inner { flex-wrap: wrap; padding-top: 0; }
  .brand { margin-left: 0; width: 140px; height: 110px; padding-top: 30px; }
  .brand-name { font-size: 30px; }
  .brand-sub { font-size: 20px; }
  .menu-button {
    display: flex; align-items: center; justify-content: center; width: 48px; height: 44px;
    border: 1px solid rgba(255,255,255,.7); cursor: pointer;
  }
  .menu-button span, .menu-button span::before, .menu-button span::after {
    display: block; width: 22px; height: 2px; background: #fff; content: ""; position: relative;
  }
  .menu-button span::before { position: absolute; top: -7px; left: 0; }
  .menu-button span::after { position: absolute; top: 7px; left: 0; }
  .menu-toggle:focus-visible + .menu-button { outline: 2px solid #fff; outline-offset: 3px; }
  nav { display: none; width: 100%; margin: 0; background: rgba(24,24,24,.92); }
  .menu-toggle:checked ~ nav { display: block; }
  .nav { flex-direction: column; align-items: stretch; padding: 8px 0; }
  .nav a, .nav-pending { padding: 14px 16px !important; }

  .hero { height: 380px; }
  .hero-lines { inset: 0 16px; }
  .features { margin-top: -50px; padding: 0 0 40px; }
  .features .card-row, .news-row, .card-row { grid-template-columns: 1fr; gap: 30px; }
  .card { min-height: 0; padding: 40px 24px; }
  .card:nth-child(n) { padding-top: 40px; }
  .newsband { height: auto; padding: 60px 0 0; }
  .newsband-bg { bottom: 0; height: 330px; }
  .news-row { margin-top: 20px; padding-bottom: 0; }
  .news-card { min-height: 0; padding-bottom: 40px; }
  .about { margin-top: 60px; padding-top: 0; }
  .about-inner { grid-template-columns: 1fr; min-height: 0; }
  .about-title { font-size: 32px; line-height: 40px; }
  .about-quote { width: auto; }
  .about-photo { padding: 20px 10px; }
  .about-photo img { width: 100%; height: auto; }
  .about-review { position: relative; left: auto; top: auto; width: auto; height: auto; margin: 0 10px 20px; padding-bottom: 25px; }
  .cta { padding: 0 16px; }
  .logos .wrap { min-height: 40px; }

  .hotel-intro { padding-top: 16px; }
  .hotel-intro .intro-inner, .medves-intro .intro-inner { display: block; min-height: 0; }
  .hotel-photo img { height: auto; aspect-ratio: 569 / 700; }
  .hotel-side { padding-top: 0; }
  .hotel-side .panel { margin: -40px 12px 0 12px; padding: 30px 24px; min-height: 0; width: auto; }
  .stats { margin: 30px 0 0; grid-template-columns: 1fr 1fr; }
  .title-lato { font-size: 26px; line-height: 34px; }
  .acc-grid { grid-template-columns: 1fr; }
  .acc-col-offset { padding-top: 0; }
  .hotel-intro + .accordions { padding-top: 40px; }
  .medves-intro { padding-top: 24px; }
  .medves-photo { position: static; }
  .medves-photo img { width: 100%; height: auto; }
  .medves-panel { margin: -30px 12px 30px; width: auto; padding: 28px 24px; min-height: 0; }
  .medves-intro + .accordions { padding-top: 0; }

  .gallery { padding-top: 24px; }
  .gallery-filter { flex-wrap: wrap; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gi figure { height: 160px; }

  .kiknek { padding: 40px 0 60px; }
  .kiknek-grid { display: block; }
  .kiknek-text { max-width: none; }
  .kiknek h1 { font-size: 34px; line-height: 42px; }
  .kiknek h2 + h2 { margin-top: 24px; }
  .kiknek-photo { margin: 30px 0 0; }
  .kiknek-photo::after { display: none; }

  .contact { padding-top: 30px; }
  .contact-col { width: auto; }
  .title-playfair { font-size: 32px; line-height: 34px; }
  .place { padding-left: 0; }

  .news-inner { display: block; padding: 0 16px; }
  .post-media img { width: 100%; height: auto; aspect-ratio: 710 / 488; }
  .post { margin-bottom: 30px; }
  .news-side .side-card { margin-bottom: 24px; }
}

/* English home page: same blocks as the Hungarian home, without the about section */
.cta-en { margin-top: 318px; padding-bottom: 40px; }
.en-note { padding: 0 0 44px; }
.en-note p { padding: 0 10px; font-size: 16px; line-height: 25.6px; color: var(--text); }
@media (max-width: 860px) { .cta-en { margin-top: 40px; } }

/* news: the full text opens in place (checkbox toggle); the short title and excerpt give way once it is open */
.post-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.post { position: relative; }
.readmore { cursor: pointer; }
.post-toggle:focus-visible ~ .readmore { outline: 2px solid #fcbc45; outline-offset: 3px; }
.post-body { display: none; }
.post-body h2 { font-family: Poppins, var(--sans); font-weight: 500; font-size: 18px; line-height: 23.4px; color: #252425; margin: 22px 0 7px; }
.post-body p { font-family: Heebo, var(--sans); font-weight: 300; font-size: 16px; line-height: 22.4px; color: #7a7a7a; margin-bottom: 10px; }
.post-toggle:checked ~ .post-title,
.post-toggle:checked ~ .post-excerpt { display: none; }
.post-toggle:checked ~ .post-body { display: block; }

/* between 1101 and 1159px the container is the full viewport and has no side padding, so the
   nav's -10px right margin pokes out of the page */
@media (min-width: 1101px) and (max-width: 1159px) { nav { margin-right: 0; } }

/* Motion: opacity and transform only; disabled under prefers-reduced-motion. Content is visible without JS. */

@keyframes motion-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

html.js .motion-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

html.js .motion-reveal.is-in {
  opacity: 1;
  transform: none;
}

html.js .hero-content {
  animation: motion-fade-in 1.2s ease-out 1 both;
}

html.js .topbar,
html.js .headbar {
  animation: motion-fade-in 0.6s ease-out 1 both;
}

html.js .acc[open] > :not(summary) {
  animation: motion-fade-in 0.35s ease 1 both;
}

@media (prefers-reduced-motion: reduce) {
  html.js .motion-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  html.js .hero-content,
  html.js .topbar,
  html.js .headbar,
  html.js .acc[open] > :not(summary) {
    animation: none;
    opacity: 1;
  }
}

@media print {
  html.js .motion-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  html.js .hero-content,
  html.js .topbar,
  html.js .headbar,
  html.js .acc[open] > :not(summary) {
    animation: none;
    opacity: 1;
  }
}