:root{--bg:#050d0a;--bg2:#091610;--panel:#0c1d16;--panel2:#10271d;--green:#12382b;--gold:#c9a44c;--gold2:#e1c36a;--cream:#f5efe3;--muted:#a9a296;--line:rgba(201,164,76,.38);--shadow:0 24px 80px rgba(0,0,0,.42);--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--sans);line-height:1.6}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 70% 20%,rgba(25,80,55,.12),transparent 30%),radial-gradient(circle at 20% 80%,rgba(201,164,76,.05),transparent 30%);z-index:-1}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(5,13,10,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(201,164,76,.22)}.header-inner{height:88px;max-width:1500px;margin:auto;padding:0 28px;display:flex;align-items:center;gap:20px}.brand{width:155px;display:flex;align-items:center}.brand img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5))}.nav{display:flex;gap:8px;align-items:center;justify-content:center;flex:1}.pill,.book-pill,.gold-pill,.outline-pill{position:relative;overflow:hidden;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 17px;border:1px solid rgba(201,164,76,.55);font-size:13px;font-weight:700;letter-spacing:.02em;white-space:nowrap}.pill{background:rgba(18,56,43,.76);color:var(--cream)}.pill:before,.book-pill:before,.gold-pill:before,.outline-pill:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.34) 45%,rgba(228,197,106,.65) 52%,transparent 76%);transform:translateX(-120%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}.pill:hover:before,.book-pill:hover:before,.gold-pill:hover:before,.outline-pill:hover:before{transform:translateX(120%)}.pill>* ,.pill span,.book-pill,.gold-pill,.outline-pill{z-index:1}.pill:hover,.outline-pill:hover{border-color:var(--gold2);color:var(--gold2);transform:translateY(-1px)}.book-pill,.gold-pill{background:linear-gradient(135deg,#b38b38,#e1c36a);color:#07120d;border-color:#f1d98a;box-shadow:0 8px 26px rgba(201,164,76,.16)}.book-pill:hover,.gold-pill:hover{color:#07120d;box-shadow:0 12px 32px rgba(201,164,76,.28);transform:translateY(-1px)}.outline-pill{background:rgba(5,13,10,.38);color:var(--cream)}.header-actions{display:flex;align-items:center;gap:10px}.lang{position:relative}.lang-btn{min-height:44px;border:1px solid rgba(201,164,76,.4);border-radius:999px;background:#0b1b14;color:var(--cream);padding:0 13px;cursor:pointer}.lang-menu{position:absolute;right:0;top:52px;width:190px;padding:8px;background:#0a1711;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);display:none}.lang.open .lang-menu{display:grid}.lang-menu button{border:0;background:transparent;color:var(--cream);padding:10px 12px;text-align:left;border-radius:10px;cursor:pointer}.lang-menu button:hover{background:#12382b}.mobile-toggle{display:none;background:transparent;border:1px solid var(--line);color:var(--cream);border-radius:999px;width:44px;height:44px;font-size:20px}.hero{position:relative;min-height:96vh;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}.hero-media,.hero-overlay{position:absolute;inset:0}.hero-media img,.hero-video{width:100%;height:100%;object-fit:cover;object-position:center}.hero-video{opacity:1;display:block}.hero-overlay{background:linear-gradient(180deg,rgba(3,9,6,.50) 0%,rgba(3,10,7,.25) 42%,rgba(3,9,6,.58) 100%),linear-gradient(0deg,rgba(5,13,10,.72),rgba(5,13,10,.10) 52%,rgba(5,13,10,.38))}.hero-content{position:relative;z-index:2;max-width:1050px;width:100%;margin:auto;padding:150px 7vw 100px;display:flex;flex-direction:column;align-items:center;justify-content:center}.eyebrow,.section-kicker{color:var(--gold2);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}.hero h1{font-family:var(--serif);font-size:clamp(62px,8vw,128px);line-height:.83;font-weight:600;margin:18px 0 28px;letter-spacing:-.045em;text-align:center}.hero h1 em,h1 span,h2 span{color:var(--gold2);font-style:normal}.hero-lead{max-width:650px;color:#eee7da;font-size:18px;text-align:center;margin-left:auto;margin-right:auto}.hero-actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:34px}.hero-scroll{position:absolute;z-index:2;bottom:24px;left:50%;transform:translateX(-50%);color:rgba(245,239,227,.62);font-size:10px;letter-spacing:.22em}.hero-scroll span{color:var(--gold2);margin-left:8px}.section{max-width:1500px;margin:auto;padding:115px 7vw}.intro{padding-top:120px}.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:8vw;margin-top:22px}.intro h2,.section h2{font-family:var(--serif);font-size:clamp(48px,5.5vw,82px);line-height:.95;margin:0;font-weight:600;letter-spacing:-.035em}.intro p{font-size:18px;color:#d2cabe;margin-top:0}.muted{color:var(--muted)!important}.feature-image{position:relative;margin:0 7vw;min-height:610px;overflow:hidden;border:1px solid rgba(201,164,76,.18)}.feature-image img{width:100%;height:610px;object-fit:cover}.feature-caption{position:absolute;left:36px;bottom:34px;background:rgba(5,13,10,.76);backdrop-filter:blur(12px);border:1px solid var(--line);padding:18px 22px;min-width:270px}.feature-caption span{display:block;color:var(--gold2);font-size:10px;letter-spacing:.2em}.feature-caption strong{font-family:var(--serif);font-size:32px;font-weight:600}.dark-section{max-width:none;background:linear-gradient(180deg,#06100c,#081710)}.dark-section>*{max-width:1500px;margin-left:auto;margin-right:auto}.section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:34px}.section-head h2{margin-top:10px}.match-placeholder{display:flex;align-items:center;gap:22px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(18,56,43,.7),rgba(5,13,10,.72));padding:30px;border-radius:24px}.match-icon{width:54px;height:54px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold2);font-size:22px}.match-placeholder strong{font-family:var(--serif);font-size:30px}.match-placeholder p{margin:3px 0 0;color:var(--muted)}.category-pills{display:flex;gap:9px;overflow:auto;padding-bottom:12px;margin-bottom:28px;scrollbar-width:thin}.category-pills button{flex:0 0 auto;border:1px solid var(--line);background:#0b1b14;color:var(--cream);border-radius:999px;padding:11px 16px;cursor:pointer;font-weight:700}.category-pills button.active,.category-pills button:hover{background:var(--gold);color:#07120d;border-color:var(--gold2)}.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dish{background:linear-gradient(145deg,#0d2118,#09150f);border:1px solid rgba(201,164,76,.2);border-radius:20px;padding:23px 24px;transition:.35s ease;position:relative}.dish:hover{transform:translateY(-3px);border-color:rgba(201,164,76,.6);box-shadow:0 16px 44px rgba(0,0,0,.25)}.dish-top{display:flex;justify-content:space-between;gap:15px}.dish h3{font-family:var(--serif);font-size:29px;line-height:1;margin:0}.price{color:var(--gold2);font-weight:700;white-space:nowrap}.dish p{color:var(--muted);font-size:14px;margin:10px 0 0}.gallery-grid{display:grid;grid-template-columns:1.35fr .8fr .8fr;grid-auto-rows:260px;gap:14px}.gallery-grid figure{margin:0;overflow:hidden;border:1px solid rgba(201,164,76,.16);background:#0a1510}.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;filter:saturate(.9)}.gallery-grid figure:hover img{transform:scale(1.04)}.g-large{grid-row:span 2}.g-tall{grid-row:span 2}.g-wide{grid-column:span 2}.booking{background:radial-gradient(circle at 80% 20%,rgba(28,84,57,.28),transparent 35%),#08150f}.booking-shell{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}.booking-copy h2{margin-top:12px}.booking-copy p{color:var(--muted);max-width:430px}.booking-contact{display:grid;gap:6px;margin-top:30px}.booking-contact a{color:var(--gold2)}.booking-form{background:rgba(4,12,8,.58);border:1px solid var(--line);padding:28px;border-radius:26px;box-shadow:var(--shadow)}.booking-form label{display:grid;gap:7px;color:#d9d1c4;font-size:12px;font-weight:700;margin-bottom:15px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.booking-form input,.booking-form select,.booking-form textarea{width:100%;background:#0b1b14;border:1px solid rgba(201,164,76,.24);color:var(--cream);border-radius:12px;padding:13px 14px;outline:none}.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{border-color:var(--gold2);box-shadow:0 0 0 3px rgba(201,164,76,.1)}.booking-form textarea{resize:vertical}.booking-form small{display:block;color:#77766f;margin-top:10px}.hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0}.submit{border:0;cursor:pointer;width:100%;margin-top:5px}.hours-contact{display:grid;grid-template-columns:1fr 1fr;gap:18px}.hours-card,.contact-card{background:linear-gradient(145deg,#0c2118,#07110c);border:1px solid rgba(201,164,76,.28);padding:38px;border-radius:26px}.hours-card h2,.contact-card h2{font-family:var(--serif);font-size:52px;margin:5px 0 28px}.hours-list{display:grid;gap:0}.hours-list div{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid rgba(201,164,76,.14)}.hours-list strong{color:var(--gold2)}.contact-card p{color:#d5cec2;font-size:17px}.contact-card a:not(.gold-pill):not(.outline-pill){color:var(--gold2)}.contact-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}footer{background:#030806;border-top:1px solid rgba(201,164,76,.28);padding:55px 7vw 22px}.footer-inner{max-width:1500px;margin:auto;display:grid;grid-template-columns:180px 1fr auto;gap:50px;align-items:center}.footer-inner img{width:170px}.footer-links{display:flex;flex-wrap:wrap;gap:18px;color:#bdb5a8}.footer-links a:hover{color:var(--gold2)}.footer-contact{display:grid;text-align:right;gap:5px;color:var(--gold2)}.footer-bottom{max-width:1500px;margin:38px auto 0;padding-top:20px;border-top:1px solid rgba(201,164,76,.12);text-align:center;color:#77756d;font-size:11px;letter-spacing:.03em}.result-page{min-height:100vh;display:grid;place-items:center;padding:40px;background:radial-gradient(circle at 50% 20%,#153d2c,#050d0a 50%)}.result-page>img{width:220px;position:absolute;top:40px}.result-card{max-width:620px;margin-top:80px;text-align:center;background:#0b1c14;border:1px solid var(--line);border-radius:28px;padding:55px}.result-card h1{font-family:var(--serif);font-size:56px;line-height:1;margin:12px 0}.result-card p{color:var(--muted);margin-bottom:28px}.menu-page main h1{font-family:var(--serif);font-size:82px;margin:8px 0 30px}.menu-section{margin-bottom:60px}.menu-section h2{font-family:var(--serif);font-size:45px;border-bottom:1px solid var(--line);padding-bottom:12px}.full-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:1150px){.nav .pill span{display:none}.nav .pill{width:44px;padding:0}.header-inner{gap:10px}.brand{width:130px}.header-actions .book-pill{padding:0 12px}.intro-grid,.booking-shell{gap:40px}.gallery-grid{grid-template-columns:1fr 1fr}.g-large{grid-column:span 2;grid-row:span 1}.g-tall{grid-row:span 1}.g-wide{grid-column:span 2}}
@media(max-width:820px){.hero-media{background:#050d0a;display:flex;align-items:center;justify-content:center}.hero-media .hero-video{width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center center}.hero-overlay{background:linear-gradient(180deg,rgba(3,9,6,.62) 0%,rgba(3,10,7,.20) 45%,rgba(3,9,6,.72) 100%)}.site-header{position:fixed}.header-inner{height:74px;padding:0 15px}.brand{width:108px}.nav{position:absolute;left:12px;right:12px;top:82px;background:#07110c;border:1px solid var(--line);border-radius:20px;padding:12px;display:none;flex-wrap:wrap}.nav.open{display:flex}.nav .pill{width:auto;padding:0 13px}.nav .pill span{display:inline}.header-actions{margin-left:auto}.header-actions .book-pill{display:none}.lang-btn{font-size:11px}.mobile-toggle{display:block}.hero{min-height:92vh;min-height:92svh}.hero-content{padding:130px 22px 80px}.hero h1{font-size:clamp(56px,16vw,92px)}.hero-lead{font-size:16px}.hero-actions{gap:8px}.section{padding:80px 22px}.intro-grid,.booking-shell,.hours-contact{grid-template-columns:1fr}.feature-image{margin:0 22px;min-height:430px}.feature-image img{height:430px}.section-head{align-items:flex-start;flex-direction:column}.menu-grid,.full-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:220px}.g-large,.g-wide{grid-column:span 2}.form-row{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr;gap:25px}.footer-contact{text-align:left}.footer-bottom{line-height:1.6}.menu-page main h1{font-size:60px}}
@media(max-width:500px){.header-inner{gap:7px}.brand{width:92px}.lang-btn{padding:0 8px}.mobile-toggle{width:40px;height:40px}.hero-actions a{width:100%}.feature-image{min-height:360px}.feature-image img{height:360px}.gallery-grid{grid-template-columns:1fr;grid-auto-rows:260px}.g-large,.g-wide{grid-column:span 1}.booking-form{padding:20px}.hours-card,.contact-card{padding:25px}.hours-list div{font-size:13px}.result-card{padding:35px 24px}.result-card h1{font-size:43px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.matches-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.match-card{background:linear-gradient(145deg,#0c2118,#07110c);border:1px solid rgba(201,164,76,.28);border-radius:24px;padding:25px}.match-card.featured{border-color:var(--gold2);box-shadow:0 18px 50px rgba(0,0,0,.3)}.match-meta{display:flex;justify-content:space-between;color:var(--gold2);font-size:10px;text-transform:uppercase;letter-spacing:.15em}.match-teams{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:35px 0 18px;font-family:var(--serif);font-size:28px;line-height:1}.match-teams strong:last-child{text-align:right}.match-teams b{font-family:var(--sans);font-size:10px;color:var(--muted)}.match-date{color:#c9c1b5;margin-bottom:20px}.admin-body{background:#050d0a;min-height:100vh}.admin-header{height:82px;padding:0 5vw;border-bottom:1px solid rgba(201,164,76,.25);display:flex;align-items:center;justify-content:space-between;background:#030806;position:sticky;top:0;z-index:10}.admin-header img{width:125px}.admin-header div{display:flex;gap:18px;align-items:center}.admin-header span{font-size:10px;letter-spacing:.2em;color:var(--gold2)}.admin-header a{color:#cfc7ba;font-size:13px}.admin-main{max-width:1200px;margin:auto;padding:55px 24px 100px}.admin-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.admin-title h1,.admin-login h1{font-family:var(--serif);font-size:60px;line-height:1;margin:8px 0}.admin-saved{color:#cde4d2;border:1px solid rgba(100,180,120,.35);background:rgba(50,120,70,.12);padding:10px 15px;border-radius:999px}.admin-card{background:linear-gradient(145deg,#0c2118,#07110c);border:1px solid rgba(201,164,76,.25);border-radius:26px;padding:30px;margin:18px 0}.admin-card h2{font-family:var(--serif);font-size:40px;margin:5px 0 22px}.admin-hours{display:grid;gap:8px;margin-bottom:20px}.admin-hour{display:grid;grid-template-columns:130px 1fr 15px 1fr 110px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(201,164,76,.1)}.admin-hour input[type=time],.admin-match-form input,.admin-row select{background:#0b1b14;border:1px solid rgba(201,164,76,.25);color:var(--cream);border-radius:10px;padding:10px}.admin-hour label{font-size:12px;color:#bdb5a8}.admin-match-form{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}.admin-match-form label{display:flex;align-items:center;gap:7px;font-size:12px;color:#bdb5a8}.admin-match-form button{min-height:44px}.admin-list{display:grid;gap:8px}.admin-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px;border:1px solid rgba(201,164,76,.13);border-radius:14px;background:rgba(4,12,8,.35)}.admin-row small{display:block;color:var(--muted);margin-top:4px}.admin-row form{display:flex;gap:8px;align-items:center}.admin-row .danger{border:1px solid rgba(210,90,70,.45);background:transparent;color:#e8a397;border-radius:999px;padding:9px 13px;cursor:pointer}.admin-muted{color:var(--muted)}.admin-page{min-height:100vh;display:grid;place-items:center;padding:100px 20px;background:radial-gradient(circle at 50% 20%,#153d2c,#050d0a 50%)}.admin-logo{width:200px;position:absolute;top:35px}.admin-login{width:min(450px,100%);background:#0b1c14;border:1px solid var(--line);border-radius:26px;padding:35px}.admin-login label{display:grid;gap:7px;font-size:12px;font-weight:700;margin-bottom:15px}.admin-login input{background:#0b1b14;border:1px solid rgba(201,164,76,.24);color:var(--cream);border-radius:12px;padding:13px}.admin-error{color:#e8a397;border:1px solid rgba(210,90,70,.3);padding:10px;border-radius:10px}.booking-row{align-items:flex-start}.booking-row a{color:var(--gold2)}
@media(max-width:820px){.matches-grid{grid-template-columns:1fr}.admin-hour{grid-template-columns:1fr 1fr 15px 1fr}.admin-hour label{grid-column:span 4}.admin-match-form{grid-template-columns:1fr 1fr}.admin-title{align-items:flex-start;gap:15px;flex-direction:column}}@media(max-width:500px){.admin-match-form{grid-template-columns:1fr}.admin-hour{grid-template-columns:1fr 1fr 15px 1fr}.admin-header div{gap:8px}.admin-header a{font-size:11px}}

/* Overlay tonad mot husets gröna, inte neutralt svart. Videon är köpt stockmaterial
   med kall blå skärm - utan den gröna tonen läser hero som vilken bar som helst. */
.hero-overlay{
  background:
    radial-gradient(ellipse at 50% 44%,rgba(18,56,43,.42),transparent 66%),
    linear-gradient(180deg,rgba(5,13,10,.74) 0%,rgba(5,13,10,.40) 44%,rgba(5,13,10,.94) 100%);
}

/* Öppet nu. Det första en gäst vill veta - och det enda hero säger som ändras. */
.hero-status{
  display:inline-flex;align-items:center;gap:10px;
  margin:22px 0 0;padding:9px 18px;
  border:1px solid rgba(201,164,76,.34);border-radius:999px;
  background:rgba(5,13,10,.52);backdrop-filter:blur(10px);
  font-size:13px;color:#d9d1c4;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.hero-status strong{color:var(--cream);font-weight:700}
.hero-status .dot{width:8px;height:8px;border-radius:50%;background:#7d776c;flex:0 0 auto}
.hero-status.is-open{border-color:rgba(120,200,145,.45)}
.hero-status.is-open strong{color:#8fe0aa}
.hero-status.is-open .dot{background:#4ec27c;animation:livePulse 2.4s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(78,194,124,.45)}50%{opacity:.62;box-shadow:0 0 0 7px rgba(78,194,124,0)}}

/* Video: kortad loop utan ljudspår, liggande på desktop och stående på mobil.
   Därför bort med den gamla contain-nödlösningen - cover fyller nu korrekt. */
.hero-video{object-fit:cover;object-position:center}
.hero-actions{margin-top:26px}

@media(max-width:820px){
  .hero-media{background:var(--bg);display:block}
  .hero-media .hero-video{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
  .hero-overlay{
    background:
      radial-gradient(ellipse at 50% 40%,rgba(18,56,43,.40),transparent 70%),
      linear-gradient(180deg,rgba(5,13,10,.72) 0%,rgba(5,13,10,.34) 46%,rgba(5,13,10,.95) 100%);
  }
    .hero-content{padding:118px 22px 92px}
  .hero-status{font-size:12px;padding:8px 15px}
}
@media(max-width:500px){
    .hero-lead{font-size:15px}
}

@media(prefers-reduced-motion:reduce){
    .hero-status.is-open .dot{animation:none}
}

/* --------------------------------------------------------------------------
   Logotypbyte: den nya märket är kvadratiskt (1:1), det gamla var 1,25:1.
   Alla ytor som satte BREDD på loggan skulle därför spränga sin container -
   155 px bred logga i en 88 px hög header blir 154 px hög. Höjdstyr i stället.
   -------------------------------------------------------------------------- */
.brand{width:auto;flex:0 0 auto}
.brand img{width:auto;height:62px;object-fit:contain}
.admin-header img{width:auto;height:56px}
.footer-inner{grid-template-columns:132px 1fr auto}
.footer-inner img{width:132px;height:auto}
@media(max-width:1150px){.brand img{height:56px}}
@media(max-width:820px){
  .brand{width:auto}
  .brand img{height:50px}
  .footer-inner{grid-template-columns:1fr}
}
@media(max-width:500px){.brand{width:auto}.brand img{height:44px}}


/* ==========================================================================
   HERO — justering: logotyp -70 %, video utan nedtoning.
   Ligger sist i filen och skriver över blocken ovan.
   ========================================================================== */

/* -70 %: 420 -> 126 px, 33vw -> 9.9vw, 238 -> 72 px */

/* Videon visas i 100 %. Ingen nedtoning alls. */
.hero-overlay{background:none}

/* Kompensation: skuggorna ligger tätt mot kanten och mörkar INTE videon.
   Utan dem försvinner cream mot storbilden i bakgrunden - se anteckning. */
.hero .eyebrow,.hero-lead,.hero-scroll{text-shadow:0 1px 3px rgba(0,0,0,.9),0 6px 20px rgba(0,0,0,.65)}

@media(max-width:820px){
  .hero-overlay{background:none}
  }
@media(max-width:500px){
  }


/* ==========================================================================
   FORMLÅS + HERO v7
   ========================================================================== */

/* Roten till den ovala loggan: width/height-attribut på <img> ger webblasaren
   en fast HOJD, medan max-width:100% trycker ihop BREDDEN nar utrymmet ar
   smalare an attributet. Kvar star en tillplattad oval. height:auto pa
   elementnivan later hojden folja med bredden - overallt, aven om en enskild
   regel skulle glommas. Regler som medvetet satter hojd (.gallery-grid img,
   .hero-media img) har hogre specificitet och paverkas inte. */
img{height:auto}
.gallery-grid img,.hero-media img,.feature-image img,.hero-video{height:100%}

/* Logotypen: hojdstyrd i header/admin, breddstyrd i footer - aldrig bada. */
.brand img{width:auto;height:62px}
.admin-header img{width:auto;height:56px}
.footer-inner img{width:132px;height:auto}

/* Hero v7: text-h1 tillbaka (utan logotyp), samma status/knappar som forut. */
.hero h1{font-family:var(--serif);font-size:clamp(56px,7vw,110px);line-height:.85;font-weight:600;margin:16px 0 22px;letter-spacing:-.04em}
@media(max-width:820px){
  .brand img{height:50px}
  .hero h1{font-size:clamp(44px,13vw,80px)}
}
@media(max-width:500px){.brand img{height:44px}}

/* Logotypen på boknings- och loginsidan ligger nu i <picture> - de gamla
   direktbarns-selektorerna traffar inte langre. Wrappern tar positionen,
   bilden fyller den, hojden foljer bredden. */
.result-page>picture{position:absolute;top:40px;width:220px}
.result-page>picture img,.admin-page picture .admin-logo{width:100%;height:auto;position:static}
.admin-page>picture{position:absolute;top:35px;width:200px}

/* ==========================================================================
   KLICKYTOR — WCAG 2.5.8 / Apple HIG: minst 44 px hög träffyta.
   Telefon- och mejllänkarna låg på 19–26 px. Det är den viktigaste knappen
   på hela sajten för en sportbar i mobil, och den var svårast att träffa.
   ========================================================================== */
.contact-card a:not(.gold-pill):not(.outline-pill),
.booking-contact a,
.footer-contact a,
.footer-links a{
  display:inline-flex;align-items:center;min-height:44px;
}
.footer-links{gap:6px 18px}
.footer-links a{padding:0 2px}
.footer-contact{gap:0}
.hours-list div{min-height:44px;align-items:center}

/* Tangentbordsfokus ska synas mot mörk botten. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold2);outline-offset:3px;border-radius:4px;
}

/* Typsnitten hämtas från Google. Faller de bort ska sidan inte hoppa till
   Times - Georgia och Arial ligger metriskt betydligt närmare. */

/* ==========================================================================
   ADMIN PÅ MOBIL
   Öppettidsraden låg på ett fast rutnät (130px + 1fr + 15px + 1fr + 110px) som
   summerar till mer än en telefonskärm — panelen sköt ut ~40 px åt höger och
   gav vågrät scroll. Under 820 px läggs raden om till två rader: dagen överst,
   tiderna under, "Stängt"-rutan sist. Inget fast mått kvar.
   ========================================================================== */
@media(max-width:820px){
  .admin-hour{
    display:grid;grid-template-columns:1fr auto 1fr;gap:8px 10px;align-items:center;
    padding:14px 0;
  }
  .admin-hour>strong{grid-column:1/-1;color:var(--gold2)}
  .admin-hour label{grid-column:1/-1;min-height:44px}
  .admin-hour input[type=time]{width:100%;min-width:0;min-height:44px}
  .admin-main{padding:34px 16px 80px;max-width:100%}
  .admin-card{padding:20px 16px}
  .admin-row{flex-wrap:wrap;gap:12px}
  .admin-row form{flex-wrap:wrap}
  .admin-match-form input,.admin-match-form button{min-width:0;width:100%}
  .admin-header{padding:0 16px}
  .admin-header img{height:44px}
}
@media(max-width:500px){
  .admin-hour{grid-template-columns:1fr auto 1fr}
  .admin-title h1,.admin-login h1{font-size:38px}
  .admin-card h2{font-size:30px}
}

/* Kryssrutan i admin var ~16 px — för liten att träffa med tummen.
   Etiketten ger redan 44 px träffyta, rutan själv förstoras för synlighet. */
.admin-hour input[type=checkbox]{width:22px;height:22px;accent-color:var(--gold);cursor:pointer}
.admin-hour label{gap:10px;cursor:pointer}


/* ==========================================================================
   GLITTRANDE GULD — enhetlig knappeffekt på hela sajten
   Ett svep av ljusare guld rullar tvärs över knappen vid hover och klick.
   Bygger på ::after så ingen befintlig bakgrund eller ram rörs. Alla knappar
   delar samma klassuppsättning, så effekten är identisk överallt.
   ========================================================================== */

.pill,.gold-pill,.outline-pill,.category-pills button,
button[type=submit],.lang-btn,.mobile-toggle,.admin-card button{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),
             box-shadow .2s cubic-bezier(.2,.8,.2,1),
             border-color .2s ease;
}

/* Själva glittret: en smal diagonal ljusstrimma som sveper vänster→höger. */
.pill::after,.gold-pill::after,.outline-pill::after,.category-pills button::after,
button[type=submit]::after,.lang-btn::after,.admin-card button::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,
    transparent 0%,
    rgba(201,164,76,.00) 34%,
    rgba(241,217,138,.55) 46%,
    rgba(255,246,214,.92) 51%,
    rgba(241,217,138,.55) 56%,
    rgba(201,164,76,.00) 68%,
    transparent 100%);
  background-size:260% 100%;background-position:140% 0;
  opacity:0;transition:opacity .18s ease;
}

@keyframes goldSweep{
  0%{background-position:140% 0}
  100%{background-position:-60% 0}
}

.pill:hover::after,.gold-pill:hover::after,.outline-pill:hover::after,
.category-pills button:hover::after,button[type=submit]:hover::after,
.lang-btn:hover::after,.admin-card button:hover::after,
.pill:focus-visible::after,.gold-pill:focus-visible::after,.outline-pill:focus-visible::after,
.category-pills button:focus-visible::after,button[type=submit]:focus-visible::after{
  opacity:1;animation:goldSweep 1.05s cubic-bezier(.3,.1,.2,1) infinite;
}

/* Klick: snabbare, ljusare svep + tryckkänsla. */
.pill:active::after,.gold-pill:active::after,.outline-pill:active::after,
.category-pills button:active::after,button[type=submit]:active::after,
.lang-btn:active::after,.admin-card button:active::after{
  opacity:1;animation:goldSweep .42s cubic-bezier(.2,.8,.2,1) 1;
}
.pill:hover,.gold-pill:hover,.outline-pill:hover,.category-pills button:hover,
button[type=submit]:hover,.lang-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(241,217,138,.9);
  box-shadow:0 8px 24px rgba(201,164,76,.26);
}
.pill:active,.gold-pill:active,.outline-pill:active,.category-pills button:active,
button[type=submit]:active,.lang-btn:active{transform:translateY(0) scale(.985)}

/* Aktiv kategori får ett långsamt, ständigt glitter så man ser var man är. */
.category-pills button.active::after{opacity:.65;animation:goldSweep 3.4s linear infinite}

@media(prefers-reduced-motion:reduce){
  .pill::after,.gold-pill::after,.outline-pill::after,.category-pills button::after,
  button[type=submit]::after,.lang-btn::after,.admin-card button::after{animation:none!important}
  .pill:hover,.gold-pill:hover,.outline-pill:hover,.category-pills button:hover{transform:none}
}


/* ==========================================================================
   MENYKATEGORIER — alla synliga utan att dra i sidled
   Raden låg i overflow:auto, så de sista kategorierna (Öl, Alkoholfritt …)
   var dolda bakom en osynlig sidoscroll. Nu radbryts de i stället.
   ========================================================================== */
.category-pills{
  display:flex;flex-wrap:wrap;overflow:visible;
  gap:10px;padding-bottom:0;margin-bottom:30px;justify-content:flex-start;
}
.category-pills button{flex:0 1 auto;min-height:44px;white-space:nowrap}
@media(max-width:820px){
  .category-pills{gap:8px}
  .category-pills button{padding:10px 13px;font-size:13px}
}
@media(max-width:500px){
  .category-pills button{padding:9px 11px;font-size:12.5px}
}


/* ==========================================================================
   FOOTERTEXTEN — var #77756d på nästan svart. Nästan osynlig.
   Nu guldtonad med samma glitter som knapparna, och större.
   ========================================================================== */
.footer-bottom{
  font-size:14px;letter-spacing:.04em;color:transparent;
  background:linear-gradient(100deg,#b38b38 0%,#e1c36a 22%,#fff6d6 40%,#e1c36a 58%,#b38b38 80%,#e1c36a 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:footerShimmer 7s linear infinite;
}
@keyframes footerShimmer{0%{background-position:0 0}100%{background-position:220% 0}}

/* Reserv: klarar webbläsaren inte background-clip blir texten ren guld
   i stället för osynlig — aldrig samma fel som förut. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .footer-bottom{color:var(--gold2);background:none;animation:none}
}
@media(prefers-reduced-motion:reduce){.footer-bottom{animation:none}}
@media(max-width:500px){.footer-bottom{font-size:13px}}

.nowrap{white-space:nowrap}
.pill-ico{font-style:normal;opacity:.85}


/* ==========================================================================
   HERO — video 90 %, plus läsbar textyta
   ========================================================================== */

/* Videon ligger på 90 % mot den mörka sidbotten. Det du bad om. */
.hero-video{opacity:.9}

/* 10 % räcker dock inte för att texten ska bli läsbar — se anteckning i svaret.
   Därför en mjuk sköld BAKOM texten i stället för över hela bilden: videon
   syns oförändrad i kanterna, men rubrik, status och knappar får botten.
   Vill du bort med den räcker det att radera det här blocket. */
.hero-content{position:relative;z-index:2}
.hero-content::before{
  content:"";position:absolute;z-index:-1;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1180px,132%);height:min(760px,138%);
  background:radial-gradient(ellipse at center,
    rgba(5,13,10,.86) 0%,
    rgba(5,13,10,.72) 38%,
    rgba(5,13,10,.42) 62%,
    rgba(5,13,10,0)   80%);
  pointer-events:none;
}
@media(max-width:820px){
  .hero-content::before{width:150%;height:120%;
    background:radial-gradient(ellipse at center,
      rgba(5,13,10,.88) 0%,rgba(5,13,10,.74) 44%,rgba(5,13,10,.40) 68%,rgba(5,13,10,0) 84%);}
}


/* ==========================================================================
   VECKANS LUNCH — publik vy
   Upplägg enligt referensen: mörk rubrikbanner överst, dagskort i rutnät
   under. Paletten är husets egen — inget lila, inget beige.
   ========================================================================== */
.lunch-board{
  border:1px solid rgba(201,164,76,.22);border-radius:6px;overflow:hidden;
  background:var(--bg2);
}
/* Sticky-headern är 88 px hög - utan detta hamnar rubriken under den när
   man hoppar hit via ankarlänk. */
#lunch{scroll-margin-top:104px}

/* --- Rubrikbannern ------------------------------------------------------- */
.lunch-head{
  background:linear-gradient(160deg,var(--green) 0%,#0d2a20 55%,var(--panel) 100%);
  border-bottom:1px solid rgba(201,164,76,.26);
  padding:38px 30px 32px;text-align:center;
}
.lunch-head h2{
  font-family:var(--serif);font-size:clamp(34px,4.4vw,52px);line-height:1;
  font-weight:600;letter-spacing:.02em;margin:0;color:var(--cream);
}
.lunch-week{
  margin:10px 0 0;font-size:13px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold2);
}
.lunch-facts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.lunch-fact{
  display:inline-flex;align-items:center;min-height:42px;padding:0 20px;
  border:1px solid rgba(201,164,76,.45);border-radius:999px;
  background:rgba(5,13,10,.42);color:var(--cream);
  font-size:13.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
}
.lunch-fact.is-price{
  background:linear-gradient(135deg,#b38b38,#e1c36a);color:#07120d;border-color:#f1d98a;
}
.lunch-included{margin:18px 0 0;color:var(--muted);font-size:14px;line-height:1.5}

/* --- Dagskorten ---------------------------------------------------------
   grid-auto-rows:1fr gör ALLA rader lika höga, så ett kort med tre rätter
   blir exakt lika stort som ett med fem. Utan den raden blir korten olika. */
.lunch-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:1fr;gap:16px;padding:22px;
}
/* Tre kolumner, inte auto-fit: fem dagar i auto-fit ger fyra kort på rad ett
   och ett ensamt på rad två. 3+2 balanserar veckan och ger varje rätt plats
   att stå på en rad i stället för att brytas i tre. */
@media(max-width:1000px){.lunch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lunch-card{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid rgba(201,164,76,.16);border-radius:4px;
  padding:20px 20px 18px;
  box-shadow:inset 0 1px 0 rgba(245,239,227,.05);
}
.lunch-card.is-today{
  border-color:rgba(225,195,106,.62);
  box-shadow:inset 0 1px 0 rgba(245,239,227,.09),0 0 0 1px rgba(225,195,106,.22);
}
.lunch-card-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid rgba(201,164,76,.22);
}
.lunch-card-head h3{
  font-family:var(--serif);font-size:21px;line-height:1;margin:0;
  color:var(--gold2);letter-spacing:.06em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;
}
.lunch-card-head time{
  color:var(--muted);font-size:12px;letter-spacing:.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.lunch-badge{
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#07120d;
  background:linear-gradient(135deg,#b38b38,#e1c36a);
  border-radius:999px;padding:4px 9px;line-height:1;
}
.lunch-card ul{list-style:none;margin:0;padding:0;flex:1}
.lunch-card li{
  position:relative;padding:11px 0 11px 17px;
  border-top:1px solid rgba(201,164,76,.10);
  display:flex;flex-direction:column;gap:3px;
}
.lunch-card li:first-child{border-top:0}
.lunch-card li::before{
  content:"";position:absolute;left:2px;top:18px;
  width:5px;height:5px;border-radius:50%;background:var(--gold);
}
.lunch-dish{color:var(--cream);font-weight:700;font-size:14.5px;line-height:1.42}
.lunch-desc{color:var(--muted);font-size:13px;line-height:1.5}

@media(max-width:820px){
  .lunch-head{padding:30px 20px 26px}
  .lunch-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px;padding:16px}
  .lunch-card{padding:18px 16px 16px}
  .lunch-card-head h3{font-size:19px}
  .lunch-fact{min-height:40px;padding:0 16px;font-size:13px}
}

/* ==========================================================================
   VECKANS LUNCH — admin
   ========================================================================== */
.lunch-weekpick{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lunch-weekpick label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px}
.lunch-weekpick input{
  width:82px;min-height:44px;background:#0b1b14;color:var(--cream);
  border:1px solid var(--line);border-radius:4px;padding:0 10px;font:inherit;
}
.lunch-day{margin-top:26px;padding-top:18px;border-top:1px solid rgba(201,164,76,.14)}
.lunch-day h3{
  font-family:var(--serif);font-size:25px;margin:0 0 12px;color:var(--gold2);line-height:1;
}
.lunch-row{
  display:grid;grid-template-columns:26px minmax(0,1fr) minmax(0,1.35fr);
  gap:10px;align-items:center;margin-bottom:9px;
}
.lunch-no{color:var(--muted);font-size:13px;text-align:center}
.lunch-row input{
  min-width:0;min-height:44px;background:#0b1b14;color:var(--cream);
  border:1px solid var(--line);border-radius:4px;padding:0 12px;font:inherit;font-size:14px;
}
.lunch-row input::placeholder{color:#6f6d66}
.lunch-row input:focus{border-color:var(--gold);outline:none}
.lunch-info{margin-top:30px;padding-top:20px;border-top:1px solid rgba(201,164,76,.14)}
.lunch-info-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:12px;
}
.lunch-info-grid label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px}
.lunch-info-grid input{
  min-width:0;min-height:44px;background:#0b1b14;color:var(--cream);
  border:1px solid var(--line);border-radius:4px;padding:0 12px;font:inherit;font-size:14px;
}
.lunch-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media(max-width:820px){
  .lunch-row{grid-template-columns:22px minmax(0,1fr);gap:8px}
  .lunch-row input:last-child{grid-column:2}
  .lunch-no{align-self:start;line-height:44px}
  .lunch-weekpick input{width:74px}
  .lunch-actions button,.lunch-actions .outline-pill{flex:1 1 100%}
}


/* ==========================================================================
   LUNCHENS TYPOGRAFI — Frutiger LT Std
   Fontfilerna saknas i projektet (se assets/fonts/LÄS-MIG.txt).
   @font-face ligger INTE här utan skrivs ut av index.php, och bara när
   filerna faktiskt finns på disk. Annars skulle varje besökare dra tre
   404-anrop mot fonter som inte existerar. Utan deklarationen hoppar
   webbläsaren direkt vidare i stacken - noll nätverksanrop.
   Reserv: Segoe UI (närmast Frutiger av de förinstallerade) → Manrope, som
   redan laddas och därför inte kostar en enda extra byte.
   ========================================================================== */
:root{
  --lunch-font:'Frutiger LT Std','Segoe UI',var(--sans),system-ui,sans-serif;
  /* Curry-guld. #C9A227 ger 7,22:1 mot kortens botten - godkänt med marginal.
     Solid färg, ingen gradient: gradienttext tappar kantskärpa i småtext. */
  --curry:#C9A227;
}

/* Hela lunchsektionen kör Frutiger. Resten av sajten rörs inte. */
#lunch{font-family:var(--lunch-font)}
#lunch .lunch-head h2{
  font-family:var(--lunch-font);font-weight:850;
  letter-spacing:-.005em;font-size:clamp(32px,4vw,46px);
}
#lunch .lunch-week{font-weight:700}
#lunch .lunch-fact{font-weight:700}
#lunch .lunch-card-head h3{font-family:var(--lunch-font);font-weight:700;letter-spacing:.08em}

/* Maträtten dominerar: större, fetare, i huvudtextfärgen. */
#lunch .lunch-dish{
  font-family:var(--lunch-font);font-weight:700;
  font-size:16px;line-height:1.35;color:var(--cream);
}
/* Ingredienserna: Roman-vikt i curry-guld. Aldrig kursivt, aldrig Light. */
#lunch .lunch-desc{
  font-family:var(--lunch-font);font-weight:400;font-style:normal;
  font-size:14px;line-height:1.45;color:var(--curry);
}
#lunch .lunch-included{font-weight:400;color:var(--curry);font-size:14.5px}

/* Fem rätter per dag ska rymmas utan att något kapas eller överlappar.
   Inga fasta höjder, ingen overflow:hidden - korten växer med innehållet
   och rutnätet drar upp alla kort till samma höjd. */
#lunch .lunch-card ul{overflow:visible}
#lunch .lunch-card li{padding:10px 0 10px 17px;overflow-wrap:anywhere}
#lunch .lunch-dish,#lunch .lunch-desc{overflow-wrap:anywhere;hyphens:none}

@media(max-width:820px){
  #lunch .lunch-dish{font-size:15.5px}
  #lunch .lunch-desc{font-size:13.5px}
}


/* ==========================================================================
   MENYINGREDIENSER I CURRY-GULD
   Beskrivningsraden under varje rätt låg i --muted (grå). Nu samma varma
   curry-guld som lunchen, både på startsidan och menysidan.
   7,4:1 mot kortets botten — läsbart, inte dekorativt.
   ========================================================================== */
.dish p{color:var(--curry)}

/* ==========================================================================
   GALLERIET — matbilder och video
   Miljöbildernas mosaik (g-large/g-tall/g-wide) ligger kvar överst.
   Matbilderna som följer är likformiga rutor så väggen inte blir spretig.
   ========================================================================== */
.gallery-grid figure img{width:100%;height:100%;object-fit:cover;display:block}

.gallery-grid .g-video{position:relative;background:#0a1510}
.gallery-grid .g-video video{
  width:100%;height:100%;object-fit:cover;display:block;
  background:#0a1510;
}
.tile-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,13,10,.6);border:1px solid rgba(201,164,76,.5);
  color:var(--gold2);font-size:17px;padding-left:3px;
  backdrop-filter:blur(6px);pointer-events:none;
  transition:opacity .3s ease;
}
.g-video.is-playing .tile-play{opacity:0}

@media(max-width:820px){
  /* Fyra rader mosaik + 22 rutor i en kolumn blir en oändlig vägg på mobil.
     Två kolumner håller sektionen greppbar utan att bilderna blir frimärken. */
  .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
  .gallery-grid .g-large{grid-column:span 2;grid-row:span 2}
  .gallery-grid .g-wide{grid-column:span 2;grid-row:span 1}
  .gallery-grid .g-tall{grid-row:span 2}
}
@media(max-width:500px){
  .gallery-grid{grid-auto-rows:132px;gap:10px}
  .tile-play{width:46px;height:46px;font-size:15px}
}

/* Mosaikens g-large/g-tall/g-wide spänner över flera rutor och lämnar hål.
   Med sex bilder märktes det knappt; med 28 blir hålen tydliga. dense låter
   efterföljande rutor backfylla luckorna utan att något flyttas i koden. */
.gallery-grid{grid-auto-flow:dense}


/* ==========================================================================
   BOKNING — reCAPTCHA och statusar
   ========================================================================== */

/* Googles widget är 304 px bred och kan inte skalas om — den skulle spränga
   en 360 px-skärm med padding. transform-scale krymper den utan att göra
   kryssrutan svårträffad, och wrappern äter upp den tomma ytan. */
.captcha-wrap{margin:6px 0 18px;min-height:78px}
.captcha-wrap .g-recaptcha{transform-origin:0 0}
.captcha-note{color:var(--muted);font-size:13px;margin:8px 0 0}
@media(max-width:420px){
  .captcha-wrap{min-height:70px;overflow:hidden}
  .captcha-wrap .g-recaptcha{transform:scale(.86)}
}
@media(max-width:360px){
  .captcha-wrap{min-height:64px}
  .captcha-wrap .g-recaptcha{transform:scale(.78)}
}

/* Kvittenssidan: gästen ska inte kunna missa att bordet inte är bekräftat. */
.booking-pending{
  border:1px solid rgba(225,195,106,.5);border-radius:6px;
  background:rgba(18,56,43,.5);padding:14px 18px;margin:18px 0 14px;
  color:var(--cream);
}
.booking-recap{color:var(--gold2);font-variant-numeric:tabular-nums;margin-top:16px}

/* Adminens statusmärken. Väntande ska synas först i ögonvrån. */
.bk-status{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;border-radius:999px;padding:4px 10px;margin-right:8px;
  vertical-align:2px;
}
.bk-pending  {background:linear-gradient(135deg,#b38b38,#e1c36a);color:#07120d}
.bk-confirmed{background:rgba(78,194,124,.16);color:#8fe0aa;border:1px solid rgba(78,194,124,.45)}
.bk-rejected {background:rgba(192,57,43,.18);color:#ff9b8f;border:1px solid rgba(192,57,43,.5)}
.bk-cancelled{background:rgba(169,162,150,.14);color:var(--muted);border:1px solid rgba(169,162,150,.35)}
.booking-row.is-pending{border-left:3px solid var(--gold2);padding-left:14px}
.admin-pending-count{
  color:var(--gold2);font-size:14px;margin:0 0 16px;
  border:1px solid rgba(201,164,76,.35);border-radius:999px;
  padding:10px 18px;display:inline-block;
}
.bk-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bk-actions form{display:flex;gap:6px;align-items:center}
.bk-del{opacity:.75}
.capacity-form{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:24px;padding-top:18px;border-top:1px solid rgba(201,164,76,.14);
}
.capacity-form label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.capacity-form input{
  width:88px;min-height:44px;background:#0b1b14;color:var(--cream);
  border:1px solid var(--line);border-radius:4px;padding:0 10px;font:inherit;
}
@media(max-width:820px){
  .bk-actions{width:100%;margin-top:12px}
  .bk-actions form,.bk-actions button{flex:1 1 auto}
  .capacity-form{flex-direction:column;align-items:flex-start}
}

/* Googles iframe är låst till 304 px bredd. I ett grid- eller flexbarn med
   automatisk spårbredd blir de 304 px ett min-content-golv som trycker hela
   bokningskortet bredare än en 360 px-skärm — transform skalar bara det
   visuella, inte layouten. min-width:0 släpper golvet, overflow:hidden
   klipper resten, och skalningen gör att inget faktiskt göms. */
.captcha-wrap{min-width:0;max-width:100%;overflow:hidden}
.booking-form,.booking-form>*,.booking-card,.booking-card>*{min-width:0}

/* Stående konfigurationsvarning i admin. Skild från .admin-error, som betyder
   "den här sparningen gick fel" — annars går det inte att se skillnad på ett
   akut fel och en påminnelse om att lägga in nycklar. */
.admin-warn{
  border:1px solid rgba(201,164,76,.5);border-radius:6px;
  background:rgba(18,56,43,.45);padding:14px 18px;color:var(--cream);font-size:14px;line-height:1.55;
}
.admin-warn strong{color:var(--gold2)}
.admin-warn code{color:var(--gold2);font-size:13px}


/* ==========================================================================
   LUNCH — lägesval i admin
   ========================================================================== */
.lunch-mode{margin:8px 0 22px}
.lunch-mode-opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.lunch-mode-opt{
  display:inline-flex;align-items:center;gap:10px;min-height:48px;
  padding:0 20px;border:1px solid var(--line);border-radius:999px;
  background:#0b1b14;color:var(--cream);cursor:pointer;
  font-size:14px;font-weight:700;transition:border-color .2s ease,background .2s ease;
}
.lunch-mode-opt input{width:18px;height:18px;accent-color:var(--gold);cursor:pointer}
.lunch-mode-opt.is-on{border-color:rgba(241,217,138,.9);background:rgba(18,56,43,.6)}
.lunch-mode-opt.is-on span{color:var(--gold2)}

/* Utan JavaScript visas båda panelerna. Radioknappen avgör ändå vad som
   sparas, så formuläret är fullt användbart - bara mindre bekvämt. */
.has-lunch-js .lunch-pane{display:block}
.has-lunch-js .lunch-pane[hidden]{display:none}
.lunch-pane[hidden]{display:none}

.lunch-count{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--muted);margin-left:10px;text-transform:uppercase;vertical-align:2px;
}
.lunch-count.is-full{color:var(--gold2)}
.lunch-row{grid-template-columns:26px minmax(0,1fr) minmax(0,1.35fr) 40px}
.lunch-del{
  width:40px;min-height:44px;border:1px solid var(--line);border-radius:4px;
  background:#0b1b14;color:var(--muted);font-size:19px;line-height:1;cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.lunch-del:hover{color:#ff9b8f;border-color:rgba(192,57,43,.55)}
.lunch-add{margin-top:6px}
.lunch-add[disabled]{opacity:.45;cursor:not-allowed}

/* Veckoläget publikt: en enda lista, inga dagsnamn. */
.lunch-grid.is-weekly{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
.lunch-card-week{padding:26px 26px 22px}
.lunch-card-week ul{columns:2;column-gap:34px}
.lunch-card-week li{break-inside:avoid;padding:12px 0 12px 17px}
.lunch-card-week li:first-child{border-top:1px solid rgba(201,164,76,.10)}

@media(max-width:820px){
  .lunch-row{grid-template-columns:22px minmax(0,1fr) 40px}
  .lunch-row input:nth-of-type(2){grid-column:2/-1}
  .lunch-mode-opt{width:100%;justify-content:flex-start}
  .lunch-card-week ul{columns:1}
  .lunch-card-week{padding:20px 18px 18px}
}


/* ==========================================================================
   HERO-VIDEO — separat opacitet för desktop och mobil
   Desktop 90 %, mobil 100 %. Overlay-logiken rörs inte: skölden bakom
   hero-texten ligger kvar oförändrad, och ingen extra nedtoning läggs till.
   ========================================================================== */
.hero-video{opacity:.9}
@media(max-width:768px){ .hero-video{opacity:1} }

/* Hero har nu fyra knappar. De wrappar redan, men med fyra behövs lite
   tätare radavstånd så de inte trycker ner scroll-indikatorn. */
.hero-actions{flex-wrap:wrap;justify-content:center;gap:10px}
.btn-ico{font-style:normal;opacity:.9;margin-right:2px}
@media(max-width:520px){
  .hero-actions{gap:9px}
  .hero-actions .gold-pill,.hero-actions .outline-pill{flex:1 1 100%}
}

/* Sjunde navknappen: under 1250 px döljs texten redan och pillren blir
   ikoner, men "Kontakta oss" behöver mer luft innan dess. */
@media(max-width:1320px) and (min-width:1151px){
  .nav{gap:6px}
  .nav .pill{padding:0 10px;font-size:12.5px}
}

/* ==========================================================================
   FÖLJ OSS PÅ — sociala länkar under kontaktsektionen
   Inline-SVG, inget nytt ikonbibliotek. Samma pillform, guld och typografi
   som resten av sajten.
   ========================================================================== */
.social{margin-top:26px;padding-top:22px;border-top:1px solid rgba(201,164,76,.18)}
.social-label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold2);margin-bottom:14px;
}
.social-links{display:flex;flex-wrap:wrap;gap:10px}
.social-link{
  display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:0 20px;
  border:1px solid rgba(201,164,76,.45);border-radius:999px;
  background:rgba(5,13,10,.42);color:var(--cream);
  font-size:14px;font-weight:700;letter-spacing:.01em;text-decoration:none;
  transition:color .2s ease,border-color .2s ease,transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease;
}
.social-link svg{flex:0 0 auto;color:var(--gold2)}
.social-link:hover{
  color:var(--gold2);border-color:rgba(241,217,138,.9);
  transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,164,76,.24);
}
.social-link:hover svg{color:var(--gold2)}
.social-link:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.social-link:active{transform:translateY(0) scale(.985)}
@media(max-width:520px){
  .social-links{gap:9px}
  .social-link{flex:1 1 100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){ .social-link:hover{transform:none} }

/* Under 1150 px kollapsar navknapparna till enbart ikoner. Två följdproblem:
   1) display:none tar bort etiketten ur tillgänglighetsträdet, så en
      skärmläsare får inget namn alls på knappen.
   2) "Om oss" har ingen ikon (den togs bort medvetet) och blev därför en
      helt tom cirkel vid de bredderna.
   Etiketten göms nu visuellt men finns kvar för skärmläsare, och knappar
   utan ikon behåller sin text i stället för att bli tomma. */
@media(max-width:1150px){
  .nav .pill span{
    display:inline-block;position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .nav .pill:not(:has(.pill-ico)){width:auto;padding:0 13px}
  .nav .pill:not(:has(.pill-ico)) span{
    position:static;width:auto;height:auto;overflow:visible;clip-path:none;
  }
}

/* Mejlstatus per bokning i admin. */
.bk-mail{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}
.bk-mail-sent{color:#8fe0aa}
.bk-mail-failed{color:#ff9b8f}
.bk-mail-failed strong{color:#ff9b8f}