/* Theme "classic" – look of the original site (loaded after style.css).
   Colours are the original ones, gold only slightly adjusted where needed for
   readable contrast (Lighthouse accessibility). */

:root {
  --c-teal: #4c5d5b;
  --c-gold: #a5957a;
  --c-gold-on-white: #9d8d72;   /* headings on white (>= 3:1) */
  --c-gold-on-teal: #c2b397;    /* headings on teal  (>= 3:1) */
  --c-gold-light: #dcd2bf;      /* small text on teal (>= 4.5:1) */
  --c-dark: #24272a;
}

body { font-size: 16px; line-height: 1.667; color: #333; }
/* original Bootstrap container widths (the modern theme limits them to 1180 px) */
.container { max-width: 100%; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }
.container--narrow { max-width: 860px; }
h1, h2 { font-family: var(--serif); color: var(--c-gold-on-white); font-weight: 400; }
h2 { font-size: 32px; line-height: 1.1; padding: 13px 0; margin: 0 0 .3em; }
h3 { font-family: var(--serif); font-size: 24px; line-height: 1.5; color: var(--c-dark); }
@media (max-width: 575.98px) {
  h2 { font-size: 29px; }
  h3 { font-size: 24px; line-height: 1.25; }
}

/* ---------- buttons (pill, uppercase) ---------- */
.c-btn, .c-btn-white, .c-btn-menu {
  display: inline-block; font: 400 15px/1.4 var(--sans); text-transform: uppercase;
  border-radius: 50px; transition: background-color .5s, color .5s; text-align: center;
}
.c-btn { background: var(--c-teal); border: 1px solid var(--c-teal); color: #fff; padding: 15px 40px; }
.c-btn:hover, .c-btn:focus-visible { background: rgba(79, 92, 92, .85); color: #fff; text-decoration: none; }
.c-btn-white { border: 2px solid #fff; color: #fff; padding: 13px 40px; background: transparent; }
.c-btn-white:hover, .c-btn-white:focus-visible { background: #fff; color: var(--c-teal); text-decoration: none; }
.c-btn-menu { border: 1px solid var(--c-gold); color: var(--gold-text); padding: 8px 15px; font-size: 14px; }
.c-btn-menu:hover, .c-btn-menu:focus-visible { background: var(--c-gold); color: #fff; text-decoration: none; }

/* ---------- header ---------- */
.c-nav { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #ededed; }
.c-nav__in { display: flex; align-items: center; min-height: 72px; padding-top: 8px; padding-bottom: 8px; gap: 12px; }
.c-brand img { width: 200px; height: auto; }
.c-nav .c-btn-menu { margin-left: auto; }
.c-burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 10px 8px; cursor: pointer; }
.c-burger span { display: block; height: 2px; background: var(--c-gold); margin: 5px 0; transition: transform .3s, opacity .3s; }
.c-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.c-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.c-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.c-menu { display: none; border-top: 1px solid #ededed; }
.c-menu.is-open { display: block; }
.c-menu ul { list-style: none; margin: 0; padding: 6px 12px 12px; }
.c-menu a { display: block; padding: 10px 0; color: var(--gold-text); }
@media (max-width: 991.98px) { .c-burger { display: block; } }
@media (max-width: 575.98px) {
  .c-nav__in { min-height: 60px; gap: 6px; }
  .c-brand img { width: 120px; }
}

/* ---------- generic slider (hero, chalet photos, guests) ---------- */
[data-slider] { position: relative; }
.slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; margin: 0; }
.slider__btn {
  position: absolute; top: 0; bottom: 0; width: 15%; min-width: 44px; border: 0; padding: 0;
  background: transparent center / 2rem 2rem no-repeat; opacity: .6; cursor: pointer; display: none;
}
.js .slider__btn { display: block; }
.slider__btn:hover, .slider__btn:focus-visible { opacity: 1; }
.slider__btn--prev { left: 0; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); }
.slider__btn--next { right: 0; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }

/* ---------- hero ---------- */
.c-hero .c-hero__slide { height: 800px; }
.c-hero img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); }
.c-hero__caption { position: absolute; top: 42%; left: 0; width: 100%; text-align: center; padding: 0 16px; }
.c-hero__title { font: 400 53px/64px var(--serif); text-transform: uppercase; margin: 0 0 24px; }
.c-hero__title a { color: #fff; text-decoration: none; }
@media (max-width: 575.98px) {
  .c-hero .c-hero__slide { height: 120vw; }
  .c-hero img { filter: brightness(.7); }
  .c-hero__caption { top: 38%; left: 5%; width: 90%; }
  .c-hero__title { font-size: 37px; line-height: 50px; }
}

/* ---------- teal chalet section ---------- */
.c-teal { background: var(--c-teal); color: #fff; }
.c-teal h2 { color: var(--c-gold-on-teal); text-transform: uppercase; }
.c-teal h3, .c-teal p { color: #fff; }
.c-slider { margin-top: 8px; }
.c-slider picture, .c-slider img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------- activities ---------- */
.c-activities h2 { text-transform: none; }
.c-activities img { width: 100%; }

/* ---------- guests ---------- */
.c-guests { background: var(--c-teal); color: #fff; padding: 48px 0 40px; }
.c-guests h2 { color: var(--c-gold-on-teal); text-transform: uppercase; }
.c-stars { color: var(--c-gold-light); margin: -6px 0 18px; display: flex; justify-content: center; gap: 3px; }
.c-stars svg { width: 18px; height: 18px; fill: currentColor; }
.c-quotes { max-width: 860px; margin: 0 auto; }
.c-quotes blockquote { font-style: italic; margin: 0 0 14px; padding: 0 24px; }
.c-quotes figcaption { font-size: 15px; }
.c-quote-name { display: block; font: 400 19px/1.4 var(--serif); color: var(--c-gold-light); }

/* ---------- about us / contact ---------- */
.c-about { background: #fff; }
.c-about h2 { font-size: 19px; line-height: 1.8; color: #333; text-transform: uppercase; padding: 0; margin: 0 0 .4em; }
.c-about p + h2 { margin-top: 1.2em; }

/* ---------- partners + footer ----------
   Partner logos: grey, in colour on mouse-over (rules in style.css, ".partners img").
   Footer: three-column footer from style.css (".site-footer"); here only the
   corrections against the large classic heading style. */
.c-partners { background: #fff; padding: 16px 0 32px; }
.site-footer h2 { font-size: 1.05rem; line-height: 1.3; padding: 0; margin: 0 0 .8em; color: #fff; text-transform: none; }

/* subpages: page titles in the classic serif style */
.page-hero h1 { text-transform: uppercase; }
.eyebrow { color: var(--gold-text); }

.c-quotes figure { margin: 0; }

/* ---------- icon facts under each chalet on the homepage (teal area) ---------- */
.c-facts {
  list-style: none; padding: 0; margin: 4px 0 20px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px;
  font-size: 15px; color: #fff;
}
.c-facts li { display: inline-flex; align-items: center; }
.c-facts li[data-icon]::before { background: var(--c-gold-light); width: 18px; height: 18px; }
/* ---------- desktop menu: Chalets · St. Anton · FAQ · Contact (from 992 px; below that the burger menu) ----------
   Look and hover colour come from ".main-nav" in style.css (same as the other variant). */
.c-deskmenu { display: none; }
@media (min-width: 992px) {
  .c-deskmenu { display: block; margin-left: auto; }
  .c-nav .c-btn-menu { margin-left: 28px; }
}