/* ER Design System — Components: buttons, cards, panels, badges, mega-menu */

/* ---------- Buttons ---------- */
.er-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--er-space-2);
    font-family: var(--er-font-body);
    font-weight: 600;
    font-size: var(--er-text-sm);
    letter-spacing: 0.02em;
    padding: var(--er-space-3) var(--er-space-6);
    border-radius: var(--er-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--er-motion-fast) var(--er-ease-out),
                box-shadow var(--er-motion-fast) var(--er-ease-out),
                background var(--er-motion-fast) var(--er-ease-standard),
                border-color var(--er-motion-fast) var(--er-ease-standard);
    min-height: 44px;
}

.er-btn--primary {
    background: var(--er-accent);
    color: var(--er-carbon-900);
}

.er-btn--primary:hover {
    background: var(--er-accent-strong);
    box-shadow: var(--er-shadow-glow);
    transform: translateY(-1px);
}

.er-btn--secondary {
    background: transparent;
    border-color: var(--er-border-strong);
    color: var(--er-text);
}

.er-btn--secondary:hover {
    border-color: var(--er-accent-strong);
    color: var(--er-accent-strong);
}

.er-btn--ghost {
    background: transparent;
    color: var(--er-text-dim);
    padding-inline: var(--er-space-3);
}

.er-btn--ghost:hover {
    color: var(--er-text);
}

.er-btn--lg {
    padding: var(--er-space-4) var(--er-space-7);
    font-size: var(--er-text-base);
}

/* ---------- Cards ---------- */
.er-card {
    background: var(--er-bg-raised);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-md);
    padding: var(--er-space-6);
    transition: transform var(--er-motion-base) var(--er-ease-out),
                border-color var(--er-motion-base) var(--er-ease-standard),
                box-shadow var(--er-motion-base) var(--er-ease-out);
}

.er-card--interactive:hover {
    transform: translateY(-4px);
    border-color: var(--er-border-strong);
    box-shadow: var(--er-shadow-md);
}

/* ---------- Metal / glass panel ---------- */
.er-panel-metal {
    background: var(--er-gradient-panel);
    border: 1px solid var(--er-border-strong);
    border-radius: var(--er-radius-lg);
    position: relative;
    overflow: hidden;
}

.er-panel-metal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%);
    pointer-events: none;
}

.er-panel-glass {
    background: rgba(23, 29, 32, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-lg);
}

/* ---------- Divider ---------- */
.er-divider {
    height: 1px;
    background: var(--er-gradient-metal-edge);
    opacity: 0.4;
    border: 0;
    margin-block: var(--er-space-7);
}

/* ---------- Badges ---------- */
.er-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--er-space-1);
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--er-space-1) var(--er-space-3);
    border-radius: var(--er-radius-full);
    border: 1px solid var(--er-border-strong);
    color: var(--er-text-dim);
}

.er-badge--accent {
    color: var(--er-carbon-900);
    background: var(--er-accent);
    border-color: transparent;
}

.er-badge--outline-accent {
    color: var(--er-accent-strong);
    border-color: var(--er-accent);
    background: transparent;
}

.er-badge--muted {
    color: var(--er-text-faint);
}

.er-badge--signature {
    color: var(--er-metallic-100);
    background: linear-gradient(120deg, var(--er-emerald-700), var(--er-carbon-700));
    border-color: var(--er-emerald-400);
}

/* ---------- Capability indicators ---------- */
.er-capability {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--er-space-4);
    padding-block: var(--er-space-2);
    border-bottom: 1px solid var(--er-border);
}

.er-capability__label {
    font-size: var(--er-text-sm);
    color: var(--er-text-dim);
}

.er-capability__bar {
    flex: 1;
    max-width: 180px;
    height: 6px;
    border-radius: var(--er-radius-full);
    background: var(--er-graphite-400);
    overflow: hidden;
}

