/* ================================================================
   casinofaroeislands.com
   Palet: basalt, ull og Merkið. Myrk grunn allastaðni,
   ullarlitir sum lættur kontrastur.
   Mobile-first. Beinir kantar, eingin rund knøttur.
   ================================================================ */

:root{
  --basalt:   #23282B;
  --basalt-d: #191D1F;
  --basalt-l: #2E3538;
  --basalt-x: #3A4245;
  --ull:      #E4DED0;   /* ull */
  --ull-d:    #CFC7B5;
  --bla:      #2E86C8;   /* Merkið, ljósari til skerm */
  --bla-d:    #1F6BA5;
  --rey:      #E04858;   /* Merkið */
  --gras:     #7FA36B;   /* torvtak */
  --txt:      #E8E9E7;
  --txt-2:    #A3ACAF;
  --txt-m:    #2A2E30;   /* á ullargrunni */
  --txt-m2:   #5A5F5C;
  --lin:      rgba(255,255,255,.11);
  --lin-m:    #C6BEAC;

  --w: 1150px;
  --p: 20px;

  --dsp:  "Zilla Slab", Georgia, serif;
  --brd:  "Karla", -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--brd);
  font-size:16.5px;
  line-height:1.68;
  color:var(--txt);
  background:var(--basalt);
  padding-bottom:72px;
}

.rm{ width:100%; max-width:var(--w); margin-inline:auto; padding-inline:var(--p); }

.stokk{ position:absolute; left:-9999px; background:var(--rey); color:#fff; padding:10px 16px; z-index:99; }
.stokk:focus{ left:0; top:0; }

/* ---------- type ---------- */
h1,h2,h3{
  font-family:var(--dsp);
  font-weight:700; line-height:1.14;
  letter-spacing:-.012em;
  margin:0 0 .55em;
  text-wrap:balance;
  color:#fff;
}
h1{ font-size:clamp(1.9rem,6.2vw,3rem); }
h2{ font-size:clamp(1.42rem,4.2vw,2.1rem); }
h3{ font-size:clamp(1.08rem,2.8vw,1.28rem); font-weight:600; margin-top:2.2em; }

p{ margin:0 0 1.12em; }
a{ color:var(--bla); }
strong{ font-weight:600; }

.ey{
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gras); margin-bottom:1.2em;
}
.ey--n{ color:var(--bla); }

.in{ font-size:1.01rem; color:var(--txt-2); max-width:64ch; }
.fin{ font-size:.86rem; color:var(--txt-2); border-top:1px solid var(--lin); padding-top:13px; }

