/* ERP look for www.ameinc.com (2026-10-21).
   Restyles the site to match the Addison ERP: the #254159 top bar with white chips, Geologica,
   white cards with a hairline edge and the action-blue top, pale table headers in small navy
   caps, zebra rows, 6px corners. Colours and sizes come from the ERP's static/tokens.css,
   nav.css and components.css.

   head.php links this file LAST, after style.css and the page's own index.css, so it wins
   same-specificity ties without !important. The few !important rules beat inline styles
   that amefunctions.js writes (the header shadow on scroll). To go back to the old look,
   remove the erp.css line from php/head.php. */

:root {
    --bar: #254159;
    --bar-deep: #1d3447;
    --footer: #1f374c;
    --navy: #2D3D4A;
    --text: #2D3D4A;
    --text-body: #3c5161;
    --text-dim: #6b8a9e;
    --bg: #f0f4f7;
    --page-bg: #FAFCFE;
    --panel: #ffffff;
    --border: #d5dce2;
    --line: #e3e8ec;
    --blue: #1B7BC5;
    --blue-hover: #3494DE;
    --soft: #e7eef3;
    --th-bg: #ECF1F7;
    --row-alt: #F6F7F8;
    --sky: #a5c6df;
    --radius: 6px;
    --shadow: 0 1px 3px rgba(20,40,55,.10);
    --shadow-menu: 0 6px 18px rgba(20,40,55,.16);
}

/* White, not the ERP's off-white page: the product photos are shot on white. */
body {
    background-color: #fff;
    color: var(--text);
}

p {
    color: var(--text-body);
}

h1, h2, h3, h4 {
    color: var(--navy);
    letter-spacing: .005em;
}

