/* ==========================================================================
   View Norway v3 - light editorial system
   Derived from Claude Design v3 mockups (claudedesign/v3).

   Rules the design is built on, do not break them casually:
     - The page ground is cream. Dark appears at most twice per page:
       the footer, and one optional anchor band. Never the header, never the hero.
     - Card grids are 1px gaps over a #e7e2da background with overflow:hidden
       on the container. Cards are not individually bordered inside a grid.
     - Three button tiers only: red (reserved), steel (functional), quiet white.
       Navy is never a button.
     - Rail is max-width 1280px with 40px side padding on every page.
   ========================================================================== */

:root {
    /* Palette - exact flag hexes, nothing substituted */
    --vn-navy:        #0e2240;
    --vn-navy-mid:    #1b3a6b;
    --vn-steel:       #2c5aa0;
    --vn-steel-hover: #234a86;
    --vn-red:         #b8192e;
    --vn-red-bright:  #d41e35;
    --vn-red-dark:    #8e1222;

    /* Surfaces */
    --vn-page:    #faf9f6;
    --vn-surface: #ffffff;
    --vn-alt:     #f5f3ee;
    --vn-warm:    #f0ede7;

    /* Hairlines */
    --vn-line:      #e7e2da;
    --vn-line-soft: #ece8e1;
    --vn-line-fine: #f0ece5;
    --vn-line-firm: #d6d1c7;

    /* Ink */
    --vn-ink:       #2c2a26;
    --vn-ink-deep:  #1f1d19;
    --vn-body:      #4a4740;
    --vn-body-soft: #5a5750;
    --vn-muted:     #6f6b61;
    --vn-faint:     #6f6a5c;   /* AA on all three grounds: white 5.40, page 5.12, tool 4.87 */

    /* Type */
    --vn-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --vn-sans:  'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Rail + radius */
    --vn-rail:    1280px;
    --vn-gutter:  40px;
    --vn-r-art:   18px;
    --vn-r-mod:   16px;
    --vn-r-list:  10px;
    --vn-r-btn:   8px;
}


/* --------------------------------------------------------------------------
   Plugin compatibility layer - REQUIRED, do not delete.

   The content plugins (vnstay22map/goa.css, vnads, vnamzn, vnrelated) inject
   their own CSS and read these variable names from :root. goa.css in
   particular does `color: var(--ink, #eef2f8)`, so without --ink defined the
   section headings fall back to near-white and vanish on the cream ground.

   These map the legacy names onto the v3 palette. Keep them in sync with the
   tokens above; the plugins are shared with sister sites and cannot be
   retargeted from here.
   -------------------------------------------------------------------------- */

:root {
    --bg:          var(--vn-warm);
    --bg-warm:     #e6e2da;
    --surface:     var(--vn-page);
    --surface-alt: var(--vn-alt);
    --border:      var(--vn-line-firm);
    --border-lt:   #e2ded5;

    --ink:       var(--vn-ink-deep);
    --ink-soft:  #3a3731;
    --ink-muted: var(--vn-muted);
    --ink-faint: var(--vn-faint);

    --navy:       var(--vn-navy);
    --navy-mid:   var(--vn-navy-mid);
    --navy-lt:    #e3eaf4;
    --navy-faint: #eef2f8;

    --red:       var(--vn-red);
    --red-dark:  var(--vn-red-dark);
    --red-lt:    #fbedef;
    --red-faint: #fdf5f6;
    --teal:      #0b7f86;

    --f-display: var(--vn-serif);
    --f-body:    var(--vn-sans);

    --w-page: 900px;
    --w-wide: 960px;

    --r:    var(--vn-r-btn);
    --r-lg: 12px;

    --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);

    /* design26 names still referenced by some module markup */
    --vn-cream:     var(--vn-page);
    --vn-ink-muted: var(--vn-muted);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--vn-sans);
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--vn-ink);
    background: var(--vn-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--vn-navy-mid); text-decoration: none; }
a:hover { color: var(--vn-red); }

img { max-width: 100%; height: auto; }

::selection { background: var(--vn-red); color: #fff; }

:focus-visible {
    outline: 2px solid var(--vn-steel);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The web components have no intrinsic size, so they fill their grid cell
   (175px in the themes grid) unless constrained. Size them at the call site. */
theme-icon, dest-emblem { display: block; }
.vn-theme theme-icon { width: 44px; height: 44px; }
.vn-rail theme-icon,
.vn-content theme-icon { width: 32px; height: 32px; }

/* Skip link - keyboard users land on content, not the nav */
.vn-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--vn-navy);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--vn-r-btn) 0;
    font-size: 14px;
    font-weight: 600;
}
.vn-skip:focus {
    left: 0;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Rail
   -------------------------------------------------------------------------- */

.vn-pad {
    max-width: var(--vn-rail);
    margin: 0 auto;
    padding-left: var(--vn-gutter);
    padding-right: var(--vn-gutter);
}

.vn-sec { padding-top: 98px; }
.vn-sec--tight { padding-top: 64px; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.vn-display {
    font-family: var(--vn-serif);
    font-weight: 400;
    font-size: 66px;
    line-height: 1.02;
    letter-spacing: -1.4px;
    color: var(--vn-navy);
    margin: 0 0 30px;
}

.vn-h1 {
    font-family: var(--vn-serif);
    font-weight: 400;
    font-size: 62px;
    line-height: 1;
    letter-spacing: -1.3px;
    color: var(--vn-navy);
    margin: 0 0 22px;
}

.vn-h2 {
    font-family: var(--vn-serif);
    font-weight: 400;
    font-size: 41px;
    line-height: 1.1;
    letter-spacing: -0.7px;
    color: var(--vn-navy);
    margin: 0 0 14px;
}

.vn-h3 {
    font-family: var(--vn-serif);
    font-weight: 500;
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: var(--vn-navy);
    margin: 0 0 8px;
}

.vn-lede {
    font-family: var(--vn-serif);
    font-size: 21px;
    line-height: 1.6;
    color: var(--vn-navy-mid);
    margin: 0 0 20px;
    max-width: 64ch;
}

/* Eyebrow: red, uppercase, wide tracking. Optionally preceded by a short rule. */
.vn-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.9px;
    text-transform: uppercase;
    color: var(--vn-red);
    margin-bottom: 15px;
}
.vn-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--vn-red);
    flex: 0 0 auto;
}
.vn-eyebrow--plain { display: block; }
.vn-eyebrow--plain::before { display: none; }

.vn-sub {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--vn-muted);
    margin: 0;
}

/* Section head: copy block left, "all X" link right */
.vn-sechead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 42px;
    flex-wrap: wrap;
}
.vn-sechead__copy { max-width: 520px; }

/* Quiet underline link, used for every "see all" */
.vn-more {
    font-size: 14px;
    font-weight: 600;
    color: var(--vn-navy);
    border-bottom: 1px solid #cfc9bf;
    padding-bottom: 3px;
    white-space: nowrap;
}
.vn-more:hover { border-bottom-color: var(--vn-red); color: var(--vn-navy); }

/* --------------------------------------------------------------------------
   Buttons - three tiers, do not add a fourth
   -------------------------------------------------------------------------- */

.vn-btn {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--vn-sans);
    font-size: 15px;
    font-weight: 600;
    padding: 16px 30px;
    border-radius: var(--vn-r-btn);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

/* Tier 2 - steel. The default for functional and partner actions. */
.vn-btn--steel { background: var(--vn-steel); color: #fff; }
.vn-btn--steel:hover { background: var(--vn-steel-hover); color: #fff; }

/* Tier 1 - red. Reserved: "Surprise me" and "All deals" only. */
.vn-btn--red { background: var(--vn-red); color: #fff; }
.vn-btn--red:hover { background: var(--vn-red-dark); color: #fff; }

/* Tier 3 - quiet secondary. */
.vn-btn--quiet {
    background: var(--vn-surface);
    color: var(--vn-navy);
    border-color: var(--vn-line-firm);
}
.vn-btn--quiet:hover { background: var(--vn-alt); color: var(--vn-navy); }

/* Control-height scale (CD): 44px small, 48px default, 52px prominent.
   Anything that is a control clears 44px. Inline prose links are exempt. */
.vn-btn { min-height: 48px; }
.vn-btn--sm { font-size: 13.5px; padding: 11px 17px; gap: 7px; min-height: 44px; }
.vn-btn--lg { min-height: 52px; padding: 18px 32px; }

/* Inline text link with a hairline underline */
.vn-tlink {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 500;
    color: var(--vn-navy);
    border-bottom: 1px solid #cfc9bf;
    padding-bottom: 3px;
}
.vn-tlink:hover { border-bottom-color: var(--vn-red); }

/* --------------------------------------------------------------------------
   Header - light, sticky, translucent
   -------------------------------------------------------------------------- */

.vn-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(250, 249, 246, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--vn-line);
}
.vn-header__rule { height: 3px; background: var(--vn-red); }

.vn-header__bar {
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.vn-brand {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--vn-navy);
    flex: 0 0 auto;
}
.vn-brand:hover { color: var(--vn-navy); }
.vn-brand__name {
    font-family: var(--vn-serif);
    font-size: 25px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.2px;
}
/* Wordmark lockup: "View Norway .<flag>" - the dot and flag are one tight
   unit, as on the original template. The dot is a faded serif period, not a
   red accent; it separates the wordmark from the flag rather than shouting.
   On the old navy header it was cream at 0.4 opacity; the v3 header is cream,
   so it takes the navy ink at the same weight instead. */
.vn-brand__mark {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.vn-brand__dot {
    font-family: var(--vn-serif);
    color: var(--vn-navy);
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.4;
}
.vn-brand__flag { font-size: 20px; line-height: 1; }

/* Desktop nav. mod_menu emits a <ul>, so style that rather than bare <a>. */
.vn-nav {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    min-width: 0;
}
.vn-nav ul {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.vn-nav li { margin: 0; }
.vn-nav a { color: var(--vn-ink); }
.vn-nav a:hover { color: var(--vn-red); }
.vn-nav .current > a,
.vn-nav .active > a { color: var(--vn-red); }

.vn-header__tools {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}

/* Search: a hairline underline, not a boxed input */
.vn-search { min-width: 176px; }
.vn-search form { margin: 0; }
.vn-search .mod-finder__search,
.vn-search .awesomplete { display: block; width: 100%; }
.vn-search input[type="text"],
.vn-search input[type="search"] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--vn-line-firm);
    outline: none;
    color: var(--vn-ink);
    font-family: inherit;
    font-size: 13.5px;
    padding: 7px 2px;
    border-radius: 0;
}
.vn-search input::placeholder { color: var(--vn-faint); }
.vn-search input:focus { border-bottom-color: var(--vn-red); }
.vn-search button[type="submit"] { display: none; }

.vn-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--vn-r-list);
    background: transparent;
    border: 1px solid var(--vn-line-firm);
    color: var(--vn-navy);
    cursor: pointer;
    flex: 0 0 auto;
}
.vn-burger:hover { border-color: var(--vn-red); color: var(--vn-red); }

.vn-mobile-menu {
    border-top: 1px solid var(--vn-line);
    padding: 6px 22px 18px;
}
.vn-mobile-menu[hidden] { display: none; }
.vn-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.vn-mobile-menu li { margin: 0; }
.vn-mobile-menu a {
    display: block;
    color: var(--vn-navy);
    font-size: 16px;
    font-weight: 500;
    padding: 14px 0;
    border-bottom: 1px solid var(--vn-line-soft);
}
.vn-mobile-menu li:last-child a { border-bottom: none; }

/* --------------------------------------------------------------------------
   Hero - cream editorial split
   -------------------------------------------------------------------------- */

.vn-herowrap { border-bottom: 1px solid var(--vn-line); }

.vn-hero {
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: 64px;
    align-items: center;
}
.vn-hero-copy { padding: 106px 0; }
.vn-hero-copy p {
    font-size: 17.5px;
    line-height: 1.75;
    color: var(--vn-body-soft);
    margin: 0 0 42px;
    max-width: 432px;
}
.vn-hero-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.vn-hero-art {
    position: relative;
    height: 580px;
    background: #eceff5;
    border-radius: var(--vn-r-art);
    overflow: hidden;
}
.vn-hero-art > svg,
.vn-hero-art > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Booking strip - hairlines, no heavy card
   -------------------------------------------------------------------------- */

.vn-catwrap {
    background: var(--vn-surface);
    border-bottom: 1px solid var(--vn-line);
}
.vn-cats {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
}
.vn-cats::-webkit-scrollbar { display: none; }

.vn-cat {
    flex: 1 0 auto;
    min-width: 106px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    padding: 28px 8px 26px;
    color: var(--vn-navy);
    border-right: 1px solid var(--vn-line-fine);
    transition: background .2s ease, color .2s ease;
}
.vn-cat:last-child { border-right: none; }
.vn-cat:hover { background: #faf8f4; color: var(--vn-red); }
.vn-cat span { font-size: 12.5px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Card grids - 1px gaps over a hairline ground
   -------------------------------------------------------------------------- */

.vn-grid {
    display: grid;
    gap: 1px;
    background: var(--vn-line);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-mod);
    overflow: hidden;
}
.vn-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vn-grid--4 { grid-template-columns: repeat(4, 1fr); }
.vn-grid--6 { grid-template-columns: repeat(6, 1fr); }

.vn-grid > * { background: var(--vn-surface); }

/* The hairline ground shows through any cell the content does not fill - the
   themes grid is 11 tiles in a 6-column layout, so the bottom-right cell was
   a grey block. Painting the container white leaves the 1px gaps reading as
   rules while empty cells stay white. */
.vn-grid { background-color: var(--vn-surface); }

/* Theme tile inside a 1px grid */
.vn-theme {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px 12px;
    background: var(--vn-surface);
    color: var(--vn-navy);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    transition: background .18s ease, color .18s ease;
}
.vn-theme:hover { background: #faf8f4; color: var(--vn-red); }

/* Standalone cards (used where a grid rail is wrong, eg the sidebar) */
.vn-card {
    display: block;
    background: var(--vn-surface);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-mod);
    padding: 22px;
    color: var(--vn-navy);
    transition: background .22s ease, border-color .22s ease;
}
a.vn-card:hover {
    background: #fffdfa;
    border-color: #dccfc6;
    color: var(--vn-navy);
}

/* Destination / article cards */
.vn-cards3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.vn-mcard {
    display: flex;
    flex-direction: column;
    background: var(--vn-surface);
    border: 1px solid var(--vn-line-soft);
    border-radius: var(--vn-r-mod);
    overflow: hidden;
    color: var(--vn-navy);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.vn-mcard:hover {
    border-color: #dccfc6;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -22px rgba(14, 34, 64, 0.4);
    color: var(--vn-navy);
}
.vn-mcard__img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--vn-line);
    overflow: hidden;
}
.vn-mcard__body { padding: 24px 22px 26px; }
.vn-mcard__title {
    font-family: var(--vn-serif);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.3px;
    margin: 0 0 8px;
    color: var(--vn-navy);
}
.vn-mcard__meta {
    font-size: 13px;
    color: var(--vn-faint);
    margin: 0 0 10px;
}
.vn-mcard p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--vn-muted);
    margin: 0;
}

