/*
    HYA_LS7 brand theming.

    HYA_LS7 extends the Flatly Bootswatch skin (see config.xml's
    <cssframework> pointing at css/variations/flatly.min.css) but never
    created its own css/custom.css, even though config.xml already reserves
    that filename as a "replace" slot for exactly this purpose -- Flatly's
    own stock teal (#18BC9C) and grays were still showing through unmodified.
    This file fills that reserved slot with HYA's actual brand colors and a
    few structural tweaks (hero band, footer band, card shadows) to move the
    survey pages toward the look of hyasearch.com: teal accents, near-black
    section bands, white rounded cards, bold uppercase buttons.

    Approach: override Bootstrap 5's CSS custom properties first (cascades
    automatically through anything Flatly built on top of --bs-primary etc.),
    then reinforce with direct selectors for places Flatly/LimeSurvey hardcode
    a color instead of reading the variable, then layer on LimeSurvey's own
    structural classes/ids (navbar, survey list hero, footer) confirmed from
    the actual rendered page source.
*/

:root {
    --hya-green: #5EA1A1;
    --hya-green-dark: #4d8686; /* ~15% darker, for hover/active states */
    --hya-gray-medium: #606060;
    --hya-gray-dark: #202020;

    /* Bootstrap 5 variable overrides -- Flatly and LimeSurvey's own theme.css
       both build on these, so this alone covers most buttons/links/focus
       rings without needing to hunt down every hardcoded rule. */
    --bs-primary: var(--hya-green);
    --bs-primary-rgb: 94, 161, 161;
    --bs-link-color: var(--hya-green);
    --bs-link-color-rgb: 94, 161, 161;
    --bs-link-hover-color: var(--hya-green-dark);
    --bs-link-hover-color-rgb: 77, 134, 134;
    --bs-body-color: var(--hya-gray-medium);
    --bs-emphasis-color: var(--hya-gray-dark);
    --bs-secondary-color: var(--hya-gray-medium);
    --bs-border-color: #d8dcdc;
}

body {
    color: var(--hya-gray-medium);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--hya-gray-dark);
    font-weight: 700;
}

a {
    color: var(--hya-green);
}
a:hover, a:focus {
    color: var(--hya-green-dark);
}

/* Buttons: Flatly hardcodes its own --bs-btn-* values per variant rather
   than reading --bs-primary everywhere, so .btn-primary needs a direct
   override. Uppercase + letter-spacing echoes HYA's own site buttons
   ("CONTACT HYA", "FIND JOBS"). */
.btn-primary {
    --bs-btn-bg: var(--hya-green);
    --bs-btn-border-color: var(--hya-green);
    --bs-btn-hover-bg: var(--hya-green-dark);
    --bs-btn-hover-border-color: var(--hya-green-dark);
    --bs-btn-active-bg: var(--hya-green-dark);
    --bs-btn-active-border-color: var(--hya-green-dark);
    --bs-btn-disabled-bg: var(--hya-green);
    --bs-btn-disabled-border-color: var(--hya-green);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--hya-green);
    --bs-btn-border-color: var(--hya-green);
    --bs-btn-hover-bg: var(--hya-green);
    --bs-btn-hover-border-color: var(--hya-green);
    --bs-btn-active-bg: var(--hya-green-dark);
    --bs-btn-active-border-color: var(--hya-green-dark);
}

.bg-primary {
    background-color: var(--hya-green) !important;
}
.text-primary {
    color: var(--hya-green) !important;
}
.border-primary {
    border-color: var(--hya-green) !important;
}

/* Form controls: focus ring in HYA green instead of Flatly's default teal */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--hya-green);
    box-shadow: 0 0 0 0.25rem rgba(94, 161, 161, 0.25);
}
.form-check-input:checked {
    background-color: var(--hya-green);
    border-color: var(--hya-green);
}

