/* Sjursneskroa – stilark
   Palett: Fjord (mørk blågrønn), Snø (kjølig hvit), Tyttebær (rødt), Tang (dempet grønn), Rav (liten aksent) */

@font-face{font-family:"Young Serif";src:url("/fonts/young-serif-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("/fonts/karla-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("/fonts/karla-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Karla";src:url("/fonts/karla-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("/fonts/karla-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --fjord:#12262E;
  --fjord-2:#1B3641;
  --snow:#F1F3F0;
  --snow-2:#E4E9E5;
  --berry:#8E2B36;
  --berry-dark:#732029;
  --tang:#3E5C55;
  --rav:#C99A45;
  --ink:#12262E;
  --muted:#4B5F63;
  --line:rgba(18,38,46,.18);
  --serif:"Young Serif",Georgia,"Times New Roman",serif;
  --sans:"Karla",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:72rem;
  --gut:clamp(1.25rem,4vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--snow);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;margin:0 0 .5em;letter-spacing:-.005em}
h1{font-size:clamp(2.75rem,9vw,6.5rem)}
h2{font-size:clamp(1.9rem,4.6vw,3.1rem)}
h3{font-size:1.4rem}
.wrap{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

:focus-visible{outline:3px solid var(--rav);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--snow);color:var(--ink);padding:.6rem 1rem;z-index:100;border-radius:4px}
.skip:focus{top:1rem}

/* Knapper */
.btn{display:inline-block;font:600 1rem/1 var(--sans);text-decoration:none;padding:1rem 1.6rem;border:2px solid currentColor;border-radius:999px;cursor:pointer;background:none;color:inherit;transition:background-color .2s,color .2s,border-color .2s}
.btn--berry{background:var(--berry);border-color:var(--berry);color:#fff}
.btn--berry:hover{background:var(--berry-dark);border-color:var(--berry-dark)}
.btn--ghost:hover{background:var(--snow);color:var(--fjord);border-color:var(--snow)}
.btn--line:hover{background:var(--fjord);color:var(--snow);border-color:var(--fjord)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* Topp */
.top{position:sticky;top:0;z-index:50;background:var(--fjord);color:var(--snow);border-bottom:1px solid rgba(241,243,240,.12)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:4rem;gap:1rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;font:400 1.35rem/1 var(--serif)}
.brand img{width:2.6rem;height:2.6rem}
.nav ul{display:flex;gap:1.75rem;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;font-weight:500;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--rav)}
.nav-toggle{display:none;background:none;border:2px solid rgba(241,243,240,.4);color:inherit;border-radius:8px;padding:.5rem .8rem;font:600 .95rem var(--sans);cursor:pointer}
@media (max-width:46rem){
  .nav-toggle{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--fjord);border-bottom:1px solid rgba(241,243,240,.12);display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0;padding:.5rem var(--gut) 1.25rem}
  .nav a{display:block;padding:.9rem 0;border-bottom:1px solid rgba(241,243,240,.1);font-size:1.15rem}
}

/* Hero */
.hero{background:var(--fjord);color:var(--snow);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:2rem;min-height:min(46rem,calc(100svh - 4rem));padding-block:4rem}
.hero h1{margin-bottom:.35em}
.hero .lead{font-size:clamp(1.15rem,2.2vw,1.45rem);max-width:30rem;color:#C9D4D0;line-height:1.5}
.hero-mark{justify-self:end;width:min(100%,30rem);margin-right:calc(-1 * clamp(0rem,6vw,5rem));opacity:.96}
.hero-mark img{width:100%;height:auto}
.hero-mark img{animation:turn-in 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes turn-in{from{opacity:0;transform:rotate(-24deg) scale(.94)}to{opacity:1;transform:none}}
@media (max-width:46rem){
  .hero .wrap{grid-template-columns:1fr;padding-block:2.5rem 3rem;min-height:0}
  .hero-mark{order:-1;justify-self:start;width:13rem;margin:0 0 1rem}
}

/* Infolinje */
.facts{background:var(--berry);color:#fff}
.facts .wrap{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:1rem 2rem;padding-block:1.4rem}
.facts p{margin:0;line-height:1.35}
.facts strong{display:block;font:400 1.15rem/1.3 var(--serif)}
.facts a{text-decoration:none}
.facts a:hover{text-decoration:underline}
@media (max-width:46rem){.facts .wrap{grid-template-columns:1fr}}

/* Seksjoner */
.sec{padding-block:clamp(3.5rem,9vw,7rem)}
.sec--dark{background:var(--fjord);color:var(--snow)}
.sec--tint{background:var(--snow-2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.split--flip>:first-child{order:2}
@media (max-width:52rem){.split{grid-template-columns:1fr}.split--flip>:first-child{order:0}}
.prose{max-width:34rem}
.prose p{color:inherit}
.sec--dark .prose p{color:#C9D4D0}

/* Bildeflater: viser mønster til ekte bilde er lagt inn */
.photo{margin:0;aspect-ratio:4/5;border-radius:0 0 999px 999px;overflow:hidden;background-color:var(--tang);
  background-image:var(--img,none),repeating-linear-gradient(135deg,rgba(241,243,240,.07) 0 2px,transparent 2px 14px);
  background-size:cover,auto;background-position:center}
.photo--wide{aspect-ratio:5/4;border-radius:999px 999px 0 0}
.photo--flat{aspect-ratio:16/10;border-radius:.4rem}
@media (max-width:52rem){.photo{aspect-ratio:4/3;border-radius:.4rem}.photo--wide{aspect-ratio:4/3;border-radius:.4rem}}

/* Kromeny-invitasjon */
.menu-cta{background:var(--berry);color:#fff;text-align:left}
.menu-cta .wrap{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end}
.menu-cta h2{margin:0 0 .3em}
.menu-cta p{margin:0;max-width:34rem;color:#F4DDE0}
@media (max-width:46rem){.menu-cta .wrap{grid-template-columns:1fr}}

/* Facebook og kart – to steg med samtykke */
.embed{position:relative;background:var(--snow);color:var(--ink);border:2px solid var(--fjord);border-radius:.4rem;min-height:24rem;overflow:hidden}
.embed iframe{width:100%;border:0;display:block}
.embed-gate{padding:2rem;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:24rem;gap:.5rem}
.embed-gate h3{margin-bottom:.2em}
.embed-gate p{font-size:.95rem;color:var(--muted);max-width:26rem}
.embed-gate .btn{margin-top:.5rem}
.embed.loaded .embed-gate{display:none}
.fb-frame{max-width:500px}
.fb-frame iframe{height:650px}
.map-frame iframe{height:26rem}

/* Kontakt */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem)}
@media (max-width:52rem){.contact{grid-template-columns:1fr}}
.addr{font-style:normal;font-size:1.2rem;line-height:1.6;margin-bottom:1.5rem}
.addr a{font-weight:600}
form{display:grid;gap:1.1rem}
label{display:block;font-weight:600;margin-bottom:.3rem}
input,textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:.4rem;padding:.85rem 1rem}
input:focus,textarea:focus{border-color:var(--fjord);outline:none;box-shadow:0 0 0 3px var(--rav)}
textarea{min-height:9rem;resize:vertical}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.fine{font-size:.9rem;color:var(--muted);margin:0}
.fine a{text-decoration-thickness:1px;text-underline-offset:3px}

/* Kromeny-side */
.page-head{background:var(--fjord);color:var(--snow);padding-block:clamp(3rem,8vw,5.5rem)}
.page-head h1{font-size:clamp(2.75rem,8vw,5.5rem);margin-bottom:.2em}
.page-head p{max-width:34rem;color:#C9D4D0;font-size:1.2rem;margin:0}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem) clamp(2rem,6vw,5rem)}
@media (max-width:52rem){.menu-grid{grid-template-columns:1fr}}
.menu-sec h2{font-size:clamp(1.7rem,3.4vw,2.3rem);padding-bottom:.45rem;border-bottom:3px solid var(--berry);margin-bottom:1.25rem}
.dish{margin:0 0 1.35rem}
.dish-row{display:flex;align-items:baseline;gap:.6rem}
.dish-row h3{margin:0;font:600 1.15rem/1.3 var(--sans)}
.dish-row .dots{flex:1;border-bottom:2px dotted rgba(18,38,46,.35);transform:translateY(-.3em);min-width:1rem}
.dish-row .price{font:600 1.1rem var(--sans);white-space:nowrap;font-variant-numeric:tabular-nums}
.dish p{margin:.15rem 0 0;color:var(--muted);font-size:.98rem;max-width:32rem}
.tag{display:inline-block;font-size:.8rem;font-weight:600;color:var(--tang);border:1.5px solid var(--tang);border-radius:999px;padding:.05rem .55rem;margin-left:.4rem;vertical-align:.1em}
.note{margin-top:3rem;padding:1.25rem 1.5rem;border-left:4px solid var(--rav);background:var(--snow-2)}
.note p{margin:0}

/* Tekstsider */
.text-page{padding-block:clamp(2.5rem,7vw,5rem)}
.text-page .prose{max-width:44rem}
.text-page h1{font-size:clamp(2.2rem,6vw,3.6rem);margin-bottom:.6em}
.text-page h2{font-size:1.6rem;margin-top:2em}
.text-page ul{padding-left:1.2rem}
.text-page li{margin-bottom:.4em}

/* 404 */
.lost{background:var(--fjord);color:var(--snow);min-height:calc(100svh - 4rem);display:flex;align-items:center}
.lost .wrap{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center;padding-block:3rem}
.lost h1{font-size:clamp(2.6rem,8vw,5.5rem)}
.lost p{max-width:30rem;color:#C9D4D0;font-size:1.2rem}
.lost .big{font:400 clamp(6rem,22vw,15rem)/.8 var(--serif);color:var(--berry);letter-spacing:-.04em}
@media (max-width:46rem){.lost .wrap{grid-template-columns:1fr}.lost .big{order:-1}}

/* Bunn */
.foot{background:var(--fjord);color:#C9D4D0;padding-block:3rem 2rem;font-size:.98rem}
.foot .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:start}
.foot img{width:6rem;height:6rem}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.35rem}
.foot .copy{grid-column:1/-1;border-top:1px solid rgba(241,243,240,.15);padding-top:1.25rem;margin:0;font-size:.9rem}
@media (max-width:46rem){.foot .wrap{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-mark img{animation:none}
  *{transition:none!important}
}
@media print{.top,.foot,.hero-mark,.embed{display:none}}

/* Samtykke */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--snow);color:var(--ink);border-top:4px solid var(--berry);box-shadow:0 -8px 30px rgba(18,38,46,.25)}
.consent-in{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto;padding-block:1.25rem;display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:center}
.consent h2{font-size:1.25rem;margin:0 0 .25rem}
.consent p{margin:0;font-size:.95rem;line-height:1.5;max-width:46rem}
.consent-btns{display:flex;gap:.75rem;flex-wrap:wrap}
.btn--fjord{background:var(--fjord);border-color:var(--fjord);color:#fff}
.btn--fjord:hover{background:var(--fjord-2);border-color:var(--fjord-2)}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
.linklike:hover{text-decoration:underline}
@media (max-width:46rem){
  .consent{max-height:88svh;overflow:auto}
  .consent-in{grid-template-columns:1fr}
  .consent-btns .btn{flex:1 1 9rem;text-align:center}
}