/* =====================================================================
   Tropical Bound inner pages: the home page look carried to every public
   page except home (BragDeal, 2026-10-29; Dan: "Carry the homepage look to
   the inner pages. Don't change any functionality or rearrange things").
   Loaded by frontend/views/navbar.php (search, property, Aloha Deals,
   Reviews, About, Contact, Tropical Links, hubs, Privacy, not found) and by
   frontend/views/header.php on every page except home (weddings, area,
   agreement, service and other legacy pages). Never loaded on the home page.
   Colour, type, borders and shadows only: no layout, order or behaviour.
   Tokens match assets/css/tb-home.css.
   ===================================================================== */

:root {
  --tb-coral: #FF7F50; --tb-coral-deep: #C8491B; --tb-coral-soft: #FFB591; --tb-coral-tint: #FFE4D6;
  --tb-sand: #FBF6F0; --tb-sand-deep: #F3EADF; --tb-sand-line: #E8DCCD;
  --tb-maroon: #701B42; --tb-maroon-deep: #5A1535;
  --tb-navy: #004173; --tb-navy-deep: #002945; --tb-navy-band: #0D476D;
  --tb-ink: #1F1418; --tb-body: #3A2E32; --tb-muted: #6B6355;
  --tb-gold: #F2AF0D; --tb-sky: #A9DCF5;
  --radius-card: 20px;
  --shadow-card: 0 10px 30px rgba(0, 20, 40, 0.10);
  --shadow-lift: 0 18px 44px rgba(0, 20, 40, 0.18);
}

/* ---------- Page ---------- */
html body { background-color: var(--tb-sand); color: var(--tb-body); }
body :focus-visible { outline: 3px solid var(--tb-coral); outline-offset: 3px; }
.site-search-segment-text :focus-visible { outline: none; }

