/* app-footer.css — DoreshTzion site CSS: site footer (logo, links, blessing form, copyright). @split-marker */

.content-footer.footer {
    background-color: var(--bs-dtz-bg);
    border-top: 2px solid var(--bs-dtz-primary);
}

.content-footer.footer .card {
    background-color: var(--bs-dtz-bg);
    border: 2px solid var(--dtz-bronze);
    box-shadow: none;
}
/* Footer brand: SVG logo (replaced the BANiflaot text logo). Heights track the
   old .logo-text font-size steps so the footer keeps its proportions. */
.footer-logo-img {
    display: block;
    height: 72px;
    width: auto;
}
@media (min-width: 1200px) { .footer-logo-img { height: 84px; } }
@media (min-width: 1600px) { .footer-logo-img { height: 96px; } }

.footer.logo-text {
    direction: rtl;
    unicode-bidi: bidi-override;
}


.footer.logo-text span {
    color: var(--dtz-blue);
}


.footer.logo-text .vav-holam {
    color: var(--dtz-bronze);
    position: relative;
}


.footer.logo-text .holam-1 {
    color: var(--dtz-blue);
    position: absolute;
    top: 3px;
    left: 20px;
}


.footer.logo-text .holam-2 {
    color: var(--dtz-bronze);
    position: absolute;
    top: 3px;
    right: 35px;
}


.footer.logo-description {
    font-family: 'BANiflaot';
    font-weight: 700;
    font-size: 32px;
    line-height: 30px;
    letter-spacing: 1%;
    text-align: right;
}


h4.footer-menu-title,
.card-header {
    font-size: 1.875rem;
}
/* ===== Footer ===== */
/* Footer sits on cream background (--bs-dtz-bg) defined in demo.css.
   Body text and links are navy; only column headings (.footer-text) are bronze. */
.bg-footer-theme      { background-color: var(--dtz-blue); }
.content-footer       { color: var(--dtz-blue); padding: 40px 0 0; }
.footer-text          { color: var(--dtz-bronze) !important; }
.logo-text            { font-family: 'BANiflaot', Arial, sans-serif; font-size: 72px; line-height: 1; font-weight: 700; color: var(--dtz-blue); }
@media (min-width: 1200px) { .logo-text { font-size: 84px; } }
@media (min-width: 1600px) { .logo-text { font-size: 96px; } }
.vav-holam            { position: relative; }
.custom-border-bottom { border-bottom: 1px solid var(--dtz-bronze); }
/* In the footer's contact column the dividers feel too long — halve them. */
.content-footer .custom-border-bottom { width: 50%; }
/* Slogan stays at desktop size + weight across all breakpoints */
.font-footer-logo-description { font-family: 'BANiflaot', Arial, sans-serif; font-weight: 700; font-size: 32px; line-height: 1.3; color: var(--dtz-bronze); }
/* All footer links share one identical hover: a bronze underline that fades in
   (animating text-decoration-color, not the line itself), with the text turning
   bronze too. The double-class .content-footer.footer (the <footer> carries both)
   raises specificity above the generic .font-article a rule in app-interactions.css
   — which otherwise wins by source order on the Col A links nested in a
   <p class="font-article">, painting their hover blue instead of bronze. */
.content-footer.footer a {
    color: var(--dtz-blue);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--hover-transition), color var(--hover-transition);
}
@media (hover: hover) {
    .content-footer.footer a:hover { color: var(--dtz-bronze); text-decoration-color: currentColor; }
}
.content-footer a:focus         { outline: none; }
.content-footer a:focus-visible { box-shadow: var(--focus-ring); border-radius: 2px; }
/* Form labels stay neutral gray for legibility against white inputs */
.content-footer .card label  { color: var(--dtz-text-dark); }
.content-footer .card h5     { color: var(--dtz-blue); }
/* "למשלוח שמות..." heading stays at the desktop size across all breakpoints */
.content-footer .card h5.font-subtitle { font-size: 32px; line-height: 32px; }
/* Column headings (יצירת קשר, נושאי האתר, מידע) keep the lg+ size below lg too,
   instead of shrinking to 22/24px on smaller screens. */
@media (max-width: 991.98px) {
    .content-footer h4.font-subtitle.footer-text { font-size: 32px; line-height: 32px; }
}
/* Blessing form card needs comfortable internal padding.
   Center the form content vertically so any leftover space (when the card
   stretches taller than the form content) is split evenly top and bottom. */
.content-footer .card > .card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Vertically center the form within the footer.
   The form is the tallest cell, so it dictates row 2 height. To center it
   inside the overall footer (top row + row 2), we lift it by ~(top row height),
   which makes its vertical midpoint coincide with the footer midpoint.
   Active from lg+ where the form shares a row with cols A, B, C.
   Smaller lift at lg because the logo + slogan are smaller below 1200px. */
