/*
 * Water Concepts
 * Off-canvas panel (≤1024px)
 *
 * Colours of panel and links via GP Customizer
 * (Off Canvas Panel): background --blue-950, text white,
 * hover/current --teal-300. This file does the layout,
 * the groups, the CTA pill, the current-page bar, the
 * close button and the contact block.
 *
 * Menu classes (Weergave → Menu's):
 *   menu-item--cta          → teal pill ("Producten")
 *   menu-item--group-start  → divider above ("Mijn account",
 *                             "Contact")
 *
 * Note: the panel is also a .main-navigation, so generic
 * rules in header.css (".inside-navigation { display:flex;
 * align-items:center }") reach it too — reset below.
 */


/* ==========================================
   LAYOUT
   Column: close button — menu — contact block,
   contact pushed to the bottom (margin-top: auto).
========================================== */

#generate-slideout-menu {
    --oc-pad: 24px;
    --oc-line: rgba(255, 255, 255, 0.15);
}

#generate-slideout-menu .inside-navigation {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    min-height: 100%;
    padding: 0;
}

#generate-slideout-menu .main-nav {
    width: 100%;
}

#generate-slideout-menu .slideout-menu {
    margin: 0;
    padding: 0 0 1rem;
}


/* ==========================================
   CLOSE BUTTON
   Same 40px round shape as the hamburger.
========================================== */

#generate-slideout-menu .slideout-exit {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;

    width: 2.5rem;
    height: 2.5rem;
    margin: 16px calc(var(--oc-pad) - 8px) 8px 0;
    padding: 0;

    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-pill);

    color: var(--white);
    line-height: 1;

    transition: background-color 0.2s ease;
}

#generate-slideout-menu .slideout-exit:hover {
    background: rgba(255, 255, 255, 0.15);
}

#generate-slideout-menu .slideout-exit .gp-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}


/* ==========================================
   LINKS
   44px tap targets, 1rem/600 (handout: primary
   menu mobile 1rem). Font size/weight/line-height
   with !important: GP's typography (inline CSS
   from the Customizer, Off-Canvas + Primary menu)
   otherwise wins. Set here, not in GP.
========================================== */

#generate-slideout-menu .slideout-menu > li {
    position: relative;
    float: none;
    width: 100%;
}

#generate-slideout-menu .slideout-menu > li > a {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 44px;
    padding: 0 var(--oc-pad);

    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Current page: vertical bar on the left in --teal-300
   (mobile counterpart of the underline on desktop). */
#generate-slideout-menu .slideout-menu > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;

    width: 3px;

    background: var(--teal-300);
    border-radius: 0 2px 2px 0;

    opacity: 0;
    transition: opacity 0.2s ease;
}

#generate-slideout-menu .slideout-menu > li.current-menu-item > a::before,
#generate-slideout-menu .slideout-menu > li.current_page_item > a::before,
#generate-slideout-menu .slideout-menu > li.current-menu-ancestor > a::before {
    opacity: 1;
}

#generate-slideout-menu .slideout-menu > li > a:focus-visible {
    outline: 2px solid var(--teal-300);
    outline-offset: -2px;
}


/* ==========================================
   GROUPS
   Divider above the first item of a group,
   inset to the text padding.
========================================== */

#generate-slideout-menu .slideout-menu > li.menu-item--group-start {
    margin-top: 12px;
    padding-top: 12px;
}

#generate-slideout-menu .slideout-menu > li.menu-item--group-start::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--oc-pad);
    right: var(--oc-pad);

    height: 1px;

    background: var(--oc-line);
}


/* ==========================================
   CTA: "PRODUCTEN" AS TEAL PILL
   Same as the primary CTA (hero): --teal-500
   with --blue-900 text, trailing arrow.
   Colours forced over GP's hover/current colours.
========================================== */

#generate-slideout-menu .slideout-menu > li.menu-item--cta {
    padding: 8px var(--oc-pad) 4px;
}

#generate-slideout-menu .slideout-menu > li.menu-item--cta > a {
    display: inline-flex;
    gap: 8px;

    min-height: 40px;
    padding: 0 20px;

    background: var(--teal-500);
    border-radius: var(--radius-pill);

    color: var(--blue-900) !important;

    font-size: 0.9375rem !important;
    font-weight: 700 !important;

    transition: background-color 0.2s ease;
}

#generate-slideout-menu .slideout-menu > li.menu-item--cta > a:hover,
#generate-slideout-menu .slideout-menu > li.menu-item--cta.current-menu-item > a {
    background: var(--teal-300);
}

/* No current-bar on the pill. */
#generate-slideout-menu .slideout-menu > li.menu-item--cta > a::before {
    display: none;
}

#generate-slideout-menu .slideout-menu > li.menu-item--cta > a::after {
    content: "";

    width: 16px;
    height: 16px;

    background: currentColor;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

#generate-slideout-menu .slideout-menu > li.menu-item--cta > a:focus-visible {
    outline-offset: 2px;
}


/* ==========================================
   CONTACT BLOCK (offcanvas.inc.php)
   Bottom of the panel. Icons in squares, like
   the utility bar.
========================================== */

.offcanvas-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;

    margin-top: auto;
    padding: 16px var(--oc-pad) 28px;

    border-top: 1px solid var(--oc-line);
}

.offcanvas-contact__item {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 44px;

    color: var(--blue-300);

    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-decoration: none;

    transition: color 0.2s ease;
}

.offcanvas-contact__item:hover,
.offcanvas-contact__item:focus-visible {
    color: var(--white);
}

.offcanvas-contact__item:focus-visible {
    outline: 2px solid var(--teal-300);
    outline-offset: 2px;
}

.offcanvas-contact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 2rem;
    height: 2rem;

    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);

    color: var(--teal-300);
}

.offcanvas-contact__icon svg {
    display: block;
}


/* ==========================================
   BACKDROP
   Navy instead of GP's default grey.
========================================== */

.slideout-overlay {
    background-color: rgba(8, 45, 75, 0.6) !important;
}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    #generate-slideout-menu *,
    #generate-slideout-menu *::before {
        transition: none !important;
    }
}