/*
Theme Name: Flatsome Child - The Generous Project
Theme URI: https://thegenerousproject.com.au
Description: Flatsome child theme for The Generous Project. Houses custom header/footer/marquee styles. Edit here via Appearance > Theme File Editor.
Author: The Generous Project
Author URI: https://thegenerousproject.com.au
Template: flatsome
Version: 1.0.13
Text Domain: flatsome-child
*/

/* ==========================================================================
   Hero — autoplay converge animation.
   3 inline-SVG shapes sit absolute inside `.section.hero`. JS (functions.php)
   sets per-shape CSS vars `--tgp-tri`, `--tgp-sqr`, `--tgp-cir` (each 0..1
   eased progress) on a time-driven RAF starting at page load. CSS transforms
   each shape from start scatter to final composite as those approach 1.
   prefers-reduced-motion: vars set to 1 immediately, no animation.
   ========================================================================== */
.section.hero {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    padding-top: 230px !important;
}
.section.hero,
.section.hero > .section-bg,
.section.hero > .section-bg.bg-fill {
    background-color: rgb(247, 240, 230) !important;
    background-image: none !important;
}

.tgp-hero-shapes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.section.hero > .section-content,
.section.hero .row {
    position: relative;
    z-index: 2;
}

/* Shape sizing. `--tgp-shape-w` drives square + circle width; triangle width
   = `--tgp-shape-w` * 1.19 (its viewBox aspect ratio) so triangle's RENDERED
   HEIGHT matches square/circle at every viewport. Without this multiplier
   triangle would look shorter than square at the same width.
   Final positions: bottom-right composite, back-to-front (triangle, square,
   circle). Translate decays to 0 at progress=1. Triangle keeps scaleY(-1) flip. */
.tgp-hero-shape {
    --tgp-shape-w: clamp(140px, 16vw, 240px);
    position: absolute;
    display: block;
    width: var(--tgp-shape-w);
    height: auto;
    will-change: transform;
}
.tgp-hero-triangle {
    width: calc(var(--tgp-shape-w) * 1.19);
    bottom: 4vh;
    right: 22vw;
    /* start: top-LEFT zone — mirror of previous mid-right start */
    transform: translate(
        calc((1 - var(--tgp-tri, 0)) * -55vw),
        calc((1 - var(--tgp-tri, 0)) * -40vh)
    ) scaleY(-1);
}
.tgp-hero-square {
    bottom: 4vh;
    right: 11vw;
    /* start: top-RIGHT zone — mirror of previous mid-left top */
    transform: translate(
        calc((1 - var(--tgp-sqr, 0)) * 8vw),
        calc((1 - var(--tgp-sqr, 0)) * -60vh)
    );
}
.tgp-hero-circle {
    bottom: 4vh;
    right: 0;
    /* start: bottom-FAR-LEFT — circle slides horizontally rightward */
    transform: translate(
        calc((1 - var(--tgp-cir, 0)) * -20vw),
        0
    );
}

/* Pull marquee up so it overlaps hero's bottom edge — final composite tucks
   slightly behind the scrolling banner as pin releases. Scoped to home-v2. */
body.page-id-316 .tgp-marquee {
    position: relative;
    z-index: 2;
    margin-top: -8vh;
}

@media (max-width: 849px) {
    .section.hero { padding-top: 120px !important; }
    .tgp-hero-shape { --tgp-shape-w: clamp(70px, 18vw, 160px); }
}

/* prefers-reduced-motion: JS sets vars to 1 → shapes render at final composite. */

/* ==========================================================================
   Image rounding helper.
   Apply via UX Builder: Image > Advanced > Class Name = "tgp-rounded"
   ========================================================================== */
.tgp-rounded img,
img.tgp-rounded {
    border-radius: 18px;
    overflow: hidden;
}

/* "How We Help" custom check icon — flex row so wrapped text aligns under text, not under icon. */
p:has(> img.tgp-check) {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0.75em;
}
.tgp-check {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 0.35em;
    margin-right: 0;
}

/* ==========================================================================
   Header — nav links visible (override Flatsome transparent nav alpha=0)
   ========================================================================== */
.header-nav-main.nav > li > a {
    color: #284d6d !important;
}
.header-nav-main.nav > li > a:hover,
.header-nav-main.nav > li.active > a,
.header-nav-main.nav > li.current-menu-item > a,
.header-nav-main.nav > li.current_page_item > a {
    color: #7c1923 !important;
}

/* Glassy header always — paints `.header-bg-color` (Flatsome's actual bg layer). */
.header .header-bg-color,
.header-main .header-bg-color,
.has-transparent .header-bg-color {
    background-color: rgba(247, 240, 230, 0.72) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
}
.header-main {
    box-shadow: 0 2px 18px rgba(40, 77, 109, 0.08);
    border-bottom: 1px solid rgba(40, 77, 109, 0.08);
}

/* Transparent header height (140 desktop). */
.transparent .header-main { height: 140px !important; }
.transparent #logo img { max-height: 140px !important; }
.has-transparent + .page-title:first-of-type,
.has-transparent + #main > .page-title,
.has-transparent + #main > div > .page-title,
.has-transparent + #main .page-header-wrapper:first-of-type .page-title { padding-top: 140px !important; }

/* Smooth transitions for sticky-shrink: animate height + logo size + bg fade. */
.header-main {
    transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1), background 400ms ease, box-shadow 400ms ease;
}
#logo,
#logo a,
#logo img {
    transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1),
                height 400ms cubic-bezier(0.4, 0, 0.2, 1),
                width 400ms cubic-bezier(0.4, 0, 0.2, 1),
                padding 400ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-height, transform;
}

