/* vim: set sw=4 ts=4 sts=4 et ai: */
/* Homepage-specific styles — loaded only on index.htm via a BB_PAGE_ID conditional in head.php. */

:root {
    /* Mid-tone blue for eyebrow labels on white/light backgrounds. */
    --eyebrow-blue: #4a86bf;
    /* Lighter blue for eyebrow labels on dark navy backgrounds (e.g. portfolio section). */
    --eyebrow-blue-dark-bg: #8fc4e8;
}

/*
 * Bootstrap 3 sets html{font-size:10px}, making 1rem=10px sitewide. Since homepage.css
 * loads last and only on the homepage, this override restores 1rem=16px here without
 * affecting any other page.
 */
html { font-size: 100%; }

/* --- Hero picture --- */

.hero-picture-wrap {
    position: relative;
    display: block;
}

/*
 * theme-responsive.css sets `.carousel, .item img { height:auto !important }` across
 * all its breakpoints. `.hero-picture-wrap .hero-img` has specificity (0,2,0) which
 * beats `.item img` at (0,1,1), so the !important here wins at every viewport.
 */
.hero-picture-wrap .hero-img {
    display: block;
    width: 100%;
    height: 540px !important;
    max-height: 560px;
    object-fit: cover;
    object-position: 50% 61%;
}

/*
 * Diagonal bottom-left gradient: eased from the original heavy overlay so the
 * sunset sky and water colors show through on the right half. Left-side opacity
 * reduced from 0.88→0.75 and fades to transparent earlier (75% vs 100%), letting
 * the warm reds/golds breathe. Bottom-up layer eased from 0.65→0.40.
 */
.hero-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(90deg, rgba(5,24,45,0.75) 0%, rgba(5,24,45,0.50) 33%, rgba(5,24,45,0.10) 58%, transparent 75%),
        linear-gradient(to top,  rgba(5,24,45,0.40) 0%, transparent 42%);
    display: flex;
    align-items: center;
}

.hero-caption-inner {
    padding: 0 20px 0 52px;
    max-width: 540px;
    color: #fff;
    text-align: left;
}

.hero-headline {
    font-size: 3.1em;
    font-weight: bold;
    margin: 0 0 10px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
    line-height: 1.12;
    color: #fff;
}

/* Subheading in warm gold. */
.hero-subhead {
    font-size: 1.0625rem;
    margin: 0 0 14px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    font-weight: 500;
    color: #e6ad45;
}

/* --- Benefits bar: translucent navy bar across the bottom of the photo --- */
.hero-benefits-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(5, 24, 45, 0.80);
    z-index: 2;
}

.hero-benefits-bar-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 16px 24px;
    gap: 20px;
}

.hero-benefits-bar .hero-benefit-item {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
}

.hero-benefits-bar .hero-benefit-item .fa {
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.80);
    flex-shrink: 0;
}

.hero-benefits-bar .hero-benefit-item a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hero-benefits-bar .hero-benefit-item a:hover {
    color: #fff;
    text-decoration: underline;
}

