/* ==========================================================================
   File: assets/css/footer.css

   Mobile first, and genuinely so rather than as a label. The base rules build
   the phone footer: one column, link groups collapsed into accordions. Every
   widening happens inside a min-width query.

   The reasoning for the accordions: a footer with thirty visible links on a
   360px screen is thirty taps worth of scrolling past things nobody wanted.
   Collapsed groups turn that into four headings, and the reader opens the one
   they need. From 768px up there is room for columns, so the CSS forces the
   groups open and hides the markers.
   ========================================================================== */

.ft {
    --ft-green: #2E7D32;
    --ft-dark:  #14331A;
    --ft-gold:  #F9A825;
    --ft-text:  rgba(255, 255, 255, 0.82);
    --ft-dim:   rgba(255, 255, 255, 0.58);
    --ft-line:  rgba(255, 255, 255, 0.14);

    position: relative;
    background: linear-gradient(165deg, var(--ft-green) 0%, var(--ft-dark) 100%);
    color: var(--ft-text);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 48px;
}

/* A thin gold rule along the top edge, which is the one place the brand accent
   earns its keep down here. */
.ft::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ft-gold), rgba(249, 168, 37, 0.25));
}

.ft .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

.ft-top { padding: 34px 0 26px; }

@media (min-width: 768px) { .ft-top { padding: 48px 0 36px; } }

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

.ft-top .container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

@media (min-width: 768px) {
    .ft-top .container {
        grid-template-columns: 1fr 1fr;
        gap: 36px 32px;
    }
}

@media (min-width: 1024px) {
    .ft-top .container {
        grid-template-columns: 1.4fr 2.2fr 1.2fr;
        gap: 40px;
    }
}

/* ==========================================================================
   Brand
   ========================================================================== */

/* The logo is the same file the header uses, unaltered.

   The previous version filtered it to pure white so it would show against the
   dark green. That worked in the sense that something appeared, but it threw
   away every colour in the artwork and left a white blob.

   A light plate behind it solves the same problem without touching the image.
   Any logo file reads against it, whatever colours it uses, and there is no
   second white version to keep in step with the first. */
.ft-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    margin-bottom: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: transform 0.16s ease;
}

.ft-logo:hover { transform: translateY(-2px); }

.ft-logo img {
    display: block;
    height: 46px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .ft-logo { padding: 14px 22px; }
    .ft-logo img { height: 56px; max-width: 240px; }
}

.ft-about {
    margin: 0 0 18px;
    max-width: 44ch;
    color: var(--ft-dim);
    font-size: 0.86rem;
    line-height: 1.7;
}

.ft-social {
    display: flex;
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.ft-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ft-line);
    border-radius: 50%;
    color: var(--ft-text);
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.ft-social a:hover {
    background: var(--ft-gold);
    border-color: var(--ft-gold);
    color: #241E18;
    transform: translateY(-2px);
}

/* ==========================================================================
   Link groups
   ========================================================================== */

.ft-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 560px) { .ft-nav { grid-template-columns: 1fr 1fr; gap: 0 24px; } }
@media (min-width: 1024px) { .ft-nav { grid-template-columns: repeat(4, 1fr); gap: 0 20px; } }

.ft-group {
    border-bottom: 1px solid var(--ft-line);
}

.ft-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    min-height: 48px;
}

/* Hide the default triangle in both engines */
.ft-group summary::-webkit-details-marker { display: none; }
.ft-group summary::marker { content: ""; }

/* Draw a plus that becomes a minus. Two spans would be markup for decoration,
   so it is done with a pseudo element and a rotation. */
.ft-group summary::after {
    content: "";
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    background:
        linear-gradient(var(--ft-gold), var(--ft-gold)) center / 100% 2px no-repeat,
        linear-gradient(var(--ft-gold), var(--ft-gold)) center / 2px 100% no-repeat;
    transition: transform 0.2s ease, background-size 0.2s ease;
}

.ft-group[open] summary::after {
    background:
        linear-gradient(var(--ft-gold), var(--ft-gold)) center / 100% 2px no-repeat;
    transform: rotate(180deg);
}

.ft-group ul {
    list-style: none;
    margin: 0;
    padding: 0 0 14px;
}

.ft-group li { margin-bottom: 2px; }

.ft-group a {
    display: block;
    padding: 9px 0;
    color: var(--ft-dim);
    text-decoration: none;
    font-size: 0.87rem;
    transition: color 0.14s ease, padding-left 0.14s ease;
    min-height: 40px;
}

.ft-group a:hover,
.ft-group a:focus-visible {
    color: #fff;
    padding-left: 5px;
}

/* From tablet up there is room for columns, so open everything and drop the
   accordion behaviour entirely. */
@media (min-width: 768px) {
    .ft-group {
        border-bottom: 0;
    }

    .ft-group summary {
        padding: 0 0 12px;
        cursor: default;
        pointer-events: none;
        min-height: 0;
        margin-bottom: 4px;
    }

    .ft-group summary::after { display: none; }

    .ft-group ul { padding-bottom: 22px; }
    .ft-group a { padding: 5px 0; min-height: 0; }
}

/* ==========================================================================
   Contact
   ========================================================================== */

.ft-contact h2 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 14px;
}

.ft-contact ul {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.ft-contact li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 0.86rem;
    color: var(--ft-dim);
    line-height: 1.6;
}

.ft-contact li i {
    flex: 0 0 auto;
    width: 16px;
    margin-top: 3px;
    color: var(--ft-gold);
    font-size: 0.82rem;
}

.ft-contact a {
    color: var(--ft-dim);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.ft-contact a:hover { color: #fff; text-decoration: underline; }

.ft-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 22px;
    border-radius: 8px;
    background: var(--ft-gold);
    color: #241E18;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    min-height: 48px;
    transition: background 0.16s ease, transform 0.14s ease;
}

.ft-cta:hover { background: #ffb733; transform: translateY(-1px); }

@media (min-width: 560px) { .ft-cta { width: auto; } }

/* ==========================================================================
   Bottom bar
   ========================================================================== */

.ft-bottom {
    border-top: 1px solid var(--ft-line);
    padding: 18px 0 calc(18px + env(safe-area-inset-bottom, 0px));
}

.ft-bottom .container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
}

@media (min-width: 640px) {
    .ft-bottom .container {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.ft-copy {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ft-dim);
}

.ft-legal {
    display: flex;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.ft-legal a {
    color: var(--ft-dim);
    text-decoration: none;
    font-size: 0.8rem;
}

.ft-legal a:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   Back to top
   ========================================================================== */

.ft-top-btn {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--ft-green);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(20, 51, 26, 0.32);
    transition: background 0.16s ease, transform 0.16s ease;
}

.ft-top-btn:hover { background: var(--ft-dark); transform: translateY(-2px); }
.ft-top-btn:focus-visible { outline: 3px solid var(--ft-gold); outline-offset: 2px; }

@media (min-width: 768px) {
    .ft-top-btn { right: 24px; bottom: 24px; width: 50px; height: 50px; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
    .ft { background: none; color: #000; margin-top: 20px; }
    .ft-social, .ft-cta, .ft-top-btn, .ft-nav { display: none; }
    .ft-logo { box-shadow: none; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ft-social a,
    .ft-group a,
    .ft-cta,
    .ft-top-btn,
    .ft-group summary::after {
        transition: none;
    }
    .ft-social a:hover,
    .ft-cta:hover,
    .ft-top-btn:hover { transform: none; }
}