/* ============================================
   MOLLOY UNIVERSITY — THEME VARIABLES
   Aligned with molloy.edu brand identity:
     Primary:   Cerise/Maroon  #8B1A2D
     Dark bg:   Deep Maroon    #5E0E1A
     Accent:    Molloy Gold    #C9A84C
     Neutral:   Warm Off-White #F6F3EF
   Typography: Typekit 'zrc2anj' (molloy.edu stack)
   ============================================ */
@import url("https://use.typekit.net/zrc2anj.css");

:root {
    --color-primary:         #8B1A2D;  /* Molloy cerise/maroon */
    --color-primary-hover:   #A8223A;  /* cerise lightened ~15% for hover */
    --color-secondary:       #C9A84C;  /* Molloy gold accent */
    --color-secondary-hover: #D9BC6E;  /* gold lightened for hover */
    --color-neutral-light:   #F6F3EF;  /* warm off-white, echoes molloy.edu bg */
    --color-neutral-mid:     #D9D2C8;  /* warm mid-tone */
    --color-neutral-dark:    #6B6258;  /* warm dark neutral */
    --color-header-bg:       #5E0E1A;  /* deep maroon — nav/header */
    --color-page-bg:         #ffffff;
    --color-text-on-primary: #ffffff;
    --color-text-on-dark:    #ffffff;
    --color-text-body:       #242424;  /* matches molloy.edu body color */
}

/* ============================================
   BASE STYLES
   Font stack mirrors molloy.edu prod.css:
   Adobe Typekit (zrc2anj) + system fallbacks
   ============================================ */

body, html {
    font-family: "freight-sans-pro", "Helvetica Neue", helvetica, roboto, arial, sans-serif !important;
    line-height: 1.5;
    color: var(--color-text-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, table, th, td, #login, #login.a, #cartCount a {
    font-family: "freight-display-pro", "freight-sans-pro", "Helvetica Neue", arial, sans-serif !important;
}

#wrapper {
    max-width: none !important;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    min-width: 24px;
    min-height: 24px;
}

a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.note {
    color: var(--color-primary);
}

:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

#header,
#header_title,
#login,
#cartCount,
#cartCount a,
#cartOption a,
#profileOption a {
    background-color: var(--color-header-bg);
}

#header_title {
    float: left;
    padding-top: 15px;
    padding-left: 25px;
    padding-right: 25px;
    height: 45px;
    /* Subtle gold bottom accent line — signature Molloy touch */
    border-bottom: 3px solid var(--color-secondary);
}

.image_header {
    width: auto;
    height: 120%;
}

#login {
    color: var(--color-text-on-dark);
}

#login a {
    background-color: var(--color-header-bg);
}

#login input.submit {
    background-color: var(--color-secondary);
    color: var(--color-header-bg);
    font-weight: 600;
    letter-spacing: 0.03em;
}

#login input.submit:hover {
    background-color: var(--color-secondary-hover);
    color: var(--color-header-bg);
}

#testBanner {
    background-color: var(--color-neutral-light);
    border-bottom: 2px solid var(--color-secondary);
}

#testBannerText {
    color: var(--color-primary);
    font-weight: 600;
}

/* ============================================
   LEFT MENU / NAVIGATION
   ============================================ */

.leftMenu ul li a {
    background-color: var(--color-neutral-light);
    color: var(--color-primary);
}

.leftMenu ul li a:hover {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.leftMenu ul li a i {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 2px;
}

.leftMenu ul.Level00 li a {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-left: 4px solid var(--color-secondary);  /* gold left-edge accent */
}

.leftMenu ul.Level01 li a {
    background-color: var(--color-neutral-light);
    color: var(--color-primary);
    border-left: 4px solid var(--color-neutral-mid);
}

.leftMenu ul.Level02 li a {
    background-color: var(--color-neutral-mid);
    border-left: 4px solid var(--color-secondary);
}

.leftMenu ul.Level00 li a:hover,
.leftMenu ul.Level01 li a:hover,
.leftMenu ul.Level02 li a:hover,
.leftMenu ul.Level03 li a:hover {
    background-color: var(--color-header-bg);
    color: var(--color-text-on-primary);
    border-left-color: var(--color-secondary);
}

a.card {
    height: 10rem;
    border: 1px solid rgba(139, 26, 45, 0.2);   /* cerise-tinted border */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.card:hover {
    border-color: var(--color-secondary);
    box-shadow: 0 2px 8px rgba(139, 26, 45, 0.12);
}

#subCategories a:hover {
    background-color: var(--color-primary);
}

/* ============================================
   CART & SHOPPING
   ============================================ */

.cartOption a {
    background-color: var(--color-secondary);
    color: var(--color-header-bg);
    font-weight: 600;
}

.cartOption a:hover {
    background-color: var(--color-secondary-hover);
    color: var(--color-header-bg);
}

.cartOption input.submit {
    background-color: var(--color-secondary);
    color: var(--color-header-bg);
    font-weight: 600;
}

.cartOption input.submit:hover {
    background-color: var(--color-secondary-hover);
    color: var(--color-header-bg);
}

.cartOption input.cancel {
    background-color: var(--color-neutral-mid);
    color: var(--color-primary);
}

.cartOption input.cancel:hover {
    background-color: var(--color-neutral-dark);
    color: var(--color-text-on-primary);
}

.cartinner #addedAttendee {
    border: 1px solid var(--color-secondary);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.cartinner #addedAttendee:hover {
    border: 1px solid var(--color-secondary);
    background-color: var(--color-primary-hover);
    color: var(--color-text-on-primary);
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

.logform {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    /* Warm gold top accent — echoes Molloy's header treatment */
    border-top: 4px solid var(--color-secondary);
}

.logform .forgotPw a {
    color: var(--color-secondary);
}

.logform .forgotPw a:hover {
    color: var(--color-secondary-hover);
    text-decoration: underline;
}

#loginHeader {
    background-color: var(--color-header-bg);
    color: var(--color-text-on-primary);
    border-bottom: 2px solid var(--color-secondary);
}