/* Editorial index - "latest reads", no numerals */
.vn-read {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: baseline;
    padding: 16px 0;
    border-bottom: 1px solid var(--vn-line-soft);
    color: var(--vn-navy);
}
.vn-read:hover { color: var(--vn-red); }
.vn-read__title {
    font-family: var(--vn-serif);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.4px;
    margin: 0 0 4px;
}
.vn-read__sub {
    font-size: 14px;
    line-height: 1.55;
    color: var(--vn-muted);
    margin: 0;
    max-width: 68ch;
}
.vn-read-go { font-size: 14px; font-weight: 600; color: var(--vn-red); white-space: nowrap; }


/* Editorial index wrapper (latest reads) */
.vn-reads { border-top: 1px solid var(--vn-line-soft); }
.vn-reads .vn-read:last-child { border-bottom: none; }

/* Plan & book: one wide card + two */
.vn-plan {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 22px;
}
.vn-plan__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: 34px 32px;
    min-height: 250px;
}
.vn-plan__card .vn-sub { font-size: 14.5px; }
.vn-plan__card .vn-btn { align-self: flex-start; }

/* --------------------------------------------------------------------------
   Page head (municipality / county / listing / info)
   -------------------------------------------------------------------------- */

.vn-crumbs {
    font-size: 13px;
    color: var(--vn-faint);
    padding-top: 22px;
}
.vn-crumbs a { color: var(--vn-faint); }
.vn-crumbs a:hover { color: var(--vn-red); }
.vn-crumbs ol, .vn-crumbs ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
}
.vn-crumbs li { display: flex; align-items: center; gap: 4px; }
.vn-crumbs li + li::before {
    content: "\203A";
    opacity: 0.45;
    padding: 0 4px;
}
.vn-crumbs .active, .vn-crumbs [aria-current] { color: var(--vn-navy); }

/* One rhythm below the page head on every page type. Previously the gap was
   22px on theme/search (head -> body) but 34-40px on municipality, because the
   fact strip and banner carried their own margins. */
.vn-pagehead { padding-top: 28px; padding-bottom: 34px; }
.vn-pagehead > *:last-child { margin-bottom: 0; }

.vn-banner {
    position: relative;
    height: 300px;
    border-radius: var(--vn-r-art);
    overflow: hidden;
    border: 1px solid var(--vn-line);
    margin-bottom: 34px;
    background: var(--vn-warm);
}
.vn-banner > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.vn-banner img { object-fit: cover; }

/* Collection head for category listings */
.vn-collection-head { padding-bottom: 8px; }

/* --------------------------------------------------------------------------
   Body + sidebar rail
   -------------------------------------------------------------------------- */

.vn-main { padding-bottom: 40px; }

.vn-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: 64px;
    align-items: start;
}
.vn-body--full { display: block; }

.vn-content { min-width: 0; }
.vn-content p { color: var(--vn-body); line-height: 1.75; }
.vn-content > main > .item-page > p:first-of-type,
.vn-content .item-page > p:first-of-type { max-width: 68ch; }

.vn-rail {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.vn-rail > * { min-width: 0; }

/* Grouped link list - 1px rails, rounded container */
.vn-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--vn-line);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-list);
    overflow: hidden;
}
.vn-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 15px;
    background: var(--vn-surface);
    color: var(--vn-navy);
    font-size: 14px;
    font-weight: 600;
}
.vn-list a:hover { background: #faf8f4; color: var(--vn-red); }

/* --------------------------------------------------------------------------
   Joomla module chrome inside the rail
   -------------------------------------------------------------------------- */

.vn-rail .moduletable,
.vn-rail .card {
    background: var(--vn-surface);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-mod);
    padding: 22px;
}
.vn-rail .moduletable > h3,
.vn-rail .card > .card-header,
.vn-rail .card-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--vn-red);
    margin: 0 0 12px;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--vn-sans);
}
.vn-rail ul { list-style: none; margin: 0; padding: 0; }
.vn-rail .card-body { padding: 0; }

.vn-above-content, .vn-below-content { margin: 0 0 28px; }
.vn-below-content { margin: 28px 0 0; }

/* --------------------------------------------------------------------------
   Article body - readable measure, styled prose
   -------------------------------------------------------------------------- */

.vn-article .page-header h1,
.vn-article h1.vn-h1 {
    font-family: var(--vn-serif);
    font-weight: 400;
    color: var(--vn-navy);
}
.vn-article h2 {
    font-family: var(--vn-serif);
    font-weight: 400;
    font-size: 31px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--vn-navy);
    margin: 38px 0 16px;
    display: flex;
    align-items: center;
    gap: 13px;
}
.vn-article h2::before {
    content: "";
    width: 5px;
    height: 27px;
    background: var(--vn-red);
    flex: 0 0 auto;
    border-radius: 1px;
}
.vn-article h3 {
    font-family: var(--vn-serif);
    font-weight: 500;
    font-size: 23px;
    line-height: 1.25;
    color: var(--vn-navy);
    margin: 28px 0 12px;
}
.vn-article p { max-width: 68ch; }
.vn-article ul, .vn-article ol { max-width: 66ch; color: var(--vn-body); }
.vn-article li { margin-bottom: 8px; }
.vn-article img { border-radius: var(--vn-r-mod); }
.vn-article blockquote {
    margin: 32px 0;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--vn-red);
    font-family: var(--vn-serif);
    font-size: 20px;
    line-height: 1.6;
    color: var(--vn-navy-mid);
}
.vn-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    font-size: 15px;
}
.vn-article th, .vn-article td {
    border: 1px solid var(--vn-line);
    padding: 11px 14px;
    text-align: left;
}
.vn-article th { background: var(--vn-alt); color: var(--vn-navy); font-weight: 600; }

/* Joomla info block (author / date) */
.vn-article .article-info {
    font-size: 13px;
    color: var(--vn-faint);
    margin: 0 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.vn-article .article-info dd { margin: 0; }

/* --------------------------------------------------------------------------
   Joomla list / blog views (category, tags, finder)
   -------------------------------------------------------------------------- */

.vn-content .com-content-category-blog__items,
.vn-content .blog-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}
.vn-content .blog-item {
    background: var(--vn-surface);
    border: 1px solid var(--vn-line-soft);
    border-radius: var(--vn-r-mod);
    padding: 26px 24px 28px;
    transition: border-color .18s ease, transform .18s ease;
}
.vn-content .blog-item:hover { border-color: #dccfc6; transform: translateY(-2px); }
.vn-content .blog-item h2,
.vn-content .blog-item .page-header h2 {
    font-family: var(--vn-serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.3px;
    margin: 0 0 10px;
}
.vn-content .blog-item h2::before { display: none; }
.vn-content .blog-item h2 a { color: var(--vn-navy); }
.vn-content .blog-item h2 a:hover { color: var(--vn-red); }

/* Plain article lists (com_content list layout, com_tags, com_finder) */
.vn-content .com-content-category__items,
.vn-content .category > ul,
.vn-content ul.category,
.vn-content .com-tags-tag__items,
.vn-content .tag-category ul,
.vn-content .search-results,
.vn-content .com-finder__results ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--vn-line);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-mod);
    overflow: hidden;
}
.vn-content .com-content-category__items > li,
.vn-content .category > ul > li,
.vn-content ul.category > li,
.vn-content .com-tags-tag__items > li,
.vn-content .tag-category ul > li,
.vn-content .search-results > li,
.vn-content .com-finder__results ul > li {
    background: var(--vn-surface);
    padding: 20px 22px;
    margin: 0;
    transition: background .16s ease;
}
.vn-content .com-content-category__items > li:hover,
.vn-content .category > ul > li:hover,
.vn-content ul.category > li:hover,
.vn-content .com-tags-tag__items > li:hover,
.vn-content .tag-category ul > li:hover,
.vn-content .search-results > li:hover,
.vn-content .com-finder__results ul > li:hover { background: #faf8f4; }

.vn-content .com-content-category__items h3,
.vn-content .com-tags-tag__items h3,
.vn-content .search-results h3,
.vn-content .result-title {
    font-family: var(--vn-serif);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -0.2px;
    margin: 0 0 4px;
    color: var(--vn-navy);
}
.vn-content .com-content-category__items h3::before,
.vn-content .com-tags-tag__items h3::before { display: none; }
.vn-content .result-text, .vn-content .search-results p {
    font-size: 14.5px;
    color: var(--vn-muted);
    margin: 0;
}
.vn-content .result-url, .vn-content .search-results .result-url {
    font-size: 12.5px;
    color: var(--vn-faint);
}

/* Tag cloud / tag list pages */
.vn-content .tag-body { margin-top: 8px; }
.vn-content .com-tags-tags__items {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.vn-content .com-tags-tags__items > li {
    background: var(--vn-surface);
    border: 1px solid var(--vn-line);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
}
.vn-content .com-tags-tags__items > li:hover { border-color: var(--vn-red); }

/* Pagination */
.vn-content .pagination,
.vn-content .com-content-category__pagination ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 40px 0 0;
    padding: 0;
    justify-content: center;
}
.vn-content .pagination a,
.vn-content .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-btn);
    background: var(--vn-surface);
    color: var(--vn-navy);
    font-size: 14px;
    font-weight: 600;
}
.vn-content .pagination a:hover { border-color: var(--vn-red); color: var(--vn-red); }
.vn-content .pagination .active span { background: var(--vn-navy); color: #fff; border-color: var(--vn-navy); }

/* Joomla system messages */
.vn-content .alert {
    border: 1px solid var(--vn-line);
    border-left: 3px solid var(--vn-steel);
    border-radius: var(--vn-r-btn);
    background: var(--vn-surface);
    padding: 14px 18px;
    margin: 0 0 24px;
    font-size: 15px;
}
.vn-content .alert-danger, .vn-content .alert-error { border-left-color: var(--vn-red); }

/* --------------------------------------------------------------------------
   Dark anchor band (used at most once per page, above the footer)
   -------------------------------------------------------------------------- */

.vn-dark {
    background: var(--vn-navy);
    color: var(--vn-page);
}
.vn-dark .vn-h2, .vn-dark h2, .vn-dark h3 { color: var(--vn-page); }
.vn-dark .vn-sub, .vn-dark p { color: rgba(250, 249, 246, 0.72); }
.vn-dark a { color: rgba(250, 249, 246, 0.86); }
.vn-dark a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Bottom module bands
   -------------------------------------------------------------------------- */

.vn-bottom { padding-top: 64px; padding-bottom: 72px; }
.vn-bottom .moduletable > h2,
.vn-bottom .moduletable > h3,
.vn-bottom .card-header {
    display: flex;
    align-items: center;
    gap: 13px;
    font-family: var(--vn-serif);
    font-weight: 400;
    font-size: 31px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--vn-navy);
    margin: 0 0 22px;
    background: none;
    border: none;
    padding: 0;
}
.vn-bottom ul { list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   Footer - the single dark anchor
   -------------------------------------------------------------------------- */

.vn-footer {
    background: var(--vn-navy);
    color: var(--vn-page);
    border-top: 3px solid var(--vn-red);
    /* The network band always renders directly above the footer and carries
       its own 66px bottom padding, so any margin here is a dead cream strip. */
    margin-top: 0;
}
.vn-footer__inner { padding-top: 64px; padding-bottom: 30px; }

.vn-foot {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 44px;
    padding-bottom: 46px;
    border-bottom: 1px solid rgba(250, 249, 246, 0.13);
}
.vn-foot__brand {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 18px;
}
.vn-foot__brand .vn-brand__name { font-size: 23px; color: var(--vn-page); }
.vn-foot__brand .vn-brand__dot { font-size: 23px; }
.vn-foot__brand .vn-brand__flag { font-size: 15px; }
.vn-foot p {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(250, 249, 246, 0.6);
    margin: 0;
    max-width: 300px;
}
.vn-foot__head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(250, 249, 246, 0.45);
    margin-bottom: 18px;
}
.vn-foot__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14.5px;
}
.vn-foot__links a { color: rgba(250, 249, 246, 0.82); }
.vn-foot__links a:hover { color: #fff; }

.vn-footer__modules {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(250, 249, 246, 0.45);
    margin: 22px 0 0;
}
.vn-footer__modules a { color: rgba(250, 249, 246, 0.7); }
.vn-footer__modules ul { list-style: none; margin: 0; padding: 0; }

.vn-colophon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 26px 0 0;
    font-size: 12.5px;
    color: rgba(250, 249, 246, 0.45);
}
.vn-colophon a { color: rgba(250, 249, 246, 0.7); }