.hero-ctas {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

/*
 * The base .donate-btn (style.css) has no font-weight, no border-radius, no padding.
 * .hero-cta-primary.donate-btn specificity (0,2,0) beats .donate-btn (0,1,0).
 */
.hero-cta-primary.donate-btn {
    display: inline-block;
    height: auto;
    line-height: 1.4286;
    padding: 10px 26px;
    font-weight: bold;
    font-size: 0.9375rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.hero-cta-primary.donate-btn:hover,
.hero-cta-primary.donate-btn:focus {
    background: #154878;
    text-decoration: none;
}

.hero-cta-secondary {
    display: inline-block;
    padding: 10px 22px;
    border: 2px solid #fff;
    border-radius: 6px;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    white-space: nowrap;
}

.hero-cta-secondary:hover,
.hero-cta-secondary:focus {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 1180px) {
    .hero-picture-wrap .hero-img { height: 520px !important; }
    .hero-headline { font-size: 2.8em; }
    .hero-caption-inner { padding-left: 36px; }
}

@media (max-width: 767px) {
    .hero-picture-wrap .hero-img { height: 540px !important; object-position: 50% 64%; }
    /*
     * Mobile: switch to bottom-up gradient, center-aligned text.
     * Left-to-right layout is too compressed on phone widths.
     */
    /*
     * Extend wrap below image with solid navy so trust badges have a background.
     * Caption (position:absolute; bottom:0) stretches into the padding area.
     * Gradient reaches 100% at 82% (508÷620), 32px before the image boundary,
     * so the photo dissolves into navy rather than cutting at the img edge.
     * rgba(5,24,45,0) instead of `transparent` avoids gray interpolation.
     */
    .hero-picture-wrap {
        background-color: #05182d;
        padding-bottom: 80px;
    }
    .hero-caption {
        background: linear-gradient(to bottom,
            rgba(5,24,45,0) 0%,
            rgba(5,24,45,0) 60%,
            rgba(5,24,45,0.30) 65%,
            rgba(5,24,45,0.75) 75%,
            rgba(5,24,45,1.00) 82%,
            rgba(5,24,45,1.00) 100%
        );
        align-items: flex-start;
    }
    .hero-caption-inner {
        padding: 415px 20px 16px;
        max-width: none;
        width: 100%;
        text-align: center;
    }
    .hero-headline { font-size: 1.75rem; }
    .hero-subhead { font-size: 1.125rem; margin-bottom: 10px; }
    .hero-trust-badges { justify-content: center; gap: 4px 12px; }
    /* CTAs hidden on mobile — sticky bottom bar covers Donate + Call */
    .hero-ctas { display: none; }
    /*
     * Benefits bar: allow natural 3→2+1→1+1+1 wrapping, all centered.
     * Items keep white-space:nowrap (from base rule) so each item's full
     * text width drives when it wraps — no forced column stacking.
     */
    .hero-benefits-bar-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 24px;
        padding: 12px 16px;
    }
}

@media (max-width: 480px) {
    .hero-picture-wrap .hero-img { height: 540px !important; }
    /*
     * Extend the wrap below the image with solid navy so trust badges
     * have a background to sit on. The caption (position:absolute; bottom:0)
     * stretches to fill the full wrap including this padding. Same gradient as
     * the 767px block: 100% at 82% (508÷620), photo dissolves 32px before the
     * image boundary.
     */
    .hero-picture-wrap {
        background-color: #05182d;
        padding-bottom: 80px;
    }
    .hero-caption {
        background: linear-gradient(to bottom,
            rgba(5,24,45,0) 0%,
            rgba(5,24,45,0) 60%,
            rgba(5,24,45,0.30) 65%,
            rgba(5,24,45,0.75) 75%,
            rgba(5,24,45,1.00) 82%,
            rgba(5,24,45,1.00) 100%
        );
    }
    .hero-caption-inner { padding-bottom: 16px; }
    .hero-headline { font-size: 1.75rem; }
    .hero-trust-badges { display: flex; font-size: 0.8rem; gap: 4px 10px; }
}

/*
 * Narrower breakpoints: the subhead wraps at ~413px, causing trust badges to
 * overflow the bottom of the hero wrap. Fix by extending padding-bottom so the
 * navy background area is tall enough to contain the wrapped content. The
 * gradient's fully-opaque stop is recalculated as 540÷(540+padding-bottom)
 * so the image/extension boundary stays seamless.
 */
@media (max-width: 413px) {
    /* 504÷655 = 77% — opaque 36px before image boundary */
    .hero-picture-wrap { padding-bottom: 115px; }
    .hero-caption {
        background: linear-gradient(to bottom,
            rgba(5,24,45,0) 0%,
            rgba(5,24,45,0) 58%,
            rgba(5,24,45,0.30) 63%,
            rgba(5,24,45,0.75) 72%,
            rgba(5,24,45,1.00) 77%,
            rgba(5,24,45,1.00) 100%
        );
    }
}

@media (max-width: 360px) {
    /* 509÷670 = 76% — opaque 31px before image boundary */
    .hero-picture-wrap { padding-bottom: 130px; }
    .hero-caption {
        background: linear-gradient(to bottom,
            rgba(5,24,45,0) 0%,
            rgba(5,24,45,0) 57%,
            rgba(5,24,45,0.30) 62%,
            rgba(5,24,45,0.75) 71%,
            rgba(5,24,45,1.00) 76%,
            rgba(5,24,45,1.00) 100%
        );
    }
}

/*
 * ≤344px: benefits bar wraps to 3 stacked rows (~108px). 190px padding-bottom
 * keeps the bar clear of caption content. Gradient reaches 100% at 70%
 * (511÷730), 29px before the image boundary — widening the fade zone from the
 * previous 7px to 36px so the photo dissolves smoothly rather than cutting.
 */
@media (max-width: 344px) {
    .hero-picture-wrap { padding-bottom: 190px; }
    .hero-caption {
        background: linear-gradient(to bottom,
            rgba(5,24,45,0) 0%,
            rgba(5,24,45,0) 54%,
            rgba(5,24,45,0.30) 58%,
            rgba(5,24,45,0.75) 65%,
            rgba(5,24,45,1.00) 70%,
            rgba(5,24,45,1.00) 100%
        );
    }
}

/* --- Trust bar (content-trust.php) --- */
.trust-bar {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-color: #edf2f7;
    text-align: center;
}

.trust-bar-item {
    flex: 1 0 0;
    padding: 22px 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Inset vertical dividers — pseudo-element leaves ~10% gap top and bottom */
.trust-bar-item::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    border-right: 1px solid #c8d5e3;
}

.trust-bar-item:last-child::after {
    display: none;
}

/* Icon container — positions the check badge relative to the icon */
.trust-bar-icon-wrap {
    position: relative;
    display: inline-block;
    line-height: 1;
}

.trust-bar-icon {
    font-size: 2.4rem;
    color: #154878;
    display: block;
}

/*
 * fa-stack font-size halved so fa-stack-2x renders the certificate at
 * 2×1.2rem = 2.4rem, matching .trust-bar-icon on the other five items.
 */
.trust-bar-cert-stack {
    font-size: 1.2rem;
    color: #154878;
    vertical-align: middle;
}

/*
 * "20" text inside certificate: absolute centering via top/transform,
 * independent of FA4's line-height inheritance on .fa-stack-1x.
 */
.trust-bar-cert-year {
    color: #fff;
    font-weight: 900;
    font-style: normal;
    font-size: 0.75em;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
}

/* Orange check-circle badge — bottom-right corner of each icon */
.trust-bar-check {
    position: absolute;
    bottom: -10px;
    right: -12px;
    font-size: 1.8rem;
    color: #ff812f;
    line-height: 1;
    text-shadow: 0 0 0 3px #edf2f7;
}

/* Per-icon right nudges: each glyph has different right-side ink extent. */
.trust-bar-item:nth-child(2) .trust-bar-check,
.trust-bar-item:nth-child(4) .trust-bar-check {
    right: -22px;
}

.trust-bar-item:nth-child(3) .trust-bar-check {
    right: -16px;
}

.trust-bar-item:nth-child(5) .trust-bar-check {
    right: -15px;
}

.trust-bar-label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.35;
    color: #154878;
}

