/**
 * Main CSS - Winter Storm Systems
 * Public site styling based on WSS branding
 */

/* ==================== CSS VARIABLES ==================== */
:root {
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --accent-color: #1abc9c;
    --success-color: #2ecc71;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;

    --bg-color: #f8f9fa;
    --text-primary: #333;
    --text-secondary: #666;
    --text-muted: #999;
    --text-light: #fff;

    --border-color: #e0e0e0;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    --transition: all 0.3s ease;
}

/* ==================== RESET & BASE ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-color);
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: var(--transition);
}

a:hover {
    color: #2980b9;
}

ul {
    list-style: none;
}

/* ==================== NAVBAR ==================== */
.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.navbar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    /* Three zones: brand left, links centred in the bar, buttons right. The
       outer columns are equal, so the links sit in the true centre rather than
       drifting with the width of the brand or the buttons. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    height: 70px;
}

.navbar-menu {
    justify-self: center;
}

.navbar-actions {
    justify-self: end;
}

.navbar-brand {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-light);
    /* Never break the company name across two lines. */
    white-space: nowrap;
}

.navbar-collapse {
    /* No box of its own on desktop: the links and the account buttons stay
       direct flex children of .navbar-container, exactly as before. On a
       phone (below) this becomes the drawer that holds both. */
    display: contents;
}

.navbar-menu {
    display: flex;
    gap: 4px;
    align-items: center;
}

.navbar-menu a {
    color: var(--text-light);
    font-size: 15px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 5px;
    transition: var(--transition);
    white-space: nowrap;
}

.navbar-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
}

.navbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.navbar-actions .btn {
    /* "Admin Panel" wrapped to "Admin / Panel" on a laptop, which pushed the
       bar out of shape. The label stays on one line; the LINKS give way
       instead (see the laptop breakpoint below), because they have padding to
       spare and the buttons do not. */
    white-space: nowrap;
}

/* Mobile hamburger toggle (hidden on desktop) */
.navbar-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 24px;
    cursor: pointer;
    padding: 6px 10px;
    line-height: 1;
}

/* Services dropdown */
.navbar-dropdown {
    position: relative;
}

.navbar-dropdown > .navbar-dropdown-toggle {
    color: var(--text-light);
    font-size: 15px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 5px;
    transition: var(--transition);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.navbar-dropdown > .navbar-dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.navbar-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    z-index: 1001;
}

.navbar-dropdown:hover .navbar-dropdown-menu {
    display: block;
}

.navbar-dropdown-menu a {
    display: block;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 18px;
    white-space: nowrap;
}

.navbar-dropdown-menu a:hover {
    background: #f5f6f8;
    color: var(--primary-color);
}

.btn {
    display: inline-block;
    text-align: center;
    padding: 10px 24px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 14px;
    line-height: 1.4;
}

/* Default button styles target light backgrounds (content pages) */
.btn-primary {
    background: var(--primary-color);
    color: var(--text-light);
}

.btn-primary:hover {
    background: #2980b9;
    /* Must be explicit: buttons are <a> elements, so the global `a:hover`
       (which is the same #2980b9) would otherwise tint the label to exactly the
       hover background and make the text disappear. */
    color: var(--text-light);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: var(--text-light);
}

