/* ==========================================================================
   Poolie Header (ph) — new header, desktop mega menu, mobile menu.
   Every selector starts with .ph-header or .ph-* — nothing leaks site-wide.
   Never style .main-header here: it is kept on <header> only as a
   production.js hook.
   Breakpoints: desktop ≥1199px, mobile ≤1198px (theme `customlg`).
   ========================================================================== */

.ph-header {
    --ph-primary-100: #E0EAF6;
    --ph-primary-200: #9CBAE0;
    --ph-primary-400: #346CB4;
    --ph-primary-700: #1B4774;
    --ph-secondary-200: #FFBC6A;
    --ph-secondary-400: #F59825;
    --ph-black-400: #21231E;
    --ph-white: #FFFFFF;
    --ph-shadow-primary: 0 3px 9px 4px rgba(0, 0, 0, .06);
    --ph-panel-left: #F4F8FE;
    --ph-panel-mobile: #F5F8FC;
    --ph-divider: #D9D9D9;
    --ph-renov-hover: #FEF3E6;
    --ph-renov-border: rgba(245, 152, 37, .2);
    --ph-third-active: var(--ph-primary-200);
    --ph-mega-shadow: 0 8px 24px rgba(26, 41, 61, .10);
    --ph-bar-shadow: drop-shadow(0 3px 4px rgba(0, 0, 0, .06));
    --ph-bar-h: 79px;
    --ph-fade: 150ms;
    --ph-slide: 250ms;

    /* Neutralise legacy .main-header rules (main.css min-height 79/88px,
       poolie-cls-fixes.css fixed/height/transform) — same element, loaded later. */
    position: sticky;
    top: 0;
    z-index: 1100;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    transform: none;
    background: var(--ph-white);
    font-family: inherit;
    color: var(--ph-black-400);
}

.ph-header *,
.ph-header *::before,
.ph-header *::after {
    box-sizing: border-box;
}

/* Low-specificity resets for ph elements only (the rating widget keeps its own styles). */
.ph-bar :where(ul, ol),
.ph-mobile :where(ul, ol) {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ph-bar :where(p),
.ph-mobile :where(p) {
    margin: 0;
}

.ph-bar :where(a),
.ph-mobile :where(a) {
    color: inherit;
    text-decoration: none;
}

.ph-bar :where(button),
.ph-mobile :where(button) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ph-bar :where(svg),
.ph-mobile :where(svg) {
    display: block;
}

.ph-bar :focus-visible,
.ph-mobile :focus-visible {
    outline: 2px solid var(--ph-secondary-400);
    outline-offset: 2px;
}

/* No grey tap flash on mobile browsers. */
.ph-bar :where(a, button),
.ph-mobile :where(a, button) {
    -webkit-tap-highlight-color: transparent;
}

/* Ring only for keyboard focus (:focus-visible), never after pointer/touch. */
.ph-bar :focus:not(:focus-visible),
.ph-mobile :focus:not(:focus-visible) {
    outline: none;
}

/* ---------- Bar ---------- */

.ph-bar {
    position: relative;
    z-index: 10; /* above the rating tab (z 9) and the banner */
    height: var(--ph-bar-h);
}

/* White bar + drop-shadow on a pseudo layer, so the filter never becomes a
   containing block for the mega panel / mobile menu. */
.ph-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ph-white);
    filter: var(--ph-bar-shadow);
    pointer-events: none;
}

.ph-bar__inner {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 78px;
    max-width: 1325px;
    height: 100%;
    margin: 0 auto;
    padding: 16px 20px; /* 16 + 47 (tallest: CTAs) + 16 = 79 */
}

.ph-logo {
    display: block;
    flex: none;
    width: 109px;
    height: 47px;
    line-height: 0;
}

.ph-logo svg {
    display: block;
    width: 109px;
    height: 47px;
}

/* ---------- Top nav (desktop) ---------- */

.ph-nav {
    flex: none;
}

.ph-nav__list {
    display: flex;
    align-items: center;
    gap: 35px;
    padding: 10px;
}

