/* =========================================================
Op Naar Noorwegen - clean content styling
========================================================= */

:root {
--onn-accent: #b84a3d;
--onn-accent-dark: #91372e;
--onn-blue: #001e60;
--onn-text: #2f3a44;
--onn-muted-bg: #f7f7f2;
--onn-blue-bg: #f4f8fb;
--onn-blue-border: #d8e5ee;
--onn-border: #e1e1d6;
--onn-tip-bg: #fff8eb;
--onn-tip-border: #f1d5a7;
--onn-tip-accent: #d98b1f;
}

/* =========================================================
Booking modules
========================================================= */

#bookingmodule,
#bookingmodule-sidebar {
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 20px;
background-color: var(--onn-blue);
border-radius: 6px !important;
}

#bookingmodule {
height: 285px;
}

#bookingmodule-sidebar {
height: 455px;
}

@media (max-width: 600px) {
#bookingmodule {
height: 485px !important;
}
}

/* =========================================================
General links
========================================================= */

.post a,
.content-singular a,
.entry-content a,
.sidebar .widget a,
.wp-block-image figcaption a {
color: var(--onn-accent);
text-decoration: none;
}

.post a:hover,
.content-singular a:hover,
.entry-content a:hover,
.sidebar .widget a:hover,
.wp-block-image figcaption a:hover {
color: var(--onn-accent-dark);
text-decoration: none;
}

/* Table plugin */
.semantic_ui .ui.table {
font-size: 13px;
}

/* Mobile single-post layout fix */
@media (max-width: 823px) {
body.single:not(.woocommerce-page).post_sidebar .content-singular {
display: inherit;
}
}

/* =========================================================
Editorial notes and boxes
========================================================= */

.onn-route-note,
.onn-update-note {
margin: 24px 0;
padding: 16px 18px;
background: var(--onn-blue-bg);
border-left: 5px solid #2f6f8f;
border-radius: 6px;
font-size: 0.98rem;
line-height: 1.6;
}

.onn-tip-box {
margin: 24px 0;
padding: 16px 18px;
background: var(--onn-tip-bg);
border: 1px solid var(--onn-tip-border);
border-left: 5px solid var(--onn-tip-accent);
border-radius: 6px;
font-size: 0.98rem;
line-height: 1.6;
}

.onn-read-more-box {
margin: 28px 0;
padding: 18px 20px;
background: var(--onn-muted-bg);
border: 1px solid var(--onn-border);
border-radius: 6px;
}

.onn-read-more-box ul {
margin-bottom: 0;
padding-left: 20px;
}

.onn-read-more-box li {
margin: 6px 0;
}

/* =========================================================
Jump navigation
========================================================= */

.onn-jumpnav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 18px 0 28px;
padding: 0;
list-style: none;
}

.onn-jumpnav li {
margin: 0;
padding: 0;
list-style: none;
}

.onn-jumpnav a {
display: inline-block;
padding: 8px 12px;
color: var(--onn-text);
background: var(--onn-muted-bg);
border: 1px solid var(--onn-border);
border-radius: 999px;
font-size: 0.94rem;
line-height: 1.3;
text-decoration: none;
}

.onn-jumpnav a:hover {
color: var(--onn-accent-dark);
background: #fff;
border-color: var(--onn-accent);
}

/* =========================================================
CTA boxes
========================================================= */

.onn-cta-box,
.onn-final-cta {
margin: 28px 0;
padding: 22px 24px;
background: var(--onn-blue-bg);
border: 1px solid var(--onn-blue-border);
border-left: 6px solid var(--onn-accent);
border-radius: 8px;
}

.onn-cta-box h2,
.onn-final-cta h2 {
margin-top: 0;
margin-bottom: 10px;
font-size: 1.35rem;
line-height: 1.3;
}

.onn-cta-box p,
.onn-final-cta p {
margin-bottom: 14px;
}

.onn-cta-box ul,
.onn-final-cta ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 16px 0 0;
padding: 0;
list-style: none;
}

.onn-cta-box li,
.onn-final-cta li {
margin: 0;
padding: 0;
list-style: none;
}

.onn-cta-box li a,
.onn-final-cta li a {
display: block;
padding: 12px 14px;
color: #fff;
background: var(--onn-accent);
border-radius: 6px;
font-weight: 700;
line-height: 1.35;
text-align: center;
text-decoration: none;
}

.onn-cta-box li a:hover,
.onn-final-cta li a:hover {
color: #fff;
background: var(--onn-accent-dark);
text-decoration: none;
}

.onn-cta-small {
display: block;
margin-top: 4px;
color: rgba(255, 255, 255, 0.86);
font-size: 0.9rem;
font-weight: 400;
}

/* =========================================================
Tables
========================================================= */

.wp-block-table.onn-provider-table table,
.wp-block-table.onn-region-table table,
.wp-block-table.onn-check-table table {
width: 100%;
border-collapse: collapse;
}

.wp-block-table.onn-provider-table th,
.wp-block-table.onn-provider-table td,
.wp-block-table.onn-region-table th,
.wp-block-table.onn-region-table td,
.wp-block-table.onn-check-table th,
.wp-block-table.onn-check-table td {
padding: 12px;
border: 1px solid var(--onn-border);
vertical-align: top;
}

.wp-block-table.onn-provider-table th,
.wp-block-table.onn-region-table th,
.wp-block-table.onn-check-table th {
background: var(--onn-muted-bg);
font-weight: 700;
}

/* =========================================================
Lists and region blocks
========================================================= */

.onn-checklist {
margin: 20px 0 28px;
padding-left: 22px;
}

.onn-checklist li {
margin: 8px 0;
}

.onn-region-block {
margin: 28px 0;
padding: 20px 22px;
background: #fff;
border: 1px solid #e8e8dd;
border-radius: 8px;
}

.onn-region-block h3 {
margin-top: 0;
}

/* =========================================================
Mobile
========================================================= */

@media (max-width: 700px) {
.onn-cta-box,
.onn-final-cta {
padding: 18px;
}

.onn-cta-box ul,
.onn-final-cta ul {
grid-template-columns: 1fr;
}

.onn-jumpnav {
display: block;
}

.onn-jumpnav li {
margin-bottom: 8px;
}

.onn-jumpnav a {
display: block;
}

.wp-block-table.onn-provider-table,
.wp-block-table.onn-region-table,
.wp-block-table.onn-check-table {
overflow-x: auto;
}
}

