/********** Tribute Sportfishing theme -- BOOKING BUILD.
 * Pruned copy of the marketing site's assets/css/tribute-theme.css
 * (~/TECK-net/tribute-sportfishing).  Marketing-only sections (carousel,
 * causes, team, testimonials, gallery, map, rates/counts tables, contact
 * form, CTA band) are removed; the Font Awesome 5 glyph escapes are
 * pointed at the bundled Font Awesome 4 (family "FontAwesome"), which
 * carries the same \f105/\f107 codepoints and is served locally.
 * Keep the palette and chrome rules in step with the marketing site.
 *
 * Original header follows.
 **********/
/********** Tribute Sportfishing theme — ported from the legacy
 * tribute-sportfishing.com template (HTML-Codex "Charity" family), using the
 * site's native navy + gold palette and Work Sans. **********/

:root {
  --primary: #F3BD00;      /* Tribute gold accent */
  --secondary: #eaeef2;    /* pale neutral section tint */
  --light: #F3F6F8;        /* light section bg */
  --dark: #0C2B4B;         /* Tribute deep navy */
  --heading: #0C2B4B;      /* heading navy */

  /* Fonts (match the Tribute site) */
  --oo-body-font: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --oo-head-font: "Work Sans", system-ui, sans-serif;

  /* Bring Bootstrap's own primary utilities onto the Tribute gold accent so
     .text-primary / .bg-primary / .border-primary / .btn-primary match. */
  --bs-primary: #F3BD00;
  --bs-primary-rgb: 243, 189, 0;
}

body { font-family: var(--oo-body-font); color: #2b3a45; }
h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--oo-head-font);
  color: var(--heading);
}

/* --- Bootstrap primary utility overrides (ocean accent) --- */
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-primary { border-color: var(--primary) !important; }
.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: #0C2B4B;
  --bs-btn-hover-border-color: #0C2B4B;
  --bs-btn-active-bg: #0C2B4B;
}
a { color: var(--primary); }

/* --- Legacy helper classes, recolored --- */
.t-primary { color: var(--primary); }
.td-primary { color: var(--heading); }
.t-b-d-primary { border-color: var(--primary) !important; color: #000; }

.btn-t-blue {
  color: #fff; background: var(--heading);
  border-color: var(--heading);
  font-weight: bold; letter-spacing: 0.05em; border-radius: 8px; padding: 5px;
}
.btn-t-blue:hover, .btn-t-blue:active, .btn-t-blue:focus, .btn-t-blue.active {
  color: #fff; background: var(--primary); border-color: var(--primary);
}
.btn-t-primary {
  font-weight: bold; color: #fff; background: var(--primary);
  letter-spacing: 0.05em; border-color: var(--primary);
  border-radius: 8px; padding: 5px;
}
.btn-t-primary:hover, .btn-t-primary:active, .btn-t-primary:focus, .btn-t-primary.active {
  color: #fff; background: var(--heading); border-color: var(--heading);
}
.btn-t-primary-outline {
  color: #fff; border-color: #fff;
  font-weight: bold; letter-spacing: 0.05em; border-radius: 8px; padding: 5px;
}
.btn-t-primary-outline:hover, .btn-t-primary-outline:active,
.btn-t-primary-outline:focus, .btn-t-primary-outline.active {
  color: var(--heading); background: #fff; border-color: #fff;
}
.pill-t {
  color: var(--heading); background-color: var(--secondary);
  font-weight: bold; letter-spacing: 0.05em;
  border: 2px solid rgba(243, 189, 0, 0.5); border-radius: 12px; padding: 5px;
}

.back-to-top { position: fixed; display: none; right: 30px; bottom: 30px; z-index: 99; }

/*** Spinner ***/
#spinner {
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease-out, visibility 0s linear .5s; z-index: 99999;
}
#spinner.show {
  transition: opacity .5s ease-out, visibility 0s linear 0s;
  visibility: visible; opacity: 1;
}

