/*
 * UKGC Mega Menu - frontend styling.
 *
 * Colours pulled from app/design/frontend/Uk/theme/web/css/uktheme_ustom.css (repeated/dominant
 * values in that file) plus the confirmed brand blue. Font from _variables.less (@font-family-name__base).
 */

/* Not mega-menu specific, but lives here since this is the sitewide stylesheet already loaded on
   every page. Amasty_MegaMenuLite's own CSS was hiding this stock Magento panel (My Account/My
   Wish List/Sign In text links) - it was never meant to be visible, VenusTheme already provides
   the same functionality via its own Sign In button + cart in the nav bar. Disabling Amasty
   removed that CSS along with everything else it was doing, so this needs to live somewhere that
   doesn't depend on the module being installed. */
/* header-style-1.header-container's 66.8% width only made sense when .header.content still
   existed as a separate ~33% sibling next to it. VenusTheme's own JS relocates the logo out of
   .header.content into this container's own .logo-w slot at runtime, and the now-empty
   .header.content shell gets removed - but this width cap never got updated to match, leaving
   this container (and everything in it: logo, search, cart, Sign In) squeezed into two-thirds
   of the header with the rest sitting empty. */
.header-style-1.header-container {
    width: 100% !important;
}

/* Theme's own CSS forces .logo-w/.searchbox-w to width:100% unconditionally (no media query),
   which stacks them full-width regardless of screen size. Whatever used to counteract that for
   desktop is gone along with Amasty, so taking direct control here instead of chasing it further:
   logo sizes to its own content, search/cart/Sign In area fills whatever's left. */
@media (min-width: 769px) {
    #header .header-middle .row {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap !important;
    }

    #header .header-middle .logo-w {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    #header .header-middle .searchbox-w {
        width: auto !important;
        flex: 1 1 auto !important;
    }
}

.page-header .panel.wrapper {
    display: none;
}

/* Same root cause as the fix above: Amasty was removing store.links/store.settings from
   navigation.sections while enabled, so this native Magento "sections" drawer (a second,
   redundant account/settings panel) came back once it was disabled. Our own mobile menu already
   has its own account section, so this is just duplicate UI - hide it outright. */
.nav-sections {
    display: none;
}

:root {
    --ukgc-mm-bg: #161616;
    --ukgc-mm-panel-bg: #000000;
    --ukgc-mm-text: #ffffff;
    --ukgc-mm-text-muted: #b3b3b3;
    --ukgc-mm-accent: #168bce;
    --ukgc-mm-accent-bright: #4fc1f0;
    --ukgc-mm-accent-secondary: #de3831;
    --ukgc-mm-border: #2a2a2a;
    --ukgc-mm-radius: 4px;
    --ukgc-mm-font: 'Open Sans', sans-serif;
}

.ukgc-megamenu {
    position: relative;
    background: var(--ukgc-mm-bg);
    font-family: var(--ukgc-mm-font);
}

.ukgc-megamenu-top {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ukgc-megamenu-top-item {
    position: relative;
}

.ukgc-megamenu-top-item > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
    color: var(--ukgc-mm-text);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.ukgc-megamenu-top-item > a:hover {
    color: var(--ukgc-mm-accent-secondary);
}

/* :focus-within alongside :hover so keyboard/tab users can reach the panel too, not just mouse hover */
.ukgc-megamenu-top-item.has-panel:hover .ukgc-megamenu-panel,
.ukgc-megamenu-top-item.has-panel:focus-within .ukgc-megamenu-panel {
    display: flex;
}

.ukgc-mm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    overflow: hidden; /* safety net so no icon can visually escape its box regardless of source markup */
}

.ukgc-mm-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    fill: currentColor; /* icons tint with the link on hover automatically */
}

.ukgc-megamenu-panel {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    max-width: calc(100vw - 40px);
    z-index: 100;
    min-width: 640px;
    padding: 24px;
    background: var(--ukgc-mm-panel-bg);
    border-top: 2px solid var(--ukgc-mm-accent);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

.ukgc-megamenu-panel-content {
    display: flex;
    gap: 10px;
}

/* No columns - just a handful of products. Narrower flyout instead of the full-width mega panel. */
.ukgc-megamenu-panel--simple {
    min-width: 260px;
    max-width: 320px;
    padding: 16px;
}

.ukgc-megamenu-columns {
    display: flex;
    gap: 10px;
    flex: 1;
}

/* Tile grid: rectangular tiles (roughly half the height of a square), image background with
   a bottom gradient scrim so the label stays legible over any photo/artwork. */
.ukgc-megamenu-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    flex: 1 1 320px;
    min-width: 310px;
    align-content: stretch;
}

