/*
 * custom.css — User customisation overrides
 *
 * Add site-specific tweaks here. This file is loaded after template.css
 * so any rule here wins without needing !important.
 *
 * Do NOT edit template.css directly — put all changes here so they survive
 * future template updates.
 */


/* ===================================================================
   MAIN MENU — reconcile Joomla's mod_menu disclosure markup with the
   template's dropdown design.

   Joomla renders a parent item as:
     <button class="mod-menu__toggle-sub">
       <span class="mod-menu__heading">Coaching</span>
       <span class="icon-chevron-down"></span>
     </button>
     <ul class="mod-menu__sub list-unstyled small"> … </ul>

   template.css only styles `li > a` / `li > span`, so the <button> falls
   back to the browser default (16px / weight 400 / no padding) and the
   chevron is an empty box (no Joomla icon font is loaded). Visibility is
   also broken: mod-menu.css toggles the submenu with :where() rules that
   have ZERO specificity, so they always lose to `.site-nav ul ul` and a
   click/tap never opens the submenu (only mouse hover does).
   =================================================================== */

/* --- Parent toggle button: match a top-level <a> exactly --- */
.site-nav > ul > li > .mod-menu__toggle-sub {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  background: none;
  border: 0;
  border-radius: var(--border-radius);
  padding: 0.5rem 0.9rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  transition: background var(--transition-speed) var(--transition-ease),
              color var(--transition-speed) var(--transition-ease);
}

.site-nav .mod-menu__heading {
  font: inherit;
  color: inherit;
}

.site-nav > ul > li:hover > .mod-menu__toggle-sub,
.site-nav > ul > li:focus-within > .mod-menu__toggle-sub,
.site-nav > ul > li.active > .mod-menu__toggle-sub,
.site-nav > ul > li.current > .mod-menu__toggle-sub {
  background: var(--color-primary);
  color: #fff;
}

/* --- Chevron: draw one with CSS (no icon font is loaded) --- */
.site-nav .mod-menu__toggle-sub .icon-chevron-down {
  display: inline-block;
  width: 0;
  height: 0;
  margin-inline-start: 0.15rem;
  border: 0.3rem solid transparent;
  border-bottom-width: 0;
  border-top-color: currentColor;
  transition: transform var(--transition-speed) var(--transition-ease);
}
.site-nav .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down {
  transform: rotate(180deg);
}

/* --- Submenu: neutralise Bootstrap's .small so sizing is consistent --- */
.site-nav .mod-menu__sub.small {
  font-size: inherit;
}

/* --- Submenu visibility: also honour the button/menu.js state
       (aria-hidden), with enough specificity to beat template.css,
       so click / tap / keyboard open it too — not just hover. --- */
.site-nav .mod-menu__sub[aria-hidden="false"] {
  display: flex;
  flex-direction: column;
}

/* Kill the 4px dead gap between button and dropdown (hover flicker).
   Matches the nav breakpoint in template.css (horizontal bar >= 1200px). */
@media (min-width: 1200px) {
  .site-nav > ul > li > .mod-menu__sub {
    top: 100%;
  }
}

/* --- Below 1200px the menu is the off-canvas panel: full-width tappable
       rows (template.css leaves the base `align-items: center` in place,
       so items would otherwise shrink-wrap and centre) --- */
