/* ==========================================================
   RIVER RIDGE OUTFITTERS
   MASTER TYPOGRAPHY + HEADER CSS

   Brand Colors
   Red:      #9E1B1F
   Charcoal: #1E2020
   Bone:     #F2EFE7
   ========================================================== */


/* ==========================================================
   1. GLOBAL TYPOGRAPHY
   ========================================================== */

html {
    font-size: 100%;
}

body {
    font-family: "Inter", Arial, sans-serif;
    font-size: clamp(1rem, 0.95rem + 0.20vw, 1.125rem);
    line-height: 1.65;
    color: #1E2020;
}


/* ---------- HEADINGS ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Oswald", Arial, sans-serif;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.25rem, 1.55rem + 3vw, 4.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: #1E2020;
}

h2 {
    font-size: clamp(2rem, 1.55rem + 2vw, 3.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: #1E2020;
}

h3 {
    font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    color: #9E1B1F;
}

h4 {
    font-size: clamp(1.375rem, 1.2rem + 0.7vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
    color: #1E2020;
}

h5 {
    font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
    font-weight: 600;
    line-height: 1.25;
    color: #1E2020;
}

h6 {
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.03em;
    color: #9E1B1F;
}


/* ---------- BODY COPY ---------- */

p {
    line-height: 1.65;
}

p,
li {
    text-wrap: pretty;
}


/* ==========================================================
   2. LINKS
   ========================================================== */

a {
    color: #9E1B1F;
}

a:hover,
a:focus {
    color: #1E2020;
}


/* ==========================================================
   3. HERO TYPOGRAPHY
   ========================================================== */

.river-ridge-hero h1 {
    font-size: clamp(2.75rem, 1.5rem + 5vw, 6rem);
    line-height: 1;
    letter-spacing: 0.01em;
    color: #F2EFE7 !important;
}

.river-ridge-hero h2 {
    font-size: clamp(2rem, 1.4rem + 3vw, 4.25rem);
    color: #F2EFE7 !important;
}

.river-ridge-hero p {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
    line-height: 1.55;
    color: #F2EFE7;
}


/* ==========================================================
   4. BUTTON TYPOGRAPHY
   ========================================================== */

.sppb-btn,
.btn {
    font-family: "Oswald", Arial, sans-serif;
    font-size: clamp(0.9rem, 0.85rem + 0.15vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.035em;
}


/* ==========================================================
   5. TOP BAR

   The top bar occupies the top of the page.
   Main header begins BELOW it.
   ========================================================== */

#sp-top-bar {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    min-height: 40px;

    padding: 8px 0;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: #F2EFE7;

    z-index: 10001;
}


/* Remove backgrounds inherited from Helix */

#sp-top-bar .container,
#sp-top-bar .container-fluid,
#sp-top-bar .row,
#sp-top-bar [class*="col-"] {
    background: transparent !important;
}


/* Align top-bar content */

#sp-top-bar .row {
    display: flex;
    align-items: center;
}


/* Top-bar typography */

#sp-top-bar,
#sp-top-bar p,
#sp-top-bar span {
    font-family: "Inter", Arial, sans-serif;
    font-size: clamp(12px, 0.7rem + 0.15vw, 14px);
    line-height: 1.4;

    color: #F2EFE7;
}


/* Remove paragraph margins */

#sp-top-bar p {
    margin: 0;
}


/* Top-bar links */

#sp-top-bar a {
    color: #F2EFE7;
    text-decoration: none;

    transition: color 0.2s ease;
}

#sp-top-bar a:hover,
#sp-top-bar a:focus {
    color: #9E1B1F;
}


/* Top-bar icons */

#sp-top-bar i,
#sp-top-bar svg {
    color: inherit;
}


/* ==========================================================
   6. MAIN HEADER

   IMPORTANT:
   40px corresponds to the top-bar height.
   This prevents the two sections from overlapping.
   ========================================================== */

#sp-header {
    position: absolute;

    top: 40px;
    left: 0;

    width: 100%;

    background: transparent !important;
    box-shadow: none !important;

    z-index: 10000;
}


/* Make header internals transparent */

#sp-header .container,
#sp-header .container-fluid,
#sp-header .row {
    background: transparent !important;
}


