/*
Theme Name:   AD Delhaize Lebbeke
Theme URI:    https://addelhaizelebbeke.be/
Author:       AD Delhaize Lebbeke
Description:  Thema voor AD Delhaize Lebbeke, gebaseerd op de statische omzetting van addelhaizelebbeke.be. Ondersteunt WooCommerce en een Polylang-taalwisselaar.
Version:      1.2.0
Requires at least: 5.0
Tested up to: 6.6
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  adlebbeke
*/

/* ==========================================================================
   AD Delhaize Lebbeke, overschrijflaag

   De volledige huisstijl staat in assets/hoofdstijl.css. Dit bestand laadt
   daarna (zie adlebbeke_assets in functions.php) en bevat alleen de kop
   hierboven, die WordPress nodig heeft, plus de correcties die bewust na de
   huisstijl moeten komen. Zet nieuwe basisopmaak dus in hoofdstijl.css, en
   enkel een overschrijving hier.
   ========================================================================== */


/* ==========================================================================
   Leesbaarheids- en padding-correcties
   ========================================================================== */

/* Contactkaart dwingt altijd donkere tekst af, ook als hij op een donker vlak
   staat (zoals in het jobs-blok). Voorkomt lichtgrijze tekst op de witte kaart. */
.contactkaart,
.contactkaart p,
.contactkaart li,
.contactkaart strong,
.vlak-donker .contactkaart p,
.vlak-donker .contactkaart li {
  color: var(--inkt);
}
.contactkaart .eyebrow,
.vlak-donker .contactkaart .eyebrow { color: var(--rood); }
.contactkaart h3,
.vlak-donker .contactkaart h3 { color: var(--inkt); }
.contactkaart .gegevens strong { color: var(--inkt-zacht); }
.contactkaart a:not(.knop) { color: var(--rood); }

/* Eyebrow op rood iets voller voor beter contrast. */
.vlak-rood .eyebrow { color: #FFE1E5; }

/* Zorg dat WordPress- of plugin-tekst nooit onleesbaar lichtgrijs op wit wordt:
   alle gewone paragraaftekst in de hoofdinhoud krijgt minstens inkt-zacht. */
.pagina-inhoud p,
main .wrap > p { color: inherit; }

/* Knoppen: ruimere, consistente padding overal, ook mailto-knoppen en
   WordPress-knoppen die niet .knop heten. */
.knop,
a.knop,
button.knop,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
  padding: .8rem 1.6rem;
  line-height: 1.2;
}

/* Touch-doelen op mobiel iets ruimer. */
@media (max-width: 900px) {
  nav a,
  nav .dropdown-menu a { padding: .8rem 0; }
  .taal a,
  .taal li a { padding: .35rem .6rem; }
  .knop { padding: .9rem 1.6rem; }
}


/* Contact als knop in het menu (rode achtergrond, witte letters).
   margin-left: auto duwt hem naar het rechteruiteinde van de menubalk, pal voor
   de taalswitch; de overige items blijven links naast het logo staan. */
nav .menu-contact { margin-left: auto; }
nav .menu-contact-knop {
  display: inline-block;
  background: var(--rood);
  color: #fff;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 0;
  transition: background .18s ease;
}
nav .menu-contact-knop:hover { background: var(--rood-diep); color: #fff; border-bottom: 0; }

/* Op mobiel de contactknop gewoon als link tonen, zoals de rest van het menu. */
@media (max-width: 900px) {
  nav .menu-contact { margin-left: 0; }
  nav .menu-contact-knop {
    display: block;
    background: none;
    color: var(--inkt);
    padding: .8rem 0;
    border-radius: 0;
    border-bottom: 1px solid var(--lijn);
    font-weight: 400;
  }
  nav .menu-contact-knop:hover { background: none; color: var(--rood); }
}