/* ================================================================
   View Norway — viewnorway.no
   v4.0 — Refined editorial with Norwegian character
   ================================================================ */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul[class], ol[class] { list-style: none; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --bg:         #f0ede7;
  --bg-warm:    #e6e2da;
  --surface:    #faf9f6;
  --surface-alt:#f5f3ee;
  --border:     #d6d1c7;
  --border-lt:  #e2ded5;

  --ink:        #1f1d19;
  --ink-soft:   #3a3731;
  --ink-muted:  #7d796f;
  --ink-faint:  #a8a49a;

  /* Norwegian navy — deep, authoritative */
  --navy:       #0e2240;
  --navy-mid:   #1b3a6b;
  --navy-lt:    #e3eaf4;
  --navy-faint: #eef2f8;

  /* Norwegian red — warm, bold */
  --red:        #b8192e;
  --red-dark:   #8e1222;
  --red-lt:     #fbedef;
  --red-faint:  #fdf5f6;

  /* Typography */
  --f-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --w-page:   900px;
  --w-wide:   960px;
  --r:        8px;
  --r-lg:     12px;

  /* Shadows */
  --sh-1: 0 1px 3px rgba(31,29,25,.06);
  --sh-2: 0 3px 12px rgba(31,29,25,.07), 0 0 0 1px rgba(31,29,25,.03);
  --sh-3: 0 8px 28px rgba(31,29,25,.1), 0 0 0 1px rgba(31,29,25,.04);

  --ease: cubic-bezier(.4,0,.2,1);
}

/* ── Base ────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body.vn-site {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.vn-container {
  width: 100%;
  max-width: var(--w-page);
  margin: 0 auto;
  padding-left: clamp(1rem, 5vw, 2.5rem);
  padding-right: clamp(1rem, 5vw, 2.5rem);
}

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════════ */
h1, h2, h3 {
  font-family: var(--f-display);
  color: var(--ink);
  font-weight: 400;
}

h4, h5, h6 {
  font-family: var(--f-body);
  color: var(--ink);
  font-weight: 600;
}

h1 {
  font-size: clamp(1.85rem, 4.5vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}

h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.65rem);
  line-height: 1.18;
  margin-top: 2.4rem;
  margin-bottom: .5rem;
}

h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  margin-top: 1.6rem;
  margin-bottom: .4rem;
}

h4 { font-size: 1rem; margin-top: 1.3rem; margin-bottom: .3rem; }
h5 { font-size: .88rem; margin-bottom: .2rem; }

p { margin-bottom: 1.1rem; }
strong, b { font-weight: 600; color: var(--ink); }
a strong, a b { color: inherit; }

hr {
  border: none;
  height: 0;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

/* ── Search highlight ───────────────────────────────────────── */
mark, mark[data-markjs] {
  background: var(--red-lt);
  color: var(--ink);
  padding: .05em .2em;
  border-radius: 3px;
  border-bottom: 1.5px solid var(--red);
}

/* ── Links ──────────────────────────────────────────────────── */
.vn-content a:not(.btn):not(.mod-articles-link),
.com-content-article__body a,
.com-content-category a:not(.btn),
.vn-below-content a {
  color: var(--navy-mid);
  text-decoration: none;
  transition: color .15s var(--ease);
}

.vn-content a:not(.btn):not(.mod-articles-link):hover,
.com-content-article__body a:hover,
.com-content-category a:not(.btn):hover,
.vn-below-content a:hover {
  color: var(--red);
}

.com-content-article__body a[target="_blank"]::after {
  content: '\2197';
  font-size: .6em;
  vertical-align: super;
  opacity: .35;
  margin-left: 2px;
}

/* ══════════════════════════════════════════════════════════════
   HEADER — bold navy band with breathing room
   ══════════════════════════════════════════════════════════════ */
.vn-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: white;
}

.vn-header.scrolled {
  box-shadow: 0 4px 20px rgba(14,34,64,.25);
}

.vn-header__inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 60px;
}

.vn-logo { flex-shrink: 0; }

.vn-logo__text {
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: white;
  transition: opacity .15s;
}

.vn-logo:hover .vn-logo__text { opacity: .8; }
.vn-logo__img { height: 30px; width: auto; }

/* Norwegian flag dot + emoji */
.vn-flag-dot {
  margin: 0 .15em;
  opacity: .4;
}

.vn-flag {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-style: normal;
  font-size: .75em;
  vertical-align: baseline;
}

.vn-tagline {
  display: none;
}

/* Tagline hidden — reclaimed for nav space */

/* ── Red accent line below header ───────────────────────────── */
.vn-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--red);
}

/* ── Mobile Toggle ──────────────────────────────────────────── */
.vn-nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 8px;
  z-index: 101;
}

.vn-nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: white;
  border-radius: 1px;
  transition: all .3s var(--ease);
  transform-origin: center;
}

.vn-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.vn-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vn-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (min-width: 768px) { .vn-nav-toggle { display: none; } }

/* ── Nav ────────────────────────────────────────────────────── */
.vn-nav { display: none; margin-left: auto; }

.vn-nav.open {
  display: block;
  position: fixed;
  inset: 63px 0 0 0;
  background: var(--navy);
  padding: 1rem 1.5rem;
  overflow-y: auto;
  z-index: 99;
  animation: slideIn .2s var(--ease);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) { .vn-nav { display: flex; align-items: center; } }

.vn-nav .mod-menu,
.vn-nav .nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (min-width: 768px) {
  .vn-nav .mod-menu, .vn-nav .nav { flex-direction: row; gap: 1px; }
}

.vn-nav .nav-item a {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  padding: .35rem .7rem;
  border-radius: 4px;
  transition: all .15s var(--ease);
}

.vn-nav .nav-item a:hover {
  color: white;
  background: rgba(255,255,255,.1);
}

.vn-nav .nav-item.active > a,
.vn-nav .nav-item.current > a {
  color: white;
  background: rgba(255,255,255,.12);
  font-weight: 600;
}

.vn-nav.open .nav-item a {
  font-size: .95rem;
  padding: .65rem 1rem;
  color: rgba(255,255,255,.7);
}

.vn-nav.open .nav-item a:hover { color: white; }

/* ── Header Search ─────────────────────────────────────────── */

/* Search icon button — visible on mobile, hidden on desktop */
.vn-search-toggle {
  display: none;
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  padding: 6px;
  margin-left: auto;
  transition: color .15s;
}

.vn-search-toggle:hover { color: white; }

@media (max-width: 767px) {
  .vn-search-toggle { display: flex; align-items: center; }
}