.btn-secondary {
    background: #fff;
    color: var(--secondary-color);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* On dark sections (navbar, hero) buttons stay light/white for contrast */
.navbar .btn-primary,
.hero-section .btn-primary {
    background: var(--text-light);
    color: var(--secondary-color);
}

.navbar .btn-primary:hover,
.hero-section .btn-primary:hover {
    background: #eef1f4;
    /* Same reason as above - keep the dark label instead of inheriting a:hover. */
    color: var(--secondary-color);
}

.navbar .btn-outline,
.hero-section .btn-outline {
    color: var(--text-light);
    border-color: var(--text-light);
}

.navbar .btn-outline:hover,
.hero-section .btn-outline:hover {
    background: var(--text-light);
    color: var(--secondary-color);
}

/* Content cards (products, public pages) */
.card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card-body {
    padding: 25px;
}

/* ==================== HERO SECTION ==================== */
.hero-section {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    color: var(--text-light);
    padding: 100px 20px 80px;
    text-align: center;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-content p {
    font-size: 20px;
    margin-bottom: 40px;
    opacity: 0.95;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-large {
    padding: 14px 32px;
    font-size: 16px;
}

/* ==================== FEATURES SECTION ==================== */
.features-section {
    padding: 80px 20px;
    background: var(--text-light);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.section-header p {
    font-size: 18px;
    color: var(--text-secondary);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background: var(--text-light);
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--text-light);
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 12px;
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ==================== STATS SECTION ==================== */
.stats-section {
    background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
    color: var(--text-light);
    padding: 60px 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    text-align: center;
}

.stat-item h3 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
}

.stat-item p {
    font-size: 18px;
    opacity: 0.9;
}

/* ==================== FOOTER ==================== */
.footer {
    background: var(--secondary-color);
    color: var(--text-light);
    padding: 60px 20px 20px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

.footer-section ul li {
    margin-bottom: 12px;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.8);
    transition: var(--transition);
}

.footer-section a:hover {
    color: var(--text-light);
    padding-left: 5px;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* ==================== RESPONSIVE ==================== */

/* Collapse the nav into a hamburger menu on smaller screens */
/* Laptops: everything still fits on one row, but only once the links give up
   some padding. Without this the brand and the buttons wrapped instead. */
@media (max-width: 1199px) and (min-width: 993px) {
    .navbar-container {
        gap: 10px;
    }

    .navbar-menu {
        gap: 0;
    }

    .navbar-menu a {
        padding: 8px 9px;
        font-size: 14px;
    }

    .navbar-actions {
        gap: 8px;
    }

    .navbar-actions .btn {
        padding: 9px 16px;
        font-size: 14px;
    }

    .navbar-brand {
        font-size: 21px;
    }
}

@media (max-width: 992px) {
    .navbar-toggle {
        display: block;
        order: 3;
    }

    /* The drawer: links and account buttons, revealed by the hamburger. */
    .navbar-collapse {
        display: none;
        order: 4;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--secondary-color);
        padding: 8px 16px 16px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }

    .navbar-collapse.active {
        display: flex;
    }

    .navbar-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: static;
        background: none;
        padding: 0;
        box-shadow: none;
    }

    /* Account buttons move out of the bar and into the drawer, full width,
       instead of wrapping onto their own row above the hamburger. */
    .navbar-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 12px 0 0;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .navbar-actions .btn {
        width: 100%;
        text-align: center;
        white-space: nowrap;
    }

    .navbar-menu a {
        padding: 14px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .navbar-menu > a:last-child {
        border-bottom: none;
    }

    .navbar-container {
        display: flex;
        flex-wrap: nowrap;
        position: relative;
    }

    /* The grid placement above means nothing once this is a flex drawer. */
    .navbar-menu,
    .navbar-actions {
        justify-self: auto;
    }

    .navbar-brand {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 20px;
    }

    .navbar-toggle {
        margin-left: auto;
    }

    /* Dropdown expands inline within the mobile menu (no hover) */
    .navbar-dropdown {
        width: 100%;
    }

    .navbar-dropdown > .navbar-dropdown-toggle {
        display: flex;
        justify-content: space-between;
        padding: 14px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .navbar-dropdown-menu {
        display: block;
        position: static;
        background: rgba(0, 0, 0, 0.15);
        box-shadow: none;
        border-radius: 0;
        min-width: 0;
        padding: 0;
    }

    .navbar-dropdown-menu a {
        color: var(--text-light);
        padding: 12px 12px 12px 28px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .navbar-dropdown-menu a:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-light);
    }
}

@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 36px;
    }

    .hero-content p {
        font-size: 18px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .section-header h2 {
        font-size: 28px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .stat-item h3 {
        font-size: 36px;
    }
}

/* ==================== PRODUCT CATALOG ==================== */
/* Shared by the /products hub and the per-category pages. */
.cat-wrap { max-width: 1160px; margin: 0 auto; padding: 48px 20px 72px; }

.cat-head { text-align: center; margin-bottom: 44px; }
.cat-head h1 { font-size: 40px; line-height: 1.15; margin-bottom: 14px; color: var(--secondary-color); }
.cat-head p { font-size: 18px; color: var(--text-secondary); max-width: 620px; margin: 0 auto; }
.cat-eyebrow {
    display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--primary-color); margin-bottom: 12px;
}

/* Category nav shown on every per-category page */
.cat-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.cat-nav a {
    padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
    border: 1px solid var(--border-color); background: #fff; color: var(--text-secondary);
    text-decoration: none; transition: var(--transition);
}
.cat-nav a:hover { border-color: var(--primary-color); color: var(--primary-color); }
.cat-nav a.active { background: var(--primary-color); border-color: var(--primary-color); color: var(--text-light); }

/* Hub: one tile per service type. Tiles are width-capped and centred so a
   single category doesn't stretch into one giant full-width card. */
.cat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
    gap: 22px; justify-content: center;
}
.cat-tile {
    display: flex; flex-direction: column; padding: 26px 24px; background: #fff;
    border: 1px solid var(--border-color); border-radius: 12px; text-decoration: none;
    transition: var(--transition);
}
.cat-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, .1); border-color: var(--primary-color); }
.cat-tile-icon {
    width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
    font-size: 19px; color: var(--primary-color); background: rgba(52, 152, 219, .12); margin-bottom: 16px;
}
.cat-tile h2 { font-size: 19px; margin-bottom: 8px; color: var(--secondary-color); }
.cat-tile p { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin-bottom: 18px; flex: 1; }
.cat-tile-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cat-tile-price { font-size: 14px; color: var(--text-secondary); }
.cat-tile-price b { font-size: 21px; font-weight: 700; color: var(--secondary-color); }
.cat-tile-count { font-size: 13px; color: var(--text-muted); }
.cat-tile-cta {
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color);
    font-size: 14px; font-weight: 600; color: var(--primary-color);
}

