/* =========================================================
   FERROBEND — FLANGE CAPABILITIES DATASHEET
   CLEAN MASTER CSS
   A3 LANDSCAPE — ONE PAGE PRINT
   ========================================================= */


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

:root {
    --fb-navy: #0b1f33;
    --fb-orange: #f28c28;
    --fb-page-bg: #eef3f7;
    --fb-white: #ffffff;
    --fb-text: #263746;
    --fb-muted: #667684;
    --fb-border: #d5dee6;
    --fb-light: #f4f7fa;
    --fb-shadow: 0 8px 24px rgba(11, 31, 51, 0.08);
}


/* =========================================================
   RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Poppins", sans-serif;
    background: var(--fb-page-bg);
    color: var(--fb-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   MAIN DATASHEET
   ========================================================= */

.flange-datasheet {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;

    background: var(--fb-white);

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


/* =========================================================
   HEADER
   ========================================================= */

.datasheet-header {
    background: var(--fb-navy);

    padding: 30px 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border-bottom: 4px solid var(--fb-orange);
}


/* LOGO */

.datasheet-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    flex-shrink: 0;
}

.datasheet-logo img {
    width: 190px;
    height: auto;

    /* IMPORTANT — keeps logo straight */
    transform: none;
}


/* HEADER TEXT */

.datasheet-header-title {
    text-align: right;
}

.datasheet-header-title span {
    display: block;

    color: var(--fb-orange);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.8px;
    text-transform: uppercase;

    margin-bottom: 5px;
}

.datasheet-header-title h1 {
    color: #ffffff;

    font-size: 28px;
    font-weight: 700;

    line-height: 1.25;
}

.datasheet-header-title p {
    margin-top: 5px;

    color: #cbd7df;

    font-size: 12px;
    letter-spacing: 1px;
}


/* =========================================================
   CAPABILITIES
   ========================================================= */

.capabilities-section {
    padding: 34px 42px;

    background: var(--fb-light);
}

.capabilities-title {
    margin-bottom: 22px;

    text-align: center;
}

