/* =============================================================
   PlayFast.golf — Bootstrap 5 Brand Overrides (Path B)
   Load this AFTER bootstrap.min.css in header.cfm
   ============================================================= */

/* -----------------------------------------------------------
   1. Brand tokens (CSS custom properties)
   ----------------------------------------------------------- */
:root {
    --pf-navy:        #002d62;
    --pf-cyan:        #00dfff;
    --pf-ocean:       #0097bf;
    --pf-midnight:    #004474;
    --pf-slate:       #5a7a9a;
    --pf-ice:         #f4f7fb;
    --pf-soft-blue:   #e8eef6;

    /* Bootstrap token overrides */
    --bs-primary:         var(--pf-navy);
    --bs-primary-rgb:     0, 45, 98;
    --bs-secondary:       var(--pf-ocean);
    --bs-secondary-rgb:   0, 151, 191;
    --bs-info:            var(--pf-cyan);
    --bs-info-rgb:        0, 223, 255;
    --bs-body-bg:         var(--pf-ice);
    --bs-body-color:      var(--pf-navy);
    --bs-link-color:      var(--pf-ocean);
    --bs-link-hover-color: var(--pf-navy);
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-border-radius:       0.5rem;
    --bs-border-radius-lg:    0.75rem;
    --bs-border-radius-xl:    1rem;
    --bs-border-radius-pill:  50rem;
}

/* -----------------------------------------------------------
   2. Base typography
   ----------------------------------------------------------- */
body {
    font-family:  var(--bs-font-sans-serif);
    color:        var(--pf-navy);
    background:   var(--pf-ice);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color:       var(--pf-navy);
    font-weight: 700;
    line-height: 1.2;
}

a {
    color:           var(--pf-ocean);
    text-decoration: none;
    transition:      color 0.15s ease;
}
a:hover { color: var(--pf-navy); }

/* -----------------------------------------------------------
   3. Navbar  (.pf-navbar)
   ----------------------------------------------------------- */
.pf-navbar {
    background-color: var(--pf-navy);
    padding-top:      0.875rem;
    padding-bottom:   0.875rem;
    box-shadow:       0 2px 12px rgba(0, 45, 98, 0.18);
}

.pf-navbar .navbar-brand {
    color:       #ffffff;
    font-weight: 700;
}
.pf-navbar .navbar-brand:hover { opacity: 0.9; }

.pf-navbar .nav-link {
    color:         rgba(255, 255, 255, 0.82);
    font-weight:   500;
    font-size:     0.9375rem;
    padding-left:  0.875rem;
    padding-right: 0.875rem;
    transition:    color 0.15s ease;
}
.pf-navbar .nav-link:hover,
.pf-navbar .nav-link.active {
    color: var(--pf-cyan);
}

/* Hamburger icon color on mobile */
.pf-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}
.pf-navbar .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='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* -----------------------------------------------------------
   4. Buttons
   ----------------------------------------------------------- */

/* Primary: Navy bg, white text */
.btn-primary {
    background-color: var(--pf-navy);
    border-color:     var(--pf-navy);
    color:            #ffffff;
    font-weight:      600;
}
.btn-primary:hover {
    background-color: var(--pf-midnight);
    border-color:     var(--pf-midnight);
    color:            #ffffff;
}

/* CTA: Cyan bg, navy text — use class="btn btn-cta" */
.btn-cta {
    background-color: var(--pf-cyan);
    border-color:     var(--pf-cyan);
    color:            var(--pf-navy);
    font-weight:      700;
    letter-spacing:   0.01em;
    transition:       background-color 0.15s ease, transform 0.1s ease;
}
.btn-cta:hover {
    background-color: #00c8e6;
    border-color:     #00c8e6;
    color:            var(--pf-navy);
    transform:        translateY(-1px);
}
.btn-cta:active { transform: translateY(0); }

