/* Shared responsive utilities for the site
   - Mobile-first breakpoints
   - Fluid typography helpers
   - Responsive .container sizing
   - Utility classes for common patterns
 */

:root {
  /* Breakpoint tokens (mobile-first) */
  --bp-sm: 520px;
  /* phones */
  --bp-md: 768px;
  /* small tablets */
  --bp-lg: 980px;
  /* tablets / small laptops */
  --bp-xl: 1200px;
  /* large screens */

  /* Fluid type scale example */
  --type-base: 16px;
}

/* Responsive container: centers content and adjusts padding */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1100px;
}

@media (min-width: var(--bp-lg)) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Fluid heading helper using clamp */
.fluid-h1 {
  font-size: clamp(1.6rem, 2.6vw + 1rem, 3rem);
}

.fluid-h2 {
  font-size: clamp(1.25rem, 2.2vw + 0.8rem, 2rem);
}

/* Utility spacing helpers (small, medium, large) */
.u-gap-sm {
  gap: 8px;
}

.u-gap-md {
  gap: 16px;
}

.u-gap-lg {
  gap: 24px;
}

/* Responsive image helper */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Simple grid helpers */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media(min-width:var(--bp-md)) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

@media(min-width:var(--bp-lg)) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Make forms and inputs more fluid on small screens */
form input,
form select,
form textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* Accessibility: larger touch targets on small devices */
@media (max-width: 520px) {

  .btn,
  button,
  input[type=submit],
  a.btn {
    padding: 12px 14px;
  }
}

/* Helpers to stack action rows on mobile */
.actions-row {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}

@media(max-width:700px) {
  .actions-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Site-wide header/footer harmonization: ensure consistent vertical padding and side gutters */
.site-header .nav {
  padding: 14px 0;
}

.site-header .nav.container,
.site-header .nav>.container {
  padding-left: 20px;
  padding-right: 20px;
}

.footer-grid {
  padding-left: 20px;
  padding-right: 20px;
}

/* Mobile menu: hide by default on small screens and show when `.mobile-open` is present */
@media (max-width: 700px) {
  .nav-links { display: none; }
  .nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 16px;
    top: 64px;
    background: #fff;
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(11,116,222,0.12);
    z-index: 1000;
  }
}

/* Result card responsive layout */
.result-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid rgba(15,20,36,0.04);
  border-radius: 12px;
  background: var(--card);
  gap: 12px;
}

@media (max-width: 700px) {
  .result-card {
    flex-direction: column;
    align-items: stretch;
  }
  .result-card .result-price {
    margin-top: 8px;
    align-self: flex-end;
  }
}

/* Booking page grid and summary styles */
.booking-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}
.booking-form { background: #fff; padding: 18px; border-radius: 12px; box-shadow: var(--shadow); }
.booking-summary { background: #fff; padding: 18px; border-radius: 12px; box-shadow: var(--shadow); }
.booking-summary .price { margin-top: 10px; font-size: 1.15rem; color: var(--accent); }
/* make cards use global variables */
.booking-form, .booking-summary { background: var(--card); }

@media (max-width:700px) {
  .booking-grid { grid-template-columns: 1fr; }
  .booking-summary { order: -1; }
}

/* Utility to visually hide text but keep it accessible */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* End */