.ph-nav__link,
.ph-nav__trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ph-black-400);
    white-space: nowrap;
    transition: color var(--ph-fade) ease;
}

.ph-nav__link:hover,
.ph-nav__link:focus-visible,
.ph-nav__trigger:hover,
.ph-nav__trigger:focus-visible,
.ph-nav__trigger[aria-expanded="true"] {
    color: var(--ph-secondary-400);
}

/* 7 × 5.5 layout box; the 9.83 × 6.5 stroke overflows it, as in Figma. */
.ph-nav__chev {
    position: relative;
    display: block;
    flex: none;
    width: 7px;
    height: 5.5px;
}

.ph-nav__chev svg {
    position: absolute;
    top: 0;
    left: -1.414px;
    width: 9.828px;
    height: 6.5px;
}

/* ---------- CTAs (bar + mobile footer) ---------- */

.ph-ctas {
    display: flex;
    flex: none;
    align-items: center;
    gap: 15px;
}

/* 0,3,0 specificity: beats functions.php inline `header.main-header a[href^="tel:"]`. */
.ph-header .ph-ctas .ph-cta,
.ph-header .ph-m-footer .ph-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 7px 22px; /* + 3px border = Figma 10px 25px with inside stroke → 47px tall */
    border: 3px solid var(--ph-secondary-400);
    border-radius: 40px;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    transition: background-color var(--ph-fade) ease, border-color var(--ph-fade) ease, color var(--ph-fade) ease;
}

.ph-header .ph-ctas .ph-cta--primary,
.ph-header .ph-m-footer .ph-cta--primary {
    background: var(--ph-secondary-400);
    color: var(--ph-white);
}

.ph-header .ph-ctas .ph-cta--outline,
.ph-header .ph-m-footer .ph-cta--outline {
    background: transparent;
    color: var(--ph-secondary-400);
}

.ph-header .ph-ctas .ph-cta--outline {
    width: 221px;
}

.ph-header .ph-ctas .ph-cta:hover,
.ph-header .ph-ctas .ph-cta:focus-visible,
.ph-header .ph-m-footer .ph-cta:hover,
.ph-header .ph-m-footer .ph-cta:focus-visible {
    background: var(--ph-primary-400);
    border-color: var(--ph-primary-400);
    color: var(--ph-white);
}

/* ---------- Mega panel ---------- */

.ph-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: -2; /* under the bar's shadow layer */
    display: flex;
    align-items: stretch;
    width: 1240px;
    max-width: calc(100vw - 40px);
    overflow: hidden;
    background: var(--ph-white);
    border-radius: 0 0 16px 16px;
    box-shadow: var(--ph-mega-shadow);
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity var(--ph-fade) ease;
}

.ph-mega.is-open {
    opacity: 1;
}

.ph-mega[hidden] {
    display: none;
}

.ph-eyebrow {
    display: block;
    margin: 0;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ph-primary-200);
}

.ph-eyebrow--link {
    align-self: flex-start;
    transition: color var(--ph-fade) ease;
}

.ph-eyebrow--link:hover,
.ph-eyebrow--link:focus-visible {
    color: var(--ph-secondary-400);
}

/* Left column */
.ph-mega__left {
    display: flex;
    flex: 0 0 280px;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: var(--ph-panel-left);
}

.ph-cats {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ph-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ph-primary-400);
    transition: background-color var(--ph-fade) ease, color var(--ph-fade) ease;
}

.ph-row:focus-visible {
    outline-offset: -2px;
}

.ph-row__chev {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
}

.ph-row__chev svg {
    width: 16px;
    height: 16px;
}

.ph-row--cat.is-active {
    background: var(--ph-primary-100);
    font-weight: 700;
    color: var(--ph-secondary-400);
}

/* Center column */
.ph-mega__center {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
}

.ph-mega--wide .ph-mega__center {
    flex: 0 1 560px;
}

.ph-pane {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ph-pane[hidden] {
    display: none;
}

.ph-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Column-major (top-to-bottom, then next column), as in Figma. */
.ph-list--cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--ph-rows, 8), auto);
    grid-auto-flow: column;
    column-gap: 20px;
    row-gap: 4px;
}

