/* =============================================================================
   modernize.css  —  ThingstodoinAmsterdam.com
   Track A · stap 1: typografie, kleur & spacing  (fonts nu ZELF-GEHOST)
   -----------------------------------------------------------------------------
   Additieve laag. Laadt NA front.css (zie core/controller/front.php).
   Terugdraaien? Verwijder/comment de 'ttdia-modern'-enqueue in
   core/controller/front.php.
 
   Fonts: Oswald (display/koppen) + Figtree (body), zelf-gehost als woff2.
   Verwachte bestanden (zelf plaatsen, zie handleiding):
     assets/fonts/oswald/oswald-500.woff2
     assets/fonts/oswald/oswald-600.woff2
     assets/fonts/oswald/oswald-700.woff2
     assets/fonts/figtree/figtree-400.woff2
     assets/fonts/figtree/figtree-400-italic.woff2
     assets/fonts/figtree/figtree-500.woff2
     assets/fonts/figtree/figtree-600.woff2
     assets/fonts/figtree/figtree-700.woff2
 
   Deze laag OVERSCHRIJFT deze regels uit assets/css/front/partials/_global.scss:
     - body (r.27-34) · h1..h6 (r.36-45) · a (r.170-181) · .btn/buttons (r.258-300)
   ============================================================================= */
 
/* ---------- Zelf-gehoste fonts ---------- */
/* Oswald — display / koppen */
@font-face{font-family:"Oswald";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/oswald/oswald-500.woff2") format("woff2");}
@font-face{font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/oswald/oswald-600.woff2") format("woff2");}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/oswald/oswald-700.woff2") format("woff2");}
/* Figtree — body */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/figtree/figtree-400.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/figtree/figtree-400-italic.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/figtree/figtree-500.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/figtree/figtree-600.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/figtree/figtree-700.woff2") format("woff2");}
 
/* ---------- Basis / body ---------- */
body {
  font-family: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;               /* was 14px — grootste zichtbare verandering */
  font-weight: 400;              /* was 500 */
  line-height: 1.65;
  color: #1b1512;                /* diep warm bijna-zwart, was #5a5a5a */
  background: #faf8f6;           /* subtiel warme off-white, was #FAFAFA */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
p { line-height: 1.7; }
 
/* ---------- Koppen ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: "Oswald", "Arial Narrow", Impact, sans-serif;
  font-weight: 600;
  text-shadow: none;             /* de gedateerde witte schaduw weg */
  letter-spacing: 0;
  line-height: 1.15;
  color: inherit;                /* neemt nu het donkere body-zwart over */
}
 
/* Kleinere subkoppen in de body-sans = rustiger en beter leesbaar */
h4, h5, h6 {
  font-family: "Figtree", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.3;
}
 
h1 { font-size: 44px; line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-size: 34px; line-height: 1.15; }
h3 { font-size: 25px; line-height: 1.25; }
 
@media (max-width: 768px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 21px; }
  /* was line-height:1 op mobiel = te krap */
  h1, h2, h3, h4, h5, h6 { line-height: 1.2; }
}
 
