/* ==========================================================================
   Fun-dine Spit Braai & Grill — custom theme
   Built on top of Bootstrap 5. Bootstrap provides layout/components,
   this file provides all Fun-dine branding and custom visuals.

   Table of contents
   -----------------
   1.  Design tokens (CSS variables)
   2.  Base / typography
   3.  Buttons
   4.  Utilities & section helpers
   5.  Navbar / header
   6.  Hero
   7.  Packages
   8.  Booking panel + "How it works"
   9.  Equipment hire
   10. Benefits
   11. Gallery
   12. Testimonials
   13. Info cards (Extras / generic content)
   14. FAQ accordion
   15. Contact page
   16. CTA band
   17. Footer
   18. Modal
   19. Page hero (inner pages)
   20. Responsive tweaks
   ========================================================================== */

/* 0. Self-hosted script font (Yellowtail — SIL OFL 1.1) ==================== */
@font-face {
  font-family: "Yellowtail";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/yellowtail/yellowtail.woff2") format("woff2");
}

/* 1. Design tokens ========================================================= */
:root {
  /* Brand palette — change these to re-skin the whole site */
  --orange: #ff920f;
  --orange-dark: #d96f00;
  --gold: #ffad32;
  --black: #070707;
  --dark: #101010;
  --panel: #151515;
  --panel-2: #1b1b1b;
  --white: #ffffff;
  --muted: #c8c8c8;
  --line: rgba(255, 146, 15, 0.65);
  --line-soft: rgba(255, 146, 15, 0.22);

  /* Layout */
  --max-width: 1180px;
  --header-height: 78px;
  --radius: 9px;

  /* Fonts */
  --font-body: Arial, Helvetica, sans-serif;
  --font-script: "Yellowtail", "Brush Script MT", "Segoe Script", "Pacifico", cursive;

  /* Bootstrap variable overrides (used by Bootstrap components) */
  --bs-body-bg: #090909;
  --bs-body-color: var(--white);
  --bs-body-font-family: var(--font-body);
  --bs-primary: #ff920f;
  --bs-primary-rgb: 255, 146, 15;
  --bs-link-color: var(--orange);
  --bs-link-hover-color: var(--gold);
  --bs-border-color: #333333;
  --bs-emphasis-color: var(--white);
}

/* 2. Base / typography =================================================== */
html {
  scroll-behavior: smooth;
  /* offset anchor targets so they clear the fixed header */
  scroll-padding-top: calc(var(--header-height) + 12px);
}