.ph-row--item {
    line-height: 1.5;
}

.ph-row__icon {
    display: block;
    flex: none;
    width: 22.72px;
    height: 22.72px;
}

.ph-row__icon svg {
    width: 100%;
    height: 100%;
}

.ph-row--item.has-children .ph-row__label {
    flex: 1 1 auto;
}

.ph-row--item.is-active {
    background: var(--ph-primary-100);
    font-weight: 700;
}

.ph-row--item.has-children.is-active {
    background: var(--ph-renov-hover);
    box-shadow: inset 0 0 0 1px var(--ph-renov-border);
    font-weight: 600;
    color: var(--ph-secondary-400);
}

.ph-pane__footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ph-pane__footer::before {
    content: "";
    display: block;
    height: 1px;
    background: var(--ph-divider);
}

.ph-footer-link {
    align-self: flex-start;
    padding: 0 12px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ph-secondary-400);
}

.ph-footer-link:hover {
    color: var(--ph-primary-400);
}

/* Leaf preview */
.ph-preview {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.ph-preview__title {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: var(--ph-primary-400);
}

.ph-preview__text {
    font-weight: 400; /* Figma 500; only 400/600/700 are loaded */
    font-size: 16px;
    line-height: 1.5;
    color: var(--ph-black-400);
}

.ph-preview__link {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ph-secondary-400);
    margin-top: 8px;
}

.ph-preview__link:hover {
    color: var(--ph-primary-400);
}

/* Right column */
.ph-mega__right {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
    background: var(--ph-primary-400);
}

.ph-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.ph-right[hidden] {
    display: none;
}

.ph-right__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.ph-feature {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 295px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ph-white);
}

.ph-feature__icon {
    display: block;
    flex: none;
    width: 45px;
    height: 45px;
}

.ph-feature__icon svg {
    width: 100%;
    height: 100%;
}

.ph-feature__text {
    flex: 1 1 0;
    min-width: 0;
}

.ph-right__text {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ph-white);
}

.ph-right__text p {
    margin: 0;
}

.ph-right__text p + p {
    margin-top: 1.4em; /* one blank line */
}

.ph-panel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    border-radius: 40px;
    background: var(--ph-white);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ph-primary-400);
    white-space: nowrap;
    transition: background-color var(--ph-fade) ease, color var(--ph-fade) ease;
}

.ph-panel-btn:hover,
.ph-panel-btn:focus-visible {
    background: var(--ph-secondary-400);
    color: var(--ph-white);
}

/* Third level (right column) */
.ph-right--third {
    align-items: stretch;
    gap: 16px;
}

.ph-third {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ph-row--third {
    line-height: 1.5;
    color: var(--ph-white);
}

.ph-row--third:hover,
.ph-row--third:focus-visible {
    background: var(--ph-third-active);
}

/* ---------- Rating widget positioning ---------- */

/* Own stacking layer (z 1) so the widget's z 9 stays below bar + mobile menu. */
.ph-rating {
    position: relative;
    z-index: 1;
    max-width: 1325px;
    height: 0;
    margin: 0 auto;
}

/* Desktop badge sits beside the 1240px mega panel (not under it), so hide it
   while a panel is open. Hide: fade, then visibility after the fade. Show: instant visibility + fade in. */
.ph-header .ph-rating__desktop {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--ph-fade) ease, visibility 0s;
}

.ph-header.ph-is-mega-open .ph-rating__desktop {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ph-fade) ease, visibility 0s linear var(--ph-fade);
}

/* Beats the widget's inline `header .mobile-rating-widget` and main.css's -16px margin. */
.ph-header .ph-rating__mobile {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: auto;
    margin: 0;
    padding: 0;
    transform: none;
    text-align: right;
}

/* Under the desktop breakpoint the page (closed-state) badge is hidden.
   On mobile the badge only shows inside the open menu (.ph-m-rating). */
@media (max-width: 1198px) {
    .ph-header .ph-rating__mobile {
        display: none;
    }
}

/* ---------- Mobile toggle ---------- */

