/* Static-site overrides for Smakelijk & Meer */

/* Sticky navbar. overflow-x: hidden on the wrapper would break sticky, clip does not. */
html, body, .astroid-wrapper { overflow: visible !important; overflow-x: clip !important; }
.astroid-header-section {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Footer bottom bar: privacy, copyright and credit centred with equal gaps */
#fc-pym02ar13 > .moduletable { padding-bottom: 0; margin-bottom: 0; }
.copy { padding-top: 14px !important; padding-bottom: 14px !important; }
.copy { --footer-gap: 2.5rem; }
.copy .sppb-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem var(--footer-gap); margin: 0; }
.copy .sppb-row > [class*="sppb-col-"] { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
.copy .sppb-text-left, .copy .sppb-text-right { text-align: center; }
.copy .sppb-addon-text-block .sppb-addon-content,
.copy .sppb-addon-text-block .sppb-addon-content p { margin: 0; line-height: 1.5; }

/* Footer credits row */
.site-footer__credits { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem var(--footer-gap, 2.5rem); font-size: 12px; color: #4c4036; font-family: "Armata", sans-serif; letter-spacing: 1px; }
.site-footer__credits p { margin: 0; }
@media (max-width: 767px) {
  .copy .sppb-row > [class*="sppb-col-"] { flex-basis: 100%; }
  .site-footer__credits { flex-direction: column; }
}

/* Webjongens credit with typewriter */
.credit { --credit-heart: #33951c;
  display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; white-space: nowrap; }
.site-footer__credits .credit__link { display: inline-flex; align-items: center; gap: 0.35rem; color: #4c4036; text-decoration: none; letter-spacing: 0.02em; }
.credit__link strong { font-weight: 700; }
.credit__link:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.credit__link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.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: rgba(76, 64, 54, 0.7); }
.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; } }

/* Den Burg location card with map */
.locatierij .sppb-addon-text-block:has(.location-card) {
  width: min(560px, calc(100vw - 32px)) !important;
  display: block !important;
  padding: 28px !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}
.locatierij .sppb-addon-text-block .location-card p { margin: 0 !important; }
.locatierij .sppb-addon-text-block .location-card .location-card__address { margin: 6px 0 18px !important; color: #4c4036 !important; font-size: 17px !important; }
.location-card__map { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #eee; }
/* The iframe is taller than its frame so Google's footer bar (shortcuts, map data, terms) is cropped off. */
.location-card__map iframe { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 26px); border: 0; }
.locatierij .sppb-addon-text-block .location-card .location-card__route { margin-top: 16px !important; }
.location-card__route a { color: #33951c; font-weight: 600; text-decoration: none; }
.location-card__route a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Keep the desktop paragraph spacing on mobile too (the theme resets it to 0 there).
   The contact address and the map card keep their tight spacing. */
@media (max-width: 991px) {
  .sppb-column:not(.groen) .sppb-addon-text-block .sppb-addon-content:not(.location-card) > p:not(:last-child) { margin-bottom: 16px !important; }
}

/* Mobile menu (replaces the empty Joomla vertical-menu module) */
.menu-icon-cont, .sm-btn-98, #off-menu_98, #astroid-mobilemenu { display: none !important; }
.mnav-toggle { display: none; align-self: center; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 12px; background: #33951c; cursor: pointer; padding: 0; position: relative; }
.mnav-toggle span, .mnav-toggle span::before, .mnav-toggle span::after { position: absolute; left: 12px; width: 20px; height: 2px; border-radius: 2px; background: #fff; content: ""; transition: transform 200ms ease, opacity 200ms ease; }
.mnav-toggle span { top: 21px; }
.mnav-toggle span::before { left: 0; top: -6px; }
.mnav-toggle span::after { left: 0; top: 6px; }
@media (max-width: 991px) { .mnav-toggle { display: block; } }

.mnav-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(20, 16, 12, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 250ms; }
.mnav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2001; width: min(320px, 85vw); background: #fff; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.15); padding: 24px; display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), visibility 300ms; }
.mnav__close { align-self: flex-end; width: 44px; height: 44px; border: 0; border-radius: 12px; background: #f1efec; font-size: 28px; line-height: 1; color: #4c4036; cursor: pointer; }
.mnav ul { list-style: none; margin: 24px 0 0; padding: 0; }
.mnav li { border-bottom: 1px solid #eee; }
.mnav a { display: block; padding: 16px 4px; font-family: "Khand", sans-serif !important; font-size: 26px; font-weight: 500; color: #33951c; text-decoration: none; }
.mnav a:hover, .mnav a:focus-visible { color: #287616; }
html.mnav-open .mnav { transform: none; visibility: visible; }
html.mnav-open .mnav-backdrop { opacity: 1; visibility: visible; }
html.mnav-open, html.mnav-open body { overflow: hidden !important; }
@media (prefers-reduced-motion: reduce) { .mnav, .mnav-backdrop { transition: none; } }
@media (max-width: 991px) {
  #astroid-header > .d-flex { display: flex !important; align-items: center; flex-wrap: nowrap; }
  #astroid-header > .d-flex > .d-lg-none { display: none !important; }
  #astroid-header .header-left-section { display: flex !important; flex: 1 1 auto; justify-content: flex-start !important; }
  #astroid-header .header-right-section { display: flex !important; flex: 0 0 auto; }
}

/* Anchor jumps land below the sticky navbar */
.sppb-section[id] { scroll-margin-top: 90px; }

@media (max-width: 767px) {
  /* the theme zeroes paragraph margins on mobile, so space the map instead */
  .location-card__map { margin-bottom: 20px; }
}