/* --------------------------------------------------------------------------
   Responsive - 1080px (nav to burger, grids halve) and 760px (single column)
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .vn-nav, .vn-search { display: none; }
    .vn-burger { display: inline-flex; }

    .vn-hero { grid-template-columns: 1fr; gap: 0; }
    .vn-hero-art { order: -1; height: 420px; }
    .vn-hero-copy { padding: 58px 0 66px; }

    .vn-body { grid-template-columns: 1fr; gap: 52px; }
    .vn-rail { position: static; }

    .vn-cards3, .vn-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .vn-plan { grid-template-columns: 1fr; }
    .vn-grid--6 { grid-template-columns: repeat(3, 1fr); }
    .vn-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .vn-foot { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 760px) {
    :root { --vn-gutter: 22px; }

    .vn-sec { padding-top: 64px; }
    .vn-display { font-size: 43px; letter-spacing: -1px; }
    .vn-h1 { font-size: 40px; letter-spacing: -0.8px; }
    .vn-h2 { font-size: 30px; letter-spacing: -0.5px; }
    .vn-lede { font-size: 19px; }

    .vn-hero-art { height: 300px; }
    .vn-banner { height: 200px; }

    .vn-cards3, .vn-grid--3, .vn-grid--4, .vn-plan { grid-template-columns: 1fr; }
    .vn-grid--6 { grid-template-columns: repeat(2, 1fr); }
    .vn-content .com-content-category-blog__items,
    .vn-content .blog-items { grid-template-columns: 1fr; }

    .vn-cat { flex: 0 0 auto; width: 98px; min-width: 98px; }

    .vn-read { grid-template-columns: 1fr; gap: 4px; }
    .vn-read-go { display: none; }

    .vn-foot { grid-template-columns: 1fr 1fr; gap: 28px; }
    .vn-article h2 { font-size: 26px; margin: 40px 0 18px; }
}

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

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
    .vn-header, .vn-footer, .vn-rail, .vn-catwrap, .vn-bottom, .vn-net { display: none; }
    body { background: #fff; }
    .vn-body { display: block; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .vn-mcard:hover, .vn-content .blog-item:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   "More from our network" - sister-site promo band, sits above the footer.
   Scoped entirely under .vn-net. Rail widened to the v3 1280/40 measure;
   everything else is the shipped design verbatim (per-site accents included).
   -------------------------------------------------------------------------- */

.vn-net { background: var(--vn-alt); border-top: 1px solid var(--vn-line); font-family: var(--vn-sans); color: var(--vn-ink-deep); }
.vn-net * { box-sizing: border-box; }
.vn-net__inner { max-width: var(--vn-rail); margin: 0 auto; padding: 60px var(--vn-gutter) 66px; }
.vn-net__head { max-width: 640px; margin-bottom: 34px; }
.vn-net__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--vn-red); margin-bottom: 11px; }
.vn-net__title { font-family: var(--vn-serif); font-weight: 500; font-size: 36px;
    line-height: 1.08; margin: 0 0 10px; color: var(--vn-navy); }
.vn-net__sub { font-size: 15.5px; line-height: 1.6; color: #5a6473; margin: 0; }
.vn-net__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vn-net__card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vn-line); border-radius: var(--vn-r-mod); padding: 24px 24px 22px; color: var(--vn-navy); overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.vn-net__card:hover { transform: translateY(-4px); box-shadow: 0 22px 42px -26px rgba(14, 34, 64, .45); }
.vn-net__rule { position: absolute; left: 0; top: 0; width: 100%; height: 4px; }
.vn-net__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.vn-net__mark { width: 48px; height: 48px; border-radius: 12px; display: block; box-shadow: 0 0 0 1px rgba(14, 34, 64, .08); }
.vn-net__name { font-size: 18px;
    line-height: 1.25; font-weight: 700; letter-spacing: -.2px; color: var(--vn-navy); }
.vn-net__name--serif { font-family: var(--vn-serif); font-size: 22px;
    line-height: 1.2; font-weight: 500; letter-spacing: 0; color: var(--vn-navy); }