body {
  font-family: var(--font-body);
  color: var(--white);
  background-color: #090909;
  line-height: 1.55;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

.script {
  font-family: var(--font-script);
}

.text-orange {
  color: var(--orange) !important;
}

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

/* Consistent section rhythm */
.section {
  padding: 72px 0;
}

.section--tight {
  padding: 48px 0;
}

.section-heading {
  text-align: center;
  margin-bottom: 42px;
}

.section-heading--left {
  text-align: left;
}

.section-heading .eyebrow {
  color: var(--orange);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.section-heading h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  text-transform: uppercase;
  line-height: 1.05;
  font-weight: 800;
  margin: 0;
}

.section-heading p {
  color: var(--muted);
  max-width: 650px;
  margin: 12px auto 0;
}

.section-heading--left p {
  margin-left: 0;
  margin-right: 0;
}

/* 3. Buttons ============================================================= */
.btn-fire,
.btn-fire-outline {
  --bs-btn-font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px;
  padding: 13px 21px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn-fire {
  border: 1px solid var(--orange);
  background-color: var(--orange);
  color: #111111;
}

.btn-fire:hover,
.btn-fire:focus-visible {
  transform: translateY(-2px);
  background-color: var(--gold);
  color: #111111;
}

.btn-fire-outline {
  border: 1px solid #aaaaaa;
  background-color: transparent;
  color: var(--white);
}

.btn-fire-outline:hover,
.btn-fire-outline:focus-visible {
  transform: translateY(-2px);
  border-color: var(--orange);
  background-color: rgba(255, 146, 15, 0.08);
  color: var(--white);
}

.btn-fire.w-100,
.btn-fire-outline.w-100 {
  display: flex;
}

/* Visible focus states everywhere */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* 4. Utilities ========================================================== */
.divider-fire {
  border: 0;
  height: 1px;
  background: var(--line);
  opacity: 1;
}

/* 5. Navbar / header =================================================== */
.site-header {
  /* Fully opaque, not e.g. rgba(5,5,5,.95) — deliberately. This is
     position:fixed (.fixed-top, below); on iOS Safari/WebKit, a fixed
     element with ANY alpha transparency scrolling over page content is
     prone to a repaint/compositing bug where the blended layer isn't
     recomposited correctly, leaving a frozen "ghost" of earlier page
     content smeared under later content as you scroll. backdrop-filter
     (removed previously) is the most common trigger for this, but plain
     alpha transparency on a fixed layer can reportedly cause the same
     family of bug on some iOS versions. Fully opaque removes any blending
     Safari would need to do for this layer, which removes the bug outright. */
  background: #050505;
  border-bottom: 1px solid var(--line-soft);
}

.site-header .navbar {
  min-height: var(--header-height);
  padding-top: 0;
  padding-bottom: 0;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 0.8;
  min-width: 155px;
}

.brand__main {
  color: var(--orange);
  font-family: var(--font-script);
  font-size: 2.25rem;
  line-height: 1;
  position: relative;
  display: inline-block;
  padding-right: 0.55em;      /* room for the flame */
}

/* the "lil flame" sitting above the final "e" */
.brand__main::after {
  content: "\f7f6";           /* bootstrap-icons: fire */
  font-family: "bootstrap-icons";
  position: absolute;
  top: -0.42em;
  right: -0.12em;
  font-size: 0.62em;
  line-height: 1;
  color: var(--orange);
  text-shadow: 0 0 10px rgba(255, 146, 15, 0.55);
  transform: rotate(6deg);
  pointer-events: none;
}

.brand__sub {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 2px;
  margin-top: 6px;
  color: var(--white);
}

.site-nav .nav-link {
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white);
  position: relative;
  padding: 0.5rem 0;
}

.site-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link:focus-visible::after,
.site-nav .nav-link.active::after {
  transform: scaleX(1);
}

.site-nav .nav-link.active {
  color: var(--orange);
}

.navbar-toggler {
  border-color: var(--line-soft);
  color: var(--white);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 146, 15, 0.35);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ff920f' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.header-whatsapp {
  font-weight: 700;
  white-space: nowrap;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.header-whatsapp:hover {
  color: var(--orange);
}

/* 6. Hero ============================================================== */
.hero {
  min-height: 760px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.68) 37%, rgba(0, 0, 0, 0.18) 78%, rgba(0, 0, 0, 0.65) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), #090909 98%),
    url("../images/hero/hero-spit-braai.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 65% 45%, rgba(255, 120, 0, 0.22), transparent 35%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: min(650px, 100%);
  padding: 75px 0;
}

.hero__script {
  font-family: var(--font-script);
  font-size: 2.6rem;
  color: var(--white);
}

.hero h1 {
  font-size: clamp(3.3rem, 7vw, 6.3rem);
  line-height: 0.86;
  text-transform: uppercase;
  margin: 10px 0 20px;
  font-weight: 900;
  letter-spacing: -2px;
}

.hero h1 span {
  color: var(--orange);
}

.hero__lead {
  font-size: 1.15rem;
  color: #eeeeee;
  max-width: 570px;
  margin-bottom: 27px;
}

.hero__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.price-badge {
  position: absolute;
  right: 8%;
  bottom: 16%;
  z-index: 2;
  width: 145px;
  height: 145px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.45);
}

