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

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background-color: var(--black);
  color: var(--white);
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

/* =========================================
   TYPOGRAPHY
========================================= */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  color: var(--gold);
  text-shadow: 1px 1px 3px var(--shadow);
  margin: 0 0 1rem 0;
}
h1 { font-size: 2.8rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

.font { font-family: 'Playfair Display', serif; color: var(--white); text-shadow: 1px 1px 2px var(--shadow); }
.font-menu { font-family: 'Playfair Display', serif; color: var(--gold); font-size: 18px; text-transform: uppercase; letter-spacing: 1px; }
.font-normal { font-family: 'Open Sans', sans-serif; color: var(--white); font-size: 16px; }
.font-muted { color: var(--gray); font-size: 15px; }

/* =========================================
   LINKS
========================================= */
a { color: var(--gold); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--gold-light); }

/* =========================================
   HEADER / LOGO  (mobile-first)
   — Viktigt: ingen fast höjd!
========================================= */
.header-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}

.center-logo { position: relative; text-align: center; flex: 1; }

/* Träffar både <img class="header-logo"> och .center-logo img */
.header-logo,
.center-logo img {
  display: inline-block;
  height: auto !important;                  /* släpp höjd helt */
  width: clamp(160px, 38vw, 240px) !important; /* mobil-first scaled */
  pointer-events: auto;
  transition: transform .2s ease;
}

.header-logo:hover,
.center-logo img:hover { transform: translateZ(0) scale(1.02); }

/* Huvudnavigering (mobil: dold, visas i desktop-sektion) */
.header-nav { display: none; }

/* =========================================
   CATEGORY LINKS (under header)
========================================= */
.kategori-nav { text-align: center; margin: 40px 0; font-family: 'Georgia', serif; font-weight: bold; letter-spacing: 1px; }
.kategori-nav .font-menu { color: var(--gold); margin: 0 10px; font-size: 16px; }
.kategori-nav .font-menu:hover,
.kategori-nav a:hover { text-decoration: underline; color: var(--gold-light); }
.kategori-nav .divider { color: var(--gold); margin: 0 5px; font-size: 16px; }