.vn-net__desc { font-size: 14px; line-height: 1.55; color: #5a6473; margin: 0 0 20px; flex: 1; }
.vn-net__foot { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; white-space: nowrap; }
.vn-net__url { color: #767163; }
.vn-net__go { color: var(--vn-red); }

.vn-net__card--goa:hover { border-color: #E8501F; }
.vn-net__card--goa .vn-net__rule { background: #E8501F; }
.vn-net__card--goa .vn-net__go { color: #C43F14; }

.vn-net__card--beach:hover { border-color: #14A6A0; }
.vn-net__card--beach .vn-net__rule { background: #14A6A0; }
.vn-net__card--beach em { color: #14A6A0; font-style: normal; }
.vn-net__card--beach .vn-net__go { color: #0a6f8c; }

.vn-net__card--hot:hover { border-color: #E7B25C; }
.vn-net__card--hot .vn-net__rule { background: #E7B25C; }
.vn-net__card--hot .vn-net__go { color: #8a6520; }

/* For The Temples - the mark is near-black with no brand hue of its own, so
   the accent is a warm temple gold at 4.67:1 on white, distinct from
   HotSpringDips' #8a6520. */
.vn-net__card--temples:hover { border-color: #9a6b1f; }
.vn-net__card--temples .vn-net__rule { background: #9a6b1f; }
.vn-net__card--temples .vn-net__go { color: #9a6b1f; }
.vn-net__card--temples .vn-net__name b { color: #9a6b1f; font-weight: 600; }

.vn-net__card--whx:hover { border-color: var(--vn-navy-mid); }
.vn-net__card--whx .vn-net__rule { background: var(--vn-navy-mid); }
.vn-net__card--whx .vn-net__go { color: var(--vn-navy-mid); }
.vn-net__card--whx b { color: var(--vn-navy-mid); font-weight: 600; }

/* PartyTraveling was a near-black card (#12101a) in the source design. On the
   v3 light system that made three dark blocks stack - this card, the closer
   tile and the footer directly below. It now sits on white like its siblings
   and carries its nightlife identity in the accent rule and link colour only.
   The violet is darkened to #6D3BD6 so it clears 4.5:1 on white. */
.vn-net__card--party:hover { border-color: #6D3BD6; }
.vn-net__card--party .vn-net__rule { background: linear-gradient(90deg, #9D6BFF, #21E6C8); }
.vn-net__card--party .vn-net__name b { color: #6D3BD6; font-weight: 700; }
.vn-net__card--party .vn-net__go { color: #6D3BD6; }


@media (max-width: 900px) { .vn-net__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vn-net__grid { grid-template-columns: 1fr; } .vn-net__title { font-size: 30px; } }

/* --------------------------------------------------------------------------
   Error page
   -------------------------------------------------------------------------- */

.vn-error {
    padding: 120px 0 140px;
    max-width: 720px;
}
.vn-error__message {
    font-size: 17px;
    line-height: 1.7;
    color: var(--vn-muted);
    margin: 0 0 38px;
}
.vn-error__actions {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.vn-error-page .vn-footer { margin-top: 0; }

@media (max-width: 760px) {
    .vn-error { padding: 64px 0 80px; }
}

/* --------------------------------------------------------------------------
   Bottom band - "Only in Norway" (mod1) + "Take a Chance" (mod2).
   The eyebrow, card and button are injected by js/template.js because the
   mod_articles modules emit only a heading and a list.
   -------------------------------------------------------------------------- */

.vn-bottom .vn-btm {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 64px;
    align-items: start;
}

.vn-band-eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.9px;
    text-transform: uppercase;
    color: var(--vn-red);
    margin-bottom: 14px;
}

/* The two bottom modules sit side by side: the editorial index on the left,
   the "Take a Chance" navy card on the right. Joomla renders them as two
   sibling .moduletable divs inside .vn-pad, so the rail itself is the grid. */
.vn-bottom .vn-pad {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 64px;
    align-items: start;
}
.vn-bottom .moduletable { min-width: 0; }

.vn-bottom .mod1 ul,
.vn-bottom .mod2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vn-bottom .mod1 li {
    border-bottom: 1px solid var(--vn-line-soft);
}
.vn-bottom .mod1 li:last-child { border-bottom: none; }
.vn-bottom .mod1 li a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 14px;
    padding: 7px 2px;
    font-family: var(--vn-serif);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: var(--vn-navy);
}
.vn-bottom .mod1 li a::after {
    content: "→";
    font-family: var(--vn-sans);
    font-size: 14px;
    color: var(--vn-red);
    flex: 0 0 auto;
}
.vn-bottom .mod1 li a:hover { color: var(--vn-red); }

.vn-band-plane { margin-left: 10px; vertical-align: middle; }

/* The one dark anchor allowed outside the footer */
/* "Take a Chance" was navy in both the old design and the first v3 pass. On
   the cream page it reads as a heavy slab, so it now uses the same tinted
   ground as the in-content tools: light, hairline, ink on cream. That also
   means the footer is the page's only dark element. */
.vn-band-card {
    position: relative;
    background: var(--vn-alt);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-mod);
    padding: 24px 26px 22px;
    color: var(--vn-navy);
    overflow: hidden;
}
.vn-band-card__sub {
    font-size: 14px;
    line-height: 1.6;
    color: var(--vn-muted);
    margin: 0 0 16px;
}
.vn-band-card li { border-bottom: 1px solid rgba(250, 249, 246, 0.12); }
.vn-band-card li:last-child { border-bottom: none; }
.vn-band-card li a {
    display: block;
    padding: 9px 0;
    font-size: 15px;
    font-weight: 500;
    color: rgba(250, 249, 246, 0.86);
}
.vn-band-card li a:hover { color: #fff; }

.vn-tac-actions { margin-top: 22px; }

@media (max-width: 1080px) {
    .vn-bottom .vn-btm,
    .vn-bottom .vn-pad { grid-template-columns: 1fr; gap: 52px; }
}

/* --------------------------------------------------------------------------
   Article byline (joomla.content.info_block override)
   -------------------------------------------------------------------------- */

.vn-byline {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 30px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--vn-line-soft);
}
.vn-byline__avatar img {
    /* The mark is a 32x32 source; showing it at 40 upscales and softens it.
       Render at its native size and centre it in a 40px well. */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block;
    background: var(--vn-alt);
}
.vn-byline__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--vn-alt);
    flex: 0 0 auto;
}
.vn-byline__name {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--vn-navy);
}
.vn-byline__date {
    display: block;
    font-size: 13px;
    color: var(--vn-faint);
}

/* --------------------------------------------------------------------------
   Municipality / county pages supply their own designed page head, so the
   component's own <h1> would duplicate it. Hide that one, not all of them.
   -------------------------------------------------------------------------- */

.vn-muni .vn-content .page-header,
.vn-county .vn-content .page-header { display: none; }

/* The goa/vnads plugin markup lives inside the article body. Give its
   headings the v3 treatment without fighting the plugin's own rules. */
.vn-article .goa-section-title {
    font-family: var(--vn-serif) !important;
    font-size: 31px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--vn-navy) !important;
    letter-spacing: -0.5px;
    margin: 38px 0 16px !important;
    display: flex;
    align-items: center;
    gap: 13px;
}
.vn-article .goa-section-title::before {
    content: "";
    width: 5px;
    height: 27px;
    background: var(--vn-red);
    flex: 0 0 auto;
    border-radius: 1px;
}

/* --------------------------------------------------------------------------
   Category listing. com_content's list layout emits a Bootstrap-classed
   <table>; the site loads no Bootstrap, so it must be reshaped here into the
   v3 card grid. Covers /only-in-norway (674 articles) and every category page.
   -------------------------------------------------------------------------- */

.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,
.com-content-category table.com-content-category__table caption { display: none; }

.com-content-category table.com-content-category__table tbody {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 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: var(--vn-surface) !important;
    border: 1px solid var(--vn-line);
    border-radius: 12px;
    padding: 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;
}
.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: var(--vn-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--vn-navy);
    line-height: 1.25;
}
.com-content-category .list-title a:hover { color: var(--vn-red); }
.com-content-category .list-date {
    font-size: 12px;
    color: var(--vn-faint);
    font-weight: 500;
}

.com-content-category .com-content-category__counter { font-size: 13px; color: var(--vn-faint); }

/* Pagination (com_content emits .page-link inside a .pagination list) */
.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 var(--vn-line);
    border-radius: var(--vn-r-btn);
    color: var(--vn-navy);
    font-size: 14px;
    background: var(--vn-surface);
}
.com-content-category .pagination .page-link:hover { border-color: var(--vn-red); color: var(--vn-red); }
.com-content-category .pagination .active .page-link {
    background: var(--vn-navy);
    color: #fff;
    border-color: var(--vn-navy);
}
.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; }

/* The "Display #" limit box */
.com-content-category .com-content-category__counter select,
.com-content-category select {
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-btn);
    padding: 7px 10px;
    background: var(--vn-surface);
    color: var(--vn-navy);
    font-family: inherit;
    font-size: 13.5px;
}

@media (max-width: 760px) {
    .com-content-category table.com-content-category__table tbody { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Tag listings (com_tags) - same treatment, different container
   -------------------------------------------------------------------------- */

.com-tags-tag__items,
.com-tags-tag-list__category { margin: 0; }

.com-tags-tag-list__category.table-striped > tbody > tr:nth-of-type(2n+1) { background: var(--vn-surface); }

.com-tags-tag__items table thead,
.com-tags-tag-list__category thead { display: none; }

/* --------------------------------------------------------------------------
   Bootstrap utility shims. Joomla core markup uses these classes; the site
   loads no Bootstrap, so without them labels and captions render visibly.
   -------------------------------------------------------------------------- */

.visually-hidden,
.sr-only,
.element-invisible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.float-end { float: right; }
.float-start { float: left; }
.w-100 { width: 100%; }

/* Bootstrap responsive display utilities.
   CAUTION: several sidebar modules carry `moduleclass_sfx: " d-none d-md-block"`
   (Book Your Trip 150, Things To Do 144, AI Trip Planner 151) - the Bootstrap
   idiom for "hidden on mobile, shown from md up". The old template defined
   NEITHER class, so both were inert and the cards always rendered. Defining
   .d-none alone hides them at every width and silently kills three affiliate
   cards. The md/lg counterparts below are what make the pair behave. */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline-block { display: inline-block; }

@media (min-width: 768px) {
    .d-md-none { display: none; }
    .d-md-block { display: block; }
    .d-md-flex { display: flex; }
    .d-md-inline-block { display: inline-block; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none; }
    .d-lg-block { display: block; }
    .d-lg-flex { display: flex; }
}

@media (min-width: 576px) {
    .d-sm-none { display: none; }
    .d-sm-block { display: block; }
    .d-sm-flex { display: flex; }
}

/* The finder input carries .form-control; keep it on the hairline treatment */
.vn-search .form-control {
    box-shadow: none;
    border-radius: 0;
}

/* Search icon sits before the input */
.vn-search::before {
    content: "";
    display: none;
}

/* --------------------------------------------------------------------------
   Homepage: the front-page menu item resolves to an article whose body is
   intro prose. Give it a lede treatment and centre it under the booking strip
   instead of letting it run full width as raw text.
   -------------------------------------------------------------------------- */

.vn-home .vn-main { padding-bottom: 0; }
.vn-home .vn-content .page-header { display: none; }
/* The homepage article body is a lede between two dense modules. CD said keep
   it there, capped at 62ch in 21px Newsreader navy - the same treatment as the
   municipality lede. Left-aligned like everything else on the page. */
.vn-home .vn-content {
    max-width: 62ch;
    margin: 0;
    padding: 56px 0 0;
    text-align: left;
}
.vn-home .vn-content p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--vn-body-soft);
    max-width: none;
}
.vn-home .vn-content p:first-of-type {
    font-family: var(--vn-serif);
    font-size: 21px;
    line-height: 1.6;
    color: var(--vn-navy-mid);
}
.vn-home .vn-content p:last-of-type { text-align: left; }
.vn-home .vn-content .com-content-article__body > p:last-child { margin-bottom: 0; }

/* Listing cards: left-aligned, title above date */
.com-content-category table.com-content-category__table tr { text-align: left; }
.com-content-category .list-title { order: 0; }
.com-content-category .list-date { order: 1; }

/* The ordering/limit controls sit above the grid, right-aligned and quiet */
.com-content-category__navigation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
}
.com-content-category__counter { order: 2; }

/* Pagination arrows. Joomla emits <span class="icon-angle-*"> which needs an
   icon font the site does not load, so they render as blank boxes. Replace
   them with real characters and drop the disabled ends entirely. */
.pagination [class^="icon-angle"],
.pagination [class*=" icon-angle"] {
    font-style: normal;
    line-height: 1;
}
.pagination .icon-angle-double-left::before { content: "\00AB"; }
.pagination .icon-angle-left::before       { content: "\2039"; }
.pagination .icon-angle-right::before      { content: "\203A"; }
.pagination .icon-angle-double-right::before { content: "\00BB"; }

.pagination li.disabled { display: none; }
.pagination { align-items: center; }
.pagination .ms-0 { margin-left: 0; }

/* --------------------------------------------------------------------------
   Overflow containment.

   The booking strip scrolls horizontally on purpose, but it must scroll
   inside itself rather than widening the page. Same for any wide content
   (tables, code) inside article bodies.
   -------------------------------------------------------------------------- */

html, body { overflow-x: hidden; }

.vn-catwrap { overflow: hidden; }
.vn-cats {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Off-screen skip link must not extend the scroll area */
.vn-skip {
    left: auto;
    right: 100%;
    transform: translateX(-100%);
}
.vn-skip:focus {
    left: 0;
    right: auto;
    transform: none;
}

/* Article bodies: wide tables and pre blocks scroll in their own box */
.vn-article table,
.vn-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
.vn-article pre,
.vn-content pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.vn-article img,
.vn-content img { max-width: 100%; height: auto; }

/* Long unbroken strings (URLs in prose) must wrap */
.vn-content p, .vn-content li { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Article page head. com_content emits .page-header > h1 with no class, so
   size it here rather than leaving it at the browser default.
   -------------------------------------------------------------------------- */

.vn-article .page-header h1 {
    font-family: var(--vn-serif);
    font-weight: 400;
    font-size: 47px;
    line-height: 1.08;
    letter-spacing: -1px;
    color: var(--vn-navy);
    margin: 0 0 22px;
    max-width: 22ch;
}

/* Tag chips under the title */
.vn-article .tags,
.vn-content ul.tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 26px;
    padding: 0;
}
.vn-article .tags li,
.vn-content ul.tags li { margin: 0; }
.vn-article .tags a,
.vn-content ul.tags a {
    display: inline-block;
    background: var(--vn-surface);
    border: 1px solid var(--vn-line);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vn-navy);
}
.vn-article .tags a:hover,
.vn-content ul.tags a:hover { border-color: var(--vn-red); color: var(--vn-red); }

/* Emoji that lead a heading should not inherit the serif metrics */
.vn-article h2 img,
.vn-article h3 img { vertical-align: -0.15em; }

@media (max-width: 760px) {
    .vn-article .page-header h1 { font-size: 32px; letter-spacing: -0.6px; max-width: none; }
}

/* --------------------------------------------------------------------------
   Plugin grid fix: .goa-cta-row

   goa.css sets `grid-template-columns: repeat(3, minmax(0,1fr))` and its own
   comment says "3-up desktop, 2-up tablet, 1-up phone" - but the media
   queries were never written. On a phone that produces three narrow columns
   with titles breaking mid-word ("Best Restau / rants in Stord").

   The plugin is shared with sister sites and cannot be edited from here, so
   the breakpoints its comment promises are supplied below. goa.css uses
   :has() rules to adapt the grid to child count (1, 2 or 3 buttons depending
   on the destination's booking_skip_* attribs); those must keep winning at
   desktop width, which is why these are scoped to the narrow breakpoints and
   marked !important.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .com-content-article__body .goa-cta-row,
    .goa-cta-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .com-content-article__body .goa-cta-row,
    .goa-cta-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .com-content-article__body .goa-cta-row .goa-cta-btn,
    .com-content-article__body .goa-cta-row a.goa-cta-btn {
        min-height: 0;
        padding: 14px 16px 14px 34px;
    }
}

/* Never hyphenate a place or partner name mid-word */
.goa-cta-btn,
.goa-card__title,
.goa-cta-row a {
    hyphens: manual;
    overflow-wrap: break-word;
    word-break: normal;
}

/* --------------------------------------------------------------------------
   .vn-kai - the Kayak-AI "Getting there" helper injected into municipality
   article bodies by the content plugin.

   The template must style this; the plugin ships markup only. Two generic
   article-body rules bleed in and have to be beaten with matching specificity,
   which is why every selector here is prefixed .vn-content:

     (a) `.com-content-article__body svg[viewBox]` adds chrome to every article
         svg (intended for standalone diagrams) and wrecks the sparkle icon.
     (b) `.vn-content .com-content-article__body a` forces navy + border-bottom
         on the Open button, and its :hover turns the text red - invisible on a
         red background. Hence the !important on the two button colour pairs.
   -------------------------------------------------------------------------- */

.vn-content .com-content-article__body .vn-kai {
    margin: 28px 0 0;
    background: var(--vn-alt);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-mod);
    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: var(--vn-surface);
    border: 1px solid var(--vn-line);
    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__icon svg path { fill: var(--vn-steel); }

.vn-content .com-content-article__body .vn-kai__body { flex: 1; min-width: 0; }

.vn-content .com-content-article__body .vn-kai__eyebrow {
    font-family: var(--vn-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--vn-red);
    margin-bottom: 6px;
}

.vn-content .com-content-article__body .vn-kai__lead {
    font-family: var(--vn-sans);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--vn-body);
    margin: 0 0 14px;
    max-width: none;
}
.vn-content .com-content-article__body .vn-kai__lead strong {
    color: var(--vn-navy);
    font-weight: 600;
}

.vn-content .com-content-article__body .vn-kai__link {
    color: var(--vn-red);
    font-weight: 600;
    border: 0;
    border-bottom: 1px solid rgba(184, 25, 46, .3);
}
.vn-content .com-content-article__body .vn-kai__link:hover {
    color: var(--vn-red);
    border-bottom-color: var(--vn-red);
}

.vn-content .com-content-article__body .vn-kai__box {
    background: var(--vn-surface);
    border: 1px solid #e3ddd2;
    border-radius: 11px;
    padding: 13px 15px;
    margin-bottom: 14px;
}
.vn-content .com-content-article__body .vn-kai__prompt {
    display: block;
    font-family: var(--vn-sans);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--vn-ink-deep);
}

.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: var(--vn-sans);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    padding: 12px 18px;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s ease;
}

/* !important: the generic article-body `a` and `a:hover` rules tie this
   selector's specificity, so source order alone is not enough - the hovered
   Open button went red-on-red. */
.vn-content .com-content-article__body .vn-kai__copy,
.vn-content .com-content-article__body .vn-kai__copy:hover {
    background: var(--vn-navy) !important;
    color: var(--vn-page) !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: var(--vn-steel) !important;
    color: #fff !important;
}
.vn-content .com-content-article__body .vn-kai__open:hover {
    background: var(--vn-steel-hover) !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%; }
}

/* --------------------------------------------------------------------------
   Article Prev/Next pagination (com_content emits .pagination-prev /
   .pagination-next as .btn.btn-sm inside .pagination). Joomla also emits
   empty span siblings for the disabled ends, which render as blank boxes
   without Bootstrap.
   -------------------------------------------------------------------------- */

.vn-content .pagination .btn,
.vn-content .com-content-article__navigation .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 18px;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-btn);
    background: var(--vn-surface);
    color: var(--vn-navy);
    font-family: var(--vn-sans);
    font-size: 14px;
    font-weight: 600;
}
.vn-content .pagination .btn:hover { border-color: var(--vn-red); color: var(--vn-red); }

/* Blank boxes: an empty .page-link or a list item with no text at all */
.vn-content .pagination li:not(:has(a)):not(:has(span:not(:empty))) { display: none; }
.vn-content .pagination .page-link:empty,
.vn-content .pagination span:empty { display: none; }

/* Keep the editorial row arrow close to its title instead of pinned to the
   far edge of the column. */
.vn-bottom .mod1 li a {
    grid-template-columns: minmax(0, max-content) auto;
    justify-content: start;
}
.vn-bottom .mod1 li a::after { margin-left: 4px; }

/* --------------------------------------------------------------------------
   "The Travel Book" sidebar module (id 133) hardcodes `font-family: 'Inter'`
   in its own inline CSS. v3 dropped Inter, so those three declarations fall
   back to a system sans and read as a different typeface beside Schibsted
   Grotesk everywhere else. Retarget them without touching the module, which
   is content-managed and would lose the change on any edit.
   -------------------------------------------------------------------------- */

.vn-book-promo,
.vn-book-promo * {
    font-family: var(--vn-sans);
}
.vn-book-promo h1,
.vn-book-promo h2,
.vn-book-promo h3,
.vn-book-promo h4,
.vn-book-promo__title,
.vn-book-promo__price {
    font-family: var(--vn-serif);
}

/* Its smallest labels sit at 8.8-10px, below the 12px floor used everywhere
   else in the template. Lift the floor without disturbing the layout. */
.vn-book-promo__cta-save,
.vn-book-promo__preview-badge { font-size: 10.5px; letter-spacing: 0.4px; }
.vn-book-promo__preview-meta,
.vn-book-promo__formats,
.vn-book-promo__previews-label { font-size: 11.5px; }

/* --------------------------------------------------------------------------
   "Where to Stay" - Stay22 hotel cards injected by vnstay22map.

   The plugin's own CSS sets `.goa-hotels__title { font-family: var(--f-body) }`
   at weight 800, which under v3 resolves to Schibsted Grotesk - correct family,
   wrong voice for a section heading. Match the other article section titles.

   Not visible on the local test stack (the Stay22 data is not in the local DB
   snapshot); verified against production, where it renders identically under
   both templates.
   -------------------------------------------------------------------------- */

.vn-article .goa-hotels__title,
.vn-content .com-content-article__body .goa-hotels__title {
    font-family: var(--vn-serif) !important;
    font-size: 31px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px;
    color: var(--vn-navy) !important;
    margin: 38px 0 16px !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    display: flex;
    align-items: center;
    gap: 13px;
}
.vn-article .goa-hotels__title::before {
    content: "";
    width: 5px;
    height: 27px;
    background: var(--vn-red);
    flex: 0 0 auto;
    border-radius: 1px;
}

/* The plugin gives thumbs a 16/10 ratio; the generic article-image rule adds
   vertical margins and a shadow that break the card. Reset inside the card. */
.vn-content .com-content-article__body .goa-hotels__thumb {
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: var(--vn-r-list) var(--vn-r-list) 0 0 !important;
}
.vn-content .com-content-article__body .goa-hotels__card {
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-list);
    overflow: hidden;
    background: var(--vn-surface);
    transition: border-color .18s ease, transform .18s ease;
}
.vn-content .com-content-article__body .goa-hotels__card:hover {
    border-color: #dccfc6;
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Tag listings (theme pages, 25 of them).

   com_tags emits `table.com-tags-tag-list__category` - a different container
   from com_content's `.com-content-category__table`, so it needs its own
   reshape. Same card grid, left-aligned, no centred table cells.
   -------------------------------------------------------------------------- */

.vn-content table.com-tags-tag-list__category {
    display: block;
    width: 100%;
    border: 0;
    margin: 8px 0 0;
    background: none;
}
.vn-content table.com-tags-tag-list__category thead,
.vn-content table.com-tags-tag-list__category caption { display: none; }

.vn-content table.com-tags-tag-list__category tbody {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.vn-content table.com-tags-tag-list__category tr,
.vn-content table.com-tags-tag-list__category.table-striped > tbody > tr:nth-of-type(2n+1) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
    background: var(--vn-surface) !important;
    border: 1px solid var(--vn-line);
    border-radius: 12px;
    padding: 20px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vn-content table.com-tags-tag-list__category tr:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -22px rgba(14, 34, 64, .4);
    border-color: #dccfc6;
}

.vn-content table.com-tags-tag-list__category th,
.vn-content table.com-tags-tag-list__category td {
    display: block;
    width: auto;
    border: 0;
    padding: 0;
    background: none;
    text-align: left;
    font-weight: 400;
}

.vn-content table.com-tags-tag-list__category .list-title a {
    font-family: var(--vn-serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--vn-navy);
}
.vn-content table.com-tags-tag-list__category .list-title a:hover { color: var(--vn-red); }
.vn-content table.com-tags-tag-list__category .list-date,
.vn-content table.com-tags-tag-list__category .list-author {
    font-size: 12px;
    color: var(--vn-faint);
    font-weight: 500;
}

@media (max-width: 760px) {
    .vn-content table.com-tags-tag-list__category tbody { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   RAIL LAW (Claude Design, v3 gaps response)

   No dark cards in the rail. Ever. The rail is a quiet column of white cards;
   colour lives in the button inside each one. Before this, a municipality page
   carried a navy Cruise card + a red AI Planner + the navy footer - three
   darks, against a system that allows two.

   The sidebar modules are content-managed and carry heavy inline styles, so
   these override rather than edit them (a module edit would be lost on any
   admin save).

   Rules:
     - White #fff, or --vn-alt for a non-partner card (the Travel Book).
     - One card, one action: a single steel button, or one hairline group of
       partner rows. Never both.
     - Same anatomy: red eyebrow, optional serif title, one line of grey
       support copy, then the action. 22px padding, 16px radius, 14px gap.
     - Red appears once in the rail: the All deals bar.
   -------------------------------------------------------------------------- */

.vn-rail { gap: 14px; }

/* Lift every card onto the light ground, whatever the module hardcoded. */
.vn-rail .vn-side-card,
.vn-rail .vn-side-card[style] {
    background: var(--vn-surface) !important;
    border: 1px solid var(--vn-line) !important;
    border-radius: var(--vn-r-mod) !important;
    padding: 22px !important;
    color: var(--vn-navy) !important;
}

/* The Travel Book is not a partner card - tinted, not white. */
.vn-rail .vn-side-book-promo,
.vn-rail .vn-book-promo {
    background: var(--vn-alt) !important;
}

/* Cruise card: was navy with a cream button. Now white with a steel button,
   and its decorative ship watermark retinted so it still reads. */
.vn-rail .vn-side-cruise,
.vn-rail .vn-side-cruise[style] {
    background: var(--vn-surface) !important;
    border-color: var(--vn-line) !important;
    color: var(--vn-navy) !important;
}
.vn-rail .vn-side-cruise h3,
.vn-rail .vn-side-cruise h3[style] { color: var(--vn-navy) !important; }
.vn-rail .vn-side-cruise p,
.vn-rail .vn-side-cruise p[style] { color: var(--vn-muted) !important; }
.vn-rail .vn-side-cruise > svg path { fill: var(--vn-navy) !important; }
.vn-rail .vn-side-cruise > svg { opacity: 0.06 !important; }
.vn-rail .vn-side-cruise span[style] {
    background: var(--vn-steel) !important;
    color: #fff !important;
}

/* AI Planner: was a solid red block. Now a white card with a steel action. */
.vn-rail .vn-side-aiplanner,
.vn-rail .vn-side-aiplanner[style] {
    background: var(--vn-surface) !important;
    border-color: var(--vn-line) !important;
    color: var(--vn-navy) !important;
    padding: 18px 20px !important;
}
.vn-rail .vn-side-aiplanner:hover {
    background: #fffdfa !important;
    border-color: #dccfc6 !important;
}
.vn-rail .vn-side-aiplanner span[style] { color: var(--vn-navy) !important; }
.vn-rail .vn-side-aiplanner span span[style]:last-child { color: var(--vn-muted) !important; }
.vn-rail .vn-side-aiplanner svg path { fill: var(--vn-steel) !important; }

/* "Things to do" partner buttons were two navy fills; make them one hairline
   group so the card ends in a single action, per the law. */
.vn-rail .vn-side-ttd a[style*="background:#1b3a6b"],
.vn-rail .vn-side-ttd a[style*="background:#0e2240"] {
    background: var(--vn-surface) !important;
    color: var(--vn-navy) !important;
    border: 1px solid var(--vn-line) !important;
}
.vn-rail .vn-side-ttd a[style*="background:#1b3a6b"]:hover,
.vn-rail .vn-side-ttd a[style*="background:#0e2240"]:hover {
    border-color: var(--vn-red) !important;
    color: var(--vn-red) !important;
}

/* The All deals bar keeps its red - the rail's one red fill. */
.vn-rail .vn-side-book a[style*="background:#b8192e"],
.vn-rail .vn-side-book a[style*="background:#d41e35"] {
    background: var(--vn-red) !important;
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   com_tags renders its own <h1> ("🍴 Food & Drink") above the list, which
   duplicates the designed page head. Hide it; the emoji is lifted into the
   designed heading by index.php so the icon is not lost.
   -------------------------------------------------------------------------- */

.com_tags .vn-content .com-tags-tag-list > h1,
.com_tags .vn-content .tag-category > h1 { display: none; }

.vn-h1__icon {
    font-size: 0.62em;
    line-height: 1;
    margin-right: 0.28em;
    vertical-align: 0.08em;
}

/* --------------------------------------------------------------------------
   Search results (com_finder).

   Joomla's finder output is raw: a bordered "Search Terms" fieldset, a block
   of syntax help, four "Search All" filter selects, a Sort By list that
   renders as full-width cards, and per-result Type/Author/Category metadata
   that stacks into boxes. None of it is styled by core without Bootstrap.

   This reduces it to the v3 listing pattern: one search field, a result count,
   and a card per result. The advanced filters and syntax help are hidden -
   they are Joomla's defaults, not something this site asks for.
   -------------------------------------------------------------------------- */

/* Kill the raw chrome */
.com_finder .vn-content fieldset,
.com_finder .vn-content .com-finder__advanced,
.com_finder .vn-content .search-explained,
.com_finder .vn-content #search-query-explained,
.com_finder .vn-content .com-finder__explained,
.com_finder .vn-content legend { display: none; }

/* The finder search form: one hairline field + one steel button */
.com_finder .vn-content .com-finder__form,
.com_finder .vn-content form.com-finder__form {
    margin: 0 0 30px;
}
.com_finder .vn-content .com-finder__search {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 560px;
}
.com_finder .vn-content input[type="text"],
.com_finder .vn-content input[type="search"] {
    flex: 1;
    background: var(--vn-surface);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-btn);
    padding: 13px 16px;
    font-family: inherit;
    font-size: 15px;
    color: var(--vn-ink);
}
.com_finder .vn-content input[type="text"]:focus,
.com_finder .vn-content input[type="search"]:focus {
    outline: none;
    border-color: var(--vn-steel);
}
.com_finder .vn-content button[type="submit"],
.com_finder .vn-content .btn-primary {
    background: var(--vn-steel);
    color: #fff;
    border: 0;
    border-radius: var(--vn-r-btn);
    padding: 13px 24px;
    font-family: var(--vn-sans);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.com_finder .vn-content button[type="submit"]:hover { background: var(--vn-steel-hover); }

/* "Advanced Search" toggle and the filter selects are Joomla defaults */
.com_finder .vn-content .com-finder__advanced-toggle,
.com_finder .vn-content button.js-finder-advanced-toggle { display: none; }

/* Result count line */
.com_finder .vn-content .com-finder__results > p:first-child,
.com_finder .vn-content .search-results-count,
.com_finder .vn-content .counter {
    font-size: 14px;
    color: var(--vn-muted);
    margin: 0 0 24px;
}

/* Sort By: a quiet inline row, not a stack of cards */
.com_finder .vn-content .com-finder__orderby,
.com_finder .vn-content .search-order {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    font-size: 13.5px;
    color: var(--vn-muted);
}
.com_finder .vn-content .com-finder__orderby ul,
.com_finder .vn-content .search-order ul {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}
.com_finder .vn-content .com-finder__orderby li,
.com_finder .vn-content .search-order li {
    background: none;
    border: 0;
    padding: 0;
}
.com_finder .vn-content .com-finder__orderby a,
.com_finder .vn-content .search-order a {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--vn-line);
    border-radius: 999px;
    background: var(--vn-surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--vn-navy);
}
.com_finder .vn-content .com-finder__orderby a:hover,
.com_finder .vn-content .search-order a:hover {
    border-color: var(--vn-red);
    color: var(--vn-red);
}

/* Results: one card each */
.com_finder .vn-content .com-finder__results ul,
.com_finder .vn-content .search-results {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
    list-style: none;
    margin: 0;
    padding: 0;
}
.com_finder .vn-content .com-finder__results ul > li,
.com_finder .vn-content .search-results > li,
.com_finder .vn-content .result {
    background: var(--vn-surface);
    border: 1px solid var(--vn-line);
    border-radius: 12px;
    padding: 20px 22px;
    margin: 0;
    transition: border-color .18s ease, transform .18s ease;
}
.com_finder .vn-content .com-finder__results ul > li:hover,
.com_finder .vn-content .search-results > li:hover {
    border-color: #dccfc6;
    transform: translateY(-2px);
    background: var(--vn-surface);
}

.com_finder .vn-content .result__title,
.com_finder .vn-content .result-title {
    font-family: var(--vn-serif);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 6px;
}
.com_finder .vn-content .result__title a { color: var(--vn-navy); }
.com_finder .vn-content .result__title a:hover { color: var(--vn-red); }

.com_finder .vn-content .result__body,
.com_finder .vn-content .result-text {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--vn-muted);
    margin: 0;
    max-width: 78ch;
}

/* Per-result Type / Author / Category metadata: one quiet line, not boxes */
.com_finder .vn-content .result__taxonomy,
.com_finder .vn-content .result-category,
.com_finder .vn-content dl.result__taxonomy {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12.5px;
    color: var(--vn-faint);
}
.com_finder .vn-content .result__taxonomy dt,
.com_finder .vn-content .result__taxonomy dd,
.com_finder .vn-content .result__taxonomy li {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-weight: 400;
}
.com_finder .vn-content .result__taxonomy ul {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

/* Empty state - offer a way onward rather than a dead end */
.com_finder .vn-content .com-finder__noresults,
.com_finder .vn-content .search-no-results {
    background: var(--vn-alt);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-mod);
    padding: 32px;
    text-align: center;
    font-size: 16px;
    color: var(--vn-muted);
}

/* --------------------------------------------------------------------------
   Bottom band details carried over from the previous design: the red tick
   before "Only in Norway", the shield watermark behind the Take a Chance
   card, and pill rows inside it. Both the tick and shield are injected by
   js/template.js. No numerals - the v3 index is deliberately unranked.
   -------------------------------------------------------------------------- */

.vn-band-tick {
    width: 5px;
    height: 27px;
    background: var(--vn-red);
    border-radius: 3px;
    flex: 0 0 auto;
}

.vn-band-card { position: relative; overflow: hidden; }
.vn-band-card__shield {
    position: absolute;
    right: -34px;
    bottom: -40px;
    width: 150px;
    height: 150px;
    opacity: 0.035;
    pointer-events: none;
}
.vn-band-card__shield path { fill: var(--vn-navy) !important; }
.vn-band-card__sub,
.vn-band-card ul { position: relative; }

/* Pill rows rather than hairline-separated lines */
.vn-band-card li { border-bottom: 0; }
.vn-band-card li + li { margin-top: 8px; }
.vn-band-card li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 15px;
    background: var(--vn-surface);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-list);
    font-family: var(--vn-serif);
    font-size: 17px;
    line-height: 1.3;
    color: var(--vn-navy);
}
.vn-band-card li a:hover {
    background: #fffdfa;
    border-color: #dccfc6;
    color: var(--vn-red);
}
.vn-band-card li a::after {
    content: "→";
    font-family: var(--vn-sans);
    font-size: 14px;
    color: var(--vn-red);
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   com_finder, corrected against the real markup.

   The sorting control is a Bootstrap dropdown (button + .dropdown-menu) that
   needs JS the site does not load, so the menu renders permanently open as a
   stack of full-width cards. Hide the menu, keep the button as a label.

   Taxonomy is `ul.result__taxonomy > li`, not a <dl>.
   -------------------------------------------------------------------------- */

/* Search form fieldset: strip the box, keep the field */
.com_finder .vn-content #search-form fieldset,
.com_finder .vn-content .com-finder__search fieldset,
.com_finder .vn-content form fieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 28px !important;
    background: none !important;
}
.com_finder .vn-content form label[for="search-searchword"],
.com_finder .vn-content #search-form label { display: none; }

.com_finder .vn-content .btn-toolbar,
.com_finder .vn-content .input-group {
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: 560px;
}
.com_finder .vn-content .btn-secondary[type="button"] {
    background: var(--vn-surface);
    color: var(--vn-navy);
    border: 1px solid var(--vn-line-firm);
    border-radius: var(--vn-r-btn);
    padding: 12px 18px;
    font-family: var(--vn-sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Sorting: the dropdown menu has no JS, so it renders open. Hide it. */
.com_finder .vn-content .sorting__list,
.com_finder .vn-content .dropdown-menu { display: none !important; }

.com_finder .vn-content .com-finder__sorting { margin: 0 0 22px; }
.com_finder .vn-content .sorting {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--vn-muted);
}
.com_finder .vn-content #sorting_btn,
.com_finder .vn-content .dropdown-toggle {
    background: var(--vn-surface);
    color: var(--vn-navy);
    border: 1px solid var(--vn-line);
    border-radius: 999px;
    padding: 7px 15px;
    font-family: var(--vn-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Result taxonomy: one quiet inline row */
.com_finder .vn-content ul.result__taxonomy {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    background: none;
    border: 0;
}
.com_finder .vn-content ul.result__taxonomy > li,
.com_finder .vn-content .result__taxonomy-item {
    display: inline-flex;
    gap: 5px;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12.5px;
    color: var(--vn-faint);
    transform: none !important;
}
.com_finder .vn-content ul.result__taxonomy > li:hover { transform: none !important; }
.com_finder .vn-content .result__taxonomy-item span { font-weight: 600; }

/* The result list itself */
.com_finder .vn-content #search-result-list,
.com_finder .vn-content .com-finder__results-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.com_finder .vn-content .result__item,
.com_finder .vn-content #search-result-list > li {
    background: var(--vn-surface);
    border: 1px solid var(--vn-line);
    border-radius: 12px;
    padding: 20px 22px;
    margin: 0;
}
.com_finder .vn-content .result__item:hover { border-color: #dccfc6; }

/* ==========================================================================
   IN-CONTENT TOOL LAW (Claude Design, consistency response)

   Rail cards are white so they recede behind the article. In-content tools
   need the opposite: they read as an inset instrument, distinct from the
   prose around them.

     - Ground #f5f3ee, 1px #e7e2da, 16px radius, 24-26px padding.
       Never white, never dark.
     - Inputs invert to #fff at 10px radius. That inversion is what makes it
       read as a tool.
     - One 44px glyph tile: white, 1px hairline, steel sparkle. This is the
       family badge across all three AI touchpoints.
     - Two actions, never mirrored. Copy is white + #d6d1c7 hairline; the
       outbound is steel. Red never appears in an AI tool.
     - Selected state is navy (a state), never steel (an action).
     - Widget CSS must not declare a font-family, so Schibsted applies.

   Covers: .vn-kai (municipality), .vntp__* + .goa-planner__* (theme pages
   and the planner), and .vn-amzn-strip as a partner block.
   ========================================================================== */

/* ---- shared: the family ground -------------------------------------- */

.vn-content .com-content-article__body .vn-kai,
.vn-content .vntp,
.vn-content .goa-planner,
.vn-content .vn-amzn-strip {
    background: var(--vn-alt);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-mod);
    padding: 26px;
    margin: 28px 0 0;
}

/* Fonts are inherited, not set - the widgets declare their own families. */
.vn-content .vntp,
.vn-content .vntp *,
.vn-content .goa-planner,
.vn-content .goa-planner *,
.vn-content .vn-amzn-strip,
.vn-content .vn-amzn-strip * {
    font-family: var(--vn-sans) !important;
}
.vn-content .vntp h2,
.vn-content .vntp h3,
.vn-content .goa-planner h2,
.vn-content .goa-planner h3,
.vn-content .vn-amzn-strip h2,
.vn-content .vn-amzn-strip h3 {
    font-family: var(--vn-serif) !important;
}

/* ---- the glyph tile: one badge for the whole family ------------------ */

.vn-content .vn-kai__icon,
.vn-content .vntp__icon,
.vn-content .goa-planner__icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--vn-surface);
    border: 1px solid var(--vn-line);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vn-content .vn-kai__icon svg path { fill: var(--vn-steel); }

/* ---- inputs invert to white ----------------------------------------- */

.vn-content .vn-kai__box,
.vn-content .vntp__prompt,
.vn-content .vntp__box,
.vn-content .goa-planner__prompt,
.vn-content .goa-planner__box {
    background: var(--vn-surface) !important;
    border: 1px solid #e3ddd2 !important;
    border-radius: var(--vn-r-list) !important;
    padding: 13px 15px;
}

/* ---- labels, counters, helper copy ----------------------------------- */

.vn-content .goa-planner__label,
.vn-content .vntp__label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--vn-faint) !important;
}
.vn-content .goa-planner__count,
.vn-content .vntp__count {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    color: var(--vn-faint) !important;
}
.vn-content .goa-planner__sub,
.vn-content .vntp__sub {
    font-size: 14.5px !important;
    line-height: 1.65;
    color: var(--vn-muted) !important;
}
.vn-content .goa-planner__meta,
.vn-content .vntp__meta {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--vn-faint) !important;
}

/* ---- option pills: selected state is navy, never steel --------------- */

.vn-content .vntp__opt,
.vn-content .goa-planner__opt {
    background: var(--vn-surface) !important;
    border: 1px solid var(--vn-line) !important;
    border-radius: 999px !important;
    padding: 11px 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--vn-navy) !important;
    min-height: 44px;
    cursor: pointer;
}
.vn-content .vntp__opt:hover,
.vn-content .goa-planner__opt:hover { border-color: var(--vn-line-firm) !important; }

