/* 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: 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 {
  --color-red:           #E9392C;
  --color-red-hover:     #E8382B;
  --color-red-dark:      #9E2121;

  /* Accent — red used for highlighted/emphasis elements in hero, USPs etc. */
  --color-accent:        #ff3333;
  --color-white:         #FFFFFF;
  --color-off-white:     #FFFBFA;
  --color-black:         #000000;
  --color-text:          #373636;
  --color-title:         #2E2E2E;
  --color-text-secondary:#666666;      /* Kept for secondary text usage */
  --color-border:        #CCCCCC;
  --color-border-light:  #E0E0E0;      /* Lighter borders, dividers */


  /* -------- SEMANTIC -------- */
  --color-light-bg:      #fff8f8;      /* Off-white background */
  --color-secondary-bg:  #FFFBF7;      /* Subtle warm off-white for cards/sections that were pure white */

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

  /* -------- 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;          /* 48px */
  --size-3xl:            4rem;          /* 48px */
  --size-4xl:            5rem;       

  /* -------- 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:             5rem;       /* 100px */

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

  /* -------- SHADOWS -------- */
  --shadow-sm:      0 4px 12px rgba(0, 0, 0, 0.05);           /* inputs, subtle elevation */
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.08);           /* cards, hover states */
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.18);           /* overlays / modals */
  --shadow-accent:  0 4px 12px rgba(233, 57, 44, 0.15);       /* red accent / focus */

  /* -------- LAYOUT -------- */
  --btn-size:            3rem;
  --btn-radius:          1.5rem;
  --max-width:           1024px;
  --max-width-text:      60ch;

  --section-gap: var(--gap-3xl);

  --burger-span-height: 0.25rem;
  --burger-width: 1.7rem;
  --burger-height: calc(var(--burger-width) * 0.8);

}

html {
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;


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

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

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

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

h1 {
  letter-spacing: -0.035em;
}

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

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-col3 {
  display: grid;
  grid-template-columns: 
    minmax(var(--gap-xl), 1fr) 
    [col1-start] 
    minmax(0, calc((var(--max-width) - var(--gap-xl) * 2) / 3)) 
    [col1-end] 
    var(--gap-xl) 
    [col2-start] 
    minmax(0, calc((var(--max-width) - var(--gap-xl) * 2) / 3)) 
    [col2-end] 
    var(--gap-xl) 
    [col3-start] 
    minmax(0, calc((var(--max-width) - var(--gap-xl) * 2) / 3)) 
    [col3-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-col4-wide {
  display: grid;
  --col-width: calc((100vw - var(--gap-xl) * 3) / 4);
  grid-template-columns: 
    var(--gap-xl)
    [col1-start] 
    minmax(0, var(--col-width)) 
    [col1-end] 
    var(--gap-xl) 
    [col2-start] 
    minmax(0, var(--col-width)) 
    [col2-end] 
    var(--gap-xl) 
    [col3-start] 
    minmax(0, var(--col-width)) 
    [col3-end] 
    var(--gap-xl) 
    [col4-start] 
    minmax(0, var(--col-width)) 
    [col4-end] 
    var(--gap-xl);
  row-gap: var(--gap-lg);  
}


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

.pad {
  --lc-width: min(100vw, var(--max-width));
  --lc-margin: max(var(--gap-xl), calc( (100vw - var(--lc-width)) / 2));
  margin-left: var(--lc-margin);
  margin-right: var(--lc-margin);
  width: auto;
}

.full-h {
  height: 100lvh;
}

.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: contain;
}
*/

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



header {
  position: sticky;
  top: 0;
  background-color: var(--color-red);
  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 picture, 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%;
}

/* Reusable data tables */
.table-scroll {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: var(--color-white);
}

.data-table--elevated {
  box-shadow: var(--shadow-sm);
}

.data-table :is(th, td) {
  padding: var(--gap-sm) var(--gap-base);
  border-bottom: 1px solid var(--color-border-light);
  text-align: left;
}

.data-table thead th {
  color: var(--color-white);
  background: var(--color-red);
  font-family: var(--font-heading);
}

.data-table tbody th {
  font-weight: 600;
}

.data-table tbody tr:last-child > * {
  border-bottom: 0;
}

hr {
  border: none;
  border-bottom: 1px solid var(--color-border);
  margin: var(--section-gap) 0;
}


footer {
  margin-top: var(--section-gap);
  padding: var(--gap-xl) 0;
  background-color: var(--color-red);
  color: var(--color-white);
}

k-footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-sm);
  min-width: 0;
}

k-footer-column h2 {
  margin: 0 0 var(--gap-sm);
  color: var(--color-white);
  font-size: var(--size-lg);
}

k-footer-column p,
k-footer-column address {
  margin: 0;
  font-style: normal;
}

footer a {
  color: var(--color-white);
  text-decoration: underline;
}

footer a:hover,
footer a:focus-visible {
  color: var(--color-white);
}

.footer-logo-link {
  display: block;
  height: 3.5rem;
}

.footer-logo-link img {
  width: auto;
  height: 100%;
}

k-app-links {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap-sm);
  margin-top: var(--size-xs);
}

k-app-links a {
  min-width: 0;
}

k-app-links img {
  display: block;
  width: auto;
  height: 2.25rem;
}

k-footer-links,
k-contact-links,
k-footer-location-list {
  display: flex;
  flex-direction: column;
  gap: var(--size-xxs);
}

k-footer-links {
  margin-top: var(--gap-sm);
}