/* Tablet: 3 per row */
@media (max-width: 991px) {
    .trust-bar-item {
        flex: 0 0 33.333%;
    }
    /* Hide divider on last item of each row */
    .trust-bar-item:nth-child(3n)::after {
        display: none;
    }
    /* Bottom border between the two rows */
    .trust-bar-item:nth-child(-n+3) {
        border-bottom: 1px solid #c8d5e3;
    }
}

/* Phone: 2 per row */
@media (max-width: 600px) {
    .trust-bar-item {
        flex: 0 0 50%;
        border-bottom: 1px solid #c8d5e3;
    }
    /* Left-column items keep divider; right-column items drop it */
    .trust-bar-item:nth-child(odd)::after {
        display: block;
    }
    .trust-bar-item:nth-child(even)::after {
        display: none;
    }
    /* No bottom border on last row (items 5 and 6) */
    .trust-bar-item:nth-child(n+5) {
        border-bottom: none;
    }
}

/* --- Shared section intro: eyebrow label + headline --- */
.section-intro {
    text-align: center;
    margin-bottom: 32px;
}

.section-eyebrow {
    font-variant: small-caps;
    color: var(--eyebrow-blue);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
}

.section-headline {
    font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
    font-weight: bold;
    color: #154878;
    margin: 0;
    line-height: 1.15;
}

