/* =========================================================
   FERROBEND MATERIAL PAGE
   FINAL FIXED VERSION
   Theme Preserved
   Search Dropdown Fixed
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    --primary: #0B1F3A;
    --secondary: #1F4E79;
    --accent: #B87333;

    --background: #F8FAFC;
    --text: #1E293B;
    --muted: #64748B;

    --border: #E2E8F0;
    --white: #FFFFFF;

    --shadow: 0 15px 35px rgba(11,31,58,.08);
    --shadow-hover: 0 25px 50px rgba(11,31,58,.15);

    --radius: 16px;
    --transition: .35s ease;
}


/* =========================================================
   GLOBAL
========================================================= */

section {
    padding: 100px 0;
}

.container {
    width: 90%;
    max-width: 1320px;
    margin: auto;
}


/* =========================================================
   HERO
========================================================= */

.material-hero {

    position: relative;

    min-height: 600px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0B1F3A 0%,
            #163A63 100%
        );
}

.material-hero::before {

    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    border-radius: 50%;

    top: -330px;
    right: -190px;

    background: rgba(31,78,121,.25);

    pointer-events: none;
}

.material-hero::after {

    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    bottom: -250px;
    left: -160px;

    background: rgba(184,115,51,.08);

    pointer-events: none;
}

.hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    color: #fff;

    padding: 100px 0;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 25px;

    font-size: 14px;
}

.breadcrumb a {

    color: rgba(255,255,255,.82);

    transition: var(--transition);
}

.breadcrumb a:hover {

    color: var(--accent);
}

.breadcrumb span {

    color: rgba(255,255,255,.45);
}

.breadcrumb strong {

    color: #fff;
}


/* =========================================================
   HERO SUBTITLE
========================================================= */

.hero-subtitle {

    display: inline-block;

    color: #D9B38C;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 20px;
}


/* =========================================================
   HERO HEADING
========================================================= */

.material-hero h1 {

    color: #fff;

    font-size: 58px;

    line-height: 1.15;

    margin-bottom: 25px;
}

.material-hero p {

    color: rgba(255,255,255,.85);

    font-size: 18px;

    line-height: 1.9;
}


/* =========================================================
   STATISTICS
========================================================= */

.material-stats {

    margin-top: -70px;

    position: relative;

    z-index: 5;

    padding: 0 0 40px;
}

.stats-grid {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 25px;
}

.stat-card {

    background: #fff;

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

    border-radius: 18px;

    padding: 35px;

    text-align: center;

    box-shadow: var(--shadow);

    transition: var(--transition);
}

