/* ============================================
   TACKLE BOX WEB & PRINTING — BRAND STYLESHEET
   v1.1 — see tbwp-design-system.md for full spec
   Fonts: Raleway (headlines) + Open Sans (body)
   Import fonts before this file:
   <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* Primary */
    --navy: #364F6B;
    --navy-dark: #283C50;
    /*PACIFIC BLUE*/
    --coral: #FC5185;
    /*FRENCH ROSE*/
    --coral-dark: #E13B6C;
    /* Secondary */
    --teal: #3FC1C9;
    /*SEA SERPENT*/
    --taupe: #A28F85;
    /*WARM TAUPE*/

    /* AA-safe variants — use these specifically when placing WHITE TEXT
       on a filled coral/teal background (buttons, filled badges).
       Values are the lightest passing shade from YOUR tints-and-shades
       tool output (not independently computed), so they trace back to a
       source you generated yourself:
       French Rose -30% shade = #B0395D (5.85:1 with white)
       Sea Serpent -45% shade = #236A6F (6.25:1 with white)
       Original --coral/--teal fail WCAG AA for white text at normal
       button-text sizes (3.16:1 / 2.17:1) — see tbwp-design-system.md §1.6 */
    --coral-text-safe: #B0395D;
    --teal-text-safe: #236A6F;

    /* Neutral scale — tied to Pacific Blue's hue (212°), not pure gray */
    --gray-50: #F7F7F8;
    --gray-100: #EEF0F1;
    --gray-200: #DEE0E3;
    --gray-300: #C2C7CB;
    --gray-400: #9CA3AB;
    --gray-500: #757F8A;
    --gray-600: #5E656E;
    --gray-700: #464C53;
    --gray-800: #2F3337;
    --gray-900: #1C1E21;
    --cultured: #F5F5F5;
    --ink: #1A1A1A;
    /*BODY TEXT*/
    --white: #FFFFFF;

    /* Semantic — tuned so white text on the fill passes AA (4.5+) */
    /* Semantic — APPROVED v1.0. Success/Info/Warning use dark Ink text;
       Danger is the exception and uses white text. See tbwp-design-system.md §1 */
    --success: #71BA1D;
    /* dark Ink text */
    --info: #38AFFF;
    /* dark Ink text */
    --warning: #F9EE16;
    /* dark Ink text */
    --danger: #DA120B;
    /* WHITE text */

    /* Gradients — all stops pulled from your tints-and-shades tool output,
       not computed independently, so they stay consistent with your source of truth.
       Text-safe only at the solid ends, not the mid-blend. */
    --gradient-brand: linear-gradient(135deg, #FC5185 0%, #3FC1C9 100%);
    /* French Rose -> Sea Serpent */
    --gradient-depth: linear-gradient(135deg, #546981 0%, #0E141B 100%);
    /* Pacific Blue 15% tint -> 75% shade — real visible depth now */
    --gradient-warm: linear-gradient(135deg, #FC5185 0%, #A28F85 100%);
    /* French Rose -> Warm Taupe */
    --gradient-cool: linear-gradient(135deg, #364F6B 0%, #3FC1C9 100%);
    /* Pacific Blue -> Sea Serpent */
    --gradient-rose-navy: linear-gradient(135deg, #364F6B 0%, #FC5185 100%);
    /* Pacific Blue -> French Rose — now used on the hero */
    --gradient-rose-tonal: linear-gradient(135deg, #3F1421 0%, #FC5185 100%);
    /* French Rose's own -75% shade -> French Rose, monochrome. Dark end first — text-safe side */

    /* ===== HEADING SCALE =====
     Real, standalone sizing for h1-h6 so these tags work correctly
     on any page (blog posts, service pages, etc.) — not just inside
     this guide's own hero/section contexts, which apply their own
     larger overrides on top of these defaults. */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-display);
        color: var(--navy) !important;
        line-height: 1.15;
    }

    h1 {
        font-weight: 900 !important;
    }

    h2 {
        font-weight: 800 !important;
    }

    h3 {
        font-weight: 700 !important;
    }

    h4 {
        font-weight: 700 !important;
    }

    h5 {
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    h6 {
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--taupe);
    }

    .panel-heading .jobspecs {
        color: #fff !important;
    }

    .btn.btn-success {
        background-color: var(--coral-dark) !important;
    }

    .btn.btn-warning {
        background-color: var(--navy-dark) !important;
    }

    .btn.btn-info {
        background-color: var(--teal-text-safe) !important;
    }

    .btn.btn-danger {
        background-color: #DA120B !important;
    }

    .btn:hover {
        color: #fff !important;
    }

    .CTA__image-block-text h3 {
        color: var(--coral) !important;
        transition: color 0.2s ease !important;
    }

    .CTA__image-block-text:hover h3 {
        color: var(--teal) !important;
    }


    /*Brought in from the Website Prefernces, not sent by Corean*/
    .site-search {
        border-radius: 20px !important;

    }

    #s-nav {
        position: absolute !important;
        z-index: 50;
        width: 100%;
    }


    div.active.slide-item.item {
        border: none !important;
    }

    .carousel-custom {
        position: absolute;
        top: 110px !important;
        left: 40% !important;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        height: 75% !important;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    @media (max-width: 900px) {
        .carousel-custom {
            position: absolute;
            top: -35px !important;
            left: 29% !important;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            height: 100% !important;
            padding-top: 46px;
            padding-bottom: 40px;
            color: white !important;
        }
    }

    #container__footer {
        background: #011c38 !important;
    }

    #copyright_footer {
        background-color: #f22266 !important;
        color: #fff;
        text-align: center;
        padding: 15px !important;
        font-size: 12px;
        margin: 0px;
    }

    #s-menu {
        justify-content: flex-end;
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
        -webkit-box-flex: 0;
        -ms-flex: 0 1 75%;
        flex: 0 1 75%;
        text-align: right;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        max-width: 75%;
    }

    @media (max-width: 900px) {
        #s-menu {
            justify-content: unset;
            -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
            order: 3;
            -webkit-box-flex: 0;
            -ms-flex: 0 1 75%;
            flex: 0 1 75%;
            text-align: left;
            display: -webkit-box !important;
            display: -ms-flexbox !important;
            display: block !important;
            max-width: 100%;
        }
    }

    #s-user a {
        font-weight: 600 !important;
        background-color: white !important;
        color: #031c38 !important;
        padding: 7px !important;
        border-radius: 10px !important;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px !important;
        margin: 0px 5px !important;
    }

    @media (min-width: 1200px) {
        #s-nav .container {
            width: 1550px;
        }
    }