/* ============================================================
   Global Challenge - custom styles
   This file loads AFTER Bootstrap, so anything in here overrides it.
   ============================================================ */

:root {
    /* Brand colors - use these variables instead of typing the hex
       codes everywhere, so if a color ever changes we only update it here. */
    --gc-orange: #E75102;
    --gc-purple: #463947;
    --gc-grey: #F3F3F3;
}

html {
    /* Safety net for mobile - if any child ever briefly overflows the
       viewport width (an image, an unwrapped row, etc.), this stops it
       from widening the whole page and pushing header/footer out of
       alignment with everything else. Every horizontally-scrolling
       widget on the site (gallery, timeline years) already scrolls
       internally via its own overflow-x, so this doesn't affect those. */
    overflow-x: hidden;
}

body {
    font-family: 'Poppins', sans-serif;
    /* Bootstrap's default is 16px - client asked for 18px as the base
       paragraph size. Headings keep their own larger sizes. */
    font-size: 18px;
    overflow-x: hidden;
    max-width: 100%;
}

/* Client asked for all headings to be uppercase and bold site-wide.
   Individual headings can still set their own font-size/color below -
   this just sets the shared baseline. */
h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    font-weight: 700;
}

/* ------------------------------------------------------------
   Containers
   We use two widths across the site:
   - .container-full   : stretches edge to edge (e.g. hero banners)
   - .container-1440    : centered, capped at 1440px (main page content)
   ------------------------------------------------------------ */
.container-full {
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
}

@media (max-width: 767px) {
    .container-full {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.container-1440 {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* ------------------------------------------------------------
   Main nav
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    header.container-full {
        padding-top: 15px;
    }

    .navbar-brand img {
        height: 40px;
    }
}

@media (min-width: 992px) {
    header.container-full {
        padding-top: 10px;
    }
}

/* Center the nav links inside the mobile flyout panel - matches the
   offcanvas-lg breakpoint, so the inline desktop nav is untouched. */
@media (max-width: 991.98px) {
    #mainNav.offcanvas {
        display: flex;
        flex-direction: column;
        background-color: var(--gc-purple);
    }

    #mainNav .offcanvas-header .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    #mainNav .offcanvas-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    /* Overrides the ms-auto utility class in the markup (used for
       desktop's push-nav-to-the-right layout) so the list centers
       instead of hugging one side. */
    #mainNav .navbar-nav {
        width: 100%;
        margin-left: 0 !important;
        align-items: center;
    }

    #mainNav .nav-item {
        margin-left: 0;
        margin-bottom: 10px;
    }

    #mainNav .nav-link {
        font-size: 22px;
        font-weight: 700;
        color: #fff;
    }

    #mainNav .nav-link:hover,
    #mainNav .nav-link:focus,
    #mainNav .nav-link.active {
        color: var(--gc-orange);
    }

    #mainNav .dropdown-item {
        color: rgba(255, 255, 255, 0.75);
    }

    #mainNav .dropdown-item:hover,
    #mainNav .dropdown-item:focus,
    #mainNav .dropdown-item.active {
        color: #fff;
    }
}

.navbar .nav-link,
.navbar .dropdown-item {
    color: var(--gc-purple);
    font-size: 15px;
}

.navbar .nav-item {
    margin-left: 20px;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item.active {
    color: var(--gc-orange);
}

/* Bootstrap gives .dropdown-item.active a blue background by default -
   we just want the orange text, no background, to match the rest of the nav. */
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
    background-color: transparent;
}

/* "What We Do" opens its submenu on hover (desktop only - navbar-expand-lg's
   breakpoint is 992px) instead of Bootstrap's click-to-toggle, so the "What
   We Do" text itself stays a normal, clickable link. See the comment on
   that link in header.php for why. */
@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
    }
}

/* Below 992px there's no hover, so the Missions/Education/Community
   submenu is shown inline (indented, no dropdown positioning/shadow)
   right under "What We Do" in the mobile flyout instead. */
