/* Font-face declarations for self-hosted fonts */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Poppins-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Poppins-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Poppins-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Roboto-SemiBold.ttf') format('truetype');
}

/* tokens */

:root {

  

  /* -------- BRAND COLORS -------- */
  --color-green:         #97C51F; 
  --color-orange:        #ED7D31; 
  --color-black:         #000000;

  /* -------- SEMANTIC COLORS -------- */
  --color-primary:       #97C51F;      /* Green - main brand color */
  /* --color-primary-hover: #7FB81F; */
  --color-primary-hover: var(--color-orange);
  --color-primary-dark:  #5E7D13;
  --color-primary-light: #C5E85C;      /* Very light green for backgrounds, badges */

  --color-accent:        #222222;      /* Near-black accent for buttons, icons */
  --color-accent-hover:  #444444;      /* Lighter black for hover states */

  --color-white:         #FFFFFF;
  --color-off-white:     #F5F5F0;      /* Warm off-white (greenish tint) */
  --color-light-bg:      #F8FAF0;      /* Subtle green-tinted background */

  --color-text:          #1A1A1A;      /* Near-black text for readability */
  --color-text-secondary:#666666;      /* Gray for secondary text */
  --color-title:         #111111;      /* Darker for headings */

  --color-border:        #D4D4D4;      /* Neutral gray borders */
  --color-border-light:  #E8E8E0;      /* Lighter borders, dividers */

  --color-success:       #97C51F;      /* Same green for success states */
  --color-warning:       #F5A623;      /* Warm amber for warnings */
  --color-error:         #D32F2F;      /* Red only for errors, not branding */

  /* -------- SEMANTIC GRADIENTS -------- */
  --gradient-primary:    linear-gradient(135deg, #97C51F 0%, #7AA018 100%);
  --gradient-dark:       linear-gradient(135deg, #000000 0%, #333333 100%);


  /* -------- FONT SIZES (rem) -------- */
  --size-xxs:            0.5rem;      
  --size-xs:             0.7rem;      
  --size-sm:             0.875rem;      /* 14px */
  --size-base:           1rem;          /* 16px */
  --size-md:             1.125rem;      /* 18px */
  --size-lg:             1.5rem;        /* 24px */
  --size-xl:             2rem;          /* 32px */
  --size-2xl:            3rem;      /* 62px */

  /* -------- SPACING (rem) -------- */
  --gap-sm:              0.625rem;      /* 10px */
  --gap-base:            1rem;          /* 16px */
  --gap-md:              1.25rem;       /* 20px */
  --gap-lg:              1.875rem;      /* 30px */
  --gap-xl:              2.5rem;        /* 40px */
  --gap-2xl:             3.75rem;       /* 60px */
  --gap-3xl:             6.25rem;       /* 100px */

  /* -------- BORDER-RADIUS (rem) -------- */
  --radius-xl:           1.5rem;        /* 24px */
  --radius-lg:           0.75rem;       /* 12px */
  --radius-md:           0.5rem;        /* 8px */
  --radius-sm:           0.25rem;       /* 4px */

  --font-body:           "Roboto", sans-serif;
  --font-heading:        "Poppins", sans-serif;

  /* --btn-size: 2rem; */
  /* --btn-radius: 1rem; */
    --btn-size: 3rem;
    --btn-radius: 1.5rem;


  --max-width: 1140px;
  --max-width-text: 80ch;
}

html {
  font-size: 16px;
}

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;


  font-family: var(--font-body), sans-serif;
  color: var(--color-text);
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 1.4;

  scroll-padding-top: calc(var(--gap-3xl) + var(--gap-xl));
}

a {
  text-decoration: none;
  color: var(--color-primary-dark);
}
a:hover {
  color: var(--color-primary-hover);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-title);
}

h1 {
  font-size: var(--size-2xl);
}
h2 {
  font-size: var(--size-xl);
}
h3 {
  font-size: var(--size-lg);
}

.grid-col2 {
  display: grid;
  grid-template-columns: 
    minmax(var(--gap-xl), 1fr) 
    [col1-start] 
    minmax(0, calc((var(--max-width) - var(--gap-xl)) / 2)) 
    [col1-end] 
    var(--gap-xl) 
    [col2-start] 
    minmax(0, calc((var(--max-width) - var(--gap-xl)) / 2)) 
    [col2-end] 
    minmax(var(--gap-xl), 1fr);
  row-gap: var(--gap-lg);  
}