.section-headline--two-part {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.section-headline--two-part span {
    white-space: nowrap;
}

@media (max-width: 350px) {
    .section-headline--two-part span {
        white-space: normal;
    }
}

/* --- Process steps (content-steps.php) --- */
.process-section {
    padding-block: clamp(3rem, 6vw, 6rem);
    background: #fff;
}

.process-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    --card-gap: clamp(0.5rem, 1vw, 0.875rem);
    margin: calc(-1 * var(--card-gap));
}

.process-card {
    flex: 0 0 25%;
    max-width: 25%;
    min-width: 0;
    padding: var(--card-gap);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.process-card-inner {
    position: relative;
    /* top padding keeps content clear of the badge (badge bottom ~36px) */
    padding: 42px 20px 24px 20px;
    flex: 1;
    box-sizing: border-box;
    border: 1px solid #dde6ef;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
}

.process-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 26px;
    height: 26px;
    background-color: #ff812f;
    border-radius: 50%;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: bold;
    line-height: 26px;
    text-align: center;
}

/* Watermark icon: absolutely positioned bottom-right, kitty-corner to the badge. */
.process-icon-wrap {
    position: absolute;
    bottom: 12px;
    right: 14px;
    pointer-events: none;
}

.process-icon-wrap .fa {
    font-size: 3.5rem;
    color: rgba(21, 72, 120, 0.14);
}

.process-body {
    min-width: 0;
}

.process-heading {
    font-size: clamp(1.1rem, 1.2vw + 0.8rem, 1.35rem);
    font-weight: bold;
    color: #154878;
    margin: 0 0 4px;
    line-height: 1.25;
}