.ph-toggle {
    display: none;
}

/* ---------- Mobile menu ---------- */

.ph-mobile {
    display: none;
}

/* Scroll lock on <html> only: overflow on body would make it a scroll container
   and break position: sticky. */
.ph-lock {
    overflow: hidden;
    overscroll-behavior: none;
}

@media (max-width: 1198px) {
    .ph-nav,
    .ph-ctas {
        display: none;
    }

    .ph-bar__inner {
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        max-width: none;
        padding: 16px;
    }

    .ph-header .ph-toggle {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: flex-end;
        width: 44px;
        height: 44px;
        color: var(--ph-secondary-400);
    }

    .ph-toggle__icon {
        display: block;
        line-height: 0;
    }

    .ph-toggle__icon--close,
    .ph-toggle[aria-expanded="true"] .ph-toggle__icon--open {
        display: none;
    }

    .ph-toggle[aria-expanded="true"] .ph-toggle__icon--close {
        display: block;
    }

    .ph-mobile {
        position: fixed;
        top: var(--ph-m-top, var(--ph-bar-h));
        right: 0;
        left: 0;
        z-index: 5; /* below the bar (10), above the rating tab layer (1) */
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--ph-m-top, var(--ph-bar-h)));
        height: calc(100svh - var(--ph-m-top, var(--ph-bar-h)));
        background: var(--ph-white);
    }

    .ph-mobile[hidden] {
        display: none;
    }

    /* Badge while the menu is open: centered under the bar, list starts below it.
       Overrides the widget's inline `header .mobile-rating-widget` / `.rating-widget`. */
    .ph-header .ph-m-rating {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        flex: none;
        align-self: center;
        width: auto;
        margin: 0;
        padding: 0;
        transform: none;
        text-align: center;
    }

    .ph-m-nav {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    .ph-m-viewport {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .ph-m-screen {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 24px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: var(--ph-white);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--ph-slide) ease, visibility 0s linear var(--ph-slide);
    }

    /* Level-0 rows are stacked with no gap (Figma 3120:7232 / 7368); drill screens keep 12px. */
    .ph-m-screen--root {
        gap: 0;
        padding-bottom: 0; /* Figma 3120:7368: pt 24 / px 24, no bottom padding */
    }

    .ph-m-screen.is-active {
        transform: none;
        visibility: visible;
        transition: transform var(--ph-slide) ease, visibility 0s;
    }

    .ph-m-screen.is-past {
        transform: translateX(-100%);
    }

    /* Drill screens: Back stays put, the panel list scrolls (Figma 3120:7800). */
    .ph-m-screen:not(.ph-m-screen--root) {
        overflow-y: hidden;
    }

    .ph-m-screen:not(.ph-m-screen--root) > .ph-m-panel {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* 4px pill scrollbar */
    .ph-m-screen::-webkit-scrollbar,
    .ph-m-panel::-webkit-scrollbar {
        width: 4px;
    }

    .ph-m-screen::-webkit-scrollbar-track,
    .ph-m-panel::-webkit-scrollbar-track {
        background: transparent;
    }

    .ph-m-screen::-webkit-scrollbar-thumb,
    .ph-m-panel::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: var(--ph-primary-400);
    }

    @supports not selector(::-webkit-scrollbar) {
        .ph-m-screen,
        .ph-m-panel {
            scrollbar-width: thin;
            scrollbar-color: var(--ph-primary-400) transparent;
        }
    }

    /* Level 0 */
    .ph-m-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 8px 0;
        font-weight: 600;
        font-size: 18px;
        line-height: 1.4;
        color: var(--ph-black-400);
        transition: color var(--ph-fade) ease;
    }

    .ph-m-top[aria-expanded="true"] {
        color: var(--ph-secondary-400);
    }

    .ph-m-top__chev {
        display: block;
        flex: none;
        width: 22px;
        height: 22px;
        transition: transform var(--ph-slide) ease;
    }

    .ph-m-top[aria-expanded="true"] .ph-m-top__chev {
        transform: rotate(180deg);
    }

    /* Accordion + drill panels */
    .ph-m-panel {
        padding: 0 12px;
        border-radius: 12px;
        background: var(--ph-panel-mobile);
    }

    .ph-m-panel[hidden] {
        display: none;
    }

    .ph-m-acc {
        margin: 0; /* Figma 3120:7368: panel sits directly under its row */
    }

    .ph-m-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 12px 0;
        font-weight: 600;
        font-size: 15px;
        line-height: 1.4;
        color: var(--ph-primary-400);
    }

    .ph-m-row:focus-visible,
    .ph-m-top:focus-visible,
    .ph-m-back:focus-visible {
        outline-offset: -2px;
    }

    .ph-m-row__chev {
        display: block;
        flex: none;
        width: 16px;
        height: 16px;
    }

    .ph-m-row--parent {
        color: var(--ph-secondary-400);
    }

    .ph-m-row--child {
        padding-left: 12px;
    }

    .ph-m-back {
        display: flex;
        flex: none;
        align-items: center;
        align-self: flex-start;
        gap: 5px;
        padding: 8px 0;
        font-weight: 600;
        font-size: 16px;
        line-height: 1.5;
        color: var(--ph-primary-400);
    }

    .ph-m-back__chev {
        display: block;
        flex: none;
        width: 22px;
        height: 22px;
    }

    /* Footer CTAs pinned under the scroll area */
    .ph-m-footer {
        display: flex;
        flex: none;
        flex-direction: column;
        gap: 16px;
        padding: 24px 16px;
        background: var(--ph-white);
    }

    .ph-header .ph-m-footer .ph-cta {
        width: 100%;
    }
}