.grid-col4 {
  display: grid;
  grid-template-columns: 
    minmax(var(--gap-xl), 1fr) 
    [col1-start] 
    minmax(0, calc((var(--max-width) - var(--gap-xl) * 3) / 4)) 
    [col1-end] 
    var(--gap-xl) 
    [col2-start] 
    minmax(0, calc((var(--max-width) - var(--gap-xl) * 3) / 4)) 
    [col2-end] 
    var(--gap-xl) 
    [col3-start] 
    minmax(0, calc((var(--max-width) - var(--gap-xl) * 3) / 4)) 
    [col3-end] 
    var(--gap-xl) 
    [col4-start] 
    minmax(0, calc((var(--max-width) - var(--gap-xl) * 3) / 4)) 
    [col4-end] 
    minmax(var(--gap-xl), 1fr);
  row-gap: var(--gap-lg);  
}

.grid-col2-25 {
  display: grid;
  grid-template-columns: 
    minmax(var(--gap-xl), 1fr) 
    [col1-start] 
    minmax(0, calc((var(--max-width) - var(--gap-xl)) * 3 / 8)) 
    [col1-end] 
    var(--gap-xl) 
    [col2-start] 
    minmax(0, calc((var(--max-width) - var(--gap-xl)) * 5 / 8)) 
    [col2-end] 
    minmax(var(--gap-xl), 1fr);
  row-gap: var(--gap-lg);  
}

.grid-col2-35 {
  display: grid;
  grid-template-columns: 
    minmax(var(--gap-xl), 1fr) 
    [col1-start] 
    minmax(0, calc((var(--max-width) - var(--gap-xl)) * 5 / 8)) 
    [col1-end] 
    var(--gap-xl) 
    [col2-start] 
    minmax(0, calc((var(--max-width) - var(--gap-xl)) * 3 / 8)) 
    [col2-end] 
    minmax(var(--gap-xl), 1fr);
  row-gap: var(--gap-lg);  
}

.grid-landing {
  display: grid;
  grid-template-columns: 
    minmax(var(--gap-xl), 1fr) 
    [col1-start col2-start] 
    minmax(0, var(--max-width)) 
    [col1-end col2-end] 
    minmax(var(--gap-xl), 1fr);
}

.grid-text {
  display: grid;
  grid-template-columns: 
    minmax(var(--gap-xl), 1fr) 
    [col1-start col2-start] 
    minmax(0, var(--max-width)) 
    [col1-end col2-end] 
    minmax(var(--gap-xl), 1fr);
  font-size: var(--size-md);
}

.grid-col2-text {
  display: grid;
  grid-template-columns: 
    minmax(var(--gap-xl), 1fr) 
    [col1-start] 
    minmax(0, calc((var(--max-width) - var(--gap-xl)) / 2)) 
    [col1-end] 
    var(--gap-xl) 
    [col2-start] 
    minmax(0, calc((var(--max-width) - var(--gap-xl)) / 2)) 
    [col2-end] 
    minmax(var(--gap-xl), 1fr);
  font-size: var(--size-md);
}

.col1 {
    grid-column: col1-start / col1-end;
}
.col2 {
  grid-column: col2-start / col2-end;
}
.col3 {
  grid-column: col3-start / col3-end;
}
.col4 {
  grid-column: col4-start / col4-end;
}
.col12 {
    grid-column: col1-start / col2-end;
}

.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.light-bg {
  background-color: var(--color-light-bg);
}

.bovag {
  float: right;
  padding-left: var(--size-sm);
  padding-bottom: var(--size-sm);
}
.camper {
  float: right;
  padding-left: var(--size-sm);
  padding-bottom: var(--size-sm);
  height: auto;
  max-width: 100%; 
}
.qrcode {
  display: inline-block;
  height: auto;
  width: 200px;
  max-width: 100%; 
}

header {
  position: sticky;
  top: 0;
  background-color: var(--color-white);
  z-index: 10000;
  border-bottom: solid 1px var(--color-border);

  height: var(--gap-3xl);
  display: grid;
  grid-template-columns: 
    var(--gap-xl) 
    [logo-start] 
    auto  
    [logo-end] 
    var(--gap-xl) 
    [nav-start]
    1fr 
    [nav-end] 
    var(--gap-xl)
    [menu-start] 
    auto  
    [menu-end] 
    var(--gap-xl);
  align-items: center;
}

