/* Severance Tools - Custom Styles on Bootstrap 5 */

/* Color Variables - Severance Orange Theme */
:root {
    --sev-primary: #f26812;
    --sev-secondary: #1a4a7c;
    --sev-accent: #fff3e0;
    --sev-dark: #333333;
    --sev-light: #f8f9fa;
    --sev-text: #333;
    --sev-muted: #6c757d;
    --sev-orange-dark: #c85510;
    /* Contrast-safe variants (WCAG AA): text on white, button backgrounds, text on dark */
    --sev-primary-text: #b84d09;
    --sev-primary-btn: #c4520a;
    --sev-orange-on-dark: #ffb27d;
}

/* Typography */
body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--sev-text);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--sev-dark);
}

/* Navigation */
.navbar {
    background-color: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    border-bottom: 3px solid var(--sev-primary);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--sev-primary-text) !important;
    /* Never let the menu squeeze the logo (it shrank to 23px once the
       phone number and search box joined the bar) */
    flex-shrink: 0;
}

.navbar-brand span {
    color: var(--sev-dark);
    font-weight: 400;
}

.nav-link {
    color: var(--sev-primary-text) !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    transition: color 0.2s ease;
    white-space: nowrap;
}

/* One-row desktop bar: logo, links, Quote List button, phone, and search fit
   from 1200px up with this padding; below 1200px the menu collapses
   (navbar-expand-xl). Up to 1399px the links sit a little closer, the phone
   icon hides, and the search box may narrow to 130px so the Quote List
   button fits. */
