/* Add here all your CSS customizations */

/*
 * Home page hero captions (Revolution Slider).
 * The heading and vision text sit over the slider photographs, so a soft
 * dark scrim is used behind them to keep the text readable on every image.
 */
#revolutionSlider .tp-caption.hero-caption {
    text-align: center;
    background: rgba(14, 16, 22, 0.58);
    border-radius: 16px;
    padding: 30px 40px;
}

@media (max-width: 767px) {
    #revolutionSlider .tp-caption.hero-caption {
        padding: 20px 22px;
        border-radius: 12px;
    }
}

/*
 * Only the heading (plus a CTA button) lives in the caption now, so it can
 * run larger and bolder than when a paragraph sat underneath it.
 */
#revolutionSlider .hero-caption .hero-label {
    margin: 0 0 22px;
    color: #fff;
    font-weight: 700;
    font-size: 52px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
    white-space: normal;
}

#revolutionSlider .hero-caption .hero-cta {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

@media (max-width: 991px) {
    #revolutionSlider .hero-caption .hero-label { font-size: 36px; }
}

@media (max-width: 767px) {
    #revolutionSlider .hero-caption .hero-label { font-size: 28px; margin-bottom: 16px; }
}

@media (max-width: 500px) {
    #revolutionSlider .hero-caption .hero-label { font-size: 23px; }
}

/* Slow, continuous "Ken Burns" drift on every slide background so the hero
   feels alive rather than a static photo. #revolutionSlider itself clips
   overflow, so the zoomed image never spills past the slide edges. Runs on
   its own ambient timer rather than trying to sync to the ~9s slide
   rotation, which would need the two to line up exactly to look right. */
@media (prefers-reduced-motion: no-preference) {
    .rev_slider_wrapper .tp-bgimg {
        animation: ga-hero-kenburns 20s ease-in-out infinite alternate;
        transform-origin: center center;
    }
}

@keyframes ga-hero-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.1); }
}

/* Soft scrim so hero text stays legible over any slide */
.rev_slider_wrapper .slider::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(18, 20, 26, 0.12) 0%, rgba(18, 20, 26, 0.34) 100%);
    pointer-events: none;
    z-index: 1;
}

.rev_slider_wrapper .slider .tp-caption {
    z-index: 2;
}

/*
 * The SAP 17 menu lists all 17 sub-programs, so cap its height and let it
 * scroll rather than running off the bottom of the viewport.
 */
#mainNav .dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
}

/*
 * ul.history (About Us "motivating factors" list, project timelines) ships
 * a -27px bottom margin on its <h4> in theme-elements.css. That only works
 * when the heading is a single short line; our headings are full sentences
 * that wrap onto 2-3 lines, so the negative margin pulls the paragraph text
 * up on top of the wrapped heading lines.
 */
ul.history li h4 {
    margin-bottom: 10px;
}

/*
 * Portfolio-style thumbnail grids (SAP 17 sub-programs, "SAP 17 in Action"
 * gallery, Programs, Projects, home page previews). The source photos have
 * very different aspect ratios, and plain img-fluid sizes each thumbnail to
 * its own image's ratio, so the grid rows end up an uneven, irregular mix
 * of heights. Cropping every thumbnail into the same fixed-ratio box makes
 * the grid line up regardless of the source image's shape.
 */
.portfolio-list .thumb-info-wrapper {
    aspect-ratio: 4 / 3;
}

.portfolio-list .thumb-info-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
 * Visual refresh
 *
 * The theme's default skin (skin-corporate-6) uses a bright, saturated
 * orange, flat grey section bands with a hard 1px rule, plain-grey feature
 * icons, and flat-bordered cards. This section moves the palette to a
 * deeper, warmer accent, swaps the section bands for whitespace and a soft
 * hairline, and gives cards/icons a gentle shadow so the site reads calmer
 * and more considered rather than "stock template".
 * ========================================================================== */

:root {
    --ga-ink: #21242e;
    --ga-muted: #6b7280;
    --ga-accent: #d97a3f;
    --ga-accent-dark: #b45f2a;
    --ga-accent-soft: #fbeee1;
    --ga-surface-alt: #faf8f5;
    --ga-border: #ece6dd;
    --ga-shadow-sm: 0 4px 14px rgba(33, 36, 46, 0.06);
    --ga-shadow: 0 14px 34px rgba(33, 36, 46, 0.10);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ga-ink);
    letter-spacing: -0.01em;
}

a { color: var(--ga-accent); }
a:hover, a:focus, a:active { color: var(--ga-accent-dark); }

::selection { background: var(--ga-accent-soft); color: var(--ga-ink); }

html .heading-primary,
html .lnk-primary,
html .text-color-primary,
html .text-primary {
    color: var(--ga-accent) !important;
}

/* ---- Section rhythm: whitespace and a soft hairline instead of a flat
   grey band with a hard border ---- */
section.section {
    background: transparent;
    border-top: 1px solid var(--ga-border);
    margin: 0;
    padding: 80px 0;
}