h2 {
    font-size: 38px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c3cbd2; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #a9b3bc; }

/* ── Top strip (slogan, social, phone, email) ─────────────────────────── */
.top_header {
    width: auto;
    height: 32px;
    background-color: var(--bar-deep);
    align-items: center;
}

.top_header .slogan {
    font-style: normal;
    font-size: 12px;
    color: #9fb9cc;
    line-height: 32px;
    height: 32px;
    letter-spacing: .02em;
}

.top_header ul {
    display: flex;
    align-items: center;
    height: 32px;
}

.top_header ul li,
.top_header ul li a {
    font-size: 12px;
    line-height: 32px;
    color: #dbe7f0;
}

.top_header ul li a img {
    margin-top: 0;
    height: 15px;
    display: block;
    opacity: .85;
}

.top_header ul li a:hover img { opacity: 1; }

.top_header .th-email:hover { color: #fff; text-decoration: underline; }

.dot {
    width: 4px;
    height: 4px;
    margin: 0 18px;
    background: #4d6a82;
}

/* ── Header bar ───────────────────────────────────────────────────────── */
header {
    width: auto;
    height: 64px;
    padding: 0 5%;
    align-items: center;
    background-color: var(--bar);
    border-bottom: none;
    position: sticky;
    top: 0;
    box-shadow: 0 1px 3px rgba(10,25,40,.25) !important;
}

header .mobile_contain {
    width: auto;
    height: 64px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

header .mobile_a {
    max-width: none;
    height: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

header .mobile_logo {
    height: 34px;
    width: auto;
    margin: 0;
}

/* The wordmark beside the mark: the ERP bar's brand, ADDISON over a small caps line. */
.brand-word {
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: 'Geologica', Arial;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
}

.brand-word small {
    margin-top: 5px;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .14em;
    color: #a9c4d8;
}

/* Desktop navigation: links as rounded chips on the bar, Contact as the white chip,
   drop-downs as the ERP's user-menu card. */
@media screen and (min-width: 1101px) {
    nav {
        width: auto;
        height: 64px;
        margin-left: auto;
    }

    nav > ul {
        justify-content: flex-end;
        align-items: flex-start;
        height: 64px;
    }

    nav ul .parent_li {
        position: relative;
        margin-left: 4px;
        line-height: normal;
        height: 64px;
        padding-top: 14px;
        box-sizing: border-box;
    }

    nav ul .parent_li .parent_a {
        display: flex;
        align-items: center;
        height: 36px;
        line-height: 36px;
        padding: 0 13px;
        box-sizing: border-box;
        border-radius: var(--radius);
        background-color: transparent;
        color: #e6eef4;
        font-size: 13.5px;
        font-weight: 500;
        white-space: nowrap;
    }

    nav ul .parent_li .parent_a:hover,
    nav .parent_li:hover > .parent_a {
        background-color: rgba(255,255,255,.10);
        color: #fff;
    }

    nav .arrow,
    nav .parent_li:hover .arrow {
        float: none;
        display: inline-block;
        margin: -4px 0 0 9px;
        padding: 2.5px;
        border: solid #a9c4d8;
        border-width: 0 1.5px 1.5px 0;
    }

    nav .parent_li:hover .arrow {
        border-color: #fff;
    }

    nav ul li:last-child .parent_a {
        margin-left: 10px;
        background-color: #fff;
        color: var(--navy);
        font-weight: 600;
    }

    nav ul .parent_li:last-child .parent_a:hover,
    nav .parent_li:last-child:hover > .parent_a {
        background-color: #eef4f8;
        color: var(--navy);
    }

    nav .sub-menu {
        top: 57px;
        left: 0;
        width: 270px;
        height: auto;
        margin: 0;
        padding: 6px;
        background-color: #fff;
        border: 1px solid #cfdbe3;
        border-radius: var(--radius);
        box-shadow: var(--shadow-menu);
    }

    nav .sub-menu li {
        height: auto;
        line-height: normal;
    }

    nav .sub-menu li a {
        display: block;
        width: auto;
        margin: 0;
        padding: 10px 12px;
        border-radius: var(--radius);
        color: var(--navy);
        font-size: 13px;
        font-weight: 500;
    }

    nav .sub-menu li a:hover {
        background-color: var(--soft);
        color: var(--navy);
    }
}

/* Mobile navigation: the bar keeps its colour, the menu drops below it in the same navy. */
@media screen and (max-width: 1100px) {
    header {
        display: flex;
        width: auto;
        height: 60px;
        padding: 0 5%;
    }

    header .mobile_contain {
        width: auto;
        height: 60px;
    }

    header .mobile_logo {
        height: 30px;
    }

    #nav-toggle {
        top: 50%;
        margin-top: -2px;
        padding: 0 35px 0 0;
    }

    #nav-toggle span,
    #nav-toggle span:before,
    #nav-toggle span:after,
    #nav-toggle.active span:before,
    #nav-toggle.active span:after {
        height: 2px;
        width: 26px;
        background: #fff;
    }

    #nav-toggle span:before { top: -8px; }
    #nav-toggle span:after { bottom: -8px; }

    #nav-toggle.active span { background-color: transparent; }

    nav.showing {
        top: 60px;
        height: auto;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        margin-top: 0;
        background-color: var(--bar-deep);
        box-shadow: 0 8px 18px rgba(10,25,40,.3);
    }

    nav ul {
        background-color: var(--bar-deep);
        margin-top: 0;
        padding-bottom: 10px;
    }

    nav ul .parent_li {
        line-height: normal;
    }

    nav ul .parent_li .parent_a {
        height: 54px;
        line-height: 54px;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        background-color: transparent;
        border-bottom: 1px solid rgba(255,255,255,.10);
    }

    nav .arrow {
        margin-top: 21px;
        border: solid #a9c4d8;
        border-width: 0 2px 2px 0;
    }

    nav .sub-menu {
        background-color: rgba(0,0,0,.14);
        padding: 4px 0 8px;
    }

    nav .sub-menu li,
    nav .sub-menu li a {
        height: 46px;
        line-height: 46px;
    }

    nav .sub-menu li a {
        width: auto;
        margin: 0 5%;
        padding-left: 4%;
        color: #dbe7f0;
        font-size: 15px;
        font-weight: 400;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    nav .sub-menu li a:hover {
        color: #fff;
    }
}

/* ── Banners ──────────────────────────────────────────────────────────── */
/* Photo banner with the page title: a shorter band, a dark fade at the foot for the title. */
.page_banner {
    position: relative;
    height: 62vh;
    min-height: 380px;
    box-shadow: none;
}

.page_banner:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(18,32,46,.70) 0%, rgba(18,32,46,0) 60%);
}

.page_banner #page_title {
    z-index: 1;
    margin-bottom: 64px;
    font-size: 54px;
    font-weight: 700;
    line-height: 120%;
    border-left: 6px solid var(--blue);
    padding-left: 24px;
}