@media (max-width: 1199.98px) {
  .site-nav ul {
    align-items: stretch;
  }
  .site-nav > ul > li > .mod-menu__toggle-sub {
    width: 100%;
    justify-content: space-between;
  }

  /* Keep the open menu panel within the viewport (short landscape
     phones, or many items + an expanded submenu) instead of running
     off-screen with no way to scroll to the lower items. */
  .site-nav {
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}


/* ===================================================================
   LAYOUT — cap the content container at the width the template's own
   --container-max-width token intends (1200px). Bootstrap's default
   .container otherwise widens to 1320px on screens >= 1400px, which
   makes body text lines uncomfortably long. Leaves the 1140px step
   (1200-1399px) untouched.
   =================================================================== */
@media (min-width: 1400px) {
  .container {
    max-width: var(--container-max-width, 1200px);
  }
}


/* ===================================================================
   ARTICLE IMAGES — author controls
   -------------------------------------------------------------------
   A plain image (no class) is capped at a readable width (~640px),
   flush left with the text. The author widens / shrinks / floats /
   styles it with the classes below — each can be typed into the
   "Class" field of the image dialog, or picked from the Formats menu.
   Every rule is mirrored in editor.css so the backend preview agrees.

   SIZE      img-sm      small  (~320px)
             (none)      default (~640px)
             img-wide    full column width
   PLACE     (none)      block, flush left
             mx-auto     block, centred          (dialog: "Center")
             float-start float left, text wraps  (dialog: "Left")
             float-end   float right, text wraps (dialog: "Right")
   FINISH    img-round   rounded corners
             img-shadow  soft drop shadow
             img-frame   thin bordered frame
   Combine freely, e.g. class="float-end img-sm img-round".
   =================================================================== */
.main-content img {
  display: block;
  max-width: min(100%, 40rem);
  height: auto;
  margin: 1.5rem 0;
}

/* --- size (accepts the class on the <img> or on a <figure>) --- */
.main-content .img-sm,
.main-content .img-sm img   { max-width: 20rem; }

.main-content .img-wide,
.main-content .img-wide img  { max-width: 100%; }

/* --- placement: Bootstrap already floats/centres these; add spacing,
       and stack floats on phones where wrapping text is unreadable --- */
.main-content .float-start { margin: 0.3rem 1.5rem 1rem 0; }
.main-content .float-end   { margin: 0.3rem 0 1rem 1.5rem; }

@media (max-width: 575.98px) {
  .main-content .float-start,
  .main-content .float-end {
    float: none !important;
    margin-inline: 0;
  }
}

/* --- finish (combinable) --- */
.main-content .img-round,
.main-content .img-round img  { border-radius: var(--border-radius); }

.main-content .img-shadow,
.main-content .img-shadow img { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }

.main-content .img-frame,
.main-content .img-frame img {
  border: 1px solid var(--border-color);
  padding: 4px;
  background: #fff;
}

/* figures (caption / float) manage their own width; leave inline
   margins to Bootstrap's ms-*/me-* helpers used for float spacing */
.main-content figure {
  margin-block: 1.5rem;
}

.main-content figure img {
  max-width: 100%;
  margin: 0;
}

/* --- Linked image / figure (e.g. the home-page coaching cards):
       give it a hover affordance so it reads as clickable --- */
.main-content a > figure,
.main-content a > .figure {
  transition: transform var(--transition-speed) var(--transition-ease);
}

.main-content a:hover > figure,
.main-content a:hover > .figure {
  transform: translateY(-3px);
}

.main-content a:hover .figure-img {
  box-shadow: var(--shadow-md);
}

.main-content a:hover .figure-caption {
  color: var(--color-primary-dark);
}


/* ===================================================================
   EMBEDDED IFRAMES (Google Maps, video) — a pasted embed keeps its
   width="600" attribute and would otherwise overflow a narrow column
   (sidebar / mobile) and force a horizontal page scrollbar.
   =================================================================== */
.main-content iframe,
.sidebar iframe,
.sidebar-left iframe,
[class*="mod-custom"] iframe {
  max-width: 100%;
}

/* Video embeds (YouTube / Vimeo): a pasted embed also keeps its
   height="315", so on a narrow column max-width:100% shrinks the width
   but not the height and the video letterboxes / looks oversized. Drive
   the height from a 16:9 ratio instead so the frame scales cleanly. */
.main-content iframe[src*="youtube.com"],
.main-content iframe[src*="youtube-nocookie.com"],
.main-content iframe[src*="youtu.be"],
.main-content iframe[src*="vimeo.com"] {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 1.5rem 0;
}


/* ===================================================================
   ARTICLE TABLES — the small pricing / info tables pasted into an
   article. The front end had no table styling at all, and a table that
   was drag-resized in the editor also carries junk inline sizing
   (width: 34%, height: 436px, per-cell widths …) that stretches the
   rows — so two otherwise-identical tables end up looking different.
   Neutralise that inline sizing and give every article table one
   clean, consistent look.
   =================================================================== */
.main-content table {
  width: auto;
  max-width: 100%;
  margin: 1.5rem 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;                 /* clip the rounded corners */
  font-size: 0.95rem;
  line-height: 1.45;
}

/* strip the editor's drag-resize inline sizing so rows size to content */
.main-content table[style] { width: auto !important; height: auto !important; }
.main-content table[style] tr,
.main-content table[style] th,
.main-content table[style] td { width: auto !important; height: auto !important; }

.main-content th,
.main-content td {
  padding: 0.65rem 1rem;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--border-color);
}

/* header — a real <thead>, or the first row of a header-less table */
.main-content thead th,
.main-content table:not(:has(thead)) tr:first-child > * {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  border-bottom: 0;
}

/* zebra striping + flush last row (the > * selector also overrides the
   per-cell background Bootstrap's .table class sets) */
.main-content tbody tr:nth-child(even) > * { background: var(--color-surface); }
.main-content tbody tr:last-child > * { border-bottom: 0; }

@media (max-width: 575.98px) {
  .main-content table { width: 100%; font-size: 0.875rem; }
  .main-content th,
  .main-content td { padding: 0.5rem 0.65rem; }
}


/* ===================================================================
   DPATTACHMENTS — the attachment list ("Bijlagen") prints
   "Upload <date> door <user>" as one text node, with no option to omit
   the uploader. Hide that whole line; the filename and size stay.
   (To keep the date and drop only the name, add a Joomla language
   override for COM_DPATTACHMENTS_TEXT_UPLOADED_LABEL instead.)
   =================================================================== */
.main-content .dp-attachment__date {
  display: none;
}