.process-blurb {
    font-size: 1rem;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

/*
 * Medium: 2×2 — covers 560–1199px. At 992–1199px the container is still
 * too narrow for four large-icon cards without heading text breaking out.
 * 4×1 only kicks in at 1200px+ (Bootstrap's lg container jump to 1170px).
 */
@media (max-width: 1199px) {
    .process-card {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Narrow: 1×4 stacked */
@media (max-width: 560px) {
    .process-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* --- Common situations (content-situations.php) --- */
.situations-section {
    padding-block: clamp(3rem, 6vw, 6rem);
    background: #f5f8fb;
}

.situations-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    --card-gap: clamp(0.5rem, 1vw, 0.875rem);
    margin: calc(-1 * var(--card-gap));
}

.situation-card {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding: var(--card-gap);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.situation-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 16px 24px;
    flex: 1;
    box-sizing: border-box;
    border: 1px solid #dde6ef;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
    background: #fff;
}

.situation-card-inner .fa {
    font-size: 3rem;
    color: #154878;
    margin-bottom: 14px;
}

.situation-heading {
    font-size: clamp(1.1rem, 1.2vw + 0.8rem, 1.35rem);
    font-weight: bold;
    color: #154878;
    margin: 0 0 8px;
    line-height: 1.25;
}

.situation-blurb {
    font-size: 1rem;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

/* 2×3: ≤767px */
@media (max-width: 767px) {
    .situation-card {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* 1×6: ≤480px */
@media (max-width: 480px) {
    .situation-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* --- Testimonials (content-testimonials.php) --- */
.testimonials-section {
    padding-block: clamp(3rem, 6vw, 6rem);
    background: #edf2f7;
}

.testimonials-panel {
    background: #fff;
    border: 1px solid #dde6ef;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
    overflow: hidden;
}

.testimonial-entry {
    padding: 10px 18px;
    line-height: 1.55;
    font-size: 1rem;
    color: #222;
}

.testimonial-entry + .testimonial-entry {
    border-top: 1px solid #dde6ef;
}

/* Stars render as an inline-block with nowrap so the 5 stars never break mid-row. */
.testimonial-stars-inline {
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
    margin-right: 2px;
}

.testimonial-stars-inline .fa-star {
    font-size: 1.125rem;
    color: #f5a623;
}

.testimonial-quote-text {
    color: #222;
}

.testimonial-attr {
    color: #154878;
    font-weight: bold;
    font-size: 0.875rem;
}

/* At very narrow viewports, shrink stars rather than letting them fill the full line. */
@media (max-width: 320px) {
    .testimonial-stars-inline .fa-star { font-size: 0.9375rem; }
}

/* --- Savings table (content-savings.php) --- */
.savings-section {
    padding-block: clamp(3rem, 6vw, 6rem);
}
/* Navy outer border — beats Bootstrap .table-bordered (0,1,0) specificity */
.savings-table.table-bordered {
    border-color: #154878;
}
/* Navy header: background, white text, vertical-center alignment, equal padding.
   Double-class specificity (0,2,3) beats Bootstrap .table > thead > tr > th (0,1,3). */
.savings-table.table > thead > tr > th {
    background-color: #154878;
    color: #fff;
    font-size: 1.05rem;
    font-weight: bold;
    vertical-align: middle;
    border-color: #154878;
    padding: 12px;
}
/* Navy cell borders, readable text, and vertical centering in body rows */
.savings-table.table-bordered > tbody > tr > td {
    border-color: #154878;
    color: #000;
    font-size: 1rem;
    vertical-align: middle;
}
/* Blue-tinted alternating rows (table-striped removed from HTML; no Bootstrap conflict) */
.savings-table > tbody > tr:nth-child(odd) > td {
    background-color: #edf3f9;
}

/* --- Final CTA (content-final-cta.php) --- */
.final-cta-section {
    position: relative;
    min-height: 580px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(3rem, 6vw, 6rem);
    background-image: url('../images/cta-trailer.jpg');
    background-size: cover;
    background-position: center;
    text-align: center;
}
/* Semi-transparent navy overlay — lets the photo read through while ensuring text contrast */
.final-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 24, 45, 0.55);
}
/* Content sits above the overlay */
.final-cta-inner {
    position: relative;
    z-index: 1;
}
.final-cta-headline {
    font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
    font-weight: bold;
    color: #fff;
    margin: 0 0 16px;
    line-height: 1.15;
    text-shadow: 0 0 18px rgba(5,24,45,0.9), 0 0 40px rgba(5,24,45,0.7), 0 0 70px rgba(5,24,45,0.5);
}
.final-cta-phone {
    font-size: 1.75rem;
    font-weight: bold;
    margin: 0;
}
.final-cta-phone a {
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 18px rgba(5,24,45,0.9), 0 0 40px rgba(5,24,45,0.7), 0 0 70px rgba(5,24,45,0.5);
}
.final-cta-phone-number {
    white-space: nowrap;
}
.final-cta-phone a:hover,
.final-cta-phone a:focus {
    color: rgba(254, 82, 76, 1);
}
/* Shift background right; float text to top so faces stay clear of the text */
@media (max-width: 767px) {
    .final-cta-section {
        background-position: 75% center;
        justify-content: flex-start;
    }
}

/* --- Portfolio carousel (#portfolio) --- */
/*
 * Bootstrap's responsive stylesheet sets `.item { margin: 0 !important }`.
 * Carousel items no longer carry the "item" class, so this override is
 * neutralised at the source.  The rule below reinforces the intended 5px
 * margin with !important as a belt-and-suspenders guard: without it the
 * first off-screen item's border sits at the outer wrapper's right edge and
 * leaks a 1px white line into the section background below the cards.
 */
#portfolio .recent-project {
    margin: 5px !important;
}

/* Bring portfolio section into formula range; overrides .content-section { padding: 100px 0 } in style.css */
#portfolio {
    padding-block: clamp(3rem, 6vw, 6rem);
}

/* Dark-background eyebrow variant for the portfolio section */
.section-eyebrow--dark-bg {
    color: var(--eyebrow-blue-dark-bg);
}

/* Program-name headings: black → navy */
#portfolio .recent-project-content h3 {
    color: #154878;
}

/* Arrow overlay: vertically centered, positioned outside the card row */
.portfolio-carousel-wrap {
    position: relative;
}

.portfolio-carousel-wrap .project-navigation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    pointer-events: none;
}

.portfolio-carousel-wrap .project-navigation .btn-prev,
.portfolio-carousel-wrap .project-navigation .btn-next {
    pointer-events: auto;
    display: block !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.portfolio-carousel-wrap .project-navigation .btn-prev {
    left: -52px;
}

.portfolio-carousel-wrap .project-navigation .btn-next {
    right: -52px;
}

/* White headline over the dark portfolio background */
#portfolio .project-container h2 {
    color: #fff;
}

/* Hide arrows on touch devices — swipe is the natural interaction there */
@media (pointer: coarse) {
    .portfolio-carousel-wrap .project-navigation {
        display: none;
    }
}

/*
 * At ≤767px Bootstrap's container goes full-width, leaving no room for the
 * -52px-offset arrows; hide them to prevent viewport clipping.
 *
 * Partial peek: padding-right on the carousel element narrows the width that
 * OWL measures ($elem.width()), so items are sized to fit the reduced content
 * area.  overflow: visible on the inner wrapper lets the next card's edge spill
 * into that padding zone; overflow: hidden on the outer wrap clips it cleanly.
 * This gives touch users a visual "there is more" cue without any interactive
 * control, since OWL's dot pagination and swipe are already active.
 */
@media (max-width: 767px) {
    .portfolio-carousel-wrap .project-navigation {
        display: none;
    }
    .portfolio-carousel-wrap {
        overflow: hidden;
    }
    .recent-project-carousel {
        padding-right: 40px;
    }
    .portfolio-carousel-wrap .owl-wrapper-outer {
        overflow: visible !important;
    }
}

/* --- Slim bar and header restructuring --- */

/*
 * De-stick the existing nav on homepage; white background contrasts with the slim bar above.
 * Height reduced (from style.css's 67px) to reclaim space vacated by the removed logo.
 */
.header .header-top {
    position: relative;
    background-color: #fff !important;
    height: 52px;
}

/*
 * Center the nav links now that the logo is absent.
 * Flexbox on the .container turns navbar-header and navbar-collapse into flex
 * children, removing the float-based layout that offsets the nav to one side.
 * The header is empty on homepage (logo removed), so the nav fills the container
 * and justify-content:center positions it centrally.
 * float:none!important on .navbar-nav defeats Bootstrap 3's float:left at ≥768px.
 */
.header .header-top .container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.header .header-top .navbar-header {
    display: none;
}
.header .header-top .navbar-nav {
    float: none !important;
    margin: 0 !important;
}

/*
 * Slightly larger nav link font now that the bar has room to breathe.
 * !important is required to beat theme-responsive.css's font-size:13px!important
 * and font-size:14px rules at both its active breakpoints.
 */
.header .header-top .nav > li > a {
    font-size: 15px !important;
    padding: 4px 14px !important;
}

/*
 * At ≤991px Bootstrap's container drops to 750px — not wide enough for 7 links
 * at 15px/14px-padding. Fall back to compact spacing through the whole 768–991px
 * tier (same font as theme-responsive.css but slightly more padding than its 1px).
 */
@media (max-width: 991px) {
    .header .header-top .nav > li > a {
        font-size: 13px !important;
        padding: 4px 5px !important;
    }
}

.navbar {
    background-color: #fff !important;
}

/* Nav link colors for the white navbar */
.navbar-default .navbar-nav > li > a {
    color: #154878;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #ff812f;
    background-color: transparent;
}

/* Hamburger toggle: re-skin for white navbar background */
.navbar-default .navbar-toggle {
    border-color: #154878;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #154878;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: rgba(21, 72, 120, 0.1);
}

/*
 * Vertically center the SVG logo in the navbar. Bootstrap's .navbar-brand has
 * height:50px and no vertical padding. Overriding to height:auto + symmetric
 * padding fills the 67px .header-top evenly (10px + 47px logo + 10px = 67px).
 */
.header-top .navbar-brand {
    height: auto;
    padding: 10px 15px;
}

/*
 * theme-responsive.css has `.navbar-brand img { width:160px; height:69px }` at
 * max-width:1180px (specificity 0,1,1) which beats a bare class selector.
 * Using `.navbar-brand .homepage-nav-logo` (0,2,0) wins on height/width.
 * The same block also has `img { max-width:100% !important }` which needs
 * a matching !important to neutralise.
 */
.navbar-brand .homepage-nav-logo {
    display: block;
    height: 47px;
    width: auto;
    max-width: none !important;
}

/* Remove compensating padding-top — the slim bar is the fixed element on homepage, not the navbar */
#intro-carousel {
    padding-top: 0;
}

