/* ============================================================
   newdgrie/default — _05_footer.css

   Editorial footer: 4 columns (brand · shop · service ·
   newsletter+about) + bottom legal strip.
   ============================================================ */


/* ── FOOTER WRAPPER ───────────────────────────────────────── */

.dg-footer {
    background: var(--dg-ink);
    color: var(--dg-paper);
    /* No margin-top: when the page above ends in the dark
       newsletter band, footer continues that block seamlessly.
       When the page above ends in cream content, the contrast
       still reads cleanly because background is var(--dg-ink). */
    padding: clamp(56px, 8vw, 80px) 0 0;
}

.dg-footer__inner {
    max-width: var(--dg-container-max);
    margin: 0 auto;
    padding: 0 var(--dg-gutter);
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 64px;
    margin-bottom: var(--dg-space-3xl);
}

@media (max-width: 1024px) {
    .dg-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }
}
@media (max-width: 600px) {
    .dg-footer__inner {
        grid-template-columns: 1fr;
        gap: var(--dg-space-2xl);
    }
}


/* ── COLUMNS ──────────────────────────────────────────────── */

.dg-footer__col--brand { padding-right: 32px; }

.dg-footer__wordmark {
    font-family: var(--dg-font-serif);
    font-size: 28px;
    letter-spacing: 0.3em;
    padding-left: 0.3em;
    color: var(--dg-paper);
    margin-bottom: 16px;
}

.dg-footer__tagline {
    /* The <em> child is italic. We let the italic do the work,
       so the wrapper paragraph stays at normal style — clean
       hierarchy: italic tagline + uppercase branch names. */
    font-family: var(--dg-font-serif);
    font-size: 28px;
    font-style: italic;
    line-height: var(--dg-leading-snug);
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 24px;
    max-width: 280px;
}
.dg-footer__tagline em {
    font-style: italic;
    /* In case the parent ever loses italic, em still wins. */
}

.dg-footer__branches {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dg-footer__branch {
    font-family: var(--dg-font-sans);
    font-size: 11px;
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}


/* ── HEADINGS ─────────────────────────────────────────────── */

.dg-footer__heading {
    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-xs);
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-paper);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}


/* ── LINK LISTS ───────────────────────────────────────────── */

.dg-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dg-footer__links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: var(--dg-text-sm);
    transition: color var(--dg-duration-fast) var(--dg-ease);
    display: inline-block;
    padding: 2px 0;
}
.dg-footer__links a:hover { color: var(--dg-gold-soft); }

.dg-footer__links--small a { font-size: var(--dg-text-xs); }


/* ── SOCIAL ───────────────────────────────────────────────── */

.dg-footer__social {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 4px;
}
.dg-footer__social a {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--dg-duration-fast) var(--dg-ease),
                border-color var(--dg-duration-fast) var(--dg-ease),
                background var(--dg-duration-fast) var(--dg-ease);
    text-decoration: none;
}
.dg-footer__social a:hover {
    color: var(--dg-ink);
    background: var(--dg-paper);
    border-color: var(--dg-paper);
}

.dg-footer__line-text {
    font-size: 9px;
    font-weight: var(--dg-weight-medium);
    letter-spacing: 0.1em;
}


/* ── NEWSLETTER ───────────────────────────────────────────── */

.dg-footer__newsletter-intro {
    font-size: var(--dg-text-xs);
    color: rgba(255, 255, 255, 0.6);
    line-height: var(--dg-leading-snug);
    margin-bottom: 16px;
}

/* Reset form completely — defensive against any inherited
   .dg-newsletter rules from other stylesheets (the home page
   _10_home.css used to share this class name and could leak
   padding/background styles into the footer form). */
.dg-footer__col--newsletter form.dg-newsletter {
    margin: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    max-width: none;
    display: block;
}

/* Also explicitly reset the small links list so it sits
   directly under the form with no inherited padding. */
.dg-footer__col--newsletter .dg-footer__links--small {
    margin-top: 24px;
}

.dg-newsletter__row {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    transition: border-color var(--dg-duration-fast) var(--dg-ease);
}
.dg-newsletter__row:focus-within {
    border-bottom-color: var(--dg-paper);
}

.dg-newsletter__input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--dg-paper);
    padding: 12px 0;
    font-size: var(--dg-text-sm);
    font-family: var(--dg-font-sans);
}
.dg-newsletter__input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.dg-newsletter__submit {
    background: transparent;
    border: 0;
    color: var(--dg-paper);
    padding: 12px 4px 12px 12px;
    font-size: 18px;
    cursor: pointer;
    transition: color var(--dg-duration-fast) var(--dg-ease),
                transform var(--dg-duration-fast) var(--dg-ease);
}
.dg-newsletter__submit:hover {
    color: var(--dg-gold-soft);
    transform: translateX(2px);
}


/* ── BOTTOM STRIP ─────────────────────────────────────────── */

.dg-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px 0;
}

.dg-footer__bottom-inner {
    max-width: var(--dg-container-max);
    margin: 0 auto;
    padding: 0 var(--dg-gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.dg-footer__copyright {
    font-size: var(--dg-text-xs);
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: var(--dg-track-wide);
}

.dg-footer__legal-links {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: var(--dg-text-xs);
    letter-spacing: var(--dg-track-wide);
    color: rgba(255, 255, 255, 0.3);
}
.dg-footer__legal-links a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color var(--dg-duration-fast) var(--dg-ease);
}
.dg-footer__legal-links a:hover { color: var(--dg-paper); }


/* ─────────────────────────────────────────────────────────
   DG-P12c — Footer "Help & Guidance" column polish
   Hairline separator above the Contact link to set it apart
   from informational entries (it's an action, not info).
   ───────────────────────────────────────────────────────── */
 
.dg-footer__links-sep {
    list-style: none;
    margin: 10px 0;
    padding: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    /* Slightly inset so it doesn't span the full column width */
    max-width: 32px;
}
 
/* Dark-mode footer variant (if site has body.is-dark-footer) */
body.is-dark-footer .dg-footer__links-sep,
.dg-footer--dark .dg-footer__links-sep {
    background: rgba(255, 255, 255, 0.12);
}
 
/* DG-FIX 2026-06-04: Confirm-via-email hint under footer newsletter */
.dg-footer__newsletter-hint {
    margin: 14px 0 0;
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    line-height: 1.5;
}