/* =========================================================
   Högbo Golfkrog — site.css (stabil)
   ========================================================= */

/* -------------------- Tokens -------------------- */
:root{
  --bg:#f6f1e7;
  --fg:#1f2328;
  --muted:#646a73;
  --brand:#caa23a;

  --header-solid:#ffffff;
  --footer-bg:#111;

  --radius:16px;
  --container:min(1200px, 100% - 64px);

  --sans:"Work Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --serif:"Playfair Display",serif;
}

/* -------------------- Base -------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  line-height:1.55;
}
.container{width:var(--container); margin-inline:auto}
a{color:inherit; text-decoration:none}
img,video,svg{max-width:100%; height:auto}
.btn{
  display:inline-block; padding:12px 22px; border-radius:10px;
  background:var(--brand); color:#111; font-weight:700;
}

/* -------------------- INTRO -------------------- */
#intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: #0b0b0c;
  color: var(--brand);
  transition: opacity 0.8s ease;
}

#intro .intro-svg .stroke {
  font-family: "Playfair Display", serif;
  font-size: 100px;
  fill: transparent;
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  /* VIKTIGT: låt JS sätta tiden (fallback ≈4.8s) */
  animation: introWrite var(--introDur, 4.8s) linear forwards;
}

@keyframes introWrite {
  to { stroke-dashoffset: 0; }
}

/* När introt är klart */
body.intro-done #intro {
  opacity: 0;
  pointer-events: none;
}


/* -------------------- Header (transparent → solid) -------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1001;
  background:transparent;
  padding:18px 0;
  transition:background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{
  background:var(--header-solid);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.nav-wrap{display:flex; justify-content:center; align-items:center}
.main-nav{
  display:flex; align-items:center; gap:36px;
  text-transform:uppercase; letter-spacing:.06em; font-weight:600;
}
.main-nav a{color:#fff; transition:color .3s ease}
.site-header.scrolled .main-nav a{color:#222}
.logo-center img{max-height:70px}

/* Hamburger */
.nav-toggle{
  display:none; position:absolute; left:16px; top:16px;
  background:transparent; border:0; cursor:pointer;
}
.nav-toggle span{display:block; width:24px; height:2px; margin:5px; background:#fff; transition:background .3s}
.site-header.scrolled .nav-toggle span{background:#222}

@media (max-width:860px){
  .nav-toggle{display:block}
  .main-nav{
    position:fixed; top:64px; left:0; right:0;
    background:#fff; color:#222;
    flex-direction:column; gap:14px; padding:16px 20px; display:none;
    border-bottom:1px solid #e6e6e6;
  }
  .main-nav.show{display:flex}
  .main-nav a{color:#222}
}

/* -------------------- Hero -------------------- */
.hero{
  position:relative; height:100vh; color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero-overlay{
  position:absolute; inset:0; background:rgba(0,40,80,.45); z-index:1;
}
.hero-content{
  position:relative; z-index:2; font-family:var(--serif);
}
.hero h1{font-size:clamp(36px,6vw,72px); margin-bottom:12px}
.hero p{font-size:clamp(18px,2vw,22px); color:rgba(255,255,255,.9)}

/* -------------------- Content -------------------- */
.site-main{position:relative; z-index:0}
.cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  gap:28px; margin:48px 0;
}
.card{
  background:#fff; border:1px solid #e2dbcf; border-radius:var(--radius); padding:22px;
}
.card h2{font-family:var(--serif); margin:0 0 12px}

/* Lists */
.menu-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.menu-list li{
  display:grid; grid-template-columns:220px 1fr; gap:14px;
  padding:12px; border:1px solid #eee; border-radius:12px; background:#fff;
}
.menu-list .day{color:var(--muted)}
@media (max-width:860px){ .menu-list li{grid-template-columns:1fr} }

/* -------------------- Footer -------------------- */
.site-footer{background:var(--footer-bg); color:#eee; text-align:center; padding:24px 0; margin-top:12px}