/* ==========================================================================
   BGI Desktop Megamenu
   Replaces Bootstrap 3 YAMM megamenu with lightweight, custom CSS.
   Uses BEM naming convention with .bgi-megamenu__ prefix.

   Visible at >= 992px; hidden below (mobile drawer takes over).
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties — easy theming for GIE / GTS
   -------------------------------------------------------------------------- */
:root {
    /* Navbar bar */
    --bgi-nav-bg: #fff;
    --bgi-nav-text: #333;
    --bgi-nav-link-color: #333;
    --bgi-nav-link-hover-bg: #fdf0f0;
    --bgi-nav-link-hover-color: #BD0000;
    --bgi-nav-link-active-border: #BD0000;
    --bgi-nav-link-font-size: 16.5px;
    --bgi-nav-link-padding: 0 14px;
    --bgi-nav-height: 44px;

    /* Dropdown panel */
    --bgi-nav-dropdown-bg: #fff;
    --bgi-nav-dropdown-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    --bgi-nav-dropdown-border: #e0e0e0;
    --bgi-nav-dropdown-max-width: 1320px;
    --bgi-nav-dropdown-padding: 24px 28px 28px;

    /* Items inside dropdown */
    --bgi-nav-accent-color: #BD0000;
    --bgi-nav-accent-font-size: 16px;
    --bgi-nav-item-color: #444;
    --bgi-nav-item-hover-color: #BD0000;
    --bgi-nav-item-hover-bg: #fdf0f0;
    --bgi-nav-item-font-size: 14.5px;
    --bgi-nav-item-line-height: 1.25;
    --bgi-nav-item-padding: 3px 8px;

    /* Date prefix */
    --bgi-nav-date-color: #d4380d;
    --bgi-nav-date-bg: #fff7e6;
    --bgi-nav-date-font-size: 10px;

    /* Divider */
    --bgi-nav-divider-color: #e8e8e8;

    /* Badges */
    --bgi-nav-badge-new-bg: #52c41a;
    --bgi-nav-badge-new-color: #fff;
    --bgi-nav-badge-sale-bg: #f5222d;
    --bgi-nav-badge-sale-color: #fff;

    /* Irish flag bar (GIE only) */
    --bgi-flag-green: #169B62;
    --bgi-flag-white: #FFFFFF;
    --bgi-flag-orange: #FF883E;
}


/* --------------------------------------------------------------------------
   Irish Flag Bar — thin tricolour band at top of the megamenu navbar (GIE)
   -------------------------------------------------------------------------- */
.bgi-flag-bar {
    height: 4px;
    background: linear-gradient(
        to right,
        var(--bgi-flag-green) 33%,
        var(--bgi-flag-white) 33%,
        var(--bgi-flag-white) 66%,
        var(--bgi-flag-orange) 66%
    );
}


/* --------------------------------------------------------------------------
   Navbar Container
   -------------------------------------------------------------------------- */
.bgi-megamenu {
    position: relative;
    background: var(--bgi-nav-bg);
    border-bottom: 1px solid var(--bgi-nav-dropdown-border);
    z-index: 900;
    /* Hide on mobile — drawer takes over */
    display: none;
}

@media (min-width: 992px) {
    .bgi-megamenu {
        display: block !important;
    }
}

.bgi-megamenu__inner {
    position: relative; /* positioning context for dropdown panels (container-width, not viewport-width) */
    max-width: var(--bgi-nav-dropdown-max-width);
    margin: 0 auto;
    padding: 0 15px;
}


/* --------------------------------------------------------------------------
   Top-Level List
   -------------------------------------------------------------------------- */
.bgi-megamenu__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}


/* --------------------------------------------------------------------------
   Top-Level Item
   -------------------------------------------------------------------------- */