.price-badge small {
  font-size: 0.72rem;
  font-weight: 800;
  display: block;
}

.price-badge strong {
  display: block;
  color: var(--orange);
  font-size: 1.55rem;
}

/* 7. Packages ========================================================= */
.package-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(#181818, #0d0d0d);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.package-card__img {
  height: 160px;
  width: 100%;
  object-fit: cover;
  display: block;
}

.package-card__body {
  padding: 20px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.package-card h3,
.package-card__title {
  text-align: center;
  font-size: 1.05rem;
  text-transform: uppercase;
  margin: 0;
  font-weight: 700;
}

.package-card h3 span,
.package-card__title span {
  color: var(--orange);
}

.package-card__list {
  list-style: none;
  margin: 16px 0 22px;
  padding: 0;
  color: #eeeeee;
  font-size: 0.9rem;
}

.package-card__list li {
  margin: 7px 0;
  padding-left: 22px;
  position: relative;
}

.package-card__list li::before {
  content: "\2713"; /* check mark */
  color: var(--orange);
  font-weight: bold;
  position: absolute;
  left: 0;
}

.package-card__note {
  color: #eeeeee;
  font-size: 0.9rem;
  margin: 16px 0 22px;
}

.package-card__price {
  margin-top: auto;
  color: var(--orange);
  font-size: 1.15rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

/* 8. Booking panel =================================================== */
.booking-panel {
  background: linear-gradient(145deg, #1b1b1b, #0e0e0e);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
}

.booking-panel h3 {
  font-size: 1.55rem;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.booking-panel__intro {
  color: #bbbbbb;
  font-size: 0.88rem;
  margin-bottom: 17px;
}

.booking-panel .form-control,
.booking-panel .form-select,
.contact-form .form-control,
.contact-form .form-select {
  background-color: #f6f6f6;
  color: #222222;
  border: 0;
  border-radius: 6px;
  padding: 13px;
}

.booking-panel .form-control::placeholder,
.contact-form .form-control::placeholder {
  color: #6b6b6b;
}

.booking-panel .form-control:focus,
.booking-panel .form-select:focus,
.contact-form .form-control:focus,
.contact-form .form-select:focus {
  background-color: #ffffff;
  color: #222222;
  box-shadow: 0 0 0 0.25rem rgba(255, 146, 15, 0.35);
}

.booking-panel .invalid-feedback,
.contact-form .invalid-feedback {
  color: #ffb15a;
  font-weight: 700;
}

.how-it-works {
  margin-top: 24px;
  border-top: 1px solid rgba(255, 146, 15, 0.35);
  padding-top: 18px;
}

.how-it-works h4 {
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 12px;
  font-size: 1.05rem;
}

.how-it-works__step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  margin: 9px 0;
}

.how-it-works__step .num {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--orange);
  color: #111111;
  display: grid;
  place-items: center;
  font-weight: 900;
}

/* 9. Equipment hire ================================================= */
.equipment-hire {
  margin-top: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: #111111;
}

.equipment-hire h3 {
  font-size: 1rem;
  color: var(--orange);
  margin: 0;
}

.equipment-hire p {
  font-size: 0.82rem;
  color: #dddddd;
  margin: 4px 0 0;
}

/* 10. Benefits ===================================================== */
.benefits {
  background: #171717;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
}

.benefit {
  text-align: center;
  padding: 25px;
  border-right: 1px solid #555555;
  height: 100%;
}

.benefit:last-child {
  border-right: 0;
}

.benefit__icon {
  font-size: 2.2rem;
  color: var(--orange);
  margin-bottom: 9px;
  line-height: 1;
}

.benefit h3 {
  text-transform: uppercase;
  font-size: 0.95rem;
}

.benefit p {
  color: #cccccc;
  font-size: 0.85rem;
  margin-top: 5px;
}

/* 11. Gallery ===================================================== */
.gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.gallery-grid a {
  display: block;
  overflow: hidden;
  border-radius: 6px;
}

.gallery-grid a:hover img,
.gallery-grid a:focus-visible img {
  transform: scale(1.05);
  border-color: var(--gold);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* 12. Testimonials ============================================== */
.testimonial {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  background: #111111;
  text-align: center;
}

.testimonial__quote {
  font-size: 3.5rem;
  line-height: 0.5;
  color: var(--orange);
  font-family: Georgia, "Times New Roman", serif;
}

.testimonial p {
  font-size: 1rem;
  color: #dddddd;
  margin: 20px 0;
}

.testimonial__stars {
  color: var(--orange);
  letter-spacing: 4px;
}

.testimonial__author {
  font-weight: 700;
  margin-top: 7px;
}

/* 13. Info cards ================================================ */
.info-card {
  border: 1px solid #333333;
  border-radius: 10px;
  padding: 25px;
  background: #111111;
  height: 100%;
}

.info-card h3 {
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.info-card p,
.info-card li {
  color: #cccccc;
  font-size: 0.92rem;
}

.info-card ul {
  padding-left: 18px;
  margin-bottom: 0;
}

/* 13b. Areas served (local SEO) ================================= */
.areas-served-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 22px 0;
}

.areas-served-list li {
  background: var(--line-soft);
  border: 1px solid var(--line);
  color: var(--white);
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* 14. FAQ accordion (Bootstrap .accordion themed) ============== */
.faq-accordion {
  max-width: 850px;
  margin: 0 auto;
}

.faq-accordion .accordion-item {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #333333;
}

.faq-accordion .accordion-button {
  background-color: transparent;
  color: var(--white);
  font-weight: 800;
  font-size: 1rem;
  padding: 20px 8px;
  box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--orange);
  background-color: transparent;
  box-shadow: none;
}

.faq-accordion .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 146, 15, 0.35);
}

.faq-accordion .accordion-button::after {
  filter: invert(64%) sepia(72%) saturate(1200%) hue-rotate(340deg) brightness(101%) contrast(102%);
}

.faq-accordion .accordion-body {
  color: #bbbbbb;
  padding: 0 8px 20px;
}

/* 15. Contact page ============================================ */
.contact-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, #1b1b1b, #0e0e0e);
  padding: 28px;
  height: 100%;
}