header .logo-link {
  grid-column: logo-start / logo-end;
  height: calc(var(--gap-3xl) - var(--gap-sm));
}

header img {
  width: auto;
  height: 100%;
}

nav {
  display: flex;
  grid-column: nav-start / nav-end;
  justify-content: center;
}

nav > * {
  margin: 0 var(--gap-md);
  font-size: var(--size-md);
}


section {
  width: 100%;
  margin-bottom: var(--gap-xl);
}

hr {
  margin-top: calc(2* var(--gap-xl));
  margin-bottom: calc(2 * var(--gap-xl));
  border: none;
  height: 1px;
  background: var(--color-border);
}


/* HERO */
section.hero {
  height: 60vh;

  --lc-left: 0px;
  --lc-top: 0px;
  --lc-width: 100%;
  --lc-height: 360px;
}
.hero picture {
  grid-column: 1/-1;
  grid-row: 1/1;
}
.hero img {
  height: 60vh;
}


.hero .col1 {
  grid-row: 1/1;
  color: var(--color-white);

  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  text-align: center;
  align-self: center;
}

section.rent {
  width: 100%;
  font-size: var(--size-lg);
}

.branch {
  grid-column: 1 / -1;
}


/* Vehicle */
.vehicle {
  font-size: var(--size-base);
  border: solid 1px var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05);
  padding: var(--gap-sm);
  color: var(--color-text);
  background-color: var(--color-white);
  max-width: 300px;
}

.vehicle:hover {
  border: solid 1px var(--color-primary-hover);
  color: var(--color-text);
}

.vehicle > picture img {
  border-radius: var(--radius-md);
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.vehicle .name {
  font-size: var(--size-base);
  font-weight: 600;
  font-family: var(--font-heading);
  color: var(--color-title);

  min-height: calc(1.4em * 2); /* reserve space for 2 lines */

}

.vehicle .name .transmission {
  color: var(--color-text-secondary);
  font-weight: 400;
  font-family: var(--font-body);
  font-size: var(--size-sm);
}


.vehicle .details {
  display: flex;
  align-items: end;
  color: var(--color-text-secondary);
  font-size: var(--size-sm);
}

.vehicle .details .price {
  color: var(--color-title);
  font-family: var(--font-body);
  font-size: var(--size-lg);
  font-weight: 600;
}

.vehicle .details .owner {
  color: var(--color-title);
  font-family: var(--font-title);
  font-size: var(--size-sm);
  font-weight: 500;
  flex: 1;
  line-height: var(--size-lg);

}
.vehicle .details picture {
  flex: 1;
}
.vehicle .details img {
  width: auto;
  height: var(--size-lg);
}
.vehicle .location {
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--size-sm);
}

#rent {
  display: grid;
  grid-template-columns: 
    minmax(var(--gap-xl), 1fr)                               /* gap */
    [map-start]
    var(--gap-sm)                                            /* gap inside map */
    [map-content-start]
    minmax(0, calc((var(--max-width) - var(--gap-xl) ) / 2 - var(--gap-sm)))  
    [map-content-end]
    var(--gap-sm)                                            /* end gap inside map */
    [map-end]
    var(--gap-xl)                                            /* gap */
    [vehicles-start]
    minmax(0, calc((var(--max-width) - var(--gap-xl)) / 2))  /* col2 */
    [vehicles-end]
    minmax(var(--gap-xl), 1fr);                              /* gap */

  grid-template-rows: 
    [start map-content-start]
    auto
    [map-search-end]
    var(--gap-md)
    [vehicles-start]
    1fr
    [vehicles-end] 
    var(--gap-md)
    [paging-start]
    var(--btn-size)
    [end];

  row-gap: 0px;

  min-height: calc(100vh - var(--gap-3xl) - var(--gap-xl) * 2);
  /* max-height: calc(100vh - var(--gap-3xl) - var(--gap-xl) * 2); */

}
#map {
  grid-column: map-start / map-end;
  grid-row: start / end;

  border-radius: var(--radius-xl);
  border: solid 1px var(--color-orange);
}

