/* === OCN Brand Variables === */
:root {
  --ocn-blue:  #1A3C8B;
  --ocn-orange:#F07820;
  --ocn-lblue: #7ABDE8;
  --ocn-white: #ffffff;
  --ocn-dark:  #0f1f4a;
}

/* === Reset homepage padding === */
.ocn-page { margin: 0; padding: 0; font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; }

/* === NAV === */
.ocn-nav {
  background: var(--ocn-blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.ocn-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.ocn-logo-badge {
  background: var(--ocn-orange);
  color: white;
  font-weight: 900;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 4px;
  letter-spacing: 1px;
}
.ocn-logo-name {
  color: white;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ocn-nav-links { display: flex; gap: 0; }
.ocn-nav-links a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 18px;
  height: 64px;
  display: flex;
  align-items: center;
  border-bottom: 3px solid transparent;
  transition: all .15s;
}
.ocn-nav-links a:hover,
.ocn-nav-links a.active {
  color: white;
  border-bottom-color: var(--ocn-orange);
}
.ocn-nav-hamburger { display: none; background: none; border: none; cursor: pointer; }

/* === HERO === */
.ocn-hero {
  position: relative;
  min-height: 560px;
  background: var(--ocn-dark) center/cover no-repeat;
  display: flex;
  align-items: flex-end;
}
.ocn-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,25,70,.92) 40%, rgba(10,25,70,.4) 100%);
}
.ocn-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 40px;
  gap: 32px;
}
.ocn-hero-content { flex: 1; color: white; }
.ocn-hero-tag {
  background: var(--ocn-orange);
  color: white;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 14px;
}
.ocn-hero-title {
  font-size: 52px;
  font-weight: 900;
  font-style: italic;
  line-height: 1.05;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.ocn-hero-sub {
  font-size: 20px;
  color: rgba(255,255,255,.8);
  margin-bottom: 24px;
  letter-spacing: .5px;
}
.ocn-hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ocn-btn-primary {
  background: var(--ocn-orange);
  color: white;
  border: none;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .15s;
}
.ocn-btn-primary:hover { background: #d96a10; color: white; }
.ocn-btn-secondary {
  background: transparent;
  color: white;
  border: 2px solid rgba(255,255,255,.5);
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  transition: all .15s;
}
.ocn-btn-secondary:hover { border-color: white; color: white; }

/* Countdown + date card */
.ocn-hero-aside { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.ocn-date-card {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  padding: 20px 28px;
  text-align: center;
  color: white;
  min-width: 140px;
  backdrop-filter: blur(4px);
}
.ocn-date-day { font-size: 52px; font-weight: 900; line-height: 1; }
.ocn-date-month { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; opacity: .8; }
.ocn-date-loc { font-size: 13px; opacity: .7; margin-top: 6px; }

.ocn-countdown {
  display: flex;
  gap: 8px;
}
.ocn-countdown-unit {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
  color: white;
  min-width: 60px;
  backdrop-filter: blur(4px);
}
.ocn-countdown-num {
  font-size: 28px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  display: block;
}
.ocn-countdown-lbl {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .7;
  margin-top: 2px;
  display: block;
}

/* === AGENDA STRIP === */
.ocn-agenda-strip {
  background: var(--ocn-blue);
  padding: 24px 40px;
}
.ocn-agenda-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.ocn-agenda-item {
  flex: 1;
  background: rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 14px 18px;
  color: white;
  position: relative;
  overflow: hidden;
}
.ocn-agenda-item.done { opacity: .5; }
.ocn-agenda-item.next {
  background: var(--ocn-orange);
  box-shadow: 0 4px 16px rgba(240,120,32,.4);
}
.ocn-ev-num {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 4px;
}
.ocn-ev-date {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 2px;
}
.ocn-ev-loc { font-size: 12px; opacity: .8; }
.ocn-ev-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(255,255,255,.25);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: .5px;
}
.ocn-agenda-item.next .ocn-ev-badge { background: rgba(0,0,0,.2); }

/* === SECTION WRAPPER === */
.ocn-section { max-width: 1200px; margin: 0 auto; padding: 56px 40px; }
.ocn-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}
.ocn-section-title {
  font-size: 32px;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  color: var(--ocn-blue);
  letter-spacing: -0.5px;
}
.ocn-section-title span { color: var(--ocn-orange); }
.ocn-section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: var(--ocn-orange);
  border-radius: 2px;
  margin-top: 8px;
}
.ocn-section-more {
  font-size: 13px;
  font-weight: 700;
  color: var(--ocn-blue);
  text-decoration: none;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ocn-orange);
  padding-bottom: 2px;
  transition: color .15s;
}
.ocn-section-more:hover { color: var(--ocn-orange); }
.ocn-divider { height: 1px; background: #e8ecf5; margin: 0; }

/* === NEWS CARDS === */
.ocn-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ocn-news-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(26,60,139,.1);
  transition: transform .15s, box-shadow .15s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.ocn-news-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(26,60,139,.15); }
.ocn-news-thumb {
  height: 180px;
  background: var(--ocn-lblue) center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  padding: 12px;
}
.ocn-news-cat {
  background: var(--ocn-orange);
  color: white;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}