.vn-content .vntp__opt.active,
.vn-content .vntp__opt[aria-pressed="true"],
.vn-content .goa-planner__opt.active {
    background: var(--vn-navy) !important;
    border-color: var(--vn-navy) !important;
    color: #fff !important;
}

/* .goa-k-full / .goa-k-short are the long and short LABELS inside the one
   Kayak button - the plugin shows one or the other per viewport. They were
   mistaken for a Short/Full toggle and boxed as white pills, which put a
   white navy-text pill inside the steel button. Plain text, nothing else.
   display is left to the plugin, which is what switches the two labels. */
.vn-content .goa-k-short,
.vn-content .goa-k-full {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}

/* ---- two actions, never mirrored ------------------------------------ */

.vn-content .vntp__copy,
.vn-content .goa-planner__copy,
.vn-content .com-content-article__body .vn-kai__copy {
    background: var(--vn-surface) !important;
    border: 1px solid var(--vn-line-firm) !important;
    color: var(--vn-navy) !important;
    border-radius: 9px !important;
    padding: 12px 18px !important;
    min-height: 44px;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer;
}
.vn-content .vntp__copy:hover,
.vn-content .goa-planner__copy:hover,
.vn-content .com-content-article__body .vn-kai__copy:hover {
    background: var(--vn-alt) !important;
    border-color: var(--vn-navy) !important;
    color: var(--vn-navy) !important;
}

