/* ===================================================================
   Eigen aanpassingen - Stichting UFO
   -------------------------------------------------------------------
   Dit bestand staat LOS van de WordPress- en Elementor-bestanden en
   wordt als laatste ingeladen, dus wat hier staat wint. Zet al je eigen
   stijlwijzigingen hier neer en laat wp-content/themes/ en
   wp-content/plugins/ met rust.
   =================================================================== */

:root {

  /* ZO VER SCHUIFT HET LOGO MAXIMAAL NAAR LINKS.
     Dit is het enige getal dat je hoeft aan te passen.
       grotere waarde = verder naar links
       0px            = terug naar de oorspronkelijke plek        */
  --ufo-logo-max: 40px;

  /* Hoeveel ruimte er links van het logo beschikbaar is. De header
     staat in een gecentreerde kolom van 1240px met 20px binnenmarge. */
  --ufo-logo-ruimte: calc((100vw - 1240px) / 2 + 20px);

  /* Schuif nooit verder dan er ruimte is, en houd 20px over tot de
     vensterrand. Zonder deze berekening valt het logo bij een venster
     van rond de 1200px half buiten beeld.                          */
  --ufo-logo-shift: clamp(
      0px,
      calc(var(--ufo-logo-ruimte) - 20px),
      var(--ufo-logo-max)
  );
}

/* Alleen op desktop. Op mobiel staat het logo al op 20px van de rand. */
body.ast-desktop .site-header-section-left .site-branding {
  transform: translateX(calc(-1 * var(--ufo-logo-shift)));
}

/* Copyright onderaan elke pagina: logo met de tekst ernaast. */
.ufo-copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 20px 28px;
  font-size: 15px;
  opacity: .85;
}
.ufo-copyright img {
  width: 64px;
  height: 64px;
  flex: none;
}

/* ===================================================================
   Smalle desktop / tablet liggend (922px t/m 1024px)
   -------------------------------------------------------------------
   Astra toont het volledige menu vanaf 922px, maar Elementor maakt de
   bovenste blok al kleiner vanaf 1024px. Het grote logo (248px) valt
   daardoor over de titel heen en het menu springt naar twee regels.
   Hier: logo en menu kleiner, en de titel iets lager. Boven 1024px is
   er genoeg ruimte en verandert er niets.
   =================================================================== */
@media (min-width: 922px) and (max-width: 1024px) {
  body.ast-desktop .site-branding .custom-logo {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
  }
  body.ast-desktop .main-header-menu > li > .menu-link {
    font-size: 14px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    line-height: 60px !important;
  }
  body.ast-desktop .elementor-top-section:first-of-type {
    padding-top: 150px !important;
  }
}

/* ===================================================================
   Contactformulier (contactpagina). Werking: wp-content/ufo-formulier.js
   =================================================================== */
