/* ==========================================================================
   mias fest & catering — replica stylesheet
   Reproduces the Squarespace 7.1 design system used by the original site:
   palette, section themes, fluid type scale, 12-column grid, header/footer.

   This file no longer has to sit beside the HTML. Photo paths used to reach
   it through the --photo custom property, and a browser resolves a relative
   url() inside a custom property against the STYLESHEET's location rather
   than the page's — so moving the file broke every image. The photos are
   real <img src> on the pages now, which resolve against the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Palette values are the site's own HSL definitions. `safeDarkAccent` and
   `safeLightAccent` both resolve to the accent greige on this site, and every
   `safeInverse*` resolves to white — that is why headings on white sections
   are greige and buttons on greige sections are white.
   -------------------------------------------------------------------------- */
:root {
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --accent: hsl(42.86, 3.87%, 64.51%);
  --light-accent: hsl(210, 3.23%, 87.84%);
  --dark-accent: hsl(240, 2.61%, 22.55%);

  --max-page-width: 1200px;
  --site-padding: 5vmax;
  --gutter: 17px;

  /* Squarespace fluid type: min(V-scaled vw, max(V-scaled max-width, V rem)) */
  --h1-size: min(calc((4 - 1) * 1.2vw + 1rem),
             max(calc((4 - 1) * 0.012 * var(--max-page-width) + 1rem), 4rem));
  --h2-size: min(calc((2.8 - 1) * 1.2vw + 1rem),
             max(calc((2.8 - 1) * 0.012 * var(--max-page-width) + 1rem), 2.8rem));
  --h3-size: min(calc((2.2 - 1) * 1.2vw + 1rem),
             max(calc((2.2 - 1) * 0.012 * var(--max-page-width) + 1rem), 2.2rem));
  --h4-size: min(calc((1.2 - 1) * 1.2vw + 1rem),
             max(calc((1.2 - 1) * 0.012 * var(--max-page-width) + 1rem), 1.2rem));
  --body-size: min(calc((1.2 - 1) * 1.2vw + 1rem),
              max(calc((1.2 - 1) * 0.012 * var(--max-page-width) + 1rem), 1.2rem));

  /* Swap these two for "orpheus-pro" / "adobe-garamond-pro" if an Adobe
     Fonts kit is added — nothing else needs to change. */
  --heading-font: "orpheus-pro", "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --body-font: "adobe-garamond-pro", "EB Garamond", Georgia, serif;

  --heading-line-height: 1.4em;
  --body-line-height: 1.6em;

  --header-height: 0px;
  --transition: 0.2s ease;

  /* Loading skeleton, in the site's own greige rather than a neutral grey. */
  --skeleton-base: hsl(42.86, 6%, 84%);
  --skeleton-sheen: hsla(0, 0%, 100%, 0.65);
  --skeleton-base-dark: hsl(42.86, 6%, 62%);
  --skeleton-sheen-dark: hsla(0, 0%, 100%, 0.28);
}

/* --------------------------------------------------------------------------
   2. Section themes
   Each section declares one theme; the header adopts the theme of whatever
   section sits behind it (see js/site.js).
   -------------------------------------------------------------------------- */
.theme-bright {
  --bg: var(--accent);
  --heading-color: var(--white);
  --text-color: var(--white);
  --nav-color: var(--white);
  --button-bg: var(--white);
  --button-text: var(--accent);
}

.theme-white {
  --bg: var(--white);
  --heading-color: var(--black);
  --text-color: var(--black);
  --nav-color: var(--black);
  --button-bg: var(--accent);
  --button-text: var(--white);
}

/* "white-bold": white ground, accent-coloured headings. */
.theme-white-bold {
  --bg: var(--white);
  --heading-color: var(--accent);
  --text-color: var(--black);
  --nav-color: var(--black);
  --button-bg: var(--accent);
  --button-text: var(--white);
}

.theme-light {
  --bg: var(--light-accent);
  --heading-color: var(--black);
  --text-color: var(--black);
  --nav-color: var(--black);
  --button-bg: var(--accent);
  --button-text: var(--white);
}

