/* =============================================================================
   pms-tabs.css — Custom reusable tabs theme element.
   Enqueued on every front-end page via pms-tabs.php.

   Design tokens used
   ──────────────────
   --global-palette1  Terracotta  — primary brand (used for focus ring)
   --global-palette2  Yellow      — hover background  ← change here if needed
   --global-palette3  Dark Blue   — default text; active tab background
   --global-palette7  Pale Gray   — content-area border
   --global-palette8  Pale Blue   — default tab background
   --global-palette9  White       — active tab text / icon

   Tab layout
   ──────────
   Tabs share the nav bar equally using flex: 1 1 0 on each button.
   The gap between tabs is controlled by --pms-tab-gap (default 4px) on .pms-tabs.
   Because flex distributes remaining space after gaps are subtracted, changing
   the gap never causes overflow — no calc() or tab-count arithmetic needed.
   ============================================================================= */


/* ── Container ───────────────────────────────────────────────────────────── */

.pms-tabs {
    /* Gap between tab buttons. Change this one value — widths auto-adjust. */
    --pms-tab-gap: 4px;
    width: 100%;
}

/* ── Navigation bar ──────────────────────────────────────────────────────── */

.pms-tabs__nav {
    display: flex;
    width: 100%;
    margin:  0;
    padding: 0;
    list-style: none;
    gap: var(--pms-tab-gap);
}

/* ── Individual tab button ───────────────────────────────────────────────── */

