/* =====================================================================
   MARRCH SPRING CONFERENCE 2027 – Shared Page Styles + Color Palette
   "The Future of Recovery"

   Load this AFTER the two 2026 conference style sheets so it wins:
     1. MARRCH-AC-New-Nav-Style-2026.css   (layout: side nav, mobile/desktop)
     2. AC-Tabs-Accordions-2026.css
     3. MARRCH-SC-2027.css                 (this file)

   To change a color everywhere, edit the variable in :root below.
   ===================================================================== */

:root {
    /* ---- Core palette (from the 2027 banner) ---- */
    --marrch-deep-plum: #2E2440;   /* Primary dark: nav background, headings */
    --marrch-mulberry:  #4B2D4F;   /* Secondary dark: hovers, section bands */
    --marrch-dusk-teal: #1F4D5A;   /* Primary dark alt: buttons, accordion titles, links */
    --marrch-orange:    #F7941D;   /* Accent: highlight box bar + dots, accordion rates on hover */
    --marrch-rust:      #8A5A45;   /* Secondary: icons, dividers */
    --marrch-sage:      #8FA08A;   /* Secondary: alternate button, accordion borders */
    --marrch-peach:     #D9A27A;   /* Light: backgrounds, cards */
    --marrch-lavender:  #7C7A98;   /* Mid-tone: subtle rules on dark, alternate button hover */
    --marrch-white:     #FAFAF8;   /* Text on darks */

    /* ---- Light tints (from the email backgrounds) ---- */
    --marrch-mist:      #F4F4F8;   /* Lightest tint: hover rows */
    --marrch-mauve:     #EFEBF0;   /* Light tint: boxes, accordion headers */
    --marrch-heather:   #8D6E97;   /* Medium tint */
    --marrch-pale-yellow: #FDF3D8; /* Highlight: nav date, active/hover nav links, menu + accordion hovers, highlight box */

    /* ---- Roles (what each color is used for on the pages) ---- */
    --sc-nav-bg:        var(--marrch-deep-plum);
    --sc-nav-text:      var(--marrch-white);
    --sc-nav-active:    var(--marrch-pale-yellow);
    --sc-heading:       var(--marrch-deep-plum);
    --sc-accent-text:   var(--marrch-dusk-teal);
    --sc-tint:          var(--marrch-mauve);
    --sc-hover-tint:    var(--marrch-pale-yellow);
    --sc-rule:          rgba(124, 122, 152, 0.35);   /* lavender, softened */
    --sc-focus:         var(--marrch-dusk-teal);
}

/* =====================================================================
   1. NAVIGATION COLORS
   ===================================================================== */

/* Desktop side navigation panel */
.side-nav {
    background-color: var(--sc-nav-bg) !important;
}
.side-nav a.white-link {
    color: var(--sc-nav-text) !important;
}
.side-nav a.white-link:hover,
.side-nav a.white-link:focus-visible,
.side-nav a.white-link.active-page {
    color: var(--sc-nav-active) !important;
}
.side-nav hr.event_style2 {
    border-color: var(--marrch-lavender) !important;
    background-color: var(--marrch-lavender) !important;
}

/* Logo + "Spring Conference" title in the side nav */
#CustomPageBody h2.annual { margin-bottom: 1em; font-size: 170%; }
.side-nav a.sc-brand-link {
    color: var(--sc-nav-text) !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1em;
    text-align: left !important;
    font-size: 1.3em !important;
    margin-bottom: 0 !important;
}
/* Date + location line under the title */
.side-nav p.sc-nav-date {
    color: var(--marrch-pale-yellow) !important;
    margin-top: 0 !important;
    font-size: 12px !important;
}

/* Mobile navigation bar */
.mobile-nav { background-color: var(--sc-nav-bg) !important; }
a.nav-page,
.mobile-nav .nav-page,
.mobile-nav .accordion-icon2 { color: var(--sc-nav-text) !important; }
a.nav-page:hover { color: var(--sc-heading) !important; }
a.nav-page:active { color: var(--marrch-white) !important; }

/* =====================================================================
   2. GENERAL LAYOUT + IMAGES
   ===================================================================== */

