/* =====================================================================
   View Norway — design26 (Claude Design full-site redesign)
   Loaded AFTER template.css so these rules cascade last.
   The per-element look lives in inline styles emitted by index.php +
   the Joomla view overrides (faithful to the Claude Design mockups).
   This file holds what inline styles CANNOT express: base resets,
   responsive @media rules, keyframes, the <theme-icon> host, and the
   :hover states (Claude Design's `style-hover` attr is not real CSS).
   ===================================================================== */

/* ---------- base ---------- */
:root { --vn-navy:#0e2240; --vn-navy-mid:#1b3a6b; --vn-red:#b8192e; --vn-red-bright:#d41e35; --vn-red-dark:#8e1222; --vn-cream:#faf9f6; --vn-ink:#1f1d19; --vn-ink-muted:#6f6b61; }
/* remap the old font vars to the new families so any body/component using
   --f-display / --f-body renders in Newsreader / Schibsted Grotesk even
   though the old DM Serif + Inter are no longer loaded. */
body.vn-site{
  --f-display:'Newsreader', Georgia, serif;
  --f-body:'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  /* a11y: darken the muted/faint inks to clear WCAG AA on cream */
  --ink-muted:#6f6b61; --ink-faint:#8a857a;
}
body.vn-site{ font-family:'Schibsted Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#1f1d19; background:#faf9f6; -webkit-font-smoothing:antialiased; margin:0; }
body.vn-site *{ box-sizing:border-box; }
body.vn-site a{ text-decoration:none; }
body.vn-site ::selection{ background:#b8192e; color:#fff; }
body.vn-site h1, body.vn-site h2, body.vn-site h3{ font-family:'Newsreader', Georgia, serif; font-weight:500; }

/* <theme-icon> web component host (defined in js/theme-icons.js) */
theme-icon{ display:inline-flex; }

/* ---------------------------------------------------------------------
   WIDTH FIX (root cause): old template.css makes body a flex column.
   Flex items shrink-wrap to content, so containers with max-width:1240px
   + margin:auto collapsed to their content width (cat card 900px, lead
   760px) and floated off-centre instead of filling the viewport.
   Force every direct body child / max-width container to width:100% so
   it stretches then centres via its own max-width — like CD intended. */
body.vn-site > header,
body.vn-site > section,
body.vn-site > footer,
body.vn-site > .vn-pad,
body.vn-site > .vn-main,
body.vn-site > .vn-breadcrumbs{ width:100%; }
/* the inner max-width wrappers must fill before centring */
.vn-pad, .vn-main > .vn-container, .vn-hero-pad{ width:100%; }

/* keyframes */
@keyframes vnFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- override leaking old template.css rules ---------- */
/* neutralise old .vn-theme-grid a (row/nowrap/5px) — CD tiles are column cards */
.vn-theme-grid a.vn-themetile{
  flex-direction:column !important; align-items:center !important; justify-content:center !important;
  white-space:normal !important; border-radius:14px !important; text-decoration:none !important;
}
.vn-theme-grid a.vn-themetile span{ white-space:normal !important; color:inherit !important; }
.vn-content a.vn-card-hover, .vn-content a.vn-cat-item, .vn-content a.vn-themetile, .vn-content a.vn-mcard{ color:inherit; }

/* ---------- CD home theme band: tile hover (CD style-hover values) ---------- */
.vn-themetile{ transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.vn-themetile:hover{ transform:translateY(-4px); background:rgba(184,25,46,0.16); color:#fff; border-color:rgba(184,25,46,0.5); }
.vn-themetile--all:hover{ background:#d41e35 !important; border-color:#d41e35 !important; }
.vn-themelink:hover{ color:#fff; }
/* featured destination card hover (CD values) */
.vn-mcard{ transition:transform .25s ease, box-shadow .25s ease; }
.vn-mcard:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -24px rgba(14,34,64,0.4); }
/* Plan & book card hovers (CD values) */
.vn-plan-card{ color:#faf9f6; }
.vn-plan-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -26px rgba(14,34,64,0.6); }
.vn-plan-pill:hover{ background:#ece2db !important; }

/* ---------- homepage (vn-home) ---------- */
body.vn-home .vn-main{ padding-top:0; }
body.vn-home .page-header{ display:none; }          /* hero supplies the H1 */
/* Homepage has no sidebar, so let the article-body wrapper span the full
   1240px like the sections below it (toolbar, Latest reads, Featured). The
   template's .vn-container caps at --w-page (900px), which clamped the intro
   text to ~756px with a big empty right gutter — widen it on home only. */
body.vn-home .vn-main > .vn-container{ max-width:1240px; padding-left:0; padding-right:0; }
body.vn-home .vn-content > main{ max-width:1240px; margin:0 auto; padding:40px 32px 0; }
body.vn-home .vn-content p{ font-size:17px; line-height:1.7; color:#3a3733; }
body.vn-home .vn-content .com-content-article__body > p:first-of-type{ font-size:21px; line-height:1.6; color:#1b3a6b; text-align:center; max-width:760px; margin:8px auto 28px; }
/* the lead is a centered 760px standfirst; the "Plan your trip in pieces" filler
   block was rendering full-width hard-left, so the two looked disconnected. Center
   the filler to the SAME 760px measure so the whole intro reads as one block. */
body.vn-home .vn-content .com-content-article__body .vn-frontpage-filler{ max-width:760px; margin:0 auto; }
@media (max-width:760px){ body.vn-home .vn-content > main{ padding:24px 20px 0; } }

/* =====================================================================
   CONTENT pages (article / category / municipality) — shared chrome
   Targets Joomla com_content output. Applies on non-home pages.
   ===================================================================== */
body.vn-site:not(.vn-home) .vn-main{ padding:0 0 20px; }
body.vn-site:not(.vn-home) .vn-container.vn-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:52px; align-items:start;
  max-width:1200px; margin:0 auto; padding:40px 32px 0;
}
/* CONTENT RAIL (brief10 §1): the breadcrumb bar's .vn-container inherits the
   template's --w-page (900px) and centered, so it floated indented vs the 1200px
   content grid below it. Align the breadcrumb to the SAME 1200px/32px rail so it
   shares the left/right edge with the content it labels. */
.vn-breadcrumbs > .vn-container{ max-width:1200px !important; padding-left:32px; padding-right:32px; }
/* collapse content+sidebar to single column on tablet/phone */
@media (max-width:1000px){
  body.vn-site:not(.vn-home) .vn-container.vn-grid{ grid-template-columns:1fr; gap:32px; }
  body.vn-site:not(.vn-home) .vn-sidebar{ position:static; max-width:none; }
}
body.vn-site:not(.vn-home) .vn-main > .vn-container:not(.vn-grid){ max-width:820px; margin:0 auto; padding:40px 32px 0; }
/* info / prose pages (About, Contact, Privacy — single article, no sidebar):
   CD spec = 760px column, plain Newsreader h2 (no red tick).
   Exclude .vn-home (the homepage is also a no-sidebar article but is full-width). */
body.view-article:not(.has-sidebar):not(.itemid-102):not(.vn-home) .vn-main > .vn-container:not(.vn-grid){ max-width:760px; }
body.view-article:not(.has-sidebar):not(.itemid-102):not(.vn-home) .vn-main .com-content-article__body h2{
  border-left:0; padding-left:0; font-weight:500; font-size:26px;
}
.vn-art-grid, .vn-list-grid, .vn-muni-grid{ } /* responsive hooks already defined */

/* article: page-header H1 -> big Newsreader headline */
.vn-content .page-header h1{
  font-family:'Newsreader',serif; font-weight:500; font-size:44px; line-height:1.08;
  letter-spacing:-0.5px; color:#0e2240; margin:0 0 18px;
}
.vn-content .page-header{ border:0; padding:0; margin:0 0 8px; }

/* article byline — emitted by the info_block override (html/layouts/joomla/content/info_block.php)
   as .vn-byline. CD design: VN avatar + "View Norway editorial" + date. */
.vn-byline{ display:flex; align-items:center; gap:12px; margin:0 0 26px; }
.vn-byline__avatar{ width:40px; height:40px; border-radius:50%; background:#0e2240; color:#faf9f6;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; flex:0 0 auto;
  overflow:hidden; }
.vn-byline__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.vn-byline__name{ font-size:14px; font-weight:600; color:#0e2240; line-height:1.3; }
.vn-byline__date{ font-size:12.5px; color:#8a857a; line-height:1.3; }
.vn-content .article-info-term{ display:none; }

/* prose body — CD spec: Newsreader serif 19px/1.75 (editorial long-form) */
.vn-content .com-content-article__body{ font-family:'Newsreader',serif; font-size:19px; line-height:1.75; color:#2c2a26; }
.vn-content .com-content-article__body p{ margin:0 0 22px; }
.vn-content .com-content-article__body h2{
  font-family:'Newsreader',serif; font-weight:600; font-size:28px; color:#0e2240;
  line-height:1.2; margin:38px 0 14px; padding-left:14px; border-left:3px solid #b8192e;
}
.vn-content .com-content-article__body h3{
  font-family:'Newsreader',serif; font-weight:600; font-size:21px; color:#0e2240; margin:26px 0 8px;
}
/* lists/links inside serif prose keep Schibsted for UI legibility where needed */
.vn-content .com-content-article__body ul, .vn-content .com-content-article__body ol{ font-family:'Newsreader',serif; }
.vn-content .com-content-article__body ul{ padding-left:1.1rem; margin:0 0 20px; }
.vn-content .com-content-article__body li{ margin:0 0 8px; }
.vn-content .com-content-article__body a{ color:#1b3a6b; border-bottom:1px solid rgba(27,58,107,.25); }
.vn-content .com-content-article__body a:hover{ color:#b8192e; border-bottom-color:#b8192e; }
.vn-content .com-content-article__body img{ max-width:100%; height:auto; border-radius:10px; }

/* prev/next pagenav */
.vn-content .pagenavigation{ display:flex; gap:10px; margin:36px 0 0; border-top:1px solid #e7e2da; padding-top:22px; }
.vn-content .pagenavigation a{ font-size:13.5px; font-weight:600; color:#0e2240; background:#f5f3ee; border:1px solid #e7e2da; border-radius:8px; padding:9px 14px; }
.vn-content .pagenavigation a:hover{ background:#0e2240; color:#fff; }

/* =====================================================================
   MUNICIPALITY / COUNTY (goa-* body components) — UNIFY ONTO FLAG PALETTE
   The article body ships an inline GOA palette (coral #E8501F + teal
   #0F7E8A). Brief: pull these pages back onto navy/red/cream. We remap
   the GOA CSS variables to the flag palette so every goa-* component
   recolours without touching 362 article bodies.
   ===================================================================== */
body.vn-site{
  --goa-coral:#b8192e; --goa-coral-hover:#8e1222; --goa-coral-tint:rgba(184,25,46,0.08);
  --goa-teal:#1b3a6b;  --goa-teal-tint:rgba(27,58,107,0.08);
  --teal:#1b3a6b; --red:#b8192e; --navy:#0e2240; --navy-mid:#1b3a6b;
}
/* design26: goa-cta partner dots/borders intentionally keep each service's REAL
   brand color (set in goa.css --goa-partner-*), matching production /go/* — the old
   coral-flatten override was removed so TA=green, GYG=orange, Booking=navy read true. */
/* hotel card price + section titles -> navy/flag, not teal */
.com-content-article__body .goa-hotels__price{ color:#1b3a6b !important; }
.com-content-article__body .goa-section-title,
.com-content-article__body .goa-hotels__title{ color:#0e2240 !important; font-family:'Newsreader',serif !important; }
/* =====================================================================
   AI PLANNER widget — its embedded <style> ships GOA teal/sand + DM Serif.
   Force EVERY value onto CD's flag palette + Newsreader. Design-only;
   the widget's JS/content is untouched. High-specificity body# selectors
   beat the widget's own #ai-trip-planner rules.
   ===================================================================== */
/* CD's design (View Norway Municipality.dc.html, "AI TRIP PLANNER" block):
   a NAVY card (#0e2240, radius 18px, white text) — sibling of the red sparkle
   "AI Trip Planner" sidebar card — NOT a flat cream worksheet. Coral eyebrow,
   translucent-white pills, translucent prompt box, white-outline Copy + red
   Kayak button. These !important rules retheme the plugin's goa-planner markup
   (and the standalone /ai/ai-trip-planner article) to that navy design. */
.vn-content #ai-trip-planner.vn-planner,
.com-content-article__body #ai-trip-planner.vn-planner,
.com-content-article__body .goa-planner{
  background:#0e2240 !important; border:0 !important; border-radius:18px !important;
  padding:30px 30px 32px !important; color:#faf9f6 !important;
}
.vn-content #ai-trip-planner .vn-planner__title,
.com-content-article__body .goa-planner__title,
.com-content-article__body .vn-planner__title{
  font-family:'Newsreader',serif !important; font-weight:500 !important;
  font-size:27px !important; color:#faf9f6 !important; margin:0 0 6px !important;
}
/* sub line: muted white */
.vn-content #ai-trip-planner .vn-planner__sub,
.com-content-article__body .goa-planner__sub,
.com-content-article__body .vn-planner__sub{ color:rgba(250,249,246,0.65) !important; }
/* row labels: small uppercase faded white (CD: rgba(.5), letter-spacing) */
.vn-content #ai-trip-planner .vn-planner__label,
.com-content-article__body .goa-planner__label,
.com-content-article__body .vn-planner__label{
  color:rgba(250,249,246,0.5) !important; text-transform:uppercase !important;
  letter-spacing:1px !important; font-size:11px !important; font-weight:700 !important;
}
.vn-content #ai-trip-planner .vn-planner__meta,
.com-content-article__body .goa-planner__meta{ color:rgba(250,249,246,0.5) !important; }
/* pills: translucent white on navy; hover lifts opacity */
.vn-content #ai-trip-planner .vn-planner__opt,
.com-content-article__body .goa-planner__opt{
  background:rgba(250,249,246,0.06) !important; border:1px solid rgba(250,249,246,0.18) !important;
  color:rgba(250,249,246,0.86) !important; border-radius:999px !important;
}
.vn-content #ai-trip-planner .vn-planner__opt:hover,
.com-content-article__body .goa-planner__opt:hover{
  background:rgba(250,249,246,0.12) !important; border-color:rgba(250,249,246,0.35) !important;
}
/* active pill: solid cream fill, navy text — clear selection on the navy card */
.vn-content #ai-trip-planner .vn-planner__opt.active,
.com-content-article__body .goa-planner__opt.active{
  background:#faf9f6 !important; border-color:#faf9f6 !important; color:#0e2240 !important;
}
/* prompt preview box: translucent white panel (CD line 181) */
.vn-content #ai-trip-planner .vn-planner__preview,
.com-content-article__body .goa-planner__preview{
  background:rgba(250,249,246,0.07) !important; border:1px solid rgba(250,249,246,0.14) !important;
  color:#faf9f6 !important; border-radius:12px !important;
}
.vn-content #ai-trip-planner .vn-planner__meta.over,
.com-content-article__body .goa-planner__meta.over{ color:#ff9aa6 !important; }
/* Copy button: translucent white outline (CD line 183) */
.vn-content #ai-trip-planner .vn-planner__copy,
.com-content-article__body .goa-planner__copy,
.com-content-article__body .vn-planner__copy{
  background:rgba(250,249,246,0.1) !important; color:#faf9f6 !important;
  border:1px solid rgba(250,249,246,0.2) !important;
}
.vn-content #ai-trip-planner .vn-planner__copy:hover,
.com-content-article__body .goa-planner__copy:hover{ background:rgba(250,249,246,0.16) !important; }
/* Kayak button: solid red (CD line 187) */
.vn-content #ai-trip-planner .vn-planner__kayak,
.com-content-article__body .goa-planner__kayak,
.com-content-article__body .vn-planner__kayak{ background:#d41e35 !important; color:#fff !important; }
.vn-content #ai-trip-planner .vn-planner__kayak:hover,
.com-content-article__body .goa-planner__kayak:hover{ background:#b8192e !important; }

/* municipality page: the navy hero now supplies the H1 + breadcrumb, so hide
   the in-content page-header and the breadcrumb module on muni pages. */
body.itemid-102 .vn-content .page-header{ display:none; }
body.itemid-102 .vn-breadcrumbs{ display:none; }
body.itemid-102 .vn-main{ padding-top:0; }
/* Tag-listing ROOT pages (com_tags.view-tag, e.g. /music-arts): the only crumb is
   the tag name itself, so the breadcrumb is redundant - hide it here. Article pages
   (com_content.view-article) are unaffected and keep their breadcrumb. */
body.com_tags.view-tag .vn-breadcrumbs{ display:none; }
body.itemid-102 .vn-container.vn-grid{ padding-top:40px; }
.com-content-article.item-pagecounty-content .page-header h1{ font-size:54px; line-height:1; letter-spacing:-0.5px; }
/* municipality body section titles -> CD: Newsreader 30px/500, margin 40 0 20 */
.com-content-article__body .goa-section-title,
.com-content-article__body .goa-hotels__title{ font-size:30px !important; font-weight:500 !important; margin:40px 0 20px !important; }
/* attraction grid gap 16, hotel grid gap 18 (CD) */
.com-content-article__body ul.goa-listings{ gap:16px; }
.com-content-article__body .goa-hotels__grid{ gap:18px; }

/* county page: the NESTED "Attractions in {County}" article (Articles-Anywhere)
   renders its own page-header h1 — make it a subordinate section heading
   (visually h2) so the county place-name stays the primary heading. */
.com-content-article__body .com-content-article .page-header h1{
  font-size:30px !important; line-height:1.15 !important; margin:40px 0 16px !important;
  padding-left:14px; border-left:3px solid #b8192e;
}
.com-content-article__body .com-content-article .page-header{ margin:0 !important; }

/* county page: municipality table -> responsive chip grid (CD: 5-col, gap 10px) */
.com-content-article__body .municipality-table{ width:100%; border:0; border-collapse:separate; }
.com-content-article__body .municipality-table tbody{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.com-content-article__body .municipality-table tr{ display:contents; }
.com-content-article__body .municipality-table td{ border:0 !important; padding:0 !important; }
.com-content-article__body .municipality-table td a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:13px 14px; background:#fff; border:1px solid #e7e2da !important;
  border-radius:10px; color:#0e2240 !important; font-weight:500; font-size:14px;
  transition:all .15s ease;
}
.com-content-article__body .municipality-table td a::after{ content:"›"; color:#b8192e; font-size:15px; }
.com-content-article__body .municipality-table td a:hover{ border-color:#b8192e !important; color:#b8192e !important; }
.com-content-article__body .municipality-table td:empty{ display:none; }
@media (max-width:1000px){ .com-content-article__body .municipality-table tbody{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .com-content-article__body .municipality-table tbody{ grid-template-columns:repeat(2,1fr); } }
/* county attraction columns: CD 1fr 1fr; gap 14px 44px */
.com-content-article__body ul:has(> li > a[href*="google"]),
.com-content-article__body .vn-attr-cols{ }
.com-content-article.item-pagecounty-content .com-content-article__body ul{
  display:grid; grid-template-columns:1fr 1fr; gap:14px 44px; list-style:none; padding:0;
}
.com-content-article.item-pagecounty-content .com-content-article__body ul li{ margin:0; }
@media (max-width:760px){ .com-content-article.item-pagecounty-content .com-content-article__body ul{ grid-template-columns:1fr; } }
/* the county page renders mobile-view + desktop-view twins; hide the mobile one on desktop */
.com-content-article__body .container.mobile-view{ display:none; }
@media (max-width:560px){ .com-content-article__body .container.desktop-view{ display:none; } .com-content-article__body .container.mobile-view{ display:block; } }

/* =====================================================================
   CATEGORY LISTING — striped table -> card grid (Claude Design "Listing")
   ===================================================================== */
.com-content-category .com-content-category__articles{ margin:0; }
.com-content-category table.com-content-category__table{
  display:block; width:100%; border:0; margin:8px 0 0; background:none;
}
.com-content-category table.com-content-category__table thead{ display:none; }
.com-content-category table.com-content-category__table tbody{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;   /* CD: 14px */
}
.com-content-category table.com-content-category__table tr,
.com-content-category table.table-striped > tbody > tr:nth-of-type(2n+1){
  display:flex; flex-direction:column; gap:8px;
  background:#fff !important;                                      /* CD: all cards solid white (kill stripe) */
  border:1px solid #e7e2da; border-radius:12px; padding:20px;     /* CD: #e7e2da, 12px, 20px */
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.com-content-category table.com-content-category__table tr:hover{
  transform:translateY(-3px); box-shadow:0 16px 30px -22px rgba(14,34,64,.4); border-color:#dccfc6;  /* CD hover values */
}
.com-content-category table tr th, .com-content-category table tr td{ border:0; padding:0; background:none; }
.com-content-category .list-title a{
  font-family:'Newsreader',serif; font-size:18px; font-weight:500; color:#0e2240; line-height:1.25;
}
.com-content-category .list-title a:hover{ color:#b8192e; }
.com-content-category .list-date{ font-size:12px; color:#8a857a; font-weight:500; }
/* pagination */
.com-content-category .pagination{ display:flex; gap:6px; list-style:none; padding:0; margin:28px 0 0; flex-wrap:wrap; justify-content:center; }
.com-content-category .pagination .page-link{ display:inline-block; padding:8px 13px; border:1px solid #e7e2da; border-radius:8px; color:#0e2240; font-size:14px; background:#fff; }
.com-content-category .pagination .active .page-link{ background:#0e2240; color:#fff; border-color:#0e2240; }
.com-content-category .pagination .disabled .page-link{ color:#cbc6bb; }
.com-content-category__pagination .btn-group{ display:flex; justify-content:flex-end; margin:0 0 4px; }
.com-content-category .com-content-category__counter{ font-size:13px; color:#8a857a; }
@media (max-width:760px){ .com-content-category table.com-content-category__table tbody{ grid-template-columns:1fr; } }

/* category page H1 (the collection header) */
body.view-category .vn-content .page-header h1{ font-size:42px; }

/* design26: injected collection header (eyebrow + Newsreader h1) */
.vn-collection-head{ margin:0 0 26px; }
.vn-collection-eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#b8192e; margin-bottom:12px; }
.vn-collection-title{ font-family:'Newsreader',serif; font-weight:500; font-size:44px; line-height:1.08; letter-spacing:-0.5px; color:#0e2240; margin:0; }
.vn-collection-sub{ font-size:16px; line-height:1.6; color:#5a6473; margin:14px 0 0; max-width:680px; }
@media (max-width:760px){ .vn-collection-title{ font-size:34px; } }

/* hide the stray "Display # / 30" limit selector that floats over the grid */
.com-content-category .com-content-category__pagination.btn-group,
.com-content-category select#limit{ display:none !important; }

/* =====================================================================
   SIDEBAR (article / listing / municipality) — restyle modules
   ===================================================================== */
.vn-sidebar{ display:flex; flex-direction:column; gap:20px; position:sticky; top:88px; align-self:start; }
.vn-sidebar .moduletable{ background:#fff; border:1px solid #ece8e1; border-radius:14px; padding:18px; }
/* the cruise card is itself a navy card (CD design) — strip the white moduletable frame around it */
.vn-sidebar .moduletable:has(> .mod-custom > .vn-cruise-card),
.vn-sidebar .moduletable:has(.vn-cruise-card){ background:none; border:0; border-radius:0; padding:0; }
.vn-sidebar .vn-cruise-card{ transition:background .2s ease; }
.vn-sidebar .vn-cruise-card:hover{ background:#234a85 !important; }
.vn-sidebar .moduletable h3{
  font-family:'Schibsted Grotesk',sans-serif; font-size:12px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:#b8192e; margin:0 0 12px; padding:0; background:none;
}
.vn-sidebar .mod-articles-items{ list-style:none; margin:0; padding:0; }
.vn-sidebar .mod-articles-items > li{ padding:10px 0; border-bottom:1px solid #f0ece4; }
.vn-sidebar .mod-articles-items > li:last-child{ border-bottom:0; padding-bottom:0; }
.vn-sidebar .mod-articles-title a, .vn-sidebar a.mod-articles-link{
  font-family:'Newsreader',serif; font-size:15.5px; font-weight:500; color:#0e2240; line-height:1.3;
}
.vn-sidebar .mod-articles-title a:hover, .vn-sidebar a.mod-articles-link:hover{ color:#b8192e; }
.vn-sidebar .mod-articles-date{ font-size:11px; color:#8a857a; margin-top:4px; }

/* =====================================================================
   SIDEBAR module literals (Things To Do GYG-orange/TA-green, cruise gold)
   The custom-module HTML hardcodes partner-brand colors inline. Recolor
   to CD's flag palette so nothing in the sidebar is off-palette.
   ===================================================================== */
/* Things To Do partner buttons: orange/green -> navy-mid + red (unify) */
.vn-sidebar a[href*="getyourguide"]{ background:#1b3a6b !important; color:#fff !important; }
.vn-sidebar a[href*="tripadvisor"]{ background:#0e2240 !important; color:#fff !important; }
/* city-pick links: keep navy text on cream tint (already on-palette eef2f8 -> our tint) */
.vn-sidebar a.vn-aff-link{ background:#f5f3ee !important; color:#0e2240 !important; }
.vn-sidebar a.vn-aff-link span[style*="a8a49a"]{ color:#8a857a !important; }
/* cruise card: gold caption -> muted ink; the SVG flag stays (it IS flag colors) */
.vn-sidebar [style*="#8c6a3a"]{ color:#6f6b61 !important; }
/* the cruise "Browse cruises" + planner buttons already navy/red in the SVG markup */

/* =====================================================================
   MUNICIPALITY body — remaining off-palette literals baked into goa-* CSS
   (sand bg #fff8ec/#fffbf3/#f5ecd9, ink #1a1a1a, partner greens, gold).
   Force the surfaces/inks onto CD palette. Partner-brand text colors on
   the CTA sublines stay (brand names), but surfaces/accents unify.
   ===================================================================== */
.com-content-article__body{ background:transparent !important; }
.com-content-article__body .goa-card,
.com-content-article__body .goa-hotels__card{ background:#fff !important; border-color:#ece8e1 !important; }
.com-content-article__body .goa-card__title a,
.com-content-article__body .goa-card__title{ color:#0e2240 !important; }
.com-content-article__body .goa-card__desc{ color:#6f6b61 !important; }
.com-content-article__body .goa-hotels__name{ color:#0e2240 !important; }
.com-content-article__body .goa-hotels__rating{ color:#6f6b61 !important; }
/* any leftover sand backgrounds -> cream */
.com-content-article__body [style*="#fff8ec"],
.com-content-article__body [style*="#fffbf3"],
.com-content-article__body [style*="#f5ecd9"],
.com-content-article__body [style*="#FFF8EC"],
.com-content-article__body [style*="#FFFBF3"]{ background:#faf9f6 !important; }
/* the "Take a Chance" buttons + misc green (#128205) -> flag */
.vn-bottom a[style*="#128205"], .com-content-article__body a[style*="#128205"]{ color:#1b3a6b !important; }

/* =====================================================================
   FINAL off-palette sweep — inline-styled literals in module/body HTML.
   These elements carry hardcoded partner/sand/teal hexes inline; recolor
   them to the flag palette by attribute-substring selectors.
   ===================================================================== */
/* Things To Do partner buttons (orange/green) anywhere — body + sidebar */
[style*="background:#ff6b35"], [style*="background:#FF6B35"]{ background:#1b3a6b !important; }

/* =====================================================================
   .vn-affiliate-btns (vnamzn plugin, "Plan Your Days In Norway") — restyle the
   navy+orange mismatched pair into the same cream-card + real-partner-color
   language as the /go/* goa-cta buttons. Overrides the plugin's inline styles.
   ===================================================================== */
.com-content-article__body .vn-affiliate-btns a[style]{
  position:relative !important;
  background:#faf9f6 !important;            /* cream card, like goa-cta */
  color:#1f1d19 !important;                 /* navy-ink text */
  border:1px solid rgba(26,26,26,0.10) !important;
  border-top:2px solid var(--aff-color,#1b3a6b) !important;   /* partner accent on top edge */
  border-radius:6px !important;
  box-shadow:none !important;               /* kill the brand-tinted glow */
  font-family:'Schibsted Grotesk',system-ui,sans-serif !important;
  font-weight:600 !important;
  padding:12px 16px 12px 30px !important;
  gap:0 !important;
  transition:transform .15s ease, border-color .15s ease !important;
}
/* the partner-color dot, drawn with ::before (markup has no __dot span) */
.com-content-article__body .vn-affiliate-btns a[style]::before{
  content:""; position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:9px; height:9px; border-radius:50%;
  background:var(--aff-color,#1b3a6b);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--aff-color,#1b3a6b) 16%, transparent);
}
.com-content-article__body .vn-affiliate-btns a[style]:hover{
  transform:translateY(-1px);
  border-top-color:var(--aff-color,#1b3a6b) !important;
}
/* per-partner accent: Tripadvisor green, GetYourGuide orange (real brand hues) */
.com-content-article__body .vn-affiliate-btns a[href*="tripadvisor"]{ --aff-color:#00aa6c; }
.com-content-article__body .vn-affiliate-btns a[href*="getyourguide"]{ --aff-color:#ff5533; }
/* city-pick link pale-blue tint -> cream tint */
[style*="background:#eef2f8"]{ background:#f5f3ee !important; }
/* muted arrow grey + sand-ink -> palette muted */
[style*="color:#a8a49a"]{ color:#8a857a !important; }
[style*="color:#8c6a3a"]{ color:#6f6b61 !important; }
[style*="color:#7d796f"]{ color:#6f6b61 !important; }
/* second AI planner instance (tag pages) with GOA teal/sand literals */
[style*="#0d2a33"]{ }  /* container bg handled below */
.vn-content [class*="planner"][style*="background:#fbf6e9"],
.vn-content [class*="planner"] [style*="background:#fbf6e9"]{ background:#0e2240 !important; color:#faf9f6 !important; }
[style*="color:#0d2a33"]{ color:#faf9f6 !important; }
[style*="color:#5a6b70"]{ color:rgba(250,249,246,.65) !important; }
[style*="color:#1f3e47"]{ color:rgba(250,249,246,.86) !important; }
[style*="background:#0d2a33"]{ background:#d41e35 !important; }
[style*="border-color:#0f7e8a"], [style*="#0f7e8a"]{ border-color:rgba(250,249,246,.45) !important; }

/* =====================================================================
   BOTTOM bands ("Only in Norway" / "Take a Chance")
   ===================================================================== */
/* CD latest (Article mockup): left = "Only in Norway" heading + a thin sand rule
   filling the row, then plain divided read-next links (ink, hover red). Right =
   "🪂 Take a Chance" heading, then a WHITE CARD holding the random-municipality
   links (navy, divided) + a single red "Surprise me →" button. Grid 1.5fr / 1fr. */
/* Article-footer band — CD's perfected no-thumbnail design (brief11 delivery,
   View Norway Municipality.dc.html L289-318). LEFT: "Keep reading" eyebrow +
   red-tick "Only in Norway" h2 + italic-numbered (01-05) Newsreader rows. RIGHT:
   "Feeling lucky?" eyebrow + "Take a Chance" h2 (paper-plane SVG) + a NAVY card
   with shield watermark, subtitle, translucent muni pills, red dice Surprise btn.
   Eyebrows / red-tick / paper-plane / navy-card / subtitle / button are injected
   by design26.js (the modules only emit <h2>+<ul>). */
.vn-bottom{ background:#f5f3ee; border-top:1px solid #e7e2da; padding:60px 0 64px; margin-top:30px; }
.vn-bottom .vn-container{ max-width:1240px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:1.55fr 1fr; gap:56px; align-items:start; }
.vn-bottom .moduletable{ margin:0; }
/* injected red eyebrow above each heading */
.vn-bottom .vn-band-eyebrow{ font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:#b8192e; margin-bottom:11px; }
/* headings: 31px Newsreader. High-specificity to beat template.css's .vn-bottom .moduletable > h2.
   mod1 gets the injected red tick + the heading; mod2 gets the injected paper-plane after it. */
.vn-bottom .moduletable > h2{
  font-family:'Newsreader',serif !important; font-weight:500 !important; font-size:31px !important;
  color:#0e2240 !important; margin:0 0 6px !important; padding:0 !important; border:0 !important;
  text-align:left !important; display:flex !important; align-items:center !important; gap:13px !important;
}
.vn-bottom .vn-band-tick{ width:5px; height:27px; background:#b8192e; border-radius:3px; flex:0 0 auto; }
.vn-bottom .vn-band-plane{ flex:0 0 auto; transform:translateY(-2px); }
.vn-bottom .mod-articles-items{ list-style:none; margin:0; padding:0; counter-reset:vnnum; }
/* LEFT (mod1) — numbered (italic 01..), Newsreader 20px title, → marker, top-border rows */
.vn-bottom .mod1 .mod-articles-items{ margin-top:18px; }
.vn-bottom .mod1 .mod-articles-items > li{ padding:0; border:0; counter-increment:vnnum; }
.vn-bottom .mod1 .mod-articles-title a, .vn-bottom .mod1 a.mod-articles-link{
  display:grid; grid-template-columns:40px 1fr auto; align-items:baseline; gap:18px;
  padding:17px 4px 17px 15px; border-top:1px solid #e0d9cd; color:#2c2a26;   /* left 15px = matches the muni-pill padding so 01.. isn't flush to the edge */
  font-family:'Newsreader',serif; font-size:20px; line-height:1.3;
}
.vn-bottom .mod1 .mod-articles-title a::before, .vn-bottom .mod1 a.mod-articles-link::before{
  content:"0" counter(vnnum); font-family:'Newsreader',serif; font-size:21px; font-style:italic; color:#bcb6aa;
}
.vn-bottom .mod1 .mod-articles-title a::after, .vn-bottom .mod1 a.mod-articles-link::after{
  content:"→"; font-family:'Schibsted Grotesk',system-ui,sans-serif; font-size:15px; color:#d9d2c6;
}
.vn-bottom .mod1 .mod-articles-items > li:last-child a{ border-bottom:1px solid #e0d9cd; }
.vn-bottom .mod1 .mod-articles-title a:hover{ color:#b8192e; }
/* RIGHT (mod2) — NAVY card (injected .vn-band-card wraps subtitle + list + button) */
.vn-bottom .mod2 .vn-band-card{ position:relative; overflow:hidden; background:#0e2240; border-radius:18px; padding:30px 28px; }   /* radius+padding matched to the navy .vn-plan-card above so the two read as one family */
/* template.css forces .mod-articles-item to opaque white (rgba(255,255,255,0.7)
   !important) and gives li a left-tick/hover bg — that white wrapper sat behind the
   translucent pill on the navy card and read as grey blocks. Neutralize the wrapper
   so ONLY the <a> pill background shows. */
.vn-bottom .mod2 .mod-articles-item{ background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; }
.vn-bottom .mod2 .mod-articles-items > li{ background:transparent !important; border:0 !important; border-radius:0 !important; }
.vn-bottom .mod2 .mod-articles-items > li:hover{ background:transparent !important; border-left-color:transparent !important; }
.vn-bottom .mod2 .mod-articles-item-content{ background:transparent !important; }
.vn-bottom .mod2 .vn-band-card__shield{ position:absolute; right:-34px; bottom:-34px; opacity:0.07; }
.vn-bottom .mod2 .vn-band-card__sub{ position:relative; font-size:13.5px; line-height:1.55; color:rgba(250,249,246,0.72); margin:0 0 17px; }
.vn-bottom .mod2 .mod-articles-items{ position:relative; display:flex; flex-direction:column; gap:8px; }
.vn-bottom .mod2 .mod-articles-items > li{ padding:0; border:0; }
.vn-bottom .mod2 .mod-articles-title a, .vn-bottom .mod2 a.mod-articles-link{
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(250,249,246,0.06); border:1px solid rgba(250,249,246,0.13); border-radius:10px;
  padding:12px 15px; font-family:'Newsreader',serif; font-size:17px; color:#faf9f6;
}
.vn-bottom .mod2 .mod-articles-title a::after{ content:"→"; color:#e98a96; font-family:'Schibsted Grotesk',sans-serif; }
.vn-bottom .mod2 .mod-articles-title a:hover{ background:rgba(250,249,246,0.13); color:#faf9f6; }
/* red dice Surprise me button (CD #d41e35, drop shadow), full-width inside the card */
.vn-bottom .mod2 .vn-tac-actions{ position:relative; display:block; margin-top:18px; }
.vn-bottom .vn-tac-actions .vn-tac-btn--search{ display:none; }
.vn-bottom .vn-tac-actions .vn-tac-btn--surprise{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  background:#d41e35 !important; color:#fff !important; border:0 !important;
  font-family:'Schibsted Grotesk',system-ui,sans-serif; font-size:14.5px; font-weight:600;
  letter-spacing:normal; padding:14px; border-radius:11px;
  box-shadow:0 14px 30px -14px rgba(212,30,53,0.95);
}
.vn-bottom .vn-tac-actions .vn-tac-btn--surprise:hover{ background:#b8192e !important; }
.vn-bottom .vn-tac-actions .vn-tac-btn--surprise svg{ flex:0 0 auto; }
/* kill the template.css red 32px ::after dash under .vn-bottom headings */
.vn-bottom .moduletable > h2::after,
.vn-bottom .moduletable > h3::after{ display:none !important; }
@media (max-width:760px){ .vn-bottom .vn-container{ grid-template-columns:1fr; gap:32px; } }

/* ---------- header nav: style Joomla menu module output to match design ---------- */
.vn-nav-desktop ul.mod-menu{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.vn-nav-desktop ul.mod-menu li{ margin:0; }
.vn-nav-desktop ul.mod-menu a{ color:rgba(250,249,246,0.82); font-size:14.5px; font-weight:500; text-decoration:none; transition:color .15s ease; }
.vn-nav-desktop ul.mod-menu a:hover,
.vn-nav-desktop ul.mod-menu .current > a,
.vn-nav-desktop ul.mod-menu .active > a{ color:#fff; }

/* search box in navy header */
.vn-search-desktop .mod-finder, .vn-search-desktop form{ margin:0; }
.vn-search-desktop input[type="text"], .vn-search-desktop .form-control{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  border-radius:999px; padding:8px 14px; min-width:200px; color:#faf9f6;
  font-family:inherit; font-size:13.5px; outline:none;
}
.vn-search-desktop input::placeholder{ color:rgba(250,249,246,0.55); }

/* mobile menu (shown under burger) */
.vn-mobile-menu ul.mod-menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.vn-mobile-menu ul.mod-menu a{ display:block; color:#faf9f6; font-size:16px; font-weight:500; padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.08); text-decoration:none; }

/* ---------- hover states (inline style-hover is not real CSS) ---------- */
.vn-nav-desktop a:hover{ color:#fff !important; }
.vn-cat-item:hover{ transform:translateY(-3px); color:#b8192e !important; background-size:56% 3px !important; }
.vn-foot-link:hover{ color:#fff !important; }
.vn-card-hover{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.vn-card-hover:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(14,34,64,.45); border-color:#d8d2c8; }
.vn-link-hover:hover{ color:#b8192e !important; }
.vn-btn-red:hover{ background:#b8192e !important; transform:translateY(-2px); }
.vn-btn-navy:hover{ background:#1b3a6b !important; }

/* =====================================================================
   RESPONSIVE  (merged from all 8 Claude Design templates)
   Breakpoints: 1024 / 1000 / 900 / 860 / 760
   ===================================================================== */
@media (max-width: 1024px) {
  .vn-hero h1 { font-size: 52px !important; }
  .vn-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .vn-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .vn-theme-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .vn-stories { grid-template-columns: 1fr !important; }
  .vn-foot-grid { grid-template-columns: 1.4fr 1fr 1fr !important; }
  .vn-plan-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 1000px) {
  .vn-art-grid { grid-template-columns: 1fr !important; }
  .vn-list-grid { grid-template-columns: 1fr !important; }
  .vn-muni-grid { grid-template-columns: 1fr !important; }
  .vn-sidebar { position: static !important; max-width: 680px !important; }
  .vn-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .vn-attr-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .vn-hotel-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .vn-theme-cards { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) {
  .vn-attr-cols { grid-template-columns: 1fr !important; }
  .vn-muni-chips { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 860px) {
  .vn-swatches { grid-template-columns: repeat(2, 1fr) !important; }
  .vn-icons-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .vn-type-row { grid-template-columns: 1fr !important; gap: 4px !important; }
  .vn-ds-pad { padding-left: 20px !important; padding-right: 20px !important; }
  .vn-buttons { flex-direction: column !important; align-items: stretch !important; }
}
@media (max-width: 760px) {
  .vn-nav-desktop, .vn-search-desktop { display: none !important; }
  .vn-burger { display: inline-flex !important; }
  .vn-pad { padding-left: 20px !important; padding-right: 20px !important; }

  .vn-hero { min-height: 0 !important; padding-bottom: 40px !important; }
  .vn-hero-pad { padding: 48px 20px 64px !important; }
  .vn-hero h1 { font-size: 38px !important; }
  .vn-hero p { font-size: 16px !important; }

  .vn-cat-card { margin-top: -36px !important; padding: 12px 6px !important; border-radius: 14px !important; }
  .vn-cat-row { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto !important; gap: 2px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .vn-cat-row::-webkit-scrollbar { display: none; }
  .vn-cat-item { width: 88px !important; flex: 0 0 auto !important; }

  .vn-lead { font-size: 21px !important; }
  .vn-grid-3 { grid-template-columns: 1fr !important; }
  .vn-grid-4 { grid-template-columns: 1fr !important; }
  .vn-theme-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .vn-theme-cards { grid-template-columns: 1fr !important; }
  .vn-section-h { font-size: 30px !important; }
  .vn-foot-grid { grid-template-columns: 1fr 1fr !important; }
  .vn-story-card { grid-template-columns: 1fr !important; }
  .vn-story-img { aspect-ratio: 16/9 !important; }

  .vn-art-title { font-size: 34px !important; }
  .vn-prose p { font-size: 17px !important; }
  .vn-bottom-grid { grid-template-columns: 1fr !important; }
  .vn-cards { grid-template-columns: 1fr !important; }
  .vn-page-h { font-size: 38px !important; }
  .vn-muni-chips { grid-template-columns: repeat(2, 1fr) !important; }
  .vn-muni-hero h1 { font-size: 40px !important; }
  .vn-attr-grid { grid-template-columns: 1fr !important; }
  .vn-hotel-grid { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   AUDIT FIXES (2026-06-26) — design26 polish pass round 2
   ===================================================================== */

/* --- Theme / tag pages: card-ify the bare article table to match the
   /only-in-norway listing grid. Tag views render
   table.com-tags-tag-list__category (th.list-title + td.list-date);
   give it the same white-card grid the category listing uses. --------- */
.tag-category table.com-tags-tag-list__category,
.com-tags-tag-list__category{
  display:block; width:100%; border:0; margin:18px 0 0; background:none;
}
.com-tags-tag-list__category thead{ display:none; }
.com-tags-tag-list__category tbody{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
.com-tags-tag-list__category tbody > tr,
.com-tags-tag-list__category.table-striped > tbody > tr:nth-of-type(2n+1){
  display:flex; flex-direction:column; gap:8px;
  background:#fff !important;
  border:1px solid #e7e2da; border-radius:12px; padding:20px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.com-tags-tag-list__category tbody > tr:hover{
  transform:translateY(-3px); box-shadow:0 16px 30px -22px rgba(14,34,64,.4); border-color:#dccfc6;
}
.com-tags-tag-list__category tr th,
.com-tags-tag-list__category tr td{ border:0; padding:0; background:none; }
.com-tags-tag-list__category .list-title a{
  font-family:'Newsreader',serif; font-size:18px; font-weight:500; color:#0e2240; line-height:1.25;
}
.com-tags-tag-list__category .list-title a:hover{ color:#b8192e; }
.com-tags-tag-list__category .list-date{ font-size:12px; color:#8a857a; font-weight:500; }
@media (max-width:760px){ .com-tags-tag-list__category tbody{ grid-template-columns:1fr; } }

/* --- Homepage duplicate <h1>: the hero h1 is the real one. Joomla also
   emits the page-header h1 ("All of Norway, One Place at a Time"); it is
   already display:none, but a hidden <h1> still counts as a second h1 for
   SEO. Belt-and-braces: keep it out of the a11y tree + layout entirely. -- */
body.vn-home .page-header h1{
  display:none !important;
  position:absolute !important; width:1px; height:1px; overflow:hidden;
}

/* --- FIX: homepage #plan cards are navy/teal; the h3 headings were inheriting
   the global dark --ink color (template.css h1,h2,h3{color:var(--ink)}) → dark
   text on a dark card = unreadable. Force plan-card text to the card's cream. -- */
.vn-plan-card, .vn-plan-card h1, .vn-plan-card h2, .vn-plan-card h3,
.vn-plan-card h4, .vn-plan-card p, .vn-plan-card span, .vn-plan-card strong{
  color:#faf9f6 !important;
}

/* =====================================================================
   .goa-cta-btn--bflights — Flights button shares the Booking partner color
   (navy #003580), same cream-card goa-cta look as the hotels button. The
   per-partner --partner-color is set by goa.css; bflights reuses booking. */
.com-content-article__body .goa-cta-row a.goa-cta-btn--bflights{
  --partner-color: var(--goa-partner-booking);
}

/* =====================================================================
   .vn-kai — Kayak-AI "Getting there" helper (Claude Design brief7).
   Cream card, navy sparkle-icon tile, GETTING THERE eyebrow, location-aware
   lead, white prompt box, two-button pairing (navy Copy prompt / red Open
   Kayak AI). Sits just below the muni goa-cta buttons.

   INSULATION NOTE: two generic article-body rules bleed into this widget and
   MUST be beaten with matching specificity:
   (a) template.css `.com-content-article__body svg[viewBox]` (0,2,0) — adds
       padding/margin/border/box-shadow/radius/bg to EVERY article svg (meant
       for standalone diagrams). It wrecked the sparkle icon. Reset below.
   (b) `.vn-content .com-content-article__body a` (0,3,1) — forces navy color +
       border-bottom on the Open button <a>; its :hover turns text red (invisible
       on the red bg). Every link/button rule here is prefixed `.vn-content` so
       it matches-or-beats that. ===================================================================== */
.vn-content .com-content-article__body .vn-kai{
  margin:16px 0 0; background:#f5f3ee; border:1px solid #e7e2da; border-radius:16px;
  padding:22px 24px; display:flex; gap:18px; align-items:flex-start;
}
/* kill the global svg[viewBox] chrome on EVERY svg inside the widget */
.vn-content .com-content-article__body .vn-kai svg{
  padding:0; margin:0; border:0; border-radius:0; background:none; box-shadow:none;
  max-width:none; height:auto;
}
.vn-content .com-content-article__body .vn-kai__icon{
  flex:none; width:44px; height:44px; border-radius:12px; background:#0e2240;
  display:flex; align-items:center; justify-content:center;
}
.vn-content .com-content-article__body .vn-kai__icon svg{ width:22px; height:22px; }
.vn-content .com-content-article__body .vn-kai__body{ flex:1; min-width:0; }
.vn-content .com-content-article__body .vn-kai__eyebrow{
  font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:#b8192e; margin-bottom:5px;
}
.vn-content .com-content-article__body .vn-kai__lead{
  font-family:'Schibsted Grotesk',system-ui,sans-serif;
  font-size:14.5px; line-height:1.55; color:#3a3733; margin:0 0 14px;
}
.vn-content .com-content-article__body .vn-kai__lead strong{ color:#0e2240; font-weight:600; }
.vn-content .com-content-article__body .vn-kai__link{
  color:#b8192e; font-weight:600; text-decoration:none;
  border:0; border-bottom:1px solid rgba(184,25,46,.3);
}
.vn-content .com-content-article__body .vn-kai__link:hover{ color:#b8192e; border-bottom-color:#b8192e; }
.vn-content .com-content-article__body .vn-kai__box{
  background:#fff; border:1px solid #e3ddd2; border-radius:11px; padding:13px 15px; margin-bottom:14px;
}
.vn-content .com-content-article__body .vn-kai__prompt{
  font-family:'Schibsted Grotesk',ui-monospace,monospace; font-size:13.5px; line-height:1.5;
  color:#1f1d19; display:block;
}
.vn-content .com-content-article__body .vn-kai__actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; }
.vn-content .com-content-article__body .vn-kai__copy,
.vn-content .com-content-article__body .vn-kai__open{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
  font-family:'Schibsted Grotesk',system-ui,sans-serif; font-size:13.5px; font-weight:600;
  line-height:1.2; padding:11px 18px; border:0; border-radius:9px; cursor:pointer;
  text-decoration:none; transition:background .15s ease;
}
/* !important on color/background: the generic `.com-content-article__body a` +
   `a:hover` rules tie this selector's specificity, so source order alone wasn't
   enough — the hovered state went red-on-red (invisible). Force it, end of story. */
.vn-content .com-content-article__body .vn-kai__copy,
.vn-content .com-content-article__body .vn-kai__copy:hover{ background:#0e2240 !important; color:#faf9f6 !important; }
.vn-content .com-content-article__body .vn-kai__copy:hover,
.vn-content .com-content-article__body .vn-kai__copy.is-copied{ background:#16315a !important; }
.vn-content .com-content-article__body .vn-kai__open,
.vn-content .com-content-article__body .vn-kai__open:hover{ background:#d41e35 !important; color:#fff !important; }
.vn-content .com-content-article__body .vn-kai__open:hover{ background:#b8192e !important; }
@media (max-width:560px){
  .vn-content .com-content-article__body .vn-kai{ padding:18px; gap:14px; }
  .vn-content .com-content-article__body .vn-kai__actions{ flex-direction:column; }
  .vn-content .com-content-article__body .vn-kai__copy,
  .vn-content .com-content-article__body .vn-kai__open{ width:100%; }
}

/* =====================================================================
   CD MUNI SIDEBAR (brief6) — cohesive 4-card rail.
   Cards are Joomla custom modules (#148 Cruise, #144 Things To Do,
   Book Your Trip, AI Trip Planner). The mockup carried style-hover
   pseudo-attrs; real hover states live here. The .vn-sidebar gap +
   sticky come from the template/this block so all cards read as one rail.
   ===================================================================== */
.vn-sidebar{ display:flex; flex-direction:column; gap:16px; }
@media (min-width:992px){ .vn-sidebar{ position:sticky; top:88px; align-self:flex-start; } }
/* CRITICAL: template.css has global `img, svg { height:auto; max-width:100% }`,
   which recomputed the absolutely-positioned cruise watermark (attr 130x64,
   viewBox 34:24 → auto-height ~92px) so it grew and overlapped the card text.
   Honor the SVG's own width/height on sidebar-card + kai icons. */
.vn-side-card svg, .vn-sidebar svg, .com-content-article__body .vn-kai svg{
  max-width:none; height:auto;
}
/* cruise watermark: lock to CD's exact size (brief10 §3: ship moved to BOTTOM-right,
   opacity 0.1, so it sits behind the button and clears the heading entirely — no
   more text/hull collision, so the earlier right-padding patch is removed). */
.vn-side-cruise svg{ width:150px !important; height:74px !important; }
/* the module wrappers shouldn't add their own card chrome — the .vn-side-card
   inside each module IS the card. Neutralize the generic .vn-sidebar .moduletable. */
.vn-sidebar .moduletable:has(> .vn-side-card),
.vn-sidebar .moduletable:has(.vn-side-card){
  background:none !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; overflow:visible !important;
}
.vn-sidebar .moduletable:has(.vn-side-card) > h3{ display:none; }   /* card carries its own eyebrow */

/* HARD INSULATION: the generic .vn-sidebar rules (template.css + design26.css)
   bleed onto the CD cards. Most damaging: `.vn-sidebar .moduletable h3`
   (specificity 0,3,0) forces letter-spacing:1px + Schibsted onto the cruise
   <h3>, stretching "Sail the coast & fjords" so it wrapped 2 lines and collided
   with the ship watermark. These overrides need EQUAL-OR-HIGHER specificity +
   !important so CD's inline values are the only thing styling card content. */
.vn-sidebar .moduletable .vn-side-card h3,
.vn-sidebar .moduletable .vn-side-card h2,
.vn-sidebar .moduletable .vn-side-card h4{
  letter-spacing:normal !important; text-transform:none !important;
  padding:0 !important; background:none !important;
}
/* reset inherited letter-spacing/transform on all other card text (eyebrows,
   labels, pills carry their own inline letter-spacing which still wins). */
.vn-sidebar .vn-side-card,
.vn-sidebar .vn-side-card div,
.vn-sidebar .vn-side-card p,
.vn-sidebar .vn-side-card span,
.vn-sidebar .vn-side-card a{ letter-spacing:normal; text-transform:none; }

/* hover states (replacing CD's style-hover) */
.vn-side-cruise:hover{ background:#16315a !important; }
.vn-side-ttd a[href*="getyourguide"]:hover{ background:#0e2240 !important; }
.vn-side-ttd a[href*="tripadvisor"]:hover{ background:#16315a !important; }
.vn-side-ttd a[href*="tour.viewnorway"]:hover{ color:#b8192e !important; }
.vn-side-book .vn-cat-tile:hover{ color:#b8192e; background-color:#faf8f4; background-size:60% 2.5px !important; }
/* "All deals →" tile — the full-width red CTA (now -> expedia.com/Norway.d138…). */
.vn-side-book a[href*="Norway.d138.Destination-Travel-Guides"]:hover{ background:#8e1222 !important; color:#fff !important; }
.vn-side-aiplanner:hover{ background:#b8192e !important; border-color:#b8192e !important; }

/* =====================================================================
   .vn-muni-footer — practical tail (Getting There / Maps / Website / Other)
   on every municipality page. CD designed this as: red-tab section headings,
   uppercase muted eyebrow sublabels ("From Oslo", "Website"), and map links
   as pill chips. The live content is plain Joomla h2/h3/ul/li/a — restyle here
   so EVERY muni article matches CD without touching content. */
.vn-content .com-content-article__body .vn-muni-footer h2{
  font-family:'Newsreader',serif; font-weight:500; font-size:26px; color:#0e2240;
  display:flex; align-items:center; gap:12px;
  margin:44px 0 14px; padding:0; border:0; line-height:1.2;
}
.vn-content .com-content-article__body .vn-muni-footer h2::before{
  content:""; flex:none; width:5px; height:22px; background:#b8192e; border-radius:3px;
}
/* "From Oslo" sublabel -> uppercase muted eyebrow */
.vn-content .com-content-article__body .vn-muni-footer h3{
  font-family:'Schibsted Grotesk',system-ui,sans-serif;
  font-size:12.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  color:#8a857c; margin:0 0 12px; padding:0; border:0;
}
/* map links -> pill chips */
.vn-content .com-content-article__body .vn-muni-footer ul{
  list-style:none; display:flex; flex-wrap:wrap; gap:10px;
  margin:0 0 32px; padding:0;
}
.vn-content .com-content-article__body .vn-muni-footer ul li{ margin:0; }
.vn-content .com-content-article__body .vn-muni-footer ul li a{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid #e3ddd2; border-radius:9px;
  padding:9px 15px; font-size:13.5px; font-weight:600; color:#1b3a6b;
  text-decoration:none; transition:border-color .15s ease, color .15s ease;
}
.vn-content .com-content-article__body .vn-muni-footer ul li a:hover{
  color:#b8192e; border-color:#b8192e;
}
/* Website link (a bare <p><a>) -> same chip treatment */
.vn-content .com-content-article__body .vn-muni-footer p a{
  font-size:14.5px; font-weight:600; color:#1b3a6b; border:0;
}
.vn-content .com-content-article__body .vn-muni-footer p a:hover{ color:#b8192e; }

/* "Other" heading + Tripadvisor link sit AFTER </article> (direct children of
   .com-content-article__body), so they miss .vn-muni-footer. Match them to CD:
   red-tab heading + pill link, consistent with the footer above. */
.vn-content .com-content-article__body > h2.vn-ta-search-btn{
  font-family:'Newsreader',serif; font-weight:500; font-size:26px; color:#0e2240;
  display:flex; align-items:center; gap:12px; margin:44px 0 14px; padding:0; border:0; line-height:1.2;
}
.vn-content .com-content-article__body > h2.vn-ta-search-btn::before{
  content:""; flex:none; width:5px; height:22px; background:#b8192e; border-radius:3px;
}
.vn-content .com-content-article__body > ul:has(> li > a[href*="tour.viewnorway"]){
  list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:0 0 12px; padding:0;
}
.vn-content .com-content-article__body > ul:has(> li > a[href*="tour.viewnorway"]) > li{ margin:0; }
.vn-content .com-content-article__body > ul:has(> li > a[href*="tour.viewnorway"]) > li > a{
  display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid #e3ddd2;
  border-radius:9px; padding:9px 15px; font-size:13.5px; font-weight:600; color:#1b3a6b;
  text-decoration:none; transition:border-color .15s ease, color .15s ease;
}
.vn-content .com-content-article__body > ul:has(> li > a[href*="tour.viewnorway"]) > li > a:hover{
  color:#b8192e; border-color:#b8192e;
}

/* county POI lists (e.g. /county/agder "Urheia Fortifications - historic...") are
   <li><a>Name</a> - description</li>. The link-only hover rule
   (.com-content-article__body li:has(>a:only-child):hover) misfires because the <a>
   is the only ELEMENT child despite the trailing description text → unwanted grey bg
   on hover. Kill it on county pages. */
.com-content-article.item-pagecounty-content .com-content-article__body li:has(> a:only-child):hover{
  background:transparent !important;
}

/* logo: keep the dot snug against the wordmark (no side margin) */
body.vn-site .vn-flag-dot{ margin:0 !important; }