/* ============================================================
   STADA front-end page overrides — scoped to body.stada-fp.
   Loaded via @push('header') on the homepage ONLY.
   main.css (3.3.1 compiled SCSS) provides the base design.
   This file provides scoped colour + layout overrides.
   ============================================================ */

/* Poppins — locally hosted */
@font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ── Poppins via --global-font variable (set in headerDbSettings) ── */
body.stada-fp {
    font-family: var(--global-font, 'Poppins', sans-serif);
}

/* ── Navbar: full flex single-row layout ── */
body.stada-fp .navbar {
    background-image: none !important;
    background-color: white !important;
    border: 0 !important;
    min-height: 80px;
    height: auto;
    /* box-shadow: 0 1px 6px rgba(0,0,0,0.06); */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 20px !important;
    position: relative;
    font-family: var(--global-font, 'Poppins', sans-serif) !important;
}

body.stada-fp .navbar .navbar-header {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    flex-shrink: 0;
    width: auto !important;
}

body.stada-fp .navbar .navbar-brand {
    display: flex !important;
    align-items: center !important;
    min-height: 80px;
    padding: 5px 15px 5px 0 !important;
    float: none !important;
}

body.stada-fp .navbar-brand img {
    max-height: 70px;
    width: auto;
    display: block;
}

/* Navbar collapse: take remaining space, push items to right */
body.stada-fp .navbar .navbar-collapse.navbar-ex1-collapse {
    display: flex !important;
    flex: 1 !important;
    justify-content: flex-end !important;
    align-items: center !important;
    float: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Nav list */
body.stada-fp .navbar .navbar-collapse .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}

/* Reset Bootstrap navbar-right float that breaks flex */
body.stada-fp .navbar .navbar-nav.navbar-right {
    float: none !important;
    margin-right: 0 !important;
}

/* Reset li float */
body.stada-fp .navbar-default .navbar-nav > li {
    float: none !important;
    display: flex !important;
    align-items: center !important;
}