@media (min-width: 1200px) {
    .navbar-nav .nav-link {
        padding: 0.5rem 0.5rem !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-nav .nav-link {
        padding: 0.5rem 0.4rem !important;
    }

    .navbar-nav .nav-phone .bi {
        display: none;
    }

    .navbar .edp-search-wrapper {
        min-width: 130px !important;
    }
}

.nav-link:hover,
.nav-link.active {
    color: var(--sev-orange-dark) !important;
    text-decoration: underline;
}

.navbar-toggler {
    border-color: var(--sev-primary);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f26812' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.dropdown-menu {
    border: 1px solid rgba(242, 104, 18, 0.2);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.dropdown-item {
    padding: 0.6rem 1.2rem;
    font-weight: 500;
    color: var(--sev-dark);
}

.dropdown-item:hover,
.dropdown-item.active {
    background-color: var(--sev-primary-btn);
    color: #fff;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--sev-primary) 0%, var(--sev-dark) 100%);
    color: #fff;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.5;
}

.hero-section .container {
    position: relative;
    z-index: 1;
}

.hero-section h1 {
    color: #fff;
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-section .lead {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.hero-tagline {
    font-style: italic;
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* Page Headers */
.page-header {
    background: linear-gradient(135deg, var(--sev-primary) 0%, var(--sev-dark) 100%);
    color: #fff;
    padding: 3rem 0;
    margin-bottom: 2rem;
}

.page-header h1 {
    color: #fff;
    margin-bottom: 0.5rem;
}

.page-header .lead {
    opacity: 0.9;
    margin-bottom: 0;
}

/* Breadcrumbs */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1.5rem;
}

.breadcrumb-item a {
    color: var(--sev-primary-text);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

/* Product Cards */
.product-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.product-card .card-img-top {
    height: 200px;
    object-fit: cover;
    background-color: var(--sev-light);
}

.product-card .card-body {
    padding: 1.5rem;
}

.product-card .card-title {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.product-card .card-text {
    color: var(--sev-muted);
    font-size: 0.95rem;
}

/* Buttons */
.btn-primary {
    background-color: var(--sev-primary-btn);
    border-color: var(--sev-primary-btn);
    padding: 0.6rem 1.5rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--sev-dark);
    border-color: var(--sev-dark);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--sev-secondary);
    border-color: var(--sev-secondary);
    padding: 0.6rem 1.5rem;
    font-weight: 500;
    border-radius: 6px;
}

.btn-secondary:hover {
    background-color: #a82824;
    border-color: #a82824;
}

.btn-outline-primary {
    color: var(--sev-primary-text);
    border-color: var(--sev-primary-text);
    padding: 0.6rem 1.5rem;
    font-weight: 500;
    border-radius: 6px;
}

.btn-outline-primary:hover {
    background-color: var(--sev-primary-btn);
    border-color: var(--sev-primary-btn);
}

/* Product Tables */
.table-product {
    font-size: 0.95rem;
}

.table-product thead {
    background-color: var(--sev-primary-btn);
    color: #fff;
}

.table-product thead th {
    font-weight: 600;
    padding: 0.875rem;
    border: none;
    white-space: nowrap;
}

.table-product tbody tr:hover {
    background-color: rgba(242, 104, 18, 0.08);
}

.table-product td {
    padding: 0.75rem 0.875rem;
    vertical-align: middle;
}

.table-product .edp-number {
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 600;
    color: var(--sev-primary-text);
}

.edp-catalog-link {
    color: inherit;
    text-decoration: underline dotted;
}
.edp-catalog-link:hover {
    color: #0d6efd;
    text-decoration: underline;
}

/* Section Styling */
.content-section {
    padding: 3rem 0;
}

.content-section:nth-child(even) {
    background-color: var(--sev-light);
}

.section-title {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--sev-primary);
    display: inline-block;
}

/* "Top" link floated beside each section heading (added by main.js) */
.to-top-link {
    float: right;
    margin: 0.35rem 0 0.5rem 0.75rem;
    padding: 0.2rem 0.65rem;
    min-height: 28px;
    border: 1px solid var(--sev-primary-btn);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--sev-primary-text);
    background-color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.to-top-link:hover,
.to-top-link:focus-visible {
    color: #fff;
    background-color: var(--sev-primary-btn);
}

/* Floating back-to-top button (added by main.js, shown after two screens of scroll) */
.to-top-fab {
    position: fixed;
    right: 16px;
    bottom: calc(88px + env(safe-area-inset-bottom)); /* clears the sticky call bar below 1200px */
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--sev-primary-btn);
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--sev-primary-text);
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.to-top-fab[hidden] {
    display: none;
}

.to-top-fab:hover,
.to-top-fab:focus-visible {
    color: #fff;
    background-color: var(--sev-primary-btn);
}

.to-top-fab:focus-visible {
    outline: 3px solid var(--sev-primary-text);
    outline-offset: 2px;
}

@media (min-width: 1200px) {
    .to-top-fab {
        bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

@media print {
    .to-top-fab {
        display: none !important;
    }
}

/* Feature Boxes */
.feature-box {
    text-align: center;
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.feature-box i {
    font-size: 3rem;
    color: var(--sev-primary);
    margin-bottom: 1rem;
}

.feature-box h4, .feature-box .h4 {
    margin-bottom: 0.75rem;
}

/* History/About Styling */
.history-timeline {
    position: relative;
    padding-left: 30px;
}

.history-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--sev-primary);
}

.timeline-item {
    position: relative;
    padding-bottom: 2rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -36px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--sev-primary);
}

.timeline-year {
    font-weight: 700;
    color: var(--sev-primary-text);
    font-size: 1.1rem;
}

/* Footer */
.site-footer {
    background-color: var(--sev-dark);
    color: rgba(255, 255, 255, 0.8);
    padding: 3rem 0 1rem;
}

.site-footer h5, .site-footer .h5 {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
    font-weight: 600;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--sev-orange-on-dark);
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer ul li {
    margin-bottom: 0.5rem;
}

.footer-tagline {
    font-style: italic;
    color: var(--sev-orange-on-dark);
    font-size: 1rem;
    margin-top: 1rem;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    margin-top: 2rem;
}

/* Contact Form */
.contact-form .form-control {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.contact-form .form-control:focus {
    border-color: var(--sev-primary);
    box-shadow: 0 0 0 0.2rem rgba(242, 104, 18, 0.15);
}

/* Info Cards */
.info-card {
    background: var(--sev-light);
    border-left: 4px solid var(--sev-primary);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 0 8px 8px 0;
}

.info-card h5, .info-card .h5 {
    color: var(--sev-primary-text);
    margin-bottom: 0.5rem;
}

/* Specification Highlight */
.spec-highlight {
    background: linear-gradient(135deg, var(--sev-primary) 0%, var(--sev-dark) 100%);
    color: #fff;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.spec-highlight h3 {
    color: #fff;
    margin-bottom: 1rem;
}

.spec-highlight .stat {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
}

.spec-highlight .stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Utility Classes */
.text-primary {
    color: var(--sev-primary-text) !important;
}

.bg-primary {
    background-color: var(--sev-primary) !important;
}

.text-accent {
    color: var(--sev-accent) !important;
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .hero-section {
        padding: 3rem 0;
    }

    .hero-section h1 {
        font-size: 2rem;
    }
}

/* Collapsed menu (navbar-expand-xl collapses below 1200px) */
@media (max-width: 1199.98px) {
    .navbar-nav .dropdown-menu {
        border: none;
        box-shadow: none;
        padding-left: 1rem;
        background-color: #fff;
    }

    .navbar-collapse {
        background-color: #fff;
        padding: 1rem;
        border-radius: 8px;
        margin-top: 0.5rem;
        max-height: 80vh;
        overflow-y: auto;
    }
}

@media (max-width: 767.98px) {
    .hero-section h1 {
        font-size: 1.75rem;
    }

    .page-header {
        padding: 2rem 0;
    }

    .content-section {
        padding: 2rem 0;
    }

    .feature-box {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    .table-product {
        font-size: 0.95rem;
    }

    .table-product td,
    .table-product th {
        padding: 0.5rem;
    }

    /* Phone tables: keep the first column (the EDP once main.js moves it there)
       pinned while the rest of the row scrolls sideways. Bootstrap paints an
       opaque background on every cell, so the pinned cell hides what slides under it. */
    .table-product.table-phone th:first-child,
    .table-product.table-phone td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        box-shadow: 1px 0 0 var(--bs-border-color, #dee2e6);
    }

    /* The pinned EDP cell keeps its "+ Quote" button on the same line */
    .table-product.table-phone td.edp-number:first-child {
        white-space: nowrap;
    }

    .table-scroll-hint {
        margin: 0 0 0.35rem;
        font-size: 0.8rem;
        color: #495057;
    }
}

/* The swipe hint only applies to phone layouts (added by main.js). */
@media (min-width: 768px) {
    .table-scroll-hint {
        display: none;
    }
}

/* Quote List (js/quote-list.js): "+ Quote" pill on each EDP cell. It sits
   beside the EDP and drops below it when a table with several EDP columns
   needs the room. */
.quote-add {
    display: inline-block;
    min-width: 4.6rem;
    min-height: 26px;
    margin: 0.1rem 0 0.1rem 0.2rem;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--sev-primary-btn);
    border-radius: 999px;
    font-family: var(--bs-font-sans-serif, system-ui, sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: var(--sev-primary-text);
    background-color: #fff;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
}

.quote-add:hover {
    background-color: var(--sev-accent);
}

.quote-add[aria-pressed="true"] {
    color: #fff;
    background-color: var(--sev-primary-btn);
}

.quote-add[aria-pressed="true"]:hover {
    background-color: var(--sev-orange-dark);
}

.quote-add[aria-disabled="true"] {
    color: #495057;
    border-color: #adb5bd;
    background-color: #fff;
    cursor: not-allowed;
}

.quote-add:focus-visible,
.quote-list-toggle:focus-visible,
#quoteListPanel .quote-remove:focus-visible {
    outline: 2px solid var(--sev-secondary);
    outline-offset: 2px;
    box-shadow: none;
}

@media (max-width: 767.98px) {
    .quote-add {
        min-width: 4.3rem;
        margin-left: 0.1rem;
        padding: 0.1rem 0.45rem;
    }
}

/* Header "Quote List" button, shown once the list has an item */
.navbar-nav .quote-list-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--sev-primary-btn);
    border-radius: 999px;
    background-color: #fff;
}

.navbar-nav .quote-list-toggle:hover {
    text-decoration: none;
    background-color: var(--sev-accent);
}

.quote-list-toggle .badge {
    font-size: 0.75rem;
    color: #fff;
    background-color: var(--sev-primary-btn);
}

@media (min-width: 1200px) {
    .navbar-nav .quote-list-toggle {
        margin-left: 0.15rem;
        padding: 0.3rem 0.55rem !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-nav .quote-list-toggle {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.9375rem;
    }

    .quote-list-toggle .bi {
        display: none;
    }
}

@media (max-width: 1199.98px) {
    .navbar-nav .quote-list-nav {
        margin: 0.25rem 0;
    }
}

/* Quote List slide-out panel */
#quoteListPanel {
    --bs-offcanvas-width: 440px;
    max-width: 100%;
}

#quoteListPanel .offcanvas-header {
    border-bottom: 3px solid var(--sev-primary);
}