.ocn-news-body { padding: 18px 20px; }
.ocn-news-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ocn-blue);
  line-height: 1.3;
  margin-bottom: 6px;
}
.ocn-news-meta { font-size: 12px; color: #888; }

/* === RESULTS + STANDINGS === */
.ocn-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.ocn-table-block {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(26,60,139,.1);
}
.ocn-table-head {
  background: var(--ocn-blue);
  color: white;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ocn-table-head-title { font-size: 15px; font-weight: 800; letter-spacing: .5px; }
.ocn-table-head-badge {
  background: rgba(255,255,255,.2);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: .5px;
}
.ocn-table-cat-selector {
  padding: 10px 20px;
  background: #f5f7fc;
  border-bottom: 1px solid #e8ecf5;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ocn-cat-btn {
  background: white;
  border: 1px solid #d0d8ec;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ocn-blue);
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}
.ocn-cat-btn.active, .ocn-cat-btn:hover {
  background: var(--ocn-blue);
  color: white;
  border-color: var(--ocn-blue);
}
.ocn-table-rows { padding: 0 0 8px; }
.ocn-row {
  display: flex;
  align-items: center;
  padding: 9px 20px;
  gap: 12px;
  border-bottom: 1px solid #f0f2f8;
  font-size: 14px;
}
.ocn-row:last-child { border-bottom: none; }
.ocn-pos {
  background: var(--ocn-orange);
  color: white;
  font-size: 12px;
  font-weight: 900;
  font-style: italic;
  width: 28px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
  flex-shrink: 0;
}
.ocn-pos.p1 { background: var(--ocn-blue); }
.ocn-row-name { flex: 1; font-weight: 700; color: var(--ocn-blue); }
.ocn-row-sub { font-size: 12px; color: #888; }
.ocn-row-pts { font-size: 13px; font-weight: 800; color: var(--ocn-orange); }

/* === SPONSORS === */
.ocn-sponsors-wrap { background: #f5f7fc; }
.ocn-sponsor-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
.ocn-sponsor-item {
  background: white;
  border: 1px solid #e8ecf5;
  border-radius: 8px;
  padding: 16px 28px;
  min-width: 140px;
  text-align: center;
  color: #aaa;
  font-size: 13px;
  font-weight: 600;
}

/* === FOOTER === */
.ocn-footer {
  background: var(--ocn-blue);
  color: rgba(255,255,255,.7);
  padding: 32px 40px;
}
.ocn-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.ocn-footer-logo { color: white; font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.ocn-footer-links { display: flex; gap: 24px; }
.ocn-footer-links a { color: rgba(255,255,255,.6); text-decoration: none; font-size: 13px; transition: color .15s; }
.ocn-footer-links a:hover { color: white; }
.ocn-footer-copy { font-size: 12px; }

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .ocn-hero-title { font-size: 36px; }
  .ocn-news-grid { grid-template-columns: 1fr; }
  .ocn-results-grid { grid-template-columns: 1fr; }
  .ocn-agenda-inner { flex-direction: column; }
  .ocn-nav-links { display: none; }
  .ocn-nav-hamburger { display: block; }
  .ocn-hero-aside { display: none; }
  .ocn-hero-inner { padding: 32px 20px; }
  .ocn-section { padding: 40px 20px; }
  .ocn-agenda-strip { padding: 20px; }
}
/* ===== SUBPAGE SHARED ===== */
.ocn-page-hero{background:var(--ocn-blue);padding:70px 0 40px;}
.ocn-page-hero .ocn-container{max-width:960px;margin:0 auto;padding:0 24px;}
.ocn-page-title{color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;font-style:italic;text-transform:uppercase;margin:0;}
.ocn-page-sub{color:var(--ocn-lblue);margin:8px 0 0;font-size:1.1rem;}
.ocn-subpage-body{max-width:960px;margin:0 auto;padding:48px 24px 80px;}
.ocn-section-title{font-family:'Barlow Condensed',sans-serif;font-size:1.8rem;font-weight:700;font-style:italic;color:var(--ocn-blue);text-transform:uppercase;margin:0 0 20px;}
.ocn-btn{display:inline-block;background:var(--ocn-orange);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-style:italic;font-size:1rem;text-transform:uppercase;padding:10px 24px;border-radius:6px;text-decoration:none;border:none;cursor:pointer;transition:background .2s;}
.ocn-btn:hover{background:#d96010;}

/* ===== AGENDA CARDS ===== */
.ocn-event-card{display:flex;border-radius:12px;overflow:hidden;margin-bottom:20px;box-shadow:0 4px 20px rgba(0,0,0,.08);transition:transform .2s;}
.ocn-event-card:hover{transform:translateY(-2px);}
.ocn-event-bar{width:8px;flex-shrink:0;background:var(--ocn-blue);}
.ocn-event-card.ocn-next .ocn-event-bar{background:var(--ocn-orange);}
.ocn-event-card.ocn-past{opacity:.55;}
.ocn-event-card.ocn-past .ocn-event-bar{background:#aaa;}
.ocn-event-body{background:#fff;flex:1;padding:24px 28px;}
.ocn-event-meta{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap;}
.ocn-event-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-style:italic;font-size:.95rem;color:var(--ocn-blue);text-transform:uppercase;}
.ocn-event-card.ocn-next .ocn-event-label{color:var(--ocn-orange);}
.ocn-badge{font-size:.72rem;font-weight:700;padding:2px 10px;border-radius:20px;text-transform:uppercase;}
.ocn-badge-next{background:var(--ocn-orange);color:#fff;}
.ocn-badge-past{background:#ddd;color:#666;}
.ocn-event-loc{margin:0 0 4px;font-family:'Barlow Condensed',sans-serif;font-size:1.8rem;font-weight:700;font-style:italic;color:#1a1a2e;}
.ocn-event-date{margin:0 0 8px;color:#666;font-size:.9rem;}
.ocn-event-desc{margin:0 0 16px;color:#444;}

/* ===== NIEUWS ARTICLES ===== */
.ocn-news-article{background:#fff;border-radius:12px;overflow:hidden;margin-bottom:32px;box-shadow:0 4px 20px rgba(0,0,0,.08);}
.ocn-news-article-body{padding:24px 28px;}
.ocn-news-date{font-size:.8rem;color:var(--ocn-orange);font-weight:700;text-transform:uppercase;letter-spacing:1px;}
.ocn-news-article h2{margin:8px 0 12px;font-family:'Barlow Condensed',sans-serif;font-size:1.6rem;font-weight:700;color:#1a1a2e;}
.ocn-news-article h2 a{color:inherit;text-decoration:none;}
.ocn-news-article h2 a:hover{color:var(--ocn-orange);}
.ocn-news-article p{color:#555;margin:0 0 16px;}

/* ===== TAB PANELS ===== */
.ocn-cat-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.ocn-tab-btn{background:#eef2ff;color:var(--ocn-blue);border:none;border-radius:6px;padding:8px 16px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.95rem;text-transform:uppercase;cursor:pointer;transition:background .15s;}
.ocn-tab-btn.active,.ocn-tab-btn:hover{background:var(--ocn-blue);color:#fff;}
.ocn-tab-panel.hidden{display:none;}
/* ===== HIDE THEGEM NATIVE HEADER ON ALL OCN PAGES ===== */
#site-header-wrapper,
.thegem-perspective-menu-wrapper {
  display: none !important;
}

/* ===== LOGO ===== */
.ocn-logo-img {
  height: 52px;
  width: auto;
  display: block;
}

/* ===== REMOVE ALL ROUNDED CORNERS — SHARP POLYGON STYLE ===== */
.ocn-nav,
.ocn-countdown,
.ocn-countdown-unit,
.ocn-date-card,
.ocn-agenda-item,
.ocn-news-card,
.ocn-news-thumb,
.ocn-table-block,
.ocn-table-head,
.ocn-sponsor-item,
.ocn-event-card,
.ocn-news-article,
.ocn-btn,
.ocn-btn-primary,
.ocn-btn-secondary,
.ocn-badge,
.ocn-ev-badge,
.ocn-tab-btn,
.ocn-hero-tag {
  border-radius: 0 !important;
}

/* ===== POLYGON ACCENT SHAPES ===== */
/* Agenda items — parallelogram */
.ocn-agenda-item {
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  padding: 16px 20px 16px 24px;
}
/* Countdown units — sharp */
.ocn-countdown-unit {
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
/* Hero tag label */
.ocn-hero-tag {
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 10px 100%);
  padding: 4px 20px;
}
/* Buttons — sharp angle on right side */
.ocn-btn-primary {
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  padding-right: 28px;
}
.ocn-btn-secondary {
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
  padding-left: 28px;
}
.ocn-btn {
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  padding-right: 22px;
}
/* Table head badge */
.ocn-table-head-badge {
  border-radius: 0 !important;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  padding: 3px 18px;
}
/* Nav links hover underline — sharp */
.ocn-nav-links a::after {
  border-radius: 0;
}
/* ===== FONT SIZE SCALE-UP (all OCN pages) ===== */
.ocn-site body, .ocn-page, .ocn-subpage-body {
  font-size: 18px;
  line-height: 1.65;
}

/* NAV */
.ocn-nav { padding: 0 40px; height: 72px; }
.ocn-logo-img { height: 44px !important; width: auto; max-width: 200px; object-fit: contain; }
.ocn-nav-links a { font-size: 1rem; letter-spacing: 1.5px; padding: 0 14px; }

/* HERO */
.ocn-hero-tag { font-size: 0.9rem; letter-spacing: 2px; }
.ocn-hero-title { font-size: clamp(2.8rem, 6vw, 5rem) !important; line-height: 1.05; }
.ocn-hero-sub { font-size: 1.25rem !important; }
.ocn-date-card .ocn-date-day { font-size: 5rem !important; }
.ocn-date-card .ocn-date-month { font-size: 1.2rem !important; }
.ocn-date-card .ocn-date-loc { font-size: 1.1rem !important; }
.ocn-countdown-num { font-size: 2.8rem !important; }
.ocn-countdown-lbl { font-size: 0.85rem !important; letter-spacing: 1.5px; }

/* AGENDA STRIP */
.ocn-ev-num { font-size: 0.85rem !important; letter-spacing: 1px; }
.ocn-ev-date { font-size: 1.5rem !important; font-weight: 700; }
.ocn-ev-loc  { font-size: 1rem !important; }

/* SECTION TITLES */
.ocn-section-title { font-size: clamp(1.8rem, 3vw, 2.6rem) !important; }
.ocn-section-more { font-size: 1rem !important; }

/* NEWS CARDS */
.ocn-news-title { font-size: 1.2rem !important; font-weight: 700; }
.ocn-news-meta { font-size: 0.9rem !important; }

/* RESULTS / STANDINGS TABLE */
.ocn-table-head-title { font-size: 1rem !important; }
.ocn-table-head-badge { font-size: 0.85rem !important; }
.ocn-table-rows .ocn-pos { font-size: 1.1rem !important; }
.ocn-table-cat-selector button { font-size: 0.85rem !important; }

/* SUBPAGE TITLES */
.ocn-page-title { font-size: clamp(2.4rem, 5vw, 4rem) !important; }
.ocn-page-sub { font-size: 1.2rem !important; }
.ocn-event-loc { font-size: 2.2rem !important; }
.ocn-event-date { font-size: 1rem !important; }
.ocn-event-desc { font-size: 1rem !important; }
.ocn-event-label { font-size: 1.05rem !important; }

/* BUTTONS */
.ocn-btn, .ocn-btn-primary, .ocn-btn-secondary { font-size: 1.05rem !important; padding: 14px 32px !important; }

/* FOOTER */
.ocn-footer-logo { font-size: 1.2rem !important; }
.ocn-footer-links a { font-size: 0.95rem !important; }
.ocn-footer-copy { font-size: 0.85rem !important; }
/* ===== OVERLAPPING LOGO NAV ===== */
.ocn-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 72px;
  background: var(--ocn-blue);
  display: flex;
  align-items: center;
  padding: 0 40px;
  z-index: 1000;
  overflow: visible !important;  /* allow logo to bleed out */
}

/* Logo link — sits centered vertically on nav, but logo img sticks out */
.ocn-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  z-index: 10;
  /* pull the logo link up so it overhangs the nav */
  margin-top: 32px;   /* pushes center down = top half inside nav, bottom half below */
}

.ocn-logo-img {
  height: 110px !important;   /* taller than nav (72px) → overflows top & bottom */
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  filter: none !important;     /* use actual logo colors */
  display: block;
  /* slight drop shadow so it reads against hero image */
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35)) !important;
}

/* Give body top-padding so content doesn't sit under fixed nav */
.ocn-site body, body.ocn-site {
  padding-top: 72px;
}

/* Hero sits flush — remove extra top spacing that the padding creates */
.ocn-hero {
  margin-top: -72px;
  padding-top: calc(72px + 80px);
}
/* ===== COMPLETE NAVY OVERHAUL ===== */

/* Global body background = navy */
body, html { background: #0f1f4a !important; color: #fff; }
.ocn-site, .ocn-page { background: #0f1f4a; }

/* All previously white/light sections → dark navy */
.ocn-news-card,
.ocn-event-card,
.ocn-event-body,
.ocn-news-article,
.ocn-news-article-body,
.ocn-table-block,
.ocn-sponsor-item {
  background: #162c6a !important;
  color: #fff !important;
}

/* Light blue tinted sections → deeper navy */
.ocn-subpage-body { background: #0f1f4a; }
[style*="background:#f5f7fc"],
[style*="background: #f5f7fc"] { background: #0f1f4a !important; }

/* Section text on dark */
.ocn-event-date, .ocn-event-desc { color: #c5d5f0 !important; }
.ocn-news-title, .ocn-news-title a { color: #fff !important; }
.ocn-news-meta { color: var(--ocn-lblue) !important; }
.ocn-event-label { color: var(--ocn-lblue) !important; }
.ocn-event-card.ocn-next .ocn-event-label { color: var(--ocn-orange) !important; }
.ocn-table-head { background: var(--ocn-blue) !important; }
.ocn-table-rows .ocn-row-name { color: #fff; }

/* Dividers not needed on dark bg */
.ocn-divider { background: rgba(255,255,255,0.08) !important; }

/* ===== LOGO POSITION FIX ===== */
.ocn-nav {
  height: 70px;
  overflow: visible !important;
  align-items: center;
  padding: 0 48px;          /* meer afstand van de rand */
}

/* Logo link — verwijder de margin-top die alles omlaag duwde */
.ocn-logo {
  display: flex;
  align-items: center;
  margin-top: 0 !important;  /* reset */
  position: relative;
  top: 0;                    /* helft boven nav = natuurlijk via overflow */
}

/* Logo image: groter dan de balk, gecentreerd erop */
.ocn-logo-img {
  height: 120px !important;
  width: auto !important;
  max-width: none !important;
  display: block;
  /* Logo heeft witte vlakken — mix-blend-mode:multiply maakt wit transparant op dark */
  mix-blend-mode: screen;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.5)) !important;
}

/* Kompenseer hoogte-overflow in hero */
.ocn-hero { padding-top: calc(70px + 60px); margin-top: -70px; }

/* ===== GROTERE LETTERTYPES (globaal) ===== */
.ocn-site * { letter-spacing: 0.01em; }

body, .ocn-page, .ocn-subpage-body, .ocn-event-body, .ocn-news-article-body {
  font-size: 19px !important;
  line-height: 1.7;
}

.ocn-nav-links a {
  font-size: 1.05rem !important;
  letter-spacing: 2px !important;
}

.ocn-hero-title  { font-size: clamp(3.2rem, 7vw, 5.5rem) !important; }
.ocn-hero-sub    { font-size: 1.4rem !important; }
.ocn-hero-tag    { font-size: 0.95rem !important; letter-spacing: 3px; }

.ocn-date-day    { font-size: 5.5rem !important; }
.ocn-date-month  { font-size: 1.3rem !important; }
.ocn-date-loc    { font-size: 1.15rem !important; }

.ocn-countdown-num { font-size: 3.2rem !important; }
.ocn-countdown-lbl { font-size: 0.9rem !important; letter-spacing: 2px; }

.ocn-section-title  { font-size: clamp(2rem, 3.5vw, 3rem) !important; }
.ocn-section-more   { font-size: 1.05rem !important; }

.ocn-ev-date { font-size: 1.6rem !important; }
.ocn-ev-loc  { font-size: 1.05rem !important; }
.ocn-ev-num  { font-size: 0.85rem !important; }

.ocn-news-title { font-size: 1.35rem !important; }
.ocn-news-meta  { font-size: 0.95rem !important; }

.ocn-page-title { font-size: clamp(2.8rem, 6vw, 4.5rem) !important; }
.ocn-page-sub   { font-size: 1.3rem !important; }

.ocn-event-loc  { font-size: 2.4rem !important; }
.ocn-event-desc { font-size: 1.05rem !important; line-height: 1.7; }

.ocn-btn, .ocn-btn-primary, .ocn-btn-secondary {
  font-size: 1.1rem !important;
  padding: 15px 36px !important;
  letter-spacing: 1.5px;
}

.ocn-table-head-title { font-size: 1.05rem !important; }
.ocn-table-head-badge { font-size: 0.9rem !important; }
.ocn-table-cat-selector button { font-size: 0.9rem !important; }

.ocn-footer-logo { font-size: 1.3rem !important; }
.ocn-footer-links a { font-size: 1rem !important; }
.ocn-footer-copy { font-size: 0.9rem !important; }
/* ===================================================
   v2.4 — FONT SCALE-UP + BLUE→WHITE + SPONSORS NAVY
   =================================================== */

/* ─ MENU NAV LINKS ─ */
.ocn-nav-links a {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  color: #fff !important;
  text-transform: uppercase;
}
.ocn-nav-links a:hover, .ocn-nav-links a.active { color: var(--ocn-orange) !important; }

/* ─ HERO ─ */
.ocn-hero-tag    { font-size: 1rem !important; letter-spacing: 3px; color: #fff !important; }
.ocn-hero-title  { font-size: clamp(3.5rem, 8vw, 6.5rem) !important; line-height: 1.0; color: #fff !important; }
.ocn-hero-sub    { font-size: 1.6rem !important; color: rgba(255,255,255,0.85) !important; }

/* Countdown */
.ocn-countdown-num { font-size: 3.8rem !important; color: #fff !important; }
.ocn-countdown-lbl { font-size: 0.95rem !important; color: rgba(255,255,255,0.7) !important; letter-spacing: 2px; }

/* Date card */
.ocn-date-day   { font-size: 6rem !important; color: #fff !important; }
.ocn-date-month { font-size: 1.4rem !important; color: rgba(255,255,255,0.8) !important; }
.ocn-date-loc   { font-size: 1.2rem !important; color: var(--ocn-orange) !important; }

/* Buttons */
.ocn-btn-primary, .ocn-btn-secondary, .ocn-btn {
  font-size: 1.2rem !important;
  padding: 16px 40px !important;
  letter-spacing: 2px;
  font-weight: 800 !important;
}

/* ─ AGENDA STRIP ─ */
.ocn-ev-num  { font-size: 0.9rem !important; color: rgba(255,255,255,0.6) !important; }
.ocn-ev-date { font-size: 1.8rem !important; color: #fff !important; font-weight: 800 !important; }
.ocn-ev-loc  { font-size: 1.1rem !important; color: rgba(255,255,255,0.85) !important; }
.ocn-ev-badge { font-size: 0.75rem !important; }
.ocn-agenda-item { background: rgba(255,255,255,0.07); }
.ocn-agenda-item.next { background: var(--ocn-orange); }
.ocn-agenda-item.done { background: rgba(255,255,255,0.03); opacity: 0.55; }

/* ─ SECTION TITLES ─ */
.ocn-section-title {
  font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
  color: #fff !important;
}
.ocn-section-title span { color: var(--ocn-orange) !important; }
.ocn-section-more { font-size: 1.1rem !important; color: var(--ocn-lblue) !important; }

/* ─ NEWS CARDS ─ */
.ocn-news-title  { font-size: 1.45rem !important; color: #fff !important; font-weight: 700 !important; }
.ocn-news-meta   { font-size: 1rem !important; color: var(--ocn-orange) !important; }
.ocn-news-cat    { font-size: 0.85rem !important; }

/* ─ RESULTS & STANDINGS TABLE ─ */
.ocn-table-head-title  { font-size: 1.1rem !important; color: #fff !important; }
.ocn-table-head-badge  { font-size: 0.95rem !important; color: #fff !important; background: var(--ocn-orange) !important; }

/* Category selector buttons */
.ocn-cat-btn, .ocn-tab-btn {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  color: #fff !important;
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  letter-spacing: 1px;
}
.ocn-cat-btn.active, .ocn-tab-btn.active,
.ocn-cat-btn:hover,  .ocn-tab-btn:hover {
  background: var(--ocn-orange) !important;
  color: #fff !important;
  border-color: var(--ocn-orange) !important;
}

/* Result rows */
.ocn-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 1.15rem !important;
}
.ocn-row:hover { background: rgba(255,255,255,0.04); }
.ocn-pos {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.45) !important;
  min-width: 32px;
  text-align: right;
}
.ocn-pos.p1 { color: var(--ocn-orange) !important; font-size: 1.5rem !important; }
.ocn-pos.p2 { color: #c0c8e0 !important; }
.ocn-pos.p3 { color: #a08060 !important; }
.ocn-row-name { flex: 1; font-size: 1.15rem !important; color: #fff !important; }
.ocn-row-name strong { font-weight: 700; color: #fff; }
.ocn-row-pts  { font-size: 1rem !important; color: var(--ocn-orange) !important; font-weight: 700; white-space: nowrap; }
.ocn-row-sub  { font-size: 0.9rem !important; color: rgba(255,255,255,0.5) !important; }

/* ─ SPONSORS SECTION — NAVY ─ */
.ocn-sponsors-wrap {
  background: #0f1f4a !important;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ocn-sponsor-item {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  font-size: 1.1rem !important;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.12);
}
.ocn-section-title[style*="text-align:center"],
.ocn-section-title[style*="text-align: center"] {
  color: #fff !important;
}

/* ─ SUBPAGE HERO TEXT ─ */
.ocn-page-title { font-size: clamp(3rem, 7vw, 5rem) !important; color: #fff !important; }
.ocn-page-sub   { font-size: 1.4rem !important; color: var(--ocn-lblue) !important; }

/* ─ ALL BLUE TEXT → WHITE ON DARK BG ─ */
.ocn-event-label,
.ocn-badge,
.ocn-section-more,
.ocn-news-card *,
a.ocn-section-more { color: #fff !important; }
a.ocn-section-more { color: var(--ocn-orange) !important; }
.ocn-event-card .ocn-event-label { color: var(--ocn-lblue) !important; }
.ocn-event-card.ocn-next .ocn-event-label { color: var(--ocn-orange) !important; }

/* ─ GENERAL LINK COLORS ON DARK ─ */
.ocn-page a:not(.ocn-btn):not(.ocn-btn-primary):not(.ocn-btn-secondary):not(.ocn-logo) {
  color: var(--ocn-orange);
}

/* Subpage event body text */
.ocn-event-body * { color: #fff; }
.ocn-event-date { color: rgba(255,255,255,0.7) !important; }
.ocn-badge-past { background: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.6) !important; }
/* ===== v2.5 — LOGO POSITIE + HEADER FOTO UITLIJNING ===== */

/* Nav: items bovenaan uitlijnen zodat logo vanaf top-10px hangt */
.ocn-nav {
  align-items: flex-start !important;
  padding-top: 10px !important;
  overflow: visible !important;
}

/* Logo link: geen extra margin/top */
.ocn-logo {
  margin-top: 0 !important;
  top: 0 !important;
  position: relative !important;
  align-self: flex-start;
}

/* Nav links: verticaal gecentreerd in de 70px balk */
.ocn-nav-links {
  display: flex;
  align-items: center;
  height: 50px;        /* (70px nav - 10px padding-top) / 2 gecentreerd */
  margin-top: 0;
  align-self: center;
}

.ocn-nav-toggle {
  align-self: center;
  margin-top: 0;
}

/* Hero achtergrondafbeelding: uitlijnen vanaf bovenkant */
.ocn-hero {
  background-position: top center !important;
  background-size: cover !important;
}/* ==============================================
   v2.6 — FONT SCALE + SCROLL TABS + CONTRAST FIX
   15px base / 21px large / 48px titles
   ============================================== */

/* ── GLOBAL BASE ── */
.ocn-site body,
.ocn-page,
.ocn-subpage-body {
  font-size: 15px !important;
  line-height: 1.65;
}

/* ── NAV ── */
.ocn-nav-links a {
  font-size: 15px !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
}

/* ── HERO ── */
.ocn-hero-title { font-size: 48px !important; }
.ocn-hero-sub   { font-size: 21px !important; }
.ocn-hero-tag   { font-size: 15px !important; }

/* ── COUNTDOWN ── */
.ocn-countdown-num { font-size: 48px !important; }
.ocn-countdown-lbl { font-size: 15px !important; }

/* ── DATE CARD ── */
.ocn-date-day   { font-size: 48px !important; }
.ocn-date-month { font-size: 21px !important; }
.ocn-date-loc   { font-size: 15px !important; }

/* ── AGENDA STRIP ── */
.ocn-ev-date { font-size: 21px !important; }
.ocn-ev-loc  { font-size: 15px !important; }
.ocn-ev-num  { font-size: 15px !important; }
.ocn-ev-badge { font-size: 15px !important; }

/* ── SECTION TITLES ── */
.ocn-section-title { font-size: 48px !important; }
.ocn-section-more  { font-size: 15px !important; }

/* ── NEWS ── */
.ocn-news-title { font-size: 21px !important; }
.ocn-news-meta  { font-size: 15px !important; }

/* ── RESULTS / STANDINGS ── */
.ocn-table-head-title { font-size: 15px !important; }
.ocn-table-head-badge { font-size: 15px !important; }
.ocn-row-name  { font-size: 21px !important; }
.ocn-row-name strong { font-weight: 700; }
.ocn-pos       { font-size: 21px !important; }
.ocn-pos.p1    { font-size: 21px !important; }
.ocn-row-pts   { font-size: 15px !important; }
.ocn-row-sub   { font-size: 15px !important; }

/* CATEGORY SELECTOR — horizontaal scrollbaar, NIET groter worden */
.ocn-table-cat-selector,
.ocn-cat-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;     /* nooit wrappen */
  overflow-x: auto !important;      /* horizontaal scrollen */
  overflow-y: hidden;
  gap: 6px !important;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--ocn-orange) rgba(255,255,255,0.1);
}
.ocn-table-cat-selector::-webkit-scrollbar,
.ocn-cat-tabs::-webkit-scrollbar { height: 4px; }
.ocn-table-cat-selector::-webkit-scrollbar-thumb,
.ocn-cat-tabs::-webkit-scrollbar-thumb { background: var(--ocn-orange); border-radius: 0; }

/* Category buttons — contrast fix: donkere achtergrond, WITTE tekst */
.ocn-cat-btn,
.ocn-tab-btn {
  flex-shrink: 0;                    /* niet samendrukken */
  white-space: nowrap;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
  background: #162c6a !important;    /* donker navy — geen wit-op-wit */
  color: #fff !important;            /* wit op donker = leesbaar */
  border: 1px solid rgba(255,255,255,0.25) !important;
  letter-spacing: 1px;
}
.ocn-cat-btn.active,
.ocn-tab-btn.active {
  background: var(--ocn-orange) !important;
  border-color: var(--ocn-orange) !important;
  color: #fff !important;
}
.ocn-cat-btn:hover,
.ocn-tab-btn:hover {
  background: rgba(240,120,32,0.6) !important;
  color: #fff !important;
}

/* ── SUBPAGE TITLES ── */
.ocn-page-title    { font-size: 48px !important; }
.ocn-page-sub      { font-size: 21px !important; }
.ocn-section-title { font-size: 48px !important; }
.ocn-event-loc     { font-size: 21px !important; }
.ocn-event-label   { font-size: 15px !important; }
.ocn-event-date    { font-size: 15px !important; }
.ocn-event-desc    { font-size: 15px !important; }

/* ── BUTTONS ── */
.ocn-btn,
.ocn-btn-primary,
.ocn-btn-secondary { font-size: 15px !important; padding: 13px 32px !important; }

/* ── FOOTER ── */
.ocn-footer-logo    { font-size: 21px !important; }
.ocn-footer-links a { font-size: 15px !important; }
.ocn-footer-copy    { font-size: 15px !important; }

/* ── SUBPAGE TABS (uitslagen-pagina) ── */
.ocn-cat-tabs {
  margin-bottom: 16px;
}/* ==============================================
   v2.7 — DROPDOWN + POLYGON POS + BREEDTE + SPONSORS
   ============================================== */

/* ─ RESULTS/STANDINGS: vaste breedte, niet uitrekken ─ */
.ocn-results-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  max-width: 960px;
  margin: 0 auto;
}
.ocn-table-block {
  background: #162c6a !important;
  min-width: 0;           /* voorkomt uitrekken in grid */
  overflow: hidden;
}
.ocn-table-head {
  background: var(--ocn-blue) !important;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ocn-table-rows { padding: 0 8px 8px; }

/* ─ DROPDOWN CATEGORIE-SELECTOR ─ */
.ocn-table-cat-selector {
  padding: 10px 12px 8px !important;
  display: block !important;
  overflow: visible !important;
}
.ocn-cat-select {
  width: 100%;
  background: #0f1f4a;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px !important;
  font-weight: 700;
  padding: 9px 12px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F07820' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  letter-spacing: 1px;
}
.ocn-cat-select:focus { outline: 2px solid var(--ocn-orange); outline-offset: 0; }
.ocn-cat-select option { background: #0f1f4a; color: #fff; }

/* ─ ROW ─ */
.ocn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ocn-row:last-child { border-bottom: none; }
.ocn-row-name { flex: 1; font-size: 15px !important; color: #fff !important; min-width: 0; }
.ocn-row-name strong { font-weight: 700; }
.ocn-row-pts { font-size: 15px !important; color: var(--ocn-orange) !important; font-weight: 700; white-space: nowrap; }

/* ─ POLYGON POSITIEVAKJE ─ */
.ocn-pos-poly {
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
  width: 44px;
  min-width: 44px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 21px !important;
  font-weight: 800;
  font-style: italic;
  flex-shrink: 0;
}

/* ─ SPONSORS: uitlijning fixen ─ */
.ocn-sponsors-wrap {
  background: #0f1f4a !important;
  padding: 60px 0;
}
.ocn-sponsors-wrap .ocn-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
.ocn-sponsors-wrap .ocn-section-title {
  text-align: center !important;
  display: block;
  width: 100%;
  margin-bottom: 36px !important;
  color: #fff !important;
  font-size: 48px !important;
}
.ocn-sponsor-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: center !important;
  justify-content: center !important;
}
.ocn-sponsor-item {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.15) !important;
  padding: 18px 32px;
  text-align: center;
  min-width: 140px;
}

/* Mobile: stack results ─ */
@media (max-width: 700px) {
  .ocn-results-grid { grid-template-columns: 1fr !important; }
}/* ==============================================
   v2.8 — BOXED LAYOUT + NAV INNER + FIXES
   ============================================== */

/* ─ BOXED CONTAINER — gedeeld door alle secties ─ */
.ocn-section,
.ocn-nav-inner,
.ocn-sponsors-wrap .ocn-section {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  width: 100%;
  box-sizing: border-box;
}

/* ─ NAV: gebruik inner container voor uitlijning ─ */
.ocn-nav {
  padding: 0 !important;  /* padding nu op inner */
  display: flex;
  align-items: flex-start;
  padding-top: 10px !important;
  overflow: visible !important;
}
.ocn-nav-inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding-top: 10px;
  padding-bottom: 0;
}
.ocn-nav-links {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 4px;
  flex-wrap: nowrap;
}

/* ─ HERO INNER: zelfde breedte als boxed ─ */
.ocn-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

/* ─ RESULTS GRID: in .ocn-section, twee kolommen ─ */
.ocn-results-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 32px !important;
  width: 100%;
}

/* ─ AGENDA STRIP: locatie als grote tekst, date klein ─ */
.ocn-ev-date {
  font-size: 15px !important;
  color: rgba(255,255,255,0.6) !important;
  margin-bottom: 4px;
}
.ocn-ev-loc {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #fff !important;
  font-style: italic;
}
.ocn-agenda-item.next .ocn-ev-loc { color: #fff !important; }

/* ─ SPONSORS: titel links ─ */
.ocn-sponsors-wrap .ocn-section-title {
  text-align: left !important;
}

/* ─ SECTIE VERTICALE SPACING ─ */
.ocn-section { padding-top: 56px; padding-bottom: 56px; }
.ocn-sponsors-wrap .ocn-section { padding-top: 56px; padding-bottom: 56px; }

/* ─ MOBILE ─ */
@media (max-width: 768px) {
  .ocn-results-grid { grid-template-columns: 1fr !important; }
  .ocn-nav-inner, .ocn-section, .ocn-hero-inner { padding-left: 20px; padding-right: 20px; }
}/* ==============================================
   v2.9 — HERO RUIMTE / NAV RECHTS / TITELS / NAMEN
   ============================================== */

/* ─ HERO: meer witruimte onder knoppen en countdown ─ */
.ocn-hero {
  padding-bottom: 100px !important;
}
.ocn-hero-actions { margin-bottom: 0; }
.ocn-hero-aside   { padding-bottom: 16px; }

/* ─ NAV: logo links, links rechts uitgelijnd ─ */
.ocn-nav-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;  /* links raken de onderkant van de balk */
  padding-bottom: 0;
  gap: 0;
}
.ocn-nav-links {
  display: flex !important;
  align-items: flex-end !important;
  gap: 0 !important;
  padding-bottom: 0;
  height: 60px;            /* hoogte van de nav-balk minus logo-overhang */
}
.ocn-nav-links a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: #fff !important;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.ocn-nav-links a:hover {
  border-bottom-color: rgba(240,120,32,.5) !important;
  color: #fff !important;
}
.ocn-nav-links a.active,
.ocn-nav-links a:focus {
  border-bottom-color: var(--ocn-orange) !important;
  color: #fff !important;
  outline: none;
}

/* ─ RESULTATEN SECTIE-HEADER: alles op 1 rij ─ */
.ocn-results-grid .ocn-section-header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 12px;
  margin-bottom: 12px;
}
.ocn-results-grid .ocn-section-title {
  font-size: 36px !important;  /* 75% van 48px */
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  margin: 0;
}
.ocn-results-grid .ocn-section-more {
  white-space: nowrap !important;
  flex-shrink: 0;
  font-size: 15px !important;
}

/* ─ DROPDOWN CONTAINER ACHTERGROND: navy ─ */
.ocn-table-cat-selector {
  background: #0f1f4a !important;
  padding: 10px 12px !important;
}
.ocn-cat-select {
  background: #0f1f4a !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  width: 100%;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px !important;
  font-weight: 700;
  padding: 9px 36px 9px 12px;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F07820' stroke-width='2' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  letter-spacing: 1px;
}
.ocn-cat-select option { background: #0f1f4a; color: #fff; }
.ocn-cat-select:focus { outline: 2px solid var(--ocn-orange); }

/* ─ NAMEN 150% GROTER: voornaam vet, achternaam regular ─ */
.ocn-row-name {
  font-size: 23px !important;   /* 15px * 1.5 = 22.5 → 23px */
  color: #fff !important;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.ocn-row-name strong {
  font-weight: 700 !important;
  color: #fff !important;
}
.ocn-row-name .ocn-last {
  font-weight: 400 !important;
  color: rgba(255,255,255,0.85) !important;
}

/* Rij-hoogte aanpassen aan grotere namen */
.ocn-row {
  padding: 11px 10px !important;
  gap: 14px !important;
  align-items: center !important;
}

/* Pos-box iets groter voor de grotere tekst */
.ocn-pos-poly {
  width: 48px !important;
  min-width: 48px !important;
  height: 40px !important;
  font-size: 21px !important;
}/* ==============================================
   v3.0 — NAV FIX / HERO / POLYGON / PUNTEN
   ============================================== */

/* ─── NAV: vaste balk, logo overhangt, links IN de balk ─── */
.ocn-nav {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: 80px !important;
  background: var(--ocn-blue) !important;
  overflow: visible !important;
  padding: 0 !important;
  z-index: 1000;
  display: block !important;
}

.ocn-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  height: 80px !important;       /* exact nav-hoogte */
  display: flex !important;
  align-items: center !important; /* nav-links verticaal centreren in 80px */
  justify-content: space-between !important;
  position: relative;
}

/* Logo: hangt 10px van bovenkant, overflow naar beneden */
.ocn-logo {
  position: absolute !important;
  top: 10px !important;           /* 10px van bovenkant nav */
  left: 32px !important;
  z-index: 2;
  margin: 0 !important;
}
.ocn-logo-img {
  height: 110px !important;       /* overhangt 40px onder de balk */
  width: auto !important;
  display: block;
  mix-blend-mode: screen;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.5)) !important;
}

/* Nav-links: centreren in de 80px balk, naar rechts */
.ocn-nav-links {
  display: flex !important;
  align-items: center !important;
  height: 80px !important;
  margin-left: auto !important;
  gap: 0 !important;
  padding-left: 180px !important; /* ruimte voor het logo */
}
.ocn-nav-links a {
  display: inline-flex !important;
  align-items: center !important;
  height: 80px !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: #fff !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent !important;
  white-space: nowrap;
  transition: border-color .15s;
  box-sizing: border-box;
}
.ocn-nav-links a:hover  { border-bottom-color: rgba(240,120,32,.55) !important; }
.ocn-nav-links a.active { border-bottom-color: var(--ocn-orange) !important; }

/* Body padding voor vaste nav */
body.ocn-site, .ocn-site body { padding-top: 80px !important; }

/* ─── HERO: 100px hoger + content uitlijning ─── */
.ocn-hero {
  min-height: 680px !important;    /* was ~580, nu 100px meer */
  padding-top: 120px !important;
  padding-bottom: 120px !important;
  background-position: top center !important;
  background-size: cover !important;
  display: flex;
  align-items: center;
}

/* Hero inner: content links, countdown rechts */
.ocn-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
}

/* Hero titel: MTB regular, locatie bold */
.ocn-hero-title {
  font-size: 48px !important;
  line-height: 1.1;
  margin: 16px 0;
  font-weight: 400 !important;  /* default regular – overschreven per span */
}
.ocn-title-sub {
  font-weight: 400 !important;
  font-style: normal;
  display: block;
  font-size: 1em;
}
.ocn-title-loc {
  font-weight: 800 !important;
  font-style: italic;
  display: block;
  font-size: 1em;
  color: #fff;
}

/* ─── POLYGON – consistente parallelogram, zelfde richting ─── */
/* Alle polygon-vormen: linkerkant recht, rechterkant schuint → links */

/* Hero tag – regular tekst, parallelogram */
.ocn-hero-tag {
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 15px !important;
  background: var(--ocn-orange);
  color: #fff !important;
  padding: 5px 24px 5px 14px !important;
  display: inline-block;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Positie-vakje in tabel – zelfde parallelogram richting */
.ocn-pos-poly {
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%) !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 40px !important;
  font-size: 21px !important;
  font-weight: 800;
  font-style: italic;
}

/* Agenda badge – zelfde richting */
.ocn-ev-badge {
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%) !important;
}

/* Sectie-header badge (tabel) */
.ocn-table-head-badge {
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%) !important;
  padding: 4px 20px 4px 10px !important;
}

/* Knoppen – zelfde schuine kant rechts */
.ocn-btn-primary {
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%) !important;
  padding-right: 32px !important;
}
.ocn-btn-secondary {
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%) !important;
  padding-right: 32px !important;
}

/* ─── PUNTEN in klassement groter ─── */
.ocn-row-pts {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: var(--ocn-orange) !important;
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 768px) {
  .ocn-hero-inner { flex-direction: column; align-items: flex-start; }
  .ocn-nav-links { padding-left: 140px !important; }
  .ocn-nav-links a { padding: 0 10px !important; }
}/* ===== v3.1 — TITEL INTERLINIE + NL DATUMS ===== */

/* Titelbloktekst: regels dicht op elkaar */
.ocn-hero-title {
  line-height: 0.95 !important;
  margin: 12px 0 20px !important;
}
.ocn-title-sub {
  display: block;
  line-height: 1 !important;
  margin-bottom: 0.05em !important;
}
.ocn-title-loc {
  display: block;
  line-height: 1 !important;
  margin-top: 0 !important;
}/* ===== v3.1b — TITEL CURSIEF ─ beide regels ─ */
.ocn-title-sub,
.ocn-title-loc {
  font-style: italic !important;
}/* ===== v3.2 — NULINTERLINIE TITEL ===== */
.ocn-hero-title {
  line-height: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 12px 0 20px !important;
}
.ocn-title-sub,
.ocn-title-loc {
  display: block !important;
  line-height: 0.9 !important;
  margin: 0 !important;
  padding: 0 !important;
}/* ===== v3.3 — BR VERWIJDERD + VEILIGHEIDSNET ===== */
.ocn-hero-title br { display: none !important; }
.ocn-hero-title {
  line-height: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.ocn-title-sub,
.ocn-title-loc {
  line-height: 0.88 !important;
  margin: 0 !important;
  padding: 0 !important;
}/* ===== v3.4 — HERO SPACING ===== */
/* Ruimte tussen "Volgende wedstrijd" tag en de titel */
.ocn-hero-tag   { margin-bottom: 28px !important; }
/* Ruimte tussen datum en knoppen */
.ocn-hero-sub   { margin-bottom: 36px !important; }
/* ── v3.8 subpage tables ── */
/* Geen tabelranden, nette subpagina-stijl */
.ocn-sub-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.ocn-sub-table th,
.ocn-sub-table td {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 10px 12px;
  vertical-align: middle;
}
.ocn-sub-table thead tr {
  border-bottom: 2px solid rgba(255,255,255,0.12) !important;
}
.ocn-sub-table thead th {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding-bottom: 8px;
}
.ocn-sub-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.ocn-sub-table tbody tr:last-child {
  border-bottom: none !important;
}
.ocn-sub-table tbody tr:hover {
  background: rgba(255,255,255,0.03) !important;
}
.col-pos  { width: 60px; text-align: center; }
.col-pts  { width: 64px; text-align: right;  }
.col-name { text-align: left; }

/* Uitslagen subpagina – dezelfde table reset */
.ocn-results-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.ocn-results-table th,
.ocn-results-table td {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 10px 12px;
  vertical-align: middle;
}
.ocn-results-table thead tr {
  border-bottom: 2px solid rgba(255,255,255,0.12) !important;
}
.ocn-results-table thead th {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding-bottom: 8px;
}
.ocn-results-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.ocn-results-table tbody tr:last-child {
  border-bottom: none !important;
}
.ocn-results-table tbody tr:hover {
  background: rgba(255,255,255,0.03) !important;
}

/* Dropdown categorie-selector op subpagina's */
.ocn-cat-select {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  background: #0f1f4a;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 8px 12px;
  cursor: pointer;
  appearance: auto;
}
.ocn-cat-select option { background: #0f1f4a; color: #fff; }

/* Sectie binnen subpagina's inpassen in tabel-block */
.ocn-klas-panel.ocn-table-block,
.ocn-tab-panel .ocn-table-block {
  padding: 0 !important;
}
.ocn-klas-panel.ocn-table-block table,
.ocn-tab-panel .ocn-table-block table {
  margin: 0;
}
/* ── v4.0: agenda grid, accordion, nieuws cards, informatie, nav fix ── */

/* Nav on all pages */
body.ocn-site { padding-top: 80px; }

/* Subpage hero */
.ocn-page-hero {
  background: var(--ocn-blue);
  padding: 60px 0 48px;
  margin-bottom: 48px;
}
.ocn-page-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 48px;
  font-weight: 800;
  font-style: italic;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1;
}
.ocn-page-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 21px;
  color: rgba(255,255,255,.6);
  margin: 0;
}
.ocn-subpage-body { padding-bottom: 64px; }

/* ── AGENDA 3-kol ── */
.ocn-agenda-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .ocn-agenda-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px) { .ocn-agenda-grid { grid-template-columns: 1fr; } }
.ocn-agenda-card {
  background: #162c6a;
  display: flex;
  flex-direction: column;
  padding: 24px 20px 20px;
  border-left: 4px solid var(--ocn-orange);
  gap: 8px;
}
.ocn-agenda-card.ocn-past  { border-left-color: rgba(255,255,255,.2); opacity: .65; }
.ocn-agenda-card.ocn-next  { border-left-color: var(--ocn-lblue); }
.ocn-agenda-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ocn-agenda-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing:.6px;
  text-transform: uppercase; color: var(--ocn-orange);
}
.ocn-agenda-loc {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 32px; font-weight: 800; font-style: italic;
  color: #fff; margin: 0; line-height: 1;
}
.ocn-agenda-date {
  font-size: 15px; color: rgba(255,255,255,.55); margin: 0;
}
.ocn-agenda-desc {
  font-size: 15px; color: rgba(255,255,255,.75); margin: 0; flex: 1;
}
.ocn-agenda-card .ocn-btn { margin-top: 16px; align-self: flex-start; }
.ocn-ev-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase;
  background: var(--ocn-orange);
  color: #fff; padding: 3px 10px 3px 6px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.ocn-ev-badge.ocn-badge-past { background: rgba(255,255,255,.2); }

/* ── ACCORDION uitslagen ── */
.ocn-accordion-item { margin-bottom: 4px; }
.ocn-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #162c6a;
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 21px;
  font-weight: 700;
  text-align: left;
  border-left: 4px solid var(--ocn-orange);
}
.ocn-accordion-trigger:hover { background: #1e3a80; }
.ocn-acc-arrow {
  font-size: 14px;
  transition: transform .25s;
  flex-shrink: 0;
  margin-left: 12px;
  color: var(--ocn-orange);
}
.ocn-accordion-trigger.open .ocn-acc-arrow { transform: rotate(180deg); }
.ocn-accordion-body {
  display: none;
  background: #0f1f4a;
  padding: 20px;
}
.ocn-accordion-body.open { display: block; }

/* ── NIEUWS kaarten ── */
.ocn-news-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .ocn-news-cards-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px) { .ocn-news-cards-grid { grid-template-columns: 1fr; } }
.ocn-news-card-link {
  background: #162c6a;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: background .15s;
}
.ocn-news-card-link:hover { background: #1e3a80; }
.ocn-news-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #0f1f4a;
}
.ocn-news-card-img-placeholder::after {
  content: '';
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg,#1A3C8B 0%,#0f1f4a 100%);
}
.ocn-news-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.ocn-news-card-date {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; color: rgba(255,255,255,.45);
  letter-spacing: .5px; margin-bottom: 8px;
}
.ocn-news-card-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 21px; font-weight: 700; color: #fff;
  margin: 0 0 10px; line-height: 1.2;
}
.ocn-news-card-excerpt {
  font-size: 15px; color: rgba(255,255,255,.65);
  margin: 0; flex: 1;
}

/* ── INFORMATIE blokken ── */
.ocn-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 700px) { .ocn-info-grid { grid-template-columns: 1fr; } }
.ocn-info-block {
  background: #162c6a;
  padding: 28px 24px;
  border-left: 4px solid var(--ocn-orange);
}
.ocn-info-block-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px; font-weight: 800; font-style: italic;
  color: #fff; margin: 0 0 16px; line-height: 1;
}
.ocn-info-block-title span { color: var(--ocn-orange); }
.ocn-info-block p {
  font-size: 15px; color: rgba(255,255,255,.8);
  margin: 0 0 12px; line-height: 1.6;
}
.ocn-info-block p:last-child { margin-bottom: 0; }

/* Woonplaats sub-text */
.ocn-row-sub {
  font-size: 13px !important;
  color: rgba(255,255,255,.45) !important;
  margin-top: 1px;
}
/* ── v4.1 fixes ── */

/* Hidden: altijd verborgen, ook als TheGem iets probeert te overriden */
.hidden { display: none !important; }

/* Pos-poly kleur: wit als basis (wordt via inline overschreven voor pos 1) */
.ocn-pos-poly { color: #ffffff !important; }

/* Body padding-top ALLEEN voor niet-homepagina (subpagina's) */
body.ocn-site { padding-top: 0; }
.ocn-page-hero { margin-top: 80px; }

/* Footer logo */
.ocn-footer-logo-link { display: flex; align-items: center; }
.ocn-footer-logo-img {
  height: 56px;
  mix-blend-mode: screen;
}
.ocn-footer-logo-link:hover { opacity: .8; }

/* Klassement select + panel spacing */
.ocn-klas-panel { margin-bottom: 0; }
/* v4.2 — global font fix */
body.ocn-site,
body.ocn-site *,
body.ocn-site input,
body.ocn-site button,
body.ocn-site select,
body.ocn-site textarea {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif !important;
}


/* ===== v4.3 - HAMBURGER MOBILE NAV ===== */

/* Standaard zichtbaar — verberg op breed scherm */
.ocn-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 10px;
  min-width: 44px;
  min-height: 44px;
  margin-left: auto;
  flex-shrink: 0;
  z-index: 1010;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
}

/* Desktop (>768px): verberg hamburger */
@media (min-width: 769px) {
  .ocn-nav-toggle {
    display: none !important;
  }
}

/* Mobile (<=768px): nav-links als dropdown */
@media (max-width: 768px) {

  /* Nav inner: logo in flow, hamburger rechts */
  .ocn-nav-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* Logo: absoluut, hangt net als desktop iets onder de balk */
  .ocn-logo {
    position: absolute !important;
    top: 8px !important;
    left: 16px !important;
    z-index: 2;
  }
  .ocn-logo-img {
    height: 90px !important;
  }

  /* Nav-links standaard verbergen, dropdown bij .open */
  .ocn-nav-links {
    display: none !important;
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;
    background: #1A3C8B !important;
    flex-direction: column !important;
    padding: 8px 0 24px !important;
    height: auto !important;
    z-index: 1005 !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.5) !important;
    margin: 0 !important;
  }

  .ocn-nav-links.open {
    display: flex !important;
  }

  .ocn-nav-links a {
    display: block !important;
    height: auto !important;
    padding: 16px 24px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    border-bottom: none !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    width: 100% !important;
    text-align: left !important;
    color: #ffffff !important;
    white-space: nowrap;
  }

  .ocn-nav-links a:first-child {
    border-top: none !important;
  }

  .ocn-nav-links a.active {
    color: #F07820 !important;
    border-bottom: none !important;
  }

  .ocn-nav-links a:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #F07820 !important;
    border-bottom: none !important;
  }
}
/* ===== v4.4 - MOBILE OVERFLOW FIX ===== */
html, body.ocn-site {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
@media (max-width: 768px) {
  /* Grid: 1 kolom op mobiel */
  .ocn-results-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* Sectie header: link mag op nieuwe regel */
  .ocn-section-header,
  .ocn-results-grid .ocn-section-header {
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
  }
  .ocn-section-more {
    white-space: normal !important;
    word-break: break-word !important;
  }
  /* Cat selector: horizontaal scrollbaar */
  .ocn-table-cat-selector,
  .ocn-cat-tabs {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Begrens accordion en tabellen */
  .ocn-accordion-item,
  .ocn-accordion-inner,
  .ocn-tab-panel,
  .ocn-table-block {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .ocn-sub-table,
  .ocn-results-table {
    width: 100% !important;
    table-layout: auto !important;
  }
  .col-name, .ocn-row-name {
    word-break: break-word !important;
    white-space: normal !important;
  }
  .ocn-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .ocn-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}