/* Stuck-state glass (same color, kept for transition smoothness). */
.stuck .header-bg-color,
.header.show-on-scroll .header-bg-color {
    background-color: rgba(247, 240, 230, 0.72) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
}
.stuck .header-main,
.header.show-on-scroll .header-main {
    transition: background 300ms ease, box-shadow 300ms ease, height 300ms ease;
}
.stuck .header-nav-main.nav > li > a {
    color: #284d6d !important;
}

/* Mobile hamburger icon visible on transparent + glassy headers. */
#masthead .mobile-nav > li > a > i,
#masthead .mobile-nav > li > a:hover > i,
#header.stuck #masthead .mobile-nav > li > a > i { color: #284d6d !important; }

/* Split-menu layout: balance flex sides around centered logo. */
.header-main.show-logo-center .flex-col.hide-for-medium:first-child,
.header-main.show-logo-center .flex-col.flex-left {
    flex: 1 1 0;
}
.header-main.show-logo-center .flex-col.flex-right,
.header-main.show-logo-center .flex-col.hide-for-medium:last-child {
    flex: 1 1 0;
}
.show-logo-center .header-nav-main.nav-left {
    justify-content: flex-end;
}
.show-logo-center .header-nav-main.nav-right {
    justify-content: flex-start;
    display: flex;
}

@media (max-width: 849px) {
    .header .header-bg-color,
    .stuck .header-bg-color {
        background-color: rgba(247, 240, 230, 0.85) !important;
    }
    .transparent .header-main { height: 90px !important; }
    .transparent #logo img { max-height: 90px !important; }
    .has-transparent + .page-title:first-of-type,
    .has-transparent + #main > .page-title,
    .has-transparent + #main > div > .page-title,
    .has-transparent + #main .page-header-wrapper:first-of-type .page-title { padding-top: 90px !important; }
}
@media (max-width: 549px) {
    .transparent .header-main { height: 70px !important; }
    .transparent #logo img { max-height: 70px !important; }
    .has-transparent + .page-title:first-of-type,
    .has-transparent + #main > .page-title,
    .has-transparent + #main > div > .page-title,
    .has-transparent + #main .page-header-wrapper:first-of-type .page-title { padding-top: 70px !important; }
}

/* ==========================================================================
   Scrolling marquee banner
   ========================================================================== */
.tgp-marquee .section-content { overflow: hidden; }
.tgp-marquee .tgp-marquee-viewport {
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.tgp-marquee .tgp-marquee-track {
    display: inline-flex;
    white-space: nowrap;
    animation: tgp-marquee-scroll 30s linear infinite;
    will-change: transform;
}
.tgp-marquee .tgp-marquee-track > span {
    display: inline-block;
    padding-right: 3em;
    color: #ffffff;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
}
@media (max-width: 549px) {
    .tgp-marquee .tgp-marquee-track > span {
        font-size: 0.85em;
        padding-right: 2em;
        letter-spacing: 0.1em;
    }
}
@keyframes tgp-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .tgp-marquee .tgp-marquee-track { animation: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-wrapper,
.footer-widgets.footer-1 { background: #284d6d !important; }
.footer-widgets.footer-1 { padding: 0 !important; margin: 0 !important; }
.footer-widgets.footer-1 > .row {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.footer-widgets.footer-1 > .row > .col { padding: 0 !important; }
.footer-widgets.footer-1 .widget_text,
.footer-widgets.footer-1 .textwidget { padding: 0 !important; margin: 0 !important; }
.tgp-footer { margin: 0 !important; }
.tgp-footer .section-content { padding: 0 30px; }
.tgp-footer .section-content > .row {
    max-width: 1310px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.tgp-footer .row.row-full-width { max-width: 1310px !important; }
.tgp-footer h4 { font-weight: 600; margin-bottom: 18px; color: #ffffff; }
.tgp-footer p a:hover { color: #7c1923 !important; }
.tgp-footer .ux-image,
.tgp-footer .ux_image,
.tgp-footer img { max-width: 220px; height: auto; }
@media (max-width: 849px) {
    .tgp-footer div.text h4,
    .tgp-footer div.text p,
    .tgp-footer .tgp-footer-quicklinks h4,
    .tgp-footer .tgp-footer-quicklinks p { text-align: left !important; }
}
@media (max-width: 549px) {
    .tgp-footer .ux-image,
    .tgp-footer .ux_image,
    .tgp-footer img { max-width: 180px; }
}

/* Absolute footer (bottom bar) */
.absolute-footer { background-color: #284d6d !important; color: #ffffff !important; padding: 20px 0 !important; }
.absolute-footer .container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 1310px;
}
.absolute-footer .footer-secondary,
.absolute-footer .footer-primary { float: none !important; }
.absolute-footer a { color: #ffffff !important; }
.absolute-footer a:hover { color: #7c1923 !important; }
.absolute-footer .tgp-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    margin-left: 8px;
    transition: background 200ms ease, border-color 200ms ease;
}
.absolute-footer .tgp-social:hover {
    background: #ffffff;
    border-color: #ffffff;
}
.absolute-footer .tgp-social:hover i { color: #284d6d !important; }
.absolute-footer .tgp-social i { font-size: 14px; line-height: 1; color: #ffffff; }
@media (max-width: 549px) {
    .absolute-footer .container { flex-direction: column; text-align: center; }
}