/* altoro-overrides.css
   Design-system overrides for torotaxesfranchise.com.
   Load order: LAST <link> in application/views/layout/header.php so tokens win.
   Namespacing: components use .altoro-*. Legacy selector overrides are scoped
   per-page via the body class (e.g. body.home-page) unless F1 explicitly
   requires a site-wide change. See 00-torotaxesfranchise-styling-docs.md.
*/

:root {
    /* Brand color */
    --altoro-red: rgb(255, 0, 9);
    --altoro-red-hover: rgb(220, 0, 8);
    --altoro-black: #000;
    --altoro-white: #fff;

    /* Typography */
    --altoro-font-display: 'Muli', 'Montserrat', sans-serif;

    /* Radii */
    --altoro-radius-pill: 999px;      /* full round, buttons */
    --altoro-radius-tag: 5px;         /* SMART INVESTMENT-style labels */
    --altoro-radius-card: 18px;       /* matches existing home section radii */

    /* Spacing scale — rem-based, replaces ad-hoc vw values in legacy CSS */
    --altoro-space-1: 0.25rem;
    --altoro-space-2: 0.5rem;
    --altoro-space-3: 0.75rem;
    --altoro-space-4: 1rem;
    --altoro-space-5: 1.5rem;
    --altoro-space-6: 2rem;
    --altoro-space-7: 3rem;
    --altoro-space-8: 4rem;

    /* Button spec — canonical from canva 01-Website Redesign/4.png
       "Start Your Process Now" pill. Site-wide single source of truth. */
    --altoro-btn-pad-y: 10px;
    --altoro-btn-pad-x: 22px;
    --altoro-btn-font-size: 13px;
    --altoro-btn-font-weight: 700;
    --altoro-btn-letter-spacing: 0.5px;
    --altoro-btn-line-height: 1.2;

    /* Container — hybrid freeze. Content wrappers cap here and center above
       1920 (2K/4K get side whitespace). No proportional scaling above FHD. */
    --altoro-container-max: 1600px;
    --altoro-container-pad-x: 1.5rem;
}

/* Breakpoint ladder — anchored to the Responsively device picks:
     ≤360   Galaxy S base
     ≤390   iPhone 12 Pro / mobile large
     ≤768   iPad / tablet
     ≤1366  small desktop / laptop
     1367+  desktop / laptop-L / Full HD / 2K+ (centered via --altoro-container-max)
   Do NOT introduce new breakpoints outside this set; reuse these values.
*/

/* ---------- Components ---------- */

/* .altoro-btn-pill — canonical CTA pill.
   canva 01-Website Redesign/4.png — Start Your Process Now */
.altoro-btn-pill {
    display: inline-block;
    padding: var(--altoro-btn-pad-y) var(--altoro-btn-pad-x);
    font-family: var(--altoro-font-display);
    font-size: var(--altoro-btn-font-size);
    font-weight: var(--altoro-btn-font-weight);
    letter-spacing: var(--altoro-btn-letter-spacing);
    line-height: var(--altoro-btn-line-height);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: var(--altoro-white);
    background: var(--altoro-red);
    border: 0;
    border-radius: var(--altoro-radius-pill);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}
.altoro-btn-pill:hover,
.altoro-btn-pill:focus {
    color: var(--altoro-white);
    background: var(--altoro-red-hover);
    text-decoration: none;
    outline: none;
}

/* .altoro-banner-halfpill — right-flush half-pill red banner.
   canva 01-Website Redesign/2.png — GET INSPIRED BY OUR STORIES / OUR TEAM / WE DO MORE THAN JUST TAXES */
.altoro-banner-halfpill {
    display: inline-block;
    padding: var(--altoro-space-3) var(--altoro-space-6);
    font-family: var(--altoro-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--altoro-white);
    background: var(--altoro-red);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--altoro-radius-pill);
    border-bottom-right-radius: var(--altoro-radius-pill);
    margin-left: 0;
}

/* .altoro-tag — small uppercase label, reads as a label not a button.
   canva 01-Website Redesign/5.png — SMART INVESTMENT / COMPETITIVE RETURN / ONGOING SUPPORT / AFFORDABLE INVESTMENT */
.altoro-tag {
    display: inline-block;
    padding: var(--altoro-space-1) var(--altoro-space-3);
    font-family: var(--altoro-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--altoro-white);
    background: var(--altoro-red);
    border-radius: var(--altoro-radius-tag);
}

/* .altoro-container — centered max-width wrapper for F6 / F8 (added now so
   future F points can opt in without another CSS edit). */
.altoro-container {
    max-width: var(--altoro-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--altoro-container-pad-x);
    padding-right: var(--altoro-container-pad-x);
    box-sizing: border-box;
}

/* ---------- Legacy selector overrides (site-wide, F1) ---------- */

/* Top nav CTA — site-wide unify (F1).
   The long first selector matches the legacy @media (max-width: 1530px) and
   (min-width: 1001px) rule at specificity (0,4,4); prefixing `body` lifts us
   to (0,4,5) so we win regardless of source order. !important beats the
   mobile @media block and the .header-area descendant rule in head.php.
   border-radius is intentionally NOT touched — the inline
   style="border-radius: 23px !important" cannot be beaten by external CSS,
   and at the canonical button height (~36px) a 23px radius already renders
   as a full pill visually. See 00-torotaxesfranchise-updates.md §6.3.
   canva 01-Website Redesign/1.png */
