/* ==========================================================================================
   PI NAV: SHARED STYLES (all sites in the network)
   Enqueued from kava-child/functions.php (handle "pi-nav"), after Elementor's frontend CSS.
   Tokens (--pi-nav-*), shared pieces (.pi-nav-arrow ...) and the desktop mega menu panels.
   The mobile nav popup's own CSS stays in the popup (Advanced > Custom CSS); it travels with
   the popup through pi_get_shared_template().
   Cache: the ?ver= updates by itself when this file changes (filemtime); after uploading,
   just clear the WP Engine cache.
   ========================================================================================== */

/* ===== Shared nav tokens =====
   Colors that have an Elementor global use it, with the hex as a fallback. The rest are plain tokens,
   ready to point at a global later. */
:root {
    /* Base colors */
    --pi-nav-color-text: var(--e-global-color-f7f1952, #054053);          /* dark teal: text, icons */
    --pi-nav-color-accent: var(--e-global-color-d90976c, #30A097);        /* teal: links, labels, dashes */
    --pi-nav-color-link-hover: var(--e-global-color-2145592, #6EBDB6);    /* light teal: hovered teal links */
    --pi-nav-color-card-border: var(--e-global-color-c123914, #B4C2CE);   /* borders and dividers */
    --pi-nav-color-card-divider-hover: var(--e-global-color-0e12061, #F37721);  /* orange: hovered link card divider */
    --pi-nav-color-white: #FFFFFF;
    --pi-nav-color-card-hover-bg: #F5F9FA;          /* very light blue-gray: card / row hover, light card background */
    --pi-nav-color-chevron: #7A8C97;                /* gray: mobile menu chevrons */
    --pi-nav-color-pill-border: #9ED2CD;            /* light teal: pill link outline */
    --pi-nav-color-dark-start: #1F5569;             /* dark card gradient, top */
    --pi-nav-color-dark-end: #09303E;               /* dark card gradient, bottom */
    --pi-nav-color-line-on-dark: rgba(255, 255, 255, 0.18);  /* faint lines on dark cards */

    /* Colors derived from the base colors */
    --pi-nav-color-card-divider: var(--pi-nav-color-card-border);   /* link card title divider */
    --pi-nav-color-icon-bg: var(--pi-nav-color-white);              /* round icon wrapper at rest, icon on filled hover */
    --pi-nav-color-icon-box-hover-bg: var(--pi-nav-color-text);     /* icon card: icon box fill on hover */
    --pi-nav-gradient-dark: linear-gradient(180deg, var(--pi-nav-color-dark-start), var(--pi-nav-color-dark-end));

    /* Icon links (round icon + text) */
    --pi-nav-icon-link-icon-size: 40px;      /* round wrapper diameter */
    --pi-nav-icon-link-glyph-size: 20px;     /* icon inside the wrapper */

    /* Type */
    --pi-nav-font-family: "Roboto", Sans-Serif;
    --pi-nav-font-family-condensed: "Roboto Condensed", Sans-Serif;
    --pi-nav-letter-spacing: -0.3px;
    --pi-nav-font-size-title: 0.875rem;      /* item titles, "Get Started:" */
    --pi-nav-font-size-desc: 0.8125rem;      /* descriptions */
    --pi-nav-line-height-desc: 1.25;
    --pi-nav-font-size-card-title: 0.875rem; /* link card titles */
    --pi-nav-font-size-card-body: 0.875rem; /* link card body */
    --pi-nav-font-size-meta: 0.8125rem;        /* small uppercase labels */
    --pi-nav-font-size-icon-link: 0.875rem;  /* icon + text links, e.g. "Have Questions?" */

    /* Cards */
    --pi-nav-card-border: 0.5px solid var(--pi-nav-color-card-border);
    --pi-nav-card-radius: 4px;
    --pi-nav-card-padding-x: 16px;

    /* Link cards (title + divider + body) */
    --pi-nav-link-card-padding: 20px 24px;
    --pi-nav-link-card-min-width: 200px;     /* grid column min width before wrapping */
    --pi-nav-link-card-grid-gap: 16px;
    --pi-nav-card-divider-length: 85%;       /* divider width, relative to card content */
    --pi-nav-card-divider-thickness: 2px;

    /* Icon cards (icon box + title + body) */
    --pi-nav-card-icon-box-size: 48px;
    --pi-nav-card-icon-size: 34px;           /* icon inside the box */
    --pi-nav-card-icon-gap: 16px;            /* between icon box and text */

    /* List rows (dash + title + arrow) */
    --pi-nav-item-line-height: 24px;
    --pi-nav-item-row-gap: 24px;
    --pi-nav-dash-width: 12px;
    --pi-nav-dash-gap: 8px;
    --pi-nav-arrow-size: 12px;

    --pi-nav-transition: 0.2s ease;

    /* Keyboard focus ring (mobile menu, header burger) */
    --pi-nav-focus-ring: 2px solid var(--pi-nav-color-accent);
    --pi-nav-focus-ring-offset: 2px;

    /* Dive-deeper description; the reserved space below each column is derived from these.
       On :root so other elements (e.g. the column divider) can use the height too. */
    --pi-nav-dive-deeper-desc-font-size: var(--pi-nav-font-size-desc);
    --pi-nav-dive-deeper-desc-line-height: var(--pi-nav-line-height-desc);
    --pi-nav-dive-deeper-desc-lines: 2;
    --pi-nav-dive-deeper-desc-gap: 1.5px;
    --pi-nav-dive-deeper-desc-height: calc(
        var(--pi-nav-dive-deeper-desc-gap) +
        var(--pi-nav-dive-deeper-desc-lines) * var(--pi-nav-dive-deeper-desc-font-size) * var(--pi-nav-dive-deeper-desc-line-height)
    );
    --pi-nav-dive-deeper-card-padding-y: 8px;
}

/* ===== Shared pieces (title with no-shift bold, arrow, dash, link reset) ===== */
.pi-nav-item-title {
    display: inline-grid;
    font-size: var(--pi-nav-font-size-title);
    font-weight: 400;
    color: var(--pi-nav-color-text);
}

/* Invisible bold copy reserves the bold width so nothing shifts on hover */
.pi-nav-item-title::after {
    content: attr(data-text);
    font-weight: 700;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
}

/* Hover arrow, shared by the desktop panels and the mobile menu.
   Hidden at rest; each menu shows it on its own hover / keyboard-focus rules. */
.pi-nav-arrow {
    display: inline-flex;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--pi-nav-transition), transform var(--pi-nav-transition);
}

.pi-nav-arrow img {
    width: var(--pi-nav-arrow-size);
    height: auto;
    display: block;
}

.pi-nav-dash {
    width: var(--pi-nav-dash-width);
    color: var(--pi-nav-color-accent);
}

.pi-nav-get-started-card,
.pi-nav-get-started-card:hover,
.pi-nav-get-started-card:focus,
.pi-nav-dive-deeper__card,
.pi-nav-dive-deeper__card:hover,
.pi-nav-dive-deeper__card:focus,
.pi-nav-list__link,
.pi-nav-list__link:hover,
.pi-nav-list__link:focus,
.pi-nav-card,
.pi-nav-card:hover,
.pi-nav-card:focus {
    color: var(--pi-nav-color-text);
    text-decoration: none;
}

/* Bordered card surface: Get Started card + link cards */
.pi-nav-get-started-card__box,
.pi-nav-card {
    background-color: transparent;
    border: var(--pi-nav-card-border);
    border-radius: var(--pi-nav-card-radius);
    transition: background-color var(--pi-nav-transition);
}

.pi-nav-get-started-card:hover .pi-nav-get-started-card__box,
.pi-nav-get-started-card:focus-visible .pi-nav-get-started-card__box,
.pi-nav-card:hover,
.pi-nav-card:focus-visible {
    background-color: var(--pi-nav-color-card-hover-bg);
}

/* Dash + title + arrow row */
.pi-nav-dive-deeper__header,
.pi-nav-list__link {
    align-items: center;
    gap: var(--pi-nav-dash-gap);
    line-height: var(--pi-nav-item-line-height);
}

/* ===== Get Started card ===== */
.pi-nav-get-started-card {
    display: block;
}

.pi-nav-get-started-card__box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px var(--pi-nav-card-padding-x);
}

/* Row 1: "Get Started:" + arrow */
.pi-nav-get-started-card__header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pi-nav-get-started-card__pretitle {
    font-family: var(--pi-nav-font-family-condensed);
    font-size: var(--pi-nav-font-size-title);
    font-weight: 500;
    color: var(--pi-nav-color-accent);
}

/* Row 2: title + description */
.pi-nav-get-started-card__body {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 2px;
    font-family: var(--pi-nav-font-family);
    letter-spacing: var(--pi-nav-letter-spacing);
}

.pi-nav-get-started-card__desc {
    font-size: var(--pi-nav-font-size-desc);
    line-height: var(--pi-nav-line-height-desc);
    color: var(--pi-nav-color-text);
}

/* ===== "Then dive deeper" list ===== */
.pi-nav-dive-deeper {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 24px;
}

/* Each column stacks independently and reserves room for one open description */
.pi-nav-dive-deeper__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    row-gap: var(--pi-nav-item-row-gap);
    margin: 0;
    padding: 0 0 var(--pi-nav-dive-deeper-desc-height);
    list-style: none;
    transition: padding-bottom var(--pi-nav-transition);
}

/* A card in this column is open: hand the reserved space to it, so total height stays fixed */
.pi-nav-dive-deeper__col:has(.pi-nav-dive-deeper__card:hover),
.pi-nav-dive-deeper__col:has(.pi-nav-dive-deeper__card:focus-visible) {
    padding-bottom: 0;
}

.pi-nav-dive-deeper__item {
    margin: 0;
}

.pi-nav-dive-deeper__card {
    display: grid;
    grid-template-rows: auto 0fr;      /* description collapsed */
    /* negative margin = padding, so text sits on the row */
    margin: calc(var(--pi-nav-dive-deeper-card-padding-y) * -1) calc(var(--pi-nav-card-padding-x) * -1);
    padding: var(--pi-nav-dive-deeper-card-padding-y) var(--pi-nav-card-padding-x);
    font-family: var(--pi-nav-font-family);
    letter-spacing: var(--pi-nav-letter-spacing);
    background-color: transparent;
    border: var(--pi-nav-card-border);
    border-color: transparent;
    border-radius: var(--pi-nav-card-radius);
    transition:
        grid-template-rows var(--pi-nav-transition),
        background-color var(--pi-nav-transition),
        border-color var(--pi-nav-transition);
}

.pi-nav-dive-deeper__header {
    display: flex;
}

.pi-nav-dive-deeper__desc {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transition: opacity var(--pi-nav-transition);
}

/* Fixed height (always N lines) so it matches the reserved space exactly */
.pi-nav-dive-deeper__desc > span {
    box-sizing: border-box;
    height: var(--pi-nav-dive-deeper-desc-height);
    /* left padding = dash width + gap: aligns with title */
    padding: var(--pi-nav-dive-deeper-desc-gap) 0 0 calc(var(--pi-nav-dash-width) + var(--pi-nav-dash-gap));
    font-size: var(--pi-nav-dive-deeper-desc-font-size);
    line-height: var(--pi-nav-dive-deeper-desc-line-height);
    color: var(--pi-nav-color-text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--pi-nav-dive-deeper-desc-lines);
    overflow: hidden;
}

/* Hover / keyboard focus: expand into a card (matches hovered Get Started card) */
.pi-nav-dive-deeper__card:hover,
.pi-nav-dive-deeper__card:focus-visible {
    grid-template-rows: auto 1fr;
    background-color: var(--pi-nav-color-card-hover-bg);
    border-color: var(--pi-nav-color-card-border);
}

.pi-nav-dive-deeper__card:hover .pi-nav-dive-deeper__desc,
.pi-nav-dive-deeper__card:focus-visible .pi-nav-dive-deeper__desc {
    opacity: 1;
}

/* ===== Simple link list (AI Courses) ===== */
.pi-nav-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--pi-nav-item-row-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pi-nav-list__item {
    margin: 0;
}

.pi-nav-list__link {
    display: inline-flex;
    font-family: var(--pi-nav-font-family);
    letter-spacing: var(--pi-nav-letter-spacing);
}

/* ===== Link cards (title + divider + body; shared across panels) ===== */
/* Default: consistent card width; a short row keeps empty space at the end.
   min(..., 100%) stops a card from overflowing a container narrower than the min width. */
.pi-nav-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--pi-nav-link-card-min-width), 100%), 1fr));
    gap: var(--pi-nav-link-card-grid-gap);
}