.er-capability__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--er-emerald-600), var(--er-emerald-400));
    border-radius: inherit;
    width: 0%;
    transition: width var(--er-motion-cinematic) var(--er-ease-out);
}

.er-capability__bar-fill.is-revealed {
    width: var(--er-capability-value, 0%);
}

.er-capability__rating {
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xs);
    color: var(--er-accent-strong);
    min-width: 5.5rem;
    text-align: right;
}

/* ---------- Spec table ---------- */
.er-spec-table {
    width: 100%;
    border-collapse: collapse;
}

.er-spec-table th,
.er-spec-table td {
    text-align: left;
    padding: var(--er-space-3) var(--er-space-4);
    border-bottom: 1px solid var(--er-border);
    font-size: var(--er-text-sm);
}

.er-spec-table th {
    color: var(--er-text-faint);
    font-weight: 500;
    width: 220px;
}

.er-spec-table td {
    color: var(--er-text);
    font-family: var(--er-font-mono);
}

/* ---------- ASH-native classification ---------- */
.er-ash-native {
    display: inline-flex;
    align-items: center;
    gap: var(--er-space-2);
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xs);
    padding: var(--er-space-2) var(--er-space-4);
    border-radius: var(--er-radius-sm);
}

.er-ash-native--yes {
    background: rgba(22, 135, 85, 0.16);
    color: var(--er-accent-strong);
    border: 1px solid var(--er-emerald-500);
}

.er-ash-native--no {
    background: rgba(200, 208, 213, 0.06);
    /* --er-text-faint measured ~3.7:1 against the page background — under
     * WCAG AA's 4.5:1 for normal-size text (Build 005 Gate 13 contrast
     * check). --er-text-dim measures ~11:1, still reads as muted/factual
     * rather than a loud warning, per the original "not negative/ugly"
     * intent this classification was designed around. */
    color: var(--er-text-dim);
    border: 1px solid var(--er-border);
}

/* ---------- Dialogs / drawers ---------- */
.er-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 100vw);
    background: var(--er-bg-raised);
    border-left: 1px solid var(--er-border-strong);
    box-shadow: var(--er-shadow-lg);
    transform: translateX(100%);
    transition: transform var(--er-motion-base) var(--er-ease-out);
    z-index: 900;
}

.er-drawer.is-open {
    transform: translateX(0);
}

.er-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 11, 13, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--er-motion-base) var(--er-ease-standard);
    z-index: 890;
}

.er-dialog-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- Header + mega-menu ----------
 * The live site's header is a solid opaque black bar sitting above the hero
 * image, not a transparent-over-hero effect — visual_recovery_004r.md.
 * Fidelity requires matching that, not the transparent treatment Build
 * 002/003 used. */
.er-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 800;
    height: var(--er-header-height);
    display: flex;
    align-items: center;
    background: var(--er-carbon-900);
    border-bottom: 1px solid var(--er-border);
}

.er-header__inner {
    width: 100%;
    max-width: var(--er-max-width);
    margin-inline: auto;
    padding-inline: var(--er-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--er-space-6);
}

.er-header__brand {
    display: flex;
    align-items: center;
    gap: var(--er-space-3);
    color: var(--er-text);
    min-width: 0; /* allow the wordmark to truncate instead of wrapping the header */
}

/* Two-class selector (.er-header .er-header__logo, specificity 0,2,0) beats
 * WooCommerce's own `.woocommerce img { width: 100% }` (specificity 0,1,1)
 * on shop/cart/checkout/account pages — a single-class rule loses that fight
 * regardless of source order. This is the fix for the giant-logo defect
 * documented in visual_recovery_004r.md.
 *
 * Sized to nearly fill the header, matching the live site's actual
 * measurement (a 99px logo in a 99px header) rather than sitting small
 * inside it — an earlier pass at 44px was still visibly undersized. */
.er-header .er-header__logo {
    height: 84px;
    width: 84px;
    object-fit: contain;
    flex-shrink: 0;
}