.responsive-menu-trigger {display:none;}

/* Start hier (front page, id 2005): the theme's featured-posts hero grid
   always renders on is_front_page(), independent of static-page content.
   Hide it only here, the Blog page keeps its own hero. */
body.page-id-2005 .header-main .featured-top {
  display: none;
}


/* Start hier (front page, id 2005): the Full-width template deliberately
   sets .content to width:100%/max-width:none/margin:0/padding:0 via
   'body.page.page-template-page-full-width .content' (3 classes + body).
   That is more specific than a plain .content-page override, so match it
   with an equally targeted, more specific selector instead of !important. */
body.page-id-2005.page.page-template-page-full-width .content {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  body.page-id-2005.page.page-template-page-full-width .content {
    padding: 0 16px;
  }
}


/* Logo (set 2026-09-22): the theme always renders both a text logo and an
   image logo when norway8_get_option('logo') is set, and hides the image
   one by default (display:none) expecting custom CSS to pick a winner. */
header.header-main .logo-wrap .logo-image {
  display: block;
}
header.header-main .logo-wrap .logo-text {
  display: none;
}
header.header-main .logo-wrap .logo-image img {
  height: 40px;
  width: auto;
  max-width: none;
}
@media (max-width: 1000px) {
  header.header-main .logo-wrap .logo-image img {
    height: 34px;
  }
}

/* Start hier (front page, id 2005): hero photo above the H1. */
.onn-hero-image {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin: 0 0 24px;
}
@media (max-width: 700px) {
  .onn-hero-image {
    height: 200px;
  }
}

/* Start hier: three-photo strip breaking up the practical section. */
.onn-photo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}
.onn-photo-strip li {
  margin: 0;
  padding: 0;
}
.onn-photo-strip img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
@media (max-width: 700px) {
  .onn-photo-strip {
    grid-template-columns: 1fr 1fr;
  }
  .onn-photo-strip li:last-child {
    grid-column: 1 / -1;
  }
}

/* Start hier: "Net verschenen" latest-posts block as a card grid. */
.onn-latest-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.onn-latest-posts li {
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--onn-border);
  border-radius: 8px;
  overflow: hidden;
}
.onn-latest-posts .wp-block-latest-posts__featured-image {
  margin: 0;
}
.onn-latest-posts .wp-block-latest-posts__featured-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}
.onn-latest-posts > li > a {
  display: block;
  padding: 12px 14px 4px;
  font-weight: 700;
  color: var(--onn-text);
  text-decoration: none;
}
.onn-latest-posts time {
  display: block;
  padding: 0 14px 14px;
  font-size: 0.85rem;
  color: #7a8088;
}
@media (max-width: 700px) {
  .onn-latest-posts {
    grid-template-columns: 1fr;
  }
}

/* Start hier: region/transport choices as cards instead of tables. */
.onn-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0 0;
}
.onn-card-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.onn-card-grid .onn-region-block {
  margin: 0;
}
.onn-card-grid .onn-region-block p {
  margin-bottom: 10px;
}
@media (max-width: 700px) {
  .onn-card-grid,
  .onn-card-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Start hier: full-bleed hero photo, breaking out of the 960px column. */
.onn-hero-image {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 440px;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin-bottom: 28px;
}
@media (max-width: 700px) {
  .onn-hero-image {
    height: 240px;
  }
}

/* Start hier: full-bleed colour bands to break the page into sections. */
.onn-band {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 40px 0;
  margin-top: 32px;
  margin-bottom: 32px;
}
.onn-band-blue {
  background: var(--onn-blue-bg);
}
.onn-band-muted {
  background: var(--onn-muted-bg);
}
.onn-band-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.onn-band .onn-region-block {
  background: #fff;
}

/* Start hier: small line icons on the transport cards. */
.onn-icon-card {
  position: relative;
  padding-top: 54px;
}
.onn-card-icon {
  position: absolute;
  top: 20px;
  left: 20px;
}

/* =========================================================
Start hier (front page): collage hero
========================================================= */

.onn-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--onn-blue);
  padding: 54px 0 62px;
  margin-bottom: 40px;
  overflow: hidden;
}
.onn-hero .onn-hero-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 52px;
  align-items: center;
}
.onn-hero .onn-hero-eyebrow {
  display: block;
  font-family: 'Rubik', 'Lato', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e9b6a9;
  font-weight: 500;
  margin-bottom: 14px;
}
.onn-hero .onn-hero-text h1 {
  color: #fff;
  font-size: 2.7rem;
  line-height: 1.14;
  font-weight: 500;
  margin: 0 0 16px;
  padding: 0;
}
.onn-hero .onn-hero-lead {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.08rem;
  line-height: 1.6;
  margin: 0 0 26px;
}
.onn-hero .onn-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.onn-hero a.onn-btn {
  display: inline-block;
  font-family: 'Rubik', 'Lato', sans-serif;
  padding: 13px 24px;
  border-radius: 5px;
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.2;
  text-decoration: none;
}
.onn-hero a.onn-btn-primary {
  background: var(--onn-accent);
  color: #fff;
}
.onn-hero a.onn-btn-primary:hover {
  background: #cf5847;
  color: #fff;
}
.onn-hero a.onn-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.onn-hero a.onn-btn-ghost:hover {
  background: #fff;
  color: var(--onn-blue);
}

.onn-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.onn-collage img {
  width: 100%;
  height: 158px;
  object-fit: cover;
  display: block;
  box-sizing: border-box;
  border: 6px solid #fff;
  border-radius: 2px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}
.onn-collage img:nth-child(1) {
  height: 196px;
  transform: rotate(-2.5deg);
}
.onn-collage img:nth-child(2) {
  margin-top: 26px;
  transform: rotate(2deg);
}
.onn-collage img:nth-child(3) {
  margin-top: -14px;
  transform: rotate(1.5deg);
}
.onn-collage img:nth-child(4) {
  height: 196px;
  margin-top: 8px;
  transform: rotate(-1.5deg);
}

@media (max-width: 900px) {
  .onn-hero {
    padding: 38px 0 44px;
  }
  .onn-hero .onn-hero-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .onn-hero .onn-hero-text h1 {
    font-size: 2rem;
  }
  .onn-collage img,
  .onn-collage img:nth-child(1),
  .onn-collage img:nth-child(4) {
    height: 128px;
  }
}