.stat-card:hover {

    transform: translateY(-10px);

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

.stat-card h2 {

    color: var(--secondary);

    font-size: 44px;

    margin-bottom: 8px;
}

.stat-card p {

    color: var(--muted);

    font-weight: 600;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.section-title {

    text-align: center;

    max-width: 800px;

    margin: 0 auto 65px;
}

.section-title span {

    display: inline-block;

    color: var(--accent);

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 15px;
}

.section-title h2 {

    color: var(--primary);

    font-size: 42px;

    line-height: 1.25;

    margin-bottom: 18px;
}

.section-title p {

    color: var(--muted);

    line-height: 1.9;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.materials-introduction {

    background: #fff;
}

.intro-content {

    max-width: 950px;

    margin: auto;
}

.intro-content p {

    color: var(--muted);

    font-size: 17px;

    line-height: 1.9;

    margin-bottom: 20px;
}


/* =========================================================
   MATERIAL SEARCH SECTION
========================================================= */

.material-search-section {

    background: var(--background);

}


/*
=========================================================
IMPORTANT

The search wrapper is the positioning parent
for the dropdown.
=========================================================
*/

.material-search-wrapper {

    position: relative;

    z-index: 100;

    max-width: 850px;

    margin: auto;
}


/* =========================================================
   SEARCH INPUT
========================================================= */

.material-search-wrapper input {

    width: 100%;

    height: 64px;

    padding: 0 58px;

    box-sizing: border-box;

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

    border-radius: 14px;

    background: #fff;

    color: var(--text);

    font-family: inherit;

    font-size: 16px;

    outline: none;

    box-shadow: 0 10px 30px rgba(11,31,58,.06);

    transition: var(--transition);
}

.material-search-wrapper input::placeholder {

    color: #94A3B8;
}

.material-search-wrapper input:focus {

    border-color: var(--secondary);

    box-shadow:

        0 15px 35px rgba(31,78,121,.12);
}


/* =========================================================
   SEARCH ICON
========================================================= */

.material-search-icon {

    position: absolute;

    z-index: 3;

    left: 22px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--secondary);

    font-size: 18px;

    pointer-events: none;
}


/* =========================================================
   SEARCH CLEAR BUTTON
========================================================= */

.material-search-clear {

    position: absolute;

    z-index: 4;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    width: 36px;

    height: 36px;

    border: 0;

    border-radius: 50%;

    background: #F1F5F9;

    color: #64748B;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;
}

.material-search-clear:hover {

    background: #E2E8F0;

    color: var(--primary);
}


/* =========================================================
   SEARCH RESULTS DROPDOWN
========================================================= */

.material-search-results {

    display: none;

    position: absolute;

    z-index: 99999;

    top: calc(100% + 10px);

    left: 0;

    right: 0;

    width: 100%;

    max-height: 430px;

    overflow-y: auto;

    box-sizing: border-box;

    background: #fff;

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

    border-radius: 16px;

    box-shadow: 0 25px 55px rgba(11,31,58,.15);
}


/*
=========================================================
THIS IS THE MAIN FIX

material-search.js uses:

resultsBox.classList.add("show");

Therefore CSS MUST display the dropdown
when .show is added.
=========================================================
*/

.material-search-results.show {

    display: block;
}


/*
Also support ID selector because your HTML uses:

id="materialSearchResults"
*/

#materialSearchResults.show {

    display: block;
}


/* =========================================================
   SEARCH RESULT ITEM
========================================================= */

.material-search-item {

    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;

    box-sizing: border-box;

    padding: 15px 18px;

    border-bottom: 1px solid #EEF2F7;

    background: #fff;

    color: var(--text);

    text-decoration: none;

    transition: .25s ease;

    cursor: pointer;
}

.material-search-item:last-child {

    border-bottom: 0;
}

.material-search-item:hover {

    background: #F7FAFD;
}


/* =========================================================
   RESULT ICON
========================================================= */

.material-search-result-icon {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    border-radius: 12px;

    background: rgba(31,78,121,.08);

    color: var(--secondary);

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   RESULT CONTENT
========================================================= */

.material-search-result-content {

    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;
}

.material-search-title {

    display: block;

    color: var(--primary);

    font-size: 15px;

    font-weight: 700;

    line-height: 1.4;
}

.material-search-type {

    display: block;

    margin-top: 3px;

    color: #94A3B8;

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .6px;
}


/* =========================================================
   RESULT ARROW
========================================================= */

.material-search-arrow {

    flex-shrink: 0;

    color: var(--accent);

    transition: .25s ease;
}

.material-search-item:hover .material-search-arrow {

    transform: translateX(4px);
}


/* =========================================================
   EMPTY SEARCH RESULT
========================================================= */

.material-search-empty {

    min-height: 90px;

    padding: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: #64748B;

    font-size: 15px;

    box-sizing: border-box;
}

.material-search-empty i {

    color: var(--accent);
}


/* =========================================================
   SEARCH DROPDOWN SCROLLBAR
========================================================= */

#materialSearchResults::-webkit-scrollbar {

    width: 7px;
}

#materialSearchResults::-webkit-scrollbar-track {

    background: #F1F5F9;

    border-radius: 20px;
}

#materialSearchResults::-webkit-scrollbar-thumb {

    background: #B8C5D3;

    border-radius: 20px;
}

#materialSearchResults::-webkit-scrollbar-thumb:hover {

    background: var(--secondary);
}


/* =========================================================
   SEARCH NOTE
========================================================= */

.search-note {

    max-width: 850px;

    margin: 20px auto 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;

    text-align: center;
}


/* =========================================================
   CATEGORY GRID
========================================================= */

.material-categories {

    background: #fff;
}

.category-grid {

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 30px;
}

.category-card {

    background: #fff;

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

    border-radius: 18px;

    box-shadow: var(--shadow);

    overflow: hidden;

    transition: var(--transition);

    display: flex;

    height: 100%;
}

.category-card:hover {

    transform: translateY(-10px);

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

    border-color: #D7E1EC;
}

.category-content {

    padding: 35px;

    display: flex;

    flex-direction: column;

    width: 100%;

    box-sizing: border-box;
}

.category-content h3 {

    color: var(--primary);

    font-size: 24px;

    margin-bottom: 15px;
}

.category-content p {

    color: var(--muted);

    line-height: 1.8;

    margin-bottom: 20px;
}

.category-content ul {

    list-style: none;

    padding: 0;

    margin: 0 0 25px;
}

.category-content li {

    color: #475569;

    font-size: 14px;

    margin-bottom: 10px;

    padding-left: 20px;

    position: relative;
}

.category-content li::before {

    content: "\f058";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    left: 0;

    color: var(--accent);
}


/* =========================================================
   CATEGORY BUTTON
========================================================= */

.category-btn {

    margin-top: auto;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--secondary);

    font-weight: 700;
}

.category-btn:hover {

    color: var(--accent);
}

.category-btn i {

    transition: .25s ease;
}

.category-btn:hover i {

    transform: translateX(6px);
}


/* =========================================================
   GUIDE / BENEFITS / FAQ
========================================================= */

.selection-guide,
.material-faq {

    background: var(--background);
}

.why-material {

    background: #fff;
}

.guide-grid,
.benefits-grid {

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 25px;
}