.er-header__wordmark {
    font-family: var(--er-font-display);
    font-size: 15px; /* matches the live site's measured wordmark size — deliberately small next to the now much larger logo */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--er-accent-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.er-header__nav {
    display: flex;
    align-items: center;
    gap: var(--er-space-5);
}

.er-nav-item {
    position: relative;
}

.er-nav-item__trigger {
    background: none;
    border: 0;
    color: var(--er-text);
    font-size: var(--er-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--er-space-2) 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--er-space-1);
    transition: color var(--er-motion-fast) var(--er-ease-standard);
}

/* Kadence's own button styling fills hover/expanded state with its default
 * navy-blue background (rgb(33,83,135)) — overridden to transparent below
 * so hover/active is a pure text glow, no fill or button-like highlight. */
.er-nav-item__trigger:hover,
.er-nav-item__trigger[aria-expanded="true"] {
    background: transparent;
    color: var(--er-signal-green);
    text-shadow: 0 0 10px var(--er-signal-green-glow);
}

.er-mega-menu {
    position: absolute;
    top: calc(100% + var(--er-space-4));
    left: 50%;
    transform: translate(-50%, -8px);
    width: min(880px, 90vw);
    background: var(--er-bg-raised);
    border: 1px solid var(--er-border-strong);
    border-radius: var(--er-radius-lg);
    box-shadow: var(--er-shadow-lg);
    padding: var(--er-space-6);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--er-space-6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--er-motion-base) var(--er-ease-out),
                transform var(--er-motion-base) var(--er-ease-out),
                visibility 0s linear var(--er-motion-base);
}

.er-mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.er-mega-menu__group-title {
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--er-text-faint);
    margin-bottom: var(--er-space-3);
}

.er-mega-menu__group ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--er-space-2);
}

.er-mega-menu__group a {
    color: var(--er-text);
    font-size: var(--er-text-sm);
}

.er-mega-menu__group a:hover {
    color: var(--er-accent-strong);
}

.er-mega-menu__utility {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--er-space-4);
    padding-top: var(--er-space-4);
    border-top: 1px solid var(--er-border);
}

.er-header__actions {
    display: flex;
    align-items: center;
    gap: var(--er-space-4);
}

.er-header__icon-btn {
    background: none;
    border: 0;
    color: var(--er-text-dim);
    cursor: pointer;
    padding: var(--er-space-2);
    display: inline-flex;
    transition: color var(--er-motion-fast) var(--er-ease-standard);
}

.er-header__icon-btn:hover {
    color: var(--er-text);
}

/* Search panel (Build 008 Gate 9) reuses .er-mega-menu's open/close
   mechanics (nav.js's generic .er-nav-item__trigger handling) but isn't a
   multi-column grid, so its own layout overrides the grid/centering. */
.er-header-search-panel {
    display: flex;
    grid-template-columns: none;
    left: auto;
    right: 0;
    transform: translateY(-8px);
    width: min(420px, 90vw);
    padding: var(--er-space-4);
}

.er-header-search-panel.is-open {
    transform: translateY(0);
}

/* Build 008 Gate 21 finding: right:0 positions the panel relative to its
   ~36px-wide icon button, not the viewport — at narrow widths the icon
   sits mid-header (past the collapsed nav items) and a 90vw-wide panel
   anchored to its right edge ran off the left side of the screen entirely
   (confirmed via getBoundingClientRect: left ≈ -139px at 390px viewport).
   Same 1024px breakpoint the mega-menu itself collapses at, just below —
   anchor to the viewport edges instead of the icon once that happens. */
@media (max-width: 1024px) {
    .er-header-search-panel {
        position: fixed;
        top: var(--er-header-height);
        left: var(--er-space-4);
        right: var(--er-space-4);
        width: auto;
    }
}

.er-header-search-panel form {
    display: flex;
    gap: var(--er-space-3);
    width: 100%;
}