#quoteListPanel .quote-list-summary {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #495057;
}

#quoteListPanel .quote-list-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

#quoteListPanel .quote-list-info {
    min-width: 0;
    flex: 1 1 auto;
}

#quoteListPanel .quote-list-edp {
    font-weight: 700;
    color: var(--sev-primary-text);
}

#quoteListPanel .quote-list-name {
    font-weight: 600;
}

#quoteListPanel .quote-list-name a {
    color: var(--sev-dark);
}

#quoteListPanel .quote-list-desc {
    font-size: 0.85rem;
    color: #495057;
    overflow-wrap: anywhere;
}

#quoteListPanel .quote-list-controls {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

#quoteListPanel .quote-qty-label {
    font-size: 0.8rem;
    color: #495057;
}

#quoteListPanel .quote-qty {
    width: 6rem;
    min-height: 32px;
    text-align: right;
}

#quoteListPanel .quote-remove {
    min-height: 28px;
    padding: 0.15rem 0.25rem;
    color: var(--sev-primary-text);
}

#quoteListPanel .quote-list-notes {
    margin-top: 1rem;
}

#quoteListPanel .quote-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* EDP Search Styles */
.edp-search-wrapper {
    position: relative;
}

.edp-search-wrapper .form-control {
    border-radius: 20px;
    padding-left: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 1rem;
}

