/* Connect Music Events - v14
   Loaded only by keti-koti-festival-rotterdam.html.
   Sole chromatic layout colour: #10BA26. White/black/grey are neutral.
   Original logos and photographs are intentionally not recoloured. */
body[data-page="keti-koti-festival-rotterdam.html"] {
  --green: #10BA26;
  --green-soft: rgba(16,186,38,.07);
  --green-line: rgba(16,186,38,.24);
  --ink: #151515;
  --paper: #fff;
  --purple: var(--green);
  --plum: var(--green);
  --accent: var(--green);
  --lime: var(--green);
  --muted: #555;
  --line: #dedede;
  color: var(--ink);
  background: #fff;
  accent-color: var(--green);
}
body[data-page="keti-koti-festival-rotterdam.html"] ::selection {
  background: var(--green); color: var(--ink);
}
body[data-page="keti-koti-festival-rotterdam.html"] :is(a,button,summary,input,select,textarea):focus-visible {
  outline: 3px solid var(--green); outline-offset: 5px;
}
body[data-page="keti-koti-festival-rotterdam.html"] :is(.topbar,.detail-hero,.footer) :is(a,button,summary):focus-visible {
  outline-color: var(--ink);
}
/* Navigation, including open/active/hover/focus and mobile states. */
body[data-page="keti-koti-festival-rotterdam.html"] .topbar {
  background: var(--green); color: var(--ink);
}
body[data-page="keti-koti-festival-rotterdam.html"] .topbar a { color: var(--ink); }
body[data-page="keti-koti-festival-rotterdam.html"] .header {
  background: rgba(255,255,255,.97); border-color: var(--green-line);
}
body[data-page="keti-koti-festival-rotterdam.html"] .nav { color: var(--ink); }
body[data-page="keti-koti-festival-rotterdam.html"] :is(.nav a:not(.btn):hover,.nav a[aria-current=page],.dropdown summary:hover,.nav .dropdown.is-current>summary) {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--green); text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
body[data-page="keti-koti-festival-rotterdam.html"] .dropdown-panel {
  background: #fff; border-color: var(--green-line);
  box-shadow: 0 18px 60px rgba(0,0,0,.1);
}
body[data-page="keti-koti-festival-rotterdam.html"] .dropdown-panel a:hover,
body[data-page="keti-koti-festival-rotterdam.html"] .dropdown-panel a[aria-current=page] {
  color: var(--ink); background: var(--green-soft);
}
body[data-page="keti-koti-festival-rotterdam.html"] :is(.menu-toggle,.skip) {
  background: var(--green); color: #fff;
}
/* v9: exact green with white labels/icons; light buttons become black. */
body[data-page="keti-koti-festival-rotterdam.html"] :is(.btn-primary,.btn-lime,.btn-dark) {
  background: var(--green); color: #fff; border-color: var(--green);
  text-decoration: none;
}
body[data-page="keti-koti-festival-rotterdam.html"] :is(.btn-primary,.btn-lime,.btn-dark):hover {
  background: var(--green); color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
body[data-page="keti-koti-festival-rotterdam.html"] :is(.btn-outline,.btn-light-outline) {
  background: #000; color: #fff; border-color: #000;
}
body[data-page="keti-koti-festival-rotterdam.html"] :is(.btn-outline,.btn-light-outline):hover {
  background: #000; color: #fff; border-color: #000;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
body[data-page="keti-koti-festival-rotterdam.html"] .text-link:hover {
  color: var(--ink); border-color: var(--green);
}
body[data-page="keti-koti-festival-rotterdam.html"] .badge {
  background: var(--green-soft); color: var(--ink);
}
body[data-page="keti-koti-festival-rotterdam.html"] .badge-lime {
  background: var(--green); color: var(--ink);
}
body[data-page="keti-koti-festival-rotterdam.html"] .badge-white {
  background: #fff; color: var(--ink);
}
/* Festival hero and practical information. */
body[data-page="keti-koti-festival-rotterdam.html"] .detail-hero {
  background: var(--green); color: var(--ink);
}
body[data-page="keti-koti-festival-rotterdam.html"] .detail-copy :is(h1,.lead,.eyebrow,.breadcrumb) {
  color: var(--ink);
}
/* This hero registration button used to be white. */
body[data-page="keti-koti-festival-rotterdam.html"] .detail-copy .btn-primary,
body[data-page="keti-koti-festival-rotterdam.html"] .detail-copy .btn-primary:hover {
  background: #000; color: #fff; border-color: #000;
}
/* The second hero button remains green, with a white outline and label. */
body[data-page="keti-koti-festival-rotterdam.html"] .detail-copy .btn-light-outline {
  background: var(--green); color: #fff; border-color: #fff;
}
body[data-page="keti-koti-festival-rotterdam.html"] .detail-copy .btn-light-outline:hover {
  background: var(--green); color: #fff; border-color: #fff;
}
/* Keep nested labels and outline SVG icons white in every interaction state. */
body[data-page="keti-koti-festival-rotterdam.html"] :is(.btn,.menu-toggle,.skip),
body[data-page="keti-koti-festival-rotterdam.html"] :is(.btn,.menu-toggle,.skip):is(:hover,:focus-visible,:active) {
  color: #fff;
}
body[data-page="keti-koti-festival-rotterdam.html"] .btn span,
body[data-page="keti-koti-festival-rotterdam.html"] :is(.btn,.menu-toggle) .icon {
  color: inherit;
}
body[data-page="keti-koti-festival-rotterdam.html"] :is(.btn,.menu-toggle) .icon {
  stroke: currentColor;
}
body[data-page="keti-koti-festival-rotterdam.html"] .detail-art .image-label,
body[data-page="keti-koti-festival-rotterdam.html"] .card-art .image-label {
  background: rgba(0,0,0,.7); color: #fff;
}
body[data-page="keti-koti-festival-rotterdam.html"] .facts-strip {
  background: #fff; border-bottom-color: var(--green-line);
}
body[data-page="keti-koti-festival-rotterdam.html"] .fact .icon { color: var(--green); }
body[data-page="keti-koti-festival-rotterdam.html"] .article-copy p { color: #555; }
body[data-page="keti-koti-festival-rotterdam.html"] .article-copy .eyebrow:before,
body[data-page="keti-koti-festival-rotterdam.html"] .booking-box .eyebrow:before {
  background: var(--green);
}
body[data-page="keti-koti-festival-rotterdam.html"] .topic-number {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--green); text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
body[data-page="keti-koti-festival-rotterdam.html"] .notice {
  background: var(--green-soft); border-left-color: var(--green); color: #444;
}
body[data-page="keti-koti-festival-rotterdam.html"] .booking-box {
  background: #fff; border-color: var(--green-line); border-top: 4px solid var(--green);
  box-shadow: 0 16px 40px rgba(0,0,0,.05);
}
body[data-page="keti-koti-festival-rotterdam.html"] .faq-item>summary:after { color: var(--ink); }
body[data-page="keti-koti-festival-rotterdam.html"] .faq-item[open] { border-bottom-color: var(--green); }
/* The related-event cards adopt this page's palette only. */
body[data-page="keti-koti-festival-rotterdam.html"] .related { background: var(--green-soft); }
body[data-page="keti-koti-festival-rotterdam.html"] .event-card {
  border-color: var(--green-line); box-shadow: 0 14px 34px rgba(0,0,0,.04);
}
body[data-page="keti-koti-festival-rotterdam.html"] .event-card:hover {
  box-shadow: 0 24px 50px rgba(0,0,0,.1);
}
body[data-page="keti-koti-festival-rotterdam.html"] .card-art { background: var(--green); }
body[data-page="keti-koti-festival-rotterdam.html"] .card-art:after {
  background: linear-gradient(0deg,rgba(0,0,0,.06),transparent);
}
body[data-page="keti-koti-festival-rotterdam.html"] .card-footer a:last-child {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--green); text-underline-offset: 4px;
}
body[data-page="keti-koti-festival-rotterdam.html"] .poster {
  background: var(--green); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}
body[data-page="keti-koti-festival-rotterdam.html"] .poster .poster-title { text-shadow: none; }
body[data-page="keti-koti-festival-rotterdam.html"] .poster-brasa:before {
  background: conic-gradient(from 10deg,rgba(255,255,255,.7),rgba(0,0,0,.06),rgba(255,255,255,.7));
}
body[data-page="keti-koti-festival-rotterdam.html"] .poster-brasa:after {
  background: var(--green); backdrop-filter: none;
}
body[data-page="keti-koti-festival-rotterdam.html"] .poster-ode {
  background: #fff; color: var(--ink);
}
body[data-page="keti-koti-festival-rotterdam.html"] .poster-ode:before {
  background: repeating-linear-gradient(90deg,transparent 0 22px,rgba(16,186,38,.2) 22px 27px);
}
body[data-page="keti-koti-festival-rotterdam.html"] .poster-koningsdag:before {
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 0 0 24px rgba(255,255,255,.12),0 0 0 48px rgba(255,255,255,.08),0 0 0 72px rgba(255,255,255,.05);
}
body[data-page="keti-koti-festival-rotterdam.html"] .poster-koningsdag .crown {
  color: var(--ink); filter: none;
}
body[data-page="keti-koti-festival-rotterdam.html"] .card-art .poster-title {
  font-size: clamp(26px,13cqw,60px); line-height: 1; max-width: none;
}
body[data-page="keti-koti-festival-rotterdam.html"] .card-art .poster-title small {
  font-size: clamp(10px,2.5cqw,12px);
}
/* Green footer; preserve the supplied transparent light logo. */
body[data-page="keti-koti-festival-rotterdam.html"] .footer {
  background: var(--green); color: #fff;
}
body[data-page="keti-koti-festival-rotterdam.html"] .footer :is(h3,p,span,a,.footer-links,.footer-contact,.footer-bottom,.footer-legal) {
  color: #fff;
}
body[data-page="keti-koti-festival-rotterdam.html"] .footer :is(a:hover,.text-link) {
  color: #fff; text-decoration: underline; text-underline-offset: 4px;
}
body[data-page="keti-koti-festival-rotterdam.html"] .footer-bottom { border-top-color: rgba(0,0,0,.16); }
body[data-page="keti-koti-festival-rotterdam.html"] .footer-brand {
  background: transparent; border: 0; box-shadow: none;
}
body[data-page="keti-koti-festival-rotterdam.html"] .footer-logo { background: transparent; filter: none; }
body[data-page="keti-koti-festival-rotterdam.html"] .noscript {
  background: #fff; color: var(--ink); border-color: var(--green);
}
@media(max-width:900px) {
  body[data-page="keti-koti-festival-rotterdam.html"] .nav { background: #fff; }
  body[data-page="keti-koti-festival-rotterdam.html"] .dropdown-panel { background: var(--green-soft); }
}
@media print {
  body[data-page="keti-koti-festival-rotterdam.html"] { background: #fff; color: #000; }
  body[data-page="keti-koti-festival-rotterdam.html"] .detail-hero,
  body[data-page="keti-koti-festival-rotterdam.html"] .btn { background: #fff; color: #000; }
}


/* v11: white hero copy on screens only.
   Keep all buttons, navigation, event tiles and print styles unchanged. */
@media screen {
  body[data-page="keti-koti-festival-rotterdam.html"] .detail-hero .detail-copy :is(h1,.lead,.eyebrow,.breadcrumb),
  body[data-page="keti-koti-festival-rotterdam.html"] .detail-hero .detail-copy .breadcrumb :is(a,span),
  body[data-page="keti-koti-festival-rotterdam.html"] .detail-hero .detail-copy .breadcrumb a:is(:hover,:focus-visible,:active,:visited) {
    color: #fff;
  }
}


/* v12: white lettering in the Keti Koti top bar and visitor badge only.
   No background, layout, event-card or other-page changes. */
@media screen {
  body[data-page="keti-koti-festival-rotterdam.html"] .topbar,
  body[data-page="keti-koti-festival-rotterdam.html"] .topbar :is(span,a),
  body[data-page="keti-koti-festival-rotterdam.html"] .topbar a:is(:hover,:focus-visible,:active,:visited),
  body[data-page="keti-koti-festival-rotterdam.html"] .booking-box .badge.badge-lime,
  body[data-page="keti-koti-festival-rotterdam.html"] .booking-box .badge.badge-lime :is(span,.icon) {
    color: #fff;
  }
}


/* v13: only the existing calendar download button is green.
   Preserve its dimensions, label, icon, download action and print appearance. */
@media screen {
  body[data-page="keti-koti-festival-rotterdam.html"] .detail-main a.btn[download="keti-koti-2027.ics"],
  body[data-page="keti-koti-festival-rotterdam.html"] .detail-main a.btn[download="keti-koti-2027.ics"]:is(:hover,:focus-visible,:active,:visited) {
    background: #10BA26;
    border-color: #10BA26;
    color: #fff;
  }
  body[data-page="keti-koti-festival-rotterdam.html"] .detail-main a.btn[download="keti-koti-2027.ics"] :is(span,.icon) {
    color: #fff;
  }
}


/* v19: group only the two secondary hero actions. Colours stay inherited. */
@media screen {
  body[data-page="keti-koti-festival-rotterdam.html"] .detail-copy .keti-hero-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 100%;
    min-width: 0;
    align-items: center;
  }
}
@media screen and (max-width: 640px) {
  body[data-page="keti-koti-festival-rotterdam.html"] .detail-copy .keti-hero-secondary-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    width: 100%;
  }
  body[data-page="keti-koti-festival-rotterdam.html"] .detail-copy .keti-hero-secondary-actions > .btn {
    width: 100%;
  }
}


/* v20: only the Keti Koti hero action "Ontdek het event" is white/green.
   Keep the neighbouring buttons, dimensions, anchor and print styles intact. */
@media screen {
  body[data-page="keti-koti-festival-rotterdam.html"] .detail-hero .detail-copy a.btn[href="#over-event"],
  body[data-page="keti-koti-festival-rotterdam.html"] .detail-hero .detail-copy a.btn[href="#over-event"]:is(:hover,:focus-visible,:active,:visited) {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #10BA26;
  }
  body[data-page="keti-koti-festival-rotterdam.html"] .detail-hero .detail-copy a.btn[href="#over-event"] :is(span,.icon) {
    color: #10BA26;
  }
  body[data-page="keti-koti-festival-rotterdam.html"] .detail-hero .detail-copy a.btn[href="#over-event"] .icon {
    stroke: currentColor;
  }
}