/* Sections carrying a background photo always render white text on top. */
.section.section--has-media {
  --heading-color: var(--white);
  --text-color: var(--white);
  --nav-color: var(--white);
}

/* The header goes white only while it floats over that photo. Once it turns
   solid on scroll-back the photo is no longer behind it, so it returns to the
   section theme's own colours — otherwise white text would land on a white
   bar over the testimonials. */
.header.section--has-media:not(.is-solid) {
  --nav-color: var(--white);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--body-font);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  font-weight: 400;
  color: var(--text-color, var(--black));
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
}

body.is-menu-open {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--heading-font);
  font-weight: 400;
  line-height: var(--heading-line-height);
  color: var(--heading-color, var(--black));
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }

p {
  margin: 0;
  color: var(--text-color, var(--black));
}

figure {
  margin: 0;
}

p + p {
  margin-top: 1em;
}

/* Contact details read as one block, so every line gets the same small gap
   instead of the site-wide paragraph spacing — which left the phone number
   floating between two wide gaps while the address hugged the email. */
.contact-details p {
  margin-top: 0.4em;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 1em 1.5em;
  background: var(--white);
  color: var(--black);
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Header
   Transparent overlay at the top of the page; on scroll it hides going down
   and slides back in — with a solid themed background — going up.
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: transparent;
  transition: transform 0.3s ease, background-color var(--transition);
  will-change: transform;
}

/* Solid state, used once the page has been scrolled. */
.header.is-solid {
  background-color: var(--bg);
}

.header.is-hidden {
  transform: translateY(-100%);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2vw;
  padding: 1.6vmax var(--site-padding);
}

.header-title a {
  font-family: var(--heading-font);
  font-size: min(calc((2 - 1) * 1.2vw + 1rem),
             max(calc((2 - 1) * 0.012 * var(--max-page-width) + 1rem), 2rem));
  line-height: var(--heading-line-height);
  color: var(--nav-color);
  text-decoration: none;
  white-space: nowrap;
}

.header-nav ul {
  display: flex;
  align-items: center;
  gap: 2.2vw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav a {
  position: relative;
  display: inline-block;
  font-family: var(--body-font);
  font-size: var(--body-size);
  color: var(--nav-color);
  text-decoration: none;
  padding-bottom: 0.1em;
}

/* Nav underline: 1px rule that scales in from the left on hover / current page. */
.header-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}

.header-nav a:hover::after,
.header-nav a:focus-visible::after,
.header-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

/* Social icons: hovering the group fades the ones you are not pointing at. */
.social-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.social-links a {
  display: block;
  color: var(--nav-color);
  transition: opacity var(--transition);
}

.social-links svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.social-links:hover a {
  opacity: 0.6;
}

.social-links:hover a:hover {
  opacity: 1;
}

/* Burger — two 1px rules that cross into an X when the menu opens. */
.burger {
  display: none;
  position: relative;
  width: 34px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--nav-color);
}

.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.burger span:nth-child(1) { top: 8px; }
.burger span:nth-child(2) { top: 15px; }

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   5. Mobile overlay menu (fade in, matching the site's "fade" setting)
   -------------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6vh;
  background-color: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4vh;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-menu a {
  font-family: var(--heading-font);
  font-size: var(--h3-size);
  color: var(--nav-color);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   6. Sections and the 12-column layout grid
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--bg);
  color: var(--text-color);
  /* Clips the hero's scroll-driven background, which is scaled past its box. */
  overflow: hidden;
}

.section-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* z-index 0 makes this a stacking context, so the layer order below stays
     contained here and cannot compete with .content-wrapper. */
  z-index: 0;
  background-color: var(--skeleton-base-dark);
}

/* Layer order inside a section background: photo, then skeleton, then the
   dark overlay on top — the order the CSS-background version painted in. */
.section-background > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* Focal point of the crop, matching the original's background-position. */
  object-fit: cover;
  object-position: var(--focal-pos, center center);
}