/* Push the header stack below the fixed slim bar */
.header {
    margin-top: 56px;
}

/* Slim bar — fixed, brand-blue, always visible on homepage */
.slim-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    height: 56px;
    background-color: #154878;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.slim-bar-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 20px;
}

/* padding-right gives breathing room between the logo edge and the phone CTA */
.slim-bar-logo {
    flex-shrink: 0;
    line-height: 0;
    padding-right: 8px;
}

.slim-bar-logo img {
    display: block;
    height: 38px;
    width: auto;
}

.slim-bar-phone {
    flex: 1;
    text-align: center;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.slim-bar-phone:hover,
.slim-bar-phone:focus {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.slim-bar-phone .fa {
    margin-right: 5px;
}

.slim-bar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding-left: 8px;
}

/* Donate button override for slim bar — restore block sizing that .donate-btn's height:33px disrupts */
.slim-bar-donate {
    display: inline-block;
    height: auto;
    line-height: 40px;
    padding: 0 18px;
    border-radius: 3px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

.slim-bar-donate:hover,
.slim-bar-donate:focus {
    background: #0d2f50;
    color: #fff;
    text-decoration: none;
}

/* Hamburger button in the slim bar — hidden at desktop, shown at narrow viewports */
.slim-bar-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    padding: 6px 8px;
    cursor: pointer;
}

.slim-bar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #fff;
}