/* =========================================
   HAMBURGER / MOBILE MENUS
========================================= */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  width: 30px; height: 20px;
  cursor: pointer;
  position: absolute; top: 10px; left: 20px;
  z-index: 2001;
}
.hamburger.right { left: auto; right: 20px; }
.hamburger span { width: 100%; height: 3px; background-color: #fff; border-radius: 2px; }
.hamburger.right span { background-color: #b87333; }

.mobile-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 60px;
  left: 10vw;
  width: 80vw;
  background-color: #1a1a1a;
  border: 1px solid gold;
  border-radius: 10px;
  padding: 15px 20px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.mobile-menu a { color: #fff; padding: 10px 0; font-size: 18px; }

/* =========================================
   DESKTOP CATEGORY MENU (hidden on mobile)
========================================= */
.desktop-kategorimeny {
  display: none;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
}
.desktop-kategorimeny a {
  color: #d4af37;
  text-decoration: none;
  padding: 6px 12px;
  border-bottom: 2px solid transparent;
  font-weight: bold;
  transition: color .3s ease, border-color .3s ease;
}
.desktop-kategorimeny a:hover { border-color: #b87333; }
.desktop-kategorimeny .divider { color: var(--gold); margin: 0 5px; font-size: 16px; }

/* =========================================
   GALLERY
========================================= */
.gallery-section { display: flex; flex-direction: column; gap: 40px; align-items: center; padding: 20px; }

.image-frame {
  position: relative;
  border: 2px solid var(--gold);
  padding: 10px 40px;
  border-radius: 10px;
  background-color: #111;
  overflow: hidden;
  max-width: 90vw;
}

.image-scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 20px;
  padding: 10px 0;
  scrollbar-width: none;
}
.image-scroll-container::-webkit-scrollbar { display: none; }

.image-scroll-container img {
  flex: 0 0 auto;
  width: 240px;
  max-height: 400px;
  border-radius: 6px;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform .3s ease;
}
.image-scroll-container img:hover { transform: scale(1.05); }

.zoomable { max-width: unset !important; height: auto !important; }
.zoomed-clone { pointer-events: auto; }

/* Scroll buttons */
.scroll-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background-color: var(--gold); color: var(--black);
  border: none; font-size: 24px; padding: 10px 14px;
  border-radius: 50%; cursor: pointer; z-index: 10;
  opacity: .8; transition: opacity .2s ease;
}
.scroll-btn:hover { opacity: 1; }
.scroll-btn.left { left: 10px; }
.scroll-btn.right { right: 10px; }

/* Hint animation */
@keyframes hintPulse { 0%,100% { transform: scale(1); opacity:.7; } 50% { transform: scale(1.3); opacity:1; } }
.scroll-btn.animate-hint { animation: hintPulse .8s ease-in-out; }

/* =========================================
   BUTTONS
========================================= */
.button-gold {
  background-color: var(--gold);
  color: var(--black);
  border: none;
  padding: 12px 24px;
  font-weight: bold;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: .3s ease;
}
.button-gold:hover { background-color: var(--gold-light); color: var(--black); }

/* =========================================
   SEPARATOR
========================================= */
.separator { width: 100px; height: 4px; background-color: var(--gold); margin: 20px auto; border-radius: 3px; }

/* =========================================
   RESPONSIVE — ALL MEDIA QUERIES HERE
========================================= */

/* -------- Mobile (≤768px) -------- */
@media (max-width: 768px) {

  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }

  /* Logo – mobil */
  .header-logo,
  .center-logo img {
    width: clamp(170px, 56vw, 220px) !important;
    height: auto !important;
  }

  /* Dölj desktop-nav */
  .header-nav { display: none !important; }

  /* Menyer från vänster/höger */
  #mobileMenu { left: 0 !important; right: auto !important; width: 90vw; }
  #categoryMenu { right: 0 !important; left: auto !important; width: 90vw; }

  /* Gallery */
  .gallery-section { gap: 20px; }
  .image-frame { padding: 10px 20px; }
  .image-scroll-container img { width: 85vw; max-height: 300px; }
  .scroll-btn { display: none !important; }

  /* Buttons */
  .button-gold { padding: 10px 18px; font-size: 14px; }

  /* Footer (om elementen finns) */
  .footer-content { flex-direction: column; align-items: center; text-align: center; }
  .footer-column { flex: 1 1 100%; max-width: 100%; }
  .footer-bottom { flex-direction: column; }
}

/* -------- Desktop (≥769px) -------- */
@media (min-width: 769px) {

  /* Logo – desktop: större clamp */
  .header-logo,
  .center-logo img {
    width: clamp(220px, 12vw, 360px) !important;
    height: auto !important;
  }

  /* Visa desktop-nav och placera den höger */
  .header-nav {
    display: flex !important;
    gap: 20px;
    align-items: center;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
  .header-nav a { color: #fff; padding: 8px 12px; text-decoration: none; }
  .header-nav .kontakt-knapp { border: 1px solid gold; border-radius: 4px; }

  /* Desktop-kategorimeny synlig */
  .desktop-kategorimeny { display: flex; }

  /* Dölj mobilkomponenter */
  .hamburger,
  .mobile-menu { display: none !important; }
}

/* ============================
   🔧 HOTFIX: Header & Logo
   (lägg sist i style.css)
============================ */

/* Få bort ev. klippning och låsningar */
header, .site-header, .header, .header-container {
  overflow: visible !important;
}

/* Träffa alla vanliga logo-varianter */
.center-logo,
.site-logo,
.logo { display: block; line-height: 0; }

.center-logo img,
.site-logo img,
.logo img,
img.header-logo {
  height: auto !important;
  max-height: none !important;
  width: auto;
}

/* --- MOBIL (≤768px): ge header plats + centrera loggan --- */
@media (max-width: 768px) {
  .header-container {
    position: relative !important;
    min-height: 100px !important;   /* ⬅️ gör att loggan får plats i headern */
    padding-top: 10px;               /* luft ovanför */
  }

  .center-logo {
    position: absolute !important;
    top: 10px;                       /* avstånd från toppen */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
  }

  .center-logo img,
  img.header-logo,
  .site-logo img {
    width: 160px !important;         /* synlig och lagom stor på mobil */
  }
}

/* --- DESKTOP (≥769px): gör loggan större --- */
@media (min-width: 769px) {
  .center-logo img,
  img.header-logo,
  .site-logo img {
    width: 360px !important;         /* justera upp/ner efter smak */
    height: auto !important;
  }

  /* Se till att desktop-menyn visas som innan */
  .header-nav { display: flex !important; }
}

/* ============================
   LOGO JUSTERING – DESKTOP
============================ */
@media (min-width: 769px) {
  .center-logo {
    position: static !important;      /* släpper absoluta centreringen */
    transform: none !important;
    display: flex;
    justify-content: flex-start;      /* placerar loggan till vänster */
    align-items: center;
    padding-left: 40px;               /* justera avstånd efter smak */
  }

  .center-logo img,
  .header-logo {
    margin: 0;
    width: clamp(240px, 14vw, 380px) !important;  /* gör loggan något större om du vill */
    height: auto !important;
  }
}

/* Dölj galleripilarna på sidan (behåll i lightbox) */
.image-frame .scroll-btn { display: none !important; }

/* ===== Swipe-hint (mobil) – synlig tills användaren drar/klickar ===== */
@media (max-width: 768px){
  .swipe-hint{
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:8px;
    padding:6px 12px; border-radius:999px;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(214,184,108,.6);
    color:#f5f5f5;
    font:500 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    pointer-events:none;
    transition:opacity .25s ease;
    opacity:1;                 /* <- synlig som default */
  }
  .swipe-hint.hidden{ opacity:0; } /* <- JS sätter/ta bort denna klass */

  .swipe-hint .dots{ width:36px; height:6px; position:relative; display:inline-block; }
  .swipe-hint .dots::before,
  .swipe-hint .dots::after{
    content:""; position:absolute; top:0; width:12px; height:6px; border-radius:3px;
    background:#d6b86c; opacity:.9; animation: swipeDots 1.2s infinite;
  }
  .swipe-hint .dots::before{ left:0; }
  .swipe-hint .dots::after{ right:0; animation-delay:.6s; }

  @keyframes swipeDots{
    0%{   transform:translateX(0);   opacity:.2; }
    50%{  transform:translateX(6px); opacity:1;  }
    100%{ transform:translateX(0);   opacity:.2; }
  }
}

/* Gör rader svepbara & stabila */
.image-scroll-container{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  display:flex; gap:20px; scroll-behavior:smooth;
}
.image-scroll-container img{ flex:0 0 auto; }

/* Ta bort galleripilar på sidan (behåll i lightbox) */
.image-frame .scroll-btn{ display:none !important; }

/* LIGHTBOX – se till att mobilbild aldrig överskrider viewport */
.lbx-stage{
  position:relative;
  max-width:96vw; max-height:96vh;
  border-radius:12px; box-shadow:0 0 40px rgba(0,0,0,.8);
  overflow:visible; /* pilarna syns */
}
.lbx-img{
  display:block; object-fit:contain;
  max-width:96vw;
  max-height:calc(96vh - 48px); /* lite plats för knappar */
}
@media (max-width:768px){
  .lbx-stage{ max-width:100vw; max-height:100vh; border-radius:10px; }
  .lbx-img  { max-width:100vw; max-height:calc(100vh - 56px); }
  .lbx-prev { left:12px;  top:50%; transform:translateY(-50%); }
  .lbx-next { right:12px; top:50%; transform:translateY(-50%); }
}

/* === LIGHTBOX – base layout === */
.lbx-overlay{
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.9);
  display: none;
  align-items: center; justify-content: center;
}
.lbx-overlay.is-open{ display: flex; }

.lbx-stage{
  position: relative;
  box-shadow: 0 0 40px rgba(0,0,0,.8);
  border-radius: 12px;
  overflow: visible;            /* arrows can sit slightly outside */
}

.lbx-img{
  display: block;
  width: auto; height: auto;
  object-fit: contain;
}

/* UI */
.lbx-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.08); color:#fff;
  font-size:28px; display:flex; align-items:center; justify-content:center;
  z-index:3; cursor:pointer;
}
.lbx-prev{ left:16px; } .lbx-next{ right:16px; }
.lbx-close{
  position:absolute; top:10px; right:10px; z-index:2;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.6); background:transparent; color:#fff;
  font-size:22px; line-height:1; cursor:pointer;
}
.lbx-counter{
  position:absolute; bottom:10px; right:14px;
  color:#fff; font:500 14px/1 system-ui, sans-serif;
  background:rgba(0,0,0,.35); padding:6px 10px; border-radius:10px;
}

