/* Corrections for the static lomt.nl site, loaded after custom.css.
   The original theme CSS is left untouched; everything changed is collected here. */

/* The contact form below the map was replaced by the address; keep the gap the taller form used to create */
.sppb-section-content-center:has(.lomt-contact) {
  padding-top: 30px !important;
}

/* Hidden on request: "Jaarverslagen" button and sponsor carousel in the footer (NL pages) */
#sppb-addon-wrapper-1786355885332,
#sppb-addon-wrapper-1713439746802 {
  display: none !important;
}

/* Footer logo was positioned with fixed pixel offsets and landed on the opening hours at many screen sizes */
.logomiddenonder {
  display: none !important;
}

/* Rows with negative margins pushed the page 5-20px wider than phone and tablet screens */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* Tablet portrait: the language switcher was pushed off-screen (margin-top: -200px in custom.css)
   and the logo covered the opening hours. Use the phone order: languages, opening hours, logo. */
@media only screen and (max-width: 1024px) and (min-width: 768px) and (orientation: portrait) {
  .logotaalblok .taal {
    margin-top: 0 !important;
  }
}
@media only screen and (max-width: 991px) and (min-width: 768px) {
  .logotaalblok .sppb-row > [class*="sppb-col"]:has(> .logo) {
    order: 3;
  }
}

/* Request-form pages on phones/tablets: the hanging logo covered the form heading */
@media only screen and (max-width: 991px) {
  .sppb-addon-wrapper:has(.aanmeldformulier) {
    margin-top: 190px;
  }
}

/* Homepage sliders ("Texel en de oorlog" / "Texel en de luchtvaart") in Smart Slider's tablet mode:
   the tabs wrapped onto two rows and the slide title/text ran into them. custom.css only patched the
   Dutch sliders (by internal ID) and stacked 30px margins on every layer. Keep the desktop layout instead:
   one row of tabs at the top, slide content below the orange lines. Media query = Smart Slider's tablet mode. */
@media (orientation: landscape) and (max-width: 1199px) and (min-width: 901px),
       (orientation: portrait) and (max-width: 1199px) and (min-width: 701px) {
  .texelendeoorlogblok .n2-ss-static-slide .n2-ss-layer {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .texelendeoorlogblok .n2-ss-static-slide .n2-ss-layer-row-inner {
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .texelendeoorlogblok .n2-ss-static-slide .n2-ss-layer-row-inner > .n2-ss-layer {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0;
    margin-top: 10px !important;
  }
  .texelendeoorlogblok .n2-ss-static-slide .n2-ss-layer-col .n2-ss-layer {
    width: auto !important;
  }
  .texelendeoorlogblok .n2-ss-static-slide h4,
  .texelendeoorlogblok .n2-ss-static-slide h4 a {
    white-space: normal !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
  }
  .texelendeoorlogblok .n2-ss-slide:not(.n2-ss-static-slide) .n2-ss-section-main-content {
    padding-top: 60px !important;
  }
}

/* Footer: the opening-hours text column had no right padding and ran into the map on tablets */
@media (min-width: 768px) {
  #openingstijden .sppb-order-sm-3 > .sppb-column {
    padding-right: 40px !important;
  }
}

/* Phones (Smart Slider mobile mode): the slider arrows sat in the middle of the slide text.
   Put them below the slider instead. IDs are needed to beat custom.css's per-slider rules. */
@media (orientation: landscape) and (max-width: 900px), (orientation: portrait) and (max-width: 700px) {
  .texelendeoorlogblok .n2-ss-slider-controls-absolute-left-center,
  .texelendeoorlogblok .n2-ss-slider-controls-absolute-right-center {
    top: auto !important;
    bottom: -55px !important;
    height: 40px !important;
  }
  div#n2-ss-4-arrow-previous, div#n2-ss-5-arrow-previous, div#n2-ss-6-arrow-previous,
  div#n2-ss-7-arrow-previous, div#n2-ss-8-arrow-previous, div#n2-ss-9-arrow-previous,
  div#n2-ss-4-arrow-next, div#n2-ss-5-arrow-next, div#n2-ss-6-arrow-next,
  div#n2-ss-7-arrow-next, div#n2-ss-8-arrow-next, div#n2-ss-9-arrow-next {
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
  }
  /* same arrow format as on desktop: 26px icon in a 30px box */
  div#n2-ss-4-arrow-previous img, div#n2-ss-5-arrow-previous img, div#n2-ss-6-arrow-previous img,
  div#n2-ss-7-arrow-previous img, div#n2-ss-8-arrow-previous img, div#n2-ss-9-arrow-previous img,
  div#n2-ss-4-arrow-next img, div#n2-ss-5-arrow-next img, div#n2-ss-6-arrow-next img,
  div#n2-ss-7-arrow-next img, div#n2-ss-8-arrow-next img, div#n2-ss-9-arrow-next img {
    width: 26px !important;
    height: 26px !important;
  }
}

/* Phones and tablets: the clock icon had its own column and never lined up with the opening-hours text
   (which has a 60px top padding that varies per width). Show it inline at the start of the text instead. */
@media (max-width: 991px) {
  .logotaalblok .sppb-row > [class*="sppb-col"]:has(.openicon) {
    display: none !important;
  }
  .logotaalblok .sppb-row > [class*="sppb-col"]:has(> .openingstijden) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  .logotaalblok .openingstijden .sppb-addon-content p:first-child::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: 0 10px 0 0;
    vertical-align: -5px;
    background: url(/images/2020/08/27/clock.svg) no-repeat center / contain;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .logotaalblok .openingstijden .sppb-addon-content {
    text-align: center;
  }
}

/* Stacked contact block: space between the address and the video, whichever comes first */
@media (max-width: 991px) {
  .sppb-row > [class*="sppb-col-"]:has(.lomt-contact) {
    padding-bottom: 30px !important;
  }
}
@media (max-width: 767px) {
  .sppb-row > [class*="sppb-col-"].sppb-order-xs-2:has(.lomt-contact) {
    padding-bottom: 0 !important;
    padding-top: 30px !important;
  }
}

/* Theme detail pages (Atlantikwall, Russenoorlog, ...) on tablets and phones */
@media (min-width: 992px) and (max-width: 1199px) {
  /* photo + text side by side left a small photo next to a long text: stack them, as below 992px */
  .nieuwsblokhome.detail .sppb-row > .sppb-col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 1199px) {
  /* no desktop overlap offset on stacked photos; space between photo and the heading below it */
  .nieuwsblokhome.detail .sppb-addon-single-image {
    margin-top: 0 !important;
    margin-bottom: 30px !important;
  }
  .nieuwsblokhome.detail .sppb-addon-single-image img {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
  /* background photos were shifted -200px for the desktop composition and left a bare strip on the right */
  .texelendeoorlogblok.detail {
    background-position: center center !important;
  }
}
@media (max-width: 991px) {
  /* custom.css removed the column padding, so text ran 15px past the screen edge (headings were cut off) */
  .sloganactueelblok.detail .sppb-col-md-9,
  .texelendeoorlogblok.detail .sppb-col-md-9 {
    padding: 0 45px 0 15px !important;
  }
}