:root {
  --bg: #F2F0EF;           /* bakgrund */
  --accent: #570278;       /* menyrad & logocirkel */
  --menu-text: #ffd700;    /* guld för meny & ikoner */
  --header-h: 75px;        /* justera till verklig höjd på din fasta meny */
  --anchor-offset: 88px
}

/* Parallax helpers (kan återanvändas globalt) */
[data-parallax]{ will-change: transform; transform: translateZ(0); }

/* ============== Bas ============== */
/* Grundlayout för "sticky footer" */
html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: #353E43;                 /* mörk läsbar text som default */
  min-height: 100vh;              /* ev. 100dvh för mobilprecision */
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mittsektionen tar upp resterande höjd */
main {
  flex: 1 0 auto;
}

/* Pressa ned footern */
footer {
  margin-top: auto;
}


/* ============== Header (reveal) ============== */
.site-header,
.header-wrapper{
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: center;
  z-index: 1000;
  transition: opacity .25s ease, transform .25s ease;
}

body.header-hidden-until-scroll .site-header,
body.header-hidden-until-scroll .header-wrapper{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
}
body.header-hidden-until-scroll .site-header.is-visible,
body.header-hidden-until-scroll .header-wrapper.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Tvinga synlig header på sidor med no-header-hide */
body.no-header-hide .site-header,
body.no-header-hide #siteHeader,
body.no-header-hide .header-wrapper{
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Parallellogram-formad menyrad */
.parallelogram-bar {
  background: var(--accent);
  transform: skewX(-20deg);
  padding: .75rem 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  width: 60%;
  border-radius: .5rem;
  margin: .75rem auto;
}
.parallelogram-inner {
  transform: skewX(20deg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 .75rem;
}

/* Vänster kluster (logotyp + meny) */
.menu-cluster { display: flex; align-items: center; gap: 1rem; }
.logo-inline { height: 44px; width: auto; display: block; }

/* Navigation vänster */
.menu-left .nav-link { color: var(--menu-text); opacity: 1; font-weight: 500; }
.menu-left .nav-link:hover, .menu-left .nav-link:focus {
  color: var(--menu-text);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Dropdown */
.menu-left .dropdown-toggle::after{ border-top-color: var(--menu-text); }
.dropdown-menu{
  z-index: 1100;
  background: var(--accent);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: .75rem;
  padding: .5rem;
  min-width: 16rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.32);
  transform: translateY(8px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.dropdown-menu.show{ opacity: 1; transform: translateY(0); }
.dropdown-item{ color: var(--menu-text); border-radius: .5rem; }
.dropdown-item:hover, .dropdown-item:focus{ background: rgba(255,255,255,.14); color: var(--menu-text); }
.dropdown-item.active, .dropdown-item:active{ background: rgba(255,255,255,.18); color: var(--menu-text); }
.dropdown-divider{ border-top-color: rgba(255,255,255,.25); }

/* Social-ikoner till höger */
.social a { color: var(--menu-text); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; }
.social a:hover { opacity: .95; }
.social svg { width: 20px; height: 20px; }

/* ============== Footer ============== */
.site-footer{
  background: #000;
  color: #f8f9fa;
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
}
.site-footer .footer-link{
  color: inherit;
  text-decoration: none;
  opacity: .85;
}
.site-footer .footer-link:hover,
.site-footer .footer-link:focus{
  text-decoration: underline;
  text-underline-offset: .15em;
  opacity: 1;
}
.site-footer .iconlink{
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit;
}
.site-footer .iconlink svg{ width: 18px; height: 18px; }
.footer-divider{ border-color: rgba(255,255,255,.15); }

/* ============== Top (ersätter hero globalt) ============== */
.page-top{
  position: relative;
  padding: calc(var(--header-h,72px) + 2rem) 0 1.5rem;
  background: var(--pt-bg-color, var(--bg, #F2F0EF));
  min-height: var(--pt-min-h, 36vh);
  display: flex;
  align-items: flex-end;
  overflow: clip;
  color: inherit;
}
.page-top.has-bg{
  background: none;
  color: #fff;
}
.page-top.has-bg::before{
  content: "";
  position: absolute; inset: 0;
  background-image: var(--pt-bg-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0);
}
.page-top.has-bg::after{
  content: "";
  position: absolute; inset: 0;
  background: var(--pt-overlay, rgba(0,0,0,.35));
}
.page-top > .container{ position: relative; z-index: 1; }
.no-header-hide .page-top{ padding-top: 2.5rem; }
.page-top.has-bg .display-5,
.page-top.has-bg .lead{ text-shadow: 0 1px 2px rgba(0,0,0,.25); }
/* Hero-typografi – använder variablerna ovan */
.page-top h1{
  margin-bottom: .5rem;
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
  color: var(--hero-title-color);
  font-family: var(--hero-title-font);
  text-shadow: var(--hero-text-shadow);
  text-align: center;
}
.page-top p.lead{
  color: var(--hero-lead-color);
  font-family: var(--hero-lead-font);
  margin-bottom: 0;
  text-shadow: var(--hero-text-shadow);
  text-align: center;
}