/*** Buttons ***/
.btn { font-weight: 500; transition: .5s; }
.btn.btn-primary, .btn.btn-outline-primary:hover { color: #fff; }
.btn.btn-primary:hover { color: var(--primary); background: transparent; }
.btn-square { width: 38px; height: 38px; }
.btn-sm-square { width: 32px; height: 32px; }
.btn-lg-square { width: 48px; height: 48px; }
.btn-square, .btn-sm-square, .btn-lg-square {
  padding: 0; display: flex; align-items: center; justify-content: center; font-weight: normal;
}

/*** Navbar ***/
.fixed-top { transition: .5s; }
.top-bar { height: 45px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.navbar { background: var(--dark); }
.navbar.bg-dark { background: var(--dark) !important; }
.navbar .dropdown-toggle::after {
  border: none; content: "\f107"; font-family: "FontAwesome";
  font-weight: normal; vertical-align: middle; margin-left: 8px;
}
.navbar .navbar-nav .nav-link {
  margin-right: 30px; padding: 25px 0; color: #fff; font-weight: 500; outline: none;
}
.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active { color: var(--primary); }
@media (max-width: 991.98px) {
  .navbar .navbar-nav { margin-top: 10px; border-top: 1px solid rgba(0,0,0,.07); background: var(--dark); }
  .navbar .navbar-nav .nav-link { padding: 10px 0; }
}
@media (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    display: block; visibility: hidden; top: 100%;
    transform: rotateX(-75deg); transform-origin: 0% 0%; transition: .5s; opacity: 0;
  }
  .navbar .nav-item:hover .dropdown-menu { transform: rotateX(0deg); visibility: visible; transition: .5s; opacity: 1; }
}

/*** Footer ***/
.oo-footer { background: var(--dark); }
.oo-footer .btn.btn-link {
  display: block; margin-bottom: 5px; padding: 0; text-align: left;
  color: rgba(255,255,255,0.55); font-weight: normal; text-transform: capitalize; transition: .3s;
}
.oo-footer .btn.btn-link::before {
  position: relative; content: "\f105"; font-family: "FontAwesome";
  font-weight: normal; color: rgba(255,255,255,0.55); margin-right: 10px;
}
.oo-footer .btn.btn-link:hover { color: #fff; letter-spacing: 1px; box-shadow: none; }
.oo-footer .btn.btn-square { color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.55); }
.oo-footer .btn.btn-square:hover { color: var(--primary); border-color: var(--primary); }
.oo-footer .copyright { padding: 25px 0; font-size: 15px; border-top: 1px solid rgba(255,255,255,.1); }
.oo-footer .copyright a { color: var(--secondary); }
.oo-footer .copyright a:hover { color: var(--primary); }

/* --- Structural classes carried over from the old Active template.  The
 * booking chrome still uses these: includes/header.php renders the page-title
 * band as <section class="page-title section dark-background">. --- */
.section { padding: 60px 0; }
.section > .container { position: relative; }
.section-title { text-align: center; padding-bottom: 40px; max-width: 720px; margin: 0 auto; }
.section-title h2 { color: var(--heading); font-weight: 700; margin-bottom: .5rem; }
.section-title p { color: #5a6b78; margin-bottom: 0; }
.light-background { background: var(--light); }
.dark-background { background: var(--dark); color: #fff; }
.dark-background h1, .dark-background h2, .dark-background h3 { color: #fff; }

/* Alias the legacy Active CSS variables so inline var() refs on the reused
   dynamic pages resolve to the ocean palette. */
:root {
  --accent-color: #F3BD00;
  --heading-color: #0C2B4B;
  --default-color: #2b3a45;
  --contrast-color: #ffffff;
  --surface-color: #ffffff;
}

/* --- Inner-page banner (used by reused dynamic pages via .page-title) --- */
.page-title.dark-background { position: relative; }
.page-title.dark-background h1 { color: #fff; }
.page-title .breadcrumb-item, .page-title .breadcrumb-item a { color: rgba(255,255,255,.75); text-decoration: none; }