/**

 * Louis One-Page — Dark premium, accentkleur via Customizer (standaard geel).

 */



@layer components {

  .louis-bg { background-color: #0c0c0c; }

  .louis-surface { background-color: #141414; }

  .louis-accent { color: var(--color-accent); }

  .louis-accent-bg { background-color: var(--color-accent); }

  .louis-accent-bg:hover { background-color: var(--color-accent-hover); }

  .louis-button-text { color: var(--color-button-text) !important; }

}



/* Contact-sectie: outline-knop “Contact” (volledige contactpagina) */

.louis-contact-cta-page:hover {

  color: var(--color-button-text) !important;

}



/* Knoppen met accentkleur: tekstkleur uit Customizer (b.v. zwart op geel) */

#site-header nav a[href="#contact"],

#site-header #mobile-menu a[href="#contact"],

#hero a[href="#contact"],

#contact a[href^="tel:"],

a.skip-link:focus { color: var(--color-button-text) !important; }



/* Smooth scroll offset for fixed header */

html { scroll-padding-top: 5rem; }



/* Scrollbar wordt via Customizer (Sitekleuren) uitgevoerd in footer-CSS indien ingeschakeld */



/* Quotes-balk onder header (webwinkel-stijl) */

.louis-quotes-bar {

  margin-top: 4rem;

  padding: 0.6rem 0;

  background-color: #141414;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  overflow: hidden;

}

@media (min-width: 1024px) {

  .louis-quotes-bar { margin-top: 5rem; }

}

.louis-quotes-bar__wrap {

  overflow: hidden;

  width: 100%;

}

.louis-quotes-bar__track {

  display: inline-flex;

  align-items: center;

  white-space: nowrap;

  animation: louis-quotes-scroll 40s linear infinite;

  will-change: transform;

}

.louis-quotes-bar__track:hover {

  animation-play-state: paused;

}

.louis-quotes-bar__item {

  flex-shrink: 0;

  padding-right: 2rem;

  font-size: 0.875rem;

  color: rgba(255, 255, 255, 0.85);

  font-style: italic;

}

.louis-quotes-bar__sep {

  flex-shrink: 0;

  padding-right: 2rem;

  color: var(--color-accent);

  font-size: 0.5rem;

  opacity: 0.8;

}

@keyframes louis-quotes-scroll {

  0% { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}



/* Screen reader only (Tailwind compat) */

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

.focus\:not-sr-only:focus { position: static; width: auto; height: auto; padding: inherit; margin: inherit; overflow: visible; clip: auto; white-space: normal; }



/* Sticky WhatsApp CTA on mobile — always visible */

.louis-whatsapp-fab {

  position: fixed;

  bottom: 1.5rem;

  right: 1.5rem;

  z-index: 50;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 3.5rem;

  height: 3.5rem;

  border-radius: 9999px;

  background-color: #25d366;

  color: #fff;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}

.louis-whatsapp-fab:hover {

  transform: scale(1.05);

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);

  color: #fff;

}



@media (min-width: 1024px) {

  .louis-whatsapp-fab { bottom: 2rem; right: 2rem; width: 4rem; height: 4rem; }

}



/* YouTube lightbox: standaard verborgen, JS toont met display:flex */

#louis-youtube-lightbox {

  display: none;

  visibility: hidden;

}



/* --- Hover-effecten (na Tailwind, daarom !important waar nodig) --- */



/* Tegels: omhoog + vergroting + schaduw */

.louis-tile-hover {

  transition: transform 0.3s ease, box-shadow 0.3s ease !important;

}

.louis-tile-hover:hover {

  transform: translateY(-8px) scale(1.03) !important;

  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--color-accent-rgb), 0.4) !important;

}



/* Navigatielinks — accent var(--color-accent) */

#site-header nav ul a[href^="#plek"],

#site-header nav ul a[href^="#medisch"],

#site-header nav ul a[href^="#expertise"] {

  transition: color 0.2s ease, transform 0.2s ease !important;

}

#site-header nav ul a[href^="#plek"]:hover,