/* Scroll-driven pan/zoom. js/site.js writes the transform; origin must stay
   top-left for the maths that maps the visible window onto the section. */
.section-background[data-parallax] {
  transform-origin: 0 0;
  will-change: transform;
}

.section-background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--black);
  opacity: var(--overlay, 0.15);
}

.content-wrapper {
  position: relative;
  width: 100%;
  padding: 5vmax var(--site-padding);
  display: flex;
  justify-content: center;
}

.content {
  width: 100%;
  max-width: var(--max-page-width);
}

/* Section heights mirror Squarespace's small / medium / large presets. */
.h-small  { min-height: 33vh; }
.h-medium { min-height: 66vh; }
.h-large  { min-height: 100vh; }

.h-small  > .content-wrapper { padding-top: 3.3vmax; padding-bottom: 3.3vmax; }
.h-medium > .content-wrapper { padding-top: 6.6vmax; padding-bottom: 6.6vmax; }
.h-large  > .content-wrapper { padding-top: 10vmax;  padding-bottom: 10vmax; }

/* The header is transparent and fixed, so the first section on every page
   reserves room for it on top of its own padding.
   :first-of-type, not :first-child — pages carry a visually hidden <h1> ahead
   of the first section, and :first-child stops matching the moment anything
   is placed before it, silently dropping the clearance. */
main > .section:first-of-type > .content-wrapper {
  padding-top: calc(var(--header-height) + 6.6vmax);
}
main > .h-large:first-of-type > .content-wrapper,
main > .list-section:first-of-type > .content-wrapper {
  padding-top: calc(var(--header-height) + 10vmax);
}

.w-medium .content { max-width: calc(var(--max-page-width) * 0.75); }

.va-top { justify-content: flex-start; }

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--gutter) * -1);
}

.col {
  padding: 0 var(--gutter);
}

.col-12 { width: 100%; }
.col-6  { width: 50%; }

.block {
  padding: var(--gutter) 0;
}

.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.button {
  display: inline-block;
  padding: 1.2rem;
  font-family: var(--heading-font);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  background-color: var(--button-bg);
  color: var(--button-text);
  transition: 0.1s opacity linear;
}

.button:hover {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   8. Photo frames
   A .photo is a ratio box wrapping a real <img>. The box carries the shape,
   the corner radius and the loading skeleton, because an <img> is a replaced
   element and cannot render ::before itself.
   -------------------------------------------------------------------------- */
.photo {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--ratio, 3 / 2);
  /* Stacking context, so the skeleton stays layered over its own photo. */
  z-index: 0;
  background-color: var(--skeleton-base);
}

/* Absolute rather than height: 100% — the box's height comes from
   aspect-ratio in some places and from the strip's fixed height in others,
   and inset: 0 fills it correctly either way. */
.photo > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal-pos, center center);
}

a.photo-link {
  display: block;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   8b. Loading skeleton
   The skeleton is opaque and covers the photo, so it exists only while
   .is-loading — a class js/site.js adds and can therefore always remove.
   With JS off the class is never added, the pseudo-element is never
   generated, and the photo is simply visible. A skeleton painted
   unconditionally here would hide every photo for those visitors.
   -------------------------------------------------------------------------- */
.photo.is-loading::before,
.section-background.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: var(--skeleton-base);
  background-image: linear-gradient(100deg,
    transparent 25%,
    var(--skeleton-sheen) 45%,
    var(--skeleton-sheen) 55%,
    transparent 75%);
  background-repeat: no-repeat;
  background-size: 220% 100%;
  animation: skeleton-sweep 1.5s ease-in-out infinite;
  transition: opacity 0.45s ease;
}

.section-background.is-loading::before {
  background-color: var(--skeleton-base-dark);
  background-image: linear-gradient(100deg,
    transparent 25%,
    var(--skeleton-sheen-dark) 45%,
    var(--skeleton-sheen-dark) 55%,
    transparent 75%);
}

/* Decoded: fade the skeleton out, which doubles as the photo's fade-in. */
.photo.is-loading.is-loaded::before,
.section-background.is-loading.is-loaded::before {
  opacity: 0;
  animation: none;
}