/* Lead paragraph under the hero */
.onn-lead {
  font-size: 1.12rem;
  line-height: 1.65;
  color: #4a555f;
  max-width: 44em;
}

/* Section eyebrow above each step heading */
.onn-section-head .onn-eyebrow {
  display: block;
  font-family: 'Rubik', 'Lato', sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--onn-accent);
  font-weight: 500;
  margin-bottom: 2px;
}
.onn-section-head h2 {
  margin-top: 0;
  margin-bottom: 10px;
}

/* Region cards with a photo */
.onn-card-grid a.onn-photo-card {
  display: block;
  background: #fff;
  border: 1px solid var(--onn-border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: var(--onn-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.onn-card-grid a.onn-photo-card:hover {
  border-color: var(--onn-accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  color: var(--onn-text);
}
.onn-photo-card img {
  width: 100%;
  height: 172px;
  object-fit: cover;
  display: block;
}
.onn-photo-card-body {
  display: block;
  padding: 16px 18px 18px;
}
.onn-photo-card-title {
  display: block;
  font-family: 'Rubik', 'Lato', sans-serif;
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 7px;
  color: var(--onn-blue);
}
.onn-photo-card-text {
  display: block;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--onn-text);
  margin-bottom: 10px;
}
.onn-photo-card-more {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--onn-accent);
}

/* Logo as icon + wordmark: the icon is the uploaded SVG, the site name is
   real text so it picks up the heading font and never overflows a viewBox. */
header.header-main .logo-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  flex-wrap: nowrap;
}
header.header-main .logo-wrap .logo-image,
header.header-main .logo-wrap .logo-text {
  display: block;
  flex: 0 0 auto;
  width: auto;
}
header.header-main .logo-wrap .logo-image img {
  height: 38px;
  width: 38px;
  max-width: none;
}
header.header-main .logo-wrap .logo-text a {
  color: var(--onn-blue);
  text-decoration: none;
}
header.header-main .logo-wrap .logo-text span {
  font-family: 'Rubik', 'Lato', sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (max-width: 1000px) {
  header.header-main .logo-wrap .logo-image img {
    height: 32px;
    width: 32px;
  }
  header.header-main .logo-wrap .logo-text {
    width: auto;
  }
  header.header-main .logo-wrap .logo-text span {
    font-size: 19px;
  }
}

/* Region cards: practical route line + primary own-site link, region guide secondary */
.onn-photo-card-route {
  display: block;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--onn-blue);
  background: var(--onn-blue-bg);
  border: 1px solid var(--onn-blue-border);
  border-radius: 4px;
  padding: 6px 9px;
  margin-bottom: 12px;
}
.onn-card-grid .onn-photo-card a.onn-photo-card-more {
  display: inline-block;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--onn-accent);
  text-decoration: none;
  margin-right: 14px;
}
.onn-card-grid .onn-photo-card a.onn-photo-card-sub {
  display: inline-block;
  font-size: 0.88rem;
  color: #6b747c;
  text-decoration: none;
}
.onn-card-grid .onn-photo-card a.onn-photo-card-sub:hover {
  color: var(--onn-accent);
}

/* Popular guides row: text-forward, no photos, keeps the focus on own content */
.onn-guide-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 34px;
}
.onn-guide-row a {
  display: block;
  padding: 15px 17px;
  background: #fff;
  border: 1px solid var(--onn-border);
  border-left: 4px solid var(--onn-accent);
  border-radius: 0 6px 6px 0;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.onn-guide-row a:hover {
  border-color: var(--onn-accent);
  border-left-color: var(--onn-accent-dark);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}
.onn-guide-row a strong {
  display: block;
  font-family: 'Rubik', 'Lato', sans-serif;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--onn-blue);
  margin-bottom: 3px;
}
.onn-guide-row a span {
  display: block;
  font-size: 0.89rem;
  line-height: 1.45;
  color: #6b747c;
}
@media (max-width: 800px) {
  .onn-guide-row {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
Start hier: bottom of the page
========================================================= */

/* Editorial titles follow the heading font; small UI labels stay sans. */
.onn-photo-card-title,
.onn-guide-row a strong,
.onn-latest-posts > li > a {
  font-family: 'Lora', Georgia, serif;
}

/* Ferry status block */
.onn-status {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 34px 0;
  padding: 24px 26px;
  background: var(--onn-blue-bg);
  border: 1px solid var(--onn-blue-border);
  border-radius: 8px;
}
.onn-status-label {
  flex: 0 0 auto;
  font-family: 'Rubik', 'Lato', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  background: var(--onn-blue);
  border-radius: 3px;
  padding: 5px 9px;
  margin-top: 4px;
}
.onn-status-body h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  line-height: 1.25;
}
.onn-status-body p {
  margin: 0 0 10px;
  line-height: 1.6;
}
.onn-status a.onn-status-link {
  font-weight: 700;
  color: var(--onn-accent);
  text-decoration: none;
}
@media (max-width: 700px) {
  .onn-status {
    flex-direction: column;
    gap: 12px;
    padding: 20px;
  }
}

/* FAQ as a bordered list instead of loose headings */
.onn-faq {
  border: 1px solid var(--onn-border);
  border-radius: 8px;
  overflow: hidden;
  margin: 18px 0 36px;
  background: #fff;
}
.onn-faq-item {
  padding: 20px 24px;
  border-top: 1px solid var(--onn-border);
}
.onn-faq-item:first-child {
  border-top: 0;
}
.onn-faq-item h3 {
  margin: 0 0 8px;
  font-size: 1.14rem;
  line-height: 1.35;
  color: var(--onn-blue);
}
/* Inline marker on purpose: the theme forces padding:0 on every heading
   inside .post-content with high specificity, which left an absolutely
   positioned dot sitting on top of the first letter on single posts. */
.onn-faq-item h3::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--onn-accent);
  margin-right: 10px;
  vertical-align: 0.12em;
}
.onn-faq-item p {
  margin: 0;
  line-height: 1.65;
}

/* "Alle artikelen" link under the latest posts */
.onn-band-more {
  margin: 20px 0 0;
}
.onn-band-more a {
  font-weight: 700;
  color: var(--onn-accent);
  text-decoration: none;
}