.ufo-formulier {
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 0 30px;
  text-align: left;
}
.ufo-veld {
  margin: 0 0 16px;
}
.ufo-veld label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}
.ufo-veld input,
.ufo-veld textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #b8b8b8;
  border-radius: 6px;
  font: inherit;
  font-size: 16px;            /* voorkomt inzoomen op iPhone */
  background: #fff;
  color: #222;
}
.ufo-veld input:focus,
.ufo-veld textarea:focus {
  outline: 2px solid #ffd936;
  outline-offset: 1px;
  border-color: #8a8a8a;
}
.ufo-veld textarea {
  resize: vertical;
  min-height: 140px;
}
/* Lokveld voor spambots: buiten beeld, niet zichtbaar voor bezoekers. */
.ufo-lokveld {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.ufo-turnstile {
  margin: 4px 0 16px;
  min-height: 65px;
}
.ufo-knop {
  display: inline-block;
  padding: 12px 32px;
  border: 0;
  border-radius: 6px;
  background: #ffd936;
  color: #222 !important;   /* het thema maakt knoptekst groen: te weinig contrast */
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}
.ufo-knop:hover,
.ufo-knop:focus {
  background: #f2c800;
}
.ufo-knop:disabled {
  opacity: .5;
  cursor: default;
}
.ufo-status {
  min-height: 1.4em;
  margin: 12px 0 0;
  font-weight: 600;
}
.ufo-status--ok {
  color: #2f6b2f;
}
.ufo-status--fout {
  color: #a32020;
}
.ufo-privacy {
  margin-top: 16px;
  font-size: 14px;
  opacity: .8;
}

/* Adres van het secretariaat onder het contactformulier. */
.ufo-adres {
  max-width: 560px;
  margin: 0 auto 40px;
  padding: 18px 22px;
  border-left: 4px solid #ffd936;
  border-radius: 6px;
  background: #f7f7f2;
  font-style: normal;
  line-height: 1.7;
  text-align: left;
}
.ufo-adres__kop {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .7;
}

/* ===================================================================
   Leesbaarheid (20-10-2026)
   -------------------------------------------------------------------
   De oorspronkelijke tekstkleur was lichtgroen met 75% dekking (contrast
   ongeveer 3,5:1) en de letter 14,6px. Dit is donkerder en groter; het
   contrast is nu ruim boven de norm van 4,5:1. Wil je de tekst lichter
   of kleiner? Pas alleen deze twee waarden aan.
   =================================================================== */
:root {
  --ufo-tekstkleur: #3f5230;
  --ufo-tekstgrootte: 17px;
}
body .elementor-widget-text-editor,
body .elementor-widget-text-editor p,
body .elementor-widget-text-editor li,
body .elementor-widget-text-editor td,
body .elementor-widget-text-editor th {
  color: var(--ufo-tekstkleur);
  font-size: var(--ufo-tekstgrootte) !important;
  line-height: 1.65 !important;
}
body .elementor-widget-text-editor a {
  text-decoration: underline;
}

/* ===================================================================
   Bovenste afbeelding op mobiel (t/m 767px)
   -------------------------------------------------------------------
   De slogan stond in 72px op vier regels en de afbeelding was ruim een
   scherm hoog, zodat de eerste tekst onder de vouw viel. Nu kleiner,
   zodat de tekst al op het eerste scherm begint.
   =================================================================== */
@media (max-width: 767px) {
  body .elementor-top-section:first-of-type {
    padding-top: 40px !important;
    padding-bottom: 32px !important;
  }
  body .elementor-top-section:first-of-type > .elementor-container {
    min-height: 200px !important;
  }
  body .elementor-top-section:first-of-type h1.elementor-heading-title:first-of-type {
    font-size: 40px !important;
    line-height: 1.15 !important;
  }
  body .elementor-top-section:first-of-type .elementor-widget-heading + .elementor-widget-heading h1.elementor-heading-title,
  body .elementor-top-section:first-of-type .elementor-widget-heading:last-of-type h1.elementor-heading-title {
    font-size: 40px !important;
    line-height: 1.15 !important;
  }
}

/* Privacy-link boven het copyright in de footer. */
.ufo-voetnav {
  padding: 24px 20px 0;
  text-align: center;
  font-size: 15px;
}
.ufo-voetnav a {
  color: var(--ufo-tekstkleur);
  text-decoration: underline;
}
.ufo-voetnav + .ufo-copyright {
  padding-top: 12px;
}

/* Privacypagina: kop en tussenkoppen in dezelfde groene kleur als de rest. */
.ufo-privacy-pagina .elementor-widget-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 20px 40px;
}
.ufo-privacy-pagina h2.ufo-pagina-kop {
  margin-bottom: 4px;
  text-align: center;
}
.ufo-privacy-pagina .ufo-bijgewerkt {
  text-align: center;
}
.ufo-privacy-pagina h3 {
  margin: 28px 0 6px;
  font-size: 22px;
  color: #536942;
}
.ufo-privacy-pagina .ufo-bijgewerkt {
  margin-bottom: 8px;
  font-size: 14px;
  opacity: .75;
}
.ufo-privacy-pagina p {
  color: var(--ufo-tekstkleur);
  font-size: var(--ufo-tekstgrootte);
  line-height: 1.65;
}
.ufo-privacy-pagina a {
  color: var(--ufo-tekstkleur);
  text-decoration: underline;
}

/* Tabellen (bijvoorbeeld de bestuursleden): met de grotere letter zou de
   tabel op een telefoon breder worden dan het scherm. Lange woorden mogen
   daarom afbreken. */
body .elementor-widget-text-editor table {
  width: 100% !important;
  max-width: 100%;
}
body .elementor-widget-text-editor td,
body .elementor-widget-text-editor th {
  overflow-wrap: anywhere;
}

/* ===================================================================
   Ontwerpverbeteringen (20-10-2026)
   =================================================================== */

/* 1. Menu leesbaar over de foto: een donkere, doorzichtige zweem boven in
      de foto en een lichte schaduw achter de letters. De zweem verdwijnt
      naar onderen toe, dus de foto zelf blijft goed zichtbaar. */
#masthead {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
body.ast-desktop .main-header-menu > li > .menu-link {
  text-shadow: 0 1px 4px rgba(0, 0, 0, .75);
}

/* 2. Menu op één regel. Op elk desktopscherm was er te weinig ruimte voor
      zes items in de oorspronkelijke maat, waardoor "Contact" alleen op een
      tweede regel kwam. Letter en tussenruimte schalen nu mee met de
      breedte van het venster (14-17px). */