#edpSearchResults {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 400px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    margin-top: 0.25rem;
    display: none;
}

#edpSearchResults .list-group-item {
    border-left: none;
    border-right: none;
    padding: 0.75rem 1rem;
}

#edpSearchResults .list-group-item:first-child {
    border-top: none;
}

#edpSearchResults .list-group-item:hover {
    background-color: rgba(242, 104, 18, 0.1);
}

#edpSearchResults .list-group-item strong {
    color: var(--sev-primary-text);
}

/* Highlight row animation */
.highlight-row {
    animation: highlightPulse 0.5s ease-out;
    background-color: rgba(242, 104, 18, 0.2) !important;
}

@keyframes highlightPulse {
    0% { background-color: rgba(242, 104, 18, 0.5); }
    100% { background-color: rgba(242, 104, 18, 0.2); }
}

/* Popular Products Grid */
.popular-products-grid {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem;
}

.product-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--sev-dark);
    transition: all 0.2s ease;
    background: #fafafa;
    border: 1px solid #eee;
    height: 100%;
}

.product-grid-item:hover {
    background: rgba(242, 104, 18, 0.08);
    border-color: var(--sev-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(242, 104, 18, 0.15);
}

.product-grid-item img {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 0.75rem;
}

.product-grid-item span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sev-dark);
    line-height: 1.2;
}

.product-grid-item:hover span {
    color: var(--sev-primary-text);
}

.product-grid-more {
    background: var(--sev-primary-btn);
    border-color: var(--sev-primary-btn);
    justify-content: center;
}