/* ==========================================================
   7. MAIN NAVIGATION
   ========================================================== */

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    font-family: "Oswald", Arial, sans-serif;

    font-size: clamp(0.875rem, 0.82rem + 0.15vw, 1rem);
    font-weight: 600;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* Navigation over hero */

#sp-header:not(.header-sticky)
.sp-megamenu-parent > li > a,

#sp-header:not(.header-sticky)
.sp-megamenu-parent > li > span {
    color: #F2EFE7;
}


/* Navigation hover over hero */

#sp-header:not(.header-sticky)
.sp-megamenu-parent > li > a:hover {
    color: #9E1B1F;
}


/* Social icons over hero */

#sp-header:not(.header-sticky) #sp-menu ul.social-icons a {
    color: #F2EFE7;
}


/* ==========================================================
   8. STICKY HEADER

   Once sticky:
   - header moves to top: 0
   - top bar scrolls away
   - background becomes Warm Bone
   ========================================================== */

#sp-header.header-sticky {
    position: fixed !important;

    top: 0 !important;
    left: 0;

    width: 100%;

    background: #F2EFE7 !important;

    box-shadow:
        0 3px 12px rgba(30, 32, 32, 0.15) !important;

    z-index: 10000;
}


/* Sticky navigation */

#sp-header.header-sticky
.sp-megamenu-parent > li > a,

#sp-header.header-sticky
.sp-megamenu-parent > li > span {
    color: #1E2020 !important;
}


/* Sticky navigation hover */

#sp-header.header-sticky
.sp-megamenu-parent > li > a:hover,

#sp-header.header-sticky
.sp-megamenu-parent > li.active > a {
    color: #9E1B1F !important;
}


/* Sticky social icons */

#sp-header.header-sticky #sp-menu ul.social-icons a {
    color: #1E2020;
}

#sp-header.header-sticky #sp-menu ul.social-icons a:hover {
    color: #9E1B1F;
}


/* ==========================================================
   9. MOBILE LOGO
   ========================================================== */

.logo-image-phone {
    height: 36px;
    width: auto;
}


/* ==========================================================
   10. TYPOGRAPHY UTILITY CLASSES
   ========================================================== */

.text-muted,
.muted {
    color: #5B5B57 !important;
}


/* Dark sections */

.text-light,
.dark-section {
    color: #F2EFE7;
}

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6 {
    color: #F2EFE7;
}


/* Brand overrides */

.heading-red {
    color: #9E1B1F !important;
}

.text-bone,
.heading-bone {
    color: #F2EFE7 !important;
}


/* ==========================================================
   11. TABLET
   ========================================================== */

@media (max-width: 991.98px) {

    #sp-top-bar {
        min-height: 36px;
        padding: 6px 0;
    }

    #sp-header {
        top: 36px;
    }

}


/* ==========================================================
   12. MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    #sp-top-bar {
        min-height: 34px;
        padding: 5px 0;
    }

    #sp-top-bar .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    #sp-top-bar .row {
        flex-wrap: wrap;
    }

    #sp-header {
        top: 34px;
    }

}


/* ==========================================================
   13. SMALL MOBILE
   ========================================================== */

@media (max-width: 575.98px) {

    body {
        line-height: 1.6;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }

    .river-ridge-hero h1 {
        line-height: 1.05;
    }

    #sp-top-bar,
    #sp-top-bar p,
    #sp-top-bar span {
        font-size: 11px;
    }

    #sp-top-bar .row {
        justify-content: center;
        text-align: center;
    }

}


/* ==========================================================
   14. LARGE DESKTOP
   ========================================================== */

@media (min-width: 1600px) {

    p {
        line-height: 1.7;
    }

}

/* ==========================================================
   FONT AWESOME PROTECTION
   Prevent global typography from overriding icon fonts
   ========================================================== */

.fa,
.fas,
.far,
.fal,
.fad,
.fab,
.fa-solid,
.fa-regular,
.fa-light,
.fa-thin,
.fa-duotone,
.fa-brands {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}

/* Solid icons */
.fas,
.fa-solid {
    font-weight: 900 !important;
}

/* Regular icons */
.far,
.fa-regular {
    font-weight: 400 !important;
}

/* Brand icons MUST use the Brands font */
.fab,
.fa-brands {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-weight: 400 !important;
}