/* ---------- Links ---------- */
a        { color: #e10707; }     /* exact logorood (haalt AA, ~4,7-4,9:1) */
a:hover,
a:focus  { color: #970505; }
 
/* ---------- Knoppen: van blauw (#5472d2) naar merkrood ---------- */
.btn,
#main-wrapper .button,
#main-wrapper input[type="submit"] {
  background: #e10707;
  border-radius: 6px;
  font-weight: 600;
  transition: background .2s ease, transform .12s ease;
}
.btn:hover,  .btn:focus,  .btn:active,
#main-wrapper .button:hover,
#main-wrapper .button:focus,
#main-wrapper input[type="submit"]:hover,
#main-wrapper input[type="submit"]:focus {
  background: #970505;
}
.btn.btn-secondary { background: #e10707; }
.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:active { background: #970505; }
 
/* =============================================================================
   STAP 2 — post-kaarten & knop-states
   (body-prefix = iets hogere specificiteit; shortcode-CSS kan later laden)
   ============================================================================= */
 
/* ---------- Knop-states opschonen (Bootstrap-blauw -> merkrood) ---------- */
.btn:focus, .btn.focus,
.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 .2rem rgba(225,7,7,.35);   /* was blauwe gloed */
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background: #970505;
  border-color: #970505;
  color: #fff;
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 .2rem rgba(225,7,7,.35);
}
.btn:focus-visible {                            /* nette focus voor toetsenbord */
  outline: 2px solid #970505;
  outline-offset: 2px;
}
.btn-outline-primary {
  color: #be0606;
  border-color: #e10707;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  color: #fff;
  background: #e10707;
  border-color: #e10707;
}
 
/* ---------- Post-kaarten (posts-shortcode) ---------- */
body .shortcode-posts .posts { gap: 28px; margin: 0 0 20px; }
body .shortcode-posts .posts .posts-shortcode-item {
  width: auto;
  flex: 1 1 calc(33.333% - 28px);
  max-width: calc(33.333% - 28px);
  padding: 0;
  margin-bottom: 0;
  background: #ffffff;
  border: 1px solid #ebe3dd;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27,21,18,.04), 0 10px 24px -14px rgba(27,21,18,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
body .shortcode-posts .posts .posts-shortcode-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(27,21,18,.06), 0 22px 44px -16px rgba(27,21,18,.28);
}
@media (max-width: 991px) {
  body .shortcode-posts .posts .posts-shortcode-item {
    flex-basis: calc(50% - 28px); max-width: calc(50% - 28px);
  }
}
@media (max-width: 767px) {
  body .shortcode-posts .posts .posts-shortcode-item {
    flex-basis: 100%; max-width: 370px;
  }
}
/* Beeld: vaste verhouding, vult de kaartbreedte, geen scheve hoogtes meer */
body .shortcode-posts .posts .posts-shortcode-item .post-image {
  max-height: none;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
body .shortcode-posts .posts .posts-shortcode-item .post-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Tekstblok in de kaart */
body .shortcode-posts .posts .posts-shortcode-item .post-inner {
  background: transparent;
  padding: 16px 18px 18px;
}
body .shortcode-posts .posts .posts-shortcode-item .post-title { margin-top: 0; }
 
/* ---------- Promo-blokken: rechthoekige cards ---------- */
body .promo-shortcode-wrapper { gap: 24px; margin-bottom: 24px; }
body .promo-shortcode-wrapper .promo-item {
  width: calc(33.333% - 16px);
  padding: 0;
  align-items: stretch;
  text-align: left;
  background: #fff;
  border: 1px solid #ebe3dd;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27,21,18,.04), 0 10px 24px -14px rgba(27,21,18,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
body .promo-shortcode-wrapper .promo-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(27,21,18,.06), 0 22px 44px -16px rgba(27,21,18,.28);
}
body .promo-shortcode-wrapper .promo-item .promo-image-wrapper {
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 0; padding: 0; margin: 0; background: none; overflow: hidden;
}
body .promo-shortcode-wrapper .promo-item .promo-image {
  border-radius: 0;
  width: 100%; height: 100%; object-fit: cover;
}
body .promo-shortcode-wrapper .promo-item .promo-title,
body .promo-shortcode-wrapper .promo-item .promo-text,
body .promo-shortcode-wrapper .promo-item .promo-address,
body .promo-shortcode-wrapper .promo-item .promo-price {
  text-align: left;
  padding-left: 16px; padding-right: 16px;
}
body .promo-shortcode-wrapper .promo-item .promo-title { margin-top: 14px; }
body .promo-shortcode-wrapper .promo-item .promo-text { padding-bottom: 18px; }
/* alternerende achtergrond-tinten (style2/3/4) neutraliseren voor de card-look */
body .promo-shortcode-wrapper.style2 .promo-item:nth-child(2n),
body .promo-shortcode-wrapper.style2 .promo-item:nth-child(2n+1),
body .promo-shortcode-wrapper.style3 .promo-item:nth-child(2n),
body .promo-shortcode-wrapper.style3 .promo-item:nth-child(2n+1),
body .promo-shortcode-wrapper.style4 .promo-item:nth-child(2n),
body .promo-shortcode-wrapper.style4 .promo-item:nth-child(2n+1) { background: #fff; }
body .promo-shortcode-wrapper.style4 .promo-item { width: calc(25% - 18px); }
@media (max-width: 991px) {
  body .promo-shortcode-wrapper .promo-item,
  body .promo-shortcode-wrapper.style4 .promo-item { width: calc(50% - 12px); }
}
@media (max-width: 767px) {
  /* negatieve zijmarges van de shortcode neutraliseren + minimale zijruimte */
  body .promo-shortcode-wrapper {
    margin-left: 0; margin-right: 0;
    padding-left: 3px; padding-right: 3px;
  }
  body .promo-shortcode-wrapper .promo-item,
  body .promo-shortcode-wrapper.style4 .promo-item { width: 100%; }
}
 
/* ---------- Footer: WPML-taalwisselaar centreren + uitlijnen ---------- */
#footer .widget_icl_lang_sel_widget .widget-content { text-align: center; }
/* knop = vaste breedte van het breedste item; inhoud links (vlaggen onder elkaar) */
#footer .widget_icl_lang_sel_widget .wpml-ls-legacy-dropdown {
  display: inline-block;
  width: 260px;
  vertical-align: top;
  text-align: left;
}
/* uitklapmenu even breed als de knop; taalnamen op één regel */
#footer .widget_icl_lang_sel_widget .wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
  width: 100%;
  min-width: 100%;
}
#footer .widget_icl_lang_sel_widget .wpml-ls-legacy-dropdown a { white-space: nowrap; }