@media (max-width: 991.98px) {
    .navbar .dropdown-menu {
        display: block;
        position: static;
        border: none;
        box-shadow: none;
        background: none;
        padding: 0;
        margin: 0 0 8px;
        text-align: center;
    }

    .navbar .dropdown-item {
        font-size: 18px;
        font-weight: 600;
        padding: 8px 0;
    }
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.site-footer {
    background-color: var(--gc-grey);
    padding-top: 40px;
    padding-bottom: 20px;
}

.site-footer .row {
    row-gap: 30px;
}

.site-footer h5 {
    color: var(--gc-orange);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.site-footer a {
    color: var(--gc-purple);
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--gc-orange);
}

.social-links {
    margin-bottom: 20px;
}

.social-links a {
    display: inline-block;
    margin-right: 12px;
    font-size: 20px;
}

.footer-bottom {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.footer-legal-links a {
    margin-left: 15px;
}

.popia-consent-label {
    font-size: 12px;
}

.newsletter-alert {
    font-size: 13px;
    padding: 10px 14px;
}

/* ------------------------------------------------------------
   Color helpers - reusable anywhere on the site
   ------------------------------------------------------------ */
.text-orange {
    color: var(--gc-orange);
}

.text-purple {
    color: var(--gc-purple);
}

/* ------------------------------------------------------------
   Homepage hero
   ------------------------------------------------------------ */
.hero {
    padding-top: 100px;
}

.hero-heading {
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    font-size: 70px;
}

@media (max-width: 767px) {
    .hero-heading {
        font-size: 36px;
    }
}

/* ------------------------------------------------------------
   Homepage image gallery
   ------------------------------------------------------------ */
.gallery {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Scrolls horizontally. scroll-snap-type makes it settle neatly on an
   image instead of stopping half way between two. */
.gallery-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* Hide the scrollbar - scrolling/dragging still works fine without it */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* old Edge/IE */
}

.gallery-row::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* 3 images visible at a time - width works out the 16px gaps between them */
.gallery-item {
    flex: 0 0 calc((100% - (16px * 2)) / 3);
    scroll-snap-align: start;
}

/* Only 1 image visible at a time on mobile, instead of 3 cramped-in ones */
@media (max-width: 767px) {
    .gallery-item {
        flex: 0 0 100%;
    }
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* gallery-wrapper needs position:relative so the arrow buttons
   (position:absolute) place themselves against the row, not the page */
.gallery-wrapper {
    position: relative;
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: #fff;
    color: var(--gc-purple);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.gallery-arrow:hover,
.gallery-arrow:focus {
    color: var(--gc-orange);
}

.gallery-arrow-left {
    left: 0;
}

.gallery-arrow-right {
    right: 0;
}

/* ------------------------------------------------------------
   Intro text + stats section
   ------------------------------------------------------------ */
.intro-stats {
    padding-top: 60px;
    padding-bottom: 60px;
}

.section-heading {
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 42px;
}

@media (max-width: 767px) {
    .section-heading {
        font-size: 32px;
    }
}

.section-heading-small {
    font-size: 28px;
}

.intro-text {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.intro-text-wide {
    max-width: 1200px;
    padding-bottom: 32px;
}

.intro-text-spaced {
    margin-bottom: 32px;
}

.stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 40px;
}

.stat-item {
    flex: 1 1 0;
    min-width: 150px;
}

.stat-number {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: var(--gc-purple);
    border-left: 8px solid var(--gc-orange);
    padding-left: 15px;
    margin-bottom: 10px;
}

.stat-item p {
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   Overlay card component
   A wide image with a white card overlapping its bottom corner.
   Used on the What We Do landing page, and for the hero + content
   blocks on the Missions/Education/Community pages.
   ------------------------------------------------------------ */
.overlay-row {
    padding-top: 50px;
    /* Extra bottom padding leaves room for the card poking out below the image */
    padding-bottom: 80px;
}

/* Hero rows (page-hero-image, no card) don't need that extra bottom
   padding on mobile - tightens the gap to whatever comes next. */
@media (max-width: 767px) {
    .page-hero-row {
        padding-bottom: 30px;
    }
}

/* position:relative so the card below can sit on top of/over the image */
.overlay-visual {
    position: relative;
}

.overlay-image {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

.overlay-card {
    position: absolute;
    bottom: -40px;
    width: 80%;
    max-width: 340px;
    background-color: #fff;
    border-radius: 0;
    padding: 25px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.overlay-card-left {
    left: 30px;
}

.overlay-card-right {
    right: 30px;
}

/* Variant used by the Missions "Expeditions" block - image gets right-side
   padding (revealing the section background) and the card sits vertically
   centered over that right edge instead of overlapping the bottom. */
.overlay-visual-inset-right {
    padding-right: 10%;
}

@media (min-width: 768px) {
    .overlay-visual-inset-right {
        padding-right: 18%;
    }
}

.overlay-card-middle-right {
    top: 50%;
    bottom: auto;
    left: auto;
    right: 0;
    transform: translateY(-50%);
}

/* Mirror variant used by the Missions "Equipping" block - image gets
   left-side padding and the card sits vertically centered over that
   left edge. */
.overlay-visual-inset-left {
    padding-left: 10%;
}

@media (min-width: 768px) {
    .overlay-visual-inset-left {
        padding-left: 18%;
    }
}

.overlay-card-middle-left {
    top: 50%;
    bottom: auto;
    right: auto;
    left: 0;
    transform: translateY(-50%);
}

.overlay-card h2 {
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 700;
}

/* What We Do landing + Missions/Education/Community sub-pages
   (.overlay-plain-mobile) on mobile - plain stacked image then text,
   no overlapping/inset card. */
@media (max-width: 767px) {
    .overlay-plain-mobile .overlay-visual-inset-right,
    .overlay-plain-mobile .overlay-visual-inset-left {
        padding-left: 0;
        padding-right: 0;
    }

    .overlay-plain-mobile .overlay-card {
        position: static;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
        max-width: none;
        box-shadow: none;
        margin-top: 20px;
    }

    /* No more card poking out below the image to leave room for */
    .overlay-plain-mobile.overlay-row {
        padding-bottom: 30px;
    }
}

.overlay-list {
    list-style: none;
    padding-left: 0;
    margin: 10px 0;
}

.overlay-list li {
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
}

/* Plain full-width hero image (no overlapping card) used at the top
   of the Missions/Education/Community pages */
.page-hero-image {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    display: block;
}

.page-hero-text {
    max-width: 800px;
    margin: 30px auto 0;
    text-align: center;
}

/* ------------------------------------------------------------
   Donate page
   ------------------------------------------------------------ */
.donate-content {
    padding-top: 70px;
    padding-bottom: 70px;
}

.donate-verify {
    padding-top: 80px;
    padding-bottom: 80px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.donate-verify-heading {
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 20px;
}

.donate-col {
    margin-bottom: 30px;
}

.donate-muted {
    color: #777;
}

.donate-small-text {
    font-size: 13px;
    color: #777;
}

/* S18A accordion - plain <details>/<summary>, no JS needed */
.donate-accordion {
    border: 1px solid #ddd;
    padding: 20px;
    margin-top: 20px;
}

.donate-accordion-summary {
    font-weight: 700;
    color: var(--gc-purple);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.donate-accordion-summary::-webkit-details-marker {
    display: none;
}

.donate-accordion-icon {
    color: var(--gc-orange);
    font-size: 22px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.donate-accordion[open] .donate-accordion-icon {
    transform: rotate(45deg);
}

.donate-accordion-body {
    margin-top: 15px;
}

/* Desktop: accordion is always open (donate.js sets [open]), so drop the toggle affordance */
@media (min-width: 992px) {
    .donate-accordion-summary {
        pointer-events: none;
        cursor: default;
    }

    .donate-accordion-icon {
        display: none;
    }
}

.donate-accordion-body ul {
    padding-left: 20px;
}

/* Payment method toggle (Card / EFT) */
.donate-method-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.donate-method-input {
    /* Hidden but still keyboard/screen-reader accessible, unlike display:none */
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.donate-method-label {
    background-color: #fff;
    color: var(--gc-purple);
    border: 1px solid var(--gc-purple);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 20px;
    cursor: pointer;
}

.donate-method-label.active {
    background-color: var(--gc-orange);
    border-color: var(--gc-orange);
    color: #fff;
}

.donate-error {
    color: #c0392b;
    margin-top: 15px;
}

/* EFT bank details */
.donate-bank-details {
    background-color: var(--gc-grey);
    padding: 25px;
    margin-bottom: 20px;
}

.donate-bank-details-heading {
    font-size: 18px;
    color: var(--gc-purple);
    margin-bottom: 15px;
}

.donate-bank-details-list {
    margin: 0;
}

.donate-bank-details-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 8px 0;
    border-bottom: 1px solid #e2e2e2;
}

.donate-bank-details-row:last-child {
    border-bottom: none;
}

.donate-bank-details-row dt {
    color: #777;
}

.donate-bank-details-row dd {
    font-weight: 700;
    text-align: right;
    margin: 0;
}

.donate-notify {
    margin-top: 40px;
}

/* ------------------------------------------------------------
   Celebrate Book order form
   ------------------------------------------------------------ */
/* The 4 section-level labels (Delivery Options, Parcel Size, Local
   Shipping Options, Address) use .form-label.d-block, unlike the plain
   per-field labels (First Name, Email, etc.) - bolder to read as
   section headings rather than just another field label. */
.form-label.d-block {
    font-weight: 700;
}

.order-form-section {
    padding-top: 60px;
    padding-bottom: 70px;
}

.order-form-note {
    color: #777;
    font-size: 14px;
    margin-bottom: 40px;
}

.order-required {
    color: var(--gc-orange);
    font-weight: 400;
    font-size: 14px;
    text-transform: none;
}

.order-book-card {
    margin-bottom: 25px;
}

.order-book-price {
    color: var(--gc-purple);
    font-size: 18px;
    margin-bottom: 0;
}

.order-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.order-radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
    cursor: pointer;
}

.order-radio-option input[type="radio"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--gc-orange);
}

.order-panel {
    margin-bottom: 25px;
}

.order-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid var(--gc-purple);
    padding-top: 15px;
    margin: 30px 0 25px;
}

.order-total-label {
    text-transform: uppercase;
    font-weight: 800;
    color: var(--gc-purple);
}

.order-total-amount {
    font-size: 26px;
    font-weight: 800;
    color: var(--gc-orange);
}

/* ------------------------------------------------------------
   Way to the Nations page - "Join the Journey"
   ------------------------------------------------------------ */
.journey {
    padding-top: 20px;
    padding-bottom: 60px;
}

.journey-row {
    row-gap: 40px;
    margin-top: 30px;
}

.journey-heading {
    text-transform: uppercase;
    border-left: 4px solid var(--gc-orange);
    padding-left: 15px;
    font-size: 20px;
    margin-bottom: 15px;
}

.journey-list {
    padding-left: 20px;
    margin: 0;
}

.journey-list li {
    padding: 4px 0;
}

.wttn-note {
    font-size: 14px;
    color: #777;
    margin-top: 25px;
}

.wttn-kingdom-heading {
    text-transform: uppercase;
    font-weight: 700;
}

/* ------------------------------------------------------------
   Contact page
   ------------------------------------------------------------ */
.contact-details {
    padding-top: 50px;
    padding-bottom: 50px;
}

.contact-heading {
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 20px;
}

.contact-subheading {
    color: var(--gc-purple);
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.contact-link {
    color: var(--gc-orange);
    text-decoration: none;
}

.contact-link:hover,
.contact-link:focus {
    color: var(--gc-orange);
    text-decoration: underline;
}

.contact-info-row {
    margin-top: 20px;
}

.contact-map {
    --bs-aspect-ratio: 50%;
}

.contact-map iframe {
    border: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------
   Missions / Education / Community page - shared styles
   The hero image + text sit in .page-hero-image/.page-hero-text above,
   and the 3 content blocks below it re-use the overlay card component.
   ------------------------------------------------------------ */
.page-eyebrow {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.page-hero-heading {
    color: var(--gc-purple);
    font-weight: 700;
    margin-bottom: 15px;
}

.subsection-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

/* ------------------------------------------------------------
   Values page
   One row per value: image + text side by side, alternating which
   side the image sits on. The "Origin Story" callout sits inside
   the text column, set apart with a left border and tinted background.
   ------------------------------------------------------------ */
.value-row {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Way to the Nations page - overrides .value-row's bottom padding so
   the page's last section has extra breathing room before the footer */
.wttn-kingdom-adventure {
    padding-bottom: 80px;
}

/* Tree Tops page - same override, for the same reason */
.tree-tops-apply {
    padding-bottom: 80px;
}

/* Values page - same override, for the same reason */
.values-last-row {
    padding-bottom: 80px;
}

.tree-tops-apply-heading {
    text-transform: uppercase;
    font-weight: 700;
}

.tree-tops-ages-image {
    display: block;
    margin: 20px 0;
    max-width: 100%;
}

/* Shared "image + overlapping text card" row pattern - used by the Values
   page (col-md-5 image / col-md-7 card) and the What We Do sub-pages
   (col-md-9 image / col-md-3 card). Row is stretched (not centered) so
   the image column always matches the height of the text card next to
   it, however long the card's text runs. The column then centers the
   image vertically inside that height, and the image itself is a little
   shorter than the column (60px less) so it never looks taller than
   the card. */
.overlap-image-col {
    display: flex;
    align-items: center;
}

.overlap-image {
    width: 100%;
    height: calc(100% - 60px);
    min-height: 260px;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .overlap-image {
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

/* Way to the Nations: the card carries a lot of text, so the stretched
   image column gets very tall - trim the image further (card pokes out
   above and below it) */
@media (min-width: 768px) {
    .wttn-kingdom-adventure .overlap-image {
        height: calc(100% - 160px);
    }
}

.overlap-content {
    padding: 30px 0;
}

@media (min-width: 768px) {
    .overlap-content {
        padding: 40px;
    }
}

/* The card's column is pulled back over the image edge with a negative
   margin so the card overlaps it, same overlapping-card look as the
   overlay card component used elsewhere on the site. */
.overlap-text-col {
    position: relative;
    z-index: 2;
}

/* The column is stretched to match the image's height (see
   .overlap-image-col) - center the card inside it instead of leaving it
   pinned to the top with empty space below. */
@media (min-width: 768px) {
    .overlap-text-col {
        display: flex;
        align-items: center;
    }
}

/* The negative margin shifts the whole box, both edges - left unchecked
   that also drags the card's outer edge in from the container boundary,
   leaving a gap. Widening the card by the same amount it shifts cancels
   that out, so only the inner edge (overlapping the image) moves. The
   extra width is context-specific (the card's own Bootstrap column
   width varies by page), hence the two scoped selectors below. */
@media (min-width: 768px) {
    .overlap-text-col-shift-left {
        margin-left: -60px;
    }

    .overlap-text-col-shift-right {
        margin-right: -60px;
    }

    .value-row .overlap-text-col-shift-left,
    .value-row .overlap-text-col-shift-right {
        width: calc(58.3333% + 60px);
    }

    .overlay-row .overlap-text-col-shift-left,
    .overlay-row .overlap-text-col-shift-right {
        width: calc(25% + 60px);
    }

    /* Missions page blocks use a wider card: col-md-4, not col-md-3 */
    .overlay-row-wide-card .overlap-text-col-shift-left,
    .overlay-row-wide-card .overlap-text-col-shift-right {
        width: calc(33.3333% + 60px);
    }

    /* Way to the Nations card is col-md-5, not col-md-3 */
    .wttn-kingdom-adventure .overlap-text-col-shift-left {
        width: calc(41.6667% + 60px);
    }
}

.overlap-card {
    background-color: #fff;
}

@media (min-width: 768px) {
    .overlap-card {
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }
}

/* Match the overlay card component's heading treatment used elsewhere
   on the What We Do pages. */
.overlap-card h2 {
    font-size: 22px;
}

/* Outline variant of .btn - used by the Origin Story popup trigger */
.btn-outline {
    background-color: transparent;
    color: var(--gc-orange);
    border: 1px solid var(--gc-orange);
}

.btn-outline:hover,
.btn-outline:focus {
    background-color: var(--gc-orange);
    color: #fff;
}

.origin-story-btn {
    margin-top: 20px;
}

/* Generic popup (Bootstrap modal) chrome - used by the Values page's
   Origin Story popups and the Missions page's Study Hub popup */
.site-modal .modal-content {
    border-radius: 0;
    border: none;
}

.site-modal .modal-header {
    border-bottom: none;
}

.site-modal .modal-title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
}

.site-modal .modal-body {
    padding-top: 0;
}

/* Origin Story popup only - its body reads as a first-person account */
.origin-modal .modal-body {
    font-style: italic;
}

/* ------------------------------------------------------------
   About page - vision banner
   ------------------------------------------------------------ */
.vision {
    padding-top: 60px;
    padding-bottom: 60px;
}

.vision-image {
    width: 100%;
    display: block;
}

.vision-heading {
    font-weight: 700;
    text-transform: uppercase;
}

.vision-subheading {
    font-size: 20px;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .vision-heading,
    .vision-subheading {
        text-align: center;
    }

    .vision-heading {
        margin-top: 25px;
    }

    /* Contact page's hero re-uses the .vision image/text layout, but with
       .page-eyebrow/.page-hero-heading instead of .vision-heading. */
    .vision .page-eyebrow {
        margin-top: 25px;
    }
}

/* ------------------------------------------------------------
   About page - values tab switcher
   ------------------------------------------------------------ */
.values {
    padding-top: 60px;
    padding-bottom: 60px;
}

.values-tabs {
    border-bottom: 1px solid #ddd;
    margin-top: 30px;
    margin-bottom: 30px;
}

.values-tabs .nav-link {
    border: none;
    color: var(--gc-purple);
    font-weight: 600;
    padding: 10px 20px;
}

.values-tabs .nav-link.active {
    color: var(--gc-orange);
    border-bottom: 3px solid var(--gc-orange);
    background-color: transparent;
}

.values-tab-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.values-readmore {
    display: inline-block;
    margin-top: 20px;
    color: var(--gc-orange);
    font-weight: 600;
    text-decoration: none;
}

.values-readmore:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------
   About page - "Unpack more of the story"
   ------------------------------------------------------------ */
.unpack-story {
    padding-top: 60px;
    padding-bottom: 60px;
}

.unpack-col {
    margin-top: 30px;
}

.unpack-heading {
    font-size: 22px;
    margin-bottom: 20px;
}

.unpack-col .ratio {
    margin-bottom: 20px;
}

.celebrate-book-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------------
   About page - Leadership
   ------------------------------------------------------------ */
.leadership {
    padding-top: 60px;
    padding-bottom: 60px;
}

.leadership-row {
    row-gap: 30px;
}

/* Space between the Trustees and Board Members grids, now that there's
   no group heading between them to provide it. */
.leadership-row-spaced {
    margin-top: 40px;
}

.leadership-card {
    text-align: center;
}

.leadership-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
    display: block;
    margin: 0 auto 15px;
}

.leadership-name {
    margin-bottom: 0;
}

.leadership-role {
    color: var(--gc-orange);
    margin-bottom: 0;
}

/* Overrides .leadership-role's orange for the Contact page - the role
   title reads better dark there, orange is reserved for the email
   link below it */
.contact-role {
    color: inherit;
    margin-bottom: 8px;
}

/* ------------------------------------------------------------
   About page - "The Global Challenge Story" timeline
   ------------------------------------------------------------ */
.timeline {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* timeline-content-wrapper needs position:relative so the Prev/Next
   arrows (position:absolute, reusing .gallery-arrow from the homepage
   film strip) place themselves against the card, not the page. Pushed
   out past the card edge so they don't sit on top of its image/text. */
.timeline-content-wrapper {
    position: relative;
}

.timeline-content-wrapper .gallery-arrow-left {
    left: -24px;
}

.timeline-content-wrapper .gallery-arrow-right {
    right: -24px;
}

@media (max-width: 767px) {
    .timeline-content-wrapper .gallery-arrow-left {
        left: 0;
    }

    .timeline-content-wrapper .gallery-arrow-right {
        right: 0;
    }
}

/* Row of year buttons - scrolls left/right since 18 years don't fit on
   screen at once. Same scrollbar-hiding trick as the homepage gallery. */
.timeline-years {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
    gap: 22px;
    margin-top: 30px;
    margin-bottom: 40px;
    /* padding-top leaves room for the hover tooltip on the dots below -
       overflow-x: auto forces the browser to clip vertically too, so
       without this the tooltip would be cut off above the row */
    padding-top: 30px;
    padding-bottom: 10px;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.timeline-years::-webkit-scrollbar {
    display: none;
}

/* Replaced by .timeline-mobile-nav's Prev/Next arrows on mobile */
@media (max-width: 767px) {
    .timeline-years {
        display: none;
    }
}

.timeline-years .nav-link {
    white-space: nowrap;
    color: var(--gc-purple);
    border-radius: 0;
    font-weight: 600;
}

.timeline-years .nav-link.active {
    background-color: var(--gc-orange);
    color: #fff;
}

/* The middle years (2007-2024) show as small dots instead of text buttons */
.timeline-years .timeline-year-dot {
    position: relative;
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 50%;
    background-color: #ddd;
    flex-shrink: 0;
}

.timeline-years .timeline-year-dot.active {
    background-color: var(--gc-orange);
}

/* The year label is hidden until you hover the dot (or it's the active one) */
.timeline-year-dot .year-text {
    display: none;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 600;
    color: var(--gc-purple);
}

.timeline-year-dot:hover .year-text,
.timeline-year-dot.active .year-text {
    display: block;
}

.timeline-card {
    background-color: var(--gc-grey);
    border-radius: 0;
    padding: 40px;
}

.timeline-card h3 {
    color: var(--gc-purple);
    margin-bottom: 15px;
}

.timeline-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: top;
    border-radius: 0;
    display: block;
}

/* ------------------------------------------------------------
   One Mission, three Expressions
   ------------------------------------------------------------ */
.expressions {
    padding-top: 60px;
    padding-bottom: 60px;
}

.expressions-row {
    margin-top: 40px;
    row-gap: 30px;
}

/* position:relative so the label bar can sit on top of the image */
.expression-card {
    position: relative;
    display: block;
}

.expression-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* Big bold label stretching across the bottom of the image */
.expression-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 10px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: 800;
    font-size: 60px;
    line-height: 1;
    letter-spacing: 0px;
    margin-bottom: -10px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

@media (max-width: 767px) {
    .expression-label {
        font-size: 48px;
    }
}

/* Purple, semi-transparent hover overlay with the blurb + "Read more"
   button - hidden until the card is hovered, then fades in over the
   image while the label underneath it fades out. */
.expression-hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    background: rgba(70, 57, 71, 0.9);
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.expression-card:hover .expression-hover {
    opacity: 1;
}

.expression-card:hover .expression-label {
    opacity: 0;
}

.expression-hover p {
    font-size: 18px;
    margin-bottom: 20px;
}

.expression-hover-btn {
    display: inline-block;
    background: var(--gc-orange);
    border: 2px solid var(--gc-orange);
    padding: 10px 24px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 14px;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
    background-color: var(--gc-orange);
    color: #fff;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    padding: 13px 20px;
}

.btn:hover,
.btn:focus {
    background-color: var(--gc-orange);
    color: #fff;
    box-shadow: none;
}

/* ------------------------------------------------------------
   Form fields
   ------------------------------------------------------------ */
.form-control,
.form-select {
    border: 1px solid #ddd;
    border-radius: 0;
    box-shadow: none;
    padding-top: 10px;
    padding-bottom: 10px;
}

.form-control:focus {
    border-color: var(--gc-orange);
    box-shadow: none;
}

/* ------------------------------------------------------------
   Privacy Policy / Terms and Conditions pages
   ------------------------------------------------------------ */
.legal-page {
    padding-top: 60px;
    padding-bottom: 60px;
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.legal-heading {
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px;
}

.legal-updated {
    color: #777;
    font-size: 14px;
    margin-bottom: 30px;
}

.legal-content h2 {
    font-size: 24px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 15px;
}

.legal-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--gc-purple);
    margin-top: 25px;
    margin-bottom: 10px;
}

.legal-content ul {
    padding-left: 20px;
}

.legal-content li {
    margin-bottom: 8px;
}