/* Logged-in admin bar: fixed 46px at 601–782px (at ≤600px WP makes it scroll away),
   fixed 32px above 782px. The mobile panel offset follows automatically (JS measures the bar). */
@media (min-width: 601px) and (max-width: 782px) {
    .ph-header.ph-header--admin-bar {
        top: 46px;
    }
}

@media (min-width: 783px) {
    .ph-header.ph-header--admin-bar {
        top: 32px;
    }
}

@media (min-width: 1199px) {
    /* Fit 1199–1290px without wrapping: shrink the 78px bar gaps. */
    .ph-bar__inner {
        gap: min(78px, max(16px, calc((100vw - 1180px) / 2)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ph-header *,
    .ph-header *::before,
    .ph-header *::after {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

/* Menu open: header pinned where it was (JS sets --ph-fixed-top: 0, the admin-bar or
   #simple-banner offset), so the bar stays visible from any scroll position. Last in the
   file so it wins over the admin-bar `top`. */
@media (max-width: 1198px) {
    .ph-header.ph-is-mobile-open {
        position: fixed;
        top: var(--ph-fixed-top, 0);
        right: 0;
        left: 0;
    }

    /* Only the in-panel badge while open. */
    .ph-header.ph-is-mobile-open .ph-rating__mobile {
        visibility: hidden;
    }
}

/* Mobile Google badge sized to Figma 3120:7232 (60px tab, 42px logo, 15px/1.4 label).
   Scoped to the new header; the widget's own styles are untouched. */
@media (max-width: 1198px) {
    .ph-header .ph-rating__mobile .poolie-grw__main,
    .ph-header .ph-m-rating .poolie-grw__main {
        min-height: 60px;
    }

    .ph-header .ph-rating__mobile .rating-right,
    .ph-header .ph-m-rating .rating-right {
        height: 60px;
        padding: 0 16px;
    }

    .ph-header .ph-rating__mobile .poolie-grw__logo__wrapper,
    .ph-header .ph-m-rating .poolie-grw__logo__wrapper {
        padding: 0 0 0 16px;
    }

    .ph-header .ph-rating__mobile .poolie-grw__logo,
    .ph-header .ph-m-rating .poolie-grw__logo {
        width: 42px;
        height: 42px;
    }

    .ph-header .ph-rating__mobile .poolie-grw__label,
    .ph-header .ph-m-rating .poolie-grw__label {
        font-size: 15px;
        line-height: 1.4;
    }
}