.er-header-search-panel input[type="search"] {
    flex: 1;
    background: var(--er-bg-panel);
    border: 1px solid var(--er-border-strong);
    border-radius: var(--er-radius-sm);
    padding: var(--er-space-3) var(--er-space-4);
    color: var(--er-text);
    font-size: var(--er-text-sm);
}

.er-header-search-panel input[type="search"]:focus-visible {
    outline: 2px solid var(--er-accent-strong);
    outline-offset: 2px;
}

.er-header__mobile-toggle {
    display: none;
}

@media (max-width: 1024px) {
    .er-header__nav {
        display: none;
    }
    .er-header__mobile-toggle {
        display: inline-flex;
    }
}

/* ---------- Hero: dense composite + signal headline ----------
 * Recovery from Build 002/003's near-empty hero (visual_recovery_004r.md).
 * We don't have rights to the live site's specific photography, so this is
 * an original CSS/SVG composition matching its density and color, not a
 * copy of the photo. */
.er-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse 120% 90% at 50% -10%, var(--er-graphite-400) 0%, var(--er-carbon-800) 55%, var(--er-carbon-900) 100%);
}

.er-hero__composite {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.er-hero__rig {
    position: absolute;
    border-radius: var(--er-radius-md);
    background: linear-gradient(155deg, var(--er-graphite-400) 0%, var(--er-graphite-600) 55%, var(--er-carbon-700) 100%);
    border: 1px solid var(--er-border-strong);
    box-shadow: var(--er-shadow-lg);
}

.er-hero__rig::before {
    content: "";
    position: absolute;
    inset: 8% 8% auto 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--er-rig-glow, var(--er-signal-green)), transparent);
    filter: blur(1px);
}

.er-hero__rig-fan {
    position: absolute;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--er-rig-glow, var(--er-signal-green)) 55%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--er-rig-glow, var(--er-signal-green)) 45%, transparent);
}

.er-hero__headline {
    /* "The How Matters..." must read as one line, matching the live site —
     * the previous 16ch max-width forced a two-line wrap. The vw component
     * does the real work of keeping it single-line down to small viewports;
     * the fixed lower bound is a floor, not a target. */
    font-size: clamp(1.75rem, 6.5vw, 5rem);
    white-space: nowrap;
    color: var(--er-signal-green);
    text-shadow: 0 0 2px color-mix(in srgb, var(--er-signal-green) 80%, white),
                 0 0 22px var(--er-signal-green-glow),
                 0 0 46px var(--er-signal-green-glow);
    letter-spacing: 0.01em;
}

.er-hero__badge {
    position: absolute;
    display: inline-block;
    background: rgba(13, 27, 42, 0.88);
    border: 1px solid var(--er-border-strong);
    border-radius: var(--er-radius-sm);
    color: var(--er-text);
    font-weight: 700;
    font-size: var(--er-text-sm);
    padding: var(--er-space-2) var(--er-space-4);
    box-shadow: var(--er-shadow-md);
    backdrop-filter: blur(4px);
    transition: transform var(--er-motion-fast) var(--er-ease-out),
                border-color var(--er-motion-fast) var(--er-ease-standard),
                background var(--er-motion-fast) var(--er-ease-standard);
}

a.er-hero__badge:hover,
a.er-hero__badge:focus-visible {
    border-color: var(--er-rig-glow, var(--er-signal-green));
    background: rgba(13, 27, 42, 0.97);
    transform: translateY(-2px);
    color: var(--er-text);
}

/* ---------- CTA: dimensional/metallic primary button ----------
 * Replaces the flat rectangle Build 002/003 shipped — bevel + glow instead
 * of a solid fill, while staying in the Master Plan's emerald doctrine
 * rather than switching to the live site's red (visual_recovery_004r.md). */