/* Fill: cards split the full width equally, but never go below the min width (then wrap) */
.pi-nav-card-grid--fill {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--pi-nav-link-card-min-width), 100%), 1fr));
}

/* Stretch: rows split the available height equally (e.g. to match a square tile) */
.pi-nav-card-grid--stretch {
    height: 100%;
    grid-auto-rows: 1fr;
}

/* Let Elementor's HTML widget wrappers pass the height through */
.elementor-widget-html:has(.pi-nav-card-grid--stretch),
.elementor-widget-html:has(.pi-nav-card-grid--stretch) > .elementor-widget-container {
    height: 100%;
}

.pi-nav-card {
    display: flex;
    flex-direction: column;
    padding: var(--pi-nav-link-card-padding);
    font-family: var(--pi-nav-font-family);
    letter-spacing: var(--pi-nav-letter-spacing);
}

.pi-nav-card__title {
    display: block;
    margin-bottom: 12px;
    font-size: var(--pi-nav-font-size-card-title);
    font-weight: 700;
    line-height: 1.3;
    color: var(--pi-nav-color-text);
}

/* Divider under the title; turns orange on hover */
.pi-nav-card__title::after {
    content: "";
    display: block;
    width: var(--pi-nav-card-divider-length);
    height: var(--pi-nav-card-divider-thickness);
    margin-top: 8px;
    background-color: var(--pi-nav-color-card-divider);
    transition: background-color var(--pi-nav-transition);
}