@media (min-width: 992px) {
    .content-footer .footer-form-col { margin-top: -8rem; }
}
@media (min-width: 1200px) {
    .content-footer .footer-form-col { margin-top: -12rem; }
}
@media (min-width: 1600px) {
    .content-footer .footer-form-col { margin-top: -13rem; }
}
/* ===== Blessing form — success / thank-you state =====
   Shown after the form is submitted. Uses the site's real type classes
   (font-subtitle / font-article) and the global primary button, so it
   matches the rest of the site instead of the old undefined .font-title. */
.content-footer .card .blessing-success-icon {
    font-size: 2.75rem;
    line-height: 1;
    color: var(--dtz-bronze);
    margin-bottom: 0.75rem;
}
.content-footer .card .blessing-success-title {
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--dtz-bronze);
}
.content-footer .card .blessing-success-pidyon {
    margin-bottom: 0.5rem;
}
/* One flowing sentence with a comfortable line length, centered. */
.content-footer .card .blessing-success-text {
    max-width: 30rem;
    margin: 0 auto 1.5rem;
    color: var(--dtz-blue);
}
/* The footer's generic anchor rule (.content-footer a) is more specific than
   .dtz-btn-primary and loads later, so it would paint the button label navy
   on the navy background (invisible) and add a hover underline. Re-assert the
   global primary-button look for the CTA. */
.content-footer .card a.dtz-btn-primary,
.content-footer .card a.dtz-btn-primary:hover,
.content-footer .card a.dtz-btn-primary:focus {
    color: #fff;
    text-decoration: none;
}

/* ===== Blessing form — name + בן/בת toggle + mother on one reading line =====
   Reads right→left exactly as it is said aloud: "<name> <בן|בת> <mother>".
   All three columns carry a label, so `align-items: start` lines the labels (and
   therefore the controls) up at the top; each column's own validation line then
   hangs underneath the right field. Labels stay on one line so the controls
   never drift out of alignment. Stacks to one column on phones. */
.content-footer .card .blessing-name-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    align-items: start;
}
.content-footer .card .blessing-name-row .form-control { height: 40px; }
.content-footer .card .blessing-name-row .form-label { white-space: nowrap; }
@media (max-width: 575.98px) {
    .content-footer .card .blessing-name-row { grid-template-columns: 1fr; }
    .content-footer .card .blessing-name-row .bn-gender { justify-self: center; }
}

/* The toggle is inline-flex, so without this it would sit on the same line as its
   label (the other columns only stack because their <input> is block-level). Stack
   the gender column vertically so the label sits above the toggle, like the rest. */
.content-footer .card .bn-gender {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Segmented בן/בת control — the selected segment fills navy with white text.
   Forced to the same 40px height as the inputs beside it. */
.content-footer .card .blessing-gender-seg {
    display: inline-flex;
    height: 40px;
    padding: 3px;
    gap: 3px;
    background: #fff;
    border: 1px solid var(--dtz-bronze);
    border-radius: 8px;
}
.content-footer .card .blessing-gender-seg.is-invalid { border-color: var(--dtz-danger); }
.content-footer .card .blessing-gender-seg button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    font-family: 'Heebo', Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--dtz-blue);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--hover-transition), color var(--hover-transition);
}
@media (hover: hover) {
    .content-footer .card .blessing-gender-seg button:not(.on):hover {
        background: var(--hover-overlay-bronze);
    }
}
.content-footer .card .blessing-gender-seg button.on {
    background: var(--dtz-blue);
    color: #fff;
    box-shadow: 0 1px 3px rgba(var(--dtz-blue-rgb), 0.25);
}
.content-footer .card .blessing-gender-seg button:focus { outline: none; }
.content-footer .card .blessing-gender-seg button:focus-visible { box-shadow: var(--focus-ring); }

/* Per-field validation line under each control (matches Bootstrap's invalid
   colour). Kept on one line so the בן/בת message sits tidily under the toggle. */
.content-footer .card .blessing-field-error {
    color: var(--dtz-danger);
    font-size: 0.85rem;
    margin-top: 0.35rem;
    white-space: nowrap;
}

/* Live "this is the name that will be blessed" preview — the payoff that removes
   the בן/בת ambiguity by showing the assembled phrase back to the sender. Centred. */
.content-footer .card .blessing-preview {
    margin-top: 0.6rem;
    text-align: center;
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--dtz-bronze-text);
}
.content-footer .card .blessing-preview b {
    font-size: 1.05rem;
    color: var(--dtz-blue);
    border-bottom: 2px solid var(--dtz-bronze);
    padding-bottom: 1px;
}

/* Copyright bar */
.footer-bottom-bar { background-color: var(--dtz-blue); margin-top: 0; height: 48px; }