.vn-content .vntp__kayak,
.vn-content a.vntp__kayak,
.vn-content .goa-planner__kayak,
.vn-content a.goa-planner__kayak,
.vn-content .com-content-article__body a.goa-planner__kayak,
.vn-content .vntp__open,
.vn-content .goa-planner__open,
.vn-content .com-content-article__body .vn-kai__open {
    background: var(--vn-steel) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 9px !important;
    padding: 12px 18px !important;
    min-height: 44px;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}
.vn-content .vntp__kayak:hover,
.vn-content a.vntp__kayak:hover,
.vn-content .goa-planner__kayak:hover,
.vn-content a.goa-planner__kayak:hover,
.vn-content .com-content-article__body a.goa-planner__kayak:hover,
.vn-content .vntp__open:hover,
.vn-content .goa-planner__open:hover,
.vn-content .com-content-article__body .vn-kai__open:hover {
    background: var(--vn-steel-hover) !important;
    color: #fff !important;
}

/* ---- .vn-amzn-strip: a partner block, not a tool --------------------- */

.vn-content .vn-amzn-strip__head {
    font-family: var(--vn-serif) !important;
    font-size: 21px !important;
    font-weight: 500 !important;
    line-height: 1.25;
    color: var(--vn-navy) !important;
    margin: 0 0 8px !important;
}
.vn-content .vn-amzn-strip__disc {
    font-size: 11.5px !important;
    color: var(--vn-faint) !important;
}
/* The plugin sets background with !important on a longer selector, so match
   its specificity rather than relying on source order. */
.vn-content .vn-amzn-strip .vn-amzn-btn,
.vn-content a.vn-amzn-btn,
.vn-content .vn-amzn-btn {
    background: var(--vn-steel) !important;
    background-color: var(--vn-steel) !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--vn-r-btn) !important;
    min-height: 44px;
    padding: 12px 22px !important;
    font-weight: 600 !important;
}
.vn-content .vn-amzn-btn:hover { background: var(--vn-steel-hover) !important; }

@media (max-width: 560px) {
    .vn-content .com-content-article__body .vn-kai,
    .vn-content .vntp,
    .vn-content .goa-planner,
    .vn-content .vn-amzn-strip { padding: 18px; }
}

/* --------------------------------------------------------------------------
   Control-height floor for the two remaining sub-44px controls. Padding only,
   so they look unchanged.
   -------------------------------------------------------------------------- */

.vn-footer .mod-syndicate,
a.mod-syndicate {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.vn-brand {
    min-height: 44px;
    align-items: center;
}

/* --------------------------------------------------------------------------
   Theme pages (CD sign-off):
     - the tag description becomes a standfirst under the H1, in the
       municipality lede treatment
     - the year is dropped from listing rows - it always reads 2026
     - the theme icon replaces it as the row's visual anchor
   -------------------------------------------------------------------------- */

.com_tags .vn-content .tag-body,
.com_tags .vn-content .com-tags-tag-list > p:first-of-type {
    font-family: var(--vn-serif);
    font-size: 21px;
    line-height: 1.6;
    color: var(--vn-navy-mid);
    max-width: 62ch;
    margin: 0 0 26px;
}

.vn-content table.com-tags-tag-list__category .list-date { display: none; }

.vn-content table.com-tags-tag-list__category tr { position: relative; }

/* Remaining .vntp parts, matched to the real class names in the plugin. */
.vn-content .vntp__title {
    font-family: var(--vn-serif) !important;
    font-size: 21px !important;
    font-weight: 500 !important;
    color: var(--vn-navy) !important;
}
.vn-content .vntp__summary-sub,
.vn-content .vntp__sub {
    font-size: 14.5px !important;
    line-height: 1.65;
    color: var(--vn-muted) !important;
}
.vn-content .vntp__preview {
    background: var(--vn-surface) !important;
    border: 1px solid #e3ddd2 !important;
    border-radius: var(--vn-r-list) !important;
}
.vn-content .vntp__count {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--vn-faint) !important;
}
.vn-content .vntp__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: stretch;
}

/* --------------------------------------------------------------------------
   Control-height floor, second pass. CD: 44px is the floor for anything that
   is a control. Inline links inside prose are exempt, but .vn-more and
   .vn-tlink are standalone actions, and the finder's field, buttons and
   select are controls.
   -------------------------------------------------------------------------- */

.vn-more,
.vn-tlink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.vn-burger { width: 44px; height: 44px; }

.com_finder .vn-content input[type="text"],
.com_finder .vn-content input[type="search"],
.com_finder .vn-content .js-finder-search-query,
.com_finder .vn-content .form-control {
    min-height: 44px;
}
.com_finder .vn-content .btn-secondary,
.com_finder .vn-content #sorting_btn,
.com_finder .vn-content .dropdown-toggle,
.com_finder .vn-content button[type="submit"] {
    min-height: 44px;
}
.vn-content select,
.vn-content .form-select {
    min-height: 44px;
    padding: 10px 12px;
}

/* Header search field, the colophon link and the sidebar city rows are the
   last three controls under the 44px floor. The header finder is outside the
   .com_finder page scope, so it needs its own rule. */
.vn-search input[type="text"],
.vn-search input[type="search"],
.vn-search .form-control { min-height: 44px; }

.vn-colophon a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.vn-rail .vn-side-ttd a[style*="padding:10px 0"],
.vn-rail .vn-side-card a[style*="border-bottom:1px solid #efe9e0"] {
    min-height: 44px;
}

/* Listing card titles: the card is the tap target, so let the link fill it
   rather than leaving an 18px hit box inside a 60px card. */
.com-content-category table.com-content-category__table .list-title,
.vn-content table.com-tags-tag-list__category .list-title { display: block; }

.com-content-category table.com-content-category__table .list-title a,
.vn-content table.com-tags-tag-list__category .list-title a {
    display: block;
    padding: 2px 0;
    min-height: 24px;
}
.com-content-category table.com-content-category__table tr::after,
.vn-content table.com-tags-tag-list__category tr::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Vertical rhythm between in-content modules.

   The plugins each carry their own margins (2.4rem, 1.5rem, 1rem...), so
   stacked modules ended up with inconsistent gaps - the tag description sat
   flush against the planner while the Amazon strip had 38px above and 16px
   below. One scale, applied at the container so plugin margins cannot fight
   each other:

     40px between in-content modules
     26px from a page head or standfirst into the first module
   -------------------------------------------------------------------------- */

.vn-content .vntp-wrap,
.vn-content .vn-amzn-strip,
.vn-content .com-tags-compact__items,
.vn-content .com-content-article__body .vn-kai {
    margin-top: 40px !important;
    margin-bottom: 0 !important;
}

/* The first module after the head or standfirst sits closer. */
.com_tags .vn-content > .com-tags-tag-list > *:first-child,
.com_tags .vn-content .tag-body + * {
    margin-top: 26px !important;
}

/* The listing grid gets the full module gap above it. */
.com_tags .vn-content form#adminForm,
.com-content-category .com-content-category__articles {
    margin-top: 40px;
}

/* The tag description is a standfirst - it belongs to the head, so it keeps a
   tight gap above and a full module gap below. */
.com_tags .vn-content .tag-body,
.com_tags .vn-content .com-tags-tag-list > p:first-of-type {
    margin-top: 0;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Defensive resets against the previous template's stylesheet.

   When previewed with ?templateStyle=, Joomla loads the default template's
   CSS as well, and it wins on source order. These neutralise the rules that
   visibly leak: the `01. 02.` numerals on bottom-band rows, the warm body
   background, and its typography defaults. Harmless once v3 is the default,
   since those selectors will not be present at all.
   -------------------------------------------------------------------------- */

.vn-bottom .mod1 .mod-articles-title a::before,
.vn-bottom .mod1 a.mod-articles-link::before,
.vn-bottom .mod-articles-items { content: none !important; counter-reset: none !important; }

.vn-bottom .mod1 .mod-articles-title a::before,
.vn-bottom .mod1 a.mod-articles-link::before { display: none !important; }

body.vn-site {
    /* The previous template sets `display:flex; flex-direction:column` on this
       same selector. In ?templateStyle= preview both stylesheets load and that
       rule wins on source order, turning every top-level <section> into a flex
       item that shrinks to its content - the page then renders ~740px wide
       inside a 2548px body with huge auto margins. Reset the box explicitly. */
    display: block !important;
    width: auto !important;
    min-height: 0;
    font-family: var(--vn-sans);
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--vn-ink);
    background: var(--vn-page);
}
body.vn-site > section,
body.vn-site > div,
body.vn-site > header,
body.vn-site > footer { width: auto; flex: none; }

