/*
 * SSG: huisstijl Self Storage Groesbeek bovenop Quark 2.
 * Benadert het oorspronkelijke ontwerp: donkergroene menubalk, foto van het gebouw,
 * grote groene titel, twee tekstkolommen met zijbalk, oranje boekknop, groene footer.
 */
:root,
:root[data-theme="light"] {
  --ssg-green: #006600;
  --ssg-green-dark: #004d00;
  --ssg-orange: #ff9900;
  --ssg-orange-dark: #e68a00;
  --ssg-text: #4a4a4a;
  --q2-bg: #ffffff;
  --q2-bg-elev: #ffffff;
  --q2-text: var(--ssg-text);
  --q2-text-strong: #2b2b2b;
  --q2-accent: var(--ssg-green);
  --q2-link: var(--ssg-green);
  --q2-nav-bg: var(--ssg-green);
  --q2-nav-border: transparent;
  --q2-header-height: 60px;
  --pico-font-family-sans-serif: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pico-font-family-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pico-primary: var(--ssg-green);
  --pico-primary-hover: var(--ssg-green-dark);
}
body { background: #fff; color: var(--ssg-text); hyphens: manual; -webkit-hyphens: manual; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: 0; }

/* ---------- Menubalk ---------- */
#header { background: var(--ssg-green); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
#header .navbar { justify-content: center; }
#header .desktop-menu { margin: 0 auto; justify-content: center; }
#header .dropmenu > ul > li > a { color: #fff; font-size: 1.125rem; font-weight: 400; padding: .35rem 1rem; border-radius: 9999px; }
#header .dropmenu > ul > li > a:hover,
#header .dropmenu > ul > li > a.active { color: #fff; background: rgba(255, 255, 255, .16); }
.mobile-menu .button_container span { background: var(--ssg-green); }
.mobile-container .overlay { background: var(--ssg-green); }
.mobile-container .overlay a { color: #fff; }
.mobile-logo img { max-width: 220px; margin: 0 auto; background: #fff; padding: .5rem; border-radius: 6px; }

/* ---------- Kopfoto ---------- */
.ssg-hero { height: clamp(220px, 42vw, 520px); background-size: cover; background-position: center; }

/* ---------- Hoofdinhoud ---------- */
.ssg-main { padding: 2.5rem 0 3.5rem; }
.ssg-title {
  color: var(--ssg-green);
  text-align: center;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.15;
  max-width: 820px;
  margin: 0 auto 2.5rem;
}
.ssg-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 2.5rem; max-width: 1100px; margin: 0 auto; }
.ssg-prose { font-size: 1.0625rem; line-height: 1.7; }
.ssg-prose.ssg-cols, .ssg-content > .ssg-prose:only-child { columns: 2 280px; column-gap: 2.5rem; }
.ssg-prose p { break-inside: avoid; }
.ssg-prose h2 { color: var(--ssg-green); font-size: 1.4rem; column-span: all; }

/* ---------- Zijbalk ---------- */
.ssg-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.ssg-sidebar__logo { width: 100%; max-width: 280px; height: auto; }
.ssg-contactbox { background: var(--ssg-green); color: #fff; font-weight: 600; padding: 1rem 1.1rem; border-radius: 4px; }
.ssg-sidebar form button[type="submit"],
.ssg-sidebar form .button { background: var(--ssg-green); border-color: var(--ssg-green); color: #fff; font-weight: 600; }

/* ---------- Boekknop ---------- */
.ssg-boek {
  display: inline-block;
  text-align: center;
  background: var(--ssg-orange);
  color: #fff !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: .75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
}
.ssg-boek:hover { background: var(--ssg-orange-dark); }

/* ---------- Prijslijst ---------- */
.ssg-prijzen { width: 100%; max-width: 420px; border-collapse: collapse; margin: 0 0 .75rem; font-size: 1.0625rem; }
.ssg-prijzen caption { text-align: left; font-weight: 600; color: var(--ssg-green); font-size: 1.25rem; padding-bottom: .5rem; }
.ssg-prijzen th { text-align: left; background: var(--ssg-green); color: #fff; padding: .55rem .8rem; }
.ssg-prijzen td { padding: .5rem .8rem; border-bottom: 1px solid #e5e5e5; }
.ssg-prijzen tbody tr:nth-child(even) td { background: #f5f8f2; }
.ssg-prijzen td:last-child, .ssg-prijzen th:last-child { text-align: right; }
.ssg-noot { font-size: .9rem; color: #666; margin-bottom: 2rem; }

/* ---------- Band en footer ---------- */
.ssg-band { background: var(--ssg-green); color: #fff; text-align: center; padding: 3rem 0; }
.ssg-band__title { color: #fff; font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 600; max-width: 760px; margin: 0 auto 1.5rem; line-height: 1.25; }
.ssg-footer { background: var(--ssg-green-dark); color: #f0f0f0; padding: 3rem 0 4.5rem; margin: 0; }
.ssg-footer p, .ssg-footer li { color: #f0f0f0; }
.ssg-footer a, .ssg-footer a:visited { color: #fff !important; text-decoration: underline; text-underline-offset: 2px; }
.ssg-footer__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; max-width: 1100px; }
.ssg-footer__logo { width: 220px; max-width: 100%; height: auto; background: #fff; padding: .6rem; border-radius: 6px; margin-bottom: 1rem; }
.ssg-footer__name { font-weight: 700; font-size: 1.2rem; margin-bottom: .25rem; }
.ssg-footer__kop { font-weight: 600; margin-bottom: .25rem; }
.ssg-footer ul { margin: 0; padding-left: 1.1rem; }

/* ---------- Zwevende boekknop ---------- */
.hglt-contactpill {
  position: fixed; left: 14px; bottom: 14px; z-index: 60;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem .4rem .5rem; border-radius: 8px;
  background: #111; color: #fff !important; font-size: .875rem; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* ---------- Mobiel ---------- */
@media (max-width: 840px) {
  .ssg-grid { grid-template-columns: 1fr; }
  .ssg-footer__inner { grid-template-columns: 1fr; }
}

/* ---------- Footer: Quark 2 overschrijven ---------- */
#footer.ssg-footer { background: var(--ssg-green-dark); color: #f0f0f0; border-top: 0; text-align: left; padding: 3rem 0 4.5rem; }
#footer.ssg-footer p { margin: 0 0 .9rem; color: #f0f0f0; }
#footer.ssg-footer a { color: #fff; font-weight: 400; text-decoration: underline; }

/* ---------- Melding (popup) ---------- */
/* Blades/Pico tonen <dialog> als volledig scherm met een <article> als kaart */
dialog.ssg-popup { background-color: rgba(0, 40, 0, .55); padding: 1rem; }
dialog.ssg-popup::backdrop { background: transparent; }
.ssg-popup__kaart {
  position: relative;
  background: #fff;
  border-top: 6px solid var(--ssg-orange);
  border-radius: 8px;
  padding: 2rem 2rem 1.5rem;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  color: var(--ssg-text);
  text-align: left;
}
.ssg-popup__kaart h2 { color: var(--ssg-green); font-size: 1.5rem; line-height: 1.25; margin: 0 2rem .75rem 0; }
.ssg-popup__kaart h2::before { display: none; }
.ssg-popup__kaart p { font-size: 1.0625rem; line-height: 1.6; margin: 0 0 1.25rem; }
.ssg-popup__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.ssg-popup__later { background: transparent; border: 1px solid #bbb; color: #444; padding: .7rem 1.2rem; border-radius: 4px; width: auto; margin: 0; }
.ssg-popup__sluit { position: absolute; top: .5rem; right: .6rem; background: transparent; border: 0; color: #666; font-size: 1.75rem; line-height: 1; padding: .25rem .5rem; width: auto; margin: 0; cursor: pointer; }
.ssg-contactbox { scroll-margin-top: 80px; }