/* 4 tiles or fewer: always one column (regardless of available width) rather than letting
   auto-fill decide - deterministic based on count, not a width threshold guess. */
.ukgc-megamenu-tile-grid--single {
    grid-template-columns: 1fr;
}

.ukgc-megamenu-tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 84px;
    border: 1px solid transparent;
    border-radius: var(--ukgc-mm-radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--ukgc-mm-border);
    text-decoration: none;
}

.ukgc-megamenu-tile:hover {
    border-color: var(--ukgc-mm-accent-bright);
}

.ukgc-megamenu-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 65%);
}

.ukgc-megamenu-tile-label {
    position: relative;
    z-index: 1;
    padding: 8px 10px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
}

/* Same size/shape as an image tile, but a brand-colour gradient instead of an uploaded photo -
   for links that don't have (or don't need) custom artwork. Centered rather than corner-aligned
   since there's no photo underneath to justify the bottom-weighted overlay treatment. */
/* Same box, same text position/size as an image tile - only the background differs */
.ukgc-megamenu-tile--gradient {
    background-image: linear-gradient(135deg, #0d3350 0%, var(--ukgc-mm-accent) 100%);
}

.ukgc-megamenu-column {
    min-width: 180px;
}

/* Wide enough for the media block (image + 2-column spec chips with full text) plus the
   name/price info column beside it */
.ukgc-megamenu-column--products {
    min-width: 260px;
    flex: 1;
}

.ukgc-megamenu-heading {
    color: var(--ukgc-mm-text);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.03em;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ukgc-mm-border);
}

.ukgc-megamenu-link {
    display: block;
    margin-bottom: 8px;
    color: var(--ukgc-mm-text);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ukgc-megamenu-link:hover {
    color: var(--ukgc-mm-accent);
}

/* Plain-link children, nested inside a standard .ukgc-megamenu-column (which handles width) */
.ukgc-megamenu-simple-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ukgc-megamenu-simple-links li {
    margin: 0;
}

/* List-style product rows - used both for products attached directly to a top-level item and
   for products under a heading column, via the same shared render function in the template. */
.ukgc-megamenu-quicklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ukgc-mm-border);
}

.ukgc-megamenu-quicklist:first-child,
.ukgc-megamenu-heading + .ukgc-megamenu-quicklist {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.ukgc-megamenu-quicklist-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ukgc-mm-border);
    border-radius: var(--ukgc-mm-radius);
    color: var(--ukgc-mm-text-muted);
    text-decoration: none;
}

.ukgc-megamenu-quicklist-item:hover {
    color: var(--ukgc-mm-accent);
    border-color: var(--ukgc-mm-accent-bright);
}

/* Image + specs stacked together - specs get the image's full width to work with rather than
   being squeezed beside a title, and the space under a small thumbnail gets put to use. */
.ukgc-megamenu-quicklist-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ukgc-megamenu-quicklist-item img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    flex: 0 0 auto;
    border-radius: 2px;
}

.ukgc-megamenu-quicklist-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ukgc-megamenu-quicklist-name {
    font-size: 13px;
    line-height: 1.3;
}

.ukgc-megamenu-quicklist-price {
    color: var(--ukgc-mm-accent);
    font-size: 13px;
    font-weight: 700;
}

/* Small spec chips (CPU/GPU/RAM/SSD) - shared styling wherever a list-style product renders */
.ukgc-megamenu-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin-top: 3px;
}

.ukgc-megamenu-spec {
    overflow: hidden;
}

.ukgc-megamenu-spec span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ukgc-megamenu-spec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    font-size: 10px;
    line-height: 1.4;
    color: var(--ukgc-mm-text-muted);
    white-space: nowrap;
}

.ukgc-megamenu-spec svg {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}

/* Card(s) attached directly to a top-level item - own area, needs real width */
.ukgc-megamenu-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex: 0 0 auto;
}

.ukgc-megamenu-card {
    width: 220px;
    max-width: 220px;
    flex: 0 0 auto;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ukgc-mm-border);
    border-radius: var(--ukgc-mm-radius);
    padding: 12px;
}

.ukgc-megamenu-card-badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 10px;
    background: var(--ukgc-mm-accent);
    color: #ffffff;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 2px;
}

.ukgc-megamenu-card img {
    max-width: 100%;
    max-height: 120px;
    height: auto;
    object-fit: contain;
    border-radius: calc(var(--ukgc-mm-radius) - 1px);
}