#filter {
  grid-column: vehicles-start / vehicles-end;
  grid-row: map-content-start / map-search-end;
  z-index: 9000;

  text-align: right;
}

#vehicles {
  grid-column: vehicles-start / vehicles-end;
  grid-row: vehicles-start / vehicles-end;

  display: grid;
  grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end];
  align-content: start;
  gap: var(--gap-lg);
}

.paging {
  grid-column: vehicles-start / vehicles-end;
  grid-row: paging-start / end;

  display: grid;
  grid-template-columns: 1fr repeat(3, var(--btn-size)) 1fr;
  grid-template-areas: "padleft prev current next padright";
  gap: var(--gap-sm);
}
page-button.prev {
  grid-area: prev;
}
page-button.current {
  grid-area: current;
}
page-button.next {
  grid-area: next;
}


/* 4 step grids */ 
.step4 {
  padding: var(--gap-xl) 0;
}

/* USP */

.usp {
  border-radius: var(--radius-lg);
  border: solid 1px var(--color-border);
  background: var(--color-white);

  /* margin: var(--gap-xl) 0; */
  padding: var(--gap-base);

  font-size: var(--size-sm);
  color: var(--color-text-secondary);

  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05);
}

.usp span {
  font-size: var(--size-base);
  font-weight: 600;
  font-family: var(--font-heading);
  color: var(--color-title);
}

/* SEO */ 
.seo > div {
    display: flex;
    flex-direction: column;
    align-items: center;

}
/*
.seo > div > * {
    max-width: var(--max-width-text);
}
*/


page-button {
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: var(--btn-radius);
  border: solid 1px;
  border-color: var(--color-border); 
  cursor: pointer;
  font-size: var(--size-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  user-select: none;
}

page-button.current  {
  border-color: var(--color-primary-dark);
}

footer {
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: var(--gap-2xl) 0;
}

footer div {
  padding-bottom: var(--gap-sm);
}

burger-menu-button {
  visibility: hidden;
  grid-column: menu-start / menu-end;
}


/* ---------- LOCATION SEARCH ---------- */
location-search {
  display: inline-block;
  height: var(--btn-size);
  font-size: var(--size-base);
  position: relative;
  width: 100%;
  margin-bottom: var(--size-sm);
}

location-search * {
  font-size: inherit;
}

.loc-search-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}

location-search  input {
  height: 100%;
  width: 100%;
  padding: 0 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--btn-radius);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05);


  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

location-search input:focus {
  border-color: var(--color-primary-dark);
}

/* Clear button */
.loc-search-clear {
  position: absolute;
  right: 0.5em;
  border: none;
  cursor: pointer;
  background: none;
  color: var(--color-text-secondary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  font-size: var(--size-lg);
}

.loc-search-clear.visible {
  opacity: 1;
  pointer-events: auto;
}

.loc-search-clear:hover {
  color: var(--color-text);
}

/* City dropdown */
.city-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); */
  max-height: 260px;
  overflow-y: auto;
  z-index: 9999;
  display: none;
}

.city-dropdown.open {
  display: block;
  animation: fade-in 120ms ease-out;
}

.city-dropdown-title {
  padding: 0.6rem 0.75rem;
  font-family: var(--font-title);
  font-weight: 500;
  text-align: left;
  width: 100%;

}
.city-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  font-size: var(--size-sm);
  transition: background 0.1s ease;
}

.city-dropdown-item:hover,
.city-dropdown-item:focus {
  background: var(--color-light-bg);
  outline: none;
}

.city-dropdown-item:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.city-dropdown-item:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.city-dropdown-item:only-child {
  border-radius: var(--radius-md);
}

.city-name {
  font-weight: 600;
  color: var(--color-title);
}

.city-meta {
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  white-space: nowrap;
  margin-left: var(--gap-sm);
}

.marker-selected {
  filter: brightness(70%) contrast(120%);
}

.leaflet-marker-icon:hover,
.leaflet-marker-icon.marker-active {
  filter: brightness(120%) drop-shadow(0 0 4px rgba(151, 197, 31, 0.8));
  cursor: pointer;
}

.map-tooltip {
  line-height: 1.3;
}
.map-tooltip img {
  height: var(--size-sm);
  width: auto;
  vertical-align: bottom;
}
.map-tooltip div:nth-child(1) {
  color: var(--color-text);
  font-family: var(--font-title);
  font-size: var(--size-xs);
}