/* The navy panel + photo banner on the product pages. */
.new-banner {
    height: 68vh;
    min-height: 460px;
    background-color: var(--bar);
}

.new-banner .new-text h1 {
    position: relative;
    font-size: 50px;
    font-weight: 700;
    line-height: 115%;
    border-left: none;
    padding-left: 0;
    padding-top: 22px;
    color: #fff;
}

.new-banner .new-text h1:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--blue);
}

.new-banner .new-text p {
    font-size: 16px;
    line-height: 160%;
    color: #c9d8e4;
}

.new-banner .new-text a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border-radius: var(--radius);
    background-color: var(--blue);
    font-size: 13.5px;
    font-weight: 600;
}

.new-banner .new-text a:hover { background-color: var(--blue-hover); }

.banner-flex {
    height: 62vh;
    min-height: 380px;
}

.banner-flex h1 {
    border-left: 6px solid var(--blue);
    font-weight: 700;
}

/* ── Photo galleries (Our Work, component photos) ─────────────────────── */
.our-work,
.page-images {
    display: block;
    width: auto;
    margin-bottom: 0;
    padding: 8px 5%;
    border-bottom: none;
    background-color: var(--bg);
}

.our-work .pictures,
.page-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.our-work .pictures {
    padding: 0;
}

.our-work a,
.page-images a {
    width: auto;
    max-width: none;
    opacity: 1;
    border-radius: var(--radius);
    overflow: hidden;
    display: block;
}

.our-work img,
.page-images img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.our-work a:hover img,
.page-images a:hover img {
    transform: scale(1.04);
}