/* Category page: one card per product (same width cap as the hub tiles) */
.prod-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
    gap: 22px; justify-content: center;
}
.prod-card {
    display: flex; flex-direction: column; padding: 26px 24px; background: #fff;
    border: 1px solid var(--border-color); border-radius: 12px; transition: var(--transition);
}
.prod-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, .1); }
.prod-card h3 { font-size: 19px; margin-bottom: 8px; color: var(--secondary-color); }
.prod-card .prod-desc { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin-bottom: 18px; flex: 1; }
.prod-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.prod-price b { font-size: 28px; font-weight: 700; color: var(--secondary-color); line-height: 1; }
.prod-price span { font-size: 15px; color: var(--text-secondary); }
.prod-setup { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; }
.prod-stock {
    background: #fff3cd; border: 1px solid #ffeeba; color: #856404;
    padding: 8px 12px; border-radius: 6px; margin-bottom: 16px; font-size: 14px;
}
.prod-card .btn { width: 100%; }

.cat-empty { padding: 80px 20px; text-align: center; }
.cat-empty i { font-size: 60px; color: var(--border-color); margin-bottom: 20px; }
.cat-empty h3 { font-size: 22px; margin-bottom: 10px; color: var(--secondary-color); }
.cat-empty p { color: var(--text-secondary); }

@media (max-width: 600px) {
    .cat-head h1 { font-size: 30px; }
    .cat-wrap { padding: 32px 16px 56px; }
}

/* ==================== UTILITY CLASSES ==================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mt-40 { margin-top: 40px; }
.mb-40 { margin-bottom: 40px; }

.hidden { display: none; }

/* Product feature lists — a description is one feature per line, so it reads
   as a list rather than a run-on sentence. */
.prod-card .prod-features {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.prod-card .prod-features li {
    position: relative;
    padding: 3px 0 3px 22px;
}

.prod-card .prod-features li::before {
    content: "\f00c";                 /* Font Awesome check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 4px;
    font-size: 11px;
    color: var(--primary-color);
}

.prod-card .prod-features li.prod-features-more::before {
    content: "\2026";                 /* … for the "+N more" row */
    font-family: inherit;
    font-weight: 400;
}

.prod-card .prod-features-more {
    font-style: italic;
    opacity: 0.75;
}

.pd-features,
.co-product-features {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    line-height: 1.6;
}

.pd-features li,
.co-product-features li {
    position: relative;
    padding: 4px 0 4px 24px;
}

.pd-features li::before,
.co-product-features li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 6px;
    font-size: 12px;
    color: var(--primary-color);
}