/* =====================================================================
   horo-period-hub v3.3.2
   Option C — unified card with internal divisions.

   The card wraps the period tabs + sign dropdown + birthday checker
   into one bordered container. Internal sizing is tightened so the
   block reads as a single compact "tool" rather than three loose rows.

   The H1 is rendered by the theme template (entry-title) and is NOT
   touched by this module.
   ===================================================================== */

.hphub {
    margin: 0 0 24px;
}

/* ---- The card shell ------------------------------------------------- */
.hphub__card {
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 16, 61, .04);
    /* No overflow:hidden — the dropdown panel needs to escape the card
       to render below the trigger. The card-row borders give the
       internal divider look without needing clipping. */
}

.hphub__card-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    flex-wrap: wrap;
}
.hphub__card-row + .hphub__card-row {
    border-top: 1px solid #f4f4f6;
}

/* ---- Force tabs and dropdown to stay on one line on desktop.
       Period tabs get the flexible space (and scroll horizontally if
       they don't fit). Dropdown gets a reserved fixed width on the
       right side and never wraps. */
.hphub__card .hnav {
    margin: 0;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hphub__card .hnav__periods {
    flex: 0 1 auto;
    /* Visible overflow on desktop so the active tab's rounded outline
       isn't clipped at the right edge when it sits next to the dropdown.
       Mobile re-enables overflow:auto for horizontal scrolling. */
    overflow: visible;
    /* Small right padding ensures the active outline never touches the
       dropdown trigger, even when "Месяц" (the last tab) is active. */
    padding-right: 6px;
}

/* ---- Dropdown — keep horo-nav's visual style. Period tabs hug the
       left at their natural width, then the dropdown stretches to fill
       all remaining row width so the card has no empty space on the
       right edge regardless of card width. */
.hphub__card .hnav__dd {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: none;
}
.hphub__card .hnav__dd-trigger {
    padding: 9px 14px;
    gap: 8px;
}

/* Panel anchored to the right edge of the trigger, expands wider so
   the 2-column sign grid + dates fit without truncation. */
.hphub__card .hnav__dd-panel {
    left: auto;
    right: 0;
    min-width: 380px;
    max-width: 460px;
}

/* ---- Period tabs hug the left; dropdown takes the rest ------------- */
.hphub__card-row--top {
    justify-content: flex-start;
}

/* ---- Mobile -------------------------------------------------------- */
@media (max-width: 660px) {
    .hphub__card-row {
        padding: 11px 14px;
        gap: 10px;
    }
    .hphub__card .hnav { flex-wrap: wrap; }
    .hphub__card .hnav__periods {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        /* Slightly more vertical padding when scrolling so the active
           tab's outline isn't clipped against the scroll container. */
        padding: 3px 6px 3px 0;
    }
    .hphub__card .hnav__periods::-webkit-scrollbar { display: none; }
    .hphub__card .hnav__dd {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
    }
    .hphub__card .hnav__dd-panel {
        left: 0;
        right: 0;
        min-width: 0;
        max-width: none;
    }
}