/*
 * Bird Island Boat Tours — Custom Stylesheet
 * Bootstrap 5.3 base | Minimal custom CSS only
 * All colours, spacing, and layout via Bootstrap utilities where possible
 * © 2026 Bird Island Tours Limited
 */

/* ============================================================
   1. CSS CUSTOM PROPERTIES (Brand Tokens)
   ============================================================ */
:root {
  --bibt-navy:        #07496B;
  --bibt-yellow:      #F7F78C;
  --bibt-white:       #ffffff;
  --bibt-overlay:     rgba(7, 73, 107, 0.68);

  --bibt-font-heading: 'Arvo', serif;
  --bibt-font-body:    'Atkinson Hyperlegible', sans-serif;

  --bibt-btn-width-desktop: 340px;
  --bibt-btn-height-desktop: 80px;
  --bibt-btn-width-mobile:  200px;
  --bibt-btn-height-mobile:  48px;

  --bibt-navbar-height: 72px;
}

/* ============================================================
   2. BASE
   ============================================================ */
body {
  font-family: var(--bibt-font-body);
  color: #1a1a1a;
  padding-top: var(--bibt-navbar-height); /* offset for fixed navbar */
  background-color: var(--bibt-white);
}

h1, h2, h3, h4, h5, h6,
.font-heading {
  font-family: var(--bibt-font-heading);
}

/* Override Bootstrap primary colour to match brand navy */
.text-primary    { color: var(--bibt-navy) !important; }
.bg-primary      { background-color: var(--bibt-navy) !important; }
.border-primary  { border-color: var(--bibt-navy) !important; }

/* Brand navy utility */
.bg-navy         { background-color: var(--bibt-navy); }
.text-navy       { color: var(--bibt-navy); }

/* Brand yellow utility */
.bg-yellow       { background-color: var(--bibt-yellow); }
.text-yellow     { color: var(--bibt-yellow); }

/* ============================================================
   3. NAVBAR
   ============================================================ */
.navbar {
  min-height: var(--bibt-navbar-height);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Transparent state — over hero only (applied via JS on scroll) */
.navbar-hero {
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Mobile hero state: collapse panel already handled by media query above */

/* Solid state — after scroll or on non-hero pages */
.navbar-scrolled,
.navbar-solid {
  background-color: var(--bibt-navy) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Nav links */
.navbar .nav-link {
  font-family: var(--bibt-font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bibt-white) !important;
  padding-inline: 1rem;
  position: relative;
}

/* Active page underline indicator */
.navbar .nav-link.active::after,
.navbar .nav-link:hover::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background-color: var(--bibt-yellow);
  border-radius: 1px;
}

/* Logo max height */
.navbar-brand img {
  max-height: 50px;
  width: auto;
}

/* Mobile nav collapse background — always solid navy regardless of hero/scroll state */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: var(--bibt-navy) !important;
    padding: 1rem;
    margin-top: 0.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  }
  .navbar {
    background-color: var(--bibt-navy) !important;
  }
}

/* ============================================================
   4. HERO
   ============================================================ */
.hero {
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--bibt-overlay) 0%,
    rgba(7, 73, 107, 0.45) 100%
  );
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}

/* Shorter hero on inner pages */
.hero-inner {
  min-height: 45vh;
}

@media (min-width: 992px) {
  .hero {
    min-height: 85vh;
  }
  .hero-inner {
    min-height: 40vh;
  }
}

/* ============================================================
   5. CTA BUTTON (.btn-cta)
   ============================================================ */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bibt-font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bibt-navy);
  background-color: var(--bibt-yellow);
  border: none;
  border-radius: 0.375rem;
  min-width: var(--bibt-btn-width-mobile);
  min-height: var(--bibt-btn-height-mobile);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  cursor: pointer;
}

.btn-cta:hover,
.btn-cta:focus {
  background-color: #e8e87a;
  color: var(--bibt-navy);
  box-shadow: 0 4px 12px rgba(7, 73, 107, 0.25);
  transform: translateY(-1px);
  text-decoration: none;
}

.btn-cta:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Full desktop sizing at lg+ */
@media (min-width: 992px) {
  .btn-cta {
    min-width: var(--bibt-btn-width-desktop);
    min-height: var(--bibt-btn-height-desktop);
    font-size: 1.1rem;
  }
}

/* Smaller variant for use in nav / cards where full size is too large */
.btn-cta-sm {
  min-width: 160px;
  min-height: 44px;
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem;
}

@media (min-width: 992px) {
  .btn-cta-sm {
    min-width: 200px;
    min-height: 52px;
    font-size: 0.95rem;
  }
}

/* ============================================================
   6. WOODEN PLAQUE CARD (.plaque-card)
   ============================================================ */