body.ast-desktop .main-header-menu {
  flex-wrap: nowrap;
}
body.ast-desktop .main-header-menu > li > .menu-link {
  font-size: clamp(14px, 1.35vw, 17px) !important;
  padding-left: clamp(8px, .95vw, 12px) !important;
  padding-right: clamp(8px, .95vw, 12px) !important;
  white-space: nowrap;
}
/* Tot 1200px breed is er naast het volle logo te weinig plek: het logo
   wordt dan kleiner, net als op een smaller venster. */
@media (min-width: 1025px) and (max-width: 1200px) {
  body.ast-desktop .site-branding .custom-logo {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
  }
}

/* 3. Tekstkolom: ongeveer 75 tekens per regel in plaats van meer dan 110.
      De kolom staat in het midden, onder de gecentreerde koppen. */
body .elementor-widget-text-editor .elementor-widget-container {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* 4. Lettertype voor de lopende tekst: Bitter, een slab-serif die goed
      leesbaar is op een scherm en past bij de koppen in Cooper Black. De
      bestanden staan in wp-content/fonts/ (niets wordt van Google geladen).
      Het oorspronkelijke "American Typewriter" werd nooit geladen en de
      typemachineletter was moeilijk te lezen; zie BEHEER.md, "Lettertypen".
      De tekst staat op normaal gewicht; 600 was te zwaar. */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/bitter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/bitter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
body,
button,
input,
select,
textarea,
body .elementor-widget-text-editor,
body .elementor-widget-text-editor .elementor-widget-container,
body .elementor-widget-text-editor p,
body .elementor-widget-text-editor li,
body .elementor-widget-text-editor td,
body .elementor-widget-text-editor th,
body .elementor-widget-text-editor span,
body .elementor-widget-text-editor a,
body .elementor-widget-text-editor address,
.ufo-privacy-pagina p,
.ufo-formulier,
.ufo-formulier label,
.ufo-knop,
.ufo-status,
.ufo-privacy,
.ufo-adres,
.ufo-copyright,
.ufo-voetnav {
  font-family: var(--ufo-tekstfont) !important;
}

/* Lettertype en grootte van de lopende tekst. Wil je een ander lettertype,
   zet de bestanden in wp-content/fonts/, meld ze hierboven aan met
   @font-face en pas deze twee waarden aan. */
:root {
  --ufo-tekstfont: "Bitter", Georgia, "Times New Roman", serif;
  --ufo-tekstgrootte: 17px;
}
body .elementor-widget-text-editor,
body .elementor-widget-text-editor p,
body .elementor-widget-text-editor li,
body .elementor-widget-text-editor td,
body .elementor-widget-text-editor th {
  font-weight: 400 !important;
}

/* 5. Copyright in de footer in dezelfde donkere tekstkleur. */
.ufo-copyright {
  color: var(--ufo-tekstkleur);
  opacity: 1;
}

/* 6. Links in de lopende tekst waren geel op wit en daardoor nauwelijks te
      lezen (bijvoorbeeld de PDF's bij "Financieel overzicht"). Nu in de
      donkere tekstkleur, onderstreept. */
body .elementor-widget-text-editor a {
  color: var(--ufo-tekstkleur) !important;
  text-decoration: underline;
}
body .elementor-widget-text-editor a:hover,
body .elementor-widget-text-editor a:focus {
  color: #536942 !important;
  text-decoration-thickness: 2px;
}

/* 7. Bestuurstabel: de eerste kolom kreeg te weinig ruimte, waardoor
      "Harry de Beer :" over twee regels brak. Alleen op bredere schermen. */
@media (min-width: 768px) {
  body .elementor-widget-text-editor col:first-child {
    width: 30% !important;
  }
}

/* 8. Contactpagina: de kop boven het formulier stond links, terwijl de
      rest van de pagina in het midden staat. */
.elementor-element-6caca4b .elementor-heading-title {
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}

/* 9. Tekst die niet in een <p> staat (bijvoorbeeld de eerste regels op de
      pagina Oefenruimtes) kreeg de nieuwe letter niet en bleef kleiner dan
      de alinea's eronder. Dezelfde instelling dus ook op de omhullende
      container. */
body .elementor-widget-text-editor .elementor-widget-container {
  color: var(--ufo-tekstkleur);
  font-size: var(--ufo-tekstgrootte) !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}
/* Sommige stukken tekst staan in een <span> met een eigen, vaste letter-
   grootte (16px). Die volgen nu de gewone tekstgrootte. */
body .elementor-widget-text-editor span {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Namen boven de velden van het contactformulier: nu in de donkere tekstkleur. */
.ufo-formulier label {
  color: var(--ufo-tekstkleur);
  font-size: 15px;
}