body .header-area .top-nav ul.desktop-nav li.become-an-owner > a.topRedNavButton,
body li.become-an-owner > a.topRedNavButton {
    display: inline-block !important;
    width: auto !important;
    padding: var(--altoro-btn-pad-y) var(--altoro-btn-pad-x) !important;
    margin: 0 !important;
    font-family: var(--altoro-font-display) !important;
    font-size: var(--altoro-btn-font-size) !important;
    font-weight: var(--altoro-btn-font-weight) !important;
    letter-spacing: var(--altoro-btn-letter-spacing) !important;
    line-height: var(--altoro-btn-line-height) !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-align: center !important;
    color: var(--altoro-white) !important;
    background: var(--altoro-red) !important;
    border: 0 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    outline: none !important;
    vertical-align: middle !important;
}
body .header-area .top-nav ul.desktop-nav li.become-an-owner > a.topRedNavButton:hover,
body .header-area .top-nav ul.desktop-nav li.become-an-owner > a.topRedNavButton:focus,
body li.become-an-owner > a.topRedNavButton:hover,
body li.become-an-owner > a.topRedNavButton:focus {
    background: var(--altoro-red-hover) !important;
    color: var(--altoro-white) !important;
    text-decoration: none !important;
    margin-top: 0 !important;
    font-family: var(--altoro-font-display) !important;
    font-weight: var(--altoro-btn-font-weight) !important;
}

/* Neutralize the <li.become-an-owner> wrapper: transparent box, no negative
   margin pulling the button up. Inline style="margin-bottom: -1.5vw" is
   normal-priority, so our !important wins on cascade-layer regardless of the
   inline's higher specificity. border-radius: 23px inline is left alone
   (harmless on a transparent background). */
body li.become-an-owner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    flex: none !important; /* prevent flex-grow expanding the li past button width */
}

/* Language toggle ENG/ESP — Bootstrap .btn-danger (active) / .btn-dark (inactive).
   Scoped to .rounded-btn-group and .btn-group so unrelated .btn-danger usages
   (e.g. the modal close button in components/form_ready_modal.php) stay as-is.
   canva 01-Website Redesign/1.png (top-right toggle) */
body .rounded-btn-group .btn,
body .btn-group .btn.btn-danger,
body .btn-group .btn.btn-dark {
    border-radius: var(--altoro-radius-pill) !important;
    font-family: var(--altoro-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}
body .btn.btn-danger {
    background: var(--altoro-red) !important;
    border-color: var(--altoro-red) !important;
    color: var(--altoro-white) !important;
}
body .btn.btn-danger:hover,
body .btn.btn-danger:focus {
    background: var(--altoro-red-hover) !important;
    border-color: var(--altoro-red-hover) !important;
    color: var(--altoro-white) !important;
}

/* ---------- Home page scoped (body.home-page) ---------- */

/* F2 early: hero button 3→2 lines — auto width + nowrap lets the <br /> in the lang string control the split. canva 01/1.png */
body.home-page #homeBannerButton {
    width: auto;
    white-space: nowrap;
    padding: 8px 24px;
    border-radius:32px;
    line-height: 0.95;
}

/* F1c3: homeUnderBanner top spacing on mobile (≤768px). */
@media (max-width: 768px) {
    body.home-page #homeUnderBanner {
        padding-top: 30px !important;
    }
    body.home-page .oddRedMessageLeft.altoro-banner-halfpill h1 {
        padding: 0 0 0 0rem !important;
    }
}

/* F1c3: halfpill banners — desktop only (≥769px); mobile keeps legacy layout. canva 01/2.png */
@media (min-width: 769px) {
    body.home-page .oddRedMessageLeft.altoro-banner-halfpill {
        position: relative !important;
        left: -1em !important;
        height: auto !important;
        padding: 1.2rem 3rem 1.2rem 3rem !important;
    }
    body.home-page .oddRedMessageLeft.altoro-banner-halfpill h1 {
        font-size: 3rem !important;
        margin: 0 !important;
        padding: 0 0 0 3rem !important;
        color: var(--altoro-white) !important;
        text-align: left !important;
    }
}
/* F1c3: halfpill banners — extra left padding at ≥1367px; -4em offset leaves text too close to edge at FHD+. */
@media (min-width: 1367px) {
    body.home-page .oddRedMessageLeft.altoro-banner-halfpill {
        padding-left: var(--altoro-space-7) !important;
    }
}

/* F1c3: Start Your Process Now — clear inline float/width from source. canva 01/4.png */
body.home-page #homeStartProcessBtn {
    float: none !important;
    width: auto !important;
    margin-right: 0 !important;
    font-size: 1.2rem !important;
    display: inline-block;
    padding: 12px 16px;

}

/* F6: constrain #tabAreaText so the "Why do entrepreneurs choose us?" body copy doesn't stretch edge-to-edge on FHD+. canva 01 WHY section. */
body.home-page #homeTheThirdTabSection #tabAreaText {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* F4: vertically center main story image against the adjacent heading+bio column (desktop only). */
@media (min-width: 992px) {
    body.home-page #homeSuccessArea > div > .row { align-items: center; }
}

/* F4: "GET INSPIRED BY OUR STORIES" wrapper — desktop -4rem, mobile -1rem. canva 01/2.png */
body.home-page .altoro-getinspired-wrap { margin-left: -1.3rem; }
@media (min-width: 769px) { body.home-page .altoro-getinspired-wrap { margin-left: -4rem; } }

/* F1c3: SMART INVESTMENT tags — !important needed vs .home_red_pills !important in body <style>. canva 01/5.png */
body.home-page .altoro-tag {
    border-radius: var(--altoro-radius-tag) !important;
    padding: var(--altoro-space-1) var(--altoro-space-3) !important;
    font-size: 11px !important;
    width: auto !important;
}