/* =========================================================
   FISHN FIRE – user.css
   fishnfire.net
   ========================================================= */

/* ---------------------------------------------------------
   1. FISHN FIRE – DESIGN VARIABLES
   --------------------------------------------------------- */

:root {
    --fnf-green: #173B32;
    --fnf-green-dark: #102A24;
    --fnf-green-light: #2B594D;

    --fnf-fire: #C66A32;
    --fnf-fire-dark: #A95225;
    --fnf-fire-light: #D9824D;

    --fnf-charcoal: #202522;
    --fnf-sand: #E8E0D2;
    --fnf-offwhite: #F6F4EE;
    --fnf-white: #FFFFFF;

    --fnf-border: #D9D5CB;

    --fnf-radius: 8px;
    --fnf-radius-small: 5px;

    --fnf-shadow:
        0 4px 18px rgba(32, 37, 34, 0.10);

    --fnf-shadow-hover:
        0 8px 28px rgba(32, 37, 34, 0.16);

    --fnf-content-width: 1200px;

    --fnf-transition:
        0.25s ease;
}


/* ---------------------------------------------------------
   2. BASIC
   --------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--fnf-offwhite);
    color: var(--fnf-charcoal);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   3. LINKS
   --------------------------------------------------------- */

a {
    color: var(--fnf-green);
    transition: color var(--fnf-transition);
}

a:hover,
a:focus {
    color: var(--fnf-fire);
}


/* ---------------------------------------------------------
   4. HEADINGS
   --------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--fnf-green);
    font-weight: 700;
    line-height: 1.25;
}

h1 {
    font-size: clamp(2rem, 4vw, 3.2rem);
}

h2 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.7rem);
}


/* ---------------------------------------------------------
   5. HEADER
   --------------------------------------------------------- */

.header {
    background: var(--fnf-green);
}

header {
    position: relative;
    z-index: 100;
}


/* ---------------------------------------------------------
   6. NAVIGATION
   --------------------------------------------------------- */

.navbar {
    background: var(--fnf-green);
}

.navbar-brand {
    color: var(--fnf-white) !important;
    font-weight: 700;
}

.navbar .nav-link {
    color: var(--fnf-white) !important;
    font-weight: 600;
    transition:
        color var(--fnf-transition),
        background-color var(--fnf-transition);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
    color: var(--fnf-fire-light) !important;
}


/* ---------------------------------------------------------
   7. MAIN CONTENT
   --------------------------------------------------------- */

main {
    background: var(--fnf-offwhite);
}

.container-component,
.container-component > * {
    max-width: var(--fnf-content-width);
}

.com-content-article {
    padding-top: 2rem;
    padding-bottom: 3rem;
}


/* ---------------------------------------------------------
   8. BANNER / HERO
   --------------------------------------------------------- */

.fnf-hero {
    position: relative;
    overflow: hidden;

    min-height: 300px;

    display: flex;
    align-items: center;

    background:
        var(--fnf-green);

    color: var(--fnf-white);
}

.fnf-hero img {
    width: 100%;
    height: 100%;
    min-height: 300px;

    object-fit: cover;
}

.fnf-hero-content {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;

    padding: 2rem;

    background:
        linear-gradient(
            90deg,
            rgba(23, 59, 50, 0.85),
            rgba(23, 59, 50, 0.25),
            rgba(23, 59, 50, 0)
        );

    color: var(--fnf-white);
}

.fnf-hero h1,
.fnf-hero h2,
.fnf-hero h3 {
    color: var(--fnf-white);
}

.fnf-hero-accent {
    color: var(--fnf-fire-light);
}


/* ---------------------------------------------------------
   9. SECTIONS
   --------------------------------------------------------- */

.fnf-section {
    padding: 4rem 1.5rem;
}

.fnf-section-light {
    background: var(--fnf-offwhite);
}

.fnf-section-sand {
    background: var(--fnf-sand);
}

.fnf-section-green {
    background: var(--fnf-green);
    color: var(--fnf-white);
}

.fnf-section-green h1,
.fnf-section-green h2,
.fnf-section-green h3 {
    color: var(--fnf-white);
}


/* ---------------------------------------------------------
   10. SECTION TITLE
   --------------------------------------------------------- */

.fnf-section-title {
    position: relative;

    margin-bottom: 2rem;
    padding-bottom: 0.8rem;
}

.fnf-section-title::after {
    content: "";

    display: block;

    width: 55px;
    height: 4px;

    margin-top: 0.7rem;

    background: var(--fnf-fire);

    border-radius: 2px;
}


/* ---------------------------------------------------------
   11. CARDS
   --------------------------------------------------------- */

.fnf-card {
    height: 100%;

    background: var(--fnf-white);

    border: 1px solid var(--fnf-border);
    border-radius: var(--fnf-radius);

    box-shadow: var(--fnf-shadow);

    overflow: hidden;

    transition:
        transform var(--fnf-transition),
        box-shadow var(--fnf-transition);
}

.fnf-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fnf-shadow-hover);
}

.fnf-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;

    object-fit: cover;
}

.fnf-card-body {
    padding: 1.5rem;
}

.fnf-card h2,
.fnf-card h3,
.fnf-card h4 {
    margin-top: 0;
}