.map-tooltip div:nth-child(3), 
.map-tooltip div:nth-child(2) {
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  font-size: var(--size-xs);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  :root {
    /* --gap-xl:              1.875rem;      /* 30px */
    --gap-lg:              1.4rem;      /* 30px */
    --gap-xl:              1.4rem;      /* 30px */
    --gap-2xl:            1.4rem;        /* 40px */
    --gap-3xl:             4rem;       /* 60px */

  }
  html {
    font-size: 15px;
  }

  #rent {
    grid-template-columns: 
      var(--gap-xl)                               /* gap */
      [map-start]
      var(--gap-sm)                               /* gap inside map */
      [map-content-start]
      calc(var(--gap-sm) + var(--btn-size))
      [vehicle-start]
      1fr
      [vehicle-end]
      calc(var(--gap-sm) + var(--btn-size))
      [map-content-end]
      var(--gap-sm)                               /* end gap inside map */
      [map-end]
      var(--gap-xl);                              /* gap */

    grid-template-rows: 
      [start]
      var(--gap-sm)
      [map-content-start]
      auto
      [map-search-end]
      1fr
      [vehicles-start paging-start] 
      auto 
      [map-content-end vehicles-end paging-end] 
      var(--gap-sm)
      [end];


  }

  #vehicles {
    grid-column: vehicle-start / vehicle-end;
    grid-row: vehicles-start / vehicles-end;
    z-index: 9001;

    justify-items: center;
    grid-template-columns: [col1-start col2-start] 1fr [col1-end col2-end];
  }
  .vehicle {
    /* why padding go outside of container size? */
    width: calc(100% - 2 * var(--gap-sm));
  }

   #filter {
    grid-column: map-content-start / map-content-end;
   }

  .paging {
    grid-column: map-content-start / map-content-end;
    grid-row: paging-start / paging-end;
    z-index: 9000;

    display: grid;
    grid-template-columns: var(--btn-size) 1fr var(--btn-size);
    grid-template-rows: 1fr var(--btn-size) 1fr;
    grid-template-areas: ". . ." "prev current next" ". . ."
      ;
    gap: var(--gap-sm);
  }

  page-button.current {
    display: none;
  }
  location-search {
    width: 100%;
    font-size: var(--size-md);
  }


  .col1 {
      grid-column: col1-start / col2-end;
  }
  .col2 {
    grid-column: col1-start / col2-end;
  }
  .grid-col4 .col1, .col3 {
    grid-column: col1-start / col2-end;
    }
  .grid-col4 .col2, .col4 {
    grid-column: col3-start / col4-end;
    }

  /* Menu */
  nav {
    display: none;
  }

  burger-menu-button {
    visibility: visible;
    width: var(--size-xl);
    height: var(--size-xl);
    border: 0;
    padding: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
  }

  burger-menu-button  span {
    display: block;
    height: 0.25rem;
    width: var(--size-xl);
    background: #000;
    transition: 0.25s ease;
    transform-origin: center;
  }

  burger-menu-button.open span:nth-child(1) {
    transform: translateY(0.68rem) rotate(45deg);
  }

  burger-menu-button.open span:nth-child(2) {
    opacity: 0.0;
    transform: translateZ(0);
  }

  burger-menu-button.open span:nth-child(3) {
    transform: translateY(-0.68rem) rotate(-45deg);
  }

  [popover]:popover-open { 
    margin-top: var(--gap-3xl);
    padding: var(--gap-3xl);
    gap: var(--gap-2xl);
    width: 100%;
    height: 100%;
    border: none;
    display: flex;
    flex-direction: column;
    animation: fade-in 120ms ease-out; 
  }

  [popover]::backdrop  { 
    background: none; 
  }

  .vehicle .name {
    font-size: var(--size-sm);

  }
}

/* ---------- VERHUUR PAGE ---------- */


.text-md {
  font-size: var(--size-md);
}

.text-center {
  text-align: center;
}

.checklist {
  list-style: none;
  padding: 0;
}

.checklist li {
  padding: var(--gap-sm) 0;
}

.btn-primary {
  display: inline-block;
  padding: var(--gap-base) var(--gap-xl);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--size-md);
}

/* @media (max-width: 767px) and (aspect-ratio: 3/4) { */
/*   /* mobile with this ratio */ */
/* } */