/* Plugin site footer. Sits in normal flow before the theme's footer template. Self-contained (does not need ui.css). */
.opin-site-footer, .opin-site-footer *, .opin-site-footer *::before, .opin-site-footer *::after { box-sizing: border-box; }
.opin-site-footer h2, .opin-site-footer p, .opin-site-footer ul { margin: 0; padding: 0; font-family: inherit; }
.opin-site-footer ul { list-style: none; }
.opin-site-footer { font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.opin-site-footer {
    display: block;
    width: 100vw;
    margin: 48px calc(50% - 50vw) 0;
    position: relative;
    clear: both;
    font-family: var(--opin-font, "Figtree", Arial, sans-serif);
    background: var(--opin-surface, #fff);
    color: var(--opin-text, #111827);
}
/* 100vw includes a classic scrollbar's width; clip the overshoot so the page never scrolls sideways. */
html:has(.opin-site-footer), body:has(.opin-site-footer) { overflow-x: clip; }
.opin-site-footer a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.opin-footer-main { background: var(--opin-navy, #354D73); color: #fff; padding: 48px max(20px, calc((100% - 1200px) / 2)) 40px; }
.opin-footer-inner {
    display: grid; gap: 36px; grid-template-columns: 1fr;
}
.opin-footer-logo { display: block; height: 64px; width: auto; max-width: 100%; margin-bottom: 20px; }
.opin-site-footer .opin-footer-name { font-size: 20px; font-weight: 700; line-height: 1.3; color: #fff; margin: 0 0 6px; }
.opin-site-footer .opin-footer-tagline { font-size: 15px; line-height: 1.55; color: #E3E9F2; max-width: 34ch; margin: 0; }
.opin-site-footer .opin-footer-heading {
    font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: #FFD9CC; margin: 0 0 12px; line-height: 1.3;
}
.opin-site-footer .opin-footer-list { margin: 0; padding: 0; list-style: none; }
.opin-site-footer .opin-footer-main a,
.opin-site-footer .opin-footer-main a:visited {
    display: inline-flex; align-items: center; min-height: 36px;
    color: #fff; font-size: 16px; font-weight: 500; text-decoration: none; border-radius: 6px; background: transparent;
}
.opin-site-footer .opin-footer-main a:hover,
.opin-site-footer .opin-footer-main a:active { color: #fff; text-decoration: underline; background: transparent; }
.opin-site-footer .opin-footer-main a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; color: #fff; }
.opin-site-footer .opin-footer-main a.opin-footer-cta,
.opin-site-footer .opin-footer-main a.opin-footer-cta:visited {
    margin-top: 8px; padding: 0 20px; min-height: 44px; color: #fff; background: var(--opin-orange-strong, #C2410C);
    border-radius: var(--opin-radius-sm, 10px); font-weight: 700; text-decoration: none;
}
.opin-site-footer .opin-footer-main a.opin-footer-cta:hover,
.opin-site-footer .opin-footer-main a.opin-footer-cta:active { background: #A8370A; color: #fff; text-decoration: none; }

.opin-footer-funders { background: #fff; padding: 28px 20px; text-align: center; border-bottom: 1px solid var(--opin-border, #E8E5E5); }
.opin-footer-funders img { display: block; margin: 0 auto; width: 100%; max-width: 720px; height: auto; }

.opin-footer-bottom {
    background: #fff; padding: 18px max(20px, calc((100% - 1200px) / 2)) 24px;
    display: flex; flex-wrap: wrap; gap: 4px 24px; justify-content: space-between; align-items: center;
    font-size: 14px; color: var(--opin-muted, #566275);
}
.opin-site-footer .opin-footer-bottom p { margin: 0; color: inherit; }
.opin-site-footer .opin-footer-bottom a,
.opin-site-footer .opin-footer-bottom a:visited {
    display: inline-flex; align-items: center; min-height: 44px; color: var(--opin-navy, #354D73); font-weight: 600;
}
.opin-site-footer .opin-footer-bottom a:hover, .opin-site-footer .opin-footer-bottom a:active { color: var(--opin-navy, #354D73); text-decoration: underline; }
.opin-footer-bottom a:focus-visible { outline: 3px solid var(--opin-navy, #354D73); outline-offset: 2px; border-radius: 4px; }

@media (min-width: 768px) {
    .opin-footer-main { padding: 64px max(32px, calc((100% - 1200px) / 2)) 56px; }
    .opin-footer-inner { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 48px; }
    .opin-footer-funders { padding: 36px 32px; }
    .opin-footer-bottom { padding: 18px max(32px, calc((100% - 1200px) / 2)) 28px; }
}

@media (pointer: coarse) {
    .opin-site-footer .opin-footer-main a { min-height: 44px; }
}