/* ------------------------------------------------------------------
   site-extra.css

   Everything added on top of the original styles.css: the vacation
   notice, the compact hero used by the thank-you page, the opening
   times table, the damage-site accents and a few small utilities.

   styles.css is left untouched so the original design stays intact.
   ------------------------------------------------------------------ */

/* --- Compact hero (thank-you page) ------------------------------- */

.hero-container.hero-compact {
  min-height: 90vh;
}

.hero-container.hero-compact .hero-content {
  padding-top: 12rem;
  padding-bottom: 4rem;
  max-width: 44rem;
}

.hero-container.hero-compact .hero-content h1 {
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .hero-container.hero-compact {
    min-height: 90vh;
  }
  .hero-container.hero-compact .hero-content {
    padding-top: 9rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* --- Vacation notice (contact and quote pages) -------------------- */

.vacation-notice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background-color: var(--color-secondary-light);
  border-left: 5px solid var(--color-primary-hover);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem;
}

.vacation-notice.upcoming {
  border-left-color: var(--color-primary);
}

.vacation-notice-icon {
  color: var(--color-primary-hover);
  flex-shrink: 0;
  line-height: 0;
  padding-top: 0.15rem;
}

.vacation-notice-body h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  color: var(--color-secondary);
}

.vacation-notice-body p {
  margin: 0 0 0.4rem;
  line-height: 1.55;
}

.vacation-notice-body p:last-child {
  margin-bottom: 0;
}

.vacation-notice .vacation-back {
  font-size: 1.02rem;
}

/* --- Opening times ------------------------------------------------ */

.opening-times {
  border-collapse: collapse;
  width: 100%;
  max-width: 22rem;
  font-size: 0.95rem;
}

.opening-times th,
.opening-times td {
  text-align: left;
  padding: 0.28rem 0;
  font-weight: 400;
  vertical-align: top;
}

.opening-times th {
  width: 8.5rem;
  color: var(--color-text);
}

.opening-times tr.today th,
.opening-times tr.today td {
  font-weight: 600;
}