.dagf{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.03em;
  color:var(--txt-2);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:-.3em 0 1.25em;
  padding-left:11px;
  border-left:3px solid var(--gras);
}
.dagf time{ color:#fff; font-weight:700; }
.dagf__n{ opacity:.66; }

/* ---------- ullarbond ---------- */
.bd--ull{ background:var(--ull); color:var(--txt-m); }
.bd--ull h2,.bd--ull h3{ color:#1C1F21; }
.bd--ull .in,.bd--ull .fin{ color:var(--txt-m2); }
.bd--ull .fin{ border-top-color:var(--lin-m); }
.bd--ull a{ color:var(--bla-d); }
.bd--ull .ey--n{ color:var(--bla-d); }

/* ---------- haus ---------- */
.hd{ background:var(--basalt-d); border-bottom:1px solid var(--lin); }
.hd__i{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:54px; }
.mark{ font-family:var(--dsp); font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:9px; color:#fff; }
.mark__f{ width:22px; height:16px; flex:none; border:1px solid rgba(0,0,0,.2); }
.hd__h{ display:flex; align-items:center; gap:16px; }
.nv{ display:none; gap:18px; font-size:.86rem; }
.nv a{ color:var(--txt-2); text-decoration:none; }
.nv a:hover{ color:#fff; }
.mal{
  font-family:var(--mono); font-size:.74rem; font-weight:700; letter-spacing:.08em;
  color:var(--txt-2); text-decoration:none;
  border:1px solid var(--lin); padding:5px 9px;
}
.mal:hover{ color:#fff; border-color:var(--bla); }

/* ---------- rail ---------- */
.rail{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--basalt-d);
  border-top:3px solid var(--rey);
  padding:10px var(--p);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition:opacity .2s ease;
}
.rail__t{ font-size:.82rem; color:var(--txt-2); line-height:1.3; }

/* ---------- knøttar ---------- */
.knt{
  display:inline-flex; flex-direction:column; align-items:center; gap:1px;
  font-family:var(--dsp); font-weight:600; font-size:.98rem; line-height:1.25;
  text-decoration:none; text-align:center;
  padding:13px 24px 11px;
  border:0; border-bottom:3px solid rgba(0,0,0,.32);
  transition:background .14s ease, border-color .14s ease;
}
.knt--brand{ background:var(--rey); color:#fff; }
.knt--brand:hover{ background:#C8384A; border-bottom-color:rgba(0,0,0,.5); }
.knt--ljos{ background:var(--ull); color:var(--txt-m); border-bottom-color:var(--ull-d); }
.knt--ljos:hover{ background:#F0EBE0; }
.knt--stor{ padding:16px 30px 14px; font-size:1.04rem; }
.knt--lil{ padding:9px 17px 7px; font-size:.87rem; border-bottom-width:2px; }
.knt__u{ font-family:var(--brd); font-weight:400; font-size:.7rem; opacity:.86; }

.knt:focus-visible,a:focus-visible,summary:focus-visible{
  outline:3px solid var(--gras); outline-offset:2px;
}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(180deg,var(--basalt-d) 0%,var(--basalt) 100%);
  padding:36px 0 42px;
  border-bottom:1px solid var(--lin);
}
.hero__l{ font-size:1.04rem; color:var(--txt-2); max-width:57ch; }
.hero__n{ font-size:.81rem; color:#7C8588; margin-top:13px; }

/* signatur: basaltlógir */
.berg{
  margin-top:32px;
  background:var(--basalt-l);
  border:1px solid var(--lin);
}
.berg__h{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-2); margin:0; padding:12px 15px;
  border-bottom:1px solid var(--lin);
}
.berg__l{ list-style:none; margin:0; padding:0; }
.lg{ padding:13px 15px 13px 19px; border-bottom:1px solid var(--lin); border-left:7px solid; }
.lg--dk{ border-left-color:#4E5B60; background:rgba(255,255,255,.015); }
.lg--gl{ border-left-color:#6E8288; background:rgba(255,255,255,.03); }
.lg--fo{ border-left-color:var(--rey); background:rgba(224,72,88,.09); }
.lg__s{ display:block; font-family:var(--dsp); font-weight:700; font-size:1.02rem; color:#fff; }
.lg__t{ display:block; font-size:.85rem; color:var(--txt-2); margin-top:2px; }
.berg__f{ margin:0; padding:11px 15px; font-size:.8rem; color:#7C8588; font-style:italic; }

/* ---------- bond ---------- */
.bd{ padding:44px 0; }
.bd--dj{ background:var(--basalt-d); }
.bd--endi{ text-align:center; }
.endi{ max-width:620px; }

.svar{ background:var(--basalt); color:var(--txt); border-left:7px solid var(--gras); padding:19px 20px 5px; }
.svar__m{ font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gras); margin-bottom:.7em; }
.svar__t{ font-size:1.03rem; }

/* ---------- listi ---------- */
.lst{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:11px; }
.lst__t{ color:var(--txt-2); font-size:.9rem; }

.op{ background:var(--basalt-l); border-left:5px solid var(--basalt-x); padding:17px 16px; display:grid; gap:12px; }
.op--1{ border-left-color:var(--rey); }
.bd--ull .op{ background:#EFEADE; border-left-color:var(--ull-d); color:var(--txt-m); }
.bd--ull .op--1{ border-left-color:var(--rey); }
.op__h{ display:flex; align-items:flex-start; gap:11px; }
.op__nr{
  font-family:var(--mono); font-weight:700; font-size:.8rem;
  background:var(--basalt-d); color:#fff;
  width:27px; height:27px; flex:none; display:grid; place-items:center;
}
.op--1 .op__nr{ background:var(--rey); }
.op__n{ font-family:var(--dsp); font-weight:700; font-size:1.14rem; margin:0 0 1px; color:#fff; }
.bd--ull .op__n{ color:#1C1F21; }
.op__a{ font-size:.86rem; color:var(--txt-2); margin:0; }

.op__f{ margin:0; display:grid; gap:1px; background:var(--lin); }
.op__f > div{ background:var(--basalt); padding:8px 12px; display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.op__f dt{ font-size:.77rem; color:var(--txt-2); }
.op__f dd{ margin:0; font-family:var(--mono); font-size:.77rem; font-weight:700; text-align:right; color:#fff; }

.op__p{ margin:0; padding-left:16px; font-size:.87rem; color:var(--txt-2); }
.op__p li{ margin-bottom:4px; }
.op .knt{ width:100%; }

/* ---------- talvur ---------- */
.tb{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:17px 0 21px; border:1px solid var(--lin); }
.bd--ull .tb{ border-color:var(--lin-m); background:#EFEADE; }

table{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:430px; }
.tb--br{ min-width:620px; }

caption{
  text-align:left; font-family:var(--mono);
  font-size:.63rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-2); padding:12px 14px 6px;
}
.bd--ull caption{ color:var(--txt-m2); }

th,td{ text-align:left; padding:10px 14px; border-top:1px solid var(--lin); vertical-align:top; }
.bd--ull th,.bd--ull td{ border-top-color:var(--lin-m); }

thead th{ font-family:var(--dsp); font-weight:600; font-size:.8rem; background:var(--basalt-l); color:#fff; }
.bd--ull thead th{ background:var(--ull-d); color:#1C1F21; }

tbody tr:nth-child(even) td{ background:rgba(255,255,255,.025); }
.bd--ull tbody tr:nth-child(even) td{ background:rgba(0,0,0,.03); }

/* ---------- listar ---------- */
.pkt{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px; }
.pkt li{ position:relative; padding-left:23px; font-size:.94rem; }
.pkt li::before{ content:""; position:absolute; left:0; top:.68em; width:12px; height:4px; background:var(--gras); }
.bd--ull .pkt li::before{ background:var(--bla-d); }

.stig{ counter-reset:s; list-style:none; margin:17px 0 0; padding:0; display:grid; gap:13px; }
.stig li{ counter-increment:s; position:relative; padding-left:40px; font-size:.94rem; }
.stig li::before{
  content:counter(s);
  position:absolute; left:0; top:.05em; width:27px; height:27px;
  background:var(--bla); color:#fff;
  font-family:var(--mono); font-size:.77rem; font-weight:700;
  display:grid; place-items:center;
}
.bd--ull .stig li::before{ background:var(--bla-d); }

/* ---------- kassi ---------- */
.ks{ background:var(--basalt-l); border-left:5px solid var(--bla); padding:14px 16px; font-size:.92rem; margin-top:19px; }
.ks--rey{ border-left-color:var(--rey); }
.bd--ull .ks{ background:#EFEADE; border-left-color:var(--bla-d); }
.bd--ull .ks--rey{ border-left-color:var(--rey); }

/* ---------- cta ---------- */
.cta{ margin-top:26px; border:1px solid var(--lin); padding:19px 17px; display:grid; gap:12px; justify-items:start; background:var(--basalt-l); }
.bd--ull .cta{ background:#EFEADE; border-color:var(--lin-m); }
.cta__t{ margin:0; font-size:.96rem; }
.cta .knt{ width:100%; }

/* ---------- kort ---------- */
.krt{ display:grid; gap:11px; margin-top:23px; }
.krt__i{ background:var(--basalt-l); border-top:4px solid var(--gras); padding:17px 16px; }
.bd--ull .krt__i{ background:#EFEADE; }
.krt__i h3{ margin:0 0 4px; font-size:1.01rem; }
.krt__n{ font-family:var(--mono); font-weight:700; font-size:1.06rem; color:var(--bla); margin:0 0 .55em; }
.bd--ull .krt__n{ color:var(--bla-d); }
.krt__n a{ text-decoration:none; }
.krt__i p:last-child{ margin-bottom:0; font-size:.89rem; color:var(--txt-2); }
.bd--ull .krt__i p:last-child{ color:var(--txt-m2); }

/* ---------- faq ---------- */
.faq{ margin-top:21px; border-top:1px solid var(--lin-m); }
.faq details{ border-bottom:1px solid var(--lin-m); }
.faq summary{ cursor:pointer; list-style:none; padding:14px 30px 14px 0; font-family:var(--dsp); font-weight:600; font-size:.98rem; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; margin-top:-1px;
  width:13px; height:2px; background:var(--bla-d);
}
.faq summary::before{
  content:""; position:absolute; right:11px; top:50%; margin-top:-6px;
  width:2px; height:13px; background:var(--bla-d); transition:opacity .15s;
}
.faq details[open] summary::before{ opacity:0; }
.faq details p{ margin:0 0 15px; font-size:.92rem; color:var(--txt-m2); max-width:72ch; }

/* ---------- fótur ---------- */
.ft{ background:var(--basalt-d); color:#8A9497; padding:30px 0 26px; font-size:.85rem; border-top:1px solid var(--lin); }
.ft__a{ display:flex; align-items:center; gap:10px; font-family:var(--dsp); font-weight:700; color:#fff; }
.ft__a span{ background:var(--rey); color:#fff; padding:2px 8px; font-family:var(--mono); font-size:.77rem; }
.ft strong{ color:#fff; }
.ft__d{ font-size:.81rem; border-top:1px solid var(--lin); padding-top:13px; margin-top:16px; }
.ft__d time{ color:#fff; font-family:var(--mono); font-size:.78rem; }
.ft__m{ font-size:.78rem; color:#69726F; margin-bottom:0; }

/* ================================================================
   TABLET
   ================================================================ */
@media (min-width:720px){
  .bd{ padding:60px 0; }
  .hero{ padding:50px 0 58px; }
  .knt{ flex-direction:row; align-items:baseline; gap:9px; }
  .op .knt,.cta .knt{ width:auto; }
  .cta{ grid-template-columns:1fr auto; align-items:center; gap:20px; }
  .krt{ grid-template-columns:repeat(3,1fr); }
  .svar{ padding:23px 26px 7px; }
  .op{
    padding:21px 20px;
    grid-template-columns:1fr 232px;
    grid-template-areas:"h f" "p c";
    column-gap:24px; align-items:start;
  }
  .op__h{ grid-area:h; } .op__f{ grid-area:f; }
  .op__p{ grid-area:p; } .op__c{ grid-area:c; align-self:end; }
}

/* ================================================================
   SKRIVIBORÐ — CTA verður verandi á fyrsta skermi
   ================================================================ */
@media (min-width:980px){
  .nv{ display:flex; }
  body{ padding-bottom:0; }
  .hero{ padding:56px 0 66px; }
  .hero__i{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:start; }
  .berg{ margin-top:0; }
  .lg{ padding:15px 18px 15px 22px; }
  .rail{
    left:auto; right:0; bottom:auto; top:50%;
    transform:translateY(-50%);
    flex-direction:column; align-items:stretch; gap:10px;
    width:206px; padding:15px 15px;
    border-top:0; border-left:3px solid var(--rey);
    text-align:center;
  }
  .rail__t{ font-size:.79rem; }
  .rail .knt{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}
@media print{ .rail,.hd,.knt{ display:none; } body{ padding:0; } }