/* Text title used in place of the banner when no banner image exists */
.banner-title {
    text-align: center;
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    line-height: 1.2;
    margin: 10px 0 25px 0;
}
.banner-title span {
    display: block;
    font-size: 0.55em;
    font-weight: normal;
    margin-top: 6px;
}

/* Keep all images and wide content inside the screen on small devices */
.page-contain img { max-width: 100%; height: auto; }
.page-contain { overflow-wrap: break-word; }

/* =====================================================================
   3. MOBILE NAVIGATION ACCORDION
   ===================================================================== */
.nav-accordion {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 12px 44px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease;
}
.nav-accordion .accordion-icon2 {
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -6px;
}
.nav-accordion:hover,
.nav-accordion:focus-visible { background-color: var(--sc-hover-tint); }
.nav-accordion:hover .nav-page,
.nav-accordion:focus-visible .nav-page,
.nav-accordion:hover .accordion-icon2,
.nav-accordion:focus-visible .accordion-icon2 { color: var(--sc-heading) !important; }

.nav-panel a.nav-page {
    display: block;
    padding: 10px 16px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-panel a.nav-page:hover,
.nav-panel a.nav-page:focus-visible,
.nav-panel a.nav-page:active {
    background-color: var(--sc-hover-tint);
    color: var(--sc-heading) !important;
}

/* =====================================================================
   4. TYPOGRAPHY & READABILITY (main content only)
   ===================================================================== */
.page-section { max-width: 820px; margin-bottom: 2.5em; }
.page-section > p.event_style:empty { display: none; }

.page-section p.event_style,
.page-section li.event_style {
    font-size: 17px !important;
    line-height: 1.65 !important;
}
.page-section p.event_style { margin: 0 0 1em 0 !important; }
.page-section ul {
    padding-left: 1.4em;
    margin: 0.5em 0 1.25em 0;
}
.page-section li.event_style { margin-bottom: 0.6em; }

/* Page title + section headings */
h1.event_style.main_title {
    font-size: clamp(28px, 4.5vw, 38px) !important;
    line-height: 1.2 !important;
}
.page-section h1.event_style {
    font-size: clamp(22px, 3.2vw, 28px) !important;
    line-height: 1.3 !important;
    margin: 0 0 0.6em 0 !important;
}
.page-contain h1.event_style,
.page-section h4.event_style { color: var(--sc-heading) !important; }
.page-section h4.event_style {
    font-size: 19px !important;
    line-height: 1.4 !important;
    margin: 1.25em 0 0.5em 0 !important;
}

/* Date / deadline callout under the banner */
.page-section p.deadline-callout {
    font-size: 20px !important;
    line-height: 1.4 !important;
    text-align: center;
    margin: 0.25em 0 1em 0 !important;
    color: var(--sc-heading) !important;
}

/* Highlight box: a pale yellow panel at 75% opacity with an orange bar and
   a small orange constellation in the corner, echoing the banner. Deep plum
   text keeps it easy to read. Only the yellow fill is see-through, so the
   text, bar, and dots stay solid. Change 0.75 to make the yellow stronger
   (closer to 1) or softer (closer to 0). */
.theme-box {
    position: relative;
    background-color: rgba(253, 243, 216, 0.75);   /* pale yellow #FDF3D8 */
    background-image:
        radial-gradient(circle, var(--marrch-orange) 0 3.5px, transparent 4px),
        radial-gradient(circle, var(--marrch-orange) 0 3.5px, transparent 4px),
        radial-gradient(circle, var(--marrch-orange) 0 3.5px, transparent 4px),
        radial-gradient(circle, rgba(247, 148, 29, 0.55) 0 2.5px, transparent 3px);
    background-size: 12px 12px;
    background-position:
        right 22px top 14px,
        right 46px top 26px,
        right 30px top 44px,
        right 62px top 10px;
    background-repeat: no-repeat;
    border-left: solid 6px var(--marrch-orange);
    border-radius: 0 6px 6px 0;
    box-shadow: 0 6px 18px rgba(46, 36, 64, 0.12);
    padding: 20px 96px 20px 24px;      /* right padding keeps text clear of the dots */
    margin: 10px 0 20px 0;
}
.theme-box p { margin: 0; }
.page-section .theme-box p.event_style,
.page-section .theme-box p.event_style strong {
    font-size: 20px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    color: var(--marrch-deep-plum) !important;
}

/* Links: visible underline and keyboard focus */
.page-section a.reg-link {
    color: var(--sc-accent-text) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.page-section a.reg-link:hover { color: var(--marrch-mulberry) !important; }
.page-contain a:focus-visible,
.page-contain [role="button"]:focus-visible,
#toTopBtn:focus-visible {
    outline: 3px solid var(--sc-focus);
    outline-offset: 3px;
}

/* =====================================================================
   5. BUTTONS
   Primary (event_button) is the main call to action: dusk teal, bold, with a
   soft shadow so it reads first. Alternate (event_button_alt) is sage with
   plum text at a lighter weight, turning misty lavender on hover.
   ===================================================================== */
.event_button, .event_button_alt {
    display: inline-block;
    max-width: 100%;
    text-align: center;
}
.page-section a.event_button,
.page-section a.event_button_alt {
    font-size: 18px !important;
    line-height: 1.3 !important;
    min-height: 44px;                 /* comfortable tap target */
    padding: 12px 28px !important;
    box-sizing: border-box;
}
a.event_button {
    background-color: var(--marrch-dusk-teal) !important;
    border-color: var(--marrch-dusk-teal) !important;
    color: var(--marrch-white) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(31, 77, 90, 0.35);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
a.event_button:hover,
a.event_button:focus-visible {
    background-color: var(--marrch-deep-plum) !important;
    border-color: var(--marrch-deep-plum) !important;
    color: var(--marrch-white) !important;
    box-shadow: 0 6px 16px rgba(46, 36, 64, 0.4);
}
a.event_button_alt {
    background-color: var(--marrch-sage) !important;
    border-color: var(--marrch-sage) !important;
    color: var(--marrch-deep-plum) !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
a.event_button_alt:hover,
a.event_button_alt:focus-visible {
    background-color: var(--marrch-lavender) !important;
    border-color: var(--marrch-lavender) !important;
    color: var(--marrch-white) !important;
}

/* Back to top button */
#toTopBtn {
    background-color: var(--marrch-deep-plum) !important;
    color: var(--marrch-white) !important;
}
#toTopBtn:hover { background-color: var(--marrch-mulberry) !important; }

/* =====================================================================
   6. TWO-COLUMN BOXES (At a Glance, pricing)
   ===================================================================== */
.two-col-display { width: 100%; display: flex; }
.two-col { width: 50%; display: block; padding: 0 20px; }
.two-col p { padding-left: 10px; }
.r-border { border-left: solid 1px var(--sc-rule); }
.page-section .two-col p.price-head {
    background-color: var(--sc-tint);
    color: var(--sc-heading) !important;
    padding: 10px;
}

/* =====================================================================
   7. ICON ROWS (Get Involved)
   ===================================================================== */
.involve-row {
    border-top: solid 1px var(--sc-rule);
    padding: 6px 0 4px 0;
}
.involve-row:last-child { border-bottom: solid 1px var(--sc-rule); }
.involve-row h4.event_style i {
    color: var(--marrch-rust);
    width: 1.4em;
}

/* =====================================================================
   8. TOPIC LIST (two columns on desktop, one on phones)
   ===================================================================== */
.topic-list { columns: 2; column-gap: 40px; }
.topic-list li { break-inside: avoid; margin-bottom: 6px; }
.page-section .topic-list li.event_style {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 0.5em;
}

/* =====================================================================
   9. ACCORDIONS (Schedule, Sponsorships)
   ===================================================================== */
.agendaAccordionContainer {
    padding-left: 20px;
    padding-right: 20px;
    background: var(--sc-tint);
    max-width: 100%;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 10px;
    border-bottom: solid 1px var(--marrch-sage);
    border-top: solid 1px var(--marrch-sage);
    margin-top: 12px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
p.agendaAccordion {
    color: var(--marrch-deep-plum) !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: normal !important;
    vertical-align: middle;
    margin-bottom: 14px;
    margin-top: 14px;
}
/* Hover, keyboard focus, and open: pale yellow background, deep plum border,
   bold title with a little letter spacing, orange rates */
.agendaAccordionContainer:hover,
.agendaAccordionContainer:focus-visible,
.agendaAccordionContainer.agendaAcctive {
    background-color: var(--marrch-pale-yellow);
    border-color: var(--marrch-deep-plum);
}
.agendaAccordionContainer:hover p.agendaAccordion,
.agendaAccordionContainer:focus-visible p.agendaAccordion,
.agendaAccordionContainer.agendaAcctive p.agendaAccordion,
.agendaAccordionContainer:hover .availability,
.agendaAccordionContainer:focus-visible .availability,
.agendaAccordionContainer.agendaAcctive .availability {
    font-weight: bold !important;
    letter-spacing: 0.5px;
}
b { vertical-align: middle; }
.accordion-icon2 {
    color: var(--sc-heading);
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    flex-shrink: 0;
}
.agendaPanel {
    max-width: 100%;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0px 6px;
    transition: max-height 0.45s ease-in-out, opacity 0.3s ease, padding 0.3s ease;
}
.agendaPanel ul { margin-top: 1em; }
.agendaAccordionContainer.agendaAcctive .accordion-icon2,
.nav-accordion.nav-active .accordion-icon2 {
    transform: rotate(180deg);
}
.agendaAccordionContainer.agendaAcctive + .agendaPanel {
    opacity: 1;
    padding: 0;
    border-bottom: solid 1px rgba(143, 160, 138, 0.3);
}

/* Sponsorship accordions: availability note + rates line */
.agendaAccordion .availability {
    display: inline;
    font-style: italic;
    font-weight: normal;
}
.agendaAccordionContainer.has-rates p.agendaAccordion { margin-bottom: 4px; }
.agendaAccordionContainer p.agendaAccordion.acc-rates {
    flex-basis: 100%;
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 15px !important;
    color: var(--marrch-mulberry) !important;
}
.agendaAccordionContainer p.agendaAccordion.acc-rates,
.agendaAccordionContainer:hover p.agendaAccordion.acc-rates,
.agendaAccordionContainer:focus-visible p.agendaAccordion.acc-rates,
.agendaAccordionContainer.agendaAcctive p.agendaAccordion.acc-rates {
    font-weight: normal !important;
    letter-spacing: normal;
}
/* Rates turn orange on hover, keyboard focus, and when open */
.agendaAccordionContainer:hover p.agendaAccordion.acc-rates,
.agendaAccordionContainer:focus-visible p.agendaAccordion.acc-rates,
.agendaAccordionContainer.agendaAcctive p.agendaAccordion.acc-rates {
    color: var(--marrch-orange) !important;
}

/* No highlight behind the text itself. The older site style sheets add a
   background to text on hover; this clears it so only the whole row changes
   color (pale yellow), never a strip behind the sponsor name or rates. */
.page-section .agendaAccordionContainer p.agendaAccordion,
.page-section .agendaAccordionContainer p.agendaAccordion:hover,
.page-section .agendaAccordionContainer p.agendaAccordion *,
.page-section .agendaAccordionContainer p.agendaAccordion *:hover,
.page-section .agendaAccordionContainer:hover p.agendaAccordion,
.page-section .agendaAccordionContainer:hover p.agendaAccordion *,
.page-section .agendaAccordionContainer:focus-visible p.agendaAccordion,
.page-section .agendaAccordionContainer.agendaAcctive p.agendaAccordion {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    border: 0 !important;
}

/* =====================================================================
   10. SMALLER SCREENS
   ===================================================================== */
@media (max-width: 768px) {
    .page-section p.event_style,
    .page-section li.event_style { font-size: 16px !important; line-height: 1.6 !important; }
    .page-section p.deadline-callout,
    .page-section .theme-box p.event_style,
    .page-section .theme-box p.event_style strong { font-size: 18px !important; }
    .theme-box { padding: 18px 76px 18px 20px; }
    .page-section a.event_button,
    .page-section a.event_button_alt { display: block; width: 100%; margin-bottom: 10px; }
    .page-section { margin-bottom: 2em; }
    .two-col-display { display: block; }
    .two-col { width: 100%; padding: 0px 0px 20px 0px; border: none; }
    .topic-list { columns: 1; }
}

/* Anchor jumps don't hide headings under the top of the screen */
html { scroll-padding-top: 20px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .agendaPanel, .accordion-icon2, .nav-accordion, .nav-panel a.nav-page { transition: none; }
}