.plaque-card {
  background-image: url('../img/Plaquehorizontal.webp');
  background-size: cover;
  background-position: center;
  border-radius: 0.5rem;
  padding: 2rem 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.plaque-card--vertical {
  background-image: url('../img/Plaquevertical.webp');
}

/* ============================================================
   7. ROPE BOX — As Seen In frame (.rope-box)
   ============================================================ */
.rope-box {
  background-image: url('../img/ropebox@2x.webp');
  background-size: 100% 100%; /* stretch to fill container */
  background-repeat: no-repeat;
  padding: 2.5rem 3rem;
  border-radius: 0.25rem;
}

/* ============================================================
   8. ROPE DIVIDER (.rope-divider)
   ============================================================ */
.rope-divider {
  background-image: url('../img/ropeboarder@2x.webp');
  background-repeat: repeat-x;
  background-size: auto 100%;
  height: 32px; /* adjust if rope graphic is taller */
  width: 100%;
  display: block;
}

/* ============================================================
   9. MASCOT CUTOUT (.mascot-cutout)
   ============================================================ */
.mascot-cutout {
  display: block;
  margin: 0 auto;
  max-width: 140px;
  width: 100%;
}

@media (min-width: 992px) {
  .mascot-cutout {
    max-width: 190px;
  }
}

/* ============================================================
   10. SECTION BANDS
   ============================================================ */

/* Wood background texture band */
.band-wood {
  background-image: url('../img/Background.webp');
  background-size: cover;
  background-position: center;
}

/* Navy CTA / promo band */
.band-navy {
  background-color: var(--bibt-navy);
  color: var(--bibt-white);
}

/* ============================================================
   11. AS SEEN IN — LOGO BAR
   ============================================================ */
.logo-bar-img {
  max-height: 56px;
  width: auto;
  filter: grayscale(20%);
  opacity: 0.85;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.logo-bar-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ============================================================
   12. FOOTER
   ============================================================ */
footer {
  background-color: var(--bibt-navy);
  color: var(--bibt-white);
}

footer a {
  color: var(--bibt-yellow);
  text-decoration: none;
  transition: color 0.2s ease;
}

footer a:hover {
  color: var(--bibt-white);
  text-decoration: underline;
}

.footer-logo {
  max-height: 80px;
  width: auto;
}

.social-icon {
  max-height: 32px;
  width: auto;
  transition: opacity 0.2s ease;
}

.social-icon:hover {
  opacity: 0.8;
}

/* Footer map embed */
.footer-map iframe {
  border: 3px solid var(--bibt-yellow);
  border-radius: 0.375rem;
  max-width: 100%;
}

/* ============================================================
   13. MODALS
   ============================================================ */
.modal-content {
  border-radius: 0.5rem;
  border: 2px solid var(--bibt-navy);
}

.modal-header {
  background-color: var(--bibt-navy);
  color: var(--bibt-white);
  border-radius: calc(0.5rem - 2px) calc(0.5rem - 2px) 0 0;
}

.modal-header .btn-close {
  filter: invert(1); /* white X on navy header */
}

/* Booking widget iframe fills modal width */
.modal-body iframe,
.modal-body .ftb-widget,
.modal-body .load-turitop {
  width: 100% !important;
}

/* ============================================================
   14. FAQ / ACCORDION
   ============================================================ */
.accordion-button {
  font-family: var(--bibt-font-heading);
  font-weight: 700;
  color: var(--bibt-navy);
  background-color: var(--bibt-white);
}

.accordion-button:not(.collapsed) {
  color: var(--bibt-white);
  background-color: var(--bibt-navy);
  box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
  filter: invert(1); /* white chevron on navy */
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(7, 73, 107, 0.35);
}

/* ============================================================
   15. COTTAGE TABS
   ============================================================ */
.nav-tabs .nav-link {
  font-family: var(--bibt-font-heading);
  font-weight: 700;
  color: var(--bibt-navy);
  border-radius: 0.375rem 0.375rem 0 0;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  color: var(--bibt-white);
  background-color: var(--bibt-navy);
  border-color: var(--bibt-navy);
}

/* Navy border outline around the full tab group */
.cottage-tabs {
  border-bottom: 2px solid #07496B;
}

.cottage-tabs .nav-link {
  border: 2px solid #07496B;
  border-bottom: none;
  margin-right: 4px;
}

.cottage-tabs .nav-link:not(.active) {
  background-color: rgba(7, 73, 107, 0.08);
}

.nav-pills .nav-link {
  font-family: var(--bibt-font-heading);
  color: var(--bibt-navy);
  border: 1px solid var(--bibt-navy);
  border-radius: 2rem;
  font-size: 0.875rem;
  padding: 0.35rem 1rem;
}

.nav-pills .nav-link.active {
  background-color: var(--bibt-navy);
  color: var(--bibt-white);
  border-color: var(--bibt-navy);
}

/* ============================================================
   16. TOUR / TICKET PRICE CARDS
   ============================================================ */
.card-tour {
  border: 2px solid var(--bibt-navy);
  border-radius: 0.5rem;
}

.card-tour .card-header {
  background-color: var(--bibt-navy);
  color: var(--bibt-white);
  font-family: var(--bibt-font-heading);
  font-weight: 700;
  font-size: 1.1rem;
}

/* ============================================================
   17. VISITING CAPE BRETON — DESTINATION CARDS
   ============================================================ */
.card-destination {
  border: none;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-destination:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(-3px);
}

/* ============================================================
   18. POLICIES PAGE — no hero, wood background header
   ============================================================ */
.policies-header {
  background-image: url('../img/Background.webp');
  background-size: cover;
  background-position: center;
  padding: 5rem 0 3rem;
}

/* ============================================================
   19. UTILITY HELPERS
   ============================================================ */

/* Section vertical rhythm — use instead of py-5 when extra breathing room needed */
.section-lg {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (min-width: 992px) {
  .section-lg {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

/* Image frame — coloured border treatment from design guide */
.img-frame {
  border: 6px solid var(--bibt-navy);
  border-radius: 0.375rem;
}

/* Constrain body text column width for readability on wide screens */
.prose-col {
  max-width: 68ch;
}

/* ============================================================
   HOMEPAGE FIXES — added after initial review
   ============================================================ */

/* Navbar: always solid navy, no transparency state on homepage */
.navbar {
  background-color: var(--bibt-navy) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Nav links: brand yellow, slightly larger */
.navbar .nav-link {
  color: var(--bibt-yellow) !important;
  font-size: 1.05rem;
}
.navbar .nav-link.active::after,
.navbar .nav-link:hover::after {
  background-color: var(--bibt-white);
}

/* Hamburger icon: brand yellow */
.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='%23F7F78C' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Hero: left-to-right gradient — solid navy left, fades to transparent centre/right */
.hero-overlay {
  background: linear-gradient(
    to right,
    rgba(7, 73, 107, 0.92) 0%,
    rgba(7, 73, 107, 0.75) 35%,
    rgba(7, 73, 107, 0.20) 65%,
    rgba(7, 73, 107, 0.0) 100%
  );
}

/* On mobile: full overlay since image is narrow */
@media (max-width: 991.98px) {
  .hero-overlay {
    background: rgba(7, 73, 107, 0.72);
  }
}

/* Hero Book Now: add inner yellow border */
.hero .btn-cta {
  border: 3px solid var(--bibt-navy);
  box-shadow: inset 0 0 0 2px var(--bibt-yellow);
}

/* Alternate CTA style: navy bg, yellow border + text */
.btn-cta-navy {
  background-color: var(--bibt-navy);
  color: var(--bibt-yellow);
  border: 2px solid var(--bibt-yellow);
}
.btn-cta-navy:hover,
.btn-cta-navy:focus {
  background-color: #05395a;
  color: var(--bibt-yellow);
  box-shadow: 0 4px 12px rgba(7,73,107,0.35);
}

/* Vertical wood background — wraps all non-navy sections */
.bg-wood-vertical {
  background-image: url('../img/Background.webp');
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: center top;
}

/* Horizontal wood + navy overlay — Stay With Us, Our History, Footer */
.bg-wood-navy {
  position: relative;
  background-image: url('../img/Plaquehorizontal.webp');
  background-size: cover;
  background-position: center;
}
.bg-wood-navy::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 46, 108, 0.8); /* #002e6c at 0.8 opacity */
  z-index: 0;
}
.bg-wood-navy > * {
  position: relative;
  z-index: 1;
}

/* Plaque card: remove white box appearance */
.plaque-card {
  background-color: transparent;
  box-shadow: none;
}

/* Corner nail circles — schedule & while-you're-here boxes */
.nail-corners {
  position: relative;
}
.nail-corners::before,
.nail-corners::after,
.nail-corners .nail-bl,
.nail-corners .nail-br {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: #5a3a1a;
  border-radius: 50%;
  border: 2px solid #8b5e3c;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
  z-index: 2;
}
.nail-corners::before { top: 4%;  left: 2%;  }
.nail-corners::after  { top: 4%;  right: 2%; }
.nail-corners .nail-bl { bottom: 4%; left: 2%;  }
.nail-corners .nail-br { bottom: 4%; right: 2%; }

/* Schedule section: plain text layout (no table) */
.schedule-period {
  font-family: var(--bibt-font-heading);
  font-weight: 700;
  color: var(--bibt-navy);
  font-size: 1rem;
  margin-bottom: 0.15rem;
}
.schedule-times {
  font-size: 1rem;
  color: var(--bibt-navy);
  margin-bottom: 1rem;
}

/* Mascot footer area: vertical wood left side, mascot left-aligned */
.mascot-area {
  background-image: url('../img/Background.webp');
  background-size: auto 100%;
  background-repeat: repeat-x;
  display: flex;
  align-items: flex-end;
  min-height: 160px;
  padding: 0;
}
.mascot-area .mascot-wood {
  background-image: url('../img/Background.webp');
  background-size: auto 100%;
  background-repeat: repeat-x;
  display: flex;
  align-items: flex-end;
  padding: 0 1rem;
}

/* Footer: horizontal wood + navy overlay, no white gap */
footer {
  background-image: url('../img/Plaquehorizontal.webp');
  background-size: cover;
  background-position: center;
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 46, 108, 0.8); /* #002e6c at 0.8 opacity */
  z-index: 0;
}
footer .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   HOMEPAGE FIXES — Round 2
   ============================================================ */

/* Navbar: larger nav link font, bold */
.navbar .nav-link {
  font-size: 1.2rem;
  font-weight: 700;
}

/* Hero/rope: eliminate white gap — hero has no bottom margin/padding */
.hero {
  margin-bottom: 0;
  padding-bottom: 0;
}
.rope-divider {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

/* Rope divider height — match actual image aspect */
.rope-divider {
  height: 48px;
}

/* Mascot area sits directly on the rope with no gap */
.mascot-area-wrap {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Rope box: use padding to give equal visual weight top/bottom vs sides */
.rope-box {
  padding: 3rem 4rem;
  background-size: 100% 100%;
}

/* Schedule: larger text */
.schedule-period {
  font-size: 1.15rem;
}
.schedule-times {
  font-size: 1.1rem;
}
.plaque-card p,
.plaque-card small {
  font-size: 1rem;
}

/* Schedule Book Now: specified dimensions */
.schedule-book-btn {
  min-width: 200px;
  min-height: 35px;
  max-width: 100%;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
@media (min-width: 992px) {
  .schedule-book-btn {
    min-width: 340px;
    min-height: 80px;
  }
}

/* Footer: larger links and contact */
footer nav a,
footer ul a {
  font-size: 1.05rem;
  line-height: 2;
}
footer address {
  font-size: 1.15rem;
  line-height: 1.8;
}
footer address .phone-main {
  font-size: 1.3rem;
  font-weight: 700;
}
footer address small {
  font-size: 1.3rem;
  font-weight: 700;
}
footer address small a {
  font-size: 1.3rem;
  font-weight: 700;
}
footer address > a:not(.phone-main) {
  font-size: 1.3rem;
  font-weight: 700;
}

/* Footer map: square */
.footer-map iframe {
  width: 220px;
  height: 220px;
}

/* ============================================================
   HOMEPAGE FIXES — Round 3b
   ============================================================ */

/* Rope wrapper: sits in normal document flow — no offsets.
   Wood background absorbs the transparent rope edges naturally. */
.rope-divider-wrap {
  display: block;
  line-height: 0;
  font-size: 0;
}

/* ============================================================
   SPECIES CHART LIGHTBOX
   ============================================================ */

/* Wildlife photo lightbox — fits viewport height (minus navbar), width follows photo aspect ratio */

/* Shift dialog down so it centres within the visible area below the fixed navbar */
.photo-lightbox-dialog {
  width: fit-content;
  max-width: 100vw;
  margin-top: 72px; /* clear the fixed navbar */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
}

.photo-lightbox-img {
  display: block;
  /* full visible height minus navbar (72px) and modal title bar (~44px) */
  max-height: calc(100dvh - 72px - 44px);
  max-width: 100vw;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Make the species infographic modal as large as possible */
.species-chart-dialog {
  max-width: calc(100vw - 2rem);
  width: calc(100vw - 2rem);
  margin: 1rem auto;
}

@media (min-width: 576px) {
  .species-chart-dialog {
    max-width: calc(100vw - 3rem);
    width: calc(100vw - 3rem);
    margin: 1.5rem auto;
  }
}

.species-chart-dialog .modal-body {
  padding: 1.5rem;
}


/* ============================================================
   ABOUT US — Generations section
   ============================================================ */

/* Portrait photos: consistent max height so tall portraits
   don't dominate the layout on larger screens               */
.generation-portrait {
  max-height: 420px;
  width: auto;
  object-fit: cover;
}

/* ============================================================
   ANCHOR SCROLL OFFSET — compensate for fixed navbar (~72px)
   ============================================================ */
[id] {
  scroll-margin-top: 80px;
}