/* =========================================================================
   Page Designer — Footer Block Styles
   CSS Namespace: pd-blk-ftr-*
   ========================================================================= */

/* Setting group labels + dividers (dedicated to footer block) */
.pd-blk-ftr-group-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: inherit;
    margin: 6px 0 10px 0;
    padding: 0;
}
.pd-blk-ftr-group-label:first-child {
    margin-top: 0;
}
.pd-blk-ftr-group-divider {
    border: 0;
    border-top: 2px solid color-mix(in srgb, currentColor 15%, transparent);
    margin: 18px 0 14px 0;
    padding: 0;
    background: transparent;
    height: 0;
}

.pd-blk-ftr {
    background-color: color-mix(in srgb, currentColor 6%, transparent); /* v3.7.21 — subtle footer band, no admin token */
    color: inherit;
    padding: 60px 0 0;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* The footer IS the bottom of the page — there is never a gap under it.
   Global block spacing gives every [data-pd-block] a bottom margin, which left
   a strip of page background below the footer band on every generated site.
   Written as element+class (0,1,1) so it outranks that attribute rule (0,1,0)
   whatever the source order, and without !important. Top spacing is untouched —
   the footer still breathes away from the block above it. */
footer.pd-blk-ftr {
    margin-bottom: 0;
}

/* ── Theme colours (owner, 21 Oct 2026) — the Footer's "Theme colours" setting ──
   The band takes the theme's Body Text colour and every word in it (headings,
   text, page links, copyright, social icons) takes the theme's Brand Accent
   (the Tabs Active Text label, --pd-label-color). assets/blocks/footer/
   footer_theme.js measures the pair on each page and, where the accent would
   not read at 4.5:1 on the band, uses the Page Background colour instead (it
   always reads on the body text), so it holds on light, mid and dark presets.
   Until the script has measured, the band and words fall back to the same
   theme colours directly. */
.pd-blk-ftr[data-pd-ftr-theme="1"] {
    background-color: var(--pd-ftr-band, var(--pd-general-color, #1f2937));
    color: var(--pd-ftr-ink, var(--pd-color-bg, #ffffff));
}
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-heading,
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-text,
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-copyright,
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-link,
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-link:hover,
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-link:focus,
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-social-link {
    color: var(--pd-ftr-ink, var(--pd-color-bg, #ffffff));
}
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-link:hover,
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-link:focus {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-social-link {
    background: color-mix(in srgb, var(--pd-ftr-ink, #ffffff) 14%, transparent);
}
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-social-link:hover,
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-social-link:focus {
    background: var(--pd-ftr-ink, #ffffff);
    color: var(--pd-ftr-band, var(--pd-general-color, #1f2937));
}
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-bottom {
    border-top-color: color-mix(in srgb, var(--pd-ftr-ink, #ffffff) 25%, transparent);
}

.pd-blk-ftr-inner {
    max-width: var(--pd-container-width, 100%);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}

.pd-blk-ftr-col {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.pd-blk-ftr-heading {
    /* Follow the COLUMN's alignment, explicitly.
       The column centres its contents, and the heading used to pick that up by
       inheritance — but an inherited value loses to any rule that matches the
       element directly, and the site-wide theme sets text-align on a bare
       h1–h6 list. So a theme aligned left dragged every footer column heading
       left while its own text stayed centred. Stating "inherit" here matches
       the element (0,2,0, out-specifying the theme's 0,0,1) and still defers to
       whatever alignment the column is set to, so the footer's own alignment
       control keeps working. */
    text-align: inherit;
    color: inherit;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
    letter-spacing: 0.3px;
}

.pd-blk-ftr-text {
    font-size: 14px;
    line-height: 1.7;
    /* A long company blurb ran the full width of its column, so a centred
       three-column footer read as left-heavy beside the short Pages and
       Contact columns (owner, 14 Oct 2026). Capped and centred in its column
       like the other columns' contents. */
    max-width: 380px;
    margin: 0 auto 12px;
    color: inherit;
}

.pd-blk-ftr-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* ── More than four page links: two even columns (owner, 21 Oct 2026) ──
   A hard rule for every footer: five or more links are never one long
   column. They fill two columns top to bottom, as evenly as the count
   allows (6 = 3 + 3, 5 = 3 + 2, 8 = 4 + 4…), the pair centred in the
   footer column. Counted with :has(), so the auto-filled page list grows
   or shrinks with the site and needs no setting. The links themselves keep
   their colour, size and hover. */
.pd-blk-ftr-links:has(> .pd-blk-ftr-link:nth-child(5)) {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    justify-items: center;
    column-gap: 32px;
    row-gap: 8px;
}
.pd-blk-ftr-links:has(> .pd-blk-ftr-link:nth-child(7))  { grid-template-rows: repeat(4, auto); }
.pd-blk-ftr-links:has(> .pd-blk-ftr-link:nth-child(9))  { grid-template-rows: repeat(5, auto); }
.pd-blk-ftr-links:has(> .pd-blk-ftr-link:nth-child(11)) { grid-template-rows: repeat(6, auto); }
.pd-blk-ftr-links:has(> .pd-blk-ftr-link:nth-child(13)) { grid-template-rows: repeat(7, auto); }
.pd-blk-ftr-links:has(> .pd-blk-ftr-link:nth-child(15)) { grid-template-rows: repeat(8, auto); }
.pd-blk-ftr-links:has(> .pd-blk-ftr-link:nth-child(17)) { grid-template-rows: none; grid-auto-flow: row; }

.pd-blk-ftr-link {
    color: var(--pd-link-color, currentColor);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s;
}

.pd-blk-ftr-link:hover,
.pd-blk-ftr-link:focus {
    color: var(--pd-link-color, currentColor);
    text-decoration: none;
}
.pd-blk-ftr-social-link:hover,
.pd-blk-ftr-social-link:focus {
    text-decoration: none;
}

.pd-blk-ftr-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.pd-blk-ftr-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 8%, transparent); /* v3.7.21 — neutral social chip, no admin token */
    color: inherit;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.2s;
}

.pd-blk-ftr-social-link:hover {
    background: var(--pd-link-color, #89b4fa); /* v3.7.23 — accent follows Global Links */
    color: inherit;
}

.pd-blk-ftr-bottom {
    max-width: var(--pd-container-width, 100%);
    margin: 40px auto 0;
    padding: 20px 24px;
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    text-align: center;
}

.pd-blk-ftr-copyright {
    font-size: 13px;
    color: inherit;
    margin: 0;
}

@media (max-width: 768px) {
    .pd-blk-ftr-inner {
        flex-direction: column;
        gap: 32px;
    }
    .pd-blk-ftr-col {
        min-width: 100%;
    }
    .pd-blk-ftr {
        padding: 40px 0 0;
    }
    .pd-blk-ftr-bottom {
        margin-top: 32px;
    }
}

@media (max-width: 576px) {
    .pd-blk-ftr-inner {
        padding: 0 16px;
        gap: 24px;
    }
    .pd-blk-ftr {
        padding: 32px 0 0;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * v2.6.15: Dedicated panel chrome — migrated off the shared pd-dsp-*
 * namespace. Duplicated from editor.css:1074-1520 on 2026-04-09 and
 * renamed to pd-blk-ftr-pnl-* so the Footer settings panel can evolve
 * its chrome independently of the Design panel.
 *
 * Intentional fork — do NOT try to keep these in sync with pd-dsp-*.
 * ────────────────────────────────────────────────────────────────────── */
.pd-blk-ftr-pnl {
    position: fixed;
    top: 50px;
    right: -300px;
    width: 300px;
    height: calc(100vh - 50px);
    background: var(--at-color-background, #1e1e2e);
    border-left: 1px solid var(--at-color-border, #313244);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    transition: right 0.25s ease;
    overflow: hidden;
}
.pd-blk-ftr-pnl-visible {
    right: 0;
}
.pd-blk-ftr-pnl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--at-color-border, #313244);
    background: var(--at-color-card, #181825);
    flex-shrink: 0;
}
.pd-blk-ftr-pnl-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--at-color-card-foreground);
}
.pd-blk-ftr-pnl-title .fa {
    color: var(--at-color-link);
    margin-right: 6px;
}
.pd-blk-ftr-pnl-close {
    background: none;
    border: none;
    color: var(--at-color-card-foreground);
    cursor: pointer;
    font-size: 16px;
    padding: 4px 6px;
    border-radius: 4px;
}
.pd-blk-ftr-pnl-close:hover {
    color: var(--at-color-status-danger-fill-foreground, var(--at-color-destructive-fill-foreground));
    background: var(--at-color-status-danger-fill, var(--at-color-destructive-fill));
}
.pd-blk-ftr-pnl-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.pd-blk-ftr-pnl-body::-webkit-scrollbar { width: 5px; }
.pd-blk-ftr-pnl-body::-webkit-scrollbar-track { background: var(--at-color-background, #1e1e2e); }
.pd-blk-ftr-pnl-body::-webkit-scrollbar-thumb { background: var(--at-color-muted, #45475a); border-radius: 3px; }
.pd-blk-ftr-pnl-comp-label,
.pd-blk-ftr-pnl-comp-type {
    display: none !important;
}
.pd-blk-ftr-pnl-section {
    border-bottom: 1px solid var(--at-color-border, #313244);
}
.pd-blk-ftr-pnl-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--at-color-card-foreground);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.pd-blk-ftr-pnl-section-header:hover {
    background: var(--at-color-muted);
}
.pd-blk-ftr-pnl-section-icon {
    color: var(--at-color-link);
    width: 16px;
    text-align: center;
    font-size: 12px;
}
.pd-blk-ftr-pnl-section-arrow {
    margin-left: auto;
    font-size: 10px;
    color: var(--at-color-card-foreground);
    transition: transform 0.25s ease;
}
.pd-blk-ftr-pnl-open > .pd-blk-ftr-pnl-section-header .pd-blk-ftr-pnl-section-arrow {
    transform: rotate(180deg);
}
.pd-blk-ftr-pnl-section-body {
    padding: 4px 16px 16px;
}
.pd-blk-ftr-pnl-field {
    margin-bottom: 12px;
}
.pd-blk-ftr-pnl-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--at-color-card-foreground);
    margin-bottom: 4px;
}
.pd-blk-ftr-pnl-input {
    width: 100%;
    background: var(--at-color-secondary, #313244);
    border: 1px solid var(--at-color-border, #45475a);
    color: var(--at-color-card-foreground);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.pd-blk-ftr-pnl-input:focus {
    border-color: var(--at-color-primary, #89b4fa);
}
.pd-blk-ftr-pnl-select {
    cursor: pointer;
    -webkit-appearance: auto;
    appearance: auto;
}
.pd-blk-ftr-pnl-select option {
    background: var(--at-color-secondary, #313244);
    color: var(--at-color-card-foreground);
}
.pd-blk-ftr-pnl-color {
    width: 100%;
    height: 36px;
    border: 1px solid var(--at-color-border, #45475a);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    background: var(--at-color-secondary, #313244);
}
.pd-blk-ftr-pnl-color:hover {
    border-color: var(--at-color-primary, #89b4fa);
}
.pd-blk-ftr-pnl-slider-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.pd-blk-ftr-pnl-slider-field:last-child {
    margin-bottom: 0;
}
.pd-blk-ftr-pnl-slider {
    flex: 1;
    height: 6px;
    cursor: pointer;
    accent-color: var(--at-color-primary, #89b4fa);
    background: var(--at-color-secondary, #313244);
    border-radius: 3px;
    -webkit-appearance: auto;
    appearance: auto;
}
.pd-blk-ftr-pnl-slider-val {
    font-size: 12px;
    font-weight: 600;
    color: var(--at-color-card-foreground);
    min-width: 24px;
    text-align: right;
}
.pd-blk-ftr-pnl-slider-unit {
    font-size: 10px;
    color: var(--at-color-card-foreground);
}

/* ── Pages column in auto / menu mode ──────────────────────────────
 * When the column is bound to the site's pages rather than inline links, the
 * publish-time renderer replaces its children with a real <ul> menu tree. The
 * footer only ever styled bare <a> links, so that list arrived wearing its
 * browser default bullets. Strip the list chrome and let the links look the
 * same however the column is sourced. */
.pd-blk-ftr-links ul,
.pd-blk-ftr-links ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pd-blk-ftr-links li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pd-blk-ftr-links li::marker { content: ""; }

/* The page list's links wear the footer's own link look (owner, 26 Oct 2026):
   the same colour from the footer's theme label (volt on Brokora, not the
   site's general Link colour), size and hover as an ordinary .pd-blk-ftr-link,
   and the same centred column that turns into two even columns from five
   links up. The list is <ul><li><a class="pd-menu-link">, so the rules for
   bare links never reached it. */
.pd-blk-ftr-links > ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.pd-blk-ftr-links > ul:has(> li:nth-child(5)) {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    justify-items: center;
    column-gap: 32px;
    row-gap: 8px;
}
.pd-blk-ftr-links > ul:has(> li:nth-child(7))  { grid-template-rows: repeat(4, auto); }
.pd-blk-ftr-links > ul:has(> li:nth-child(9))  { grid-template-rows: repeat(5, auto); }
.pd-blk-ftr-links > ul:has(> li:nth-child(11)) { grid-template-rows: repeat(6, auto); }
.pd-blk-ftr-links > ul:has(> li:nth-child(13)) { grid-template-rows: repeat(7, auto); }
.pd-blk-ftr-links > ul:has(> li:nth-child(15)) { grid-template-rows: repeat(8, auto); }
.pd-blk-ftr-links > ul:has(> li:nth-child(17)) { grid-template-rows: none; grid-auto-flow: row; }
.pd-blk-ftr-links .pd-menu-link {
    color: var(--pd-link-color, currentColor);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s;
}
.pd-blk-ftr-links .pd-menu-link:hover,
.pd-blk-ftr-links .pd-menu-link:focus {
    color: var(--pd-link-color, currentColor);
    text-decoration: none;
}
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-links .pd-menu-link,
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-links .pd-menu-link:hover,
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-links .pd-menu-link:focus {
    color: var(--pd-ftr-ink, var(--pd-color-bg, #ffffff));
}
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-links .pd-menu-link:hover,
.pd-blk-ftr[data-pd-ftr-theme="1"] .pd-blk-ftr-links .pd-menu-link:focus {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ── Sign-in links under the copyright line ─────────────────────────────
   The website wizard adds one small row here: "Customer login" and/or "Staff
   login" (helpers/pd_wizard_nav_helper.php). The links themselves are the
   footer's ordinary .pd-blk-ftr-link — same colour, size and hover as every
   other footer link, from the same theme label. This rule only lays the row
   out; it states no colour and no font. */
.pd-blk-ftr-logins {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    margin-top: 12px;
}