/* Optional label above the body, e.g. "☆ Complete core courses" */
.pi-nav-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: var(--pi-nav-font-size-meta);
    font-family: var(--pi-nav-font-family-condensed);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--pi-nav-color-accent);
}

.pi-nav-card__meta svg {
    width: var(--pi-nav-arrow-size);
    height: var(--pi-nav-arrow-size);
    flex-shrink: 0;
}

.pi-nav-card__body {
    display: block;
    font-size: var(--pi-nav-font-size-card-body);
    font-family: var(--pi-nav-font-family-condensed);
    font-weight: 400;
    line-height: 1.4;
    color: var(--pi-nav-color-text);
}

.pi-nav-card:hover .pi-nav-card__title::after,
.pi-nav-card:focus-visible .pi-nav-card__title::after {
    background-color: var(--pi-nav-color-card-divider-hover);
}

/* ----- Icon card variant: icon box on the left, title + body on the right, no divider ----- */
.pi-nav-card--icon {
    flex-direction: row;
    align-items: center;
    gap: var(--pi-nav-card-icon-gap);
}

.pi-nav-card__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pi-nav-card--icon .pi-nav-card__title {
    margin-bottom: 4px;
}

.pi-nav-card--icon .pi-nav-card__title::after {
    content: none;
}

.pi-nav-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--pi-nav-card-icon-box-size);
    height: var(--pi-nav-card-icon-box-size);
    border: var(--pi-nav-card-border);
    border-radius: var(--pi-nav-card-radius);
    background-color: var(--pi-nav-color-card-hover-bg);
    color: var(--pi-nav-color-text);             /* the SVG strokes/fills use currentColor */
    transition:
        background-color var(--pi-nav-transition),
        border-color var(--pi-nav-transition),
        color var(--pi-nav-transition);
}

