/*
Theme Name: FÍF Athletics
Theme URI: https://www.athletics.fo
Author: Sølvi Reinert Hansen
Description: Nútímans útlit til athletics.fo — Frælsur Ítróttur Føroya. Heimasíða við tíðindum, komandi tiltøkum (Kappingarskrá plugin), nýggjastu úrslitum (Úrslit plugin), Oyggjaleikir 2027 niðurteljing og stuðlum.
Version: 1.7.5
Requires PHP: 7.4
Text Domain: fif-athletics
*/

:root {
  --ink: #0d1b33;
  --ink-soft: #3c4a63;
  --ink-faint: #6b7a94;
  --ground: #eef3fa;
  --surface: #ffffff;
  --line: #d7e0ee;
  --blue: #1d4ed8;
  --blue-deep: #16368f;
  --blue-tint: #dbe6fa;
  --red: #dc3a2c;
  --red-dark: #b92c20;
  --hero-grad: linear-gradient(135deg, #16368f 0%, #1d4ed8 55%, #3b6fe8 100%);
  --card-grad-1: linear-gradient(140deg, #16368f, #2559dd);
  --card-grad-2: linear-gradient(140deg, #0d1b33, #2a4a8f);
  --card-grad-3: linear-gradient(140deg, #1d4ed8, #4a83ec);
  --games-grad: linear-gradient(100deg, #35309b 10%, #c33c8e 90%);
  --shadow: 0 1px 2px rgba(13,27,51,.06), 0 8px 24px rgba(13,27,51,.08);
  /* the Úrslit + Kappingarskrá plugins inherit the old Soledad accent var */
  --pcaccent-cl: #1d4ed8;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.display {
  font-family: "Avenir Next Condensed", "HelveticaNeue-CondensedBold", "Arial Narrow", "Roboto Condensed", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.02;
  text-wrap: balance;
}
.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--blue);
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- top bar ---------- */
.topbar {
  background: #0d1b33;
  color: #dbe6fa;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.topbar .wrap { display: flex; justify-content: space-between; padding-top: 6px; padding-bottom: 6px; }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
body.admin-bar header.site { top: 32px; }
header.site .wrap {
  display: flex; align-items: center; gap: 24px;
  padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark {
  display: flex; align-items: center;
  flex-shrink: 0;
}
.brand-mark img { display: block; height: 48px; width: auto; max-width: none; }
/* footer uses the full circular logo with the wordmark */
.brand-footer { align-items: center; gap: 14px; }
.brand-logo { display: block; height: 80px; width: auto; flex-shrink: 0; }
.brand-name { line-height: 1.15; }
.brand-name b { display: block; font-size: .95rem; letter-spacing: .02em; white-space: nowrap; }
.brand-name span { font-size: .68rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; }
nav.main { display: flex; gap: 2px; margin-left: auto; align-items: center; }
nav.main ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
nav.main li { position: relative; }
nav.main a {
  display: block;
  padding: 8px 11px; border-radius: 8px;
  font-size: .85rem; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap;
}
nav.main a:hover, nav.main a:focus-visible { background: var(--blue-tint); color: var(--blue); outline: none; }
nav.main .current-menu-item > a, nav.main .current_page_item > a { color: var(--blue); }
/* dropdowns for menu children */
nav.main li ul {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  flex-direction: column; gap: 0;
  min-width: 224px; max-height: 74vh; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--shadow);
}
/* keeps the dropdown reachable across the gap between trigger and panel */
nav.main .menu-item-has-children { padding-bottom: 2px; }
nav.main li:hover > ul, nav.main li:focus-within > ul { display: flex; }
nav.main li ul a { border-radius: 7px; }

/* Desktop-only dropdown refinements. Scoped to min-width so the :has() grid
   rules (which outrank .open on specificity) never leak into the mobile menu. */
@media (min-width: 1081px) {
  /* Long lists (Met, Myndir, Úrslit) break into balanced newspaper columns so the
     reading order runs DOWN each column, not zig-zag across rows. CSS multi-column
     (not grid) keeps sequential items together and balances any item count. */
  nav.main li ul:has(> li:nth-child(11)) {
    column-count: 2; column-gap: 10px;
    min-width: 320px; max-height: none; overflow: visible;
  }
  nav.main li ul:has(> li:nth-child(19)) { column-count: 3; min-width: 440px; }
  nav.main li ul:has(> li:nth-child(11)) > li { break-inside: avoid; }
  nav.main li:hover > ul:has(> li:nth-child(11)),
  nav.main li:focus-within > ul:has(> li:nth-child(11)) { display: block; }

  /* panels near the right edge open right-aligned so they never leave the viewport */
  nav.main > ul > li:nth-last-child(-n+3) > ul { left: auto; right: 0; }

  /* Invisible hover-bridge across the 6px gap between a top-level item and its
     flyout panel, so the submenu stays open while the cursor travels down into
     it. Placed on the <li> — NOT a ::before on the panel, whose overflow-y:auto
     clips anything sitting above it (that was an earlier broken attempt). */
  nav.main > ul > li.menu-item-has-children::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 100%; height: 10px;
  }
}

/* third level renders as an indented group inside its parent panel */
nav.main li ul li ul {
  position: static; display: flex; grid-column: 1 / -1;
  border: none; box-shadow: none; border-radius: 0;
  padding: 2px 0 4px 10px; margin-left: 8px;
  min-width: 0; max-height: none; overflow: visible;
  border-left: 2px solid var(--line);
}
nav.main li ul li ul a { font-weight: 500; color: var(--ink-faint); font-size: .8rem; }
nav.main li ul li ul a:hover { color: var(--blue); }
.cta {
  background: var(--red); color: #fff;
  padding: 10px 20px; border-radius: 999px;
  font-weight: 700; font-size: .85rem;
  letter-spacing: .04em; text-transform: uppercase;
  flex-shrink: 0;
  transition: background .15s;
}
.cta:hover, .cta:focus-visible { background: var(--red-dark); color: #fff; outline: none; }
.nav-toggle {
  display: none;
  margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 10px; cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; transition: transform .2s, opacity .2s; }

/* ---------- hero ---------- */
.hero { padding: 48px 0 56px; }
.hero .wrap {
  display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px;
  align-items: stretch;
}
.feature {
  position: relative; overflow: hidden;
  border-radius: 20px;
  background: var(--hero-grad);
  color: #fff;
  padding: 48px 44px;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 420px;
  box-shadow: var(--shadow);
}
.feature::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 88px, rgba(255,255,255,.09) 88px 91px);
  pointer-events: none;
}
.feature::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9,18,40,.55), transparent 60%);
  pointer-events: none;
}
.feature > * { position: relative; z-index: 1; }
.feature .feature-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
}
.feature.photo::before { content: none; }
.feature.photo::after {
  background: linear-gradient(to top, rgba(9,18,40,.85), rgba(9,18,40,.35) 55%, rgba(9,18,40,.08));
}
.chip {
  display: inline-block; align-self: flex-start;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 16px;
  backdrop-filter: blur(4px);
}
.feature h1 { margin: 0 0 12px; font-size: clamp(2rem, 4.5vw, 3.2rem); color: #fff; }
.feature h1 a:hover { text-decoration: underline; }
.feature p { margin: 0 0 22px; max-width: 46ch; color: rgba(255,255,255,.85); font-size: .98rem; }
.feature .meta { font-size: .78rem; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .1em; }
.feature .read {
  align-self: flex-start; margin-top: 18px;
  background: #fff; color: var(--blue-deep);
  padding: 11px 22px; border-radius: 999px;
  font-weight: 700; font-size: .85rem;
}

/* ---------- events rail ---------- */
.rail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 24px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.rail h2 { margin: 0 0 4px; font-size: 1.25rem; }
.rail .sub { font-size: .8rem; color: var(--ink-faint); margin: 0 0 8px; }
.event {
  display: flex; gap: 16px; align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.event:first-of-type { border-top: none; }
.date-block {
  flex-shrink: 0; width: 58px; text-align: center;
  background: var(--blue-tint);
  border-radius: 12px; padding: 8px 0;
  font-variant-numeric: tabular-nums;
}
.date-block b { display: block; font-size: 1.25rem; line-height: 1; color: var(--blue); font-family: "Avenir Next Condensed", "Arial Narrow", sans-serif; font-weight: 800; }
.date-block span { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.event .info b { display: block; font-size: .92rem; line-height: 1.3; }
.event:hover .info b { color: var(--blue); }
.event .info span { font-size: .76rem; color: var(--ink-faint); }
.rail .all {
  margin-top: auto; padding-top: 18px;
  font-size: .82rem; font-weight: 700; color: var(--blue);
}

/* ---------- front-page quick search (searches Úrslit) ---------- */
.front-search { padding: 0 0 40px; }
.fsearch {
  display: flex; align-items: center; gap: 8px;
  max-width: 620px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 6px 5px 18px;
  box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s;
}
.fsearch:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint), var(--shadow); }
.fsearch .fsearch-icon { color: var(--ink-faint); flex-shrink: 0; }
.fsearch input[type="search"] {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-size: .95rem; color: var(--ink); padding: 9px 4px;
}
.fsearch input[type="search"]::placeholder { color: var(--ink-faint); }
.fsearch button {
  flex-shrink: 0; border: none; cursor: pointer;
  background: var(--blue); color: #fff;
  padding: 10px 22px; border-radius: 999px;
  font-weight: 700; font-size: .85rem;
  transition: background .15s;
}
.fsearch button:hover, .fsearch button:focus-visible { background: var(--blue-deep); }

/* search results page */
.archive-head .fsearch { margin: 0; max-width: 360px; flex: 1 1 260px; box-shadow: none; }
.search-block { margin-bottom: 36px; }
.search-h {
  font-family: "Avenir Next Condensed", "HelveticaNeue-CondensedBold", "Arial Narrow", "Roboto Condensed", sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: .015em;
  font-size: 1.2rem; color: var(--ink); margin: 0 0 16px;
}
.results-card .r-row .r-sub { color: var(--ink-faint); font-weight: 400; }
.search-empty { color: var(--ink-soft); font-size: 1rem; }

/* ---------- sections ---------- */
.front-section { padding: 26px 0 56px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.section-head h2 { margin: 4px 0 0; font-size: 1.7rem; }
.section-head a { font-size: .84rem; font-weight: 700; color: var(--blue); flex-shrink: 0; }

/* ---------- news grid ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform .15s;
}
.card:hover { transform: translateY(-3px); }
.thumb { display: block; aspect-ratio: 3 / 2; position: relative; }
.thumb.g1 { background: var(--card-grad-1); }
.thumb.g2 { background: var(--card-grad-2); }
.thumb.g3 { background: var(--card-grad-3); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(13,27,51,.6), rgba(13,27,51,0) 55%);
}
.thumb.g1::before, .thumb.g2::before, .thumb.g3::before {
  background: repeating-linear-gradient(115deg, transparent 0 52px, rgba(255,255,255,.1) 52px 54px);
}
.thumb .chip { position: absolute; left: 14px; bottom: 12px; margin: 0; z-index: 2; }
.card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card h3 { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.card h3 a:hover { color: var(--blue); }
.card p { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.card .meta { margin-top: auto; padding-top: 10px; font-size: .72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; font-variant-numeric: tabular-nums; }

/* ---------- nýggjastu úrslit ---------- */
.results-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: var(--shadow);
}
.r-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: .92rem;
}
.r-row:first-of-type { border-top: none; }
.r-row b { font-weight: 600; }
.r-row:hover b { color: var(--blue); }
.r-row .when {
  flex-shrink: 0;
  font-size: .76rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.results-card .all {
  display: inline-block; margin-top: 16px;
  font-size: .82rem; font-weight: 700; color: var(--blue);
}

/* ---------- Oyggjaleikir 2027 ---------- */
.games { padding: 0 0 56px; }
.games-card {
  position: relative; overflow: hidden;
  background: #0d1b33;
  color: #e8eefa;
  border: 1px solid #0d1b33;
  border-radius: 20px;
  padding: 40px 44px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.games-card::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 120px, rgba(126,163,247,.09) 120px 123px);
  pointer-events: none;
}
.games-card > * { position: relative; }
.games-info { display: flex; flex-direction: column; gap: 14px; max-width: 46ch; }
.games-plate {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 24px;
  align-self: flex-start;
}
.games-plate img { display: block; width: 300px; max-width: 100%; height: auto; }
.games-info p { margin: 0; font-size: .95rem; color: #9fb2d4; }
.games-link { font-size: .84rem; font-weight: 700; color: #7ea3f7; }
.games-link:hover, .games-link:focus-visible { color: #fff; }
.countdown { display: flex; align-items: flex-start; gap: 10px; }
.cd { text-align: center; min-width: 76px; }
.cd b {
  display: block;
  font-family: "Avenir Next Condensed", "HelveticaNeue-CondensedBold", "Arial Narrow", "Roboto Condensed", sans-serif;
  font-weight: 800; font-size: 3.4rem; line-height: 1;
  font-variant-numeric: tabular-nums;
  /* lighter tints of the games' indigo→magenta, so they read on navy */
  background: linear-gradient(100deg, #8d88f0 10%, #e874ba 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.cd span {
  display: block; margin-top: 6px;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: #8fa0bd;
}
.cd-sep {
  font-family: "Avenir Next Condensed", "Arial Narrow", sans-serif;
  font-weight: 800; font-size: 3rem; line-height: 1.1;
  color: #33455f;
}
/* the two future hosts, as a full-width strip below the main countdown */
.games-next {
  flex-basis: 100%; width: 100%;
  margin-top: 6px; padding-top: 22px;
  border-top: 1px solid rgba(126,163,247,.18);
  display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap;
}
.games-next .next-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: #8fa0bd;
}
.mini-cd { display: flex; align-items: center; gap: 11px; }
.mini-flag {
  width: 34px; height: auto; border-radius: 4px; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}
.mini-text { display: flex; flex-direction: column; line-height: 1.25; }
.mini-name { font-size: .82rem; font-weight: 700; color: #e8eefa; }
.mini-days { font-size: .74rem; color: #9fb2d4; font-variant-numeric: tabular-nums; }
.mini-days b {
  font-family: "Avenir Next Condensed", "HelveticaNeue-CondensedBold", "Arial Narrow", sans-serif;
  font-weight: 800; font-size: 1.02rem; margin-right: 1px;
  background: linear-gradient(100deg, #8d88f0, #e874ba);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Vetrarkappingin banner (links to external vk.b.fo) ---------- */
.vk-banner {
  display: flex; align-items: stretch;
  background: #0d1b33; color: #e8eefa;
  border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 232px;
  transition: transform .15s;
}
.vk-banner:hover { transform: translateY(-3px); }
.vk-content {
  flex: 1 1 56%;
  position: relative; overflow: hidden;
  padding: 34px 40px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 11px;
}
.vk-content::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 88px, rgba(126,163,247,.09) 88px 91px);
  pointer-events: none;
}
.vk-content > * { position: relative; }
.vk-content .eyebrow { color: #7ea3f7; }
.vk-title { font-size: clamp(1.5rem, 2.6vw, 2rem); color: #fff; }
.vk-desc { font-size: .92rem; color: #9fb2d4; max-width: 42ch; }
.vk-cta {
  margin-top: 6px;
  background: #fff; color: var(--blue-deep);
  padding: 11px 22px; border-radius: 999px;
  font-weight: 700; font-size: .85rem;
}
.vk-banner:hover .vk-cta { background: var(--blue-tint); }
.vk-photo {
  flex: 0 0 42%;
  background-size: cover; background-position: center 28%;
  min-height: 232px;
}
@media (max-width: 700px) {
  .vk-banner { flex-direction: column; }
  .vk-photo { flex-basis: auto; min-height: 180px; order: -1; }
  .vk-content { padding: 28px 26px; }
}
@media (prefers-reduced-motion: reduce) { .vk-banner { transition: none; } }

/* ---------- quick links band ---------- */
.band { background: #0d1b33; color: #e8eefa; padding: 56px 0; position: relative; overflow: hidden; }
.band::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 120px, rgba(92,139,245,.08) 120px 123px);
}
.band .wrap { position: relative; }
.band .eyebrow { color: #7ea3f7; }
.band h2 { margin: 6px 0 30px; font-size: 1.7rem; color: #fff; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.q-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(126,163,247,.25);
  border-radius: 16px; padding: 22px;
  display: flex; flex-direction: column; gap: 6px;
  transition: background .15s, border-color .15s;
  color: inherit;
}
.q-card:hover { background: rgba(92,139,245,.12); border-color: rgba(126,163,247,.5); }
.q-card .num {
  font-family: "Avenir Next Condensed", "Arial Narrow", sans-serif;
  font-weight: 800; font-size: 2rem; line-height: 1;
  color: #7ea3f7; font-variant-numeric: tabular-nums;
}
.q-card b { font-size: .98rem; color: #fff; }
.q-card span { font-size: .8rem; color: #9fb2d4; }

/* ---------- sponsors (strip under the hero) ---------- */
.sponsors { padding: 0 0 52px; }
.sp-grid { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.sp-group h4 {
  margin: 0 0 14px;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-faint);
}
.sp-row { display: flex; gap: 16px; flex-wrap: wrap; }
.sp-logo {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 26px;
  display: grid; place-items: center;
  min-height: 76px;
  transition: box-shadow .15s;
}
.sp-logo:hover { box-shadow: var(--shadow); }
.sp-logo img { display: block; max-width: 100%; }
.sp-group.main .sp-logo img { height: 46px; width: auto; }
.sp-logo img.ship { height: 26px; width: auto; }

/* ---------- footer ---------- */
footer.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 44px 0 32px; }
.foot { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.foot h4 { margin: 0 0 12px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .88rem; }
.foot a:hover { color: var(--blue); }
.foot p { margin: 8px 0 0; font-size: .85rem; color: var(--ink-soft); max-width: 34ch; }
.legal { border-top: 1px solid var(--line); padding-top: 20px; font-size: .76rem; color: var(--ink-faint); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.legal .credit { margin-left: auto; }
.legal .credit a { color: var(--ink-soft); font-weight: 600; }
.legal .credit a:hover, .legal .credit a:focus-visible { color: var(--blue); text-decoration: underline; }

/* ---------- inner pages / posts ---------- */
.page-shell { padding: 44px 0 64px; }
.page-shell .inner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 40px clamp(20px, 5vw, 56px) 52px;
  box-shadow: var(--shadow);
}
.page-title { margin: 0 0 6px; font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
.post-meta { font-size: .76rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 22px; font-variant-numeric: tabular-nums; }
.post-hero-img { border-radius: 14px; margin: 0 0 26px; display: block; width: 100%; height: auto; }
.entry { font-size: 1rem; color: var(--ink-soft); }
.entry h1, .entry h2, .entry h3, .entry h4 { color: var(--ink); line-height: 1.25; margin: 1.6em 0 .5em; }
.entry a { color: var(--blue); }
.entry a:hover { text-decoration: underline; }
.entry img { border-radius: 10px; }
.entry table { border-collapse: collapse; width: 100%; max-width: none; font-size: .88rem; font-variant-numeric: tabular-nums; }
.entry table td, .entry table th { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.entry table th { color: var(--ink); }
.entry blockquote { border-left: 3px solid var(--blue); margin: 1.4em 0; padding: .2em 0 .2em 1.2em; color: var(--ink-soft); }
.entry .wp-block-table, .entry figure { overflow-x: auto; margin: 1.2em 0; }
.alignleft { float: left; margin: 0 20px 12px 0; }
.alignright { float: right; margin: 0 0 12px 20px; }
.aligncenter { display: block; margin: 12px auto; }
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; position: absolute;
}

/* archive grid + pagination */
.archive-head { margin-bottom: 6px; }
.pagination { margin-top: 34px; display: flex; gap: 8px; flex-wrap: wrap; font-size: .88rem; }
.pagination .page-numbers {
  background: var(--surface); border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 10px; font-weight: 600;
}
.pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- Úrslit results plugin skin (fif-results) ----------
   Scoped under .fifres so it overrides both the plugin's own CSS and the
   generic .entry table rules above. Restyles the plugin to the theme system. */
.entry .fifres { max-width: none; }
.fifres h3 {
  font-family: "Avenir Next Condensed", "HelveticaNeue-CondensedBold", "Arial Narrow", "Roboto Condensed", sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: .015em;
  font-size: 1.35rem; color: var(--ink); margin: 1.8em 0 .7em;
}

/* search */
.fifres .fifres-search { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.fifres .fifres-search input[type="search"] {
  flex: 1 1 260px; min-width: 0;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); font-size: .95rem;
}
.fifres .fifres-search input[type="search"]:focus-visible {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint);
}
.fifres .fifres-search button {
  border: none; cursor: pointer;
  background: var(--blue); color: #fff;
  padding: 12px 26px; border-radius: 12px; font-weight: 700; font-size: .9rem;
  transition: background .15s;
}
.fifres .fifres-search button:hover, .fifres .fifres-search button:focus-visible { background: var(--blue-deep); }

/* year grid */
.fifres .fifres-years {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 16px; margin: 0 0 10px; padding: 0; list-style: none;
}
.fifres .fifres-year {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; text-decoration: none; color: inherit;
  box-shadow: var(--shadow); transition: transform .15s, border-color .15s;
}
.fifres .fifres-year:hover { transform: translateY(-3px); border-color: var(--blue); }
.fifres .fifres-year-num {
  font-family: "Avenir Next Condensed", "HelveticaNeue-CondensedBold", "Arial Narrow", "Roboto Condensed", sans-serif;
  font-weight: 800; font-size: 1.85rem; line-height: 1;
  color: var(--blue); font-variant-numeric: tabular-nums;
}
.fifres .fifres-year-meta { font-size: .82rem; color: var(--ink-faint); }

/* series chips */
.fifres .fifres-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; padding: 0; list-style: none; }
.fifres .fifres-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; text-decoration: none;
  font-size: .9rem; font-weight: 700; color: var(--blue);
  transition: background .15s, border-color .15s;
}
.fifres .fifres-chip:hover { background: var(--blue-tint); border-color: var(--blue); }
.fifres .fifres-chip span { color: var(--ink-faint); font-weight: 500; font-size: .8rem; }

/* race view: breadcrumbs, subtitle, group heading, print */
.fifres .fifres-crumbs { font-size: .85rem; color: var(--ink-faint); margin: 0 0 10px; }
.fifres .fifres-crumbs a { color: var(--blue); font-weight: 600; }
.fifres .fifres-crumbs a:hover { text-decoration: underline; }
.fifres .fifres-race-sub { color: var(--ink-faint); font-size: .92rem; margin: 0 0 22px; }
.fifres .fifres-group {
  font-family: "Avenir Next Condensed", "HelveticaNeue-CondensedBold", "Arial Narrow", "Roboto Condensed", sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  font-size: 1.05rem; color: var(--ink); margin: 1.7em 0 .5em;
  padding-left: 12px; border-left: 3px solid var(--blue);
}
.fifres .fifres-print {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 18px; color: var(--ink-soft); font-weight: 600; font-size: .84rem;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.fifres .fifres-print:hover { border-color: var(--blue); color: var(--blue); }

/* result tables */
.fifres .fifres-table {
  width: 100%; border-collapse: collapse; margin: 0 0 24px;
  font-size: .9rem; font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.fifres .fifres-table th {
  background: var(--blue-tint); color: var(--blue-deep);
  text-align: left; font-weight: 700; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 11px 14px; border: none;
}
.fifres .fifres-table td { padding: 10px 14px; border: none; border-top: 1px solid var(--line); color: var(--ink-soft); }
.fifres .fifres-table tbody tr:first-child td { border-top: none; }
.fifres .fifres-table tbody tr:hover td { background: rgba(29,78,216,.05); }
.fifres .fifres-table th.num, .fifres .fifres-table td.num { text-align: right; }
.fifres .fifres-table td:nth-child(2) { color: var(--ink); font-weight: 600; }

/* ---------- Kappingarskrá calendar plugin skin (race-registration) ----------
   Scoped under .rrcal to override the plugin's own CSS. Restyles the event
   calendar (Tilmelding page) to the theme's card system. */
.entry .rrcal { max-width: none; }
.rrcal .rrcal-month {
  font-family: "Avenir Next Condensed", "HelveticaNeue-CondensedBold", "Arial Narrow", "Roboto Condensed", sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: .015em;
  font-size: 1.3rem; color: var(--ink); margin: 1.9em 0 1.1em;
  display: flex; align-items: center; gap: 16px;
}
.rrcal .rrcal-month::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.rrcal .rrcal-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px; margin: 0 0 8px; padding: 0; list-style: none;
}
.rrcal .rrcal-item {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .15s, border-color .15s;
}
.rrcal .rrcal-item:hover { transform: translateY(-3px); border-color: var(--blue); }

/* poster image with category + date overlays. Posters come in mixed shapes
   (landscape photos AND portrait posters), so contain the whole image on a soft
   backdrop rather than cropping — nothing gets cut off. */
.rrcal .rrcal-media {
  position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden;
  background: linear-gradient(160deg, #e4ecf7, #f2f6fb);
}
.rrcal .rrcal-media img { width: 100%; height: 100%; object-fit: contain; }
.rrcal .rrcal-media-fallback {
  position: absolute; inset: 0; background: var(--hero-grad);
  display: grid; place-items: center; color: #fff;
  font-family: "Avenir Next Condensed", "Arial Narrow", sans-serif; font-weight: 800; font-size: 3rem;
}
.rrcal .rrcal-cat {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(13,27,51,.72); color: #fff; border: 1px solid rgba(255,255,255,.28);
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px);
}
.rrcal .rrcal-date {
  position: absolute; top: 12px; left: 12px; right: auto; bottom: auto; z-index: 2;
  display: inline-flex; flex-direction: column; align-items: center;
  width: auto; height: auto;
  background: #fff; border-radius: 12px; padding: 7px 12px; min-width: 50px;
  box-shadow: 0 2px 10px rgba(9,18,40,.28);
}
.rrcal .rrcal-date-wd, .rrcal .rrcal-date-mon { font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.rrcal .rrcal-date-day { font-family: "Avenir Next Condensed", "Arial Narrow", sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1.05; color: var(--blue); font-variant-numeric: tabular-nums; }

/* body */
.rrcal .rrcal-body { padding: 18px 20px 4px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.rrcal .rrcal-title { margin: 0; font-size: 1.05rem; line-height: 1.3; font-weight: 700; }
.rrcal .rrcal-title a { color: var(--ink); text-decoration: none; }
.rrcal .rrcal-title a:hover { color: var(--blue); }
.rrcal .rrcal-meta { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.rrcal .rrcal-meta--date { font-weight: 600; color: var(--ink); }
.rrcal .rrcal-deadline { margin: 3px 0 0; font-size: .8rem; font-style: normal; font-weight: 600; color: var(--red-dark); }
.rrcal .rrcal-source { margin-top: 7px; font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }

/* register button + participant badge */
.rrcal .rrcal-actions { padding: 14px 20px 20px; }
.rrcal .rrcal-cbtnwrap { display: flex; align-items: center; gap: 10px; }
.rrcal .rrcal-btn {
  flex: 1; text-align: center; text-decoration: none;
  background: var(--blue); color: #fff;
  padding: 12px 18px; border-radius: 999px;
  font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
  transition: background .15s;
}
.rrcal .rrcal-btn:hover, .rrcal .rrcal-btn:focus-visible { background: var(--blue-deep); }
.rrcal .rrcal-cbadge {
  flex-shrink: 0; min-width: 40px; height: 40px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; text-decoration: none;
  background: var(--blue-tint); color: var(--blue-deep); border: 1px solid var(--line);
  font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums;
  transition: background .15s, color .15s;
}
.rrcal .rrcal-cbadge:hover { background: var(--blue); color: #fff; }
.rrcal .rrcal-empty { color: var(--ink-faint); font-size: .95rem; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  nav.main {
    display: none;
    position: absolute; top: 100%; right: 16px; left: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 10px;
    margin: 8px 0 0;
  }
  nav.main.open { display: block; max-height: 78vh; overflow-y: auto; }
  nav.main ul { flex-direction: column; }
  /* submenus collapse into accordions, toggled by JS adding .open to the parent li */
  nav.main li ul {
    display: none; position: static; grid-template-columns: 1fr;
    border: none; box-shadow: none; border-radius: 0;
    padding: 2px 0 6px 14px; margin: 0; min-width: 0;
    max-height: none; overflow: visible;
  }
  nav.main li.open > ul { display: block; }
  nav.main li ul li ul { border-left: 2px solid var(--line); margin-left: 6px; }
  /* disclosure caret on items that have a submenu */
  nav.main .menu-item-has-children > a { position: relative; padding-right: 34px; }
  nav.main .menu-item-has-children > a::after {
    content: ""; position: absolute; right: 12px; top: 50%;
    width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
    transform: rotate(45deg); transition: transform .18s;
  }
  nav.main .menu-item-has-children.open > a::after { transform: rotate(-135deg); margin-top: -2px; }
  /* right-edge alignment doesn't apply in the stacked mobile menu */
  nav.main > ul > li:nth-last-child(-n+3) > ul { right: auto; left: auto; }
  .nav-toggle { display: block; }
  header.site .cta { margin-left: auto; }
  .nav-toggle { margin-left: 0; }
  .hero .wrap { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .quick { grid-template-columns: 1fr 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
  .games-card { justify-content: center; padding: 32px 30px; }
  .cd { min-width: 60px; }
  .cd b { font-size: 2.6rem; }
  .cd-sep { font-size: 2.2rem; }
}
@media (max-width: 600px) {
  .news-grid { grid-template-columns: 1fr; }
  .quick { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
  .feature { padding: 32px 26px; min-height: 340px; }
  .brand-mark img { height: 40px; }
  .brand-logo { height: 64px; }
  /* header must fit a phone: tighten the flex gap + CTA padding, and let the
     long federation name wrap to two lines instead of overflowing off the
     right edge (which pushed the whole centred page left). The name only
     wraps when space is actually tight — wider phones keep it on one line. */
  header.site .wrap { gap: 12px; }
  .brand { flex-shrink: 1; min-width: 0; }
  .brand-name { min-width: 0; }
  .brand-name b { font-size: .85rem; white-space: normal; line-height: 1.12; }
  header.site .cta { padding: 9px 16px; }
  /* stack the card as a clean column so nothing overflows, and scale the
     countdown to fit a phone instead of getting pinched */
  .games-card { flex-direction: column; align-items: stretch; padding: 26px 18px; gap: 22px; }
  .games-info { max-width: 100%; }
  .games-info p { font-size: .9rem; }
  .countdown { gap: 4px; justify-content: center; }
  .cd { min-width: 0; flex: 1 1 0; }
  .cd b { font-size: clamp(1.7rem, 12vw, 2.3rem); }
  .cd span { font-size: .54rem; letter-spacing: .05em; margin-top: 4px; }
  .cd-sep { font-size: clamp(1.4rem, 9vw, 1.9rem); }
  .games-next { gap: 12px 16px; }
  .games-next .next-label { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .cta, .q-card, .nav-toggle span { transition: none; }
}