section.section.section-no-border {
    border-top: 0;
}

section.section.section-tertiary {
    background: var(--ga-surface-alt);
    border-top: 0;
}

html .home-intro-dark {
    background: var(--ga-ink);
}

/* ---- Buttons: deeper accent, soft shadow, gentle lift on hover ---- */
html .btn-primary {
    background-color: var(--ga-accent);
    border-color: var(--ga-accent);
    box-shadow: 0 6px 16px rgba(217, 122, 63, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

html .btn-primary:hover,
html .btn-primary.hover {
    background-color: var(--ga-accent-dark);
    border-color: var(--ga-accent-dark);
    box-shadow: 0 10px 22px rgba(180, 95, 42, 0.32);
    transform: translateY(-1px);
}

html .btn-primary:focus,
html .btn-primary.focus {
    box-shadow: 0 0 0 3px rgba(217, 122, 63, 0.35);
}

html .btn-primary:active,
html .btn-primary.active {
    background-color: var(--ga-accent-dark) !important;
    border-color: var(--ga-accent-dark) !important;
    box-shadow: 0 0 0 3px rgba(217, 122, 63, 0.35) !important;
}

/* ---- Nav: active item reads by colour, not a solid block ---- */
#mainNav .nav-link.active,
#mainNav .nav-link.active:hover,
#mainNav .nav-link.active:focus {
    background: transparent !important;
    color: var(--ga-accent) !important;
}

/* ---- Cards: soft shadow and a gentle lift instead of flat borders ---- */
.featured-box {
    border: 1px solid var(--ga-border);
    border-radius: 12px;
    box-shadow: var(--ga-shadow-sm);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.featured-box:hover {
    box-shadow: var(--ga-shadow);
    transform: translateY(-3px);
}

.featured-box .box-content {
    border-top-color: var(--ga-accent);
}

html .featured-box-primary .box-content {
    border-top-color: var(--ga-accent);
}

html .featured-box-primary h4 {
    color: var(--ga-accent);
}

.thumb-info {
    border-color: var(--ga-border);
    box-shadow: var(--ga-shadow-sm);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.thumb-info:hover {
    box-shadow: var(--ga-shadow);
    transform: translateY(-3px);
}

/* Feature icons default to flat grey circles (or, on the style-4 boxes this
   site uses, a bare icon with no background at all) unless a colour
   modifier class is added; the site doesn't use those modifiers, so give
   the icons a soft tinted roundel instead. */
.feature-box .feature-box-icon {
    background: var(--ga-accent-soft);
    color: var(--ga-accent);
}

.feature-box.feature-box-style-4 .feature-box-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-basis: auto;
    width: 60px;
    height: 60px;
    padding: 0;
    margin-bottom: 1.1rem;
    background: var(--ga-accent-soft);
    border-radius: 50%;
}

.feature-box.feature-box-style-4 .feature-box-icon i.fa,
.feature-box.feature-box-style-4 .feature-box-icon .icons {
    color: var(--ga-accent);
    font-size: 1.4em;
    width: auto;
    height: auto;
}

/* ==========================================================================
 * Footer
 *
 * The footer's dark navy backdrop already suits the refresh, so this mostly
 * ties its accents (links, the newsletter button, the ribbon badge) to the
 * new palette and fixes a couple of contrast/legibility gaps rather than
 * restructuring it.
 * ========================================================================== */

html #footer.color-secondary {
    background: var(--ga-ink);
    border-top-color: var(--ga-ink);
}

html #footer.color-secondary .footer-copyright {
    background: #171a22;
    border-top-color: #171a22;
}

#footer h4 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

#footer a:hover {
    color: var(--ga-accent);
}

/* The copyright line was near-invisible: dark grey (#555) text on a
   near-black band. */
#footer .footer-copyright p {
    color: rgba(255, 255, 255, 0.45);
}

/* The stock "Get in Touch" ribbon uses a grey background, a folded-corner
   tail and a cursive script font — a dated flourish. Restyle it as a small
   accent-coloured tag consistent with the rest of the site instead. */
html #footer.color-secondary .footer-ribbon {
    background: var(--ga-accent);
    border-radius: 999px;
    padding: 9px 22px;
}

html #footer.color-secondary .footer-ribbon:before {
    display: none;
}

#footer .footer-ribbon span {
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Newsletter signup button: a plain white button read as a stray form
   control rather than a call to action. */
#footer .newsletter .btn-light {
    background-color: var(--ga-accent);
    border-color: var(--ga-accent);
    color: #fff;
}

#footer .newsletter .btn-light:hover,
#footer .newsletter .btn-light.hover {
    background-color: var(--ga-accent-dark);
    border-color: var(--ga-accent-dark);
    color: #fff;
}

/* ==========================================================================
 * Inner pages (Programs, Projects, SAP 17 detail, Project detail)
 * ========================================================================== */

html .heading-secondary,
html .lnk-secondary,
html .text-color-secondary,
html .text-secondary {
    color: var(--ga-ink) !important;
}