body.vn-site h1,
body.vn-site h2,
body.vn-site h3 { font-family: var(--vn-serif); }

/* --------------------------------------------------------------------------
   Image-only rail cards (the worldheritageX banner).

   The rail law gives every card 22px padding and a white ground, which is
   right for content cards but wrong for a full-bleed banner - the image ends
   up inset with a white frame around it, reading as an empty box. A module
   whose only content is an image gets no padding and no chrome.
   -------------------------------------------------------------------------- */

.vn-rail .moduletable:has(> .mod-custom > a.vn-side-whx),
.vn-rail .moduletable:has(> .mod-custom > a > img:only-child) {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    overflow: hidden;
    border-radius: var(--vn-r-mod);
}

.vn-rail .vn-side-whx,
.vn-rail .vn-side-whx[style] {
    display: block !important;
    padding: 0 !important;
    border: 1px solid var(--vn-line) !important;
    background: var(--vn-surface) !important;
    border-radius: var(--vn-r-mod) !important;
    overflow: hidden;
    line-height: 0;
}
.vn-rail .vn-side-whx img {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   Listing pages, review fixes.

   1. The breadcrumb and the collection eyebrow printed on top of each other:
      .vn-crumbs has no bottom spacing and .vn-pagehead pulls up against it.
   2. Every card showed "2026" - the same noise CD had us drop on theme pages.
   3. The "Display #" select floated alone above the grid.
   -------------------------------------------------------------------------- */

.vn-crumbs { padding-bottom: 10px; }
.vn-crumbs + .vn-pagehead,
.vn-crumbs + .vn-main { padding-top: 18px; }

/* Listing cards carry the publish date under the title (override in
   html/com_content/category/default_articles.php prints publish_up in full). */
.com-content-category table.com-content-category__table .list-date {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vn-faint);
    letter-spacing: 0.1px;
}
.com-content-category table.com-content-category__table .list-date time { white-space: nowrap; }

/* Limit select: sits inline with the result count, right-aligned, quiet. */
.com-content-category__pagination.btn-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    float: none;
}
.com-content-category__pagination select,
.com-content-category select.form-select {
    width: auto;
    min-width: 76px;
    font-size: 13px;
}

/* The limit select sat in ~90px of dead space above the grid. Pull it up to
   sit tight against the collection head. */
.com-content-category .com-content-category__articles { margin-top: 0; }
.com-content-category__pagination.btn-group { margin: -6px 0 10px; }

/* ==========================================================================
   LAUNCH PASS - fixes from reviewing all 36 renders
   ========================================================================== */

/* --- 1. Info/prose pages (about, contact, privacy) ----------------------
   The component's <h1> was browser-default and prose ran the full rail. */

.com_content.view-article:not(.vn-muni):not(.vn-county):not(.vn-home) .vn-content .page-header h1,
.vn-body--full .vn-content .com-content-article__body > h1,
.vn-body--full .vn-content .com-content-article h1,
.vn-content .com-content-article > .page-header h1 {
    font-family: var(--vn-serif);
    font-weight: 400;
    font-size: 47px;
    line-height: 1.08;
    letter-spacing: -1px;
    color: var(--vn-navy);
    margin: 0 0 22px;
}

/* Prose pages get a readable measure even without the article treatment. */
.vn-body--full .vn-content .com-content-article__body > p,
.vn-body--full .vn-content .com-content-article__body > ul,
.vn-body--full .vn-content .com-content-article__body > ol { max-width: 68ch; }

/* --- 2. Themes hub: a grid, not a 23-row column ------------------------- */

.com_tags.view-tags .vn-content .com-tags__category,
.com_tags.view-tags .vn-content .com-tags__items > ul,
.com_tags.view-tags .vn-content .com-tags-tags__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--vn-line);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-mod);
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}
.com_tags.view-tags .vn-content .com-tags__category > li,
.com_tags.view-tags .vn-content .com-tags-tags__items > li {
    background: var(--vn-surface);
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
.com_tags.view-tags .vn-content .com-tags__category > li > a,
.com_tags.view-tags .vn-content li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--vn-navy);
}
.com_tags.view-tags .vn-content li > a:hover {
    background: #faf8f4;
    color: var(--vn-red);
}

@media (max-width: 1080px) {
    .com_tags.view-tags .vn-content .com-tags__category,
    .com_tags.view-tags .vn-content .com-tags__items > ul,
    .com_tags.view-tags .vn-content .com-tags-tags__items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .com_tags.view-tags .vn-content .com-tags__category,
    .com_tags.view-tags .vn-content .com-tags__items > ul,
    .com_tags.view-tags .vn-content .com-tags-tags__items { grid-template-columns: 1fr; }
}

/* --- 3. Trailing dead space before the bottom band ---------------------- */

.vn-main { padding-bottom: 0; }
.vn-main > .vn-pad > .vn-body { padding-bottom: 8px; }

/* --- 4. Broken/blocked images must not leave a tall empty box ----------- */

.vn-content .com-content-article__body img[src=""],
.vn-content .com-content-article__body img:not([src]) { display: none; }

/* --- 5. Planner page needs a head like every other page type ------------ */

.com_content .vn-content .com-content-article > .page-header { margin-bottom: 8px; }

/* The in-article planner's action row let its buttons grow to 63px because the
   plugin sets a line-height on the wrapping spans. Pin both to the 44px scale. */
.vn-content .goa-planner__actions,
.vn-content .vntp__actions { align-items: center; }

.vn-content .goa-planner__kayak,
.vn-content a.goa-planner__kayak,
.vn-content .com-content-article__body a.goa-planner__kayak,
.vn-content .goa-planner__copy,
.vn-content .vntp__kayak,
.vn-content .vntp__copy {
    min-height: 44px;
    height: auto;
    line-height: 1.2 !important;
    align-items: center;
    justify-content: center;
}

/* The themes hub nests each link inside an <h3> in a .list-group-item, so the
   tile styling has to reach through both. */
.com_tags.view-tags .vn-content .com-tags__category > li { display: flex; }
.com_tags.view-tags .vn-content .com-tags__category h3 {
    margin: 0;
    width: 100%;
    font-family: var(--vn-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}
.com_tags.view-tags .vn-content .com-tags__category h3 > a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 64px;
    padding: 16px 20px;
    color: var(--vn-navy);
}
.com_tags.view-tags .vn-content .com-tags__category h3 > a:hover {
    background: #faf8f4;
    color: var(--vn-red);
}

/* Pagination: Joomla renders disabled prev/next as empty <span class="page-link">
   which shows as blank boxes at the end of the row. */
.com-content-category .pagination li.disabled,
.com-content-category .pagination .page-link:empty,
.vn-content .pagination li:not(:has(a)):not(:has(span:not(:empty))) { display: none; }

/* Result count sits with the limit select, not adrift. */
.com-content-category__counter { font-size: 13px; color: var(--vn-faint); }
.com-content-category .com-content-category__navigation { margin-bottom: 4px; }

/* Next/last arrows use icon-font spans site-wide, not only inside
   .com-content-category. Give them real characters everywhere. */
.vn-content .pagination [class*="icon-angle"] { font-style: normal; line-height: 1; }
.vn-content .pagination .icon-angle-double-left::before  { content: "\00AB"; }
.vn-content .pagination .icon-angle-left::before         { content: "\2039"; }
.vn-content .pagination .icon-angle-right::before        { content: "\203A"; }
.vn-content .pagination .icon-angle-double-right::before { content: "\00BB"; }

/* The icon span is empty and inline, so its ::before had no box to paint in.
   Give it one; the arrow then renders in place of the missing icon font. */
.vn-content .pagination [class*="icon-angle"] {
    display: inline-block;
    min-width: 1em;
    font-size: 16px;
    font-weight: 600;
}

/* Pagination arrows, final approach: the icon spans are empty and
   aria-hidden, and their ::before would not paint reliably. Hide the span
   and put the character on the link itself, chosen by the span's class. */
.vn-content .pagination [class*="icon-angle"] { display: none !important; }

.vn-content .pagination .page-link:has(.icon-angle-double-left)::after  { content: "\00AB"; }
.vn-content .pagination .page-link:has(.icon-angle-left)::after         { content: "\2039"; }
.vn-content .pagination .page-link:has(.icon-angle-right)::after        { content: "\203A"; }
.vn-content .pagination .page-link:has(.icon-angle-double-right)::after { content: "\00BB"; }
.vn-content .pagination .page-link::after {
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    color: inherit;
}

/* Search pagination items were inheriting the result-card treatment (20px
   padding, 12px radius, border) because both are `li` inside .vn-content.
   Pagination is a control row, not a result. */
.com_finder .vn-content .pagination li,
.com_finder .vn-content .pagination li.page-item {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
}
.com_finder .vn-content .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
}
.com_finder .vn-content .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-btn);
    background: var(--vn-surface);
    color: var(--vn-navy);
    font-size: 14px;
    font-weight: 600;
}
.com_finder .vn-content .pagination .active .page-link {
    background: var(--vn-navy);
    color: #fff;
    border-color: var(--vn-navy);
}

/* The burger is a <button>; browsers do not inherit font-family into form
   controls, so it was rendering in Arial. Its icon is an SVG so this was
   invisible - but it is inconsistent, and any future label would show it. */
.vn-burger,
.vn-search input,
.vn-content button,
.vn-content input,
.vn-content select,
.vn-content textarea { font-family: var(--vn-sans); }

/* RSS link was 42px wide against the 44px floor. */
.vn-footer .mod-syndicate,
a.mod-syndicate {
    min-width: 44px;
    justify-content: flex-start;
}

/* mod_articles wraps each title in an <h5>, which keeps its browser-default
   ~23px top and bottom margin - about 46px of dead space per row. The rows
   were 108px tall for 23px of text because of it. */
.vn-bottom .mod-articles-title,
.vn-bottom h5.mod-articles-title,
.vn-band-card .mod-articles-title {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}
.vn-bottom .mod-articles-item,
.vn-bottom .mod-articles-item-content { margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   Class-name collisions with the previous template.

   Both templates define `.vn-grid`. In ?templateStyle= preview the old
   stylesheet loads second and wins, turning the 6-column 1px-gap themes grid
   into a 1-column 2rem-gap stack (it computed to "935.5px 230px, gap 32px").
   Re-assert ours with enough specificity to survive source order.

   Same reasoning as the body-flex reset above: harmless once v3 is default,
   necessary while previewing.
   -------------------------------------------------------------------------- */

body.vn-site .vn-grid {
    display: grid;
    gap: 1px;
    background: var(--vn-surface);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-mod);
    overflow: hidden;
}
body.vn-site .vn-grid--3 { grid-template-columns: repeat(3, 1fr); }
body.vn-site .vn-grid--4 { grid-template-columns: repeat(4, 1fr); }
body.vn-site .vn-grid--6 { grid-template-columns: repeat(6, 1fr); }
body.vn-site .vn-grid > * { background: var(--vn-surface); }

@media (max-width: 1080px) {
    body.vn-site .vn-grid--6 { grid-template-columns: repeat(3, 1fr); }
    body.vn-site .vn-grid--3,
    body.vn-site .vn-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    body.vn-site .vn-grid--6 { grid-template-columns: repeat(2, 1fr); }
    body.vn-site .vn-grid--3,
    body.vn-site .vn-grid--4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Preview-mode artefacts from the previous template.

   In ?templateStyle= preview the old template's template.js also runs and
   injects its own "Search" / "Surprise Me" pair into .vn-tac-actions, and its
   CSS adds a decorative ::after dash to bottom-band headings. Both duplicate
   what v3 already renders. Suppress them by their distinguishing classes so
   only our single "Surprise me" button remains.

   Harmless once v3 is the default - neither the old JS nor its CSS loads.
   -------------------------------------------------------------------------- */

.vn-bottom .vn-tac-btn--search,
.vn-bottom a.vn-tac-btn--search { display: none !important; }

/* Our button is .vn-btn; the old one is .vn-tac-btn. Where both exist, keep
   ours and drop theirs. */
.vn-bottom .vn-tac-actions .vn-tac-btn { display: none !important; }
.vn-bottom .vn-band-card .vn-tac-actions .vn-btn { display: inline-flex !important; }

/* The old template's second .vn-tac-actions sits outside the card. */
.vn-bottom .moduletable > .vn-tac-actions { display: none !important; }

/* Decorative dash after bottom-band headings. */
.vn-bottom .moduletable > h2::after,
.vn-bottom .moduletable > h3::after { content: none !important; display: none !important; }

/* --------------------------------------------------------------------------
   Homepage article body.

   The front-page menu item resolves to article 372: a lede paragraph plus a
   "Discover:" links line. The lede duplicated what the hero already says, so
   it is hidden; the Discover links stay and are promoted into a proper
   quick-links row - they are the only inline route to Only in Norway,
   Municipalities and Search on this page.

   Hidden rather than deleted, so the article text stays intact in the DB.
   -------------------------------------------------------------------------- */

.vn-home .vn-content .com-content-article__body > p:not(.vn-mobile-only) { display: none; }

.vn-home .vn-main { padding: 48px 0 0; }
.vn-home .vn-content { max-width: none; margin: 0; padding: 0; text-align: left; }

/* The source text is "Discover: A, B, C." Keeping the punctuation but styling
   the links up: the label and separators stay as written, the links become
   large serif with a hairline underline. No flex, so the sentence still reads
   as a sentence and nothing floats loose. */
.vn-home .vn-content p.vn-mobile-only {
    margin: 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--vn-line);
    font-family: var(--vn-sans);
    font-size: 15px;
    line-height: 2.2;
    color: var(--vn-faint);
    max-width: none;
}
.vn-home .vn-content p.vn-mobile-only a {
    font-family: var(--vn-serif);
    font-size: 21px;
    font-weight: 400;
    color: var(--vn-navy);
    border-bottom: 1px solid #cfc9bf;
    padding-bottom: 2px;
    margin: 0 0 0 4px;
}
.vn-home .vn-content p.vn-mobile-only a:hover {
    color: var(--vn-red);
    border-bottom-color: var(--vn-red);
}

