/*
 * Grand River Periodontics — site footer.
 * Loaded on every page. Tokens come from ../style.css :root.
 *
 * Two bands: the office hours + location block on slate (moved here from the
 * homepage, so it now closes every page), then a navy base bar. Contrast on
 * the slate field is tight — the alpha values below are the minimums that
 * clear 4.5:1, so don't lower them without re-checking.
 */

/*--------------------------
*   Affiliations slider    *
--------------------------*/
/* Sits immediately above the footer on every page, matching where the live
   site keeps it. Behaviour lives in footer.js; everything degrades to a plain
   horizontally scrollable row without it. */
.grp-affil {
    --a-gutter: clamp(1.5rem, 5vw, 5rem);
    --a-fade: clamp(2rem, 5vw, 4rem);
    --a-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* True white, not --bg-page. Five of the nine logo files ship with an
       opaque #ffffff background, so on the off-white paper ground each would
       show as a faint rectangle — the same 6/255 seam that made the doctor
       cut-out visible. It also gives the page a bright beat between the navy
       section above and the slate footer below. */
    background-color: rgb(var(--c-white));
    padding: clamp(3rem, 6vw, 4.5rem) var(--a-gutter);
    font-family: var(--font-body);
    color: var(--text-body);
}

.grp-affil *,
.grp-affil *::before,
.grp-affil *::after {
    box-sizing: border-box;
}

/* 84rem matches .grp-footer__inner and the homepage sections, so the logos
   line up with the hours block directly beneath them. */
.grp-affil__inner {
    max-width: 84rem;
    margin-inline: auto;
}

.grp-affil__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.grp-affil__intro {
    flex: 1 1 22rem;
    max-width: 70ch;
}

.grp-affil .grp-affil__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.9vw, 2.25rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: 0.012em;
    color: var(--text-heading);
    text-wrap: balance;
    margin: 0;
}

.grp-affil__lead {
    margin: 0.9rem 0 0;
    font-size: 18px;
    line-height: 1.65;
    /* rgba(ink, 0.65) over white composites to #66686c — 5.58:1, so this stays
       body-text legible rather than the usual washed-out grey. */
    color: var(--text-muted);
    text-wrap: pretty;
}


/* Controls ---------------------------------------------------------------- */
.grp-affil__controls {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
}

.grp-affil__nav {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    padding: 0;
    background-color: transparent;
    /* 0.55 alpha over white renders as #858a92 — measured 3.47:1, clearing the
       3:1 WCAG minimum for a UI component boundary. Lighter borders look nicer
       and fail it. */
    border: 1px solid rgba(var(--c-navy), 0.55);
    border-radius: 1px;
    color: var(--brand-dark);
    cursor: pointer;
    transition: background-color 0.35s var(--a-ease),
                border-color 0.35s var(--a-ease),
                color 0.35s var(--a-ease);
}

.grp-affil__nav:hover,
.grp-affil__nav:focus-visible {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: rgb(var(--c-paper));
}

.grp-affil__nav[aria-disabled="true"] {
    opacity: 0.3;
    cursor: default;
}

.grp-affil__nav[aria-disabled="true"]:hover {
    background-color: transparent;
    border-color: rgba(var(--c-navy), 0.55);
    color: var(--brand-dark);
}

.grp-affil__nav svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

/* The play triangle is a filled glyph, not a stroked one. */
.grp-affil__nav .grp-affil__icon--play {
    fill: currentColor;
    stroke: none;
}

/* One button, two states: aria-pressed is the single source of truth for both
   the icon and the label, so they can't drift apart. */
.grp-affil__nav[aria-pressed="false"] .grp-affil__icon--play,
.grp-affil__nav[aria-pressed="true"] .grp-affil__icon--pause {
    display: none;
}


/* Track ------------------------------------------------------------------- */
.grp-affil__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.grp-affil__viewport::-webkit-scrollbar {
    display: none;
}

/* Fade only the edge that actually has more content behind it, so a clipped
   logo reads as "keep going" and the first and last never look cut off.
   footer.js maintains these two classes. */
.grp-affil__viewport.has-before {
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--a-fade));
}

.grp-affil__viewport.has-after {
    mask-image: linear-gradient(90deg, #000 calc(100% - var(--a-fade)), transparent 100%);
}

.grp-affil__viewport.has-before.has-after {
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--a-fade),
                #000 calc(100% - var(--a-fade)), transparent 100%);
}

