/*
 * Interactive Power Calculator - "Find the right device" button in the desktop header
 * (CLAUDE.md §11.98 layout, §11.99 look: a 1:1 build of the "Header" block in the user's
 * design, Instructions/Powerstation Banner (standalone).html). Registered site-wide by
 * hookActionFrontControllerSetMedia(), but only while the button is switched on, so nothing
 * here loads for a store with it off.
 *
 * Layout: the theme's #tvcms-header-menu-7 row is already a flex row (align-items:center,
 * from ge_tvcmsverticalmenu_header's front.css). The button column is content-sized and
 * the main-menu column takes whatever is left, instead of the theme's fixed 78.84 % - the
 * "~" sibling selector below only matches while the button column is actually in the row,
 * so with the button off the theme's own two-block widths stay untouched (no theme CSS
 * edited). Specificity (1,3,0) beats the theme's (1,2,0) rules without !important.
 *
 * Fitting three blocks in one row: with the button present the menu links get a slightly
 * tighter 10px side padding (theme: 15px). Whether the label still fits depends on the
 * language and on the menu's own item texts, so views/js/header-button.js measures instead
 * of guessing: when the menu wraps onto a second line it adds
 * .ge-ipc-header-btn-col--compact, which drops the label and leaves the icon (the name
 * stays in the title tooltip), and removes it again as soon as the label fits.
 */

#tvcms-header-menu-7 .ge-header-menu-row {
    display: flex;
    align-items: center;
}

#tvcms-header-menu-7 .ge-header-menu-row .ge-ipc-header-btn-col {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0 15px 0 0;
    float: none;
}

#tvcms-header-menu-7 .ge-header-menu-row .ge-ipc-header-btn-col ~ .tvcms-header-menu {
    flex: 1 1 0%;
    width: auto;
    max-width: none;
    min-width: 0;
}

/* Theme: "#header .tv-menu-horizontal ul li.level-1>a { padding: 0 15px }" at 1200px and
   above (0 6px below). Only while the button column is in the row. */
@media (min-width: 1200px) {
    #header #tvcms-header-menu-7 .ge-ipc-header-btn-col ~ .tvcms-header-menu .tv-menu-horizontal ul li.level-1 > a {
        padding: 0 10px;
    }
}

/* Design "Header" block: 42px, white, 2px #e73e24 border, red uppercase Open Sans 700 16px
   with .02em tracking, icon 16x19, 10px gap, 0 20px padding; hover fills red with a soft
   red shadow, active darkens to #b02c17 and scales to .985. */
.ge-ipc-header-btn,
.ge-ipc-header-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    height: 42px;
    padding: 0 20px;
    border: 2px solid #e73e24;
    border-radius: 5px;
    background: #fff;
    color: #e73e24;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    /* Title case as entered in "Manage module" (user's request 2026-09-22; the design mock-up
       had uppercase) - same as the "Catalog" button next to it. */
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out, transform 100ms ease-out;
}

.ge-ipc-header-btn:hover,
.ge-ipc-header-btn:focus {
    background: #e73e24;
    color: #fff;
    box-shadow: 0 4px 14px rgba(231, 62, 36, 0.32);
    text-decoration: none;
}

.ge-ipc-header-btn:active {
    transform: scale(0.985);
    background: #b02c17;
    border-color: #b02c17;
    color: #fff;
    box-shadow: none;
}

.ge-ipc-header-btn:focus-visible {
    outline: 2px solid #222222;
    outline-offset: 2px;
}

.ge-ipc-header-btn__icon {
    flex: 0 0 auto;
    display: inline-flex;
    line-height: 0;
}

.ge-ipc-header-btn__icon > svg,
.ge-ipc-header-btn__icon > .ge-ipc-icon--url {
    display: block;
    width: 16px;
    height: 19px;
    stroke-width: 1.9;
}

/* Icon given as a file URL in "Manage module" (§11.99 addendum): the file is a CSS mask and
   the fill is currentColor, so it takes this placement's colour and hover exactly like the
   inline icon does. Old browsers without mask support get the file as a plain background. */
.ge-ipc-icon--url {
    background: var(--ge-ipc-icon) no-repeat center / contain;
}

@supports ((mask-image: url("x.svg")) or (-webkit-mask-image: url("x.svg"))) {
    .ge-ipc-icon--url {
        background: currentColor;
        -webkit-mask: var(--ge-ipc-icon) no-repeat center / contain;
        mask: var(--ge-ipc-icon) no-repeat center / contain;
    }
}

.ge-ipc-header-btn__label {
    display: inline-block;
}

/* Set by header-button.js while the menu would otherwise wrap: icon only. */
.ge-ipc-header-btn-col--compact .ge-ipc-header-btn {
    padding: 0 12px;
}

.ge-ipc-header-btn-col--compact .ge-ipc-header-btn__label {
    display: none;
}

/* Below 1200px the theme shrinks the main menu to 15px / 6px padding - follow it. */
@media (max-width: 1199px) {
    .ge-ipc-header-btn {
        font-size: 15px;
        padding: 0 14px;
    }
}

/* The theme hides the whole desktop header below 992px (mobile header takes over). */
@media (max-width: 991px) {
    .ge-ipc-header-btn-col {
        display: none;
    }
}