/* .contact-card's height:100% is for the side-by-side "Get In Touch" /
   "Send A Message" columns on contact.php, matching their heights within
   one Bootstrap row. status.php instead stacks two .contact-cards
   vertically in a single column (the status result above the lookup
   form) — height:100% there resolves against a parent whose own height
   is itself derived from these same stacked children (Bootstrap's .row
   is a flex container), a circular case browsers can size inconsistently
   once there's more than one stretched child. That mis-sized the second
   card and dragged the footer up into it. Stacked cards never need to
   match a sibling's height, so this just turns the behaviour off there. */
.contact-card--stacked {
  height: auto;
}

.contact-card h3 {
  text-transform: uppercase;
  font-size: 1.3rem;
  margin-bottom: 16px;
}

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

.contact-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #2a2a2a;
  color: #dddddd;
}

.contact-list li:last-child {
  border-bottom: 0;
}

.contact-list .bi {
  color: var(--orange);
  font-size: 1.2rem;
  flex: 0 0 auto;
  margin-top: 2px;
}

.contact-form label {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* 16. CTA band =============================================== */
.cta-band {
  background: linear-gradient(90deg, #101010, #171717, #101010);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cta-band h2 {
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin: 0;
}

.cta-band p {
  color: var(--orange);
  font-weight: 700;
  margin: 6px 0 0;
}

.cta-band__contact {
  font-size: 1.05rem;
  font-weight: 800;
  white-space: nowrap;
}

/* 17. Footer =============================================== */
.site-footer {
  background: #090909;
  border-top: 1px solid var(--line);
}

.site-footer h3 {
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 14px;
  color: var(--white);
}

.site-footer p,
.site-footer li {
  color: #aaaaaa;
  font-size: 0.86rem;
}

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

.site-footer li {
  margin: 7px 0;
}

.site-footer a:hover {
  color: var(--orange);
}

.footer-brand .brand__main {
  font-size: 2.3rem;
}

.socials {
  display: flex;
  gap: 9px;
  margin-top: 14px;
}

.socials a {
  border: 1px solid #666666;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--white);
}

.socials a:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.footer-legal {
  border-top: 1px solid #333333;
  padding: 15px 0;
  color: #777777;
  font-size: 0.78rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* 18. Modal (Bootstrap .modal themed) ==================== */
.modal-fire .modal-content {
  background: var(--panel);
  border: 1px solid var(--orange);
  border-radius: 12px;
  color: var(--white);
}

.modal-fire .modal-header {
  border-bottom: 1px solid var(--line-soft);
}

.modal-fire .modal-title {
  color: var(--orange);
  text-transform: uppercase;
}

.modal-fire .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-fire .modal-body {
  color: #cccccc;
}

/* 19. Page hero (inner pages) =========================== */
.page-hero {
  padding: calc(var(--header-height) + 60px) 0 60px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.55)),
    url("../images/hero/hero-spit-braai.jpg");
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid var(--line);
}

.page-hero .eyebrow {
  color: var(--orange);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
}

.page-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  text-transform: uppercase;
  font-weight: 900;
  margin: 8px 0 10px;
}