/* Search bar — slides down below header */
.vn-search-bar {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--navy);
  padding: .5rem clamp(1rem, 5vw, 2.5rem);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 4px 16px rgba(14,34,64,.3);
  display: none;
  z-index: 98;
}

.vn-search-bar.open { display: block; animation: slideIn .2s var(--ease); }

/* On desktop, search bar is always visible inline in the header */
@media (min-width: 768px) {
  .vn-search-bar {
    position: static;
    display: block;
    background: none;
    padding: 0;
    border: none;
    box-shadow: none;
    margin-left: .5rem;
    flex-shrink: 0;
  }
}

.vn-search-bar input[type="search"],
.vn-search-bar .mod-finder__input {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  color: white;
  font-size: .78rem;
  padding: .3rem .6rem;
  border-radius: 4px;
  width: 100%;
  transition: all .2s var(--ease);
}

@media (min-width: 768px) {
  .vn-search-bar input[type="search"],
  .vn-search-bar .mod-finder__input {
    width: 140px;
  }
  .vn-search-bar input[type="search"]:focus,
  .vn-search-bar .mod-finder__input:focus {
    width: 180px;
  }
}

.vn-search-bar input[type="search"]::placeholder {
  color: rgba(255,255,255,.35);
}

.vn-search-bar input[type="search"]:focus,
.vn-search-bar .mod-finder__input:focus {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
  outline: none;
  box-shadow: none;
}

/* Hide search button visually but keep it functional */
.vn-search-bar .mod-finder__button,
.vn-search-bar button[type="submit"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Search form needs relative positioning for the hidden button */
.vn-search-bar form {
  position: relative;
}

/* Also hide any label Joomla might render */
.vn-search-bar label {
  display: none;
}

/* ── Awesomplete search suggestions dropdown ──────────────── */
.awesomplete > ul {
  background: var(--navy);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  margin-top: .4rem;
  padding: .3rem 0;
  min-width: 220px;
}
.awesomplete > ul::before { display: none; }
.awesomplete > ul > li {
  padding: .45rem .75rem;
  font-size: .82rem;
  font-family: var(--f-body);
  color: rgba(255,255,255,.8);
  border-radius: 0;
  transition: background .12s;
}
.awesomplete > ul > li:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.awesomplete > ul > li[aria-selected="true"] {
  background: rgba(255,255,255,.15);
  color: #fff;
}
.awesomplete > ul mark {
  background: var(--red-lt);
  color: var(--ink);
  padding: .05em .15em;
  border-radius: 2px;
  border-bottom: none;
}
.awesomplete > ul li:hover mark {
  background: rgba(184,25,46,.35);
  color: #fff;
}
.awesomplete > ul li[aria-selected="true"] mark {
  background: rgba(184,25,46,.35);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--navy-lt);
  border-radius: 5px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--navy-lt) var(--bg);
}

/* ══════════════════════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════════════════════ */
.vn-breadcrumbs { background: var(--surface-alt); border-bottom: 1px solid var(--border-lt); }

.vn-breadcrumbs .mod-breadcrumbs,
.vn-breadcrumbs .breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem;
  padding: .4rem 0;
  margin: 0;
  font-size: .73rem;
}

.vn-breadcrumbs .mod-breadcrumbs__here { display: none; }
.vn-breadcrumbs a { color: var(--ink-muted); transition: color .15s; }
.vn-breadcrumbs a:hover { color: var(--navy-mid); }
.vn-breadcrumbs .breadcrumb-item.active { color: var(--ink-soft); }
.vn-breadcrumbs .divider,
.vn-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--border);
  padding-right: .2rem;
  font-size: .85rem;
}

/* ══════════════════════════════════════════════════════════════
   MAIN LAYOUT
   ══════════════════════════════════════════════════════════════ */
.vn-main {
  padding: 2rem 0 2.5rem;
  min-height: 50vh;
}

.vn-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 900px) {
  .vn-grid { grid-template-columns: 1fr 230px; }
  .vn-above-content, .vn-below-content { grid-column: 1 / -1; }
}

.vn-content { min-width: 0; }

/* ══════════════════════════════════════════════════════════════
   PAGE HEADER — with red accent
   ══════════════════════════════════════════════════════════════ */
.page-header { margin-bottom: 1rem; }

.page-header h1::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
  margin-top: .5rem;
  margin-bottom: .3rem;
}

/* ══════════════════════════════════════════════════════════════
   ARTICLE BODY
   ══════════════════════════════════════════════════════════════ */
.article-info,
.com-content-article__info {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  font-size: .73rem;
  color: var(--ink-muted);
  padding: .5rem 0 1rem;
  border-bottom: 1px solid var(--border-lt);
  margin-bottom: 1.4rem;
}

.com-content-article__body {
  font-size: .97rem;
  line-height: 1.76;
}

.com-content-article__body > p:first-child,
.com-content-article__body > article > p:first-child {
  font-size: 1.04rem;
  line-height: 1.78;
  color: var(--ink-soft);
}

.com-content-article__body h1 {
  margin-bottom: .75rem;
}