/* Bootstrap's .text-info/.text-danger utility classes (used by LimeSurvey's
   inline validation messages and question help/description text, e.g.
   "Choose one of the following answers") assume a white background --
   illegible against this theme's teal question/group header bands. The
   .ls-questionhelp-scoped rule below covers the help-icon tooltip text;
   the bare .text-info/.text-danger rule covers question description text
   that carries the class directly with no .ls-questionhelp ancestor.
   Overridden globally rather than re-scoped again because every instance
   of these classes in this survey theme renders on a dark teal band, not
   a plain white background, so there's no legibility case being broken. */
.ls-questionhelp.text-info,
.ls-questionhelp .text-danger,
.ls-questionhelp .text-info {
    color: #ffffff !important;
    font-weight: 600;
}
.text-info,
.text-danger {
    color: #ffffff !important;
    font-weight: 600;
}

/* Radio/checkbox outlines were a pale gray, noticeably lighter than the
   dark horizontal rule lines in matrix-question tables -- match them to
   the same dark gray for visual consistency. */
.form-check-input,
input[type="radio"],
input[type="checkbox"] {
    border-color: var(--hya-gray-medium) !important;
}
/* This theme's .radio-item/.checkbox-item widgets render the visible
   circle/box via a ::before pseudo-element on the label (paired with a
   ::after icon-font glyph for the checked state, see the theme's own
   inline style block) rather than the native input's own border -- so the
   override above alone wasn't reaching the actual visible outline. */
.radio-item label::before,
.radio-item label::after,
.checkbox-item label::before,
.checkbox-item label::after {
    border-color: var(--hya-gray-medium) !important;
}

/* Top navigation bar (#survey-nav, survey list + question pages) --
   solid HYA green band with the white logo, echoing hyasearch.com's own
   dark teal footer band rather than a light nav with a thin accent line.
   Kept deliberately short (small vertical padding, smaller logo) because
   LimeSurvey's ThemeScripts JS measures this fixed-position navbar's actual
   rendered height at runtime and pads the page content to match it -- a
   taller navbar was the direct cause of the large gap under the progress
   bar, not a separate spacing bug to fix on the content side. */
#survey-nav.navbar,
header#survey-nav {
    background-color: var(--hya-green) !important;
    border-bottom: none !important;
    min-height: 0;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}
/* Scoped to the actual top-bar links only (.nav-link / the toggler) --
   NOT a bare "#survey-nav a", which was also catching the language-dropdown
   menu items nested inside #survey-nav. That made their text white on the
   dropdown's white background (invisible until the dark hover state kicked
   in). Dropdown items keep Bootstrap's normal dark-on-white styling. */
#survey-nav .nav-link,
#survey-nav .navbar-toggler {
    color: #ffffff;
}
#survey-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.75);
}
#survey-nav .navbar-toggler .ri-more-fill {
    color: #ffffff;
}
#survey-nav .dropdown-menu,
#survey-nav .dropdown-item {
    color: var(--hya-gray-dark);
}
/* The active/selected language row (and hover) gets a dark highlight
   background from Flatly's own dropdown styling -- dark text on a dark
   background is illegible, so force white text specifically in that state. */
#survey-nav .dropdown-item:hover,
#survey-nav .dropdown-item:focus,
#survey-nav .dropdown-item.active,
#survey-nav .dropdown-item:active {
    color: #ffffff !important;
}
.navbar-brand.logo-container {
    display: flex !important;
    align-items: center;
    height: auto;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0;
}
.navbar-brand.logo-container .logo {
    max-height: 58px !important;
    height: 58px !important;
    width: auto !important;
    /* Theme options still reference the color logo.png; force it to render
       white against the green bar via filter rather than needing a second
       logo asset uploaded through the Theme Editor. */
    filter: brightness(0) invert(1);
}

/* LimeSurvey's ThemeScripts JS measures the fixed navbar's rendered height
   and sets an inline padding-top on the page to compensate (so content
   doesn't slide under it) -- an inline style beats any plain class rule
   here regardless of source order, so these need !important to actually
   win against it rather than just being cosmetic no-ops. */
body {
    padding-top: 68px !important;
}