.er-btn--primary {
    background: linear-gradient(155deg, var(--er-emerald-400) 0%, var(--er-emerald-600) 100%);
    color: var(--er-carbon-900);
    border: 1px solid var(--er-emerald-400);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset,
                0 -2px 0 rgba(0, 0, 0, 0.2) inset,
                0 8px 20px rgba(14, 107, 69, 0.35);
}

.er-btn--primary:hover {
    background: linear-gradient(155deg, var(--er-emerald-400) 0%, var(--er-emerald-500) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
                0 -2px 0 rgba(0, 0, 0, 0.2) inset,
                0 0 32px var(--er-signal-green-glow);
    transform: translateY(-1px);
}

/* ---------- Hardware-motif showcase card (category section) ---------- */
.er-showcase-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--er-radius-lg);
    border: 1px solid var(--er-border-strong);
    background: var(--er-gradient-panel);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--er-space-6);
}

.er-showcase-card__motif {
    position: absolute;
    inset: 0;
    opacity: 0.9;
}

.er-showcase-card__tag {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    background: rgba(13, 27, 42, 0.88);
    border-radius: var(--er-radius-sm);
    padding: var(--er-space-1) var(--er-space-3);
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: auto;
}

.er-showcase-card__title {
    position: relative;
    z-index: 1;
    font-size: var(--er-text-lg);
    margin-bottom: var(--er-space-1);
}

.er-showcase-card__tagline {
    position: relative;
    z-index: 1;
    font-size: var(--er-text-sm);
    color: var(--er-text-dim);
    margin-bottom: 0;
}

/* ---------- WooCommerce de-embarrassment (Gate 11) ----------
 * The default Kadence/WooCommerce archive grid renders raw white cards
 * with broken-image icons and near-invisible light-gray text on shop/
 * category pages (visual_recovery_004r.md). This is a skin over the
 * existing loop, not a new template — full custom archive templates are
 * out of scope until the category-pages gate. */
.woocommerce ul.products li.product {
    background: var(--er-bg-raised);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-md);
    padding: var(--er-space-5) !important;
    transition: transform var(--er-motion-base) var(--er-ease-out), border-color var(--er-motion-base) var(--er-ease-standard);
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    border-color: var(--er-border-strong);
}

/* Kadence wraps the title/price in .product-details.content-bg with a
 * hardcoded white background (its "card on white" archive style) —
 * neutralize it so our dark card background shows through. */
.woocommerce ul.products li.product .product-details.content-bg {
    background: transparent !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    color: var(--er-text) !important;
    font-family: var(--er-font-display);
    font-size: var(--er-text-base) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price bdi {
    color: var(--er-accent-strong) !important;
    font-family: var(--er-font-mono);
}

/* General-purpose — used in the WooCommerce archive grid (Build 004R) and
 * the product-detail hero's image slots (Build 005 Gate 7). Needs to work
 * standing alone, not just nested inside .woocommerce ul.products. */
.er-no-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    aspect-ratio: 4 / 3;
    min-height: 80px;
    background: var(--er-gradient-panel);
    border-radius: var(--er-radius-sm);
    border: 1px solid var(--er-border);
    color: var(--er-text-faint);
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--er-space-4);
}

/* ---------- Footer ---------- */
.er-footer {
    background: var(--er-carbon-900);
    border-top: 1px solid var(--er-border);
    padding-block: var(--er-space-9) var(--er-space-6);
}

.er-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, 1fr);
    gap: var(--er-space-6);
}

@media (max-width: 900px) {
    .er-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.er-footer__col-title {
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--er-text-faint);
    margin-bottom: var(--er-space-4);
}

.er-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--er-space-2);
}

.er-footer__col a {
    color: var(--er-text-dim);
    font-size: var(--er-text-sm);
}

.er-footer__col a:hover {
    color: var(--er-accent-strong);
}

.er-footer__legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--er-space-3);
    margin-top: var(--er-space-8);
    padding-top: var(--er-space-5);
    border-top: 1px solid var(--er-border);
    font-size: var(--er-text-xs);
    color: var(--er-text-faint);
}