#site-header nav ul a[href^="#medisch"]:hover,

#site-header nav ul a[href^="#expertise"]:hover {

  color: var(--color-accent) !important;

  transform: translateY(-2px) !important;

}



/* Nav CTA-knop */

#site-header nav a[href="#contact"] {

  transition: transform 0.2s ease, box-shadow 0.2s ease !important;

}

#site-header nav a[href="#contact"]:hover {

  transform: translateY(-3px) !important;

  box-shadow: 0 6px 20px rgba(var(--color-accent-rgb), 0.5) !important;

}



/* Logo */

#site-header > nav > a[href="#hero"] {

  transition: opacity 0.2s ease, transform 0.2s ease !important;

}

#site-header > nav > a[href="#hero"]:hover {

  opacity: 0.9;

  transform: scale(1.05) !important;

}



/* Mobiel menu links */

#mobile-menu a {

  transition: color 0.2s ease, transform 0.2s ease !important;

}

#mobile-menu a[href="#contact"] {

  transition: transform 0.2s ease !important;

}

#mobile-menu a:not([href="#contact"]):hover {

  color: var(--color-accent) !important;

  transform: translateX(6px) !important;

}

#mobile-menu a[href="#contact"]:hover {

  transform: scale(1.03) !important;

}



/* Hamburger → X (puzzel-effect) bij open menu */

.louis-hamburger-line {

  will-change: transform;

}

#menu-toggle[aria-expanded="true"] .louis-hamburger-line:nth-child(1) {

  transform: translateY(7px) rotate(45deg);

}

#menu-toggle[aria-expanded="true"] .louis-hamburger-line:nth-child(2) {

  opacity: 0;

  transform: scaleX(0);

}

#menu-toggle[aria-expanded="true"] .louis-hamburger-line:nth-child(3) {

  transform: translateY(-7px) rotate(-45deg);

}



#menu-toggle {

  transition: transform 0.2s ease, opacity 0.2s ease !important;

}

#menu-toggle:hover {

  transform: scale(1.15) !important;

  opacity: 0.85;

}



/* Hero: optionele achtergrond + donkere overlay (foto blijft zichtbaar, tekst leesbaar) */

#hero.louis-hero--has-bg {

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}

#hero.louis-hero--has-bg .louis-hero__overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(

    145deg,

    rgba(12, 12, 12, 0.88) 0%,

    rgba(12, 12, 12, 0.62) 45%,

    rgba(12, 12, 12, 0.42) 100%

  );

  pointer-events: none;

  z-index: 0;

}



/* Hero CTA */

#hero a[href="#contact"] {

  transition: transform 0.25s ease, box-shadow 0.25s ease !important;

}

#hero a[href="#contact"]:hover {

  transform: translateY(-5px) scale(1.05) !important;

  box-shadow: 0 10px 28px rgba(var(--color-accent-rgb), 0.5) !important;

}



/* Contactknoppen */

#contact a[href^="https://wa.me"],

#contact a[href^="tel:"] {

  transition: transform 0.25s ease, box-shadow 0.25s ease !important;

}

#contact a[href^="https://wa.me"]:hover {

  transform: translateY(-5px) scale(1.05) !important;

  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45) !important;

}

#contact a[href^="tel:"]:hover {

  transform: translateY(-5px) scale(1.05) !important;

  box-shadow: 0 10px 28px rgba(var(--color-accent-rgb), 0.5) !important;

}



/* YouTube play-knop groter bij hover op tegel */

.louis-youtube-play .louis-play-btn {

  transition: transform 0.25s ease, box-shadow 0.25s ease !important;

}

.louis-youtube-tile:hover .louis-play-btn {

  transform: scale(1.2) !important;

  box-shadow: 0 0 0 6px rgba(var(--color-accent-rgb), 0.4) !important;

}



/* --- Home page intro overlay (logo in stukken) --- */

.louis-intro-overlay {

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  pointer-events: none;

}