.bgi-megamenu__item {
    position: static; /* dropdowns positioned relative to .bgi-megamenu */
    flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   Top-Level Link
   -------------------------------------------------------------------------- */
.bgi-megamenu__link {
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--bgi-nav-height);
    padding: var(--bgi-nav-link-padding);
    color: var(--bgi-nav-link-color);
    font-size: var(--bgi-nav-link-font-size);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bgi-megamenu__link:hover,
.bgi-megamenu__link:focus {
    color: var(--bgi-nav-link-hover-color);
    background-color: var(--bgi-nav-link-hover-bg);
    text-decoration: none;
}

.bgi-megamenu__item--has-dropdown:hover > .bgi-megamenu__link,
.bgi-megamenu__item--has-dropdown:focus-within > .bgi-megamenu__link {
    color: var(--bgi-nav-link-hover-color);
    background-color: var(--bgi-nav-link-hover-bg);
    border-bottom-color: var(--bgi-nav-link-active-border);
}

/* Chevron indicator on items with dropdowns */
.bgi-megamenu__link-chevron {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.bgi-megamenu__item--has-dropdown:hover .bgi-megamenu__link-chevron,
.bgi-megamenu__item--has-dropdown:focus-within .bgi-megamenu__link-chevron {
    transform: rotate(180deg);
}

/* Icon inside top-level link (FontAwesome icons) */
.bgi-megamenu__link i,
.bgi-megamenu__link .fa,
.bgi-megamenu__link .fas,
.bgi-megamenu__link .far,
.bgi-megamenu__link .fab {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

/* Hamburger / "All Categories" button (first item, opens mobile drawer on mobile) */
.bgi-megamenu__hamburger {
    display: none; /* Hidden on desktop; only relevant below 992px */
}


/* --------------------------------------------------------------------------
   Dropdown Panel (Full-Width)
   -------------------------------------------------------------------------- */
.bgi-megamenu__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 910;
    background: var(--bgi-nav-dropdown-bg);
    box-shadow: var(--bgi-nav-dropdown-shadow);
    border-top: 1px solid var(--bgi-nav-dropdown-border);
    border-bottom: 3px solid var(--bgi-nav-link-active-border);

    /* Hover intent: hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;

    /* No animation — appear instantly */
    transition: none;
}

/* Show dropdown on hover / focus-within (with minimal delay) */
.bgi-megamenu__item--has-dropdown:hover > .bgi-megamenu__dropdown,
.bgi-megamenu__item--has-dropdown:focus-within > .bgi-megamenu__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Inner wrapper constrains content width */
.bgi-megamenu__dropdown-inner {
    max-width: var(--bgi-nav-dropdown-max-width);
    margin: 0 auto;
    padding: var(--bgi-nav-dropdown-padding);
}


/* --------------------------------------------------------------------------
   Grid Layout for Columns (1–4 columns)
   -------------------------------------------------------------------------- */
.bgi-megamenu__grid {
    display: grid;
    gap: 16px 32px;
}

.bgi-megamenu__grid--1col {
    grid-template-columns: 1fr;
    max-width: 320px;
}

.bgi-megamenu__grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.bgi-megamenu__grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.bgi-megamenu__grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

/* For very wide screens, cap column width */
@media (min-width: 1400px) {
    .bgi-megamenu__grid--4col {
        gap: 16px 40px;
    }
}


/* --------------------------------------------------------------------------
   Column
   -------------------------------------------------------------------------- */
.bgi-megamenu__column {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* --------------------------------------------------------------------------
   Heading / Accent Item — bold category header within a column
   -------------------------------------------------------------------------- */
.bgi-megamenu__heading {
    display: block;
}

.bgi-megamenu__heading > a,
a.bgi-megamenu__heading,
.bgi-megamenu__heading > span,
span.bgi-megamenu__heading {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    font-size: var(--bgi-nav-accent-font-size);
    font-weight: 700;
    color: var(--bgi-nav-accent-color);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.1s ease;
}

.bgi-megamenu__heading > a:hover,
a.bgi-megamenu__heading:hover,
.bgi-megamenu__heading > a:focus,
a.bgi-megamenu__heading:focus {
    background-color: var(--bgi-nav-item-hover-bg);
    color: var(--bgi-nav-item-hover-color);
    text-decoration: none;
}

/* Arrow icon after heading links that point somewhere */
.bgi-megamenu__heading > a::after,
a.bgi-megamenu__heading::after {
    content: "\2192"; /* right arrow */
    margin-left: 6px;
    font-size: 12px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.bgi-megamenu__heading > a:hover::after,
a.bgi-megamenu__heading:hover::after {
    opacity: 1;
    transform: translateX(0);
}


/* --------------------------------------------------------------------------
   Regular Dropdown Link Item
   -------------------------------------------------------------------------- */
.bgi-megamenu__link-item {
    display: block;
}

.bgi-megamenu__link-item > a,
a.bgi-megamenu__link-item {
    display: block;
    padding: var(--bgi-nav-item-padding);
    font-size: var(--bgi-nav-item-font-size);
    line-height: var(--bgi-nav-item-line-height);
    color: var(--bgi-nav-item-color);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.12s ease, color 0.1s ease, padding-left 0.12s ease;
}

.bgi-megamenu__link-item > a:hover,
a.bgi-megamenu__link-item:hover,
.bgi-megamenu__link-item > a:focus,
a.bgi-megamenu__link-item:focus {
    background-color: var(--bgi-nav-item-hover-bg);
    color: var(--bgi-nav-item-hover-color);
    padding-left: 12px;
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   Date-Prefixed Item (e.g. "14 FEB Valentine's Day")
   -------------------------------------------------------------------------- */
.bgi-megamenu__link-item--date > a,
a.bgi-megamenu__link-item--date {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bgi-megamenu__date-prefix {
    display: inline-block;
    min-width: 48px;
    padding: 2px 5px;
    font-size: var(--bgi-nav-date-font-size);
    font-weight: 700;
    font-variant: small-caps;
    text-transform: uppercase;
    color: var(--bgi-nav-date-color);
    background: var(--bgi-nav-date-bg);
    border: 1px solid #ffd591;
    border-radius: 3px;
    text-align: center;
    line-height: 1.3;
    flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   Divider — horizontal separator between groups
   -------------------------------------------------------------------------- */
.bgi-megamenu__divider {
    display: block;
    height: 0;
    margin: 8px 8px;
    border: none;
    border-top: 1px solid var(--bgi-nav-divider-color);
}

/* Divider with text label */
.bgi-megamenu__divider--label {
    height: auto;
    border-top: none;
    padding: 10px 8px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
}


/* --------------------------------------------------------------------------
   Badge — small colored pill (New, Sale, etc.)
   -------------------------------------------------------------------------- */
.bgi-megamenu__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 10px;
    margin-left: 6px;
    white-space: nowrap;
    vertical-align: middle;
    background: #ffc107;
    color: #000;
}

.bgi-megamenu__badge--new {
    background: #ffc107;
    color: #000;
}

.bgi-megamenu__badge--sale {
    background: #ffc107;
    color: #000;
}

.bgi-megamenu__badge--hot {
    background: #ffc107;
    color: #000;
}


/* --------------------------------------------------------------------------
   "View All" link at bottom of a column
   -------------------------------------------------------------------------- */
.bgi-megamenu__view-all {
    display: block;
    margin-top: 6px;
}

.bgi-megamenu__view-all > a,
a.bgi-megamenu__view-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--bgi-nav-item-padding);
    font-size: var(--bgi-nav-item-font-size);
    font-weight: 600;
    color: var(--bgi-nav-accent-color);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.12s ease;
}

.bgi-megamenu__view-all > a:hover,
a.bgi-megamenu__view-all:hover {
    background-color: var(--bgi-nav-item-hover-bg);
    text-decoration: none;
}

.bgi-megamenu__view-all > a::after,
a.bgi-megamenu__view-all::after {
    content: "\2192";
    font-size: 12px;
}


/* --------------------------------------------------------------------------
   Responsive: hide megamenu below 992px
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .bgi-megamenu {
        display: none !important;
    }
}

/* At medium desktop widths, shrink padding for more room */
@media (min-width: 992px) and (max-width: 1199px) {
    .bgi-megamenu__link {
        padding: 0 10px;
        font-size: 14.5px;
    }

    .bgi-megamenu__dropdown-inner {
        padding: 20px 20px 24px;
    }

    .bgi-megamenu__grid {
        gap: 12px 20px;
    }
}


/* ==========================================================================
   GTS Desktop Navbar
   Simple horizontal link bar for greetings.ie (no megamenu dropdowns).
   Uses BEM naming convention with .bgi-navbar__ prefix.

   Visible at >= 992px; hidden below (mobile drawer takes over).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navbar Container + CSS Custom Properties (GTS blue theme)
   -------------------------------------------------------------------------- */
.bgi-navbar {
    /* Theme tokens — scoped to .bgi-navbar so they don't clash with megamenu */
    --bgi-navbar-bg: #fff;
    --bgi-navbar-border-color: #e0e0e0;
    --bgi-navbar-link-color: #333;
    --bgi-navbar-link-hover-bg: #e6f5fc;
    --bgi-navbar-link-hover-color: #006d9e;
    --bgi-navbar-link-active-border: #009fd6;
    --bgi-navbar-link-font-size: 14px;
    --bgi-navbar-link-padding: 0 14px;
    --bgi-navbar-height: 44px;
    --bgi-navbar-accent-color: #009fd6;

    /* Layout */
    position: relative;
    background: var(--bgi-navbar-bg);
    border-bottom: 1px solid var(--bgi-navbar-border-color);
    z-index: 900;
    /* Hide on mobile — drawer takes over */
    display: none;
}

@media (min-width: 992px) {
    .bgi-navbar {
        display: block !important;
    }
}


/* --------------------------------------------------------------------------
   Top-Level List
   -------------------------------------------------------------------------- */
.bgi-navbar__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center; /* GTS links are centred; GIE megamenu left-aligns */
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}


/* --------------------------------------------------------------------------
   Top-Level Item
   -------------------------------------------------------------------------- */
.bgi-navbar__item {
    flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   Top-Level Link
   -------------------------------------------------------------------------- */
.bgi-navbar__link {
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--bgi-navbar-height);
    padding: var(--bgi-navbar-link-padding);
    color: var(--bgi-navbar-link-color);
    font-size: var(--bgi-navbar-link-font-size);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* GTS flat bar: every link gets the bottom-border accent on hover
   (unlike GIE megamenu, where only dropdown-parent items get it) */
.bgi-navbar__link:hover,
.bgi-navbar__link:focus {
    color: var(--bgi-navbar-link-hover-color);
    background-color: var(--bgi-navbar-link-hover-bg);
    border-bottom-color: var(--bgi-navbar-link-active-border);
    text-decoration: none;
}

/* Active / current-page indicator */
.bgi-navbar__item--active > .bgi-navbar__link {
    color: var(--bgi-navbar-link-hover-color);
    border-bottom-color: var(--bgi-navbar-link-active-border);
}

/* Icon inside navbar link (FontAwesome icons) */
.bgi-navbar__link i,
.bgi-navbar__link .fa,
.bgi-navbar__link .fas,
.bgi-navbar__link .far,
.bgi-navbar__link .fab {
    font-size: 14px;
    width: 16px;
    text-align: center;
}


/* --------------------------------------------------------------------------
   Responsive: hide navbar below 992px
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .bgi-navbar {
        display: none !important;
    }
}

/* At medium desktop widths, shrink padding/font for more room */
@media (min-width: 992px) and (max-width: 1199px) {
    .bgi-navbar__link {
        padding: 0 10px;
        font-size: 13px;
    }
}