/* =============================================================================
   Site Footer System
   Sections: Custom Properties → Reset → Footer Main → Grid → Bottom Bar → Mobile
   ============================================================================= */


/* =============================================================================
   Box-sizing Reset
   ============================================================================= */

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

.site-footer,
.footer-main,
.footer-grid,
.footer-bottom-bar,
.footer-bottom-bar__inner {
    box-sizing: border-box;
}


/* =============================================================================
   Custom Properties
   Set via inline style on the footer element from ACF color fields.
   ============================================================================= */

/* Default background is the theme red; a Global Settings colour (inline style) still overrides it */
.site-footer {
    --footer-bg:         var(--color-red);
    --footer-text:       var(--color-cream);
    --footer-link-color: inherit;
}


/* =============================================================================
   Link Color Inheritance
   Force all links inside the footer to inherit from the footer's color context.
   ============================================================================= */

.site-footer a,
.footer-menu a,
.footer-content a,
.footer-bottom-bar__content a {
    color: inherit !important;
}

.footer-bottom-bar__content a {
    color: var(--footer-link-color) !important;
}

/* Headings follow the footer's text colour, not the global heading blue */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
    color: inherit;
}


/* =============================================================================
   Footer Main
   ============================================================================= */

.site-footer {
    background-color: var(--footer-bg);
    color:            var(--footer-text);
    width:            100%;
    margin-top:       calc(-1 * var(--wave-h)); /* slide under the section above so the wave gaps show its colour */
    font-size:        var(--font-size-p); /* all footer text follows the p scale (18 / 16 / 15) */
}

/* Side padding comes from .row and max-width from .content-container (same as
   the header and page modules); only vertical spacing is footer-specific. */
.site-footer .footer-main {
    width:          100%;
    padding-top:    60px;
    padding-bottom: 0;
}


/* =============================================================================
   Footer Grid
   2 columns by default, expands to 3 or 4 with optional repeater columns.
   ============================================================================= */

.footer-grid {
    display:               grid;
    gap:                   40px;
    grid-template-columns: repeat(2, 1fr);
}

.footer-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.footer-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 1.75 : 2.25 : 1 : 1 — logo, contact, and the two menu columns */
.footer-grid--cols-4 {
    grid-template-columns: 1.75fr 2.25fr 1fr 1fr;
}


/* =============================================================================
   Footer Columns
   ============================================================================= */

.footer-col {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}


/* =============================================================================
   Footer Logo
   ============================================================================= */

/* Brand column shrinks to the logo's width so the social icons centre under it */
.footer-col--brand {
    justify-self: start;
    width:        max-content;
    max-width:    100%;
    align-items:  center;
}

/* Logo grows to fill its footer column, up to 200px tall */
.footer-logo a {
    display:         inline-block;
    text-decoration: none;
}

.footer-logo__img {
    display:    block;
    width:      auto;
    max-width:  100%;
    height:     auto;
    max-height: 200px;
}

.footer-logo__text {
    font-size:   1.25rem;
    font-weight: 700;
    color:       inherit;
    white-space: nowrap;
}


/* =============================================================================
   Footer Content
   ============================================================================= */

.footer-content {
    line-height: 1.6;
}

.footer-content p {
    margin: 0 0 12px;
}

.footer-content p:last-child {
    margin-bottom: 0;
}


/* =============================================================================
   Footer Company Info
   ============================================================================= */

.footer-company-info {
	display:        flex;
	flex-direction: column;
	gap:            6px;
	line-height:    1.5;
}

.footer-company-info p {
	margin: 0;
}

.footer-company-info a {
	color:           inherit !important;
	text-decoration: none;
}

.footer-company-info a:hover {
	text-decoration: underline;
}

.footer-company-info__name {
	font-weight: 600;
}

/* Social links — inline row of icons below the logo */
.footer-social {
	display:         flex;
	flex-wrap:       wrap;
	align-items:     center;
	justify-content: center;
	gap:             16px;
}

/* Mobile: social icons left-aligned (centred under the logo on desktop) */
@media (max-width: 767px) {
	.footer-col--brand {
		align-items: flex-start;
	}

	.footer-social {
		justify-content: flex-start;
	}
}

.footer-social__link {
	display:         inline-flex;
	color:           inherit !important;
	text-decoration: none;
	white-space:     nowrap;
	transition:      opacity 0.2s ease;
}

.footer-social__link svg,
.footer-social__img {
	display: block;
	width:   auto;
	height:  40px;
}

.footer-social__link svg {
	fill: currentColor;
}

.footer-social__link:hover,
.footer-social__link:focus-visible {
	opacity: 0.75;
}


/* =============================================================================
   Footer Contact (column 2)
   ============================================================================= */

/* Titled columns ("Contact Us", "Have Questions") — 20px between title and content */
.footer-col--contact,
.footer-col--menu-titled {
	gap: 20px;
}

.footer-contact__title,
.footer-col__title {
	margin:          0;
	font-weight:     700;
	text-decoration: underline;
}

.footer-contact {
	display:        flex;
	flex-direction: column;
	margin:         0;
}

.footer-contact__row dt {
	display:     inline;
	font-weight: 700;
}

.footer-contact__row dd {
	display: inline;
	margin:  0;
}

.footer-contact a {
	text-decoration: none;
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
	text-decoration: underline;
}


/* =============================================================================
   Footer Navigation
   ============================================================================= */

.footer-nav {
    width: 100%;
}

.footer-menu {
    list-style: none;
    margin:     0;
    padding:    0;
}