.opening-note {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.opening-note-vacation {
  color: #a04000;
  font-weight: 600;
}

/* --- Project detail ----------------------------------------------- */

.breadcrumb {
  margin-bottom: 1rem;
  font-size: 0.92rem;
}

.breadcrumb a {
  color: var(--color-text);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.project-title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.project-facts {
  line-height: 1.9;
}

.project-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.empty-note {
  padding: 2rem 0;
  color: #666;
}

/* --- Footer additions --------------------------------------------- */

.footer-note {
  color: var(--color-footer-cta);
  font-size: 0.88rem;
  line-height: 1.55;
  margin-top: 1rem;
  opacity: 0.85;
}

.footer-hours {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  padding: 0.15rem 0;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom p {
  color: var(--color-footer-cta);
  font-size: 0.85rem;
  opacity: 0.8;
  margin: 0;
}

.footer-bottom a {
  color: var(--color-footer-cta);
}

.topnav-message {
  font-weight: 600;
}

/* --- Damage site accents ------------------------------------------ */

.schade-page .werkzaamheid-card {
  text-align: left;
}

.schade-usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.schade-usp {
  background-color: var(--color-white);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px var(--color-shadow);
}

.schade-usp h3 {
  font-size: 1.05rem;
  margin: 0.75rem 0 0.4rem;
}

.schade-usp p {
  font-size: 0.93rem;
  line-height: 1.6;
  margin: 0;
}

.schade-usp .schade-usp-icon {
  color: var(--color-primary-hover);
  line-height: 0;
}

@media (max-width: 768px) {
  .vacation-notice {
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.15rem;
  }
  .footer-bottom {
    justify-content: flex-start;
  }
}

/* --- Vacation band under the hero --------------------------------- */

.vacation-band {
  background-color: var(--color-white);
  padding: 2.5rem 1.5rem 0;
}

.vacation-band .container {
  max-width: 1200px;
  margin: 0 auto;
}

.vacation-band .vacation-notice {
  margin: 0;
}

.form-hint {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #555;
  margin-bottom: 1.25rem;
}

/* --- Werkwijze: the line that grows while you scroll ---------------
   script.js sets --line-scale between 0 and 1. styles.css already
   defines the line itself; this only makes its height follow that
   variable, so the script never has to edit the stylesheet at runtime. */

.process-steps::before {
  transform: scaleY(var(--line-scale, 0));
}

/* --- Legal pages (privacy statement) ------------------------------ */

.legal-text {
  max-width: 46rem;
}

.legal-text h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.legal-text h2 {
  font-size: 1.15rem;
  margin: 2rem 0 0.6rem;
}

.legal-text p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.legal-text .legal-updated {
  margin-top: 2.5rem;
  font-size: 0.9rem;
  color: #666;
}

/* ==================================================================
   Additions, September 2026
   ================================================================== */

/* --- Font: Inter, served from this site instead of Google Fonts ---- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-latin-700-normal.woff2") format("woff2");
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --- Accessibility ------------------------------------------------ */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 2000;
  background: var(--color-secondary);
  color: var(--color-white);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0.75rem;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.project-carousel:focus-visible {
  outline: 3px solid var(--color-primary-hover);
  outline-offset: 3px;
}

/* Buttons that replaced the old clickable <div>s look exactly the same. */
.carousel-dot,
.project-carousel-dot {
  border: 0;
  padding: 0;
  appearance: none;
}

/* --- Jumping to a section (#anchor) stops below the fixed header --- */

/* The fixed contact bar and header together are about 150px tall. */
html {
  scroll-padding-top: 175px;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* --- Werkzaamheden: even spacing between the lines and the photos --
   The section had no padding of its own, so the first photo sat flush
   against the divider line above it, and the gaps around every later
   line were uneven (64px above, 48px below). */

.detailed-services {
  background-color: var(--color-white);
  padding: 4.5rem 1.5rem;
}
.detailed-services .service-detail {
  margin-bottom: 0;
}
.detailed-services .section-divider1 {
  margin: 4rem auto;
}
.service-image img {
  display: block;
}
.service-text h2.service-title {
  font-size: 2rem;
  line-height: 1.2;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}
.service-detail.no-image .service-content {
  grid-template-columns: 1fr;
  max-width: 48rem;
}
.service-cta {
  margin-top: 1.5rem;
}

@media (max-width: 992px) {
  .detailed-services .section-divider1 {
    margin: 3rem auto;
  }
  .service-content {
    gap: 1.75rem;
  }
}
@media (max-width: 576px) {
  .detailed-services {
    padding: 3rem 1rem;
  }
  .detailed-services .section-divider1 {
    margin: 2.5rem auto;
  }
}
@media (max-width: 768px) {
  .service-text h2.service-title {
    text-align: center;
    font-size: 1.6rem;
  }
  .service-cta {
    justify-content: center;
  }
}

/* --- Project cards: the title became an h3 for a correct outline ---- */

.project-text .project-card-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
.project-service-link a {
  color: var(--color-secondary);
  font-weight: 600;
}

/* The projects overview printed each title twice: over the photo (a
   styles.css overlay) and again under it. Keep the one under the photo. */
.projects-page .project-image::after {
  content: none;
  display: none;
}

/* --- Breadcrumbs ---------------------------------------------------- */

.breadcrumbs {
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  padding: 0;
  margin: 0;
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  color: #666;
}
.breadcrumbs li + li::before {
  content: "\203A";
  margin: 0 0.5rem;
  color: #999;
}
.breadcrumbs a {
  color: var(--color-text);
  text-decoration: none;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .breadcrumbs ol {
    justify-content: center;
  }
}

/* --- Scroll-in animations for anything marked .reveal --------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.projects-grid .reveal:nth-child(3n + 2) {
  transition-delay: 0.1s;
}
.projects-grid .reveal:nth-child(3n + 3) {
  transition-delay: 0.2s;
}
/* A hovered card should respond at once, not after its entrance delay. */
.werkzaamheden-grid.visible .werkzaamheid-card:hover {
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .benefits,
  .benefit-item,
  .werkzaamheid-card,
  .process-step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Footer: four columns, headings, legal links ------------------- */

/* styles.css styles every <nav> like the header bar (flex, centred,
   1200px wide). The footer menus and breadcrumbs are <nav>s too, for
   screen readers, but must keep their normal block layout. */
.footer nav.footer-menu,
nav.breadcrumbs {
  display: block;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
nav.footer-legal {
  max-width: none;
  margin: 0;
  justify-content: flex-start;
  align-items: center;
}

.footer-grid {
  grid-template-columns: 1.1fr 1fr 1fr 1.3fr;
  gap: 3rem;
}
.footer-grid.footer-grid-5 {
  grid-template-columns: 1.1fr 1fr 1fr 1.3fr 1.1fr;
  gap: 2.5rem;
}
.footer .footer-heading {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  color: var(--color-white);
  text-align: left;
}
.footer-menu ul li {
  margin-bottom: 0.7rem;
}
.footer-contact a {
  word-break: break-word;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.footer-legal a {
  color: var(--color-footer-cta);
  font-size: 0.85rem;
  opacity: 0.8;
  text-decoration: none;
}
.footer-legal a:hover {
  opacity: 1;
  text-decoration: underline;
}

@media (max-width: 992px) {
  .footer-grid,
  .footer-grid.footer-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* styles.css pushes the footer logo 300px to the left between 481 and
   576px wide, which moved it off the screen. */
@media (max-width: 576px) {
  .footer-logo img {
    margin-left: 0;
  }
  .footer-grid,
  .footer-grid.footer-grid-5 {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .footer .footer-heading {
    text-align: center;
  }
  .footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-contact ul li {
    justify-content: center;
  }
  .footer-bottom,
  nav.footer-legal {
    justify-content: center;
    text-align: center;
  }
}

/* --- 404 ------------------------------------------------------------ */

.not-found .container {
  max-width: 40rem;
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.not-found .not-found-code {
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  margin: 0 auto 0.75rem;
  max-width: none;
}
.not-found h1 {
  margin-bottom: 1rem;
}
.not-found .company-description {
  margin: 0 auto 1.5rem;
}
.not-found .cta-buttons {
  justify-content: center;
}

/* --- Confirmation after a form ------------------------------------- */

.bedankt-tip {
  max-width: 48rem;
  margin: 1rem 0 0;
  padding: 1rem 1.25rem;
  background-color: var(--color-secondary-light);
  border-left: 5px solid var(--color-primary);
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.6;
}