k-footer-location-list img {
  width: auto;
  height: 1.25rem;
  margin-right: var(--size-xxs);
  vertical-align: middle;
}

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

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

.cta, .btn {
  display: inline-block;
  border: 0;
  font-family: var(--font-heading);
  text-align: center;
  background: transparent;
  background-color: var(--color-red);
  color: var(--color-white);
  cursor: pointer;
}

.cta {
  font-size: var(--size-base);
  padding: var(--size-sm) var(--size-xl);
}

.btn {
  font-size: var(--size-base);
  padding: var(--size-xxs) var(--size-xl);
}

.btn-outline {
  background-color: var(--color-white);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-red);
}

/* FAQ */

.faq summary {
  font-size: var(--size-md);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before {
  width: var(--size-lg);
  content: "＋";
  display: inline-block;
}
.faq details p {
  margin-left: var(--size-lg) ;
}

.faq details[open] summary::before {
  content: " — ";
}

.faq details {
  margin-bottom: var(--size-md);
}

/*
.faq details > * + * {
  margin-top: .75rem;
}
*/
burger-menu-button {
  visibility: visible;
  width: var(--burger-width);
  height: var(--burger-height);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

burger-menu-button span {
  display: block;
  height: var(--burger-span-height);
  width: 100%;
  background: var(--color-white);
  transition: 0.25s ease;
  transform-origin: center;
  border-radius: var(--radius-xs);
}

burger-menu-button.open span:nth-child(1) {
  transform: translateY(calc(0.5 * (var(--burger-height) - var(--burger-span-height)) )) 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(calc(-0.5 * (var(--burger-height) - var(--burger-span-height)))) rotate(-45deg);
}

[popover]:popover-open { 
  padding: var(--gap-xl);

  width: 400px;

  height: 100dvh;
  overflow-y: auto;            /* scroll when content > height */

  border: none;
  animation: fade-in 120ms ease-out; 

  inset: var(--gap-3xl) 0 auto auto; 
}

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

#menu k-menu-title {
  font-family: var(--font-heading);
  font-size: var(--size-lg);
  font-weight: 400;
}
#menu k-pickup-points {
  display: flex;
  flex-direction: column;
  font-size: var(--size-md);
  gap: var(--gap-sm);
  margin: var(--gap-sm);
}

#menu k-pickup-points a img {
  height: var(--size-lg);
  width: auto;
  vertical-align: sub;
}

ul {
  padding-inline-start: var(--gap-sm);
}
li {
  list-style: none;
  margin: var(--size-xxs) 0;
}

li::before {
  content: '';
  display: inline-block;
  width: var(--size-base);
  height: var(--size-base);
  margin-right: var(--size-xxs); 
  vertical-align: sub;
}

ul li::before {
  background: url("/img/li_dot.png") no-repeat center / contain;
}

ul.arrow li::before {
  background: url("/img/li_arrow.png") no-repeat center / contain;
}

ul.greater-than li::before {
  background: url("/img/li_greater_than.png") no-repeat center / contain;
}

ul.square li::before {
  background: url("/img/li_square.png") no-repeat center / contain;
}

ul.circle li::before {
  background: url("/img/li_circle.png") no-repeat center / contain;
}

ul.dot li::before {
  background: url("/img/li_dot.png") no-repeat center / contain;
}

.pickup .col2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

k-cookie-consent {
  position: fixed;
  z-index: 11000;
  left: 50%;
  bottom: var(--gap-base);
  width: calc(100% - (2 * var(--gap-base)));
  max-width: var(--max-width);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
  padding: var(--gap-base) var(--gap-lg);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
}

k-cookie-consent[hidden] {
  display: none;
}

k-cookie-consent p {
  max-width: 70ch;
  margin: 0;
}

k-cookie-consent a {
  text-decoration: underline;
}

k-cookie-consent-actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--gap-sm);
}

k-cookie-consent button {
  padding: var(--gap-sm) var(--gap-base);
  border: 1px solid var(--color-red);
  border-radius: 0;
  font: inherit;
  cursor: pointer;
}

k-cookie-consent button[data-consent-choice="rejected"] {
  color: var(--color-red-dark);
  background: var(--color-white);
}

k-cookie-consent button[data-consent-choice="accepted"] {
  color: var(--color-white);
  background: var(--color-red);
}

k-cookie-consent button:focus-visible,
k-cookie-consent a:focus-visible {
  outline: 3px solid var(--color-red-dark);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .data-table {
    table-layout: fixed;
    font-size: var(--size-sm);
  }

  .data-table :is(th, td) {
    padding: var(--gap-sm);
    overflow-wrap: anywhere;
  }

  k-cookie-consent {
    align-items: stretch;
    flex-direction: column;
    gap: var(--gap-base);
  }

  k-cookie-consent-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 420px) {
  k-cookie-consent-actions {
    flex-direction: column-reverse;
  }

  k-cookie-consent button {
    width: 100%;
  }
}

@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:             5rem;       /* 60px */

    --section-gap: 2rem;
  /* -------- 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.25rem;        /* 24px */
  --size-xl:             1.5rem;          /* 32px */
  --size-2xl:            1.8rem;          /* 48px */
  --size-3xl:            2.3rem;          /* 48px */

  }
  html {
    font-size: 15px;
  }

  hr {
    border: none;
  }


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


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

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

  .cta {
    width: 100%;
  }

  .faq summary {
    font-size: var(--size-lg);
  }

  .faq details p {
    margin-left: 0;
  }

  [popover]:popover-open {
    width: 100%;
  }

  ul {
    padding-inline-start: 0;
  }
}