.pi-nav-card__icon svg {
    width: var(--pi-nav-card-icon-size);
    height: var(--pi-nav-card-icon-size);
    display: block;
}

/* Hover / keyboard focus: card uses the shared hover fill; icon box fills dark, icon turns white */
.pi-nav-card:hover .pi-nav-card__icon,
.pi-nav-card:focus-visible .pi-nav-card__icon {
    background-color: var(--pi-nav-color-icon-box-hover-bg);
    border-color: var(--pi-nav-color-icon-box-hover-bg);
    color: var(--pi-nav-color-icon-bg);
}

/* ===== Icon link (round icon + underlined text; shared across panels) ===== */
.pi-nav-icon-link,
.pi-nav-icon-link:hover,
.pi-nav-icon-link:focus {
    color: var(--pi-nav-color-accent);
    text-decoration: none;
}

.pi-nav-icon-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--pi-nav-font-family);
    letter-spacing: var(--pi-nav-letter-spacing);
}

/* Used as a <button> (e.g. opens Intercom): strip theme/Elementor button styles.
   button.* selectors outrank the theme's [type=button]:hover rules. */
button.pi-nav-icon-link,
button.pi-nav-icon-link:hover,
button.pi-nav-icon-link:focus {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--pi-nav-color-accent);
    font: inherit;
    font-family: var(--pi-nav-font-family);
    letter-spacing: var(--pi-nav-letter-spacing);
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.pi-nav-icon-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--pi-nav-icon-link-icon-size);
    height: var(--pi-nav-icon-link-icon-size);
    border: 1px solid var(--pi-nav-color-accent);
    border-radius: 50%;
    background-color: var(--pi-nav-color-icon-bg);
    color: var(--pi-nav-color-accent);           /* the SVG strokes/fills use currentColor */
    transition: background-color var(--pi-nav-transition), color var(--pi-nav-transition);
}