.grp-affil__track {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 5.5vw, 4.75rem);
    min-height: 4.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* snap to start, not center: footer.js advances autoplay to exact slide start
   offsets, and centre snapping would drag every one of those targets sideways
   and fight the script. */
.grp-affil .grp-affil__slide {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
    scroll-snap-align: start;
}

.grp-affil__slide a {
    display: block;
    text-decoration: none;
    transition: transform 0.45s var(--a-ease);
}

.grp-affil__slide a:hover,
.grp-affil__slide a:focus-visible {
    transform: translateY(-3px);
}

/* --lh is set per slide in the template; --a-scale trims the whole row on
   small screens without disturbing the tuned proportions between logos.
   max-width:none overrides the theme's global img rule, which would otherwise
   cap the wide wordmarks. */
.grp-affil__slide img {
    display: block;
    width: auto;
    max-width: none;
    height: calc(var(--lh) * var(--a-scale, 1));
}

.grp-affil :is(a, button):focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .grp-affil {
        --a-scale: 0.84;
    }

    .grp-affil__head {
        align-items: flex-start;
    }
}

/* Autoplay is disabled outright in footer.js under reduced motion; this covers
   the hover lift and the smooth-scroll on the buttons. */
@media (prefers-reduced-motion: reduce) {
    .grp-affil__slide a {
        transition: none;
    }

    .grp-affil__slide a:hover,
    .grp-affil__slide a:focus-visible {
        transform: none;
    }

    .grp-affil__nav {
        transition: none;
    }
}


.grp-footer {
    --f-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --f-gutter: clamp(1.5rem, 5vw, 5rem);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
}

.grp-footer *,
.grp-footer *::before,
.grp-footer *::after {
    box-sizing: border-box;
}

.grp-footer__inner {
    max-width: 84rem;
    margin-inline: auto;
}


/*--------------------------
*  Hours & location band   *
--------------------------*/
.grp-footer__visit {
    padding: clamp(3.5rem, 7vw, 6rem) var(--f-gutter);
    background-color: var(--brand-dark);
    color: var(--text-on-dark);
}

.grp-footer .grp-footer__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: 0.012em;
    color: var(--text-on-dark);
    margin: 0 0 clamp(2.25rem, 4.5vw, 3.5rem);
}

.grp-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(2rem, 4.5vw, 4rem);
}

.grp-footer__col {
    min-width: 0;
}

.grp-footer .grp-footer__label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--c-paper), 0.82);
    margin: 0 0 1.1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(var(--c-paper), 0.22);
}

.grp-footer .grp-address {
    font-style: normal;
    font-size: 1rem;
    line-height: 1.75;
    margin: 0 0 1.1rem;
    color: rgb(var(--c-white));
}
.grp-footer .grp-address a{
    color: #fff;
    font-weight: 600;
}
.grp-footer .grp-address a:hover{
    color: #fff;
    text-decoration: underline;
}

.grp-footer__phone {
    margin: 0;
}

.grp-footer .grp-footer__phone a {
    --btn-pad-y: 1.3em;
    --btn-pad-x: 2.4em;
    min-width: 242px;
    display: inline-block;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border: 1px solid transparent;
    border-radius: 1px;
    font-family: var(--font-body);
    font-size: clamp(0.8rem, 0.95vw, 0.9rem);
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    color 0.35s var(--ease);
    letter-spacing: 0.15em;
    font-weight: 700;
    background-color: transparent;
    border-color: rgb(var(--c-taupe));
    color: #fff;
    border: 1px solid rgb(var(--c-taupe));
    font-weight: 900;
}

.grp-footer .grp-footer__phone a:hover,
.grp-footer .grp-footer__phone a:focus-visible {
    background-color: rgb(var(--c-taupe));
    border-color: rgb(var(--c-taupe));
    color: #fff;
}

.grp-footer .grp-hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem 1.5rem;
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.5;
}

.grp-footer .grp-hours dt {
    color: rgb(var(--c-white));
}

.grp-footer .grp-hours dd {
    margin: 0;
    text-align: right;
    color: rgb(var(--c-white));
    font-variant-numeric: tabular-nums;
}

.grp-footer .grp-hours dd.is-closed {
    color: rgba(var(--c-paper), 0.78);
}


/*--------------------------
*       Static map         *
--------------------------*/
.grp-footer .grp-mapcard {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    background-color: rgba(var(--c-ink), 0.2);
}