@media screen and (max-width: 1100px) {
    .our-work .pictures,
    .page-images { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 900px) {
    .our-work .pictures,
    .page-images { grid-template-columns: repeat(2, 1fr); }
}

/* ── Section headings: the short blue rule over an h2 ─────────────────── */
.intro-content h2:before,
.page-content h2:before {
    width: 48px;
    height: 0;
    border-top: 4px solid var(--blue);
    border-radius: 2px;
}

/* Intro (dark band → light, like the ERP's pages) */
.intro-content {
    background-color: var(--page-bg);
    border-bottom: 1px solid var(--line);
}

.intro-content h2 { color: var(--navy); }
.intro-content p { color: var(--text-body); }

.intro-content .right-contain img,
.intro-content .right-contain img:hover {
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(20,40,55,.18);
}

/* ── Two-column feature sections ──────────────────────────────────────── */
.two-column div {
    border-top: none;
    border-bottom: none;
    padding-top: 70px;
    padding-bottom: 70px;
}

.two-column .tc-image {
    padding: 0;
    margin: 40px 5%;
    min-height: 380px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.two-column h2 {
    font-size: 34px;
    color: var(--navy);
}

.two-column p { color: var(--text-dim); }

.two-column .tc-text-alt { background-color: var(--bar); }
.two-column .tc-text-alt h2 { color: #fff; }
.two-column .tc-text-alt p { color: #c9d8e4; }

/* Bullet lists inside sections and on the feature pages: an ERP card with zebra rows. */
.two-column ul,
.page-features ul {
    margin-top: 28px;
    margin-bottom: 20px;
    padding: 0;
    background-color: var(--panel);
    border: 1px solid var(--border);
    border-top: 3px solid var(--blue);
    border-radius: var(--radius);
    overflow: hidden;
}

.two-column li,
.page-features li {
    position: relative;
    margin: 0;
    padding: 12px 18px 12px 38px;
    list-style: none;
    font-size: 15px;
    line-height: 150%;
    color: var(--text);
    background: none;
    border-bottom: 1px solid var(--line);
}

.two-column li:last-child,
.page-features li:last-child { border-bottom: none; }

.two-column li:nth-child(even),
.page-features li:nth-child(even) { background-color: var(--row-alt); }

.page-features li:nth-child(odd) { background: none; }

.two-column li:before,
.page-features li:before {
    content: '';
    position: absolute;
    left: 18px;
    top: 20px;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background-color: var(--blue);
}

/* Tables: the ERP grid — pale header band, small navy caps, zebra rows, framed. */
.two-column table,
.page-features table,
table.prod-table {
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.two-column table th,
.page-features table th,
table.prod-table th {
    padding: 12px 16px;
    background-color: var(--th-bg);
    color: var(--navy);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: left;
}

.two-column table td,
.page-features table td,
table.prod-table td {
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    border-top: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}

.two-column table td:first-child,
.page-features table td:first-child { font-weight: 600; }

.two-column table .shade td,
.page-features table tr:nth-child(odd) { background-color: transparent; }

.two-column table tr:nth-child(odd) td,
.page-features table tr:nth-child(odd) td { background-color: var(--row-alt); }

.two-column table tr:hover td,
.page-features table tr:hover td { background-color: var(--soft); }

/* ── Component pages ──────────────────────────────────────────────────── */
.page-content h2 { color: var(--navy); }
.page-content p { color: var(--text-body); }

.page-content .to-the-right img.product-feature {
    border-radius: var(--radius);
}

.page-features h2 {
    font-size: 32px;
    color: var(--navy);
}

/* The "HF Mill Components" jump menu: an ERP chip with the user-menu card under it. */
.link-menu {
    padding-top: 28px;
    padding-bottom: 24px;
    height: auto;
    width: auto;
}

.link-menu > ul { display: inline-block; position: relative; }

.link-menu a {
    width: 240px;
    height: 38px;
    line-height: 38px;
    padding: 0 14px;
    box-sizing: border-box;
    text-align: left;
    background-color: var(--panel);
    border: 1px solid #c8dbe8;
    border-radius: var(--radius);
    color: var(--navy);
    font-size: 12.5px;
    font-weight: 600;
}

.link-menu a:hover,
.tig-link-li:hover > .tig-link-a {
    color: var(--navy);
    background-color: #eef4f8;
    border-color: #9dc0d8;
}

.link-menu .tig-arrow,
.tig-link-li:hover .tig-arrow {
    margin: 13px 0 0 0;
    border: solid var(--text-dim);
    border-width: 0 1.5px 1.5px 0;
    padding: 2.5px;
}

.link-menu ul .tig-links {
    width: 260px;
    padding: 6px;
    background-color: #fff;
    border: 1px solid #cfdbe3;
    border-radius: var(--radius);
    box-shadow: var(--shadow-menu);
}

.link-menu ul ul li a {
    width: auto;
    height: auto;
    line-height: normal;
    margin: 0;
    padding: 9px 12px;
    border: none;
    border-radius: var(--radius);
    color: var(--navy);
    font-weight: 500;
    font-size: 13px;
}

.link-menu ul ul li a:hover { background-color: var(--soft); border: none; }

/* Component index: one ERP card per component. */
.component-content {
    padding-top: 50px;
    padding-bottom: 60px;
    background-color: var(--bg);
}

.component-content div {
    box-sizing: border-box;
    margin-bottom: 30px;
    padding: 0 0 22px;
    background-color: var(--panel);
    border: 1px solid var(--border);
    border-top: 3px solid var(--blue);
    border-radius: var(--radius);
    overflow: hidden;
}

.component-content div img {
    display: block;
    margin-bottom: 18px;
}

.component-content div h3,
.component-content div p,
.component-content div a {
    padding-left: 22px;
    padding-right: 22px;
}

.component-content div h3 {
    font-size: 21px;
    color: var(--navy);
}

.component-content div p {
    font-size: 14.5px;
    margin-bottom: 14px;
}

.component-content div a {
    display: inline-block;
    color: var(--blue);
    font-size: 13.5px;
    font-weight: 600;
}

.component-content div a:hover { color: var(--blue-hover); }

/* ── Generic content, news stories, terms ─────────────────────────────── */
.content h4 { color: var(--blue); }

.content .email,
.news-email,
.link,
.breadcrumb li a:hover { color: var(--blue); }

.news-text span.bold-ame,
.category { color: var(--blue); }

.news-link { color: var(--blue); }

.booth-button,
.booth-button:hover {
    max-width: none;
    width: max-content;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border-radius: var(--radius);
    background-color: var(--blue);
    box-shadow: none;
    text-shadow: none;
    font-size: 13.5px;
    font-weight: 600;
}

.booth-button:hover { background-color: var(--blue-hover); }

.news-list {
    background-color: var(--panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius);
}

/* Company History: the year beside each story (white over the photo on small screens). */
@media screen and (min-width: 1101px) {
    .history-1 span,
    .history-2 span { color: var(--blue); }
}

/* ── Company Overview ─────────────────────────────────────────────────── */
.mission { background-color: var(--bar); }
.mission p { color: #c9d8e4; }

.ame-highlights h2 { color: var(--navy); }
.ame-highlights p,
.four-columns p { color: var(--text-body); }

.four-columns h2 { font-size: 24px; color: var(--navy); }

.four-columns ul li {
    color: var(--text);
    font-size: 15px;
}

.column-1,
.column-2 { border-right-color: var(--line); }

/* ── Latest news (footer strip and the news page) ─────────────────────── */
#news { background-color: var(--bg); }

.title {
    font-size: 32px;
    color: var(--navy);
}

.latest_news_button {
    width: auto;
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: var(--radius);
    background-color: var(--blue);
    font-size: 13px;
    font-weight: 600;
}

.latest_news_button:hover {
    background-color: var(--blue-hover);
    border: none;
}

.story {
    box-sizing: border-box;
    padding: 0 0 22px;
    background-color: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.story .image {
    height: 220px;
    margin-bottom: 18px;
}

.story h1,
.story .date,
.story .desc,
.story > a,
.story .link {
    padding-left: 20px;
    padding-right: 20px;
}

.story h1 {
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
}

.story .date {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.link { font-weight: 600; font-size: 13.5px; }
.link:hover { color: var(--blue-hover); }
.link .news-arrow { border-color: var(--blue); }
.link:hover .news-arrow { border-color: var(--blue-hover); }

/* News page category filter: the ERP's segmented toggle. */
.buttons {
    width: auto;
    margin: 20px 5% 0;
    padding: 0;
    border: 1px solid #d0d5d9;
    border-radius: var(--radius);
    overflow: hidden;
}

.buttons button,
.buttons button:hover,
.buttons .active,
.buttons .active:hover {
    height: 38px;
    line-height: 38px;
    border: none;
    border-left: 1px solid #d0d5d9;
    font-size: 12.5px;
    font-weight: 500;
}

.buttons button { background-color: #fff; color: var(--text-dim); }
.buttons button:first-child { border-left: none; }
.buttons button:hover { background-color: #f0f5f9; color: var(--text); }
.buttons .active,
.buttons .active:hover { background-color: #EAEEF1; color: #000; font-weight: 600; }

/* ── Call to action ───────────────────────────────────────────────────── */
.cta {
    padding: 70px 5% 76px;
    background-color: var(--th-bg);
    border-top: 1px solid var(--line);
}

.cta h2 {
    font-size: 34px;
    color: var(--navy);
    text-shadow: none;
}

.cta h4 {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-dim);
    text-shadow: none;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
footer {
    background-color: var(--footer);
}

footer div img {
    height: 56px;
}

footer div h3 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9fb9cc;
    margin-bottom: 12px;
}

footer div:first-child h3 {
    font-size: 15px;
    letter-spacing: .02em;
    text-transform: none;
    color: #fff;
}

footer div p { color: #c9d8e4; }

footer div:first-child { border-right-color: #34506a; }

footer div:nth-child(2) ul li { margin-bottom: 8px; }

footer div:nth-child(2) ul li a,
footer div:first-child a { color: #e6eef4; }

footer div:nth-child(2) ul li a:hover,
footer div:first-child a:hover { color: #fff; }

footer .second-address { color: #fff; font-weight: 600; }

.bottom_footer {
    background-color: var(--bar-deep);
    border-top: 1px solid #2c4760;
}

.bottom_footer p { color: #9fb9cc; }
.bottom_footer span { font-style: normal; color: #c9d8e4; }
.bottom_footer a { color: #dbe7f0; }