/* ---------- Header band (navbar.php pages have no photo behind the nav) ---------- */
.tb-inner-band {
  background: linear-gradient(180deg, var(--tb-navy-deep) 0%, var(--tb-navy-band) 100%) !important;
}
.navbar-nav .nav-link { font-weight: 600; border-bottom: 2px solid transparent; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { border-bottom-color: var(--tb-coral); }

/* ---------- Headings: home type scale, ink with maroon accents ---------- */
.page-headings,
.privacy-main-heading {
  color: var(--tb-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
.page-headings { font-size: 44px; line-height: 1.1; }
@media (max-width: 767px) { .page-headings { font-size: 32px; } }

/* ---------- Cards: white, rounded, soft shadow, sand hairline ---------- */
.about-box, .about-box-two, .getaways, .give-review-box, .review-box, .reviews,
.contact-box, .hub-box, .hub-card, .testimonial-stat-bar, .tbl-border {
  border: 1px solid var(--tb-sand-line);
  box-shadow: var(--shadow-card);
}
.getaways p { color: var(--tb-navy); font-weight: 800; letter-spacing: -0.02em; }
.getaways h6 { color: var(--tb-maroon); font-weight: 800; }
.getaways span { color: var(--tb-muted); }

/* ---------- Buttons: maroon pills, home hover ---------- */
.btn-pansypurple, .btn-search, .btn-reviews, .search-button, .common-btn:not(.bd-btn-coral) {
  background: var(--tb-maroon);
  color: #fff;
  border-radius: 100px;
  font-weight: 700;
}
.btn-pansypurple:hover, .btn-pansypurple:focus,
.btn-search:hover, .btn-search:focus,
.btn-reviews:hover, .btn-reviews:focus,
.search-button:hover, .search-button:focus,
.common-btn:not(.bd-btn-coral):hover, .common-btn:not(.bd-btn-coral):focus {
  background: var(--tb-maroon-deep);
  color: #fff;
  filter: none;
}

/* ---------- Secondary text: AA on white and on sand ---------- */
.light, .old-price.light { color: var(--tb-muted) !important; }

/* ---------- Breadcrumbs and small text that used to sit on steel blue ---------- */
.detail-breadcrumb, .detail-breadcrumb a { color: var(--tb-muted); }
.detail-breadcrumb-current { color: var(--tb-ink); }
.hub-breadcrumb { color: var(--tb-muted); }
.hub-breadcrumb a { color: var(--tb-maroon); }
.hub-breadcrumb a:hover { color: var(--tb-coral-deep); }
.hub-breadcrumb li + li::before { color: var(--tb-muted); }
.license { color: var(--tb-navy); }
.testimonial-hero-sub { color: var(--tb-muted); }
.read-more-btn { color: var(--tb-maroon); }

/* ---------- Property page: section tabs on sand (coral pill stays) ---------- */
.navs .nav .nav-link { color: var(--tb-ink) !important; }
.navs .nav .nav-link:hover { color: var(--tb-coral-deep) !important; }
.navs .nav .nav-link.active { color: var(--tb-ink) !important; }

/* ---------- Tropical Links filter pills ---------- */
.n-pills .n-links { color: var(--tb-body); border-color: var(--tb-coral); }
.n-pills .n-links:hover { color: var(--tb-maroon); background: var(--tb-coral-tint); }
.n-pills .n-links.active, .n-pills .n-links.active:hover { background: var(--tb-maroon); color: #fff; border-color: var(--tb-maroon); }

/* ---------- Forms: home search card fields ---------- */
.form-control, .form-select {
  border: 1.5px solid var(--tb-sand-line);
  border-radius: 12px;
  color: var(--tb-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--tb-coral);
  box-shadow: inset 0 -3px 0 var(--tb-coral);
}
.form-control::placeholder { color: #8A8178; opacity: 1; }

/* ---------- Legacy template pages (body.inner-pages: weddings and vendor
   pages, area "coming soon" pages, COVID, Cars and Eats, rental agreement,
   service request). Teal accents become coral and maroon. ---------- */
body.inner-pages { background: var(--tb-sand); }
body.inner-pages .bg-white-3 { background: var(--tb-sand) !important; }
body.inner-pages .hero-content-block .banner-h1 {
  font-family: "Urbanist", Montserrat, sans-serif; font-weight: 800; color: var(--tb-ink);
  text-transform: none; letter-spacing: -0.02em;
}
body.inner-pages p.banner-p { color: var(--tb-body); }
body.inner-pages .section-title:before { background-color: var(--tb-coral); }
body.inner-pages .section-title h2 {
  font-family: "Urbanist", Montserrat, sans-serif; font-weight: 800; color: var(--tb-ink);
  text-transform: none; letter-spacing: -0.02em;
}
body.inner-pages .section-title h3 { font-family: "Urbanist", Montserrat, sans-serif; font-weight: 700; color: var(--tb-maroon); letter-spacing: 0.08em; }
body.inner-pages .activities { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
body.inner-pages .activities:hover { border-color: var(--tb-coral); }
body.inner-pages .btn-primary {
  background: var(--tb-maroon); border-color: var(--tb-maroon); color: #fff;
  border-radius: 100px; font-weight: 700;
}
body.inner-pages .btn-primary:hover, body.inner-pages .btn-primary:focus, body.inner-pages .btn-primary:active {
  background: var(--tb-maroon-deep); border-color: var(--tb-maroon-deep); color: #fff;
}
body.inner-pages .container p a, body.inner-pages .container li a { color: var(--tb-maroon); }
body.inner-pages .container p a:hover, body.inner-pages .container li a:hover { color: var(--tb-coral-deep); }
body.inner-pages .agent { border: 1px solid var(--tb-sand-line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }

/* ---------- Shared cards on navbar pages (search list, deals, privacy,
   links, property): sand hairline and the home card shadow ---------- */
.card:not(.border-0), .list-item {
  border-color: var(--tb-sand-line);
  box-shadow: var(--shadow-card);
}
.light a, .icon-light { color: var(--tb-muted); }

/* ---------- Batch 2: deal prices and in-copy links ---------- */
.night-rate .new-price { color: var(--tb-ink) !important; font-weight: 800 !important; }
.about-box a, .about-box-two a, .privacy-content a { color: var(--tb-maroon); }
.about-box a:hover, .about-box-two a:hover, .privacy-content a:hover { color: var(--tb-coral-deep); }

/* ---------- Batch 2: legacy vendor cards (teal trim to coral) ---------- */
body.inner-pages .agent-row .agent-content { border-bottom-color: var(--tb-coral); box-shadow: none; }
body.inner-pages .agent-row .agent-details h4 a { color: var(--tb-ink); font-weight: 800; }
body.inner-pages .agent-row .agent-details .icon { color: var(--tb-coral-deep); }
body.inner-pages .agent-row .agent-text p { color: var(--tb-body); }
/* styles.css gives every legacy .d-flex a bright blue bottom rule; same rule, sand colour. */
body.inner-pages .d-flex { border-bottom-color: var(--tb-sand-line); }

/* ---------- QA F-01: header nav on the legacy pages. These pages load the
   old Bootstrap 4-alpha, which has none of the Bootstrap 5 navbar-expand-xl,
   position or spacing classes the shared header uses, so the nav stayed
   collapsed and white-on-sand. Nav-only shim: navy band, same links, logo
   and order; hamburger toggled by the small script in header.php. ---------- */
body.inner-pages .navbar {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  align-self: stretch; width: 100%; margin: 0 !important; padding: 15px 16px 0; min-height: 99px; z-index: 20;
  background: linear-gradient(180deg, var(--tb-navy-deep) 0%, var(--tb-navy-band) 100%);
}
body.inner-pages .navbar-nav { display: flex; margin: 0; padding: 0; list-style: none; }
body.inner-pages .navbar-nav .nav-link {
  display: block; color: #fff; text-decoration: none; padding: 8px 0 6px;
  font-family: "Urbanist", Montserrat, sans-serif; font-weight: 600; font-size: 17px; line-height: 1.2;
  border-bottom: 2px solid transparent;
}
body.inner-pages .navbar-nav .nav-link:hover, body.inner-pages .navbar-nav .nav-link:focus,
body.inner-pages .navbar-nav .nav-link.active { color: #fff; border-bottom-color: var(--tb-coral); }
@media (min-width: 1200px) {
  body.inner-pages .navbar { justify-content: center; padding: 15px 24px 0; }
  body.inner-pages .navbar-toggler, body.inner-pages #navbarText > button, body.inner-pages section > div > a.d-xl-none { display: none !important; }
  body.inner-pages #navbarText { display: flex !important; justify-content: center; align-items: center; width: 100%; }
  body.inner-pages .navbar-nav { flex-direction: row; align-items: center; }
  body.inner-pages .navbar-nav .nav-item { margin: 18px 5px; padding: 0 5px; }
  body.inner-pages .navbar-nav .nav-item-logo { display: block; margin: 0 5px; }
  body.inner-pages .nav-link-special-margin { margin-left: 50px; }
}
@media (max-width: 1199px) {
  body.inner-pages section > div > a.d-xl-none {
    display: block; position: absolute; top: 16px; left: 16px; z-index: 21 !important; line-height: 0;
  }
  body.inner-pages section > div > a.d-xl-none .navbar-logo-img { width: 230px; max-width: calc(100vw - 110px); height: auto; }
  body.inner-pages .navbar-toggler {
    display: block; position: absolute; top: 43px; right: 12px; margin: 0 !important; padding: 10px; background: none; border: 0; line-height: 0; cursor: pointer;
  }
  body.inner-pages .navbar-nav .nav-item-logo { display: none; }
  body.inner-pages #navbarText {
    display: none; position: absolute; top: 15px; right: 0; z-index: 999; min-width: 240px;
    padding: 56px 40px 28px; background: var(--tb-navy); box-shadow: var(--shadow-lift); border-bottom-left-radius: 16px;
  }
  body.inner-pages #navbarText.show { display: block; }
  body.inner-pages #navbarText > button { display: block; position: absolute; top: 18px; right: 14px; padding: 6px; background: none; border: 0; cursor: pointer; line-height: 0; }
  body.inner-pages .navbar-nav { flex-direction: column; }
  body.inner-pages .navbar-nav .nav-item { margin: 6px 0; }
  body.inner-pages .navbar-nav .nav-link[style] { margin-right: 0 !important; }
}

/* ---------- QA F-02: footer icons on the legacy pages. They load Font
   Awesome 5 (fontawesome-all.min.css) plus FA4, not FA6, so the footer's
   fa-brands / fa-solid / fa-regular classes had no font. Map them onto the
   FA5 fonts already loaded, footer only, with the FA5 glyphs pinned so the
   FA4 sheet cannot swap one in. ---------- */
body.inner-pages .tb-footer .fa-brands, body.inner-pages .tb-footer .fa-solid, body.inner-pages .tb-footer .fa-regular {
  display: inline-block; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.inner-pages .tb-footer .fa-brands { font-family: "Font Awesome 5 Brands"; font-weight: 400; }
body.inner-pages .tb-footer .fa-solid { font-family: "Font Awesome 5 Free"; font-weight: 900; }
body.inner-pages .tb-footer .fa-regular { font-family: "Font Awesome 5 Free"; font-weight: 400; }
body.inner-pages .tb-footer .fa-facebook-f::before { content: "\f39e"; }
body.inner-pages .tb-footer .fa-facebook::before { content: "\f09a"; }
body.inner-pages .tb-footer .fa-instagram::before { content: "\f16d"; }
body.inner-pages .tb-footer .fa-twitter::before { content: "\f099"; }
body.inner-pages .tb-footer .fa-pinterest::before { content: "\f0d2"; }
body.inner-pages .tb-footer .fa-google::before { content: "\f1a0"; }
body.inner-pages .tb-footer .fa-youtube::before { content: "\f167"; }
body.inner-pages .tb-footer .fa-linkedin::before { content: "\f08c"; }
body.inner-pages .tb-footer .fa-star::before { content: "\f005"; }
body.inner-pages .tb-footer .fa-phone::before { content: "\f095"; }
body.inner-pages .tb-footer .fa-envelope::before { content: "\f0e0"; }

/* ---------- QA F-07: Aloha Deals list panel scrolls inside a fixed height
   but hid its scrollbar. Thin maroon scrollbar plus a short fade at the
   bottom edge so the scroll is visible. Same scroll, same map. ---------- */
.grid_view {
  scrollbar-width: thin !important; scrollbar-color: var(--tb-maroon) var(--tb-sand-deep);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%);
}

/* ---------- QA F-09: property section tabs. The row cannot wrap (inline
   nowrap), so at tablet widths "Reviews (57)" was cut off; tighter gap and
   type so all six fit. Same tabs, same order. ---------- */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .navs .nav { gap: 14px !important; }
  .navs .nav .nav-link { font-size: 16px !important; }
  .navs .nav .nav-link.active { padding: 9px 14px !important; }
}