/* =========================
  BASIS KLEUREN
========================= */
:root {
 --cassiopeia-color-primary: #ffcc00;
 --cassiopeia-color-link: #ffcc00;
 --cassiopeia-color-hover: #e6b800;
}

/* =========================
  ALGEMEEN
========================= */
body {
 background-color: #2b2b2b;
 color: #ffffff;
}

a {
 color: #ffcc00;
 text-decoration: none;
}

a:hover {
 color: #e6b800;
 text-decoration: underline;
}

a:visited {
 color: #ff0000;
}

/* =========================
  HEADER / MENU
========================= */

.container-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.container-header .mod-menu {
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
}

/* Desktop menu */
@media (min-width: 700px) {
 .navbar-nav {
   display: flex;
   flex-direction: row;
   gap: 20px;
 }
}

/* Mobiel menu (Safari / iPhone fix) */
@media (max-width: 600px) {
 .navbar-nav {
   flex-direction: column;
   gap: 5px;
 }

 .navbar-nav .nav-link {
   padding: 6px 10px;
   font-size: 15px;
 }

 .navbar-collapse {
   background: #000;
   padding: 10px;
 }
}

/* Menu styling */
.navbar,
.header {
 background-color: #000000;
}

.navbar-nav .nav-link {
 color: #ffffff;
 transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
 color: #ffcc00;
 background-color: rgba(255, 204, 0, 0.1);
 border-radius: 4px;
}

.navbar-nav .active > .nav-link {
 color: #ffcc00;
 font-weight: bold;
}

/* =========================
  TICKER (BEWEGENDE TEKST)
========================= */
.ticker {
 overflow: hidden;
 white-space: nowrap;
 width: 100%;
}

.ticker-track {
 display: inline-flex;
 animation: scrollLoop 30s linear infinite;
 will-change: transform;
}

.ticker-text {
 font-size: 22px;
 font-weight: bold;
 padding-right: 50px;
 white-space: nowrap;

 background: linear-gradient(90deg, #ffff00, #ffa500, #ff0000, #ffff00);
 background-size: 300% 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

 animation: gradientMove 12s ease-in-out infinite;
}

@keyframes scrollLoop {
 0% { transform: translateX(0); }
 100% { transform: translateX(-50%); }
}

@keyframes gradientMove {
 0% { background-position: 0% center; }
 50% { background-position: 100% center; }
 100% { background-position: 0% center; }
}

/* =========================
  CONTENT BLOKKEN
========================= */
.card,
.moduletable {
 background-color: #333333;
 color: #ffffff;
 border: 1px solid #444;
 border-radius: 6px;
}

/* =========================
  BUTTONS
========================= */
.btn {
 background-color: #ffcc00;
 color: #000000;
 border: none;
}

.btn:hover {
 background-color: #e6b800;
}

.btn-outline-primary {
 color: #ffcc00;
 border-color: #ffcc00;
}

.btn-outline-primary:hover {
 background-color: #ffcc00;
 color: #000000;
}

/* =========================
  FORMULIEREN
========================= */
input,
textarea,
select {
 background-color: #1f1f1f;
 color: #ffffff;
 border: 1px solid #555;
}

input:focus,
textarea:focus,
select:focus {
 border-color: #ffcc00;
 outline: none;
}

/* =========================
  FOOTER
========================= */
.footer {
 background-color: #000000;
 color: #cccccc;
}

/* =========================
  TABELLEN
========================= */
table {
 color: #ffffff;
}

table tr:nth-child(even) {
 background-color: #333;
}

hr {
 border-color: #444;
}

/* =========================
  TITELS
========================= */
h1 {
 color: #ffcc00;
}

h2 {
 color: red;
}

/* =========================
  MENU PERFECT CENTREREN
========================= */

/* Header layout */
.container-header {
    display: flex ;
    justify-content: space-between ;
    align-items: center ;
}

/* Logo links */
.navbar-brand {
 flex: 0 0 auto;
}

/* Menu container */
.navbar {
 flex: 1;
 display: flex;
 justify-content: center;   /* 👈 dit centreert alles */
}

/* Menu zelf */
.navbar-nav {
 display: flex;
 justify-content: center;
 align-items: center;
}

/* Desktop spacing */
@media (min-width: 700px) {
 .navbar-nav {
   gap: 20px;
 }
}

/* Mobiel netjes onder elkaar */
@media (max-width: 600px) {
 .navbar {
   justify-content: flex-end; /* hamburger rechts */
 }

 .navbar-nav {
   align-items: flex-start;
 }
}

/* Content smaller en gecentreerd */
.container,
.com-content-article__body,
.item-page {
 max-width: 500px;     /* maakt tekst compacter */
 margin: 0 auto;       /* centreert blok */
 padding: 0 20px;      /* ruimte links/rechts */
}

/* Titels ook netjes centreren */
h1, h2 {
 text-align: center;
}

/* Paragrafen iets rustiger leesbaar */
p {
 line-height: 1.6;
}

/* MAIN-TOP (waar je menu nu zit) centreren */
.container-main-top,
.main-top,
.topbar {
 display: flex;
 flex-direction: column;
 align-items: center;
}

/* Menu in main-top centreren */
.container-main-top .moduletable,
.container-main-top .mod-menu {
 text-align: center;
}
/* ❌ Bootstrap hamburger volledig uitzetten */
.navbar-toggler {
 display: none !important;
}

/* ❌ collapse gedrag uitzetten (Safari/iPhone fix) */
.navbar-collapse {
 display: flex !important;
 flex-basis: auto !important;
 justify-content: center !important;
}

/* ✅ Menu altijd zichtbaar */
.navbar-nav {
 display: flex !important;
 flex-direction: column !important; /* onder elkaar op mobiel */
 align-items: center !important;
 width: 100%;
}

/* ✅ Menu links mooi als blokken */
.navbar-nav .nav-link {
 display: block;
 width: 90%;
 margin: 6px auto;
 padding: 12px;
 background: #0f6f85;
 border-radius: 8px;
 text-align: center;
}

/* Actief item */
.navbar-nav .active > .nav-link {
 background: #0c5a6c;
 color: #ff3b30 !important;
}

/* Desktop weer horizontaal houden */
@media (min-width: 768px) {
 .navbar-nav {
   flex-direction: row !important;
 }

 .navbar-nav .nav-link {
   width: auto;
   background: transparent;
   margin: 0 10px;
   padding: 6px 10px;
 }

/* TEKST + TITEL (Wie ben ik) */
.com-content-article__body,
.item-page,
.article-body,
.com-content-article__title {
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
}

/* ===== ULTIEME FIX VOOR JOUW SITE ===== */

/* COMPLETE PHOCA BLOK FORCEREN */
#phocagallery {
    max-width: 800px !important;
    margin: 0 auto !important;
    display: block !important;
    text-align: center !important;
}

/* INNER CONTAINERS RESETTEN */
#phocagallery .pg-cv-mainbox,
#phocagallery .pg-cv-boxes {
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    text-align: center !important;
    float: none !important;
}

/* THUMBNAILS FIXEN (BELANGRIJK) */
#phocagallery .pg-cv-box {
    display: inline-block !important;
    float: none !important;
    margin: 10px !important;
}

/* EVENTUELE TABEL LAYOUT KILLEN */
#phocagallery table {
    margin: 0 auto !important;
}

/* TITEL + TEKST PERFECT OP 700px */
.com-content-article__body,
.com-content-article__title {
    max-width: 700px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}