.pms-tabs__tab {
    /*
     * flex: 1 1 0 — each tab starts at zero width and grows equally.
     * The browser subtracts all gap space first, then distributes the
     * remainder equally among tabs. This works for any gap / tab count.
     */
    flex: 1 1 0;
    min-width: 0;   /* prevents long labels from forcing the tab wider than its share */

    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         10px 15px;
	border-radius:	 8px 8px 0 0;

    /* Typography */
    font-family: inherit;
    font-size:   16px;
    font-weight: inherit;
    line-height: 1.2;
    color:       var(--global-palette3);   /* Dark Blue text */
    /* Labels wrap to multiple lines rather than overflowing. */
    /* Appearance — default state */
    background-color: var(--global-palette8);   /* Pale Blue */
    border:           none;
    cursor:           pointer;

    /* Shadow — subtle 1 px grey lift (matches spec "1px grey") */
    box-shadow: 1px 1px 3px rgba(128, 128, 128, 0.45);

    /* Smooth state transitions */
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus: accessible ring that stays visible regardless of mouse/keyboard. */
.pms-tabs__tab:focus-visible {
    outline:        2px solid var(--global-palette1);
    outline-offset: -2px;
    z-index:        1;
}

/* Remove the default browser outline (we supply our own above). */
.pms-tabs__tab:focus:not(:focus-visible) {
    outline: none;
}


/* ── Icon inside tab ─────────────────────────────────────────────────────── */

/*
 * Override .pm-icons defaults (margin-right + em-based size) so the icon
 * is exactly 24 px and spacing is handled by the flex gap on the button.
 */
.pms-tabs__tab .pm-icons {
    font-size:   24px;
    flex-shrink: 0;
    margin-right: 0;   /* flex gap on the button provides the spacing */
    color: currentColor;
}


/* ── Label text ──────────────────────────────────────────────────────────── */

.pms-tabs__label {
    font-size: 16px;
    font-family: inherit;
    /* Wrap long labels; centre each line under the previous one. */
    white-space: normal;
    text-align:  center;
    word-break:  break-word;   /* prevents a single very long word from overflowing */
}


/* ── Hover state ─────────────────────────────────────────────────────────── */
/*
 * Yellow (--global-palette2) has been used as it provides good contrast with
 * the dark-blue text. Change the value on the next line to adjust.
 */

.pms-tabs__tab:hover:not(.pms-tabs__tab--active) {
    background-color: var(--global-palette2);
    box-shadow:       none;
}

/* ── Active / selected state ─────────────────────────────────────────────── */

.pms-tabs__tab--active,
.pms-tabs__tab[aria-selected="true"] {
    background-color: var(--global-palette3);   /* Dark Blue */
    color:            var(--global-palette9);   /* White text on dark bg */
    box-shadow:       none;
}

/* Icon inherits color:currentColor but we make it explicit for specificity. */
.pms-tabs__tab--active .pm-icons,
.pms-tabs__tab[aria-selected="true"] .pm-icons {
    color: var(--global-palette9);
}

/* ── Panels wrapper ──────────────────────────────────────────────────────── */

.pms-tabs__panels {
	background: var(--global-palette9);
	box-shadow: 1px 1px 3px rgba(128, 128, 128, 0.45);
}

/* ── Individual panel ────────────────────────────────────────────────────── */

/*
 * Panels not currently shown use the HTML `hidden` attribute (set by JS).
 * The CSS class handles the initial server-rendered state before JS runs.
 */
.pms-tabs__panel {
    display: none;
    padding: 1.5rem;
    /* Height scales naturally with content — no fixed height. */
}
.pms-tabs__panel--active,
.pms-tabs__panel:not([hidden]) {
    display: block;
}

/* ── Custon Tab variation for Download Tabs ─────────────────── */

.pms-download-tabs .pms-tabs__tab {
	box-shadow: none;
	background: none;
	margin-bottom: 12px;
	border-bottom: 8px solid var(--global-palette7);
    padding:       8px 20px;
	gap:		   12px;
}

/* make tabs gap bigger than standard */
.pms-download-tabs .pms-tabs__nav {
	gap: 12px;
}

.pms-download-tabs .pms-tabs__tab--active,
.pms-tabs__tab[aria-selected="true"] {
	background-color:	var(--global-palette9);   /* White */
	color:				var(--global-palette3);   /* dark blue */
	box-shadow:			none;
	border-color:		var(--global-palette3);
}
.pms-download-tabs .pms-tabs__tab--active .pm-icons,
.pms-tabs__tab[aria-selected="true"] .pm-icons {
    color: var(--global-palette3);
}

.pms-download-tabs .pms-tabs__tab:hover:not(.pms-tabs__tab--active) {
	color: var(--global-palette1);
	background-color: var(--global-palette9);
	border-color: var(--global-palette2);
}

/* remove padding from inside container panels (allows full panel colour to be set) */
.pms-download-tabs .pms-tabs__panel {
	padding: 0;
}
/*	END custom Tabs for Download */


/* ── Responsive: stack tabs vertically on narrow screens ─────────────────── */

@media (max-width: 600px) {
    .pms-tabs__nav {
        flex-direction: column;
    }

    .pms-tabs__tab {
        flex: none;
        width: 100%;
        justify-content: flex-start;  /* left-align icon + label when stacked */
    }

    /* Active panel moves inside the nav — apply card styling so it still looks
       like a content area rather than a raw div floating inside the tab list. */
    .pms-tabs__nav .pms-tabs__panel {
        background: var(--global-palette9);
        box-shadow: 1px 1px 3px rgba(128, 128, 128, 0.45);
        border-radius: 0 0 6px 6px;
    }
}


/* ── Side-positioned tabs (pms-tabs--pos-side) ───────────────────────────── */
/*
 * Switches the outer container to a row layout so the nav sits to the left
 * of the panels area.  The nav column width is set by min-width; the panels
 * column takes all remaining space.
 */

.pms-tabs--pos-side {
    display:        flex;
    flex-direction: row;
    align-items:    flex-start;
    gap:            0;
}

.pms-tabs--pos-side .pms-tabs__nav {
    flex-direction: column;
    width:          auto;
    min-width:      180px;
    flex-shrink:    0;
    /* Gap between stacked tab buttons. */
    gap:            var(--pms-tab-gap);
}

.pms-tabs--pos-side .pms-tabs__tab {
    flex:             none;
    width:            100%;
    justify-content:  flex-start;
    border-radius:    10px 0 0 10px;
}

.pms-tabs--pos-side .pms-tabs__panels {
    flex:      1;
    min-width: 0; /* prevents flex blowout on long content */
}

/* Responsive: collapse side nav to top on narrow screens. */
@media (max-width: 600px) {
    .pms-tabs--pos-side {
        flex-direction: column;
    }

    .pms-tabs--pos-side .pms-tabs__nav {
        flex-direction: row;
        width:          100%;
        min-width:      0;
    }

    .pms-tabs--pos-side .pms-tabs__tab {
        flex:          1 1 0;
        width:         auto;
        justify-content: center;
        border-radius: 10px 10px 0 0;
    }
}


/* ── Fit-content tab width (pms-tabs--width-text) ───────────────────────── */
/*
 * Each tab button shrinks to fit its own icon+text+padding rather than
 * sharing the nav bar equally.  The nav bar itself remains full-width;
 * tabs cluster to the left with the usual gap between them.
 */

.pms-tabs--width-text .pms-tabs__tab {
    flex: 0 0 auto;
}


/* ── Icon above label (pms-tabs--icon-above) ─────────────────────────────── */
/*
 * Stacks the icon directly above the label text inside each tab button.
 * Apply via the "Icon Position → Above label" option in the block sidebar.
 * For a custom style variant, add your own class via
 * Advanced → Additional CSS class(es) and target it here.
 */

.pms-tabs--icon-above .pms-tabs__tab {
    flex-direction: column;
    gap:            4px;
    padding:        12px 16px;
}

.pms-tabs--icon-above .pms-tabs__tab .pm-icons {
    font-size: 28px; /* slightly larger when displayed above the label */
}