.louis-intro-overlay.louis-intro-overlay--hidden {

  pointer-events: none;

  visibility: hidden;

  opacity: 0;

  transition: opacity 0.6s ease, visibility 0.6s ease;

}

.louis-intro-overlay__bg {

  position: absolute;

  inset: 0;

  background-color: #0c0c0c;

}

.louis-intro-overlay__inner {

  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2rem;

}

.louis-intro-overlay__grid {

  width: min(92vw, 520px);

  height: min(58vw, 280px);

  display: grid;

  grid-template-columns: repeat(var(--louis-cols, 4), 1fr);

  grid-template-rows: repeat(var(--louis-rows, 4), 1fr);

  gap: 3px;

}

.louis-intro-overlay__piece {

  background-repeat: no-repeat;

  will-change: transform, opacity;

}

.louis-intro-overlay__maintenance-text {

  margin: 0;

  max-width: min(90vw, 32rem);

  font-size: 1rem;

  line-height: 1.6;

  color: rgba(255, 255, 255, 0.9);

  text-align: center;

  opacity: 0;

  visibility: hidden;

}

.louis-intro-overlay__maintenance-text.louis-maintenance-text--visible {

  visibility: visible;

}



/* Onderhoudsmodus: alleen overlay zichtbaar */

body.louis-maintenance-mode #site-header,

body.louis-maintenance-mode #main,

body.louis-maintenance-mode footer {

  display: none !important;

}

body.louis-maintenance-mode .louis-whatsapp-fab {

  display: none !important;

}



/* Contactpagina (volledig) — Contact Form 7 in dark theme */

.louis-contact-page .wpcf7 {

  color: #e5e5e5;

}

.louis-contact-page .wpcf7-form-control-wrap {

  display: block;

  margin-bottom: 1rem;

}

.louis-contact-page .wpcf7 label {

  display: block;

  font-size: 0.875rem;

  font-weight: 600;

  color: #fafafa;

  margin-bottom: 0.35rem;

}

.louis-contact-page .wpcf7 input[type="text"],

.louis-contact-page .wpcf7 input[type="email"],

.louis-contact-page .wpcf7 input[type="tel"],

.louis-contact-page .wpcf7 input[type="url"],

.louis-contact-page .wpcf7 select,

.louis-contact-page .wpcf7 textarea {

  width: 100%;

  max-width: 100%;

  padding: 0.65rem 0.85rem;

  border-radius: 0.5rem;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: #0c0c0c;

  color: #fafafa;

  font-size: 1rem;

}

.louis-contact-page .wpcf7 textarea {

  min-height: 8rem;

  resize: vertical;

}

.louis-contact-page .wpcf7 input:focus,

.louis-contact-page .wpcf7 select:focus,

.louis-contact-page .wpcf7 textarea:focus {

  outline: none;

  border-color: var(--color-accent);

  box-shadow: 0 0 0 2px rgba(229, 160, 13, 0.25);

}

.louis-contact-page .wpcf7 input[type="submit"],

.louis-contact-page .wpcf7 button[type="submit"] {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0.75rem 1.5rem;

  border-radius: 0.5rem;

  border: none;

  background: var(--color-accent);

  color: var(--color-button-text) !important;

  font-weight: 600;

  cursor: pointer;

  transition: background 0.2s ease;

}

.louis-contact-page .wpcf7 input[type="submit"]:hover,

.louis-contact-page .wpcf7 button[type="submit"]:hover {

  background: var(--color-accent-hover);

}

.louis-contact-page .wpcf7-not-valid-tip {

  font-size: 0.8rem;

  color: #f87171;

  margin-top: 0.25rem;

}

.louis-contact-page .wpcf7-response-output {

  margin: 1rem 0 0;

  padding: 0.75rem;

  border-radius: 0.5rem;

  font-size: 0.875rem;

}

.louis-contact-page .wpcf7-mail-sent-ok {

  border: 1px solid rgba(34, 197, 94, 0.4);

  background: rgba(34, 197, 94, 0.12);

  color: #86efac;

}

