/* ══════════════════════════════════════════════════════════════════════════════
   On The Line Anglers — Main Stylesheet
   Bootstrap 5 variable overrides + custom components
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Brand Variables ──────────────────────────────────────────────────────── */
:root {
    --otl-primary:    #0D9FAF;
    --otl-accent:     #E87722;
    --otl-green:      #27AE60;
    --otl-dark:       #0A1628;
    --otl-dark-mid:   #0D2040;
    --otl-light:      #f8fafc;

    /* Bootstrap overrides */
    --bs-primary:     #0D9FAF;
    --bs-primary-rgb: 13, 159, 175;
    --bs-font-sans-serif: 'Nunito', sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
    font-family: 'Nunito', sans-serif;
    color: #1e293b;
}
h1, h2, h3, h4, h5, h6 { font-weight: 800; }
a { color: var(--otl-primary); }
a:hover { color: #0b8a98; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
    background: var(--otl-primary);
    border-color: var(--otl-primary);
    font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus {
    background: #0b8a98;
    border-color: #0b8a98;
}
.btn-accent {
    background: var(--otl-accent);
    border-color: var(--otl-accent);
    color: #fff;
    font-weight: 700;
}
.btn-accent:hover, .btn-accent:focus {
    background: #d06820;
    border-color: #d06820;
    color: #fff;
}
.btn-green {
    background: var(--otl-green);
    border-color: var(--otl-green);
    color: #fff;
    font-weight: 700;
}
.btn-green:hover { background: #1e9651; border-color: #1e9651; color: #fff; }

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.otl-navbar {
    background: rgba(10, 22, 40, 0.97);
    backdrop-filter: blur(8px);
    padding: .75rem 0;
    transition: background .3s;
}
.otl-navbar.scrolled { background: var(--otl-dark); box-shadow: 0 2px 12px rgba(0,0,0,.3); }
.otl-navbar .navbar-brand {
    font-weight: 900;
    font-size: 1.15rem;
    color: #fff !important;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.otl-navbar .navbar-brand .brand-fish { font-size: 1.4rem; }
.otl-navbar .navbar-brand .brand-sub {
    font-size: .7rem;
    font-weight: 600;
    color: var(--otl-primary);
    display: block;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.otl-navbar .nav-link {
    color: rgba(255,255,255,.8) !important;
    font-weight: 600;
    font-size: .9rem;
    padding: .4rem .75rem !important;
    transition: color .15s;
}
.otl-navbar .nav-link:hover, .otl-navbar .nav-link.active {
    color: #fff !important;
}
.otl-navbar .nav-link.active { color: var(--otl-primary) !important; }
.otl-navbar .btn-donate {
    background: var(--otl-accent);
    color: #fff !important;
    border-radius: 50px;
    padding: .35rem 1.1rem !important;
    font-weight: 700;
    font-size: .85rem;
    transition: background .15s;
}
.otl-navbar .btn-donate:hover { background: #d06820; }

/* ── Hero Section ─────────────────────────────────────────────────────────── */
.hero {
    background:
        linear-gradient(160deg, rgba(10,31,50,.78) 0%, rgba(15,45,68,.65) 60%, rgba(10,31,50,.78) 100%),
        url('/assets/images/hero-bg.png') center center / cover no-repeat;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 7rem 0 5rem;
}
/* Subtle water shimmer */
.hero::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(180deg, transparent 0%, rgba(13,159,175,.06) 100%);
    pointer-events: none;
}
/* Animated bubbles */
.hero-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(13,159,175,.06);
    animation: rise linear infinite;
}
@keyframes rise {
    0%   { transform: translateY(0) scale(1); opacity:.6; }
    100% { transform: translateY(-110vh) scale(1.2); opacity:0; }
}
.hero-content { position: relative; z-index: 2; text-align: center; }
.hero-logo-area { margin-bottom: 2rem; }
.hero-emoji { font-size: 4.5rem; line-height: 1; display: block; }
.hero-brand-name {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -.02em;
    margin: .5rem 0 .2rem;
    text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.hero-tagline {
    font-size: clamp(.75rem, 1.5vw, .85rem);
    font-weight: 700;
    color: var(--otl-primary);
    text-transform: uppercase;
    letter-spacing: .15em;
    margin: 0;
}
.hero-headline {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 1.5rem 0 1rem;
    text-shadow: 0 2px 30px rgba(0,0,0,.3);
}
.hero-headline .accent { color: var(--otl-primary); }
.hero-subtext {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255,255,255,.75);
    max-width: 560px;
    margin: 0 auto 2.5rem;
    font-weight: 500;
    line-height: 1.6;
}
.hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-ctas .btn { padding: .75rem 2rem; border-radius: 50px; font-size: 1rem; font-weight: 700; }
.hero-scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.35);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    animation: bounce 2s ease-in-out infinite;
    z-index: 2;
}
@keyframes bounce {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

/* ── Section Shared ───────────────────────────────────────────────────────── */
.section-pad   { padding: 5rem 0; }
.section-pad-sm { padding: 3.5rem 0; }
.section-label {
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--otl-primary);
    margin-bottom: .5rem;
}
.section-heading {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 900;
    color: var(--otl-dark);
    margin-bottom: .75rem;
}
.section-heading.light { color: #fff; }
.section-sub {
    color: #64748b;
    font-size: 1rem;
    max-width: 540px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
}

/* ── Highlights Section ───────────────────────────────────────────────────── */
.section-highlights { background: #fff; }
.highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.highlight-placeholder {
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #f0f9fa, #e0f5f7);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .5rem;
    color: #94a3b8;
    font-size: .85rem;
    font-weight: 600;
    border: 2px dashed #cbd5e1;
}
.highlight-placeholder .ph-icon { font-size: 2rem; }

/* ── How It Works ─────────────────────────────────────────────────────────── */
.section-how { background: var(--otl-light); }
.how-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    height: 100%;
    transition: transform .2s, box-shadow .2s;
}
.how-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.how-icon { font-size: 3rem; margin-bottom: 1rem; line-height: 1; }
.how-step {
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--otl-primary);
    margin-bottom: .25rem;
}
.how-card h4 { font-weight: 800; color: var(--otl-dark); margin-bottom: .5rem; }
.how-card p  { color: #64748b; font-size: .9rem; line-height: 1.6; margin: 0; }

/* ── Events Preview ───────────────────────────────────────────────────────── */
.section-events { background: #fff; }
.event-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    transition: transform .2s, box-shadow .2s;
}
.event-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.event-date-badge {
    background: var(--otl-primary);
    color: #fff;
    border-radius: 10px;
    padding: .4rem .75rem;
    font-weight: 700;
    font-size: .8rem;
    display: inline-block;
    margin-bottom: .5rem;
}

/* ── Get Involved ─────────────────────────────────────────────────────────── */
.section-involved {
    background: var(--otl-dark);
    color: #fff;
}
.involved-img-area {
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, rgba(13,159,175,.15), rgba(232,119,34,.1));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    border: 2px dashed rgba(255,255,255,.15);
}

/* ── Sponsors ─────────────────────────────────────────────────────────────── */
.section-sponsors { background: #f1f5f9; padding: 3rem 0; }
.sponsor-logo {
    height: 56px;
    object-fit: contain;
    filter: grayscale(.3);
    opacity: .75;
    transition: opacity .2s, filter .2s;
}
.sponsor-logo:hover { opacity: 1; filter: none; }
.sponsor-placeholder {
    background: #e2e8f0;
    border-radius: 10px;
    padding: .75rem 1.5rem;
    font-weight: 700;
    color: #94a3b8;
    font-size: .85rem;
    letter-spacing: .05em;
}

/* ── Donations Strip ──────────────────────────────────────────────────────── */
.section-donate {
    background: var(--otl-green);
    color: #fff;
    padding: 4rem 0;
    text-align: center;
}
.section-donate h2  { color: #fff; }
.section-donate p   { color: rgba(255,255,255,.9); max-width: 560px; margin: 0 auto 2rem; font-size: 1.05rem; line-height: 1.6; }
.section-donate .btn { background: #fff; color: var(--otl-green); font-weight: 800; padding: .75rem 2.5rem; border-radius: 50px; }
.section-donate .btn:hover { background: #f0faf4; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.otl-footer {
    background: var(--otl-dark);
    color: rgba(255,255,255,.6);
    padding: 3.5rem 0 2rem;
    font-size: .875rem;
}
.otl-footer h6 {
    color: #fff;
    font-weight: 800;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 1rem;
}
.otl-footer a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .15s; }
.otl-footer a:hover { color: var(--otl-primary); }
.otl-footer ul { list-style: none; padding: 0; margin: 0; }
.otl-footer ul li { margin-bottom: .4rem; }
.footer-divider { border-color: rgba(255,255,255,.1); margin: 2rem 0 1.5rem; }
.footer-bottom { color: rgba(255,255,255,.35); font-size: .78rem; }

/* ── Generic CMS Page ─────────────────────────────────────────────────────── */
.page-hero {
    background: var(--otl-dark);
    padding: 6rem 0 3.5rem;
    color: #fff;
}
.page-hero h1 { font-weight: 900; margin: 0; }
.page-hero .breadcrumb { opacity: .5; font-size: .8rem; }
.page-hero .breadcrumb a { color: rgba(255,255,255,.7); text-decoration: none; }
.page-body { padding: 3rem 0 4rem; }
.page-body-content { max-width: 780px; margin: 0 auto; line-height: 1.8; font-size: 1.05rem; color: #374151; }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.text-primary { color: var(--otl-primary) !important; }
.text-accent  { color: var(--otl-accent)  !important; }
.text-green   { color: var(--otl-green)   !important; }
.fw-900       { font-weight: 900 !important; }
.bg-dark-otl  { background: var(--otl-dark); }