.ukgc-megamenu-card-title {
    color: var(--ukgc-mm-text);
    font-weight: 700;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.3;
}

.ukgc-megamenu-card-price {
    color: var(--ukgc-mm-accent);
    margin-top: 2px;
    font-weight: 700;
}

.ukgc-megamenu-card .ukgc-megamenu-specs {
    justify-content: center;
    margin-top: 5px;
}

.ukgc-megamenu-card-cta {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 20px;
    background: var(--ukgc-mm-accent-secondary);
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.ukgc-megamenu-card-cta:hover {
    opacity: 0.85;
}

/* "View all X" footer link - forced onto its own full-width row via the panel's flex-wrap,
   sitting bottom-left beneath whatever columns/tiles/cards are above it. */
.ukgc-megamenu-view-all {
    display: block;
    margin-top: 12px;
    text-align: left;
    color: var(--ukgc-mm-text);
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 700;
    font-size: 13px;
}

.ukgc-megamenu-view-all:hover {
    color: var(--ukgc-mm-accent);
}

/* Mobile: stack instead of showing the desktop flyout panel. No toggle/hamburger yet - parked. */
/* Hamburger toggle - hidden by default, shown only within the mobile breakpoint below */
.ukgc-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.ukgc-mobile-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ukgc-mm-text);
}

/* Full-screen mobile nav. Kept as a flex box always (not display:none) so the slide transition
   actually animates - position:fixed means it doesn't affect page layout/scrollbars regardless
   of viewport, so this is safe to leave in the DOM at desktop widths too. */
.ukgc-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--ukgc-mm-bg);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0.3s;
}

.ukgc-mobile-nav.is-open {
    transform: translateX(0);
    visibility: visible;
}

body.ukgc-mobile-nav-open {
    overflow: hidden;
}

.ukgc-mobile-nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 16px;
    border-bottom: 1px solid var(--ukgc-mm-border);
}

.ukgc-mobile-nav-title {
    color: var(--ukgc-mm-text);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
}

.ukgc-mobile-nav-close {
    padding: 0;
    background: none;
    border: none;
    color: var(--ukgc-mm-text);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

/* Account links panel, relocated here from the stock header via layout XML <move> - styling the
   markup Magento itself renders (.header.links etc), not something we control the class names of. */
.ukgc-mobile-nav-account {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--ukgc-mm-border);
}

.ukgc-mobile-nav-account .header.links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ukgc-mobile-nav-account .header.links li {
    border-bottom: 1px solid var(--ukgc-mm-border);
}

.ukgc-mobile-nav-account .header.links a,
.ukgc-mobile-nav-account .header.links .not-logged-in {
    display: block;
    padding: 12px 16px;
    color: var(--ukgc-mm-text-muted);
    text-decoration: none;
    font-size: 13px;
}

.ukgc-mobile-nav-account .header.links a:hover {
    color: var(--ukgc-mm-accent);
}

.ukgc-mobile-nav-account .action.skip {
    display: none;
}

/* Trim to just what's needed: My Account, the Sign In/Sign Out swap (Magento's own logic already
   handles which one shows), and Create Account. Wish List and the "Welcome to..." greeting text
   aren't wanted here regardless of login state. */
.ukgc-mobile-nav-account .header.links .link.wishlist,
.ukgc-mobile-nav-account .header.links .greet.welcome {
    display: none;
}

.ukgc-mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}

.ukgc-mobile-nav-link,
.ukgc-mobile-nav-item-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ukgc-mm-border);
    color: var(--ukgc-mm-text);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.ukgc-mobile-nav-chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.ukgc-mobile-nav-item.is-expanded .ukgc-mobile-nav-chevron {
    transform: rotate(-135deg);
}

.ukgc-mobile-nav-sublist {
    max-height: 0;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.03);
    transition: max-height 0.3s ease;
}

.ukgc-mobile-nav-sublist li a {
    display: block;
    padding: 12px 16px 12px 28px;
    color: var(--ukgc-mm-text-muted);
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid var(--ukgc-mm-border);
}

.ukgc-mobile-nav-sublist li a:hover {
    color: var(--ukgc-mm-accent);
}

@media (max-width: 768px) {
    .ukgc-mobile-toggle {
        display: flex;
        position: fixed;
        top: 14px;
        right: 16px;
        z-index: 1001;
    }

    body.ukgc-mobile-nav-open .ukgc-mobile-toggle {
        display: none;
    }

    .ukgc-megamenu {
        display: none;
    }
}