.page-hero p {
  color: #dddddd;
  max-width: 620px;
  margin: 0;
}

.breadcrumb-fire {
  --bs-breadcrumb-divider-color: #777777;
  --bs-breadcrumb-item-active-color: var(--orange);
  margin-top: 14px;
  margin-bottom: 0;
}

.breadcrumb-fire a {
  color: #bbbbbb;
}

.breadcrumb-fire a:hover {
  color: var(--orange);
}

/* 20. Responsive tweaks ================================= */
@media (max-width: 991.98px) {
  .site-nav {
    padding: 12px 0 6px;
  }

  .site-nav .nav-link {
    padding: 10px 0;
  }

  .site-nav .nav-link::after {
    display: none;
  }

  .header-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
    margin-top: 6px;
  }

  .benefit {
    border-right: 0;
    border-bottom: 1px solid #555555;
  }
}

@media (max-width: 767.98px) {
  .hero {
    min-height: 640px;
  }

  .price-badge {
    right: 5%;
    bottom: 7%;
    width: 115px;
    height: 115px;
  }

  .price-badge strong {
    font-size: 1.2rem;
  }

  .cta-band .row {
    text-align: center;
  }

  .cta-band__contact {
    justify-content: center;
  }

  .footer-legal {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  .section {
    padding: 55px 0;
  }

  .hero__content {
    padding: 45px 0;
  }

  .hero h1 {
    font-size: 3.1rem;
  }

  .hero__script {
    font-size: 2rem;
  }

  .hero__lead {
    font-size: 1rem;
  }

  .price-badge {
    display: none;
  }

  .equipment-hire {
    flex-direction: column;
    text-align: center;
  }
}

/* 21. Content links: white until visited / clicked ======================
   Prose / content links read white for calm contrast on the dark theme,
   and switch to the brand orange once they are being clicked or have been
   visited. Navigation (navbar + footer quick links), buttons, breadcrumbs
   and the brand are deliberately excluded and keep their own styling. */
main a:not(.btn):not(.nav-link):not(.navbar-brand):not(.page-hero .breadcrumb a):not(.social):not([class*="btn-fire"]) {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}

main a:not(.btn):not(.nav-link):not(.navbar-brand):not(.page-hero .breadcrumb a):not(.social):not([class*="btn-fire"]):hover,
main a:not(.btn):not(.nav-link):not(.navbar-brand):not(.page-hero .breadcrumb a):not(.social):not([class*="btn-fire"]):focus-visible {
  color: var(--gold);
}

/* "are being clicked" */
main a:not(.btn):not(.nav-link):not(.navbar-brand):not(.social):not([class*="btn-fire"]):active {
  color: var(--orange-dark);
}

/* "were clicked" */
main a:not(.btn):not(.nav-link):not(.navbar-brand):not(.social):not([class*="btn-fire"]):visited {
  color: var(--orange);
}

/* Keep the footer "Quick Links" / contact list out of the rule entirely
   (they are navigation, not content) and preserve their muted styling. */
.footer-nav a {
  color: #aaaaaa;
  text-decoration: none;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--orange);
}