.logform button {
    background: var(--color-secondary);
    color: var(--color-header-bg);
    font-family: "freight-sans-pro", "Helvetica Neue", arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.875rem;
}

.logform button:hover,
.logform button:active,
.logform button:focus {
    background-color: var(--color-secondary-hover);
    color: var(--color-header-bg);
    font-weight: 700;
}

#loginContent input.button,
#loginContent input.submit {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

input.submit {
    color: var(--color-text-on-primary);
}

input[type="checkbox" i] {
    accent-color: var(--color-primary);
}

/* ============================================
   CONTENT SECTIONS
   ============================================ */

#breadcrumbTop a {
    color: var(--color-primary);
}

#breadcrumbTop a:hover {
    color: var(--color-secondary);
}

.subHeader {
    color: var(--color-primary);
    border-bottom: 3px solid var(--color-secondary);  /* gold rule — matches molloy.edu divider convention */
    font-family: "freight-display-pro", "freight-sans-pro", arial, sans-serif;
}

#subHeaderNote {
    width: 99%;
    padding-left: 32px;
    border-bottom: 3px solid var(--color-secondary);
    border-left: 4px solid var(--color-secondary);    /* gold left-accent */
    font-size: 0.813rem;
    margin-top: 5px;
    background-color: var(--color-primary);
    border-radius: 2px;
    color: var(--color-text-on-primary);
}

.subheadinglink a {
    color: var(--color-primary);
    font-weight: 600;
}

.subheadinglink a:hover {
    color: var(--color-secondary);
}

.featuredCourse span {
    font-size: 90%;
}

.courses a {
    color: var(--color-primary);
}

.courses a:hover {
    color: var(--color-secondary);
}

.courseinner table tr td.tableheading {
    color: var(--color-primary);
    font-weight: 700;
    border-bottom: 2px solid var(--color-secondary);
}

.instructorbreak {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-top: 3px solid var(--color-secondary);
}

.bio_masthead {
    background-color: var(--color-primary);
    border-bottom: 3px solid var(--color-secondary);
}

.instructorline a {
    color: var(--color-primary);
}

.instructorline a:hover {
    color: var(--color-secondary);
}

.historyinner hr {
    background-color: var(--color-secondary);  /* gold dividers for history timeline */
    height: 1px;
    border: none;
}

.history a {
    color: var(--color-primary);
}

.history a:hover {
    color: var(--color-secondary);
}

.card-header div h2 {
    color: var(--color-primary);
    font-family: "freight-display-pro", arial, sans-serif;
}

a.card-link {
    color: var(--color-header-bg);
    font-weight: 600;
}

a.card-link:hover {
    color: var(--color-secondary);
}

/* ============================================
   CALENDAR
   ============================================ */

.calHeader,
.calSubheaderDOW,
.calFooterRight,
.calFooterCenter,
.calFooterLeft {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.calHeader {
    height: 30px;
    line-height: 22.4px;
    padding-left: 8px;
    padding-top: 8px;
    border-bottom: 2px solid var(--color-secondary);
}

.calCatSelect {
    color: var(--color-header-bg);
    font-weight: 600;
}

.calDOW {
    background-color: var(--color-neutral-light);
    vertical-align: top;
    height: 135px;
    width: 135px;
    border-color: white;
    border-style: solid;
}

.calTodayDOWlisting {
    font-family: "freight-sans-pro", arial, sans-serif;
    font-size: 1.125rem;
    text-align: left;
    color: var(--color-header-bg);           /* deep maroon text on gold */
    background-color: var(--color-secondary);  /* gold highlight = "today" */
    font-weight: 700;
}

.calCatOption {
    color: var(--color-header-bg);
}

table.cal a:hover {
    color: var(--color-secondary);
}

/* ============================================
   FOOTER
   ============================================ */

#footer,
#footer table {
    background-color: var(--color-header-bg);
    border-top: 4px solid var(--color-secondary);  /* gold top-border rule */
    color: var(--color-text-on-dark);
}

#footer a {
    color: var(--color-secondary);
}

#footer a:hover {
    color: var(--color-secondary-hover);
    text-decoration: underline;
}