/* ============================================================================
   modplans.css
   Site-wide styling for the Modular Plan Submittal app.

   Loaded after the shared TN.gov template stylesheet (apps/css/template.css),
   so these rules layer a light refresh on top of the base skin: system font,
   solid navy buttons, clearer headings, a visible focus ring, one shared card
   treatment for every boxed region, and stacked form/summary rows.

   Palette is kept as literal hex (no CSS custom properties) for legacy IE
   support. Navy #333366 on white is the primary pair (10.4:1).
   ============================================================================ */


/* ---------------------------------------------------------------------------
   Base typography
   --------------------------------------------------------------------------- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 100%;
    line-height: 1.5;
    color: #1f1f1f;
}

h1 { font-size: 1.5rem;  line-height: 1.3; }
h2 { font-size: 1.15rem; line-height: 1.35; }


/* ---------------------------------------------------------------------------
   Header banner
   White app name on the TN navy band.
   --------------------------------------------------------------------------- */
#header #appname {
    background-color: #333366;
}


/* ---------------------------------------------------------------------------
   Buttons
   Flat navy primary action, replacing the template's bgBtn.jpg texture.
   --------------------------------------------------------------------------- */
a.button,
a.button:visited {
    background-color: #333366;
    background-image: none;
    color: #ffffff;
    border: 1px solid #2a2a55;
    border-radius: 4px;
    padding: 8px 18px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background-color 120ms ease, border-color 120ms ease;
}

a.button:hover,
a.button:visited:hover {
    background-color: #4a4a7a;
    background-image: none;
    border-color: #2a2a55;
    color: #ffffff;
}

a.button:active {
    background-color: #2a2a55;
}


/* ---------------------------------------------------------------------------
   Focus
   Visible keyboard focus ring on interactive elements.
   --------------------------------------------------------------------------- */
a:focus-visible,
a.button:focus-visible {
    outline: 3px solid #c9a961;
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    a.button {
        transition: none;
    }
}


/* ---------------------------------------------------------------------------
   Cards & heading bands
   One shared card treatment for every boxed region: the form containers
   (fieldset, .frame) and the welcome-page panels. Navy #333366 on white
   (10.4:1). Each card declares an explicit opaque background-color so contrast
   scanners can compute the text/background pair.
   --------------------------------------------------------------------------- */
fieldset,
.frame,
#whatyoucando,
#whatyouwillneed,
#currentusers,
#newusers {
    background-color: #ffffff;
    border: 1px solid #d8d4b8;
    border-top: 4px solid #333366;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Form containers pad their own content; welcome panels clip the heading band
   to the rounded corners and pad their children individually (further down). */
fieldset,
.frame {
    padding: 1.5em;
}

#whatyoucando,
#whatyouwillneed,
#currentusers,
#newusers {
    overflow: hidden;
}

/* Section heading band: the same gradient + solid #f5f3e4 fallback + navy text
   for every card heading. Navy on #f5f3e4 stays well above 4.5:1. */
fieldset h2,
.frame h2,
#whatyoucando h2,
#whatyouwillneed h2,
#currentusers h2,
#newusers h2 {
    background: linear-gradient(to bottom, #ffffff, #f5f3e4);
    background-color: #f5f3e4;
    border-bottom: 1px solid #d8d4b8;
    color: #333366;
    padding: 0.5em 0.75em;
}

/* Heading band spacing differs by context. */
fieldset h2,
.frame h2 {
    margin: 0 0 0.75em 0;
}

#whatyoucando h2,
#whatyouwillneed h2,
#currentusers h2,
#newusers h2 {
    margin: 0;
}

/* legend renders as a heading chip on the fieldset border. Match the band
   look while keeping it bold and navy for contrast. */
legend {
    background-color: #f5f3e4;
    border: 1px solid #d8d4b8;
    border-radius: 4px;
    color: #333366;
    font-weight: 600;
    margin: 0;
    padding: 0.25em 0.75em;
}


/* ---------------------------------------------------------------------------
   Form & summary rows
   Modernize the dated right-aligned, 40%-wide floated label rows to a stacked,
   left-aligned layout. Covers interactive form labels AND the read-only
   .field-label summary rows so forms and confirmation pages read the same.
   CSS-only: no markup, label associations, or DOM order changes.
   --------------------------------------------------------------------------- */

/* Field labels: interactive form labels AND read-only .field-label summary
   rows share one stacked, left-aligned, navy look so forms and confirmation
   pages read the same. Navy on white stays >= 4.5:1. */
form p label,
.form p label,
.label,
.field-label {
    display: block;
    text-align: left;
    margin: 0 0 0.25em 0;
    font-weight: 600;
    color: #333366;
}

/* Only the interactive form rows need the template's float/width cleared.
   Overrides template.css `p label, .label {float:left; width:40%}`. */
form p label,
.form p label,
.label {
    float: none;
    clear: both;
    width: auto;
}

/* Inputs sit on their own line under the label, not floated beside it. */
form p input,
form p select,
form p textarea {
    float: none;
    clear: both;
}

/* Login: override the page-specific `.login label/input` float rules so the
   login form stacks like the others, and left-align its centered fieldset. */
.login {
    text-align: left;
}

/* Cap the login card width so it doesn't stretch on wide screens, and center
   it. Overrides template.css `.login fieldset {width:60%}`. */
.login fieldset {
    width: auto;
    max-width: 28em;
    margin: 0 auto;
}

.login label {
    float: none;
    clear: both;
    width: auto;
    text-align: left;
    margin: 0 0 0.25em 0;
}

.login input {
    float: none;
    clear: both;
}

/* Keep the primary submit button centered as the page's main call to action. */
.login input.button {
    display: block;
    margin: 0.75em auto 0 auto;
}

/* --- Carve-outs: layouts that must NOT be restacked ----------------------- */

/* Payment fee table: dollar amounts are float-aligned in two numeric columns.
   Restore the floated layout the generic rule above would otherwise undo. */
.payment #summary li label {
    display: block;
    float: left;
    clear: left;
    width: 42%;
    text-align: right;
    font-weight: normal;
    margin: 0;
    color: inherit;
}

.payment #summary li.due label {
    font-weight: bold;
    width: 38.5%;
}


/* ---------------------------------------------------------------------------
   Welcome page
   Home-only layout details: the duplicated watermark fix, card inner padding,
   panel spacing, and star bullets. The card/heading-band look itself is shared
   above under "Cards & heading bands". These selectors match welcome markup.
   --------------------------------------------------------------------------- */

/* template.css paints the watermark on both #content and the inner
   div.index; suppress the inner copy so it isn't doubled. */
#content div.index {
    background-image: none;
}

#whatyoucando > *:not(h2),
#whatyouwillneed > *:not(h2),
#currentusers > *:not(h2),
#newusers > *:not(h2) {
    padding-left: 0.75em;
    padding-right: 0.75em;
}

#whatyoucando {
    margin-bottom: 1em;
}

.index ul {
    list-style: none;
    padding-left: 0;
    margin: 0.25em 0 0.5em 0;
}

.index ul li {
    list-style-image: none;
    list-style-type: none;
    position: relative;
    padding-left: 1.5em;
    margin: 0 0 0.5em 0;
    line-height: 1.5;
}

.index ul li::before {
    content: "";
    position: absolute;
    left: 0.35em;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background-color: #333366;
    border-radius: 50%;
}