/* 22. Skip link ======================================================= */
.skip-link {
  position: absolute;
  z-index: 200;
  left: 12px;
  top: 12px;
  background: var(--orange);
  color: #111111;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 6px;
}

/* 23. Form flash + inline status ====================================== */
.form-flash {
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.form-flash--success,
.form-status--success {
  color: #b7f5c9;
  background: rgba(35, 134, 54, 0.18);
  border-color: rgba(46, 160, 67, 0.5);
}

.form-flash--error,
.form-status--error {
  color: #ffcf99;
  background: rgba(217, 111, 0, 0.15);
  border-color: rgba(255, 146, 15, 0.5);
}

.form-status {
  border-radius: 8px;
  padding: 12px 14px;
  margin: 4px 0 0;
  font-size: 0.9rem;
  font-weight: 700;
}

/* Bootstrap validation colours tuned for the dark panels */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.25);
}

/* 24. POPIA consent checkbox ============================================ */
.form-check--consent {
  margin-top: 4px;
  font-size: 0.82rem;
  color: #cfcfcf;
}

.form-check--consent .form-check-input {
  background-color: #f6f6f6;
  border: 1px solid #999999;
  margin-top: 0.15rem;
}

.form-check--consent .form-check-input:checked {
  background-color: var(--orange);
  border-color: var(--orange);
}

.form-check--consent .form-check-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 0.2rem rgba(255, 146, 15, 0.35);
}

.form-check--consent a {
  color: var(--gold);
  text-decoration: underline;
}

.form-check--consent .form-check-input.is-invalid ~ .invalid-feedback {
  display: block;
}

/* 25. Booking guidance band (Packages page) =========================== */
.booking-guidance {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: #111111;
  padding: 18px;
}

.booking-guidance__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9rem;
}

.booking-guidance__item .bi {
  color: var(--orange);
  font-size: 1.3rem;
  flex: 0 0 auto;
  line-height: 1.2;
}

/* 26. Full-menu cards (Packages page) ================================= */
.menu-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(#181818, #0d0d0d);
  padding: 22px;
  height: 100%;
}

.menu-card h3 {
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}

.menu-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #e6e6e6;
  font-size: 0.9rem;
}

.menu-card__list li {
  padding: 6px 0 6px 20px;
  position: relative;
  border-bottom: 1px solid #232323;
}

.menu-card__list li:last-child {
  border-bottom: 0;
}

.menu-card__list li::before {
  content: "\2022";
  color: var(--orange);
  position: absolute;
  left: 4px;
  font-weight: 700;
}

/* 27. Testimonial carousel =========================================== */
.testimonial-carousel .carousel-item {
  padding-bottom: 42px;
}

.testimonial-carousel .carousel-indicators {
  margin-bottom: 0;
}

.testimonial-carousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background-color: #555555;
  opacity: 1;
}

.testimonial-carousel .carousel-indicators .active {
  background-color: var(--orange);
}

/* 28. Legal pages =================================================== */
.legal-prose {
  max-width: 820px;
  margin: 0 auto;
  color: #d6d6d6;
}