/* Nav link base — matches reference whistle.css .btn values */
body.stada-fp .navbar-default .navbar-nav > li > a {
    font-family: var(--global-font, 'Poppins', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: .75rem 1.4rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #3e5bea !important;
}

/* Login icon inside nav link */
body.stada-fp .navbar-default .navbar-nav > li > a img {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

body.stada-fp .navbar-default .navbar-nav > li > a:hover,
body.stada-fp .navbar-default .navbar-nav > li > a:focus {
    background-color: transparent !important;
    color: #6e83f0 !important;
}

body.stada-fp .navbar-default .navbar-nav > li:hover {
    background-color: transparent !important;
}

body.stada-fp .navbar .navbar-toggle {
    display: none;
}

/* ── Show frontPageOnly elements on the frontend ── */
body.stada-fp li.frontPageOnly {
    display: flex !important;
    align-items: center !important;
}
body.stada-fp .frontPageOnly {
    display: block !important;
}
body.stada-fp div.frontPageOnly {
    display: flex !important;
    align-items: center !important;
}

/* ── Language dropdown — force visible on frontend ── */
/* Use body.stada-fp[data-route] to beat locale.css specificity (0,3,1) → (0,4,1) */
body.stada-fp[data-route] .dropDownLanguages,
body.stada-fp[data-route] .dropdown.dropDownLanguages,
body.stada-fp[data-route] .dropDownLanguages.frontPageOnly {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    top: auto !important;
    float: none !important;
    margin-right: 0 !important;
}
/* Dropdown menu anchors to the button, not the page */
body.stada-fp .dropDownLanguages .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
}
body.stada-fp .dropDownLanguages .btn,
body.stada-fp .dropDownLanguages button {
    font-family: var(--global-font, 'Poppins', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: .75rem 1.4rem !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    color: #3e5bea !important;
}
body.stada-fp .dropDownLanguages .btn:hover,
body.stada-fp .dropDownLanguages button:hover {
    color: #6e83f0 !important;
    background: none !important;
    text-decoration: none !important;
}
body.stada-fp .dropDownLanguages .dropdown-menu {
    min-width: 160px;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
body.stada-fp .dropDownLanguages .dropdown-menu a {
    font-size: 13px;
    padding: 8px 16px;
}

/* ── Documents dropdown styling ── */
body.stada-fp .dropDownDocuments,
body.stada-fp .dropDownDocuments.dropdown {
    display: flex !important;
    align-items: center !important;
}

body.stada-fp .dropDownDocuments .btn-link,
body.stada-fp .dropDownDocuments button.btn-link {
    font-family: var(--global-font, 'Poppins', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: .75rem 1.4rem !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    color: #3e5bea !important;
}

body.stada-fp .dropDownDocuments .btn-link:hover,
body.stada-fp .dropDownDocuments button.btn-link:hover {
    text-decoration: none !important;
    background: none !important;
}

body.stada-fp .dropDownDocuments .dropdown-menu {
    min-width: 220px;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

body.stada-fp .dropDownDocuments .dropdown-menu a {
    font-size: 13px;
    padding: 8px 16px;
    white-space: nowrap;
}

/* ── Language dropdown styling ── */
body.stada-fp .dropDownLanguages button.btn-link {
    font-family: var(--global-font, 'Poppins', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    padding: .75rem 1.4rem !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    color: #3e5bea !important;
}

/* ── Container layout for frontend ── */
body.stada-fp .main-container {
    display: flex;
    flex-direction: column;
}

body.stada-fp .container.main-container {
    width: 90%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

body.stada-fp .stada-front-title-row {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

body.stada-fp .stada-front-title-row h4 {
    margin-top: 0;
    margin-bottom: 0;
}

body.stada-fp .stada-front-title-row .welcome-divider {
    margin-top: 1.2rem;
}

/* ── Feature SVG — render at full opacity ── */
body.stada-fp .feature svg g {
    opacity: 1 !important;
}

body.stada-fp .feature svg {
    min-width: 50px;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

/* ── Two-report left column ── */
body.stada-fp .stada-left-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 2.5rem 0 0;
}

body.stada-fp .stada-left-col .file-report-first {
    height: auto;
    width: 100%;
    flex: 1;
    min-height: 160px;
}

/* ── Feature body text ── */
body.stada-fp .feature-body {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
body.stada-fp .feature-body p {
    text-align: left !important;
}
body.stada-fp .feature-body-header {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* ── Extra info spacing ── */
body.stada-fp .extra-info {
    margin-bottom: 4rem;
}

/* ── Trusty primary button (REPORT / MAKE A REPORT) ── */
body.stada-fp .btn.trusty-button-primary,
body.stada-fp a.btn.trusty-button-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 100px !important;
    border: none !important;
    min-height: 52px !important;
    min-width: 180px !important;
    padding: 10px 2rem !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

body.stada-fp .btn.trusty-button-primary:hover,
body.stada-fp a.btn.trusty-button-primary:hover,
body.stada-fp .btn.trusty-button-primary:focus,
body.stada-fp a.btn.trusty-button-primary:focus {
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(62,91,234,0.30) !important;
    text-decoration: none !important;
}

body.stada-fp .btn.trusty-button-primary.disabled,
body.stada-fp .btn.trusty-button-primary[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ── Trusty secondary button (HOW IT WORKS / YOUR INBOX) ── */
body.stada-fp .btn.trusty-button-secondary,
body.stada-fp a.btn.trusty-button-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 100px !important;
    border: none !important;
    min-height: 52px !important;
    min-width: 180px !important;
    padding: 10px 2rem !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: background-color 0.18s ease;
}

body.stada-fp .btn.trusty-button-secondary:hover,
body.stada-fp a.btn.trusty-button-secondary:hover,
body.stada-fp .btn.trusty-button-secondary:focus,
body.stada-fp a.btn.trusty-button-secondary:focus {
    color: #ffffff !important;
    text-decoration: none !important;
}

body.stada-fp .side-feature + .side-feature {
    margin-top: 2.5rem;
}