/* Themes grid — frontpage */
.vn-themes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  margin: .75rem 0 1rem;
}
.vn-themes-grid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  gap: .2rem;
  padding: .25rem .55rem;
  background: rgba(255,255,255,.7);
  color: var(--navy, #1e293b) !important;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 3px;
  font-size: .82rem;
  text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.vn-themes-grid a:hover {
  color: var(--navy-dark, #0f1a2e) !important;
  background: rgba(0,0,0,.045);
  border-color: rgba(0,0,0,.18);
}

/* Section headings with left red bar */
.com-content-article__body h2 {
  padding-left: .75rem;
  border-left: 3px solid var(--red);
  border-bottom: none;
  padding-bottom: 0;
}

.com-content-article__body h2:first-child { margin-top: 0; }

.com-content-article__body h3 {
  color: var(--navy-mid);
}

/* Lists */
.com-content-article__body ul,
.com-content-article__body ol {
  padding-left: 1.2em;
  margin-bottom: 1.1rem;
}

.com-content-article__body li {
  margin-bottom: .35rem;
  line-height: 1.68;
  transition: background .15s;
}

.com-content-article__body li:has(> a):hover,
.com-content-article__body p:has(> a:only-child):hover,
.mod-articles-items li:hover {
  background: rgba(14,34,64,.04);
}

.com-content-article__body li::marker { color: var(--red); }

/* Attraction/experience name emphasis — strong inside links */
.com-content-article__body li a strong {
  font-weight: inherit;
  color: var(--navy-mid, #1b3a6b);
}
.com-content-article__body li a,
.com-content-article__body p a {
  color: var(--ink-muted, #7d796f);
  text-decoration: none !important;
  text-decoration-line: none !important;
}
.com-content-article__body li a strong {
  color: var(--navy-mid, #1b3a6b);
}

/* Blockquotes */
blockquote,
.com-content-article__body blockquote {
  position: relative;
  border: none;
  background: var(--navy-lt);
  margin: 1.8rem 0;
  padding: 1.1rem 1.3rem 1.1rem 1.5rem;
  border-radius: var(--r);
  font-style: italic;
  color: var(--navy);
}

blockquote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--navy-mid);
  border-radius: var(--r) 0 0 var(--r);
}

blockquote p:last-child { margin-bottom: 0; }

/* Article hero image */
.item-image {
  margin: 0 0 .5rem;
}

.item-image img {
  width: 100%;
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}

.item-image figcaption {
  font-size: .7rem;
  color: var(--ink-muted);
  margin-top: .3rem;
  text-align: right;
}

/* Images */
.com-content-article__body img {
  border-radius: var(--r);
  margin: 1.2rem 0;
  box-shadow: var(--sh-1);
}

/* Iframes */
.com-content-article__body iframe,
iframe {
  max-width: 100%;
  border: none;
  border-radius: var(--r);
  margin: 1.2rem 0;
  box-shadow: var(--sh-1);
}

/* ══════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════ */
.com-content-article__body table,
table.category,
.com-content-category__table {
  width: 100%;
  margin: 1.3rem 0;
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.com-content-article__body th,
table.category thead th,
.com-content-category__table thead th {
  background: var(--navy);
  color: white;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .85rem;
  padding: .55rem .9rem;
  text-align: left;
  border-bottom: none;
}

/* Category list row <th> — NOT header, these are row titles */
table.category tbody th,
.com-content-category__table tbody th {
  background: transparent;
  color: inherit;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: .88rem;
  padding: 0;
  text-align: left;
  border-bottom: 1px solid var(--border-lt);
}

table.category tbody th a,
.com-content-category__table tbody th a {
  display: block;
  padding: .3rem .9rem;
}

.com-content-article__body td,
table.category td,
.com-content-category__table td {
  padding: .3rem .9rem;
  font-size: .88rem;
  border-bottom: 1px solid var(--border-lt);
  vertical-align: middle;
}

.com-content-article__body tr:last-child td,
table.category tr:last-child td { border-bottom: none; }

/* Article body table rows — clickable row when link present */
.com-content-article__body tr:hover td {
  background: var(--red-faint);
}

.com-content-article__body tbody tr:has(a[href]) {
  cursor: pointer;
}

.com-content-article__body tbody tr:has(a[href]) td {
  transition: background .15s var(--ease);
}

.emoji { display: inline-block; padding: 0 .2rem; font-size: 1.15rem; }

/* Category article list */
table.category a, .list-title a {
  color: var(--navy-mid);
  font-weight: 500;
  text-decoration: none;
  transition: color .15s;
}

table.category a:hover, .list-title a:hover {
  color: var(--red);
}

table.category tbody tr,
.com-content-category__table tbody tr {
  cursor: pointer;
  transition: background .1s var(--ease);
}

table.category tbody tr:hover th,
table.category tbody tr:hover td,
.com-content-category__table tbody tr:hover th,
.com-content-category__table tbody tr:hover td {
  background: var(--surface-alt);
}

table.category tbody tr:hover a,
.com-content-category__table tbody tr:hover a {
  color: var(--red);
}

.cat-list-row0 { background: var(--surface); }
.cat-list-row1 { background: var(--surface-alt); }
.list-date { color: var(--ink-muted); white-space: nowrap; }

.municipality-table { table-layout: fixed; }
.municipality-table td { width: 33.33%; }
.municipality-table a { color: var(--navy-mid); font-weight: 500; }
.municipality-table a:hover { color: var(--red); }
.municipality-table tr:nth-child(even) { background: var(--surface-alt); }

/* ══════════════════════════════════════════════════════════════
   SVG MAP — with visual framing
   ══════════════════════════════════════════════════════════════ */
.region {
  fill: var(--navy);
  transition: fill .25s var(--ease);
  cursor: pointer;
}

.region:hover { fill: var(--red); }

svg text {
  fill: white;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 14px;
  pointer-events: none;
}

/* Frame the map SVG area */
.com-content-article__body svg[viewBox] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem;
  margin: 1.5rem 0;
  box-shadow: var(--sh-1);
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════ */
.vn-sidebar { display: flex; flex-direction: column; gap: 1rem; }

.vn-sidebar .moduletable {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.vn-sidebar .moduletable h3 {
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 400;
  color: white;
  margin: 0;
  padding: .5rem .8rem;
  background: var(--navy);
}

.vn-sidebar .mod-menu,
.vn-sidebar .nav { list-style: none; padding: .3rem; margin: 0; }

.vn-sidebar li a {
  display: block;
  padding: .35rem .6rem;
  font-size: .83rem;
  color: var(--ink-soft);
  border-radius: 4px;
  transition: all .15s;
}

.vn-sidebar li a:hover { background: var(--navy-faint); color: var(--navy-mid); }
.vn-sidebar li.active > a,
.vn-sidebar li.current > a { background: var(--navy-lt); color: var(--navy); font-weight: 600; }

.vn-sidebar .custom { padding: .75rem; font-size: .85rem; line-height: 1.6; }
.vn-sidebar .custom a { color: var(--navy-mid); }

/* ══════════════════════════════════════════════════════════════
   BOTTOM SECTIONS
   ══════════════════════════════════════════════════════════════ */
.vn-bottom { padding: 2.5rem 0; }

.vn-bottom--a {
  background: var(--surface);
  border-top: 3px solid var(--navy);
}

.vn-bottom--b {
  background: var(--bg);
  border-top: 1px solid var(--border-lt);
}

/* Two-column grid — 70/30 split */
.vn-bottom--a .vn-container {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 2rem;
}

@media (max-width: 700px) {
  .vn-bottom--a .vn-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.vn-bottom .moduletable { margin-bottom: 0; }

.vn-bottom .moduletable > h2,
.vn-bottom .moduletable > h3 {
  font-family: var(--f-display);
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0;
  padding: 0;
  border: none;
  text-align: center;
}

.vn-bottom .moduletable > h2::after,
.vn-bottom .moduletable > h3::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
  margin: .5rem auto 1.2rem;
}

/* ── Article Cards ────────────────────────────────────────────── */
.mod-articles-items.mod-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.mod-articles-item {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  transition: background .15s var(--ease);
}

.vn-bottom .mod-articles-items li {
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.vn-bottom .mod-articles-items li:last-child { border-bottom: none; }

.mod-articles-item:hover {
  background: var(--surface-alt);
}

.mod-articles-title {
  font-family: var(--f-body);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

.mod-articles-title a,
a.mod-articles-link {
  display: block;
  padding: .55rem .6rem;
  color: var(--ink);
  transition: color .15s;
}

.mod-articles-title a:hover,
a.mod-articles-link:hover { color: var(--navy-mid); }

/* ── Bottom article lists — accent-bordered hover ──────────── */
.mod1 .mod-articles-items li,
.mod2 .mod-articles-items li {
  border-bottom: none;
  border-left: 3px solid transparent;
  border-radius: 4px;
  transition: border-color .2s, background .2s;
}
.mod1 .mod-articles-items li:hover,
.mod2 .mod-articles-items li:hover {
  border-left-color: var(--red);
  background: rgba(0,0,0,.025);
}
.mod1 .mod-articles-title a,
.mod2 .mod-articles-title a {
  padding: .5rem .7rem;
  font-size: .84rem;
  font-weight: 450;
  color: var(--ink-soft);
  position: relative;
  padding-right: 1.8rem;
}
.mod1 .mod-articles-title a::after,
.mod2 .mod-articles-title a::after {
  content: '→';
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: var(--red);
  font-size: .8rem;
  transition: opacity .2s, transform .2s;
}
.mod1 .mod-articles-items li:hover .mod-articles-title a::after,
.mod2 .mod-articles-items li:hover .mod-articles-title a::after {
  opacity: 1;
  transform: translateY(-50%) translateX(2px);
}
.mod1 .mod-articles-title a:hover,
.mod2 .mod-articles-title a:hover {
  color: var(--ink);
}

/* Action buttons */
.vn-tac-actions {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: .75rem;
}
.vn-tac-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .6rem;
  font-family: var(--f-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: 5px;
  transition: all .2s;
  white-space: nowrap;
}
.vn-tac-btn--surprise {
  color: #fff;
  background: var(--red);
  border: 1px solid var(--red);
}
.vn-tac-btn--surprise:hover {
  background: #d41e35;
  border-color: #d41e35;
  box-shadow: 0 2px 8px rgba(184,25,46,.35);
}
.vn-tac-btn--search {
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid rgba(0,0,0,.12);
}
.vn-tac-btn--search:hover {
  color: var(--ink);
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.2);
}

/* ══════════════════════════════════════════════════════════════
   BLOCK LINKS — all list items clickable as full row
   ══════════════════════════════════════════════════════════════ */
.com-content-article__body ul a,
.com-content-article__body ol a,
.com-tags__category .list-group-item a,
.vn-bottom .moduletable a {
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════
   BLOG / CATEGORY BLOG
   ══════════════════════════════════════════════════════════════ */
.blog .item,
.com-content-category-blog__item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-lt);
  padding: 1.1rem 0;
  margin-bottom: 0;
  transition: all .15s var(--ease);
}

.blog .item:last-child,
.com-content-category-blog__item:last-child { border-bottom: none; }

.blog .item:hover,
.com-content-category-blog__item:hover {
  padding-left: .5rem;
}

.blog .item h2,
.com-content-category-blog__item h2 {
  font-size: 1.35rem;
  margin-top: 0;
  border: none;
  padding: 0;
}

.blog .item h2 a { color: var(--ink); }
.blog .item h2 a:hover { color: var(--red); }

/* ══════════════════════════════════════════════════════════════
   TAGS
   ══════════════════════════════════════════════════════════════ */
.com-tags__category .list-group { list-style: none; padding: 0; }

.com-tags__category .list-group-item {
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--border-lt);
  background: transparent;
}

.com-tags__category .list-group-item:last-child { border-bottom: none; }

.com-tags__category .list-group-item:hover { background: var(--surface-alt); }

.com-tags__category .list-group-item h3 {
  font-family: var(--f-body);
  font-size: .88rem;
  font-weight: 500;
  margin: 0;
}

.com-tags__category .list-group-item h3 a {
  display: block;
  padding: .5rem .6rem;
  color: var(--navy-mid);
  transition: color .15s;
}

.com-tags__category .list-group-item h3 a:hover { color: var(--red); }

/* ══════════════════════════════════════════════════════════════
   CATEGORY LIST — block links for table rows
   ══════════════════════════════════════════════════════════════ */
table.category td a,
.list-title a {
  display: block;
  padding: .1rem 0;
}

/* ── Municipality index (/go) — multi-column card grid ────── */
.itemid-102 .com-content-category__table {
  display: block;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.itemid-102 .com-content-category__table thead { display: none; }
.itemid-102 .com-content-category__table tbody {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.itemid-102 .com-content-category__table tbody tr {
  display: contents;
}
.itemid-102 .com-content-category__table tbody th {
  padding: 0;
  font-weight: 400;
  border-bottom: 1px solid rgba(0,0,0,.04);
  border-right: 1px solid rgba(0,0,0,.04);
}
.itemid-102 .com-content-category__table tbody th:nth-child(4n) {
  border-right: none;
}
.itemid-102 .com-content-category__table tbody th a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .6rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--navy-mid);
  text-align: center;
  transition: all .12s var(--ease);
}
.itemid-102 .com-content-category__table tbody th a:hover {
  background: rgba(184,25,46,.04);
  color: var(--red);
}
.itemid-102 .com-content-category__table tbody tr:hover th,
.itemid-102 .com-content-category__table tbody tr:hover td {
  background: transparent;
}
@media (max-width: 767px) {
  .itemid-102 .com-content-category__table tbody {
    grid-template-columns: repeat(2, 1fr);
  }
  .itemid-102 .com-content-category__table tbody th:nth-child(2n) {
    border-right: none;
  }
  .itemid-102 .com-content-category__table tbody th:nth-child(4n) {
    border-right: 1px solid rgba(0,0,0,.04);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .itemid-102 .com-content-category__table tbody {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER — navy base with red top line
   ══════════════════════════════════════════════════════════════ */
.vn-footer {
  background: var(--navy);
  color: rgba(255,255,255,.65);
  padding: 2rem 0 1.25rem;
  border-top: 3px solid var(--red);
}

.vn-footer .vn-container {
  max-width: 1100px;
}

.vn-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  text-align: center;
}

.vn-footer__logo {
  font-family: var(--f-display);
  font-size: 1.3rem;
  color: rgba(255,255,255,.9);
}

.vn-footer__tagline {
  font-size: .65rem;
  color: rgba(255,255,255,.35);
  margin: 0;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Footer modules */
.vn-footer__modules {
  position: relative;
  font-size: .75rem;
  line-height: 1.6;
  color: rgba(255,255,255,.55);
  width: 100%;
  margin-top: .5rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.vn-footer__modules .moduletable {
  margin-bottom: .6rem;
}

.vn-footer__modules .moduletable:last-child { margin-bottom: 0; }

.vn-footer__modules a {
  color: rgba(255,255,255,.6);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.15);
  transition: color .15s;
}

.vn-footer__modules a:hover { color: rgba(255,255,255,.95); }

.vn-footer__modules strong {
  color: rgba(255,255,255,.65);
  font-weight: 600;
}

.vn-footer__modules p { margin-bottom: .35rem; }
.vn-footer__modules p:last-child { margin-bottom: 0; }

/* Disclaimer text — smaller, subtler */
.vn-footer__modules .vn-footer-disclaimer {
  font-size: .68rem;
  color: rgba(255,255,255,.4);
  line-height: 1.55;
}

/* Footer nav links row */
.vn-footer__modules .vn-footer-nav {
  font-size: .75rem;
  margin-top: .4rem;
}

.vn-footer__modules .vn-footer-nav a {
  text-decoration: none;
  color: rgba(255,255,255,.55);
}

.vn-footer__modules .vn-footer-nav a:hover {
  color: rgba(255,255,255,.9);
}

/* Copyright + weblio row */
.vn-footer__modules .vn-footer-copy {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: .63rem;
  color: rgba(255,255,255,.3);
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(255,255,255,.06);
}

.vn-footer__modules .vn-footer-copy a {
  color: rgba(255,255,255,.35);
  font-size: .63rem;
}

.vn-footer__modules .vn-footer-copy a:hover {
  color: rgba(255,255,255,.65);
}

/* Partner strip — Weblio */
.vn-partner-strip {
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: var(--sand-light, #f0ece4);
  padding: 2rem 0;
}
.vn-partner-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.vn-partner-brand {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex-shrink: 0;
  min-width: 120px;
}
.vn-partner-label {
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted, #8a857c);
}
.vn-partner-wordmark {
  font-family: var(--f-display, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #c4431f;
  text-decoration: none;
  transition: opacity .2s ease;
  line-height: 1;
}
.vn-partner-wordmark:hover { opacity: .8; }
.vn-partner-tagline {
  font-size: .65rem;
  letter-spacing: .06em;
  color: var(--ink-muted, #8a857c);
  margin-top: .15rem;
}
.vn-partner-desc {
  flex: 1;
  font-size: .85rem;
  color: var(--ink-soft, #5c574f);
  line-height: 1.65;
  margin: 0;
  min-width: 200px;
}
.vn-partner-cta {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-block;
  padding: .5rem 1.2rem;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  color: var(--ink-soft, #5c574f);
  text-decoration: none;
  font-size: .8rem;
  transition: background .15s, color .15s;
}
.vn-partner-cta:hover {
  background: var(--navy, #1e293b);
  color: #fff;
  border-color: var(--navy, #1e293b);
}
@media (max-width: 640px) {
  .vn-partner-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .vn-partner-cta { align-self: flex-start; }
}

/* RSS syndicate — bottom-left, aligned with the weblio copy row */
.vn-footer__modules > .moduletable:has(.syndicate-module) {
  margin: 0;
  position: absolute;
  left: 0;
  bottom: 0;
}
.vn-footer__modules .syndicate-module {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .63rem;
  color: rgba(255,255,255,.35);
  text-decoration: none;
  transition: color .15s;
}

.vn-footer__modules .syndicate-module:hover { color: rgba(255,255,255,.65); }

/* ══════════════════════════════════════════════════════════════
   BACK TO TOP
   ══════════════════════════════════════════════════════════════ */
.vn-back-top {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  border: none;
  border-radius: 50%;
  color: white;
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .3s var(--ease);
  z-index: 50;
}

.vn-back-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.vn-back-top:hover { background: var(--red); box-shadow: var(--sh-3); }

/* ══════════════════════════════════════════════════════════════
   ERROR PAGE
   ══════════════════════════════════════════════════════════════ */
.vn-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  text-align: center;
  padding: 2rem;
}

.vn-error h1 { font-size: 5rem; color: var(--border); line-height: 1; }
.vn-error__message { font-size: 1rem; color: var(--ink-muted); margin: .5rem 0 1.5rem; }

.vn-error__home {
  display: inline-block;
  background: var(--navy);
  color: white;
  padding: .5rem 1.2rem;
  border-radius: 5px;
  font-weight: 500;
  font-size: .84rem;
  transition: background .15s;
}

.vn-error__home:hover { background: var(--red); }

/* ══════════════════════════════════════════════════════════════
   JOOMLA SYSTEM
   ══════════════════════════════════════════════════════════════ */
.alert {
  border-radius: var(--r);
  padding: .7rem .9rem;
  margin-bottom: 1rem;
  font-size: .85rem;
  border: 1px solid;
}

.alert-success { background: #edf7ee; border-color: #b8deb8; color: #1a5c1a; }
.alert-warning { background: #fdf7ec; border-color: #efd88a; color: #7a5600; }
.alert-danger  { background: var(--red-lt); border-color: #e8bfc4; color: var(--red-dark); }
.alert-info    { background: var(--navy-faint); border-color: var(--navy-lt); color: var(--navy); }

.pagination {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  gap: .15rem;
  justify-content: center;
}

.page-item .page-link {
  display: block;
  padding: .3rem .6rem;
  font-size: .78rem;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: all .15s;
}

.page-item .page-link:hover { background: var(--navy-faint); color: var(--navy-mid); border-color: var(--navy-lt); }
.page-item.active .page-link,
.com-content-category .page-item.active .page-link { background: var(--navy); border-color: var(--navy); color: #fff !important; text-decoration: none; }
.page-item.disabled .page-link { opacity: .3; pointer-events: none; }

/* Pagination arrow icons (Joomla uses icon-angle-* but no icon font loaded) */
.page-link .icon-angle-left::before   { content: '‹'; }
.page-link .icon-angle-right::before  { content: '›'; }
.page-link .icon-angle-double-left::before  { content: '«'; }
.page-link .icon-angle-double-right::before { content: '»'; }
.page-link [class^="icon-"] { font-style: normal; font-size: 1rem; line-height: 1; }

/* Pagination limit dropdown */
select#limit {
  width: auto;
  min-width: 4.5rem;
  padding: .3rem 1.8rem .3rem .5rem;
  font-size: .78rem;
}
.com-content-category__pagination.btn-group.float-end {
  float: right;
  margin-bottom: .5rem;
}
.com-content-category__counter.counter {
  float: right;
  clear: right;
  font-size: .75rem;
  color: var(--ink-soft);
  margin: 0;
  padding: .2rem 0;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select {
  font-family: var(--f-body);
  font-size: .85rem;
  padding: .45rem .7rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 3px rgba(27,58,107,.08);
}

.btn, button[type="submit"] {
  font-family: var(--f-body);
  font-size: .8rem;
  font-weight: 600;
  padding: .45rem 1rem;
  border-radius: 4px;
  border: none;
  transition: all .15s;
}

.btn-primary { background: var(--navy); color: white; }
.btn-primary:hover { background: var(--red); }
.btn-secondary { background: var(--surface-alt); color: var(--ink-soft); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--navy-faint); color: var(--navy-mid); border-color: var(--navy-lt); }

/* ══════════════════════════════════════════════════════════════
   SMART SEARCH / com_finder
   ══════════════════════════════════════════════════════════════ */
.com-finder .search-results { list-style: none; padding: 0; margin: 1rem 0; }

.com-finder .result__item {
  padding: .75rem 0;
  border-bottom: 1px solid var(--border-lt);
}

.com-finder .result__item:last-child { border-bottom: none; }

.com-finder .result__title-text {
  font-family: var(--f-display);
  font-size: 1.1rem;
  margin: 0 0 .25rem;
}

.com-finder .result__title-link {
  color: var(--navy-mid);
  text-decoration: none;
  transition: color .15s;
}

.com-finder .result__title-link:hover { color: var(--red); }

.com-finder .result__description {
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: .25rem 0;
}

.com-finder .result__date,
.com-finder .result__taxonomy {
  font-size: .73rem;
  color: var(--ink-muted);
}
.com-finder .result__taxonomy--Type,
.com-finder .result__taxonomy--Author { display: none !important; }
.com-finder .result__taxonomy--Category::before { content: none !important; }

.com-finder .result__taxonomy-item {
  display: inline-block;
  font-size: .7rem;
  background: var(--navy-faint);
  color: var(--navy-mid);
  padding: .15rem .45rem;
  border-radius: 3px;
  margin: .15rem .15rem 0 0;
}

.com-finder mark[data-markjs] {
  background: var(--red-lt);
  color: var(--ink);
  padding: .05em .2em;
  border-radius: 3px;
  border-bottom: 1.5px solid var(--red);
}

/* Search form */
.com-finder .input-group {
  display: flex;
  gap: 0;
}

.com-finder .input-group input[type="search"],
.com-finder .input-group input[type="text"] {
  flex: 1;
  border-radius: 5px 0 0 5px;
}

.com-finder .input-group .btn {
  border-radius: 0 5px 5px 0;
}

/* Hide search clutter — people just want results */
.com-finder__tips.card,
.com-finder__filter,
#search-sorting,
#search-query-explained p a,
.com-finder fieldset { display: none; }

#search-query-explained p {
  font-size: .82rem;
  color: var(--ink-muted);
  margin-bottom: .5rem;
}

/* ══════════════════════════════════════════════════════════════
   CONTACT / com_contact
   ══════════════════════════════════════════════════════════════ */
.com-contact .contact {
  margin-bottom: 1.5rem;
}

.com-contact .contact-address,
.com-contact .contact-miscinfo,
.com-contact .contact-links {
  font-size: .88rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.com-contact .contact-links a {
  color: var(--navy-mid);
  text-decoration: none;
}

.com-contact .contact-links a:hover { color: var(--red); }

.com-contact form.form-validate .control-group {
  margin-bottom: .75rem;
}

.com-contact form.form-validate .control-label label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: .2rem;
}

.com-contact form.form-validate textarea {
  min-height: 120px;
  resize: vertical;
}

/* Contact category list */
.com-contact-category .list-title a {
  color: var(--navy-mid);
  font-weight: 500;
}

.com-contact-category .list-title a:hover { color: var(--red); }

/* ══════════════════════════════════════════════════════════════
   LOGIN / com_users
   ══════════════════════════════════════════════════════════════ */
.com-users-login .com-users-login__form,
.com-users-login .well,
.com-users-profile .well,
.com-users-registration .well {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.com-users-login .control-group,
.com-users-registration .control-group {
  margin-bottom: .75rem;
}

.com-users-login .control-label label,
.com-users-registration .control-label label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: .2rem;
}

.com-users-login__remember .form-check {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .5rem 0;
}

.com-users-login__remember .form-check-input {
  width: auto;
  margin: 0;
}

.com-users-login__remember .form-check-label {
  font-size: .8rem;
  color: var(--ink-soft);
}

.com-users-login__submit { margin-top: 1rem; }

.com-users-login__options.list-group {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  border-top: 1px solid var(--border-lt);
  padding-top: .75rem;
}

.com-users-login__options .list-group-item {
  background: transparent;
  border: none;
  padding: .2rem 0;
  font-size: .82rem;
}

.com-users-login__options .list-group-item a {
  color: var(--navy-mid);
  text-decoration: none;
}

.com-users-login__options .list-group-item a:hover { color: var(--red); }

/* Sidebar login */
.vn-sidebar .com-users-login form { padding: .5rem; }
.vn-sidebar .com-users-login .control-group { margin-bottom: .5rem; }
.vn-sidebar .com-users-login input { font-size: .8rem; padding: .35rem .5rem; }
.vn-sidebar .com-users-login button[type="submit"] { width: 100%; margin-top: .4rem; }

/* ══════════════════════════════════════════════════════════════
   TAGS / com_tags (enhanced)
   ══════════════════════════════════════════════════════════════ */
.com-tags-tag-list.tag-category > h1 { margin-bottom: .35rem; }
.com-tags-tag .tag-category { margin-bottom: 1.5rem; }

.com-tags-tag .tag-category h3 {
  font-family: var(--f-body);
  font-size: .92rem;
  font-weight: 600;
  margin: 0 0 .5rem;
  color: var(--ink);
}

.com-tags-tags__filter.btn-group {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
}

.com-tags-tags__filter .inputbox {
  font-size: .82rem;
}

/* Tag badges inline */
.tags.inline,
.tags.list-inline { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .75rem 0; }

.tags.inline li a,
.tags.list-inline li a,
span.tag-body a {
  display: inline-block;
  font-size: .88rem;
  background: var(--navy-faint);
  color: var(--navy-mid);
  padding: .35rem .7rem;
  border-radius: 4px;
  text-decoration: none;
  transition: all .15s;
  border: 1px solid var(--border-lt);
}

.tags.inline li a:hover,
.tags.list-inline li a:hover,
span.tag-body a:hover {
  background: var(--navy-lt);
  color: var(--navy);
  border-color: var(--navy-lt);
}

/* Override Bootstrap btn styles on tag pills */
.tags .btn-info {
  background: var(--navy-faint);
  color: var(--navy-mid);
  border: 1px solid var(--border-lt);
}
.tags .btn-info:hover {
  background: var(--navy-lt);
  color: var(--navy);
}

/* ══════════════════════════════════════════════════════════════
   RELATED ITEMS MODULE
   ══════════════════════════════════════════════════════════════ */
ul.mod-relateditems {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.mod-relateditems li {
  border-bottom: 1px solid var(--border-lt);
}

ul.mod-relateditems li:last-child { border-bottom: none; }

ul.mod-relateditems li a {
  display: block;
  padding: .45rem .3rem;
  font-size: .85rem;
  color: var(--navy-mid);
  text-decoration: none;
  transition: all .15s;
}

ul.mod-relateditems li a:hover {
  color: var(--red);
  padding-left: .6rem;
}

/* ══════════════════════════════════════════════════════════════
   CODE BLOCKS
   ══════════════════════════════════════════════════════════════ */
.vn-code-wrap {
  position: relative;
  margin: 1rem 0 1.25rem;
}
.vn-code-wrap pre {
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: 6px;
  padding: 1.2rem 1rem .9rem;
  overflow-x: auto;
  font-size: .78rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  border: 1px solid rgba(255,255,255,.06);
}
.vn-code-wrap code {
  font-family: 'Courier New', Consolas, monospace;
  background: none;
  padding: 0;
  color: inherit;
}
.vn-code-copy {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.6);
  padding: .25rem .6rem;
  border-radius: 4px;
  font-size: .65rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.vn-code-copy:hover {
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   ARTICLE NAVIGATION (prev/next)
   ══════════════════════════════════════════════════════════════ */
.pagenavigation,
nav.pagenavigation {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-lt);
}

.pagenavigation .btn {
  font-size: .78rem;
  padding: .4rem .8rem;
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  transition: all .15s;
}

.pagenavigation .btn:hover {
  background: var(--navy-faint);
  color: var(--navy-mid);
  border-color: var(--navy-lt);
}

/* ══════════════════════════════════════════════════════════════
   NEWSFEEDS / com_newsfeeds
   ══════════════════════════════════════════════════════════════ */
.com-newsfeeds-categories .categories-list,
.com-newsfeeds-categories__items {
  list-style: none;
  padding: 0;
}

.com-newsfeeds-categories__items {
  padding: .5rem 0;
  border-bottom: 1px solid var(--border-lt);
  transition: background .15s;
}

.com-newsfeeds-categories__items:hover { background: var(--surface-alt); }

.com-newsfeeds-categories__items h3.item-title {
  font-family: var(--f-body);
  font-size: .88rem;
  font-weight: 500;
  margin: 0;
}

.com-newsfeeds-categories__items h3.item-title a {
  color: var(--navy-mid);
  text-decoration: none;
}

.com-newsfeeds-categories__items h3.item-title a:hover { color: var(--red); }

.com-newsfeeds-newsfeed .feed-description { margin-bottom: 1.5rem; }

.com-newsfeeds-newsfeed .feed-items {
  list-style: none;
  padding: 0;
}

.com-newsfeeds-newsfeed .feed-item-title a {
  color: var(--navy-mid);
  font-weight: 500;
}

.com-newsfeeds-newsfeed .feed-item-description {
  font-size: .88rem;
  color: var(--ink-soft);
  margin: .25rem 0 .75rem;
}

/* ══════════════════════════════════════════════════════════════
   BOOTSTRAP FORM COMPONENTS
   ══════════════════════════════════════════════════════════════ */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group > input,
.input-group > select {
  flex: 1;
  min-width: 0;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: .45rem .7rem;
  font-size: .85rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  white-space: nowrap;
}

.form-check {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .3rem;
}

.form-check-inline { display: inline-flex; margin-right: .75rem; }

.form-check-input {
  width: auto;
  margin: 0;
  accent-color: var(--navy);
}

.form-check-label {
  font-size: .85rem;
  color: var(--ink-soft);
}

/* List group */
.list-group {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-group-item {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--border-lt);
  background: transparent;
}

.list-group-item:last-child { border-bottom: none; }

.list-group-item-action {
  cursor: pointer;
  transition: background .15s;
}

.list-group-item-action:hover { background: var(--surface-alt); }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.card-header {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  padding: .6rem .9rem;
  font-size: .85rem;
  font-weight: 600;
}

.card-body { padding: .9rem; }

.card-footer {
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  padding: .5rem .9rem;
  font-size: .8rem;
}

/* Well (legacy Joomla) */
.well {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE — Theme grid & intro
   ══════════════════════════════════════════════════════════════ */
.vn-hero-intro {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
  max-width: 720px;
}

.vn-quick-links {
  font-size: .9rem;
  color: var(--ink-muted);
}

.vn-quick-links a {
  font-weight: 600;
  text-decoration-color: rgba(27,58,107,.3) !important;
}

.vn-map-intro {
  font-size: .88rem;
  color: var(--ink-muted);
  margin-top: 1.5rem;
  font-style: italic;
}

.vn-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: .3rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.vn-theme-grid a {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .55rem;
  background: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: 5px;
  color: var(--navy);
  font-size: .78rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: all .2s var(--ease);
  white-space: nowrap;
}

.vn-theme-grid a:hover {
  background: var(--navy-faint);
  border-color: var(--navy-lt);
  color: var(--navy);
  box-shadow: var(--sh-1);
  transform: translateY(-1px);
}

.vn-theme-grid a::after { display: none !important; } /* no external link icon */

.vn-theme-grid .vn-theme-emoji {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1;
}

@media (max-width: 480px) {
  .vn-theme-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════════════ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

span.badge.bg-danger.featured-article-badge { display: none; }
.table-bordered, .table-bordered td, .table-bordered th { border: none !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }

::selection { background: var(--navy-lt); color: var(--navy); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }

.desktop-view { display: block; }
.mobile-view { display: none; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .vn-main { padding: 1.5rem 0 2rem; }
  .vn-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .vn-header__inner { height: 50px; }
  .vn-logo__text { font-size: 1.15rem; }
  .vn-nav.open { top: 53px; }
  .vn-main { padding: 1.25rem 0 1.5rem; }
  .com-content-article__body { font-size: .92rem; }
  .blog .item { padding: .9rem 0; }
  .mod-articles-items.mod-list { grid-template-columns: 1fr; }
  .vn-bottom { padding: 1.75rem 0; }

  /* Tables: horizontal scroll on small screens */
  .com-content-article__body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer stays readable */
  .vn-footer .vn-container { max-width: 100%; }
  .vn-footer__modules .vn-footer-copy {
    flex-direction: column;
    gap: .2rem;
    align-items: center;
  }

  /* Pagination wraps nicely */
  .pagination { flex-wrap: wrap; gap: .25rem; }
}

@media (max-width: 600px) {
  .desktop-view { display: none !important; }
  .mobile-view { display: block !important; }
  .municipality-table td { width: 100%; display: block; text-align: center; padding: .3rem; }

  /* Article body images full bleed */
  .com-content-article__body img {
    border-radius: 0;
    margin-left: calc(-1 * clamp(1rem, 5vw, 2.5rem));
    margin-right: calc(-1 * clamp(1rem, 5vw, 2.5rem));
    max-width: calc(100% + 2 * clamp(1rem, 5vw, 2.5rem));
    width: calc(100% + 2 * clamp(1rem, 5vw, 2.5rem));
  }

  /* Category list: hide date column on very small screens */
  .list-date { display: none; }

  /* Tighter headings */
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.2rem; margin-top: 1.8rem; }

  /* SVG map responsive */
  .com-content-article__body svg[viewBox] { padding: .5rem; }
}

/* ══════════════════════════════════════════════════════════════
   FILMSTRIP — thumbnail row below hero image
   ══════════════════════════════════════════════════════════════ */
.vn-filmstrip-wrap {
  position: relative;
}
.vn-filmstrip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.vn-filmstrip::-webkit-scrollbar {
  display: none;
}
.vn-filmstrip .vn-thumb {
  width: 80px;
  min-width: 80px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--r, 6px);
  cursor: pointer;
  opacity: .55;
  border: 2px solid transparent;
  transition: opacity .2s, border-color .2s;
  flex-shrink: 0;
}
.vn-filmstrip .vn-thumb:hover {
  opacity: .85;
}
.vn-filmstrip .vn-thumb.vn-thumb-active {
  opacity: 1;
  border-color: var(--accent, #1272a8);
}
/* Prev/next buttons on hero image */
figure.item-image { position: relative; }
.vn-filmstrip-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.85);
  font-size: 22px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
  transition: background .2s;
  border-radius: 0;
  padding: 0;
}
.vn-filmstrip-btn:hover {
  background: rgba(0,0,0,.07);
  color: #fff;
}
.vn-filmstrip-btn--left { left: 0; }
.vn-filmstrip-btn--right { right: 0; }
.vn-filmstrip-more {
  text-align: right;
  font-size: .72rem;
  margin-top: -4px;
  margin-bottom: .5rem;
}
.vn-filmstrip-more a {
  color: var(--ink-muted, #6b7280);
  text-decoration: none;
  font-style: italic;
}
.vn-filmstrip-more a:hover {
  color: var(--accent, #1272a8);
}

.vn-photo-credit {
  font-size: .68rem;
  color: var(--ink-muted, #9ca3af);
  font-style: italic;
  text-align: right;
  margin-top: .2rem;
  margin-bottom: .3rem;
  line-height: 1.4;
}
.vn-photo-disclaimer {
  font-size: .72rem;
  color: var(--ink-muted, #9ca3af);
  margin-top: .4rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.vn-photo-disclaimer a {
  color: var(--ink-muted, #9ca3af);
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   AD BANNERS
   ══════════════════════════════════════════════════════════════ */

/* ── Shared ad slot ───────────────────────────────────────── */
.vn-ad {
  display: block;
  text-align: center;
  margin: 1.5rem 0;
  position: relative;
}
.vn-ad a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.vn-ad img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
}
.vn-ad-label {
  display: block;
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .25rem;
}

/* ── Demo ad (placeholder) ────────────────────────────────── */
.vn-ad--demo {
  border: 1.5px dashed var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  background: var(--surface-alt);
  transition: border-color .2s, background .2s;
}
.vn-ad--demo:hover {
  border-color: var(--red);
  background: var(--red-faint);
}
.vn-ad--demo a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.vn-ad--demo .vn-ad__icon {
  font-size: 1.4rem;
  line-height: 1;
}
.vn-ad--demo .vn-ad__headline {
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.3;
}
.vn-ad--demo .vn-ad__sub {
  font-size: .78rem;
  color: var(--ink-muted);
  line-height: 1.4;
}
.vn-ad--demo .vn-ad__cta {
  display: inline-block;
  margin-top: .35rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--red);
  letter-spacing: .02em;
}
.vn-ad--demo:hover .vn-ad__cta {
  text-decoration: underline;
}

/* ── Active ad (client banner) ────────────────────────────── */
.vn-ad--active {
  border-radius: var(--r);
  overflow: hidden;
}
.vn-ad--active a {
  transition: opacity .2s;
}
.vn-ad--active a:hover {
  opacity: .92;
}

/* ── Top banner (wide, below title) ───────────────────────── */
.vn-ad--top {
  margin: 1rem 0 1.5rem;
}

/* ── Mid-article (after intro paragraph) ──────────────────── */
.vn-ad--mid {
  margin: 1.5rem 0;
}

/* ── Bottom banner (below article) ────────────────────────── */
.vn-ad--bottom {
  margin: 2rem 0 1rem;
}

/* ── Sidebar ad ───────────────────────────────────────────── */
.vn-ad--sidebar {
  margin: 0 0 1.25rem;
}
.vn-ad--sidebar.vn-ad--demo {
  padding: 1rem;
}
.vn-ad--sidebar .vn-ad__headline {
  font-size: .9rem;
}
.vn-ad--sidebar .vn-ad__sub {
  font-size: .72rem;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .vn-ad--demo { padding: 1rem; }
  .vn-ad--demo .vn-ad__headline { font-size: .88rem; }
  .vn-ad--demo .vn-ad__sub { font-size: .72rem; }
}

/* Hide ads in print */
@media print {
  .vn-ad { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════════ */
@media print {
  body { background: white; color: black; font-size: 11pt; }
  .vn-header, .vn-footer, .vn-back-top, .vn-breadcrumbs,
  .vn-sidebar, .vn-bottom { display: none; }
  a { color: black; }
  h1, h2, h3 { color: black; page-break-after: avoid; }
  .page-header h1::after { display: none; }
}