/* ============================================================================
   Site footer — modern grid, subtle brand strip, discreet staff-login link.
   ============================================================================ */

.site-footer {
    margin-top: clamp(3rem, 6vw, 5rem);
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-muted) 100%);
    border-top: 1px solid var(--border);
    color: var(--fg-muted);
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 50%, var(--brand) 100%);
}

.site-footer__inner {
    padding-block: clamp(2.5rem, 5vw, 4rem) 1.25rem;
}

.site-footer__grid {
    display: grid;
    gap: clamp(1.75rem, 4vw, 2.5rem);
    /* Brand · quick links · practices. The practices column is wide because
       it holds one block per city, side by side. */
    grid-template-columns: 1.3fr 1fr 2.2fr;
    align-items: start;
}

.site-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: var(--fg);
    margin-bottom: 1rem;
}
.site-footer__brand:hover { color: var(--brand); }
.site-footer__logo {
    width: 52px; height: 52px;
    border-radius: 14px;
    padding: 6px;
    background: var(--brand-soft);
    box-shadow: var(--shadow-sm);
}
.site-footer__brand strong { display: block; font-size: 1.05rem; font-weight: 700; color: inherit; }
.site-footer__brand em { display: block; font-style: normal; font-size: .82rem; color: var(--fg-subtle); }

.site-footer__blurb {
    margin: 0 0 1.25rem 0;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--fg-muted);
    max-width: 40ch;
}

/* Named chips, not bare glyphs. Three identical icons in a row said nothing
   about whose account each one was — and these are the doctors' personal
   accounts, not one clinic account, so the name is the whole point. */
.site-footer__social {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .75rem .4rem .6rem;
    border-radius: var(--radius-pill);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--fg-muted);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.site-footer__social-link i { font-size: 1.05rem; color: #c13584; }
.site-footer__social-link:hover {
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
    color: #fff;
    transform: translateY(-2px);
    border-color: transparent;
}
.site-footer__social-link:hover i { color: #fff; }

.site-footer__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg);
    margin: 0 0 1rem 0;
    position: relative;
    padding-bottom: .5rem;
}
.site-footer__title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 32px;
    height: 3px;
    background: var(--brand);
    border-radius: 3px;
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .55rem;
}
.site-footer__links a {
    color: var(--fg-muted);
    text-decoration: none;
    font-size: .93rem;
    padding: .25rem 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: color .2s ease, transform .2s ease;
}
.site-footer__links a::before {
    content: "‹";
    color: var(--brand);
    font-weight: 700;
    transition: transform .2s ease;
}
.site-footer__links a:hover {
    color: var(--brand);
    transform: translateX(-3px);
}
.site-footer__links a:hover::before { transform: translateX(-2px); }

.site-footer__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .65rem;
}
.site-footer__meta li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .9rem;
    color: var(--fg-muted);
    line-height: 1.6;
}
.site-footer__meta li i {
    color: var(--brand);
    width: 18px;
    flex-shrink: 0;
    text-align: center;
}
.site-footer__meta li span { font-weight: 600; color: var(--fg); }
.site-footer__meta li em { font-style: normal; }
.site-footer__meta a { color: var(--fg-muted); text-decoration: none; transition: color .2s ease; }
.site-footer__meta a:hover { color: var(--brand); }

.site-footer__hours {
    display: grid;
    gap: .15rem;
    margin: 0;
    color: var(--fg-muted);
    font-size: .88rem;
    line-height: 1.8;
    font-style: normal;
    text-wrap: pretty;
}
/* `.site-footer__meta li span` is bold + full-contrast, which is right for a
   phone number but shouts when it is four lines of opening hours. */
.site-footer__hours span { font-weight: 500; color: var(--fg-muted); }
.site-footer__hours--empty { color: var(--fg-subtle); font-style: italic; }

.site-footer__cta {
    margin-top: 1rem;
    width: 100%;
}
.site-footer__meta--brand { margin-top: 1rem; }

/* --- Bottom strip -------------------------------------------------------- */
.site-footer__bottom {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.site-footer__copy {
    margin: 0;
    font-size: .82rem;
    color: var(--fg-subtle);
}
.site-footer__side { display: inline-flex; align-items: center; gap: .5rem; }

/* Discreet doctor login — small, low-contrast, no visual attention grab. */
.site-footer__staff-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--fg-subtle);
    font-size: .75rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px dashed var(--border-strong);
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.site-footer__staff-link:hover {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: transparent;
}
.site-footer__staff-link i { font-size: .85em; }

/* -----------------------------------------------------------------------------
   The practices column.

   Each location gets its own labelled block rather than one merged list: an
   address, a phone number and a set of opening hours that belong together
   have to *look* like they belong together, or a visitor in Quchan calls the
   Mashhad number and turns up when that practice is shut.
   ----------------------------------------------------------------------------- */

.site-footer__branches {
    display: grid;
    /* auto-fit rather than a fixed count: the site has two practices today,
       and a third must not push the column into a horizontal scroll. */
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.5rem;
}

.site-footer__branch {
    padding: 1rem 1.1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.site-footer__branch-name {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .7rem;
    padding-bottom: .55rem;
    border-bottom: 1px dashed var(--border);
    font-size: .92rem;
    font-weight: 700;
    color: var(--fg);
}
.site-footer__branch-name i { color: var(--brand); font-size: .9em; }

.site-footer__empty i { color: var(--fg-subtle); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .site-footer__grid { grid-template-columns: 1.2fr 1fr 1.8fr; }
}

@media (max-width: 991.98px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
    /* Seven links stacked one per row is a column of empty space beside them
       once the footer drops to two columns — and it pushes the practices,
       which are what a visitor actually came down here for, off the screen.

       Both other columns already span the full row here, so the links column
       was a half-width list with a permanently empty cell beside it. It takes
       the row too, and becomes a panel of chips that fills it: the same box
       treatment as the practice blocks under it, so the three rows of the
       footer read as three cards rather than one stray list. */
    .site-footer__col--links {
        grid-column: 1 / -1;
        padding: 1rem 1.1rem 1.1rem;
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }
    .site-footer__links {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: .55rem;
    }
    /* The chip is the cell, not the word inside it: left to its own width
       each row came out ragged. */
    .site-footer__links li { display: flex; }
    .site-footer__links a {
        flex: 1;
        justify-content: center;
        padding: .5rem .7rem;
        border-radius: var(--radius-pill);
        background: var(--bg);
        border: 1px solid var(--border);
        font-weight: 600;
    }
    /* The chip is the hover target now, so the row does not slide sideways
       under the finger. */
    .site-footer__links a:hover {
        transform: none;
        border-color: var(--brand);
        background: var(--brand-soft);
    }
    .site-footer__brand-col {
        grid-column: 1 / -1;
    }
    /* Two practices side by side still fit a tablet; the column has the whole
       row to itself here rather than a third of one. */
    .site-footer__col--practices {
        grid-column: 1 / -1;
    }
}

@media (max-width: 599.98px) {
    .site-footer__grid { grid-template-columns: 1fr; }
    .site-footer__branches { grid-template-columns: 1fr; gap: 1rem; }
    .site-footer__bottom {
        flex-direction: column;
        text-align: center;
    }
}