/* Outline: Navy border + text, transparent bg */
.btn-outline-primary {
    border-color: var(--pf-navy);
    color:        var(--pf-navy);
}
.btn-outline-primary:hover {
    background-color: var(--pf-navy);
    border-color:     var(--pf-navy);
    color:            #ffffff;
}

/* -----------------------------------------------------------
   5. Cards
   ----------------------------------------------------------- */
.card {
    background-color: #ffffff;
    border:           1px solid rgba(0, 45, 98, 0.1);
    border-radius:    var(--bs-border-radius-lg);
    box-shadow:       0 2px 12px rgba(0, 45, 98, 0.07);
    transition:       box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
    box-shadow: 0 6px 24px rgba(0, 45, 98, 0.12);
    transform:  translateY(-2px);
}
.card-title { color: var(--pf-navy); font-weight: 700; }

/* -----------------------------------------------------------
   6. Badges / pills
   ----------------------------------------------------------- */
.badge.bg-primary   { background-color: var(--pf-navy)  !important; }
.badge.bg-secondary { background-color: var(--pf-ocean) !important; }
.badge.bg-info      { background-color: var(--pf-cyan)  !important; color: var(--pf-navy) !important; }

/* Brand accent pill — use class="pf-pill" */
.pf-pill {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    background-color: var(--pf-soft-blue);
    color:            var(--pf-navy);
    font-size:        0.8125rem;
    font-weight:      600;
    padding:          4px 12px;
    border-radius:    var(--bs-border-radius-pill);
}
.pf-pill::before {
    content:          '';
    display:          inline-block;
    width:            7px;
    height:           7px;
    background-color: var(--pf-cyan);
    border-radius:    50%;
}

/* -----------------------------------------------------------
   7. Hero section utility  (.pf-hero)
   ----------------------------------------------------------- */
.pf-hero {
    background-color: var(--pf-navy);
    color:            #ffffff;
    padding:          5rem 0 4.5rem;
}
.pf-hero h1 { color: #ffffff; }
.pf-hero .pf-hero-sub {
    color:     rgba(255, 255, 255, 0.78);
    font-size: 1.125rem;
}
.pf-hero-accent { color: var(--pf-cyan); }

/* -----------------------------------------------------------
   8. Section utilities
   ----------------------------------------------------------- */
.pf-section         { padding: 4rem 0; }
.pf-section-light   { background-color: #ffffff; }
.pf-section-soft    { background-color: var(--pf-soft-blue); }
.pf-section-heading {
    font-size:     2rem;
    font-weight:   700;
    color:         var(--pf-navy);
    margin-bottom: 0.5rem;
}
.pf-section-sub {
    color:         var(--pf-slate);
    font-size:     1.0625rem;
    margin-bottom: 2.5rem;
}

/* -----------------------------------------------------------
   9. Footer  (.pf-footer)
   ----------------------------------------------------------- */
.pf-footer {
    background-color: var(--pf-navy);
    color:            rgba(255, 255, 255, 0.7);
    padding:          3.5rem 0 2rem;
    margin-top:       auto;
}
.pf-footer-tagline {
    color:     rgba(255, 255, 255, 0.6);
    font-size: 0.9375rem;
    margin:    0;
}
.pf-footer-heading {
    color:         var(--pf-cyan);
    font-size:     0.75rem;
    font-weight:   700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom:  0.875rem;
}
.pf-footer-links li { margin-bottom: 0.5rem; }
.pf-footer-links a {
    color:      rgba(255, 255, 255, 0.72);
    font-size:  0.9375rem;
    transition: color 0.15s ease;
}
.pf-footer-links a:hover { color: var(--pf-cyan); }
.pf-footer-divider {
    border-color: rgba(255, 255, 255, 0.12);
    margin: 2rem 0 1.5rem;
}
.pf-footer-copy {
    color:     rgba(255, 255, 255, 0.45);
    font-size: 0.875rem;
    margin:    0;
}

/* -----------------------------------------------------------
   10. Forms
   ----------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--pf-ocean);
    box-shadow:   0 0 0 0.2rem rgba(0, 151, 191, 0.2);
}