@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

/* INITIALIZE ENVIRONMENT */
:root {
    --page-margin:2rem;
    --page-width:1300px;

    --color-main-darkBlue:#032B5C;
    --color-systemText:#666666;
    --color-errorText:#FF0000;

    --color-border-standard: #9A9A9A;  /* typically used around images */
    --color-border-light: #E3E3E3;     /* used for things like the fieldset border */

    --radius-standard:4px;  /* standard border radius */
    --radius-button:25px;   /* more button like */

    --font-standard:Verdana, Arial, sans-serif;
    --font-heading:Oswald, var(--font-standard);
}


/* GENERAL STYLES */
html { font-family:var(--font-standard); font-size:100%; }  /* used as the baseline for rem (root element) */
body { margin:0; min-width:230px; padding:0; }
h1, h2, h3 { font-family:var(--font-heading); font-weight:400; letter-spacing:0.02em; line-height:1.2; }
a { color:#0000FF; overflow-wrap:break-word; }
a:hover, a:focus-visible { text-decoration:none; }
a:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
button { cursor:pointer; }
button:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
address { font-style:normal; }
.extIcon { fill:currentColor; padding-left:5px; }
.highlightText { font-size:1.2rem; line-height:1.6; }
.addInfo { font-size:0.9rem; font-style:italic; }
.systemText, .systemText td { color:var(--color-systemText); font-style:italic; }
.errorText { color:var(--color-errorText); }
.nowrap { white-space:nowrap; }
.clearAfter::after { clear:both; content:""; display:block; height:0; visibility:hidden; }
.hide-visually { border:0; clip:rect(0, 0, 0, 0); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; white-space:nowrap; width:1px; }  /* hide content meant for screen readers */



/* WEBSITE HEADER */
.pgHeader { background:rgba(3, 43, 92) url("https://ndstate.co1.qualtrics.com/CP/Graphic.php?IM=IM_SQdhW4hu69XUtur") no-repeat right 20% bottom 40%; background-size:cover; color:#FFFFFF; display:flex; flex-direction:column; font-family:var(--font-heading); justify-content:center; min-height:420px; padding:10px; position:relative; text-align:center; }
.pgHeader .container { background-color:rgba(3, 43, 92, 0.7); padding:1rem 0.5rem; }
.pgHeader h1 { font-optical-sizing:auto; font-size:2rem; line-height:1.4; }
.pgHeader h1 strong { display:block; font-size:3rem; line-height:1.1; }
.pgHeader p { margin:1rem 0 0; }



/* MAIN WEBSITE NAVIGATION */
.mainNav { background-color:#000000; color:#FFFFFF; }
.mainNav > button { display:none; }
.mainNav ul { list-style:none; margin:0 auto; max-width:var(--page-width); padding:0; }
.mainNav > ul { display:flex; }
.mainNav > ul > li { position:relative; }
.mainNav a { color:#FFFFFF; display:block; padding:1rem 1.25rem; text-decoration:none; }
.mainNav a:hover,
.mainNav a:focus-visible { text-decoration:underline; text-underline-offset:0.2em; }

.mainNav_toggleGroup { display:flex; }  /* used when there's a sub-menu */
.mainNav_toggleGroup > a { flex:1; padding-right:5px; }
.mainNav_toggleGroup > button { align-items:center; background:none; border:0; color:#FFFFFF; display:flex; justify-content:center; min-width:2.5rem; padding:0 0.3rem; }
.mainNav_toggleGroup > button:hover,
.mainNav_toggleGroup > button:focus-visible { background-color:#333333; }
.mainNav_arrow { border-bottom:2px solid currentColor; border-right:2px solid currentColor; display:block; height:0.5rem; transform:rotate(45deg) translateY(-0.15rem); transition:transform 0.15s ease; width:0.5rem; }
.mainNav_toggleGroup:has(> button[aria-expanded="true"]) { background-color:#1E1E1E; }
.mainNav_toggleGroup > button[aria-expanded="true"] .mainNav_arrow { transform:rotate(225deg) translate(-0.05rem, -0.05rem); }

.mainNav > ul > li > ul { background-color:#333333; display:none; left:0; min-width:14rem; position:absolute; top:100%; z-index:10; }  /* sub-menu */
.mainNav_toggleGroup:has(button[aria-expanded="true"]) + ul { display:block; }
.mainNav > ul > li > ul a { padding:0.8rem 1.25rem; }
.mainNav > ul > li > ul a:hover,
.mainNav > ul > li > ul a:focus-visible { background-color:#4A4A4A; text-decoration:none; }

@media (min-width: 701px) {
    .mainNav > ul > li:first-child a { padding-left:var(--page-margin); }
}

@media (max-width: 700px) {
    .mainNav > button { align-items:center; background:none; border:0; color:#DBDBDB; display:flex; flex-direction:column; font-size:1rem; gap:0.35rem; padding:1rem 1.25rem; }
    .mainNav > button:hover,
    .mainNav > button:focus-visible { background-color:#353535; color:#FFFFFF; }
    .mainNav > button svg { height:20px; padding-top:2px; width:30px; }
    .mainNav > button svg line { fill:none; stroke:currentColor; stroke-width:2; }
    .mainNav > ul { display:none; }
    .mainNav > button[aria-expanded="true"] + ul { display:block; }
    .mainNav > ul > li { border-top:1px solid #444444; }
    .mainNav a { padding:0.9rem 1.25rem; }

    .mainNav_toggleGroup { align-items:stretch; }
    .mainNav_toggleGroup > button { min-width:3.5rem; }

    .mainNav > ul > li > ul { position:static; }
    .mainNav > ul > li > ul a { padding-left:2rem; }
}



/* MAIN WEBSITE CONTENT */
.pgWrapper { margin:0 auto; max-width:var(--page-width); }
main { margin:var(--page-margin); }
main h1 { font-size:2rem; font-weight:500; margin:0 0 1rem; }
main h2 { font-size:1.8rem; margin:2rem 0 1rem; }
main h3 { font-size:1.5rem; margin:2rem 0 1rem; }
main p { line-height:1.4; }
main li { line-height:1.4; margin-bottom:0.25rem; }


/* WEBSITE FOOTER */
footer { border-top:1px solid #CCCCCC; margin:2rem; margin-top:3rem; }
footer a { font-size:0.9rem; font-style:italic; }



/* SPLIT CONTENT INTO COLUMNS */
.layout_split { clear:both; display:grid; gap:2rem 40px; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); margin-top:1rem; overflow:auto; }
.layout_split > div > :first-child { margin-top:10px; }



/* MESSAGE BOX (typically used to display database connection / query errors) */
main .msgBox { background-color:#FEFDFA; border:1px solid #000000; border-width:1px 4px; padding:1.5rem; margin:2.5rem 1rem; font-size:1.2rem; }
main .msgBox p { margin:0; font-weight:bold; }
main .msgBox p + p { margin-top:1rem; }
main .msgBox .normal { color:#000000; font-style:normal; font-weight:normal; }
main .msgBox ul { margin:0.5rem 0 0 45px; padding:0; }
main .msgBox li { margin:0; }
main .msgBox li + li { margin-top:0.25rem; }
main .msgBox.error p { color:var(--color-errorText); }                             /* custom styling -- msgBox also flagged as an error box */
main .msgBox.normal p { color:#000000; font-style:normal; font-weight:normal; }  /* custom styling -- msgBox also flagged as a normal box */



/* ACTION BUTTON (e.g., summit registration) */
.actionButton { margin:1.5rem 4px 2rem; }
.actionButton a { background-color:var(--color-main-darkBlue); border:0; border-radius:var(--radius-button); color:#FFFFFF; display:inline-block; font-size:1.1rem; padding:10px 20px; text-decoration:none; }
.actionButton a:hover,
.actionButton a:focus-visible { background-color:#000000; filter:drop-shadow(2px 2px 2px #CCCCCC); }
.actionButton a:focus-visible { outline:2px solid #000000; outline-offset:2px; }
.actionButton > a > .addInfo { color:#E3E3E3; display:block; font-size:0.75rem; }