/* =========================================================
   Amerieagle Ventures — Site-wide responsive polish
   ---------------------------------------------------------
   Additive rules that improve mobile/tablet rendering without
   overriding desktop layouts. Loaded after style.css on every
   page so it has predictable specificity.
   ========================================================= */

/* ---- Universal ---- */

img {
    max-width: 100%;
    height: auto;
}

/* Avoid overflow from long unbreakable strings (URLs, IDs, etc.) */
p, li, .ae-card__text, .iv-card__text, .pg-card__text,
.ae-card__title, .iv-card__title, .pg-card__title,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Ensure section anchors land below the fixed 76 px header */
section[id], div[id] {
    scroll-margin-top: 88px;
}


/* ---- Mobile (< 576 px) ---- */

@media (max-width: 575.98px) {

    /* Slightly tighter container gutters so content gets more room */
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Buttons in hero CTA rows: stack + stretch so taps are easy */
    .pg-hero__actions,
    .iv-hero__actions,
    .c-hero__actions,
    .ae-hero__actions,
    .ae-gr__actions,
    .iv-cta__split {
        flex-direction: column;
        align-items: stretch;
    }
    .pg-hero__actions > a,
    .iv-hero__actions > a,
    .c-hero__actions > a,
    .ae-hero__actions > a,
    .ae-gr__actions > a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Footer columns: more vertical breathing room when stacked */
    .ae-footer .row > [class*="col-"] + [class*="col-"] {
        margin-top: 28px;
    }
    .ae-footer__heading {
        margin-bottom: 18px;
    }

    /* Footer bottom row: stack copyright + disclaimer */
    .ae-footer__bottom .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 14px !important;
    }
    .ae-footer__disclaimer {
        font-size: 11.5px;
        line-height: 1.55;
    }

    /* Disclaimers stay readable */
    .iv-roles__note,
    .pg-cta__form-disc,
    .iv-cta__form-disc {
        font-size: 12px;
        line-height: 1.6;
    }

    /* Top-pad pages so the fixed header doesn't cover content */
    main > section:first-child {
        padding-top: 110px;
    }
    .ae-hero,
    .iv-hero,
    .pg-hero,
    .c-hero,
    .im-hero,
    .blog-hero,
    section[id="home"] {
        padding-top: 120px;
    }
}


/* ---- Tablet (576-991 px) ---- */