.product-grid-more .more-icon {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.product-grid-more span {
    color: #fff;
    font-size: 0.9rem;
}

.product-grid-more:hover {
    background: var(--sev-orange-dark);
    border-color: var(--sev-orange-dark);
}

.product-grid-more:hover span {
    color: #fff;
}

@media (max-width: 767.98px) {
    .product-grid-item img {
        max-height: 60px;
    }

    .product-grid-item span {
        font-size: 0.75rem;
    }

    .popular-products-grid {
        padding: 1rem;
    }
}

/* Print Styles */
@media print {
    .navbar,
    .site-footer,
    .btn {
        display: none !important;
    }

    .page-header {
        background: none;
        color: var(--sev-text);
        padding: 1rem 0;
    }

    .page-header h1 {
        color: var(--sev-text);
    }
}

/* Skip-to-content link (visible only when focused via keyboard) */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    padding: 0.5rem 1rem;
    background-color: var(--sev-primary-btn, #c4520a);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

/* Grid thumbnails carry width/height attributes for layout reservation;
   let CSS max-height/max-width decide the rendered size. */
.product-grid-item img {
    width: auto;
    height: auto;
}

/* ---- September 2026: conversion paths, tracking, mobile call bar ---- */

/* Images carry width/height attributes for layout reservation; keep aspect ratio when CSS scales them. */
img {
    max-width: 100%;
    height: auto;
}

/* Thumbnails sized by an inline max-height (news cards, banners) must scale width to match. */
img[style*="max-height"] {
    width: auto;
    max-width: 100%;
}

/* Phone number in the desktop navbar */
.nav-phone {
    white-space: nowrap;
    font-weight: 600;
}

.nav-phone i {
    color: var(--sev-primary);
}

/* Sticky call / quote bar on phones and tablets */
.mobile-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 3px solid var(--sev-primary);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

.mobile-cta-bar .btn {
    flex: 1 1 0;
    font-weight: 600;
    white-space: nowrap;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.mobile-cta-bar .btn-outline-primary {
    background: #fff;
}

/* Room for the sticky call bar, shown below 1200px (d-xl-none) */
@media (max-width: 1199.98px) {
    body {
        padding-bottom: 72px;
    }
}

@media print {
    .mobile-cta-bar,
    .trust-strip {
        display: none !important;
    }
}

/* Home hero statistics (previously unstyled) */
.hero-stats .stat {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.hero-stats .stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
}

.hero-stats-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.9rem;
    opacity: 0.95;
    margin-top: 1.5rem;
}

.hero-stats-inline strong {
    font-size: 1.1rem;
    margin-right: 0.25rem;
}

/* Closing call-to-action sections (class was referenced but never defined) */
.cta-section {
    background: var(--sev-light);
    padding: 3rem 0;
    border-top: 3px solid var(--sev-primary);
}

/* Trust strip above the footer */
.trust-strip {
    background: var(--sev-accent);
    border-top: 1px solid rgba(242, 104, 18, 0.25);
    border-bottom: 1px solid rgba(242, 104, 18, 0.25);
    font-size: 0.9rem;
    color: var(--sev-dark);
}

.trust-strip ul {
    list-style: none;
    margin: 0;
    padding: 0.6rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.75rem;
    justify-content: center;
}

.trust-strip li i {
    color: var(--sev-primary-text);
    margin-right: 0.35rem;
}

/* Quote / where-to-buy action rows under product table sections */
.section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0.75rem 0 1.5rem;
}

.section-actions .btn {
    font-weight: 600;
}

/* "As featured in" publication strip */
.featured-in {
    font-size: 0.85rem;
    color: var(--sev-muted);
    text-align: center;
}

.featured-in span {
    display: inline-block;
    margin: 0.15rem 0.75rem;
    font-weight: 600;
    color: var(--sev-dark);
}

/* Contact form details */
.contact-form .form-check-inline {
    margin-right: 1.5rem;
}

.contact-form legend {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

/* Contrast fixes for Bootstrap defaults (WCAG AA) */
a {
    color: #0a58ca;
}

.btn-outline-secondary {
    color: #5c636a;
    border-color: #5c636a;
}

.alert .btn-outline-primary,
.bg-light .btn-outline-primary {
    background-color: #fff;
}

.table a {
    color: #0a4ea8;
}

.bg-primary {
    background-color: var(--sev-primary-btn) !important;
}

.card-header.bg-primary h1, .card-header.bg-primary h2, .card-header.bg-primary h3,
.card-header.bg-primary h4, .card-header.bg-primary h5, .card-header.bg-primary h6,
.card-header.bg-secondary h1, .card-header.bg-secondary h2, .card-header.bg-secondary h3,
.card-header.bg-secondary h4, .card-header.bg-secondary h5, .card-header.bg-secondary h6,
.card-header.bg-dark h1, .card-header.bg-dark h2, .card-header.bg-dark h3,
.card-header.bg-dark h4, .card-header.bg-dark h5, .card-header.bg-dark h6 {
    color: #fff;
}

/* Distributor list */
.distributor-list .card {
    height: 100%;
}

.distributor-list .card-title a {
    text-decoration: none;
}

.distributor-region {
    font-size: 0.85rem;
    color: var(--sev-muted);
}