@media (max-width: 560px) {
    .vn-home .vn-content p.vn-mobile-only a { font-size: 18px; }
}

/* ==========================================================================
   AUDIT PASS 2026-09-04 - defects found reviewing every page type at 1440,
   768 and 390 with the template set as the site default.
   ========================================================================== */

/* --- 1. Breadcrumbs: mod_breadcrumbs opens with a divider <li> holding an
   icon-font span the site never loads. It rendered as an empty first item, so
   the sibling rule put a stray chevron in front of the first crumb. --------- */

.vn-crumbs .mod-breadcrumbs__divider { display: none; }
.vn-crumbs .mod-breadcrumbs__divider + li::before { content: none; padding: 0; }
.vn-crumbs .mod-breadcrumbs__here { display: none; }
.vn-crumbs .mod-breadcrumbs__here + li::before { content: none; padding: 0; }

/* --- 2. Rail modules whose content is already a card (.vn-side-card) were
   framed twice: the module chrome (white, hairline, 22px) around the card's
   own white hairline box. The card is the frame; the module wrapper is not.
   Their module titles duplicate the card's own label, so they go too. ------ */

.vn-rail .moduletable:has(.vn-side-card) {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    border-radius: 0;
}
.vn-rail .moduletable:has(.vn-side-card) > h3,
.vn-rail .moduletable:has(.vn-side-card) > .card-header { display: none; }

/* --- 3. mod_articles in the rail ("Enjoy the trip") was browser-default:
   bold blue h4 links and an indented raw date from the <dl>. ---------------- */

.vn-rail .mod-articles-items,
.vn-rail ul.mod-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.vn-rail .mod-articles-items > li {
    padding: 11px 0;
    border-bottom: 1px solid var(--vn-line-soft);
}
.vn-rail .mod-articles-items > li:first-child { padding-top: 0; }
.vn-rail .mod-articles-items > li:last-child { padding-bottom: 0; border-bottom: 0; }
.vn-rail .mod-articles-item,
.vn-rail .mod-articles-item-content { margin: 0; padding: 0; }
.vn-rail .mod-articles-title {
    margin: 0 0 3px;
    font-family: var(--vn-serif);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.2px;
}
.vn-rail .mod-articles-title a { color: var(--vn-navy); font-weight: 400; }
.vn-rail .mod-articles-title a:hover { color: var(--vn-red); }
.vn-rail .mod-articles-items dl {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    font-size: 12.5px;
    color: var(--vn-faint);
}
.vn-rail .mod-articles-items dt,
.vn-rail .mod-articles-items dd { margin: 0; padding: 0; }
.vn-rail .mod-articles-items dt:empty { display: none; }

/* --- 4. Article Prev/Next. com_content emits <span class="pagination"> with
   an <a class="btn"> holding a plain <span>Prev</span>; the generic
   `.pagination span` box rule styled that inner span as a second button. --- */

.vn-content .pagenavigation .pagination a > span,
.vn-content .pagination a > span:not(.visually-hidden) {
    display: inline;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
}
.vn-content .pagenavigation [class*="icon-chevron"] { display: none !important; }
.vn-content .pagenavigation .pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 40px 0 0;
}
.vn-content .pagenavigation a.previous::before { content: "\2190"; font-size: 15px; }
.vn-content .pagenavigation a.next::after { content: "\2192"; font-size: 15px; }

/* --- 5. Search result metadata. Joomla's finder.css puts a "|" ::before on
   each taxonomy item and stretches it full width, so Type / Author / Category
   stacked as three lines each starting with a bar. One quiet line. --------- */

.com_finder .vn-content ul.result__taxonomy > li,
.com_finder .vn-content .result__taxonomy-item {
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
}
.com_finder .vn-content ul.result__taxonomy > li::before,
.com_finder .vn-content .result__taxonomy-item::before { content: none !important; display: none !important; }
.com_finder .vn-content ul.result__taxonomy > li + li::before {
    content: "\00B7" !important;
    display: inline !important;
    margin-right: 10px;
    color: var(--vn-line-firm);
}
.com_finder .vn-content ul.result__taxonomy,
.com_finder .vn-content .result__taxonomy { flex-direction: row !important; align-items: center; }
/* Every result is an article, so "Type: Article" is noise. Specificity has to
   beat the `ul > li` display rule above, which is also !important. */
.com_finder .vn-content ul.result__taxonomy > li.result__taxonomy--Type { display: none !important; }
.com_finder .vn-content ul.result__taxonomy > li.result__taxonomy--Type + li::before { content: none !important; display: none !important; }

/* --- 6. Plugin headings that ship their own red left border (vnads'
   .vn-affiliate-hd, vnamzn's .vntp__title) also received the article-h2
   tick, giving two red bars. The tick is the house style; the border goes. */

.vn-article h2.vn-affiliate-hd,
.vn-article h2.vntp__title,
.vn-content h2.vn-affiliate-hd,
.vn-content h2.vntp__title,
.vn-content .vntp-wrap > .vntp__title {
    border-left: 0 !important;
    padding-left: 0 !important;
}

/* --- 7. Amazon strip: its inner box carried an Amazon-gold tint and border
   inside the cream partner block. Neutral hairline, same as every inset. --- */

.vn-content .vn-amzn-strip__inner,
.vn-content .vn-amzn-strip .vn-amzn-strip__inner {
    border-color: var(--vn-line) !important;
    background: var(--vn-surface) !important;
    border-radius: var(--vn-r-list) !important;
}

/* --- 8. Collapsed theme-page planner (<details class="vntp vntp--drop">):
   the generic tool padding wrapped the summary bar in 26px on every side,
   so a one-line "tap to open" strip stood 110px tall. -------------------- */

.vn-content details.vntp--drop { padding: 0 !important; }
.vn-content details.vntp--drop > .vntp__summary {
    padding: 15px 22px;
    min-height: 44px;
    font-family: var(--vn-sans);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--vn-navy);
}
.vn-content details.vntp--drop > .vntp__body { padding: 18px 22px 22px; }
@media (max-width: 560px) {
    .vn-content details.vntp--drop > .vntp__summary { padding: 13px 18px; }
    .vn-content details.vntp--drop > .vntp__body { padding: 16px 18px 18px; }
}

/* --- 9. In-content planner preview: the plugin's coral pull-quote rule is
   the one red left in an AI tool. Navy, matching the selected state. ------ */

.vn-content .goa-planner__preview,
.vn-content .com-content-article__body .goa-planner__preview {
    border-left: 2px solid var(--vn-navy) !important;
    background: var(--vn-surface) !important;
    font-style: normal;
}

/* --- 10. /earn. The article body is built from .vn-earn__* classes that the
   previous template styled and this one never ported, so the page rendered
   as bare paragraphs: "$500" on its own line, no cards, no buttons. Ported
   onto the v3 tokens: steel for the actions (red is reserved), Newsreader
   for the display sizes, the hairline card. ------------------------------- */

.vn-content .vn-earn { max-width: 860px; margin: 0; padding: 8px 0 24px; }
.vn-content .vn-earn__kicker {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.9px;
    text-transform: uppercase;
    color: var(--vn-red);
    margin: 0 0 14px;
    max-width: none;
}
.vn-article .vn-earn__lede,
.vn-content h2.vn-earn__lede {
    display: block;
    font-family: var(--vn-serif);
    font-weight: 400;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.8px;
    color: var(--vn-navy);
    margin: 0 0 20px;
    max-width: 22ch;
}
.vn-article h2.vn-earn__lede::before { display: none; content: none; }
.vn-content .vn-earn__intro {
    font-size: 18px;
    line-height: 1.65;
    color: var(--vn-body-soft);
    max-width: 62ch;
    margin: 0 0 36px;
}
.vn-content .vn-earn__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 0 40px;
}
.vn-content .vn-earn__card {
    display: flex;
    flex-direction: column;
    background: var(--vn-surface);
    border: 1px solid var(--vn-line);
    border-radius: var(--vn-r-mod);
    padding: 28px;
}
.vn-content .vn-earn__card--travel { background: var(--vn-alt); }
.vn-content .vn-earn__badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--vn-faint);
    margin: 0 0 14px;
}
.vn-content .vn-earn__amount {
    font-family: var(--vn-serif);
    font-size: 64px;
    line-height: 0.9;
    letter-spacing: -1.5px;
    color: var(--vn-red);
    margin: 0 0 14px;
}
.vn-content .vn-earn__card--retail .vn-earn__amount { color: var(--vn-navy); }
.vn-content .vn-earn__desc {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--vn-body);
    margin: 0 0 22px;
    flex: 1;
    max-width: none;
}
.vn-content .vn-earn .vn-earn__cta,
.vn-content .com-content-article__body .vn-earn .vn-earn__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    min-height: 44px;
    padding: 12px 22px;
    border-radius: var(--vn-r-btn);
    border: 1px solid transparent;
    background: var(--vn-steel);
    color: #fff !important;
    font-family: var(--vn-sans);
    font-size: 15px;
    font-weight: 600;
    transition: background .18s ease;
}
.vn-content .vn-earn .vn-earn__cta:hover { background: var(--vn-steel-hover); color: #fff !important; }
.vn-content .vn-earn .vn-earn__cta--ghost,
.vn-content .com-content-article__body .vn-earn .vn-earn__cta--ghost {
    background: var(--vn-surface);
    border-color: var(--vn-line-firm);
    color: var(--vn-navy) !important;
}
.vn-content .vn-earn .vn-earn__cta--ghost:hover { background: var(--vn-alt); border-color: var(--vn-navy); color: var(--vn-navy) !important; }
.vn-content .vn-earn__how { border-top: 1px solid var(--vn-line); padding-top: 32px; }
.vn-article .vn-earn__how h3,
.vn-content .vn-earn__how h3 {
    font-family: var(--vn-serif);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--vn-navy);
    margin: 0 0 16px;
}
.vn-content .vn-earn__how ol {
    margin: 0 0 24px;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--vn-body);
}
.vn-content .vn-earn__note { font-size: 14.5px; color: var(--vn-faint); max-width: 62ch; }
.vn-content .vn-earn__note a { color: var(--vn-red); font-weight: 600; }

@media (max-width: 640px) {
    .vn-content .vn-earn__cards { grid-template-columns: 1fr; }
    .vn-content .vn-earn__amount { font-size: 52px; }
}

/* --- Affiliate button pair under "Plan Your Days In Norway" (vnads). The
   plugin caps each button at 340px and centres the pair, leaving dead space
   either side. They now split the row 50/50 and stack on phones. The plugin
   sets these inline, hence !important. ---------------------------------- */

.vn-content .vn-affiliate-btns {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: stretch !important;
}
.vn-content .vn-affiliate-btns > a {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-height: 44px;
    text-align: center;
}
@media (max-width: 560px) {
    .vn-content .vn-affiliate-btns > a { flex-basis: 100% !important; }
}

/* --- Bottom band: the "Only in Norway" list ends well above the bottom of
   the Take a Chance card beside it. The two columns now stretch to the same
   height and the five rows share the extra space evenly, each link centred
   in its row, so the last hairline lands level with the card's bottom edge.
   No effect once the band stacks to one column. --------------------------- */

.vn-bottom .vn-pad { align-items: stretch; }
.vn-bottom .moduletable.mod1 { display: flex; flex-direction: column; }
.vn-bottom .mod1 > ul,
.vn-bottom .mod1 .mod-articles-items {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.vn-bottom .mod1 .mod-articles-items > li,
.vn-bottom .mod1 > ul > li {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 1080px) {
    .vn-bottom .mod1 .mod-articles-items > li,
    .vn-bottom .mod1 > ul > li { flex: 0 0 auto; }
}

/* Collection head (category listings: /only-in-norway, /go, /county). The
   62px .vn-h1 is sized for full-width page heads; inside the 800px content
   column beside the rail it read oversized. 47px, the article-title size, so
   in-column headings share one scale. */
.vn-collection-head .vn-h1 {
    font-size: 47px;
    line-height: 1.08;
    letter-spacing: -1px;
    margin-bottom: 18px;
}
@media (max-width: 760px) {
    .vn-collection-head .vn-h1 { font-size: 34px; letter-spacing: -0.7px; }
}

/* Breadcrumbs with a single item only repeat the page title beneath them
   (/only-in-norway, /go, /county, /about, theme pages). Hide those; keep the
   trail wherever there is a parent to go back to. The sibling gets the
   vertical room the crumb row used to occupy. */
.vn-crumbs:not(:has(.mod-breadcrumbs__item + .mod-breadcrumbs__item)) { display: none; }
.vn-crumbs:not(:has(.mod-breadcrumbs__item + .mod-breadcrumbs__item)) + .vn-pagehead,
.vn-crumbs:not(:has(.mod-breadcrumbs__item + .mod-breadcrumbs__item)) + .vn-main { padding-top: 48px; }

/* worldheritageX mid-article leaderboard (module 130): the module centres the
   728px banner with auto margins. In the single-column tablet layout that
   leaves it floating mid-page; align it with the text's left edge there.
   Desktop (800px column) and phone (full width) are unchanged. */
@media (max-width: 1080px) {
    .vn-content #mod-custom130 .whx-ad,
    .vn-content .whx-ad {
        margin-left: 0;
        margin-right: auto;
    }
}

/* "Things to do" rail card (module 144). Below 1080px the rail stacks under
   the article as a single column, where this six-row city list stretches to
   full width and adds nothing. Desktop keeps it; tablet and phone do not
   (phone was already off via the module's d-none). */
@media (max-width: 1080px) {
    .vn-rail .moduletable:has(.vn-side-ttd),
    .vn-rail #mod-custom144 { display: none !important; }
}