/* ---------------------------------------------------------
   12. FISH CARDS
   --------------------------------------------------------- */

.fnf-fish-card {
    text-align: center;

    background: var(--fnf-white);

    border-radius: var(--fnf-radius);

    padding: 1.5rem;

    border: 1px solid var(--fnf-border);

    transition:
        transform var(--fnf-transition),
        box-shadow var(--fnf-transition);
}

.fnf-fish-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fnf-shadow-hover);
}

.fnf-fish-card img {
    display: block;

    width: 100%;
    max-width: 260px;

    margin: 0 auto 1rem;
}

.fnf-fish-card h3 {
    margin-bottom: 0.5rem;
}


/* ---------------------------------------------------------
   13. BUTTONS
   --------------------------------------------------------- */

.btn-primary,
.fnf-button {
    display: inline-block;

    padding: 0.7rem 1.3rem;

    border: 2px solid var(--fnf-green);
    border-radius: var(--fnf-radius-small);

    background: var(--fnf-green);
    color: var(--fnf-white) !important;

    font-weight: 600;
    text-decoration: none;

    transition:
        background-color var(--fnf-transition),
        border-color var(--fnf-transition),
        transform var(--fnf-transition);
}

.btn-primary:hover,
.fnf-button:hover {
    background: var(--fnf-fire);
    border-color: var(--fnf-fire);

    transform: translateY(-2px);
}

.fnf-button-fire {
    background: var(--fnf-fire);
    border-color: var(--fnf-fire);
}

.fnf-button-fire:hover {
    background: var(--fnf-fire-dark);
    border-color: var(--fnf-fire-dark);
}


/* ---------------------------------------------------------
   14. FEATURE BOXES
   --------------------------------------------------------- */

.fnf-feature {
    padding: 2rem;

    background: var(--fnf-white);

    border-left: 5px solid var(--fnf-fire);

    border-radius: var(--fnf-radius);

    box-shadow: var(--fnf-shadow);
}

.fnf-feature-icon {
    color: var(--fnf-fire);

    font-size: 2rem;

    margin-bottom: 1rem;
}


/* ---------------------------------------------------------
   15. INFO BOX
   --------------------------------------------------------- */

.fnf-info {
    padding: 1.5rem;

    background: var(--fnf-sand);

    border-left: 5px solid var(--fnf-green);

    border-radius: var(--fnf-radius);
}

.fnf-info strong {
    color: var(--fnf-green);
}


/* ---------------------------------------------------------
   16. FIRE / HIGHLIGHT
   --------------------------------------------------------- */

.fnf-fire {
    color: var(--fnf-fire);
}

.fnf-fire-box {
    padding: 1.5rem;

    background: rgba(198, 106, 50, 0.08);

    border-left: 4px solid var(--fnf-fire);

    border-radius: var(--fnf-radius-small);
}


/* ---------------------------------------------------------
   17. TABLES
   --------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;

    background: var(--fnf-white);
}

table th {
    background: var(--fnf-green);
    color: var(--fnf-white);

    font-weight: 600;
}

table th,
table td {
    padding: 0.8rem 1rem;

    border: 1px solid var(--fnf-border);

    text-align: left;
}

table tr:nth-child(even) {
    background: rgba(232, 224, 210, 0.35);
}


/* ---------------------------------------------------------
   18. FOOTER
   --------------------------------------------------------- */

footer {
    background: var(--fnf-charcoal);
    color: var(--fnf-offwhite);
}

footer a {
    color: var(--fnf-offwhite);
}

footer a:hover {
    color: var(--fnf-fire-light);
}


/* ---------------------------------------------------------
   19. JOOMLA MESSAGE / ALERTS
   --------------------------------------------------------- */

.alert {
    border-radius: var(--fnf-radius-small);
}

.alert-success {
    border-color: var(--fnf-green);
}

.alert-warning {
    border-color: var(--fnf-fire);
}


/* ---------------------------------------------------------
   20. RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 991.98px) {

    .fnf-section {
        padding: 3rem 1.25rem;
    }

    .fnf-hero {
        min-height: 260px;
    }

    .fnf-hero img {
        min-height: 260px;
    }

    .fnf-hero-content {
        padding: 1.5rem;
    }
}


@media (max-width: 767.98px) {

    .fnf-section {
        padding: 2.5rem 1rem;
    }

    .fnf-hero {
        min-height: 220px;
    }

    .fnf-hero img {
        min-height: 220px;
    }

    .fnf-hero-content {
        padding: 1rem;

        background:
            linear-gradient(
                90deg,
                rgba(23, 59, 50, 0.88),
                rgba(23, 59, 50, 0.45)
            );
    }

    .fnf-card-body {
        padding: 1.2rem;
    }

    .fnf-fish-card {
        padding: 1rem;
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


/* ---------------------------------------------------------
   21. SMALL DEVICES
   --------------------------------------------------------- */

@media (max-width: 480px) {

    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .fnf-hero {
        min-height: 190px;
    }

    .fnf-hero img {
        min-height: 190px;
    }

    .fnf-button,
    .btn-primary {
        width: 100%;
        text-align: center;
    }
}


/* ---------------------------------------------------------
   22. ACCESSIBILITY
   --------------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--fnf-fire);
    outline-offset: 3px;
}


/* ---------------------------------------------------------
   23. REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}