/* pointer-events:none keeps this a non-interactive visual (like the static
   image it replaced) so the surrounding .grp-mapcard anchor still gets every
   click/hover/scroll instead of the embed trapping them. Google's own marker
   renders at the queried address, so no separate pin overlay is needed. */
.grp-footer .grp-mapcard__frame {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 41 / 28;
    border: 0;
    pointer-events: none;
    transition: transform 0.7s var(--f-ease);
}

.grp-footer .grp-mapcard:hover .grp-mapcard__frame,
.grp-footer .grp-mapcard:focus-visible .grp-mapcard__frame {
    transform: scale(1.035);
}

/* Placement and scale only. Fill, type and hover come from .grp-btn--solid in
   style.css, so this label stays in step with every other button on the site.
   It sits a little smaller than a standalone button because it overlays a
   ~390px-wide map rather than a section — but not so small the tap target
   shrinks below the 44px touch-target guideline. --btn-pad-y is solved for
   that: at this font-size (12.16px) and .grp-btn's 1.2 line-height, 1.14em
   of vertical padding plus the 1px border on each edge measures 44px tall
   (verified via getBoundingClientRect, not just the arithmetic). */
.grp-footer .grp-mapcard__cta {
    position: absolute;
    right: 0;
    bottom: 0;
    --btn-pad-y: 1.14em;
    --btn-pad-x: 1.15em;
    font-size: 0.76rem;
}

/* Hover is driven by the whole card, not the label, so it needs stating here —
   the shared :hover on .grp-btn can't reach up to the parent anchor. */
.grp-footer .grp-mapcard:hover .grp-mapcard__cta,
.grp-footer .grp-mapcard:focus-visible .grp-mapcard__cta {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: rgb(var(--c-paper));
}

.grp-footer .grp-mapcard__credit {
    margin: 0.7rem 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgba(var(--c-paper), 0.78);
}


/*--------------------------
*        Base bar          *
--------------------------*/
.grp-footer__base {
    padding: clamp(1.75rem, 3vw, 2.5rem) var(--f-gutter);
    background-color: var(--brand-primary);
    color: rgb(var(--c-white));
}

.grp-footer__base-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

.grp-footer__brand {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}

.grp-footer__brand img {
    display: block;
    width: auto;
    height: auto;
    max-width: 190px;
}

.grp-footer__nav {
    flex: 1 1 auto;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 400;
}
.grp-footer__nav a {
    /*margin: 0 8px;*/
}

/* Markup comes from wp_nav_menu(), so these target WordPress's own structure
   (ul.grp-footer__menu > li.menu-item > a) rather than a hand-built list. */
.grp-footer__nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem clamp(1rem, 2.2vw, 1.9rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.grp-footer__nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.grp-footer .grp-footer__nav a {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgb(var(--c-white));
    text-decoration: none;
    padding-bottom: 0.25em;
    border-bottom: 1px solid transparent;
    transition: color 0.3s var(--f-ease), border-color 0.3s var(--f-ease);
}

.grp-footer .grp-footer__nav a:hover,
.grp-footer .grp-footer__nav a:focus-visible {
    color: rgb(var(--c-white));
    border-bottom-color: rgb(var(--c-sky));
}

/* WordPress marks the current page itself, so this needs no template logic. */
.grp-footer .grp-footer__nav .current-menu-item > a,
.grp-footer .grp-footer__nav .current_page_item > a,
.grp-footer .grp-footer__nav .current-menu-ancestor > a {
    color: rgb(var(--c-white));
    border-bottom-color: rgba(var(--c-paper), 0.45);
}

.grp-footer .grp-footer__legal {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgb(var(--c-white));
    text-decoration: none;
    padding-bottom: 0.25em;
    border-bottom: 1px solid transparent;
    transition: color 0.3s var(--f-ease), border-color 0.3s var(--f-ease);
}

.grp-footer :is(a, button):focus-visible {
    outline: 2px solid rgb(var(--c-sky));
    outline-offset: 4px;
}


/*--------------------------
*       Responsive         *
--------------------------*/
@media (max-width: 900px) {
    .grp-footer__base-inner {
        justify-content: center;
        text-align: center;
    }

    .grp-footer__nav {
        flex: 1 1 100%;
        order: 3;
    }

    .grp-footer .grp-footer__legal {
        flex: 1 1 100%;
        order: 4;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .grp-footer .grp-hours dd {
        text-align: left;
    }
}