/* =============================================================================
   base.css — Shared design tokens and utility classes
   Loaded on all frontend pages (homepage, dashboard, order form).
   ============================================================================= */

:root {
    --darkgreen: #354E57;
    --lightgreen: #547665;
    --beige: #F3F0E9;
    --white: #FFFFFF;
    --black: #000000;
    --orange: #FF5421;

    --hero_title: 75px;
    --hero_title_lineheight: 68px;

    --big_title: 50px;
    --big_title_lineheight: 58px;

    --normal_title: 42px;
    --normal_title_lineheight: 51px;

    --small_title: 30px;
    --small_title_lineheight: 36px;

    --xsmall_title: 24px;
    --xsmall_title_lineheight: 30px;

    --xxsmall_title: 20px;
    --xxsmall_title_lineheight: 27px;
}


/* =============================================================================
   Icons
   ============================================================================= */

.icon {
  height: 15px;
  vertical-align: middle;
}

.iconLarge {
  height: 25px;
  vertical-align: middle;
}


/* =============================================================================
   Form validation states
   ============================================================================= */

.fout, .input-fout {
    border: 2px solid red !important;
    background-color: #ffe8e8 !important;
}


/* =============================================================================
   Color utilities
   ============================================================================= */

.roud   { color: red!important; }
.rood   { color: red!important; }
.groen  { color: green!important; }
.oranje { color: orange!important; }
.blauw  { color: blue!important; }
.grijs  { color: gray!important; }
.vet    { font-weight: bold!important; }
.cursief { font-style: italic!important; }


/* =============================================================================
   Size utilities
   ============================================================================= */

.large   { font-size: large; }
.larger  { font-size: larger; }
.small   { font-size: small; }
.smaller { font-size: smaller; }


/* =============================================================================
   Interaction utilities
   ============================================================================= */

.clickable { cursor: pointer; }
.underline { text-decoration: underline; }


/* =============================================================================
   Alignment
   ============================================================================= */

.centered { text-align: center!important; }
.left     { text-align: left!important; }
.right    { text-align: right!important; }


/* =============================================================================
   Whitespace
   ============================================================================= */

.noWrap, .nowrap { white-space: nowrap; }


/* =============================================================================
   Responsive visibility — base declarations.
   Context files (homepage.css, dashboard.css) add @media overrides.
   ============================================================================= */

.mobileOnly, .tabletOnly { display: none !important; }
.noDesktop               { display: none; }


/* =============================================================================
   Notification bar (#bericht) — used in all frontend contexts
   ============================================================================= */

div#bericht {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  text-align: center;
  height: auto;
}

div#bericht div {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  background: white;
  height: auto;
  min-height: 50px;
  padding: .5% 1%;
}

div#bericht div.negatief {
  color: red;
  font-weight: bold;
  background: white;
  border-bottom: 2px solid red;
  border-top: none;
  box-shadow: 5px 5px 10px gray;
}

div#bericht div.positief {
  color: green;
  font-weight: bold;
  background: white;
  border: 2px solid green;
  border-top: none;
}

div#bericht div.waarschuwend {
  color: orange;
  font-weight: bold;
  background: white;
  border: 2px solid orange;
  border-top: none;
}

span#bericht_sluiten {
  display: block;
  clear: both;
  width: 100%;
  text-align: right;
  text-decoration: underline;
  cursor: pointer;
}