/* Survey list hero -- HYA's own site uses a solid teal band behind large
   header imagery/copy. LimeSurvey's equivalent (#surveylist-jumbotron) is
   just the logo + site name on a plain background, so give it the same
   teal-band treatment for a similar first impression. */
#surveylist-jumbotron {
    background-color: var(--hya-green);
    border-radius: 8px;
    padding: 2.5rem 1.5rem;
    margin-bottom: 1rem;
}
#surveylist-jumbotron img {
    max-height: 90px;
    width: auto;
}
#surveylist-jumbotron span.text-center {
    display: block;
    margin-top: 0.75rem;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
}

/* Survey list heading + surrounding cards */
.survey-list-heading {
    color: var(--hya-gray-dark);
    font-weight: 700;
}
.surveys-list .btn-primary {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Welcome/description text on the survey's first page was inheriting HYA
   green somewhere in Flatly's cascade instead of the plain body text color
   -- pin it explicitly rather than relying on --bs-body-color to win. */
.survey-welcome,
.survey-description,
#welcome-container .form-heading {
    color: var(--hya-gray-medium) !important;
}

/* Validation/error modals (e.g. "One or more questions have not been
   answered...") had a bare white header with no visual weight -- give it
   the same dark gray treatment as other emphasis bands, and invert the
   close (X) icon so it stays visible against the dark background. */
.modal-header {
    background-color: var(--hya-gray-dark);
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.modal-header .modal-title {
    color: #ffffff;
}
.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

/* Survey completion page ("Thank you for completing the survey...") --
   plain unstyled text, flush top-left, easy to miss. Give it the same
   heading weight/color as the rest of the theme and center it in the
   available width. */
.completed-wrapper {
    text-align: center;
    padding: 3rem 1rem;
}
.completed-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hya-gray-dark);
    max-width: 700px;
    margin: 0 auto;
}

/* Footer band -- echoes the dark "Commitments" section on hyasearch.com */
#surveyListFooter,
footer.footer {
    background-color: var(--hya-gray-dark);
    color: #cfd3d3;
    padding: 1.5rem 0;
    margin-top: 2rem;
}
#surveyListFooter a,
footer.footer a {
    color: #ffffff;
}
#surveyListFooter a:hover,
footer.footer a:hover {
    color: var(--hya-green);
}

/* Cards / panels used throughout question and welcome screens */
.card,
.panel,
.jumbotron {
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(32, 32, 32, 0.08);
    border: none;
}

/* Progress / navigation controls during survey-taking.
   .top-container and #outerframeContainer both use a col-xl-8 column
   internally (.top-content and .col-centered respectively), which should
   size them identically -- but they were rendering at different widths in
   practice, so both get the same explicit max-width/padding here to
   guarantee the progress bar lines up with the question panel below it
   instead of relying on two separate Bootstrap grid instances to agree. */
/* LimeSurvey injects a dynamically-computed "body .top-container { margin-top: Npx; }"
   rule (via ThemeScripts JS, sized off the navbar's original/taller height)
   as a real stylesheet rule, not an inline style -- it doesn't conflict with
   the padding rules below since it's a different property (margin vs
   padding), so both were simply stacking instead of one overriding the
   other. Zeroing the margin here removes that separately-injected gap. */
body .top-container,
.top-container.container-fluid {
    margin-top: 0 !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}
/* .main-col's ".space-col" class adds another 1em/2em top/bottom margin on
   top of the above -- tighten it too rather than leaving a second source
   of the same gap. */
.space-col {
    margin-top: 0.25rem !important;
    margin-bottom: 0.75rem !important;
}
.top-container .top-content,
#outerframeContainer .col-centered {
    max-width: 1140px;
    padding-left: 12px;
    padding-right: 12px;
}
#outerframeContainer.container-fluid {
    padding-top: 0.25rem !important;
}
.progress {
    height: 0.5rem;
}
.progress-bar {
    background-color: var(--hya-green);
}
.navigator .btn-primary,
#saveall,
#loadall {
    text-transform: uppercase;
}

/* Language changer + dropdowns */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--hya-green);
}