.legal-prose h2 {
  color: var(--orange);
  text-transform: uppercase;
  font-size: 1.15rem;
  margin: 28px 0 10px;
}

.legal-prose p,
.legal-prose li {
  font-size: 0.95rem;
  line-height: 1.7;
}

.legal-prose ul {
  padding-left: 20px;
  margin-bottom: 14px;
}

.legal-prose a {
  color: var(--gold);
  text-decoration: underline;
}

/* 29. Footer legal row extras ====================================== */
.footer-legal__reg {
  display: block;
  color: #6f6f6f;
  font-size: 0.72rem;
  margin-top: 4px;
}

.footer-legal__links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-legal__links a {
  color: #9a9a9a;
}

.footer-legal__links a:hover,
.footer-legal__links a:focus-visible {
  color: var(--orange);
}

/* 30. Booking status page ============================================= */
.status-pill {
  display: inline-block;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

.status-pill--pending {
  background: #3b2d0e;
  color: var(--gold);
}

.status-pill--confirmed {
  background: #0e3822;
  color: #48d68a;
}

.status-pill--completed {
  background: #252525;
  color: #aaaaaa;
}

.status-pill--cancelled {
  background: #3c1515;
  color: #ff7777;
}

.status-result__message {
  color: #eeeeee;
  font-size: 1rem;
  margin-bottom: 18px;
}

.status-result__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 18px;
}

.status-result__grid > div {
  background: #0c0c0c;
  border-radius: 6px;
  padding: 10px 12px;
}

.status-result__grid dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #888888;
}

.status-result__grid dd {
  margin: 3px 0 0;
  font-size: 0.9rem;
  color: #f2f2f2;
  font-weight: 700;
}

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

/* 31. Date/time fields: picker button + custom dropdown panel =========== */
.date-field {
  position: relative;
}

.date-field input[type="date"],
.date-field input[type="time"],
.date-field__display {
  padding-right: 42px;
  cursor: pointer;
  background-color: #f6f6f6;
}

/* Hide the native indicator on WebKit/Blink so only our styled button shows;
   Firefox has no equivalent hook, so its own small icon stays too — harmless,
   both open the same picker. */
.date-field input[type="date"]::-webkit-calendar-picker-indicator,
.date-field input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

/* Bootstrap draws its own red validation icon as a background-image on
   .is-invalid, positioned at the same right-hand spot as our calendar
   button — the two were overlapping into an illegible mess. We already
   show a clear icon plus the .invalid-feedback text, so drop Bootstrap's. */
.date-field input[type="date"].is-invalid,
.date-field input[type="time"].is-invalid,
.date-field__display.is-invalid {
  background-image: none !important;
}

.date-field__btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #666666;
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.date-field__btn:hover,
.date-field__btn:focus-visible {
  background: rgba(255, 146, 15, 0.14);
  color: var(--orange-dark);
}

/* Custom calendar dropdown — replaces the plain native picker so blocked
   dates can be shown greyed out and simply not clickable. */
@keyframes fd-datepicker-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fd-datepicker {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  /* A fixed, comfortable width — deliberately NOT tied to the field's own
     column, which can be ~150px in the narrow booking sidebar and was
     squeezing all seven columns into it. Only the viewport constrains it. */
  width: 340px;
  max-width: calc(100vw - 30px);
  background: linear-gradient(160deg, #1c1c1c, #131313);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 146, 15, 0.08);
  animation: fd-datepicker-in 0.16s ease;
}

/* Little pointer connecting the panel back to the field, like a real
   dropdown rather than a box that just happens to be underneath. */
.fd-datepicker::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 22px;
  width: 12px;
  height: 12px;
  background: #1c1c1c;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}

.fd-datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.fd-datepicker__month {
  flex: 1 1 auto;
  min-width: 0; /* let it actually shrink/ellipsis inside the flex row */
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fd-datepicker__nav {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #333333;
  background: #0e0e0e;
  color: #bbbbbb;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.fd-datepicker__nav:hover,
.fd-datepicker__nav:focus-visible {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255, 146, 15, 0.1);
}

/* Both grids use minmax(0, 1fr) rather than plain 1fr: plain 1fr keeps an
   "auto" minimum, so a cell can refuse to shrink below its own content and
   push the whole grid wider than the panel — which is exactly what made the
   last two columns spill outside the dropdown's background. */
.fd-datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 8px;
  max-width: 100%;
}

.fd-datepicker__weekdays span {
  min-width: 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--orange);
  text-transform: uppercase;
  overflow: hidden;
}

