/* ==========================================================================
   TWECA brand theme
   Loads after css/style.css and repaints the template in the logo colours.
   Burgundy  #632240   (from the logo background)
   Deep plum #3E1529   (darker shade, used for the bars behind burgundy)
   Cream     #F7EFF1   (the logo lettering)
   Gold      #C8A24A   (small accent, used sparingly on dark panels)
   ========================================================================== */

:root {
    --tweca-burgundy: #632240;
    --tweca-plum: #3E1529;
    --tweca-cream: #F7EFF1;
    --tweca-gold: #C8A24A;

    /* The template draws some lines and details straight from these,
       so they are repointed here rather than chased one by one. */
    --bs-primary: #632240;
    --bs-primary-rgb: 99, 34, 64;
    --bs-secondary: #3E1529;
    --bs-secondary-rgb: 62, 21, 41;
}

/* --- Core colour swaps ------------------------------------------------- */

.bg-primary { background-color: var(--tweca-burgundy) !important; }
.bg-secondary { background-color: var(--tweca-plum) !important; }
.bg-light { background-color: var(--tweca-cream) !important; }

.text-primary { color: var(--tweca-burgundy) !important; }
.text-secondary { color: var(--tweca-plum) !important; }

/* Anything sitting on a burgundy panel must be cream, not dark.
   The template uses .text-dark on .bg-primary throughout. */
.bg-primary,
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-primary p, .bg-primary span, .bg-primary .text-dark {
    color: var(--tweca-cream) !important;
}

/* Icons and headings on the dark topbar read as cream, not burgundy */
.top-bar .text-primary { color: var(--tweca-cream) !important; }
.bg-secondary .text-primary { color: var(--tweca-gold) !important; }
.bg-primary .text-secondary { color: var(--tweca-cream) !important; }

/* --- Buttons ----------------------------------------------------------- */

.btn-primary,
.btn-primary:focus {
    background-color: var(--tweca-burgundy) !important;
    border-color: var(--tweca-burgundy) !important;
    color: var(--tweca-cream) !important;
}

.btn-primary:hover {
    background-color: var(--tweca-plum) !important;
    border-color: var(--tweca-plum) !important;
    color: var(--tweca-cream) !important;
}

.btn-secondary,
.btn-secondary:focus {
    background-color: var(--tweca-plum) !important;
    border-color: var(--tweca-plum) !important;
    color: var(--tweca-cream) !important;
}

.btn-secondary:hover {
    background-color: var(--tweca-gold) !important;
    border-color: var(--tweca-gold) !important;
    color: var(--tweca-plum) !important;
}

/* A cream button for use on burgundy panels */
.btn-cream {
    background-color: var(--tweca-cream);
    border-color: var(--tweca-cream);
    color: var(--tweca-burgundy);
}

.btn-cream:hover {
    background-color: var(--tweca-gold);
    border-color: var(--tweca-gold);
    color: var(--tweca-plum);
}

/* --- Navbar ------------------------------------------------------------ */

.navbar-dark .navbar-nav .nav-link {
    color: rgba(247, 239, 241, .85) !important;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--tweca-gold) !important;
}

.navbar-brand-logo {
    height: 86px;
    width: auto;
}

@media (max-width: 991.98px) {
    .navbar-brand-logo { height: 70px; }
}

/* --- Section headings -------------------------------------------------- */

.section-title::before,
.section-title::after {
    background: var(--tweca-burgundy) !important;
}

/* --- Footer ------------------------------------------------------------ */

.footer { background: var(--tweca-plum) !important; }
.footer .btn-link:hover { color: var(--tweca-gold) !important; }

/* --- Focus visibility for keyboard users ------------------------------- */

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--tweca-gold);
    outline-offset: 2px;
}

/* --- Respect reduced motion ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .wow { animation: none !important; visibility: visible !important; }
}

/* --- Click to play video thumbnails ------------------------------------ */

.video-facade {
    cursor: pointer;
    background: var(--tweca-plum);
    overflow: hidden;
}

.video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-facade .video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border: 0;
    border-radius: 50%;
    background: var(--tweca-burgundy);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
    cursor: pointer;
}

.video-facade .video-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent var(--tweca-cream);
}

.video-facade:hover .video-play,
.video-facade .video-play:focus-visible {
    background: var(--tweca-gold);
}

.video-facade:hover .video-play::after,
.video-facade .video-play:focus-visible::after {
    border-left-color: var(--tweca-plum);
}

/* --- Funder logos ------------------------------------------------------ */
/* Each logo sits in a box of the same height, so the headings underneath
   line up with each other however tall or wide the logo itself is. */

.funder-logos {
    height: 120px;
    gap: 32px;
}

.funder-logos img {
    height: 56px;
    width: auto;
    max-width: 100%;
}

.funder-logos img.funder-lockup { height: 70px; }
.funder-logos img.funder-tall { height: 84px; }
.funder-logos img.funder-stamp { height: 112px; }

@media (max-width: 767.98px) {
    .funder-logos {
        height: 100px;
        gap: 24px;
    }

    .funder-logos img { height: 46px; }
    .funder-logos img.funder-lockup { height: 58px; }
    .funder-logos img.funder-tall { height: 68px; }
    .funder-logos img.funder-stamp { height: 92px; }
}

/* --- Programme cards --------------------------------------------------- */
/* Same-shaped photos, and buttons pinned to the bottom, so the three cards
   line up however much text each one holds. */

.donation-item { display: flex; }

.donation-detail {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.donation-detail > .position-relative img {
    aspect-ratio: 10 / 7;
    object-fit: cover;
}

.donation-detail > .btn:last-child { margin-top: auto; }