/* Static-site overrides for www.museumtexel.nl (bump STATIC_CSS_VER in clean.py on every change) */

/* ---- Footer banner: (c) year, Webjongens credit, legal links ---- */
.wj-footerbar { background: #337796; color: #fff; font-size: 0.875rem; line-height: 1.4; }
.wj-footerbar__inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.5rem 2.5rem; max-width: 1320px; margin: 0 auto; padding: 0.75rem 1rem; list-style: none; }
.wj-footerbar__inner > li { margin: 0; padding: 0; }
.wj-footerbar__inner > li::before { content: none; }
.wj-footerbar a { color: #fff; text-decoration: none; }
.wj-footerbar a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.wj-footerbar a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

/* Webjongens credit with typewriter */
.credit { --credit-heart: #c8d992; display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; white-space: nowrap; }
.wj-footerbar .credit__link { display: inline-flex; align-items: center; gap: 0.35rem; }
/* site styles give every p/strong Helios Antique -> use the bar's font throughout */
.wj-footerbar .credit, .wj-footerbar .credit * { font-family: inherit !important; }
.wj-footerbar .credit strong { font-weight: 700; }
.wj-footerbar .credit__link:hover { text-decoration: none; }
.credit__link strong { font-weight: 700; }
.credit__link:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.credit__heart { width: 1.1rem; height: 1.1rem; fill: var(--credit-heart); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.credit__link:hover .credit__heart { transform: scale(1.2); }
.credit__typed { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 5.5em; color: rgb(255 255 255 / 0.8); }
.credit__cursor { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; background: currentColor; animation: credit-blink 1s step-end infinite; }
@keyframes credit-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .credit__cursor { animation: none; } .credit__heart { transition: none; } }
@media (max-width: 575px) { .wj-footerbar__inner { gap: 0.4rem 1.5rem; } }

/* ---- Header: a touch lighter than the page, sticky ---- */
.astroid-wrapper { overflow-x: clip !important; overflow-y: visible !important; } /* hidden would break position: sticky */
.astroid-header-section { position: sticky; top: 0; z-index: 1020;
  background-color: #efeae7 !important; border-bottom: 1px solid rgba(125, 62, 24, 0.08) !important; }

/* ---- Buttons (white, arrow right): tidy text and arrow alignment ---- */
a.sppb-btn.sppb-btn-default:not(.tekstblokhome *, .footer .col2 *, .gastenboek *) {
  white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  padding: 0.55em 1.35em 0.6em; font-size: 19px; line-height: 1.2; letter-spacing: 0.015em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color 150ms ease, color 150ms ease; }
a.sppb-btn.sppb-btn-default:not(.tekstblokhome *, .footer .col2 *, .gastenboek *) i {
  position: static; bottom: auto; padding: 0; margin: 0; font-size: 1.05em; line-height: 1;
  transition: transform 150ms ease; }
a.sppb-btn.sppb-btn-default:not(.tekstblokhome *, .footer .col2 *, .gastenboek *):hover i { transform: translateX(3px); }
/* template shifts this arrow 25px right (.footer .fa-long-arrow-alt-right:before) -> keep it inside the button */
a.sppb-btn.sppb-btn-default:not(.tekstblokhome *, .footer .col2 *, .gastenboek *) i::before { position: static; right: auto; bottom: auto; }

/* ---- Homepage intro: image vertically centred next to the text, fades in ---- */
@media (min-width: 768px) {
  #section-id-1661499563094 > .sppb-row-container > .sppb-row { align-items: center; }
}
/* (fade-in now via the scroll reveal script, after load + image decode) */

/* ---- Gastenboek heading: solid instead of outline letters ---- */
.gastenboek h2 { -webkit-text-fill-color: #fff; -webkit-text-stroke-width: 0; color: #fff;
  font-size: 40px; line-height: 1.15; letter-spacing: 0.01em; }

/* ---- Footer: Contact / ANBI links in the bottom-right corner of the photo ---- */
/* the photo only shows from 992px; below that, white text on beige was unreadable */
@media (max-width: 991px) {
  #sppb-addon-wrapper-1661777669116 ul li, #sppb-addon-wrapper-1661777669116 ul li a { color: #7d3e18 !important; }
}
@media (min-width: 992px) {
  #section-id-1661849381429 .sppb-row,
  #column-wrap-id-1661777669097,
  #column-id-1661777669097,
  #column-id-1661777669097 > .sppb-column-addons { position: static; }
  #sppb-addon-wrapper-1661777669116 { position: absolute; right: 0; bottom: 30px; margin: 0 !important; z-index: 20; } /* above the provincie row, which overlaps this corner */
  #sppb-addon-wrapper-1661777669116 ul li { padding: 0 0 0 40px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #sppb-addon-wrapper-1661777669116 { right: 30px; } /* footer container is full width here */
}
#sppb-addon-wrapper-1661777669116 ul li { opacity: 0.7; transition: opacity 150ms ease; }
#sppb-addon-wrapper-1661777669116 ul li:hover { opacity: 1; }

/* ---- Scroll fade-in (JS adds .wj-reveal / .is-visible; .wj-anim only when motion is OK) ---- */
.wj-anim .wj-reveal { opacity: 0; transform: translate3d(0, 16px, 0); will-change: opacity, transform; backface-visibility: hidden;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1) var(--wj-delay, 0s), transform 1s cubic-bezier(0.22, 1, 0.36, 1) var(--wj-delay, 0s); }
.wj-anim .wj-reveal.is-visible { opacity: 1; transform: none; }
.wj-bg-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tekstblokhome > :not(.wj-bg-layer) { position: relative; z-index: 1; }

/* ---- Footer: room under the logo, contact icons ---- */
.footer .wj-ico { color: #337796; width: 1.1em; margin-right: 0.45em; text-align: center; font-size: 0.95em; }

/* ---- Bezoekersinfo: opening hours / prices next to the list, clear of the klompen ---- */
@media (min-width: 992px) {
  .itemid-122 #section-id-1661499563094 #column-wrap-id-1661499563092 { flex: 0 0 40%; max-width: 40%; }
  .itemid-122 #section-id-1661499563094 #column-wrap-id-1661499563093 { flex: 0 0 400px; max-width: 400px; }
  .itemid-122 #section-id-1661499563094 #column-wrap-id-1661499563093 td { white-space: nowrap; }
}

/* ---- Bezoekersinfo: hours box same size/position as the two maps (iframes are 4:3) ---- */
@media (min-width: 992px) {
  .itemid-122 #column-id-1661852986706 { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
  .itemid-122 #column-id-1661852986706 .openingstijden { aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: center;
    padding: 30px 36px !important; }
}
@media (min-width: 1200px) {
  .itemid-122 #column-id-1661852986706 .openingstijden table { width: 100%; }
  .itemid-122 #column-id-1661852986706 .openingstijden td { white-space: nowrap; }
  .itemid-122 #column-id-1661852986706 .openingstijden td:first-child { padding-right: 1.25em !important; }
}

/* ---- Footer: provincie logo + sentence in one row, bottoms aligned ---- */
#column-wrap-id-1661843854912 { display: none; } /* logo + sentence now live in .wj-sponsorline */
.wj-sponsorline { background: #e9e2de; padding: 36px 30px 14px; }
.wj-sponsorline__inner { display: flex; align-items: flex-end; gap: 12px 32px; }
.wj-sponsorline__logo { display: block; width: 262px; max-width: 60%; height: auto; flex: 0 0 auto; }
.wj-sponsorline p { margin: 0; font-size: 12px; line-height: 1.4; color: #7d3e18; font-style: italic; }
@media (min-width: 1200px) { .wj-sponsorline { padding: 36px 0 0; } .wj-sponsorline__inner { max-width: 90%; margin: 0 auto; padding-bottom: 14px; } }
@media (max-width: 767px) { .wj-sponsorline { padding: 36px 18px 14px; } .wj-sponsorline__inner { flex-direction: column; align-items: flex-start; } }
.wj-sponsorline p i { color: inherit; }
#sppb-addon-wrapper-1661777669093 { display: none; }

/* ---- Footer: address (left, vertically centred) | phone + e-mails stacked (right) ---- */
#sppb-addon-1661777669064 ul li, #sppb-addon-1661777669132 ul li { float: none; padding: 0; }
#sppb-addon-1661777669064 ul li + li, #sppb-addon-1661777669132 ul li + li { margin-top: 2px; }
#sppb-addon-1661777669132 a[href^="tel:"] { color: inherit; text-decoration: none; }
#sppb-addon-wrapper-1661777669064, #sppb-addon-wrapper-1661777669132 { margin: 24px 0 30px !important; }
@media (min-width: 576px) {
  #column-id-1661777669057 > .sppb-column-addons { display: grid; grid-template-columns: max-content max-content; column-gap: 3em; align-items: center; }
  #sppb-addon-wrapper-1661777669064 { grid-column: 1; }
  #sppb-addon-wrapper-1661777669132 { grid-column: 2; }
  #column-id-1661777669057 > .sppb-column-addons > :not(#sppb-addon-wrapper-1661777669064):not(#sppb-addon-wrapper-1661777669132) { grid-column: 1 / -1; }
}
@media (max-width: 575px) { #sppb-addon-wrapper-1661777669064 { margin-bottom: 8px !important; } #sppb-addon-wrapper-1661777669132 { margin-top: 0 !important; } }
#sppb-addon-1661777669064 ul li:not(:has(.wj-ico)) > div { padding-left: 1.5em; }


/* the provincie row lies over the bottom-right corner: let clicks through to Contact / ANBI */
#column-wrap-id-1661843854912, #column-wrap-id-1661843854912 * { pointer-events: none; }
#column-wrap-id-1661843854912 a { pointer-events: auto; }

/* ---- Homepage intro: a bit less space under the big heading ---- */
.itemid-101 #section-id-1661499563094 h1.sppb-addon-title { margin-bottom: -10px !important; }

/* ---- Over ons: "contact" button (green Faciliteiten block) hovers in the house blue ---- */
#btn-1661848381298:hover, #btn-1661848381298:focus-visible { background-color: #337796 !important; color: #fff !important; }
#btn-1661848381298:hover i, #btn-1661848381298:hover i::before, #btn-1661848381298:focus-visible i::before { color: #fff !important; }

/* ---- Tablet / phone: klompen don't fit behind the text there -> leave them out ---- */
@media (max-width: 991px) {
  .tekstblokhome .wj-bg-layer { display: none; }
  .tekstblokhome { background-image: none !important; padding-top: 50px !important; margin-top: 0 !important; }
}

/* ---- Footer buttons: natural width, side by side, wrap as whole buttons (never the text) ---- */
#section-id-1661777669098 .sppb-row { display: flex; flex-wrap: wrap; column-gap: 30px; margin: 0; }
#section-id-1661777669098 .sppb-row > [class*="sppb-col-"] { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
#section-id-1661777669098 .sppb-btn { margin-top: 0 !important; }

/* ---- Tablet / phone footer: no photo strips, one calm beige block ---- */
@media (max-width: 991px) {
  #section-id-1661849381429 { background-image: none !important; }
  #section-id-1661849381429::after { display: none !important; }
  #section-id-1661849381429 .col1 { padding-right: 0 !important; }
  #sppb-addon-wrapper-1661777669116 { margin-top: 20px !important; }
}

/* ---- Tablet / phone: the desktop collage, scaled down ----
   Desktop: 660px wide row, 50% columns, offsets 40/80/200px -> expressed in cqw (container width). */
@media (max-width: 991px) {
  .imageoverlap .sppb-row { container-type: inline-size; display: flex; flex-wrap: wrap; max-width: 560px; margin-left: auto; margin-right: auto; }
  .imageoverlap .sppb-row > .sppb-col-md-6:nth-child(-n+3) { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important;
    position: relative !important; padding-left: 2.27cqw !important; padding-right: 2.27cqw !important; margin-bottom: 0; }
  .imageoverlap .sppb-row > .sppb-col-md-6:nth-child(1) { left: 6.06cqw !important; right: auto !important; margin-left: -6.06cqw !important; top: 0 !important; z-index: 9999; }
  .imageoverlap .sppb-row > .sppb-col-md-6:nth-child(2) { left: -6.06cqw !important; margin-right: -6.06cqw !important; margin-top: 0 !important; top: 12.12cqw !important; z-index: 8888; }
  .imageoverlap .sppb-row > .sppb-col-md-6:nth-child(3) { left: 10% !important; margin: 0 0 -30.3cqw !important; top: -30.3cqw !important; z-index: 9999; }
  .imageoverlap .sppb-row > .sppb-col-md-6 img { max-width: 100%; }
}

/* ---- Tablet / phone: ANBI logo at the bottom, above Contact / Standaardformulier ---- */
.wj-anbi-mobile { display: none; }
@media (max-width: 991px) {
  #column-wrap-id-1661777669111 { display: none; }
  .wj-anbi-mobile { display: block; width: 94px; margin: 0 0 14px; }
  .wj-anbi-mobile img { display: block; width: 100%; height: auto; }
  #sppb-addon-wrapper-1661777669116 ul li { float: left; padding: 0 28px 0 0 !important; }
  #sppb-addon-wrapper-1661777669116 ul::after { content: ''; display: table; clear: both; }
}

/* ---- Tablet / phone homepage: less white space between the intro and "Stap in het verleden" ---- */
@media (max-width: 991px) {
  #section-id-1749549418702 { display: none; } /* empty spacer section */
  .sppb-section#section-id-1661763334613 { padding-top: 40px !important; margin-top: 0 !important; }
}

/* ---- Tablet / phone: footer centred ---- */
@media (max-width: 991px) {
  #section-id-1661849381429 .col1 .sppb-addon-single-image-container,
  #column-wrap-id-1661777669108 .sppb-addon-content { text-align: center; }
  #column-wrap-id-1661777669108 img { margin-left: auto; margin-right: auto; }
  #column-id-1661777669057 > .sppb-column-addons { justify-content: center; }
  #section-id-1661777669098 .sppb-row { justify-content: center; }
  .wj-anbi-mobile { margin: 0 auto 14px; }
  #sppb-addon-wrapper-1661777669116 ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
  #sppb-addon-wrapper-1661777669116 ul::after { content: none; }
  #sppb-addon-wrapper-1661777669116 ul li { float: none; padding: 0 !important; }
  .wj-sponsorline__inner { justify-content: center; align-items: center; text-align: center; }
  .wj-sponsorline__inner { flex-direction: column; }
}
@media (max-width: 575px) {
  #sppb-addon-1661777669064 ul li, #sppb-addon-1661777669132 ul li { text-align: center; }
  #sppb-addon-1661777669064 ul li:not(:has(.wj-ico)) > div { padding-left: 0; }
}

/* ---- Tablet / phone homepage: breathing room between the collage and "Doelstelling" ---- */
@media (max-width: 991px) { #column-wrap-id-1661766677495 { padding-top: 32px; } }

/* ---- Tablet / phone: collage needs room below it (2nd photo hangs below its row) ---- */
/* (exact overhang is measured by WJ_LAYOUT_JS in clean.py and set as padding-bottom) */

/* ---- Tablet / phone: intro klompen (Bezoekersinfo etc.) below the text instead of behind it ----
   klompen.png is 980x774 -> height = 0.79 x width */
@media (max-width: 991px) {
  .introhome.detail, #section-id-1661499563094.introhome.detail { background-size: 45% auto !important; background-position: 100% 100% !important;
    padding-bottom: calc(45vw * 0.79 + 16px) !important; }
}

/* ---- Phone: space between the stacked maps / hours box (Bezoekersinfo) ---- */
@media (max-width: 991px) {
  .itemid-122 #column-wrap-id-1661852986705, .itemid-122 #column-wrap-id-1661852986706 { margin-top: 32px; }
  .itemid-122 #column-id-1661852986706 .openingstijden { padding: 28px 30px !important; }
}

/* ---- Footer: "Contact" link above the address ---- */
.wj-contactlink { display: inline-block; margin: 0 0 6px; color: #337796 !important; font-family: "Helios Antique Semibold regular", sans-serif;
  font-size: 1.05em; text-decoration: none; }
.wj-contactlink:hover { text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 575px) { #sppb-addon-1661777669064 .sppb-addon-content { text-align: center; } }

/* ---- Tablet / phone: the right footer column loses its 100px desktop indent, so ANBI + link centre properly ---- */
@media (max-width: 991px) { #section-id-1661849381429 .col2 { padding-left: 0 !important; padding-right: 0 !important; } }

/* ---- Below 768px: intro photo no longer hangs into the next section (desktop -70% overlap) ---- */
@media (max-width: 767px) { .introhome .col1 img { margin-bottom: 0 !important; } }

/* ---- Phone, Demonstraties: less white space above "Demonstratie handwerktechnieken" ---- */
@media (max-width: 575px) {
  .itemid-123 #section-id-1661766677496 { padding-bottom: 20px !important; }
  .itemid-123 #section-id-1661852986675 { padding-top: 20px !important; }
}
@media (max-width: 991px) { .introhome .col1 { margin-bottom: 40px; } } /* room between the intro photo and what follows */

/* ---- Tablet / phone: Gastenboek illustration, house only (svg 1920x535: house 0-29%, person 73-96%).
   One layer anchored left; sized so the person always lands beyond the right edge. ---- */
@media (max-width: 991px) {
  .gastenboek { background-image: url(../images/gastenboek-bg.svg) !important; background-repeat: no-repeat !important;
    background-size: auto 400px !important; background-position: left -40px bottom 0 !important; }
}
@media (max-width: 767px) { .gastenboek { background-size: auto 340px !important; } }
@media (max-width: 575px) { .gastenboek { background-size: auto 260px !important; background-position: left -70px bottom 0 !important; } }


/* ---- Tablet / phone: pages whose intro has no klompen (Contact, Bedankt, Error) don't need the klompen space ---- */
@media (max-width: 991px) {
  .itemid-130 .introhome.detail, .itemid-232 .introhome.detail, .itemid-233 .introhome.detail,
  .itemid-130 #section-id-1661499563094.introhome.detail, .itemid-232 #section-id-1661499563094.introhome.detail, .itemid-233 #section-id-1661499563094.introhome.detail { padding-bottom: 30px !important; }
}