.pi-nav-icon-link__icon svg {
    width: var(--pi-nav-icon-link-glyph-size);
    height: var(--pi-nav-icon-link-glyph-size);
    display: block;
}

.pi-nav-icon-link__label {
    font-size: var(--pi-nav-font-size-icon-link);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    color: var(--pi-nav-color-accent);
    transition: color var(--pi-nav-transition);
}

/* Hover / keyboard focus: filled teal circle, white icon, lighter text */
.pi-nav-icon-link:hover .pi-nav-icon-link__icon,
.pi-nav-icon-link:focus-visible .pi-nav-icon-link__icon {
    background-color: var(--pi-nav-color-accent);
    color: var(--pi-nav-color-icon-bg);
}

.pi-nav-icon-link:hover .pi-nav-icon-link__label,
.pi-nav-icon-link:focus-visible .pi-nav-icon-link__label {
    color: var(--pi-nav-color-link-hover);
}

/* ===== Shared hover / keyboard focus: bold title + arrow ===== */
.pi-nav-get-started-card:hover .pi-nav-item-title,
.pi-nav-get-started-card:focus-visible .pi-nav-item-title,
.pi-nav-dive-deeper__card:hover .pi-nav-item-title,
.pi-nav-dive-deeper__card:focus-visible .pi-nav-item-title,
.pi-nav-list__link:hover .pi-nav-item-title,
.pi-nav-list__link:focus-visible .pi-nav-item-title {
    font-weight: 700;
}

/* Arrow on hover only on devices that really hover: iOS/iPadOS Safari treats a tap whose :hover reveals
   hidden content (the arrow fades in from opacity 0) as a hover only, so links needed two taps.
   Keyboard focus shows it everywhere. */
@media (hover: hover) {
    .pi-nav-get-started-card:hover .pi-nav-arrow,
    .pi-nav-dive-deeper__card:hover .pi-nav-arrow,
    .pi-nav-list__link:hover .pi-nav-arrow {
        opacity: 1;
        transform: translateX(0);
    }
}
.pi-nav-get-started-card:focus-visible .pi-nav-arrow,
.pi-nav-dive-deeper__card:focus-visible .pi-nav-arrow,
.pi-nav-list__link:focus-visible .pi-nav-arrow {
    opacity: 1;
    transform: translateX(0);
}