.slim-bar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}

/* Responsive slim bar sizing */
@media (max-width: 1180px) {
    .slim-bar { height: 52px; }
    .slim-bar-logo img { height: 36px; }
    .slim-bar-donate { line-height: 38px; }
    .header { margin-top: 52px; }
}

@media (max-width: 980px) {
    .slim-bar { height: 50px; }
    .slim-bar-logo img { height: 34px; }
    .slim-bar-donate { line-height: 36px; }
    .header { margin-top: 50px; }
}

/* Nudge logo down slightly at tablet widths so its text center aligns with the nav links */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-brand .homepage-nav-logo {
        transform: translateY(5px);
    }
}

@media (max-width: 767px) {
    .slim-bar { height: 46px; }
    .slim-bar-logo img { height: 26px; }
    .slim-bar-donate { line-height: 34px; padding: 0 12px; font-size: 15px; }
    .slim-bar-phone { font-size: 16px; }

    /* Show hamburger in the slim bar; the white navbar is hidden below */
    .slim-bar-toggle { display: inline-block; }

    /*
     * Collapse the white navbar to zero height. overflow:hidden clips the
     * navbar visually, but position:fixed descendants (the collapse panel
     * when open) escape overflow clipping per CSS spec and remain visible.
     */
    .header {
        height: 0;
        min-height: 0;
        overflow: hidden;
        margin-top: 0;
    }

    /* Compensate: hero now sits directly below the fixed slim bar.
     * theme-responsive.css sets .carousel{padding:0!important} at this breakpoint;
     * !important + higher ID specificity (1,0,0) vs class (0,1,0) lets us win. */
    #intro-carousel { padding-top: 46px !important; }

    /* Shorten phone CTA: drop "Call Us" label, keep icon + number */
    .slim-bar-phone-label { display: none; }

    /*
     * Reposition the Bootstrap collapse panel to drop from the slim bar.
     * ID selector beats Bootstrap's class selector, so no !important needed.
     */
    #bs-example-navbar-collapse-1.in,
    #bs-example-navbar-collapse-1.collapsing {
        position: fixed;
        top: 46px;
        left: 0;
        right: 0;
        z-index: 10000;
        background-color: #154878;
        max-height: calc(100vh - 46px);
        overflow-y: auto;
    }

    /* Nav links in the repositioned panel: white on dark background */
    #bs-example-navbar-collapse-1.in .navbar-nav > li > a,
    #bs-example-navbar-collapse-1.collapsing .navbar-nav > li > a {
        color: #fff;
    }

    #bs-example-navbar-collapse-1.in .navbar-nav > li > a:hover,
    #bs-example-navbar-collapse-1.collapsing .navbar-nav > li > a:hover {
        color: rgba(255, 255, 255, 0.8);
    }
}

