/**
 * Palmer Footer Widget
 * assets/css/palmer-footer-widget.css
 */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&display=swap');

/* ─── Root ───────────────────────────────────────────────────────────────────── */
.pfw-footer {
    background-color: var(--pfw-bg, #2a2a2a);
    color: var(--pfw-text, #ffffff);
    font-family: 'Jost', sans-serif;
    padding: var(--pfw-padding-v, 56px) var(--pfw-padding-h, 60px);
}

/* ─── Master grid ─────────────────────────────────────────────────────────────
   Two columns shared by every row:
     col 1 = 38%  → logo / tagline / social+legal
     col 2 = 1fr  → nav / subscribe button
   The divider spans both columns.
*/
.pfw-grid {
    display: grid;
    grid-template-columns: 38% 1fr;
    grid-template-rows: auto auto auto;   /* brand+nav | divider | bottom */
    grid-template-areas:
        "brand  nav"
        "div    div"
        "left   right";
    row-gap: 0;
    column-gap: 0;
}

/* ── Brand column ──────────────────────────────────────────────────────────── */
.pfw-logo-wrap {
    grid-area: brand;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-right: 40px;
    padding-bottom: 48px;
    align-self: start;
}

.pfw-logo img {
    max-width: var(--pfw-logo-width, 80px);
    height: auto;
    display: block;
}

.pfw-logo-placeholder {
    width: var(--pfw-logo-width, 80px);
    height: 60px;
    border: 1.5px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    letter-spacing: 0.1em;
}

.pfw-tagline {
    font-family: 'Baskerville', 'Libre Baskerville', 'Times New Roman', serif;
    /* clamp(): mobile floor 20px, scales up to desktop size, capped at var */
    font-size: clamp(20px, 4vw, var(--pfw-tagline-size, 40px));
    font-weight: 400;
    line-height: 1.15;
    color: var(--pfw-text, #ffffff);
    margin: 0;
}

/* ── Nav column ────────────────────────────────────────────────────────────── */
.pfw-nav {
    grid-area: nav;
    display: grid;
    /* auto columns packed together, pushed to the right of the nav cell */
    grid-template-columns: repeat(4, auto);
    justify-content: end;   /* pack all columns to the right edge */
    column-gap: 60px;       /* consistent gap between each column */
    row-gap: 0;
    align-items: start;
    padding-bottom: 48px;
}

.pfw-nav-col h4 {
    font-family: 'Jost', sans-serif;
    font-size: var(--pfw-nav-heading-size, 11px);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pfw-text, #ffffff);
    margin: 0 0 14px 0;
}

.pfw-nav-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pfw-nav-col ul li a {
    font-family: 'Jost', sans-serif;
    font-size: var(--pfw-nav-link-size, 14px);
    font-weight: 300;
    color: var(--pfw-nav-link-color, rgba(255,255,255,0.65));
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
    display: block;
    line-height: 1.5;
}

.pfw-nav-col ul li a:hover     { color: var(--pfw-accent, #7dbfbf); }
.pfw-nav-col ul li a.is-accent { color: var(--pfw-accent, #7dbfbf); }



/* ── Divider — spans full width ────────────────────────────────────────────── */
.pfw-divider {
    grid-area: div;
    height: 1px;
    background: rgba(255,255,255,0.12);
}

/* ── Bottom left — social + legal ──────────────────────────────────────────── */
.pfw-bottom-left {
    grid-area: left;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    padding-top: 24px;
}

.pfw-social {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pfw-social a {
    color: var(--pfw-text, #ffffff);
    opacity: 0.75;
    transition: opacity 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.pfw-social a:hover {
    opacity: 1;
    color: var(--pfw-accent, #7dbfbf);
}

.pfw-social svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.pfw-legal {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.pfw-legal a {
    font-family: 'Jost', sans-serif;
    font-size: var(--pfw-legal-size, 10px);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pfw-legal a:hover { color: rgba(255,255,255,0.75); }

/* ── Bottom right — subscribe button ───────────────────────────────────────── */
/*
   The right cell fills the full nav column width.
   display:flex + justify-content:flex-end pushes the button
   to the right edge of that cell — same right edge as the nav above.
*/
.pfw-bottom-right {
    grid-area: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: center;
    padding-top: 24px;
}

/* Square button — no rounding anywhere */
.pfw-subscribe-btn {
    font-family: 'Jost', sans-serif;
    font-size: var(--pfw-btn-size, 11px);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--pfw-accent, #7dbfbf);
    color: var(--pfw-btn-text, #1a1a1a);
    border: none;
    border-radius: 0 !important;
    padding: 13px 30px;
    cursor: pointer;
    transition: background 0.25s ease;
    display: inline-block;
    text-decoration: none;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}

.pfw-subscribe-btn:hover {
    background: color-mix(in srgb, var(--pfw-accent, #7dbfbf) 80%, white);
}

/* ─── Modal Overlay ──────────────────────────────────────────────────────────── */
.pfw-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pfw-modal-overlay[hidden] {
    display: none;
}

.pfw-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ─── Modal Box ───────────────────────────────────────────────────────────────── */
.pfw-modal {
    background: #ffffff;
    width: 100%;
    max-width: 460px;
    padding: 44px 40px 40px;
    position: relative;
    border-radius: 0;
    transform: translateY(18px);
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
    max-height: 90vh;
    overflow-y: auto;
}

.pfw-modal-overlay.is-open .pfw-modal { transform: translateY(0); }

.pfw-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.pfw-modal-close:hover { opacity: 1; }

.pfw-modal-close svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

/* ─── Modal Content ──────────────────────────────────────────────────────────── */
.pfw-modal-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #333;
    margin: 0 0 12px 0;
}

.pfw-modal-heading {
    font-family: 'Jost', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #111;
    margin: 0 0 14px 0;
    line-height: 1.35;
}

.pfw-modal-subtext {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: #555;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

/* ─── Modal Form ──────────────────────────────────────────────────────────────── */
.pfw-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pfw-modal-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #d8d8d8;
    padding: 14px 0;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #111;
    background: transparent;
    outline: none;
    border-radius: 0;
    transition: border-bottom-color 0.2s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.pfw-modal-input:focus { border-bottom-color: var(--pfw-modal-accent, #7dbfbf); }
.pfw-modal-input::placeholder { color: #aaa; font-weight: 300; }

.pfw-modal-legal {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: #777;
    line-height: 1.55;
    margin: 22px 0 24px;
}

.pfw-modal-legal a { color: #333; text-decoration: underline; text-underline-offset: 2px; }
.pfw-modal-legal a:hover { color: #111; }

.pfw-modal-submit {
    background: var(--pfw-modal-accent, #7dbfbf);
    color: var(--pfw-modal-btn-text, #1a1a1a);
    border: none;
    border-radius: 0 !important;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 14px 32px;
    cursor: pointer;
    transition: background 0.25s ease;
    align-self: flex-start;
    -webkit-appearance: none;
    appearance: none;
}

.pfw-modal-submit:hover {
    background: color-mix(in srgb, var(--pfw-modal-accent, #7dbfbf) 80%, white);
}

.pfw-modal-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ─── Modal Message ──────────────────────────────────────────────────────────── */
.pfw-modal-message {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 400;
    margin-top: 14px;
    min-height: 20px;
}

.pfw-modal-message.is-success { color: var(--pfw-modal-accent, #7dbfbf); }
.pfw-modal-message.is-error   { color: #c0392b; }

/* ─── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .pfw-grid {
        grid-template-columns: 35% 1fr;
    }
}

/* ── Tablet: single column, nav 2-up ──────────────────────────────────────── */
@media (max-width: 900px) {
    .pfw-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "nav"
            "div"
            "right"
            "left";        /* subscribe above social/legal on mobile */
    }

    .pfw-logo-wrap {
        padding-right: 0;
        padding-bottom: 32px;
        gap: 20px;
    }

    .pfw-nav {
        grid-template-columns: repeat(2, 1fr);
        justify-content: start;
        column-gap: 32px;
        row-gap: 32px;
        padding-bottom: 32px;
    }

    .pfw-tagline { font-size: 30px; }

    .pfw-bottom-right {
        justify-content: flex-start;
        padding-top: 24px;
        padding-bottom: 8px;
    }

    .pfw-bottom-left {
        padding-top: 20px;
    }
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pfw-footer {
        padding: 32px 20px 28px !important;
        position: relative;
        z-index: 2147483647 !important;
    }

    /* Single col — switch to flex so 'order' controls work */
    .pfw-footer .pfw-grid {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Default order matches the Elementor defaults (1-5) */
    .pfw-footer .pfw-logo-wrap   { order: 1; }
    .pfw-footer .pfw-nav         { order: 2; }
    .pfw-footer .pfw-divider     { order: 3; }
    .pfw-footer .pfw-bottom-right { order: 4; }
    .pfw-footer .pfw-bottom-left  { order: 5; }

    /* Logo + tagline on one row */
    .pfw-footer .pfw-logo-wrap {
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
        padding-bottom: 28px !important;
        padding-right: 0 !important;
    }

    .pfw-footer .pfw-logo img,
    .pfw-footer .pfw-logo-placeholder {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        flex-shrink: 0 !important;
    }

    /* clamp() handles tagline already but force the var to a mobile value */
    .pfw-footer {
        --pfw-tagline-size: 22px !important;
    }

    /* Nav 2-col */
    .pfw-footer .pfw-nav {
        grid-template-columns: repeat(2, 1fr) !important;
        justify-content: start !important;
        column-gap: 24px !important;
        row-gap: 28px !important;
        padding-bottom: 28px !important;
    }

    .pfw-footer .pfw-nav-col h4 { font-size: 11px !important; }
    .pfw-footer .pfw-nav-col ul li a { font-size: 14px !important; }

    /* Subscribe full width */
    .pfw-footer .pfw-subscribe-btn {
        width: 100% !important;
        text-align: center !important;
        padding: 15px 24px !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .pfw-footer .pfw-bottom-right {
        width: 100% !important;
        padding-top: 20px !important;
        padding-bottom: 4px !important;
        justify-content: flex-start !important;
    }

    /* Social + legal stacked */
    .pfw-footer .pfw-bottom-left {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        padding-top: 16px !important;
    }

    .pfw-modal { padding: 32px 20px 28px; }
}

/* ── Small mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
    .pfw-footer {
        padding: 24px 16px 24px !important;
        --pfw-tagline-size: 18px !important;
    }

    .pfw-footer .pfw-logo-wrap { gap: 12px !important; }

    .pfw-footer .pfw-logo img,
    .pfw-footer .pfw-logo-placeholder {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }

    .pfw-footer .pfw-nav {
        column-gap: 16px !important;
        row-gap: 20px !important;
    }

    .pfw-footer .pfw-nav-col h4 { font-size: 10px !important; }
    .pfw-footer .pfw-nav-col ul li a { font-size: 13px !important; }
}