/* Closing call to action, bookending the navy hero */
.onn-closing {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--onn-blue);
  padding: 48px 0 52px;
  margin-top: 8px;
}
.onn-closing .onn-closing-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 28px;
  box-sizing: border-box;
  text-align: center;
}
.onn-closing .onn-closing-inner h2 {
  color: #fff;
  margin: 0 0 10px;
  font-size: 1.9rem;
  line-height: 1.2;
}
.onn-closing .onn-closing-inner p {
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 22px;
  line-height: 1.6;
}
.onn-closing .onn-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.onn-closing a.onn-btn {
  display: inline-block;
  font-family: 'Rubik', 'Lato', sans-serif;
  padding: 13px 24px;
  border-radius: 5px;
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.2;
  text-decoration: none;
}
.onn-closing a.onn-btn-primary {
  background: var(--onn-accent);
  color: #fff;
}
.onn-closing a.onn-btn-primary:hover {
  background: #cf5847;
  color: #fff;
}
.onn-closing a.onn-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.onn-closing a.onn-btn-ghost:hover {
  background: #fff;
  color: var(--onn-blue);
}

/* Footer: tighter, left aligned, on a soft background so the page ends */
footer.footer-main {
  background: var(--onn-muted-bg);
  border-top: 1px solid var(--onn-border);
  padding-top: 40px;
}
footer.footer-main .widget {
  text-align: left;
}
footer.footer-main .widget-title {
  text-align: left;
  margin-bottom: 10px;
}
footer.footer-main .widget li {
  margin: 4px 0;
  line-height: 1.45;
}
footer.footer-main .widget-title:after {
  margin-left: 0;
}

/* The featured-image link is inline, so width:100% on the image had no
   block-level box to resolve against and the thumbnails stayed narrow. */
.onn-latest-posts .wp-block-latest-posts__featured-image a {
  display: block;
}


/* Fact boxes on the ferry hub. These classes were used in the content but had
   no rules at all, so the boxes rendered as plain text. */
.onn-practical-box {
  margin: 26px 0;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--onn-border);
  border-left: 5px solid var(--onn-blue);
  border-radius: 6px;
}
.onn-practical-box h3 {
  margin: 0 0 10px;
  font-size: 1.14rem;
  line-height: 1.3;
  color: var(--onn-blue);
}
.onn-practical-box ul {
  margin: 0;
  padding-left: 20px;
}
.onn-practical-box li {
  margin: 6px 0;
  line-height: 1.55;
}

/* Source list, deliberately secondary to the article text. */
.onn-source-list {
  margin: 14px 0 0;
  padding-left: 20px;
  font-size: 0.93rem;
  line-height: 1.55;
}
.onn-source-list li {
  margin: 5px 0;
  color: #6b747c;
}

/* Dated source-check note under the ferry hub's source list. */
.onn-source-note {
  margin: 12px 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #6b747c;
}


/* =========================================================
Ferry hub: same visual language as the home page, but contained.
The hub is a single post with a 400px sidebar, so the full-bleed
100vw band trick used on the home page would run under the sidebar.
========================================================= */

.onn-closing-inline {
  margin: 34px 0;
  padding: 28px 30px;
  background: var(--onn-blue);
  border-radius: 10px;
  text-align: center;
}
.onn-closing-inline h2 {
  color: #fff;
  margin: 0 0 10px;
  font-size: 1.6rem;
  line-height: 1.25;
}
.onn-closing-inline p {
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 20px;
  line-height: 1.6;
}
.onn-closing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.onn-closing-inline a.onn-btn {
  display: inline-block;
  font-family: 'Rubik', 'Lato', sans-serif;
  padding: 12px 20px;
  border-radius: 5px;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
}
.onn-closing-inline a.onn-btn-primary {
  background: var(--onn-accent);
  color: #fff;
}
.onn-closing-inline a.onn-btn-primary:hover {
  background: #cf5847;
  color: #fff;
}
.onn-closing-inline a.onn-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.onn-closing-inline a.onn-btn-ghost:hover {
  background: #fff;
  color: var(--onn-blue);
}

/* Contained tinted section, the in-column stand-in for .onn-band */
.onn-panel {
  margin: 32px 0;
  padding: 24px 26px;
  border-radius: 10px;
}
.onn-panel-blue {
  background: var(--onn-blue-bg);
  border: 1px solid var(--onn-blue-border);
}
.onn-panel-muted {
  background: var(--onn-muted-bg);
  border: 1px solid var(--onn-border);
}
.onn-panel > :first-child {
  margin-top: 0;
}
.onn-panel > :last-child {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .onn-closing-inline {
    padding: 22px 20px;
  }
  .onn-panel {
    padding: 18px 18px;
  }
}

/* Featured images: on pages the theme renders these full width and uncropped,
   which made a 1280px-wide image 853px tall - a whole screen before any text.
   Cap the height and crop instead. Posts sit inside the 700px column and are
   already smaller, so they stay untouched. */
.singular-featured img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  display: block;
}
@media (max-width: 700px) {
  .singular-featured img {
    max-height: 250px;
  }
}

/* Vermelding boven artikelen van de vorige eigenaar. */
.onn-author-note {
  margin: 0 0 24px;
  padding: 12px 16px;
  background: var(--onn-muted-bg);
  border-left: 4px solid var(--onn-border);
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #5c656d;
}


/* Uitgewerkt beslisvoorbeeld op de ferryhub. */
.onn-example h3 {
  margin: 0 0 10px;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--onn-blue);
}
.onn-example p {
  margin: 0 0 10px;
}
.onn-example p:last-child {
  margin-bottom: 0;
}


/* Boekingsmodule op telefoon: de module zet zelf padding:0 op de keuzelijst,
   waardoor de aanraakzone maar 17px hoog was. Het veld eromheen heeft ruimte
   genoeg, dus hier alleen de hoogte vergroten. Specifieker dan de eigen regel
   van de module, want die staat inline in de body en wint anders op volgorde. */