/* Compact logo size reduction and reduced phone size at narrow widths */
@media (max-width: 600px) {
    .slim-bar-logo img { height: 22px; }
    .slim-bar-phone { font-size: 15px; }
}

/* Drop the phone number at 530px and below — icon only */
@media (max-width: 530px) {
    .slim-bar-phone-number { display: none; }
}

@media (max-width: 480px) {
    .slim-bar { height: 44px; }
    .slim-bar-logo img { height: 20px; }
    .slim-bar-donate { line-height: 34px; padding: 0 10px; font-size: 14px; }

    /* Adjust collapse panel top offset to match slim bar height */
    #intro-carousel { padding-top: 44px !important; }
    #bs-example-navbar-collapse-1.in,
    #bs-example-navbar-collapse-1.collapsing {
        top: 44px;
        max-height: calc(100vh - 44px);
    }
}

/* Scrollbar eats ~17px at narrow widths; reduce inner padding and logo to keep
 * the Donate button and hamburger clear of the edge. */
@media (max-width: 413px) {
    .slim-bar-inner { padding: 0 12px; }
    .slim-bar-logo img { height: 16px; }
}

@media (max-width: 360px) {
    .slim-bar-inner { padding: 0 8px; }
    .slim-bar-logo img { height: 14px; }
}

/* --- Sticky donate button --- */

/* Both variants hidden by default; each activates only at its own breakpoint. */
.sticky-donate-mobile { display: none; }
.sticky-donate-desktop { display: none; }

@media (max-width: 767px) {
    /* Three equal columns: [Call] [gap] [Donate Now] */
    .sticky-donate-mobile {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10002;
        height: 56px;
        background-color: #154878;
        padding: 0 16px;
        box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
    }

    .sticky-donate-call {
        grid-column: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        color: #fff;
        text-decoration: none;
        font-size: 16px;
        font-weight: 600;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 3px;
    }

    .sticky-donate-call:hover,
    .sticky-donate-call:focus {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
    }

    .sticky-donate-call .fa {
        margin-right: 5px;
    }

    .sticky-donate-btn {
        grid-column: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        line-height: normal;
        font-size: 16px;
        font-weight: bold;
        border-radius: 3px;
        text-decoration: none;
    }

    .sticky-donate-btn:hover,
    .sticky-donate-btn:focus {
        background: #0d2f50;
        color: #fff;
        text-decoration: none;
    }

    /* Push footer content clear of the fixed bar so the McAfee logo isn't obscured when scrolled to bottom */
    footer { padding-bottom: 56px; }
}

@media (max-width: 480px) {
    /*
     * At narrow widths the middle 1fr spacer column shrinks the Call and Donate Now
     * buttons to ~90px, leaving no room around the text. Fixed gap preserves the
     * left/right button layout while giving each button roughly half the bar width.
     */
    .sticky-donate-mobile { grid-template-columns: 1fr 16px 1fr; }
}

@media (min-width: 768px) {
    .sticky-donate-desktop {
        display: block;
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 10002;
    }

    .sticky-donate-badge {
        display: inline-block;
        height: auto;
        line-height: 44px;
        padding: 0 22px;
        border-radius: 24px;
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    }

    .sticky-donate-badge:hover,
    .sticky-donate-badge:focus {
        color: #fff;
        text-decoration: none;
    }
}

/* Invisible grid-fill spacers for the 7-item icon row (keeps all rows even-width) */
.donate-spacer {
    visibility: hidden;
}

/* Override style.css defaults so the donation-form bg image fills the section properly */
.donationform-hold {
    background-position: center;
    background-size: cover;
}