.capabilities-title span {
    display: block;

    color: var(--fb-orange);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.capabilities-title h2 {
    margin: 5px 0 0;

    color: var(--fb-navy);

    font-size: 28px;
    font-weight: 700;
}


/* THREE COLUMNS */

.capabilities-grid {
    display: grid;

    grid-template-columns: 1.15fr 1fr 1fr;

    gap: 18px;
}


/* =========================================================
   FLANGE CAPABILITY BOXES
   ========================================================= */

.capability-box {
    background: #ffffff;

    border: 2px solid var(--fb-orange);   /* grey se orange kar diya */

    padding: 25px 28px;

    min-height: 185px;

    box-shadow: 0 4px 12px rgba(11, 31, 51, 0.07);

    border-radius: 4px;
}


/* BOX HEADING */

.capability-box h3 {
    margin: 0 0 15px;

    padding-bottom: 10px;

    border-bottom: 2px solid var(--fb-orange);

    color: var(--fb-navy);

    font-size: 16px;
    font-weight: 700;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}


/* LIST */

.capability-list {
    list-style: none;
}

.capability-list li {
    position: relative;

    padding-left: 17px;

    margin-bottom: 8px;

    color: var(--fb-text);

    font-size: 14px;
    line-height: 1.5;
}


/* ORANGE BULLET */

.capability-list li::before {
    content: "•";

    position: absolute;

    left: 0;
    top: 0;

    color: var(--fb-orange);

    font-weight: 700;
}


/* =========================================================
   COMMON SECTION HEADING
   ========================================================= */

.section-heading {
    margin-bottom: 15px;
}

.section-heading h3 {
    color: var(--fb-navy);

    font-size: 17px;
    font-weight: 700;

    letter-spacing: 0.9px;

    text-transform: uppercase;
}


/* =========================================================
   MATERIALS
   ========================================================= */

.materials-section {
    padding: 28px 42px;

    background: #ffffff;
}


/* =========================================================
   TAG GRID
   ========================================================= */

.tag-grid {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.tag-box {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 9px 16px;

    background: #edf3f7;

    border: 1px solid #d5e0e8;

    color: var(--fb-navy);

    font-size: 13px;
    font-weight: 600;

    text-align: center;

    border-radius: 3px;
}


/* =========================================================
   APPLICATIONS
   ========================================================= */

.applications-section {
    padding: 25px 42px;

    background: var(--fb-light);

    border-top: 1px solid var(--fb-border);
    border-bottom: 1px solid var(--fb-border);
}


/* =========================================================
   STANDARDS
   ========================================================= */

.standards-section {
    padding: 28px 42px;

    background: #ffffff;
}

.standards-grid {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.standard-box {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 8px 15px;

    background: #edf3f7;

    border: 1px solid #d5e0e8;

    color: var(--fb-navy);

    font-size: 12px;
    font-weight: 700;

    text-align: center;

    border-radius: 3px;
}


/* =========================================================
   QUALITY & CERTIFICATION
   ========================================================= */

.quality-section {
    padding: 32px 42px;

    background: var(--fb-light);

    border-top: 1px solid var(--fb-border);
}

.quality-content {
    color: var(--fb-text);

    font-size: 16px;

    line-height: 1.8;
}

.quality-content span {
    white-space: nowrap;
}

.quality-content span:not(:last-child)::after {
    content: " · ";

    color: var(--fb-orange);

    font-weight: 700;
}


/* =========================================================
   ENGINEERING & SUPPLY
   ========================================================= */

.supply-section {
    padding: 34px 42px;

    background: #ffffff;

    display: grid;

    grid-template-columns: 0.9fr 2.1fr;

    gap: 35px;

    align-items: center;

    border-top: 1px solid var(--fb-border);
}

.supply-title h3 {
    color: var(--fb-navy);

    font-size: 18px;
    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}

.supply-content {
    color: var(--fb-text);

    font-size: 16px;

    line-height: 1.8;
}

.supply-content strong {
    color: var(--fb-navy);

    font-weight: 600;
}


/* =========================================================
   FOOTER
   ========================================================= */

.datasheet-footer {
    background: var(--fb-navy);

    padding: 24px 42px;

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    border-top: 3px solid var(--fb-orange);
}


/* LEFT — FERROBEND */

.datasheet-footer-brand {
    color: #ffffff;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: 0.7px;

    text-align: left;
}


/* CENTER — EMAIL + PHONE */

.datasheet-footer-contact {
    color: #d2dde5;

    font-size: 14px;
    font-weight: 500;

    text-align: center;

    white-space: nowrap;
}

.datasheet-footer-contact a {
    color: #ffffff;

    text-decoration: none;

    transition: color 0.2s ease;
}

.datasheet-footer-contact a:hover {
    color: var(--fb-orange);
}


/* RIGHT — GLOBAL SUPPLY */

.footer-tagline {
    color: #ffffff;

    font-size: 15px;
    font-weight: 600;

    text-align: right;

    white-space: nowrap;
}


/* =========================================================
   SCREEN
   ========================================================= */

@media screen {

    body {
        padding: 15px;
    }

}


/* =========================================================
   A3 LANDSCAPE — PRINT
   IMPORTANT
   ========================================================= */

@page {
    size: A3 landscape;
    margin: 0;
}


@media print {

    html,
    body {
        width: 420mm;
        height: 297mm;

        margin: 0;
        padding: 0;

        background: #ffffff !important;
    }


    /* ACTUAL A3 PAGE */

    .flange-datasheet {

        width: 420mm;
        height: 297mm;

        max-width: none;

        margin: 0;

        background: #ffffff;

        box-shadow: none;

        overflow: hidden;

        display: flex;
        flex-direction: column;
    }


    /* HEADER */

    .datasheet-header {
        padding: 20px 25mm;

        flex-shrink: 0;
    }

    .datasheet-logo img {
        width: 55mm;

        transform: none;
    }

    .datasheet-header-title span {
        font-size: 9pt;
    }

    .datasheet-header-title h1 {
        font-size: 21pt;
    }

    .datasheet-header-title p {
        font-size: 8pt;
    }


    /* CAPABILITIES */

    .capabilities-section {
        padding: 12mm 25mm;
        flex-shrink: 0;
    }

    .capabilities-title {
        margin-bottom: 8mm;
    }

    .capabilities-title span {
        font-size: 8pt;
    }

    .capabilities-title h2 {
        font-size: 18pt;
    }

    .capabilities-grid {
        gap: 5mm;
    }

    .capability-box {
        min-height: 0;

        padding: 5mm 6mm;

        box-shadow: none;
    }

    .capability-box h3 {
        font-size: 9pt;

        margin-bottom: 3mm;
        padding-bottom: 2mm;
    }

    .capability-list li {
        font-size: 8pt;

        margin-bottom: 1.5mm;

        line-height: 1.35;
    }


    /* MATERIALS */

    .materials-section {
        padding: 7mm 25mm;
        flex-shrink: 0;
    }

    .section-heading {
        margin-bottom: 3mm;
    }

    .section-heading h3 {
        font-size: 9pt;
    }

    .tag-grid {
        gap: 2.5mm;
    }

    .tag-box {
        min-height: 9mm;

        padding: 2mm 3mm;

        font-size: 7pt;
    }


    /* APPLICATIONS */

    .applications-section {
        padding: 6mm 25mm;
        flex-shrink: 0;
    }


    /* STANDARDS */

    .standards-section {
        padding: 7mm 25mm;
        flex-shrink: 0;
    }

    .standard-box {
        min-height: 8.5mm;

        padding: 2mm 3mm;

        font-size: 6.8pt;
    }


    /* QUALITY */

    .quality-section {
        padding: 6mm 25mm;
        flex-shrink: 0;
    }

    .quality-content {
        font-size: 8pt;
        line-height: 1.5;
    }


    /* ENGINEERING & SUPPLY */

    .supply-section {
        padding: 7mm 25mm;

        gap: 8mm;

        flex-shrink: 0;
    }

    .supply-title h3 {
        font-size: 9pt;
    }

    .supply-content {
        font-size: 8pt;

        line-height: 1.5;
    }

    .supply-content .capability-list li {
        margin-bottom: 1mm;
    }


    /* FOOTER */

    .datasheet-footer {

        padding: 6mm 25mm;

        min-height: 18mm;

        flex-shrink: 0;

        grid-template-columns: 1fr auto 1fr;
    }

    .datasheet-footer-brand {
        font-size: 12pt;
    }

    .datasheet-footer-contact {
        font-size: 9pt;
    }

    .footer-tagline {
        font-size: 10pt;
    }


    /* PRINT COLORS */

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

}