/* Force image to always fit the viewport on mobile */
.lbx-overlay{
  padding: env(safe-area-inset-top, 0)
           env(safe-area-inset-right, 0)
           env(safe-area-inset-bottom, 0)
           env(safe-area-inset-left, 0);
}

/* Stage: räkna in border/padding i max-måtten */
.lbx-stage{
  max-width: 100vw !important;
  max-height: 100dvh !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lbx-img{
  width:  calc(100vw - 24px) !important;
  height: calc(100dvh - 72px) !important;
  object-fit: contain !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
}

/* iOS 16+: använd svh för att ignorera adressfältets hoppar */
@supports (-webkit-touch-callout:none){
  .lbx-img{ max-height: calc(100svh - 72px) !important; }
}

/* Stoppa sid-scroll när lightboxen är öppen (om du inte redan har det) */
body.lbx-no-scroll{ overflow: hidden; }

/* Desktop: grab-to-scroll for horizontal galleries */
.image-scroll-container { cursor: grab; }
.image-scroll-container.is-grabbing {
  cursor: grabbing;
  user-select: none;           /* avoid text selection while dragging */
  -webkit-user-select: none;
}
.image-scroll-container img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Visa meddelandet och lås footer NÄR inga .image-frame finns på sidan */
.gallery-section .no-images { 
  display: none; 
  text-align: center; 
  color: var(--gold); 
  padding: 40px 0; 
  font-size: 1.05rem;
}

/* Om .gallery-section saknar .image-frame -> visa meddelandet */
.gallery-section:not(:has(.image-frame)) .no-images { 
  display: block; 
}

/* Lås footer i botten bara när galleriet är tomt */
body:has(.gallery-section:not(:has(.image-frame))) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body:has(.gallery-section:not(:has(.image-frame))) footer {
  margin-top: auto;
}