/* Check-mark list icons (Programs "Components", project "Impact"/points,
   home "Get Along" points) */
html .list-primary.list-icons li > .fa:first-child,
html .list-primary.list-icons li a:first-child > .fa:first-child,
html .list-primary.list-icons li > .icons:first-child,
html .list-primary.list-icons li a:first-child > .icons:first-child {
    color: var(--ga-accent);
    border-color: var(--ga-accent);
}

/* "Key Areas of Action" / "Components" cards on SAP and project detail pages */
html .featured-box-secondary .icon-featured {
    background-color: var(--ga-ink);
}

html .featured-box-secondary h4 {
    color: var(--ga-ink);
}

html .featured-box-secondary .box-content {
    border-top-color: var(--ga-ink);
}

/* The stock quaternary variant sets pale mint-green (#e3f5e2) heading text
   on a near-white card — barely legible. It's used for the "Our Approach"
   pull-quote box on SAP detail pages, so give it a proper tinted highlight
   treatment instead of just patching the colour. */
html .featured-box-quaternary .box-content {
    background: var(--ga-accent-soft);
    border-top-color: var(--ga-accent);
}

html .featured-box-quaternary h4 {
    color: var(--ga-ink) !important;
}

.img-thumbnail {
    border-color: var(--ga-border);
    box-shadow: var(--ga-shadow-sm);
}

.btn-default {
    border-color: var(--ga-border);
    color: var(--ga-ink);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background-color: var(--ga-accent-soft);
    border-color: var(--ga-accent);
    color: var(--ga-accent-dark);
}

/* Mobile nav toggle + dropdown menus (SAP 17's 17-item submenu) */
#header .header-btn-collapse-nav {
    background: var(--ga-accent);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--ga-accent-soft);
    color: var(--ga-accent-dark);
}

/* SAP 17 card grid (home preview + the full /sap-17 page). The stock
   "centered-info" style hides the title, SDG badge and dark scrim entirely
   until hover — on a touch device that never happens, and even on desktop
   a grid of bare, uncaptioned photos reads as flat and uninviting on first
   look. Show a bottom gradient + caption by default, matching the theme's
   look, and only intensify on hover instead of revealing from nothing. */
.thumb-info.thumb-info-centered-info .thumb-info-wrapper:after {
    opacity: 1;
    background: linear-gradient(180deg, rgba(20, 20, 26, 0) 45%, rgba(20, 20, 26, 0.85) 100%);
}

.thumb-info.thumb-info-centered-info:hover .thumb-info-wrapper:after {
    background: linear-gradient(180deg, rgba(20, 20, 26, 0.15) 0%, rgba(20, 20, 26, 0.9) 100%);
}

.thumb-info.thumb-info-centered-info .thumb-info-title {
    opacity: 1;
    top: auto;
    bottom: 0;
    transform: none;
    padding: 0 8% 6%;
}

.thumb-info.thumb-info-centered-info:hover .thumb-info-title {
    transform: none;
}

.thumb-info.thumb-info-centered-info .thumb-info-inner {
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.thumb-info.thumb-info-centered-info .thumb-info-type {
    background-color: var(--ga-accent);
    margin-top: 6px;
}

/* Contact page: the office details list (address/phone/email/socials) and
   the message form */
.list.list-icons.list-icons-style-3 li > .fa:first-child,
.list.list-icons.list-icons-style-3 li a:first-child > .fa:first-child,
.list.list-icons.list-icons-style-3 li > .icons:first-child,
.list.list-icons.list-icons-style-3 li a:first-child > .icons:first-child {
    background-color: var(--ga-accent);
}

.form-control:focus {
    border-color: var(--ga-accent);
    box-shadow: 0 0 0 0.2rem rgba(217, 122, 63, 0.25);
}

/* Resources page: a small standalone icon badge above each resource's
   title, now that the layout is image+text (like Programs) rather than
   the old icon+text-only cards. */
.resource-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ga-accent-soft);
    color: var(--ga-accent);
    font-size: 1.3em;
}

/* 404 / 500 error pages. Laravel's stock error views are bare and
   unbranded (no header, nav or way back into the site), so these routes
   render through the same layout as every other page instead. */
.error-page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--ga-accent-soft);
    color: var(--ga-accent);
    font-size: 2.5rem;
}

/* ==========================================================================
 * Mobile header + footer fixes
 * ========================================================================== */

/* The phone/social bar has no responsive hiding of its own (the socials
   drop out at 576px, but the phone number stays at every width), so on
   small screens it's a lonely phone number in an oversized empty strip
   above a logo that already feels loose. Drop the whole bar below the
   point the nav collapses to the hamburger menu. */
@media (max-width: 991px) {
    #header .header-top {
        display: none;
    }
}

/* The footer logo sits in a bare col-lg-1 with no smaller-breakpoint
   class, so below lg it falls back to full column width and img-fluid
   scales the mark up to fill it — a small badge blown up to fill the
   screen. It's a fixed mark, not a hero image, so give it a fixed size. */
#footer .logo img {
    width: 80px;
    max-width: 80px;
}