@keyframes skeleton-sweep {
  from { background-position: 170% 0; }
  to   { background-position: -70% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .photo.is-loading::before,
  .section-background.is-loading::before {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   9. Image card block (catering + kontakt)
   Photo on one side, a text card on the other, 10% apart — the geometry
   Squarespace uses for its "card" image layout.
   -------------------------------------------------------------------------- */
.image-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image-card--photo-right {
  flex-direction: row-reverse;
}

.image-card__media {
  width: calc(50% - 5%);
}

.image-card__body {
  width: calc(50% - 5%);
}

.image-card--photo-right .image-card__body {
  margin-right: 10%;
}

.image-card--photo-left .image-card__body {
  margin-left: 10%;
}

.image-card__body > * + * {
  margin-top: 6%;
}

.image-card__body em {
  font-style: italic;
}

/* The catering photo carries a large rounded bottom-right corner. */
.photo--corner-br {
  border-bottom-right-radius: 120px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   10. List section (bröllop banner) — three centred items over a photo
   -------------------------------------------------------------------------- */
/* The banner fills the viewport, so the section below stays hidden until the
   visitor scrolls. Stated outright rather than left to padding plus however
   much the text happens to wrap to. */
.list-section {
  min-height: 100vh;
}

.list-section > .content-wrapper {
  padding-top: 10vmax;
  padding-bottom: 10vmax;
}

.list-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.list-item h2 {
  max-width: 75%;
  font-size: 3rem;
}

.list-item p {
  max-width: 75%;
  margin-top: 6%;
  font-size: 1.9rem;
  line-height: var(--body-line-height);
}

/* --------------------------------------------------------------------------
   11. Gallery strips — justified rows, 316px tall, 20px gutters
   Each item's --ar (width / height) drives how it shares its row.
   -------------------------------------------------------------------------- */
.gallery-section > .content-wrapper {
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
}

.gallery-strips {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.gallery-strips .strip {
  height: 316px;
  flex-grow: calc(var(--ar) * 100);
  flex-basis: calc(var(--ar) * 316px);
  min-width: 0;
}

.gallery-strips .strip .photo {
  height: 100%;
  aspect-ratio: auto;
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.footer .footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vw;
}

.footer h4 {
  text-align: center;
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .list-items {
    grid-template-columns: 1fr;
    gap: 60px 0;
  }

  .list-item h2,
  .list-item p {
    max-width: 100%;
  }

  .list-item h2 { font-size: var(--h2-size); }
  .list-item p  { font-size: var(--body-size); }
}

@media (max-width: 799px) {
  /* Mobile header: burger left, title centred, no inline nav or social. */
  .burger {
    display: block;
  }

  .header-inner {
    grid-template-columns: 34px 1fr 34px;
  }

  /* Placed explicitly: with the nav and social hidden, auto-placement would
     drop the title into the burger's column. */
  .burger {
    grid-column: 1;
    grid-row: 1;
  }

  .header-title {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
  }

  .header-title a {
    font-size: 1.4rem;
  }

  .header-nav,
  .header-actions {
    display: none;
  }
}

@media (max-width: 767px) {
  :root {
    --site-padding: 6vw;
  }

  .col-6,
  .col-12 {
    width: 100%;
  }

  /* Card blocks stack: photo first, then text. */
  .image-card,
  .image-card--photo-right {
    flex-direction: column;
  }

  .image-card__media,
  .image-card__body {
    width: 100%;
  }

  .image-card--photo-right .image-card__body,
  .image-card--photo-left .image-card__body {
    margin: 8% 0 0;
  }

  .photo--corner-br {
    border-bottom-right-radius: 60px;
  }

  /* Strips fall back to one image per row. */
  .gallery-strips .strip {
    height: auto;
    flex: 1 1 100%;
  }

  .gallery-strips .strip .photo {
    height: auto;
    aspect-ratio: var(--ar);
  }

  .footer .footer-inner {
    flex-direction: column;
    gap: 4vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}