/* =========================================
   INDEX.CSS — endast för startsidan (Home)
   - Parallax-hjälp
   - Header "reveal efter scroll"
   - Hero-lager (bg + overlay) + textfärg/font via variabler
   - Logotyp (.logo-inline) endast i hero, större storlek
   - Flip-cards (MATCHAR index.js: .fc-card + .is-flipped)
   ========================================= */

/* ===== Parallax (hjälp) ===== */
[data-parallax]{
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ===== Header: dold tills scroll =====
   Kräver: body.header-hidden-until-scroll + .site-header/#siteHeader i DOM. */
.site-header{
  transition: transform .4s ease, opacity .3s ease, visibility 0s .4s;
}
body.header-hidden-until-scroll .site-header,
body.header-hidden-until-scroll #siteHeader{
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.header-hidden-until-scroll .site-header.is-visible,
body.header-hidden-until-scroll #siteHeader.is-visible{
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .4s ease, opacity .3s ease;
}

/* ===== Hero lager & layout ===== */
.hero{
  position: relative;
  min-height: 100vh;

  /* ====== Hero-variabler (sätts sidspecifikt här) ====== */
  --hero-title-color: #ffcc00;                 /* rubrikfärg */
  --hero-lead-color: #ffffff;                  /* leadfärg */
  --hero-title-font: 'Poppins', sans-serif;    /* rubrikfont */
  --hero-lead-font: 'Inter', system-ui, sans-serif; /* leadfont */
  --hero-text-shadow: 0 2px 6px rgba(0,0,0,.35);    /* skugga för läsbarhet */

  /* Logotypstorlek (endast i hero) */
  --logo-h: clamp(88px, 18vw, 220px);         /* större på stora skärmar */
}
#home-next { scroll-margin-top: var(--anchor-offset); }

.hero .hero-bg,
.hero .hero-ov{
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero .hero-bg{ z-index: 0; position: absolute; inset: 0; }
.hero .hero-ov{ z-index: 1; position: absolute; inset: 0; }

/* Sätt din hero-bild och overlay här (sidspecifikt) */
.hero .hero-bg { background-image: url('/assets/img/hero-example.jpg'); }
.hero .hero-ov { background-image: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); }

/* Innehållet ska ligga över overlay/bild */
.hero > .container{ position: relative; z-index: 2; }

/* Hero-typografi – använder variablerna ovan */
.hero 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);
}
.hero p.lead{
  color: var(--hero-lead-color);
  font-family: var(--hero-lead-font);
  margin-bottom: 0;
  text-shadow: var(--hero-text-shadow);
}

/* ===== Logotyp i hero (IMG, ej SVG) =====
   Placera i markupen före <h1>:
   <img src="/assets/img/logo.webp" class="logo-inline" alt="..." />
*/
.hero .logo-inline{
  display: block;
  height: var(--logo-h);
  width: auto;
  max-width: 90vw;
  margin: 0 auto 1rem;      /* centrerad, med luft under */
  vertical-align: middle;
  position: relative;       /* håll den över overlay-lagren */
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); /* bättre kontrast */
  image-rendering: auto;
}

/* ===== Sektion med parallaxbakgrund (panel) ===== */
.panel-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .2;
}
/* Exempel:
.panel-bg { background-image: url('/assets/img/pattern.webp'); }
*/

/* ===== Grid util ===== */
.place-items-center{ place-items: center; }

/* ============================
   FLIPCARD – robust "face-swap"
   ============================ */

/* Grid */
.fc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
}

/* Kort (perspektiv för snygg 3D) */
.fc-card{
  position:relative;
  perspective:1200px; -webkit-perspective:1200px;
  isolation:isolate;
  outline:none;
}

/* Inre container */
.fc-inner{
  position:relative;
  width:100%;
  height:320px;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}

/* Sidor */
.fc-face{
  position:absolute; inset:0;
  display:grid; place-items:center; text-align:center; padding:1.25rem;
  transition: transform .6s, opacity .3s;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
}

/* Standardläge: visa front, göm back */
.fc-front{
  background:#fff; color:#111;
  transform:rotateY(0deg);
  opacity:1; pointer-events:auto; z-index:2;
}
.fc-back{
  background:#111; color:#fff;
  transform:rotateY(-180deg);
  opacity:0; pointer-events:none; z-index:1;
}

/* Flippat: gör tvärtom */
.fc-card.is-flipped .fc-front{
  transform:rotateY(180deg);
  opacity:0; pointer-events:none; z-index:1;
}
.fc-card.is-flipped .fc-back{
  transform:rotateY(0);
  opacity:1; pointer-events:auto; z-index:2;
}

/* Tangentbordsfokus */
.fc-card:focus-visible{
  outline:2px solid #0d6efd; outline-offset:3px;
}

/* Små skärmar */
@media (max-width:420px){
  .fc-inner{ height:360px; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .fc-face{ transition:none; }
}

/* Hover-flip på enheter som stöder hover */
@media (hover: hover){
  .fc-card:hover .fc-front{
    transform: rotateY(180deg);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }
  .fc-card:hover .fc-back{
    transform: rotateY(0);
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
  }
}
/* Scroll cue – tre chevrons som animerar nedåt */
html { scroll-behavior: smooth; }

.scroll-cue{
  position: absolute;
  left: 50%;
  bottom: 5.25rem;           /* justera efter hero-höjd */
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  text-decoration: none;
  color: #fff; /* använder ditt accent-variabel om den finns */
  opacity: .9;
}

.scroll-cue .chev{
  width: 28px;
  height: 28px;
  animation: cue-bounce 1.6s infinite ease-in-out;
  will-change: transform, opacity;
}

.scroll-cue .chev:nth-child(2){ animation-delay: .15s; opacity: .75; }
.scroll-cue .chev:nth-child(3){ animation-delay: .30s; opacity: .55; }

@keyframes cue-bounce{
  0%   { transform: translateY(0); }
  30%  { transform: translateY(6px); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* Hover/fokus – bättre affordance och a11y */
.scroll-cue:focus,
.scroll-cue:hover{
  opacity: 1;
  outline: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
}

/* Respekt för användare som valt att minska rörelser */
@media (prefers-reduced-motion: reduce){
  .scroll-cue .chev{ animation: none; }
}