@media (max-width: 700px) {
  .onnw-widget .onnw-field select {
    min-height: 44px;
  }
}
/* =========================================================
Footer v2: blauw met bergrand (2026-09-28)
========================================================= */
footer.footer-main{background:var(--onn-blue);color:#fff;border-top:0;margin-top:120px;padding-top:56px;padding-bottom:0}
footer.footer-main:before{content:"";position:absolute;left:0;right:0;top:-79px;height:80px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V38l110-28 120 40 140-44 110 36 120-20 130 30 150-46 120 38 130-26 140 34 170-30V80z' fill='%232a4c9a'/%3E%3Cpath d='M0 80V56l140-28 100 34 150-44 120 38 110-20 130 32 150-48 120 40 130-26 140 34 150-30V80z' fill='%23001e60'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
footer.footer-main .sidebar{max-width:1120px;grid-template-columns:1.3fr 1fr 1fr;gap:56px;padding-bottom:44px}
footer.footer-main .sidebar section{min-width:0}
footer.footer-main .widget-title{color:#f2b632;font-family:Lora,serif;font-size:19px;font-weight:600;text-transform:none;letter-spacing:0;margin-bottom:14px;padding-bottom:0}
footer.footer-main .widget-title:after{display:none}
footer.footer-main .widget ul{list-style:none;margin:0;padding:0}
footer.footer-main .widget li{margin:0;padding:5px 0;border:0;line-height:1.45}
footer.footer-main .sidebar .widget a{color:rgba(255,255,255,.86);display:inline-block;transition:color .2s,transform .2s}
footer.footer-main .sidebar .widget a:hover{color:#f2b632;transform:translateX(5px)}
footer.footer-main .copyright{margin:0;padding:18px 0;background:#00164a;box-shadow:0 0 0 100vmax #00164a;clip-path:inset(0 -100vmax);color:rgba(255,255,255,.6);text-transform:none;letter-spacing:0;font-size:14px}
footer.footer-main .copyright a{color:rgba(255,255,255,.8)}

/* Merk-kolom (Custom HTML-widget) */
.onn-fbrand .onn-flogo{display:flex;align-items:center;gap:10px;font-family:Lora,serif;font-size:25px;font-weight:600;margin-bottom:12px}
footer.footer-main .sidebar .widget .onn-flogo{color:#fff;transform:none}
.onn-fbrand p{color:rgba(255,255,255,.8);margin:0 0 18px;line-height:1.6;font-size:15px}
.onn-fchips{display:flex;flex-wrap:wrap;gap:8px}
footer.footer-main .sidebar .widget .onn-fchips a{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 13px;font-size:14px;color:#fff}
footer.footer-main .sidebar .widget .onn-fchips a:hover{background:#f2b632;border-color:#f2b632;color:#001e60;transform:translateY(-2px)}

@media (max-width:1000px){
footer.footer-main{margin-top:90px;padding-top:40px}
footer.footer-main .sidebar section{margin-bottom:34px}
}
footer.footer-main .sidebar .widget li{padding:5px 0;margin:0}

/* =========================================================
Mobiele ferry-balk + menuknop in huisstijl (2026-09-28)
========================================================= */
html body .hk-mobile-bar{background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -6px 24px rgba(0,30,96,.18);border:0;border-top:3px solid #f2b632}
html body .hk-mobile-bar::before{background:#dfe6f1;box-shadow:none}
html body .hk-mobile-bar-brand{color:#b84a3d;font-family:Lato,sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
html body .hk-mobile-bar-route{color:#001e60;font-family:Lora,serif;font-size:16px;font-weight:600}
html body .hk-mobile-bar-sub{color:#5b6472;font-family:Lato,sans-serif;font-size:12px}
html body .hk-mobile-bar-btn,html body .hk-mobile-bar-btn:link,html body .hk-mobile-bar-btn:visited{background:#b84a3d !important;color:#fff !important;border-radius:999px;font-family:Lato,sans-serif;font-weight:700;font-size:14px;min-height:46px;padding:10px 16px 10px 10px;box-shadow:0 4px 12px rgba(184,74,61,.35)}
html body .hk-mobile-bar-btn:hover,html body .hk-mobile-bar-btn:active,html body .hk-mobile-bar-btn:focus{background:#91372e !important;box-shadow:0 4px 14px rgba(145,55,46,.4)}
html body .hk-mobile-bar-logo{border-radius:50%}
html body .hk-mobile-menu-toggle{background:#001e60;border-radius:12px}
@media (max-width:380px){
html body .hk-mobile-bar-route{font-size:14.5px}
html body .hk-mobile-bar-sub{font-size:11px}
html body .hk-mobile-bar-btn{font-size:13px;padding:9px 12px 9px 8px}
}

/* =========================================================
Artikel-opmaak v2 (.onn-article) – vakantiehuisjes & ferry (2026-09-28)
========================================================= */
.onn-article{--navy:#001e60;--red:#b84a3d;--red-d:#91372e;--fjord:#2f7d6d;--sun:#f2b632;--ice:#eaf2fb;--sand:#fbf5ea;--line:#dfe6f1}
.onn-article>*{margin-block-start:0}
.onn-article h2.wp-block-heading,.onn-article .onn-section-head h2{font-family:Lora,serif;font-weight:600;color:var(--navy);font-size:clamp(24px,3vw,30px);line-height:1.25;margin:48px 0 14px;text-align:left;position:relative;padding-bottom:10px}
.onn-article h2.wp-block-heading:after,.onn-article .onn-section-head h2:after{content:"";position:absolute;left:0;bottom:0;top:auto;width:56px;height:4px;margin:0;border:0;border-radius:4px;background:var(--sun)}
.onn-article h3.wp-block-heading{font-family:Lora,serif;color:var(--navy);font-size:21px;margin:30px 0 10px}
.onn-article h4.wp-block-heading{font-family:Lora,serif;color:var(--navy);font-size:18px;margin:24px 0 8px}
.onn-article .wp-block-image img{border-radius:16px}
.onn-article .onn-section-head{margin:48px 0 14px}
.onn-article .onn-section-head h2{margin:4px 0 0}
.onn-article .onn-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}

/* lijsten met eigen bullets */
.onn-article ul.wp-block-list:not(.onn-checklist){list-style:none;padding-left:0;margin:14px 0 18px}
.onn-article ul.wp-block-list:not(.onn-checklist) li{position:relative;padding:4px 0 4px 26px;margin:0}
.onn-article ul.wp-block-list:not(.onn-checklist) li:before{content:"";position:absolute;left:6px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--sun)}

/* notities & kaders */
.onn-article .onn-update-note,.onn-article .onn-route-note{background:var(--ice);border:0;border-left:5px solid var(--navy);border-radius:12px;padding:14px 18px;margin:22px 0;font-size:15.5px}
.onn-article .onn-route-note{background:#fff8eb;border-left-color:var(--sun);font-size:16.5px}
.onn-article .onn-tip-box{background:var(--sand);border:0;border-radius:18px;padding:20px 22px 20px 64px;margin:26px 0;position:relative}
.onn-article .onn-tip-box:before{content:"💡";position:absolute;left:20px;top:18px;font-size:28px}
.onn-article .onn-tip-box.onn-own-experience:before{content:"🧭"}
.onn-article .onn-tip-box h3{font-family:Lora,serif;color:var(--navy);margin:0 0 8px;font-size:20px}
.onn-article .onn-practical-box{background:#fff;border:1px solid var(--line);border-left:0;border-top:5px solid var(--navy);border-radius:16px;padding:18px 22px;box-shadow:0 4px 16px rgba(0,30,96,.06)}
.onn-article .onn-practical-box ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.onn-article .onn-practical-box li{position:relative;padding:3px 0 3px 26px}
.onn-article .onn-practical-box li:before{content:"✓";position:absolute;left:2px;color:var(--fjord);font-weight:800}

/* tabellen */
.onn-article .wp-block-table{overflow-x:auto;margin:22px 0}
.onn-article .wp-block-table table{border-collapse:separate;border-spacing:0;width:100%;border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:15.5px}
.onn-article .wp-block-table th{background:var(--navy);color:#fff;text-align:left;padding:12px 16px;border:0}
.onn-article .wp-block-table td{padding:12px 16px;border:0;border-top:1px solid #e7edf5;vertical-align:top;background:#fff}
.onn-article .wp-block-table tr:nth-child(even) td{background:#f7f9fc}

/* sponsored links die alleen in een alinea staan: knop */
.onn-article p>a[rel~="sponsored"]:only-child{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:13px 22px;border-radius:999px;font-weight:800;box-shadow:0 6px 16px rgba(184,74,61,.28);transition:transform .2s,background .2s;text-decoration:none}
.onn-article p>a[rel~="sponsored"]:only-child:after{content:"→"}
.onn-article p>a[rel~="sponsored"]:only-child:hover{background:var(--red-d);color:#fff;transform:translateY(-2px)}
.onn-article p>a[rel~="sponsored"]:only-child strong{font-weight:800;color:inherit}

/* stappenplan als tijdlijn */
.onn-article ul.oa-steps{list-style:none;padding:0;margin:22px 0;counter-reset:oastep;position:relative}
.onn-article ul.oa-steps:before{content:"";position:absolute;left:19px;top:10px;bottom:10px;width:3px;background:var(--line);border-radius:3px}
.onn-article ul.oa-steps li{counter-increment:oastep;position:relative;padding:8px 0 16px 58px;margin:0;border:0;background:none}
.onn-article ul.oa-steps li:before{content:counter(oastep);position:absolute;left:0;top:4px;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font:800 17px/40px Lato,sans-serif;text-align:center;box-shadow:0 0 0 5px #fff}
.onn-article ul.oa-steps li:last-child:before{background:var(--sun);color:var(--navy)}

/* checklist met afvinkvakjes */
.onn-article ul.oa-check{list-style:none;padding:0;margin:22px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.onn-article ul.oa-check li{position:relative;background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px 14px 12px 48px;margin:0;font-size:15.5px;line-height:1.45;cursor:pointer;transition:border-color .2s,background .2s}
.onn-article ul.oa-check li:before{content:"";position:absolute;left:14px;top:13px;width:22px;height:22px;border:2px solid #b8c4d6;border-radius:7px;background:#fff;transition:all .2s}
.onn-article ul.oa-check li.done{border-color:#bfe0d4;background:#f2faf6}
.onn-article ul.oa-check li.done:before{content:"✓";background:var(--fjord);border-color:var(--fjord);color:#fff;font-weight:800;font-size:15px;line-height:20px;text-align:center}

/* partnerkaarten */
.onn-article .oa-partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:22px 0 26px}
.onn-article .oa-partner{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 4px 16px rgba(0,30,96,.06);transition:transform .2s,box-shadow .2s}
.onn-article .oa-partner:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,30,96,.13)}
.onn-article .oa-partner .oa-tag{align-self:flex-start;background:var(--ice);color:var(--navy);font-size:12px;font-weight:800;border-radius:999px;padding:4px 10px;margin-bottom:10px}
.onn-article .oa-partner.top .oa-tag{background:var(--sun)}
.onn-article .oa-partner b{font-family:Lora,serif;font-size:21px;color:var(--navy);line-height:1.2}
.onn-article .oa-partner p{font-size:15px;line-height:1.5;margin:6px 0 14px;flex:1}
.onn-article .oa-partner a.oa-btn{display:block;font-size:15px;white-space:nowrap;text-align:center;background:var(--red);color:#fff;border-radius:999px;padding:11px 14px;font-weight:800;text-decoration:none;transition:background .2s}
.onn-article .oa-partner a.oa-btn:hover{background:var(--red-d);color:#fff}
.onn-article .oa-note{font-size:12.5px;color:#7a8494;margin:-12px 0 20px}

/* tips-tegels */
.onn-article .oa-tips{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.onn-article .oa-tip{border-radius:18px;padding:18px 20px}
.onn-article .oa-tip .ic{font-size:28px;display:block;margin-bottom:6px}
.onn-article .oa-tip h4{font-family:Lora,serif;font-size:18px;margin:0 0 6px;color:inherit}
.onn-article .oa-tip p{margin:0;font-size:15.5px;line-height:1.55}
.onn-article .oa-tip:nth-child(1){background:#dcebfb;color:#001e60}
.onn-article .oa-tip:nth-child(2){background:#fde9c4;color:#4a3000}
.onn-article .oa-tip:nth-child(3){background:#dff0ea;color:#14403a}
.onn-article .oa-tip:nth-child(4){background:#f7dcd8;color:#5e1f17}
.onn-article .oa-tip a{color:inherit;text-decoration:underline}

/* ferry-routekaarten */
.onn-article .oa-routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:22px 0}
.onn-article .oa-route{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 4px 16px rgba(0,30,96,.06);transition:transform .2s,box-shadow .2s}
.onn-article .oa-route:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,30,96,.13)}
.onn-article .oa-route .top{background:var(--navy);color:#fff;padding:14px 16px}
.onn-article .oa-route .top small{display:block;color:var(--sun);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.onn-article .oa-route .top b{font-family:Lora,serif;font-size:20px;line-height:1.25}
.onn-article .oa-route .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.onn-article .oa-route .meta{display:flex;flex-wrap:wrap;gap:6px}
.onn-article .oa-route .meta span{background:var(--ice);color:var(--navy);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:700}
.onn-article .oa-route .meta span.night{background:#1f2c55;color:#fff}
.onn-article .oa-route p{margin:0;font-size:15px;line-height:1.5;flex:1}
.onn-article .oa-route a.oa-btn{display:block;text-align:center;background:var(--red);color:#fff;border-radius:999px;padding:11px 14px;font-weight:800;text-decoration:none;margin-top:4px}
.onn-article .oa-route a.oa-btn:hover{background:var(--red-d);color:#fff}
.onn-article .oa-route.alt .top{background:var(--fjord)}
.onn-article .oa-route.alt a.oa-btn{background:#fff;color:var(--fjord);border:2px solid var(--fjord)}

/* cta-box & afsluiter & faq */
.onn-article .onn-cta-box{border-radius:20px;border:0;border-left:0;background:linear-gradient(135deg,#001e60,#1f4e8c);color:#fff;padding:24px}
.onn-article .onn-cta-box h2{color:#fff;font-family:Lora,serif;margin-top:0}
.onn-article .onn-cta-box h2:after{display:none}
.onn-article .onn-cta-box p,.onn-article .onn-cta-box p a{color:rgba(255,255,255,.9)}
.onn-article .onn-cta-box li a{background:#fff;color:var(--navy);border-radius:14px}
.onn-article .onn-cta-box li a:hover{background:var(--sun);color:var(--navy)}
.onn-article .onn-cta-box li a .onn-cta-small{color:#5b6472}
.onn-article .onn-faq{display:grid;gap:10px}
.onn-article .onn-faq-item{background:var(--sand);border:0;border-radius:14px;padding:16px 20px}
.onn-article .onn-faq-item h3{font-family:Lora,serif;color:var(--navy);font-size:18px;margin:0 0 6px}
.onn-article .onn-faq-item p{margin:0}
.onn-article .onn-closing-inline{background:var(--navy);color:#fff;border-radius:22px;padding:28px}
.onn-article .onn-closing-inline h2{color:#fff}
.onn-article .onn-closing-inline h2:after{display:none}

@media (max-width:700px){
.onn-article ul.oa-check,.onn-article .oa-tips{grid-template-columns:1fr}
.onn-article .onn-tip-box{padding:56px 18px 18px}
.onn-article .onn-tip-box:before{top:14px;left:18px}
}

/* Brede berichten (zonder sidebar, via mu-plugin onn-wide-posts) */
body.single.onn-wide:not(.woocommerce-page) .content article{max-width:1120px}
.onn-wide .onn-article>*,.onn-wide .onn-article>.wp-block-group__inner-container>*{max-width:760px;margin-left:auto;margin-right:auto}
.onn-wide .onn-article>.wp-block-group__inner-container{max-width:none}
.onn-wide .onn-article .wp-block-table,.onn-wide .onn-article .oa-routes,.onn-wide .onn-article .oa-partners,.onn-wide .onn-article .oa-tips,.onn-wide .onn-article ul.oa-check,.onn-wide .onn-article .onn-cta-box,.onn-wide .onn-article .onn-closing-inline,.onn-wide .onn-article .okh,.onn-wide .onn-article .onn-faq{max-width:1000px}
.onn-wide .onn-article .oa-routes{max-width:1120px}
.onn-wide .onn-article .onn-faq{grid-template-columns:1fr 1fr}
@media (max-width:760px){.onn-wide .onn-article .onn-faq{grid-template-columns:1fr}}
.onn-article .onn-faq{background:none;border:0;padding:0;box-shadow:none}
/* compacte prijsbalk */
.onn-article .oa-ctabar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--ice);border-radius:16px;padding:14px 16px 14px 20px;margin:18px 0 8px}
.onn-article .oa-ctabar strong{display:block;color:var(--navy);font-family:Lora,serif;font-size:18px}
.onn-article .oa-ctabar span{display:block;font-size:14.5px;color:#4b5563}
.onn-article .oa-ctabar a.oa-btn{background:var(--red);color:#fff;border-radius:999px;padding:11px 20px;font-weight:800;text-decoration:none;white-space:nowrap;transition:background .2s}
.onn-article .oa-ctabar a.oa-btn:hover{background:var(--red-d);color:#fff}
/* routekaarten compacter */
.onn-article .oa-routes{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.onn-article .oa-route .top{padding:11px 14px}
.onn-article .oa-route .top b{font-size:18px}
.onn-article .oa-route .body{padding:11px 14px 13px;gap:6px}
.onn-article .oa-route p{font-size:14.5px}
.onn-article .oa-route a.oa-btn{padding:9px 12px;font-size:14.5px}
@media (max-width:600px){.onn-article .oa-routes{grid-template-columns:1fr 1fr}.onn-article .oa-route p{display:none}.onn-article .oa-ctabar a.oa-btn{width:100%;text-align:center}}
.onn-wide .onn-article .oa-ctabar,.onn-wide .onn-article .oa-partners,.onn-wide .onn-article .oa-tips,.onn-wide .onn-article ul.oa-check,.onn-wide .onn-article ul.oa-steps,.onn-wide .onn-article .oa-routes,.onn-wide .onn-article .wp-block-table,.onn-wide .onn-article .onn-tip-box,.onn-wide .onn-article .onn-route-note,.onn-wide .onn-article .onn-update-note,.onn-wide .onn-article .onn-practical-box,.onn-wide .onn-article .onn-cta-box,.onn-wide .onn-article .onn-section-head{margin-left:auto;margin-right:auto}

/* Brede berichten: kolom centreren (wint van thema-regels) */
body.single.onn-wide .post-content .onn-article>.wp-block-group__inner-container>*,body.single.onn-wide .post-content .onn-article>*:not(.wp-block-group__inner-container){max-width:760px !important;margin-left:auto !important;margin-right:auto !important}
body.single.onn-wide .post-content .onn-article>.wp-block-group__inner-container>:is(.wp-block-table,ul.oa-check,.onn-cta-box,.onn-closing-inline,.onn-faq,.okh){max-width:1000px !important}
body.single.onn-wide .post-content .onn-article>.wp-block-group__inner-container>:is(.oa-routes,.oa-partners,.oa-tips){max-width:1120px !important}
body.single.onn-wide .post-content .onn-article>.wp-block-group__inner-container>.code-block{max-width:1000px !important}

/* Brede berichten: header, kolom en onderkant */
body.single.onn-wide .content-singular .main-post{min-width:0;width:100%;max-width:100%;margin-left:0;margin-right:0}
body.single.onn-wide:not(.woocommerce-page) .singular-featured{max-width:1120px;margin:0 auto 40px}
body.single.onn-wide .singular-featured img{width:100%;height:clamp(220px,38vw,460px);object-fit:cover;border-radius:22px}
body.single.onn-wide:not(.woocommerce-page) .content article>:is(.post-footer,.author-bio,.comments-wrap){max-width:760px;margin-left:auto;margin-right:auto}
@media (max-width:823px){body.single.onn-wide .singular-featured img{border-radius:14px}}

/* =========================================================
Berichtkop in huisstijl (alle berichten) 2026-09-28
========================================================= */
body.single .post-header .post-category a{background:#eaf2fb !important;color:#001e60 !important;border-radius:999px;padding:6px 13px;font-size:12px;font-weight:800;letter-spacing:.08em;transition:background .2s}
body.single .post-header .post-category a:hover{background:#f2b632 !important}
body.single .post-header h1.post-title{color:#001e60;font-size:clamp(28px,4vw,44px);line-height:1.18;max-width:900px;margin-left:auto;margin-right:auto}
body.single .post-header .post-meta{color:#5b6472;font-size:14.5px}
body.single .post-header .post-meta a{color:#001e60;font-weight:700}
body.single .post-header .post-date{display:inline !important}
body.single .post-header .post-date-min{display:none !important}

/* Artikel: geen dubbele bullets (thema zet list-style op elke li) */
body.single .onn-article li{list-style:none !important}
body.single .onn-article li::marker{content:none}
.onn-article .onn-read-more-box{background:var(--ice);border:0;border-radius:16px;padding:18px 22px}
.onn-article .onn-read-more-box>strong{display:block;font-family:Lora,serif;color:var(--navy);font-size:18px;margin-bottom:6px}
.onn-article .onn-read-more-box ul,.onn-article ul.onn-source-list{list-style:none;padding:0 !important;margin:8px 0 0}
.onn-article .onn-read-more-box li,.onn-article ul.onn-source-list li{position:relative;padding:4px 0 4px 24px;margin:0}
.onn-article .onn-read-more-box li:before,.onn-article ul.onn-source-list li:before{content:"→";position:absolute;left:2px;top:4px;color:var(--red);font-weight:800}
.onn-article ul.onn-source-list li{font-size:14.5px}
.onn-article .onn-source-note{font-size:13.5px;color:#6b7280}

/* Knopstijl alleen voor losse, vetgedrukte sponsored links (niet voor links midden in een zin) */
.onn-article p>a[rel~="sponsored"]:only-child:not(:has(>strong:only-child)){display:inline;background:none;color:var(--red);padding:0;border-radius:0;box-shadow:none;font-weight:inherit;transform:none}
.onn-article p>a[rel~="sponsored"]:only-child:not(:has(>strong:only-child)):after{content:none}
.onn-article p>a[rel~="sponsored"]:only-child:not(:has(>strong:only-child)):hover{background:none;color:var(--red-d);transform:none;text-decoration:underline}

/* Gele streep onder koppen: als achtergrond i.p.v. ::after (thema verschoof/verplaatste de pseudo-streep) */
body .onn-article h2.wp-block-heading::after,body .onn-article .onn-section-head h2::after{display:none !important;content:none !important}
body .onn-article h2.wp-block-heading,body .onn-article .onn-section-head h2{padding-bottom:14px !important;background:linear-gradient(#f2b632,#f2b632) left bottom/56px 4px no-repeat !important}
body .onn-article .onn-cta-box h2,body .onn-article .onn-closing-inline h2{background:none !important;padding-bottom:0 !important}
.onn-article iframe{border-radius:16px;max-width:100%}

/* Citaat en afsluitende CTA in artikelen */
.onn-article .wp-block-quote{border:0;border-left:5px solid var(--sun);background:var(--sand);border-radius:0 16px 16px 0;padding:18px 22px;margin:24px auto;font-family:Lora,serif;font-size:21px;line-height:1.4;color:var(--navy)}
.onn-article .wp-block-quote p{margin:0}
.onn-article .onn-final-cta{border:0;border-left:0;border-radius:20px;background:linear-gradient(135deg,#001e60,#1f4e8c);color:#fff;padding:24px}
.onn-article .onn-final-cta h2{color:#fff;background:none !important;padding-bottom:0 !important;margin-top:0}
.onn-article .onn-final-cta p{color:rgba(255,255,255,.9)}
.onn-article .onn-final-cta li a{background:#fff;color:var(--navy);border-radius:14px}
.onn-article .onn-final-cta li a:hover{background:var(--sun);color:var(--navy)}
.onn-article .onn-final-cta li a .onn-cta-small{color:#5b6472}
body.single.onn-wide .post-content .onn-article>.wp-block-group__inner-container>.onn-final-cta{max-width:1000px !important}
.onn-article .oa-ctabar--info{background:#dff0ea}
.onn-article .oa-ctabar--info a.oa-btn{background:var(--fjord)}
.onn-article .oa-ctabar--info a.oa-btn:hover{background:#245f53}
.onn-article hr.wp-block-separator{border:0;height:1px;background:#e3e9f2;margin:44px auto;max-width:760px}
.onn-article .oa-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px auto}
.onn-article .oa-gallery img{width:100%;height:260px;object-fit:cover;border-radius:14px;display:block;margin:0}
.onn-article .oa-podcast{margin:14px auto 22px}
.onn-article .oa-podcast iframe{border-radius:14px}
@media (max-width:600px){.onn-article .oa-gallery{grid-template-columns:1fr 1fr}.onn-article .oa-gallery img{height:170px}.onn-article .oa-gallery img:first-child{grid-column:span 2}}

/* Temperatuurtabel per maand (weerpagina): waarden op één regel, past op mobiel */
.onn-month-table td{white-space:nowrap}
.onn-month-table td:first-child{font-weight:600}
@media (max-width:600px){.onn-month-table table{font-size:13.5px!important}.onn-month-table th,.onn-month-table td{padding:9px 6px!important}.onn-month-table th:last-child{white-space:normal;max-width:70px}}

/* Tabelkop gelijk: navy kopregel met witte tekst voor alle contenttabellen (thema zette er lichtgrijs overheen) */
body.single .post-content table thead th{background:#001e60!important;color:#fff!important;border-color:#001e60!important}
body.single .post-content table thead th a{color:#fff!important}