@media (min-width: 576px) and (max-width: 991.98px) {

    /* Slightly tighter section padding so we don't waste vertical space */
    .ae-section,
    section.sec,
    .pg-section {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    /* Hero copy gets a bit smaller so it fits comfortably */
    .ae-hero__title,
    .iv-hero__title,
    .pg-h1,
    .t-h1 {
        font-size: clamp(36px, 6vw, 52px);
    }
}


/* ---- SERVICE CLARITY block (immigration sub-pages) ----
   "What's included / What requires an attorney / What to prepare / Next step"
   shown in a 4-column grid below the team and above the contact form. */

.svc-clarity {
    padding: 90px 0;
    background: #f7f5f0;
}
.svc-clarity__intro {
    max-width: 720px;
    text-align: center;
    margin: 0 auto 48px;
}
.svc-clarity__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold, #B8975A);
    margin-bottom: 16px;
}
.svc-clarity__h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
    color: var(--navy, #0D1F3C);
    margin: 0 0 18px;
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.svc-clarity__lead {
    color: rgba(13, 31, 60, 0.65);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 auto;
}
.svc-clarity__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.svc-clarity__col {
    background: #fff;
    padding: 32px 26px;
    border: 1px solid rgba(13, 31, 60, 0.07);
    display: flex;
    flex-direction: column;
}
.svc-clarity__col--cta {
    background: var(--navy, #0D1F3C);
    color: #fff;
    border-color: rgba(184, 151, 90, 0.4);
}
.svc-clarity__icon {
    color: var(--gold, #B8975A);
    font-size: 22px;
    margin-bottom: 18px;
}
.svc-clarity__col--cta .svc-clarity__icon {
    color: var(--gold-light, #D4B483);
}
.svc-clarity__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--navy, #0D1F3C);
    margin: 0 0 16px;
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.svc-clarity__col--cta .svc-clarity__title {
    color: #fff;
}
.svc-clarity__list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}
.svc-clarity__list li {
    padding-left: 16px;
    position: relative;
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 8px;
    color: rgba(13, 31, 60, 0.7);
}
.svc-clarity__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 1px;
    background: var(--gold, #B8975A);
}
.svc-clarity__note {
    font-size: 12.5px;
    color: rgba(13, 31, 60, 0.55);
    font-style: italic;
    margin: 6px 0 0;
    line-height: 1.5;
}
.svc-clarity__cta-text {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13.5px;
    line-height: 1.65;
    margin: 0 0 20px;
}
.svc-clarity__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold, #B8975A);
    color: var(--navy, #0D1F3C);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 14px 22px;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: auto;
    align-self: flex-start;
}
.svc-clarity__btn:hover {
    background: var(--gold-light, #D4B483);
    transform: translateY(-1px);
}
.svc-clarity__disclaimer {
    margin: 40px auto 0;
    max-width: 900px;
    font-size: 12.5px;
    color: rgba(13, 31, 60, 0.55);
    line-height: 1.6;
    text-align: center;
    font-style: italic;
}

@media (max-width: 991.98px) {
    .svc-clarity__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575.98px) {
    .svc-clarity {
        padding: 60px 0;
    }
    .svc-clarity__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .svc-clarity__btn {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   Floating-button layout — 3 buttons, no cookie button
   ---------------------------------------------------------
   Bottom row  (bottom: 20px on desktop / 14px on mobile)
       LEFT  : .ae-lang-fab      (language — moved to cookie's spot)
       RIGHT : Chatbase bubble   (forced to same bottom)
   Top row     (bottom: 76px on desktop / 66px on mobile)
       RIGHT : .ae-whatsapp-fab  (WhatsApp, above Chatbase)
   The cookie-consent reopen button is hidden — analytics/marketing
   tracking is enabled by default, and the user can manage cookies
   from the privacy policy page if they need to. */

/* 0) Hide the cookie-consent reopen button entirely. */
.ae-cc-reopen { display: none !important; }

/* 1) Force Chatbase bubble to known coordinates and shrink it. */
#chatbase-bubble-button,
button#chatbase-bubble-button,
div#chatbase-bubble-button {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    transform: scale(0.6) !important;
    transform-origin: bottom right !important;
}
iframe[src*="chatbase.co"]:not([style*="height: 100%"]):not([style*="100vh"]):not([style*="height: 90"]):not([style*="height: 80vh"]),
iframe[id*="chatbase"]:not([style*="100%"]):not([style*="100vh"]),
iframe[name*="chatbase"]:not([style*="100%"]):not([style*="100vh"]) {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    transform: scale(0.6) !important;
    transform-origin: bottom right !important;
}

/* 2) Language switcher takes the cookie button's old spot at
      bottom: 20px on the left, lining up with Chatbase on the right.
      flex-direction: column ensures the visible main button (last
      DOM child) sits at the BOTTOM of the container, not the top. */
.ae-lang-fab {
    flex-direction: column !important;
    bottom: 20px !important;
}

/* 3) WhatsApp stays above Chatbase on the right side. */
.ae-whatsapp-fab { bottom: 76px !important; }

@media (max-width: 480px) {
    #chatbase-bubble-button,
    button#chatbase-bubble-button,
    div#chatbase-bubble-button,
    iframe[src*="chatbase.co"]:not([style*="height: 100%"]):not([style*="100vh"]),
    iframe[id*="chatbase"]:not([style*="100%"]):not([style*="100vh"]) {
        bottom: 14px !important;
        right: 14px !important;
        transform: scale(0.55) !important;
    }
    .ae-lang-fab     { bottom: 14px !important; }
    .ae-whatsapp-fab { bottom: 66px !important; }
}