.louis-contact-page .wpcf7-validation-errors {

  border: 1px solid rgba(248, 113, 113, 0.4);

  background: rgba(248, 113, 113, 0.1);

  color: #fecaca;

}



/* --- Blog: reacties (single post) --- */

.louis-comments .comment-list {

  list-style: none;

  padding: 0;

  margin: 0;

}

.louis-comments .comment-list .comment,

.louis-comments .comment-list .pingback {

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 0.75rem;

  padding: 1rem 1rem 1rem 1rem;

  background: #141414;

}

.louis-comments .comment-list .children {

  list-style: none;

  margin: 1rem 0 0 0;

  padding: 0 0 0 1rem;

  border-left: 2px solid rgba(229, 160, 13, 0.35);

}

.louis-comments .comment-body {

  display: flex;

  gap: 1rem;

  align-items: flex-start;

}

.louis-comments .comment-meta {

  font-size: 0.875rem;

  color: #a3a3a3;

  margin-bottom: 0.5rem;

}

.louis-comments .comment-author .fn,

.louis-comments .comment-author .fn a {

  color: #fafafa;

  font-weight: 600;

  font-style: normal;

}

.louis-comments .comment-metadata a {

  color: #a3a3a3;

}

.louis-comments .comment-content {

  color: #d4d4d4;

  line-height: 1.6;

}

.louis-comments .comment-content p {

  margin: 0 0 0.75rem;

}

.louis-comments .reply {

  margin-top: 0.75rem;

}

.louis-comments .reply .comment-reply-link {

  color: var(--color-accent);

  font-size: 0.875rem;

  font-weight: 600;

}

.louis-comments .comment-navigation,

.louis-comments .navigation {

  display: flex;

  justify-content: space-between;

  gap: 1rem;

  margin-top: 2rem;

  font-size: 0.875rem;

}

.louis-comments .comment-navigation a,

.louis-comments .navigation a {

  color: var(--color-accent);

}

.louis-comments .comment-respond {

  margin-top: 2rem;

  padding-top: 1.5rem;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}

.louis-comments .comment-reply-title {

  color: #fafafa;

  font-size: 1.125rem;

  font-weight: 700;

  margin-bottom: 1rem;

  font-family: Montserrat, system-ui, sans-serif;

}

.louis-comments .comment-form .logged-in-as {

  color: #a3a3a3;

  font-size: 0.875rem;

  margin-bottom: 1rem;

}

.louis-comments .comment-form .logged-in-as a {

  color: var(--color-accent);

}

.louis-comments .louis-must-log-in a {

  color: var(--color-accent);

  text-decoration: underline;

}

.louis-comments .comment-form p {

  margin-bottom: 1rem;

}

.louis-comments .comment-form label {

  display: block;

  color: #a3a3a3;

  font-size: 0.875rem;

  margin-bottom: 0.35rem;

}

.louis-comments .louis-comment-input {

  width: 100%;

  max-width: 100%;

  box-sizing: border-box;

  background: #0c0c0c;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 0.5rem;

  color: #fafafa;

  padding: 0.6rem 0.75rem;

  font-size: 1rem;

}

.louis-comments .louis-comment-textarea {

  min-height: 8rem;

  resize: vertical;

}

.louis-comments .comment-form-comment {

  margin-bottom: 1.5rem;

}

.louis-comments .louis-comment-input:focus,

.louis-comments .louis-comment-textarea:focus {

  border-color: var(--color-accent);

  outline: none;

  box-shadow: 0 0 0 1px var(--color-accent);

}

.louis-comments .louis-comment-submit {

  display: inline-block;

  background: var(--color-accent);

  color: var(--color-button-text) !important;

  border: none;

  border-radius: 0.5rem;

  padding: 0.65rem 1.25rem;

  font-weight: 600;

  cursor: pointer;

  font-size: 1rem;

}

.louis-comments .louis-comment-submit:hover {

  background: var(--color-accent-hover);

}

.louis-comments .form-submit {

  margin-top: 1.5rem;

  margin-bottom: 0;

}