.fd-datepicker__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  max-width: 100%;
}

.fd-datepicker__day {
  /* Fixed height instead of aspect-ratio:1 — the aspect ratio fed a width
     back into the grid's sizing and forced the overflow. */
  height: 40px;
  min-width: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #e6e6e6;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.fd-datepicker__day:hover:not(:disabled),
.fd-datepicker__day:focus-visible:not(:disabled) {
  background: rgba(255, 146, 15, 0.14);
  border-color: var(--orange);
  color: var(--gold);
  transform: translateY(-1px);
}

.fd-datepicker__day.is-muted {
  color: #4a4a4a;
}

.fd-datepicker__day.is-today {
  border-color: var(--orange-dark);
  color: var(--gold);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 146, 15, 0.25);
}

.fd-datepicker__day.is-selected {
  background: var(--orange);
  border-color: var(--orange);
  color: #111111;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(255, 146, 15, 0.35);
}

.fd-datepicker__day.is-selected:hover {
  transform: none;
  color: #111111;
}

.fd-datepicker__day.is-disabled {
  color: #6b3a3a;
  background: rgba(255, 82, 82, 0.09);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 82, 82, 0.5);
  cursor: not-allowed;
}
.fd-datepicker__day:disabled {
  pointer-events: none;
}

.fd-datepicker__legend {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.7rem;
  color: #999999;
}

.fd-datepicker__legend i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: rgba(255, 82, 82, 0.32);
  border: 1px solid rgba(255, 82, 82, 0.75);
  display: inline-block;
}

@media (max-width: 380px) {
  .fd-datepicker {
    padding: 10px;
  }
  .fd-datepicker__day {
    font-size: 0.72rem;
  }
}

/* Custom time picker — same panel language as the date picker above, but a
   scrollable list of sensible half-hour start times instead of a grid
   (there's no "unavailable" concept for a time of day, just realistic
   options), plus a small custom time input for anything off that list. */
.fd-timepicker {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  width: 230px;
  max-width: calc(100vw - 30px);
  background: linear-gradient(160deg, #1c1c1c, #131313);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 146, 15, 0.08);
  animation: fd-datepicker-in 0.16s ease;
}

.fd-timepicker::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 22px;
  width: 12px;
  height: 12px;
  background: #1c1c1c;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}

.fd-timepicker__head {
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.86rem;
  font-weight: 800;
  color: #ffffff;
}

.fd-timepicker__list {
  display: grid;
  gap: 5px;
  max-height: 230px;
  overflow-y: auto;
  padding-right: 4px;
  margin-right: -4px;
}

.fd-timepicker__list::-webkit-scrollbar {
  width: 6px;
}
.fd-timepicker__list::-webkit-scrollbar-track {
  background: transparent;
}
.fd-timepicker__list::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 3px;
}

.fd-timepicker__slot {
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  color: #e6e6e6;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.fd-timepicker__slot:hover,
.fd-timepicker__slot:focus-visible {
  background: rgba(255, 146, 15, 0.14);
  border-color: var(--orange);
  color: var(--gold);
}

.fd-timepicker__slot.is-selected {
  background: var(--orange);
  border-color: var(--orange);
  color: #111111;
  font-weight: 800;
}

.fd-timepicker__hint {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.68rem;
  line-height: 1.4;
  color: #888888;
}