.guide-card,
.benefit-card,
.faq-item {

    background: #fff;

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

    border-radius: 18px;

    padding: 35px;

    box-shadow: var(--shadow);

    transition: var(--transition);
}

.guide-card:hover,
.benefit-card:hover,
.faq-item:hover {

    transform: translateY(-8px);

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


/* =========================================================
   GUIDE / BENEFIT ICONS
========================================================= */

.guide-card i,
.benefit-card i {

    width: 65px;

    height: 65px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(31,78,121,.08);

    color: var(--secondary);

    font-size: 25px;

    margin-bottom: 20px;
}

.guide-card h3,
.benefit-card h3,
.faq-item h3 {

    color: var(--primary);

    margin-bottom: 13px;
}

.guide-card p,
.benefit-card p,
.faq-item p {

    color: var(--muted);

    line-height: 1.8;
}


/* =========================================================
   FAQ
========================================================= */

.faq-container {

    max-width: 950px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 20px;
}


/* =========================================================
   CTA
========================================================= */

.material-cta {

    background: var(--primary);

    text-align: center;

    color: #fff;
}

.cta-content {

    max-width: 850px;

    margin: auto;
}

.cta-content h2 {

    color: #fff;

    font-size: 42px;

    margin-bottom: 20px;
}

.cta-content p {

    color: rgba(255,255,255,.82);

    font-size: 17px;

    line-height: 1.9;

    margin-bottom: 30px;
}

.material-cta .primary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 30px;

    border-radius: 50px;

    background: var(--accent);

    color: #fff;

    font-weight: 700;
}

.material-cta .primary-btn:hover {

    background: #965A27;
}


/* =========================================================
   ANIMATION
========================================================= */

.category-card,
.stat-card,
.guide-card,
.benefit-card,
.faq-item {

    animation: materialFadeUp .65s ease both;
}

@keyframes materialFadeUp {

    from {

        opacity: 0;

        transform: translateY(18px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {

        animation: none !important;

        transition: none !important;
    }
}


/* =========================================================
   RESPONSIVE — 1100px
========================================================= */

@media (max-width:1100px) {

    .category-grid {

        grid-template-columns: repeat(2,1fr);
    }

    .stats-grid {

        grid-template-columns: repeat(2,1fr);
    }

    .guide-grid,
    .benefits-grid {

        grid-template-columns: repeat(2,1fr);
    }

    .material-hero h1 {

        font-size: 50px;
    }
}


/* =========================================================
   RESPONSIVE — 768px
========================================================= */

@media (max-width:768px) {

    section {

        padding: 70px 0;
    }

    .container {

        width: 94%;
    }

    .material-hero {

        min-height: 500px;

        text-align: center;
    }

    .hero-content {

        margin: auto;

        padding: 80px 0;
    }

    .breadcrumb {

        justify-content: center;
    }

    .material-hero h1 {

        font-size: 38px;
    }

    .material-hero p {

        font-size: 16px;
    }

    .section-title h2 {

        font-size: 32px;
    }

    .category-grid,
    .guide-grid,
    .benefits-grid {

        grid-template-columns: 1fr;
    }

    .stats-grid {

        grid-template-columns: 1fr;
    }

    .material-stats {

        margin-top: -45px;
    }

    .cta-content h2 {

        font-size: 32px;
    }


    /* SEARCH MOBILE */

    .material-search-wrapper {

        width: 100%;
    }

    .material-search-wrapper input {

        height: 62px;

        font-size: 16px;

        padding-left: 58px;
    }

    .material-search-icon {

        left: 22px;

        font-size: 18px;
    }

    #materialSearchResults {

        max-height: 360px;

        z-index: 99999;
    }

    #materialSearchResults .material-search-item {

        padding: 18px 20px;
    }
}


/* =========================================================
   RESPONSIVE — 576px
========================================================= */

@media (max-width:576px) {

    .material-hero h1 {

        font-size: 30px;
    }

    .material-search-wrapper input {

        height: 58px;

        font-size: 14px;

        padding-left: 50px;
    }

    .material-search-icon {

        left: 18px;
    }

    .category-content,
    .guide-card,
    .benefit-card,
    .faq-item {

        padding: 25px;
    }

    .search-note {

        font-size: 14px;
    }

    #materialSearchResults .material-search-item {

        padding: 16px;
    }

    .material-search-title {

        font-size: 14px;
    }

    .material-search-type {

        font-size: 11px;
    }

    .material-search-result-icon {

        width: 38px;

        height: 38px;

        flex-basis: 38px;
    }

    .cta-content h2 {

        font-size: 29px;
    }

    .cta-content p {

        font-size: 16px;
    }
}


/* =========================================================
   SEARCH ACCESSIBILITY
========================================================= */

#materialSearch:focus-visible {

    outline: 3px solid rgba(184,115,51,.25);

    outline-offset: 2px;
}

.category-btn:focus-visible,
.material-cta .primary-btn:focus-visible {

    outline: 3px solid rgba(184,115,51,.3);

    outline-offset: 4px;
}