/* Stacked layouts — items stacked vertically */
.footer-nav--stacked-left   { text-align: left; }
.footer-nav--stacked-center { text-align: center; }
.footer-nav--stacked-right  { text-align: right; }

.footer-nav--stacked-left .footer-menu,
.footer-nav--stacked-center .footer-menu,
.footer-nav--stacked-right .footer-menu {
    display:        flex;
    flex-direction: column;
}

/* Inline layouts — items in a row */
.footer-nav--inline-left,
.footer-nav--inline-center,
.footer-nav--inline-right {
    display: flex;
}

.footer-nav--inline-left   { justify-content: flex-start; }
.footer-nav--inline-center { justify-content: center; }
.footer-nav--inline-right  { justify-content: flex-end; }

.footer-nav--inline-left .footer-menu,
.footer-nav--inline-center .footer-menu,
.footer-nav--inline-right .footer-menu {
    display:     flex;
    flex-wrap:   wrap;
    gap:         4px;
    align-items: center;
}

.footer-menu li a {
    display:         block;
    padding:         0;
    color:           inherit;
    text-decoration: none;
    white-space:     nowrap;
}

.footer-nav--inline-left .footer-menu li a,
.footer-nav--inline-center .footer-menu li a,
.footer-nav--inline-right .footer-menu li a {
    padding: 4px 10px;
}

.footer-menu li a:hover {
    text-decoration: underline;
}


/* =============================================================================
   Footer Search
   ============================================================================= */

.footer-search {
    margin-top: 16px;
}

.footer-search .search-form {
    display:     flex;
    gap:         8px;
    align-items: center;
}

.footer-search .search-field {
    flex:          1 1 auto;
    padding:       8px 12px;
    border:        1px solid #ddd;
    border-radius: 4px;
}

.footer-search .search-submit {
    padding:       8px 16px;
    background:    #333;
    color:         var(--color-cream);
    border:        none;
    border-radius: 4px;
    cursor:        pointer;
    white-space:   nowrap;
}

.footer-search .search-submit:hover {
    background: #111;
}


/* =============================================================================
   Landing Layout
   ============================================================================= */

.footer-layout--landing .footer-landing__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            16px;
    max-width:      600px;
    margin:         0 auto;
}


/* =============================================================================
   Bottom Bar
   ============================================================================= */

.site-footer .footer-bottom-bar {
    width:          100%;
    padding-top:    16px;
    padding-bottom: 5em;
}

.footer-bottom-bar__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    line-height:     1;
}

.footer-bottom-bar__content {
    flex:       1 1 auto;
    text-align: center;
}

/* Copyright text: intentional exception to the p scale — 14px/19px, 12px/17px on mobile */
.footer-bottom-bar__content,
.footer-bottom-bar__content p {
    font-size: 14px;
    line-height: 19px;
}

@media (max-width: 767px) {
    .footer-bottom-bar__content,
    .footer-bottom-bar__content p {
        font-size: 12px;
        line-height: 17px;
    }
}

.footer-bottom-bar__content p {
    margin: 0;
}

.footer-bottom-bar__content p + p {
    margin-top: 8px;
}

/* Mobile: copyright left-aligned and full width; "Privacy Policy | Cookie Settings"
   (<span class="footer-legal"> in the Bottom Bar content) on its own line, without the
   leading " | ", and the lines evenly spaced; 2.5em below (5em on desktop) */
@media (max-width: 767px) {
    .site-footer .footer-bottom-bar {
        padding-bottom: 2.5em;
    }

    .footer-bottom-bar__content {
        align-self: stretch;
        text-align: left;
    }

    .footer-bottom-bar__content p + p {
        margin-top: 0;
    }

    .footer-legal {
        display: block;
    }

    .footer-legal__sep {
        display: none;
    }

    /* "Marketing Essentials" (<a class="footer-credit">) on its own line */
    .footer-credit {
        display: table;
    }
}

/* Return to Top — fixed bottom-right, fades in after one viewport scroll */
.footer-return-to-top {
	position:        fixed;
	bottom:          32px;
	right:           32px;
	z-index:         500;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	background:      #333;
	color:           var(--color-cream);
	border:          none;
	border-radius:   50%;
	cursor:          pointer;
	box-shadow:      0 4px 12px rgba(0, 0, 0, 0.2);
	opacity:         0;
	visibility:      hidden;
	transform:       translateY(12px);
	transition:      opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.2s ease;
}

.footer-return-to-top.is-visible {
	opacity:    1;
	visibility: visible;
	transform:  translateY(0);
}

.footer-return-to-top:hover {
	background: #111;
}

.footer-return-to-top svg {
	fill:         currentColor;
	flex-shrink:  0;
}


/* =============================================================================
   Mobile  —  max-width: 767px
   Stack all columns vertically
   ============================================================================= */

@media (max-width: 767px) {

    .site-footer .footer-main {
        padding-top:    40px;
        padding-bottom: 0;
    }

    .footer-grid,
    .footer-grid--cols-2,
    .footer-grid--cols-3,
    .footer-grid--cols-4 {
        grid-template-columns: 1fr;
        gap:                   32px;
    }

    .site-footer .footer-bottom-bar {
        padding-top:    40px;
    }

    /* Logo (star): 140px tall */
    .footer-logo__img {
        height:     140px;
        max-height: none;
    }

    /* Titled menu columns ("Have Questions", "How You Can Help"): 10px between title and links */
    .footer-col--menu-titled {
        gap: 10px;
    }

    .footer-bottom-bar__inner {
        flex-direction: column;
        align-items:    center;
        gap:            8px;
    }

    .footer-layout--landing .footer-landing__inner {
        padding: 0;
    }

}