/* Global styles for the Thomas Lancheros website
 *
 * This stylesheet consolidates all of the shared CSS that was previously
 * embedded directly inside each HTML file. It defines variables for the
 * brand colours, resets and base typography, layout helpers such as the
 * container class, navigation styling, hero banner, cards, forms,
 * modals and the footer. Keeping these styles in a single file makes
 * maintenance easier and ensures that all pages render consistently. Any
 * page‑specific tweaks can still live in an inline <style> tag within
 * the individual HTML page, but the bulk of the styling should live
 * here.
 */

:root {
  --brand: #0a2540;
  --accent: #0b5bd3;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  color: #111;
  background: #f7f9fc;
}

/* Remove default underline on links by default. Colours should be set
   contextually in components below. */
a {
  text-decoration: none;
}

/* Content wrapper used throughout the site to align content and
   constrain the maximum width */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* === Navigation === */
nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  background: rgb(0, 85, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
nav .container {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}

/* Brand on the left side of the navigation */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.brand img {
  height: 70px;
  display: block;
}

/* Contact details at the top of the page */
.contact-top {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
}
.contact-top a {
  color: #fff;
  font-weight: 600;
}
.contact-top span {
  color: rgba(255, 255, 255, 0.75);
}

/* Container for the action icons (Child Safety and Will Kit) */
.nav-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Individual logos for the Child Safety Kit and Will Kit. The Child
   Safety Kit logo is square, whereas the Will Kit logo is wider to
   accommodate its aspect ratio. Both have a subtle background and
   padding to improve contrast on the blue nav bar. */
.csk-logo {
  height: 48px;
  width: 48px;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.10);
  padding: 6px;
}

.will-logo {
  height: 48px;
  width: 100px;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.10);
  padding: 6px;
}

/* Mobile adjustments for the navigation. When the viewport is narrow the
   brand, icons and contact info wrap onto separate lines and the font
   sizes are slightly reduced. */
@media (max-width: 720px) {
  nav .container {
    justify-content: center;
    gap: 10px;
  }
  .brand {
    order: 1;
  }
  .nav-icons {
    order: 2;
  }
  .contact-top {
    order: 3;
    width: 100%;
    justify-content: center;
    padding-top: 6px;
    font-size: 14px;
  }
  .brand img {
    height: 44px;
  }
  .csk-logo,
  .will-logo {
    height: 44px;
  }
}

/* === Hero Banner === */
.hero {
  margin-top: 0;        /* ← FIX */
  height: 62vh;
  min-height: 420px;
  position: relative;
  display: grid;
  place-items: center;
  background: #111;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}


/* Background image layer */
.hero:before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('hero-mountain.png') center/cover no-repeat;
  filter: grayscale(60%) contrast(105%) brightness(95%);
  transform: scale(1.02);
  pointer-events: none; /* allow clicks to pass through to links */
}

/* Dark overlay on top of the image to improve contrast */
.hero:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

/* Content container inside the hero */
.hero-inner {
  position: relative;
  text-align: center;
  padding: 0 20px;
  color: #fff;
}

.hero-inner p {
  margin: 8px 0;
  font-weight: 700;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Link list in the hero for switching between kits */
.hero-links {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-links a {
  color: #fff;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-links .dot {
  opacity: 0.8;
}

/* === Sections & Layout === */
.section {
  padding: 48px 0;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background: #fff;
  border: 1px solid #eaeff6;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 20px rgba(16, 24, 40, 0.04);
}

/* Profile block used on the home page */
.profile {
  display: flex;
  gap: 20px;
  align-items: center;
}
.profile img {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  border: 3px solid #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  object-fit: cover;
}
.badge {
  font-size: 12px;
  color: #444;
  background: #eef3fb;
  border: 1px solid #d9e6ff;
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 6px;
  display: inline-block;
}

/* Form layout shared across pages */
form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 520px) {
  form {
    grid-template-columns: 1fr;
  }
}
form label {
  font-size: 12px;
  color: #444;
}
input,
select {
  width: 100%;
  padding: 10px;
  border: 1px solid #d7dfeb;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}
button {
  grid-column: 1/-1;
  background: #2c863a;
  color: #fff;
  border: none;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: 0.2s box-shadow, 0.2s transform;
}
button:hover {
  box-shadow: 0 10px 22px rgba(10, 37, 64, 0.15);
  transform: translateY(-1px);
}
.small {
  font-size: 12px;
  color: #667;
}

/* QR modal used after form submission */
#qrModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#qrModal.show {
  display: flex;
  opacity: 1;
}
.modal-content {
  background: white;
  padding: 30px 20px;
  border-radius: 12px;
  text-align: center;
  max-width: 320px;
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.modal-content button {
  margin-top: 12px;
  padding: 8px 14px;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Footer */
footer {
  padding: 28px 0;
  color: #445;
  font-size: 14px;
}
.links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.small {
  font-size: 9px;
  color: #667;
}