/* ============================================================
   THE MINNESOTA ASSEMBLY + BASELINE USER.CSS - By: Jim Homyak
   ============================================================ */

/* Universal reset + system font */

/* Load Roboto from Google Fonts in the head section at index.php*/

/* Reset layout defaults */

/* Droid Sans — Regular */

@font-face {
    font-family: 'Droid Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://img1.wsimg.com/gfonts/s/droidsans/v19/SlGVmQWMvZQIdix7AFxXkHNSbQ.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Droid Sans — Bold */
@font-face {
    font-family: 'Droid Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://img1.wsimg.com/gfonts/s/droidsans/v19/SlGWmQWMvZQIdix7AFxXmMh3eDs1Zw.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global text font (safe for icons) */
body, button, input, select, textarea {
    /* font-family: 'Roboto', sans-serif !important; */
    font-family: 'Droid Sans', arial, sans-serif;
    /* font-family: system-ui, sans-serif; */
}

/* Global background + text color (matches Apache) */
body {
    background: #f4f4f4 !important;
    color: #222;
}

/* ============================================================
   STRIP CASSIOPEIA CHROME - By: Jim Homyak
   ============================================================ */

/* Remove Joomla template wrappers and chrome */
.container-header,
.container-main,
.container-footer,
.site-grid,
.grid-child,
.container-component,
.card,
.cardja,
.blog,
.com-content-category-blog,
.category-desc,
.alert {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Remove header chrome */
header.header {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.container-header .mod-finder,
.container-header .mod-search {
    padding-left: 50px !important;
}

.container-header {
    padding-left: 50px !important;
}

.container-header .mod-menu a {
    color: #222 !important;
}

/* Recolor Cassiopeia header dropdown arrows */
.container-header .mod-menu .metismenu > li.parent > a::after {
    border-color: #222 !important;
}

.container-header .mod-menu .metismenu > li.parent > a::after {
    color: #222 !important;
    fill: #222 !important;
    stroke: #222 !important;
}

.container-header .mod-menu .metismenu > li.parent > a:hover::after {
 header   border-color: #000 !important;
    color: #000 !important;
}

/* TOP‑ALIGN ALL TOP‑LEVEL MENU ITEMS */
.mod-menu.mod-menu_dropdown-metismenu.metismenu {
    display: flex !important;
    align-items: flex-start !important;   /* <-- forces all items to the top */
}

/* Add your desired top offset (0.6rem recommended) */
.mod-menu.mod-menu_dropdown-metismenu.metismenu > li.level-1 > a {
    padding-top: 0.6rem !important;       /* <-- lifts ALL items equally */
    padding-bottom: 0 !important;
    line-height: 1.1 !important;
}

/* Normalize the toggler so it no longer lifts its parent */
.mod-menu.mod-menu_dropdown-metismenu.metismenu > li.level-1 > .mm-toggler {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    align-self: flex-start !important;    /* <-- aligns with the text baseline */
}  
  
/* Level-2 submenu links */
.metismenu-item.level-2 > a {
    color: #222 !important;
}

/* Level-2 submenu headings (non-clickable items) */
.metismenu-item.level-2 > .mod-menu__heading.nav-header {
    color: #222 !important;
}

.metismenu-item.level-2 > a:hover {
    color: #000 !important;
}

.metismenu .metismenu-item a,
.metismenu .mod-menu__heading.nav-header {
    color: #222 !important;
}

/* Force TOP-LEVEL MetisMenu arrows to #222 */
.mod-menu .mm-toggler {
    color: #222 !important;
    fill: #222 !important;
    stroke: #222 !important;
    border-color: #222 !important;
}

/* Fix the vertical misalignment caused by submenu toggler buttons */
.mod-menu_dropdown-metismenu .mm-toggler {
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    align-self: center !important;
}

/* Align all top-level menu text to the same baseline */
.mod-menu_dropdown-metismenu > li.level-1 > a {
    padding-top: 0.25rem !important;
    display: flex !important;
    align-items: flex-start !important;
}
  
/* Keep using Back-to-Top */
#back-top {
    display: block !important;
}

/* Guaranteed spacing for main-top position */
section.main-top,
div.main-top,
#main-top,
.container-main-top {
    padding-top: 2rem !important;
}

/* Kill Cassiopeia footer gradient via variable + direct override */
:root {
    --template-bg-dark: #f2f2f2 !important;
    /* Night sky image used in dark mode */
    --night-sky: url("https://minnesotaassembly.land/images/banners/banner.jpg");
}

/* Footer in light mode */
footer.footer,
.container-footer {
    background: none;  /* #f2f2f2 !important; */
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   PAGE WRAPPER + TOP SECTION - By: Jim Homyak
   ============================================================ */

.page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

.top-section {
    text-align: center;
    padding: 15px 0;
}

.tma-logo {
    width: 140px;
    margin-bottom: 15px;
}

.top-section h1 {
    font-size: 2rem;
    font-weight: 700;
}

.top-section h2 {
    font-size: 1.2rem;
    color: #555;
    margin-top: 5px;
}

/* ============================================================
   HEADING FIX — match Apache - By: Jim Homyak
   ============================================================ */

body h2,
body h3 {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
}

/* ============================================================
   DARK MODE TOGGLE - By: Jim Homyak
   ============================================================ */

.dark-toggle {
    margin-top: 15px;
    padding: 8px 16px;
    font-size: 0.9rem;
    border-radius: 10px;
    border: 1px solid #888;
    background: #ddd;
    cursor: pointer;
    transition: 0.2s ease;
}

.dark-toggle:hover {
    background: #ccc;
}

/* ============================================================
   BUTTON GRID + INDUSTRIAL BUTTON SYSTEM - By: Jim Homyak
   ============================================================ */

.button-grid {
    margin: 15px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

.button-grid a {
    display: block;
    padding: 15px;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s ease;
}  

/* Universal button base */
.btn-blue,
.btn-green,
.btn-red,
.btn-gold,
.btn-royal,
.btn-lavender,
.button-grid a {
    display: block;
    text-decoration: none;
    color: #fff;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s ease;
    border: 2px solid rgba(0,0,0,0.35);
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    font-size: 1.2rem;
    line-height: 1.0;
}

/* Universal hover effects */
.btn-blue:hover,
.btn-green:hover,
.btn-red:hover,
.btn-gold:hover,
.btn-royal:hover,
.btn-lavender:hover,
.button-grid a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.45);
    filter: brightness(1.10);
    color: #00ffff;
    text-shadow:
        0 0 6px #00ffff,
        0 0 12px #00ffff,
        0 0 18px #00ffff;
}

/* Color families — base gradients */
.btn-blue       { background: linear-gradient(135deg, #4682b4, #1f4f9c); }
.btn-green      { background: linear-gradient(135deg, #0b2b1f, #1f8c4a); }
.btn-red        { background: linear-gradient(135deg, #cc5500, #ff8c00); }
.btn-gold       { background: linear-gradient(135deg, #3b2a0b, #c89b2b); }
.btn-royal      { background: linear-gradient(135deg, #1a2aff, #7a00c8); }
.btn-lavender   { background: linear-gradient(135deg, #b497d6, #8a6fb8); }

/* Hover shades (non-blue families keep “darken” behavior) */
.btn-green:hover    { background: #1f8c4a; }
.btn-red:hover      { background: #ff8c00; }
.btn-gold:hover     { background: #c89b2b; }
.btn-royal:hover    { background: #7a00c8; }
.btn-lavender:hover { background: #8a6fb8; }

/* ============================================================
   FIX — Restore Industrial Blue bright hover (Apache behavior)
   ============================================================ */

.btn-blue {
    background: linear-gradient(135deg, #4682b4, #1f4f9c) !important;
}

.btn-blue:hover {
    background: #6aa7d9 !important; /* brightened SteelBlue */
    color: #00ffff !important;      /* neon cyan glow */
    text-shadow:
        0 0 6px #00ffff,
        0 0 12px #00ffff,
        0 0 18px #00ffff !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}

/* ============================================================
   FOUR PILLARS + WORKFLOW TOPICS - By: Jim Homyak
   ============================================================ */

.four-pillars-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brand-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 40px 0;
}

.brand-pillars h3 {
    margin-bottom: 10px;
}

.four-pillars ul {
    list-style: none;
}

.four-pillars li {
    padding: 6px 0;
}

.workflow-topics {
    max-width: 1200px;
    /* margin: 40px 0; */
    margin: 15px auto;
}

.workflow-grid {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.workflow-grid div {
    display: block;
    /* background: #e8e8e8; */
    background: none; 
    padding: 0px; /* was 12px  */
    border-radius: ; /* was 6px  */
    text-align: center;
}

/* ============================================================
   FOOTER - By: Jim Homyak
   ============================================================ */

.footer {
    margin-top: 40px; */
    padding: 20px 0;
    padding-left: 50px !important; */
    padding-bottom: 50px !important; */
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}

/* Footer spacing fix -     padding-left: 50px !important;*/


/* ============================================================
   SMOOTH TRANSITIONS (BASE) - By: Jim Homyak
   ============================================================ */

html, body,
.top-section,
.brand-pillars,
.workflow-topics,
.footer,
.btn-blue,
.btn-green,
.btn-red,
.btn-gold,
.btn-royal,
.btn-lavender,
.button-grid a {
    transition:
        background-color 0.75s ease,
        color 0.75s ease,
        border-color 0.75s ease,
        box-shadow 0.75s ease,
        filter 0.75s ease;
}

/* ============================================================
   DARK MODE — TEXT + BASIC COLORS
   (Automatic + manual) - By: Jim Homyak
   ============================================================ */

/* Automatic dark mode (system preference) */
@media (prefers-color-scheme: dark) {
    body {
        color: #e6e6e6 !important;
    }

    .top-section h1,
    .top-section h2 {
        color: #e6e6e6;
    }

    .brand-pillars h3,
    .brand-pillars p {
        color: #e6e6e6;
    }

    .workflow-topics h3 {
        color: #e6e6e6;
    }

    .workflow-grid div {
        background: #222;
        color: #ddd;
    }

    .footer {
        /* color: #999; */
    }
}

/* Manual dark mode toggle (class-based) */
.dark-mode body {
    color: #e6e6e6 !important;
}

.dark-mode .top-section h1,
.dark-mode .top-section h2,
.dark-mode .brand-pillars h3,
.dark-mode .brand-pillars p,
.dark-mode .workflow-topics h3 {
    color: #e6e6e6;
}

.dark-mode .workflow-grid div {
    background: #222;
    color: #ddd;
}

/* Dark mode button adjustments */
.dark-mode .dark-toggle {
    background: #333;
    color: #eee;
    border-color: #666;
}

.dark-mode .dark-toggle:hover {
    background: #444;
}

/* ============================================================
   DARK MODE — NIGHT SKY BACKGROUND (BODY) + SLOW TRANSITION
   ============================================================ */

/* Slow down background + color transitions for cinematic effect */
body {
    transition:
        background-color 3.5s ease,
        background-image 3.5s ease,
        color 1.5s ease !important;
}

/* Use night sky as body background in dark mode (system) */
@media (prefers-color-scheme: dark) {
    body {
        background: #000 var(--night-sky)
            center center / cover no-repeat fixed !important;
    }
}

/* Use night sky as body background in manual dark mode */
.dark-mode body {
    background: #000 var(--night-sky)
        center center / cover no-repeat fixed !important;
}

/* ============================================================
   DARK MODE — REMOVE OPAQUE LAYOUT BACKGROUNDS
   ============================================================ */

.dark-mode .site-grid,
.dark-mode .container-main,
.dark-mode .container-header,
.dark-mode .container-footer,
.dark-mode .grid-child,
.dark-mode .page-wrapper {
    background: transparent !important;
    transition: background-color 3.5s ease !important;
}

/* Footer floats over image in dark mode */
.dark-mode footer.footer,
.dark-mode .container-footer {
    background: transparent !important;
    /* color: #e6e6e6 !important; */
    transition: background-color 3.5s ease, color 1.5s ease !important;
}

/* ============================================================
   NIGHT SKY FADE VEIL — OPTIONAL EXTRA SMOOTHNESS
   (Layered over body for even smoother fade) - By: Jim Homyak
   ============================================================ */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 3.5s ease;
}

/* Fade veil ON in dark mode (system or manual) */
@media (prefers-color-scheme: dark) {
    body::before {
        background: var(--night-sky) center center / cover no-repeat fixed;
        opacity: 1;
    }
}

.dark-mode body::before {
    background: var(--night-sky) center center / cover no-repeat fixed;
    opacity: 1;
}

/* Fade veil OFF in light mode */
body:not(.dark-mode)::before {
    opacity: 0;
}

/* Make the header a centered flex container */
.header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}  
  
/* Branding block centered */
.header .navbar-brand {
    margin: 0 !important;
    padding: 1.5rem !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Tagline styling — correct color (#222) */
.header .navbar-brand .site-description {
    margin-top: 0.25rem;
    font-size: 1rem;
    color: #222 !important;            /* your required tagline color */
    line-height: 1.2;
}

/* Breadcrumbs spacing fix */
section.breadcrumbs,
.breadcrumbs {
    margin-bottom: 0.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* Remove excess top space above the brand logo */
.container-header .navbar-brand {
    margin-top: -20px !important;   /* trims the unwanted gap */
}

/* Optional: tighten the header container itself */
.container-header {
    padding-top: 0 !important;
}

/* Core Joomla buttons: default GREEN, hover/active BLUE */
.btn,
.button,
.btn-primary,
.button-primary {
    background-color: #1f8c4a !important;  /* New Green */
    border-color: #1f8c4a !important;
    color: #ffffff !important;
}

/* Hover, focus, active: switch to New Blue */
.btn:hover,
.btn:focus,
.btn:active,
.button:hover,
.button:focus,
.button:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.button-primary:hover,
.button-primary:focus,
.button-primary:active {
    background-color: #4682B4 !important;  /* New Blue */
    border-color: #4682B4 !important;
    color: #ffffff !important;
}

.btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
}

  /* Cancel button (btn-danger) — override Joomla/Bootstrap red */
.btn-danger {
    background-color: #0b2b1f !important;   /* your new green */
    border-color: #0b2b1f !important;
    color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--danger-dark);
    border-color: var(--danger-dark);
}
  
/* ============================================================
   END OF USER.CSS - MAY 28, 2026 - By: Jim Homyak
   ============================================================ */

h1 {
    font-family: 'Droid Sans', sans-serif !important;
}

.moduletitle,
.module-title {
    font-family: 'Droid Sans', sans-serif !important;
}
  
/* ============================================================
   END OF USER.CSS - JUNE 1, 2026 - By: Jim Homyak
   ============================================================ */

  /* Force top-level menu items to align at the top with 0.25rem margin */
#menu .metismenu > li > a {
    display: flex;
    align-items: flex-start;
    padding-top: 0.25rem !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
}

/* Prevent submenu opening from shifting parent items upward */
#menu .metismenu > li {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Normalize submenu arrow / caret alignment so it doesn't push the parent */
#menu .metismenu > li > a .mm-caret,
#menu .metismenu > li > a .arrow {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* ============================================================
   END OF USER.CSS - JUNE 4, 2026 - By: Jim Homyak
   ============================================================ */

/* ============================================================
   GLOBAL JOOMLA BUTTON SYSTEM — MATCHES JIM HOMYAK GRID
   ============================================================ */

/* UNIVERSAL BUTTON BASE */
.btn,
.button,
.btn-primary,
.btn-success,
.button-primary,
.button-success {
    display: inline-block !important;
    text-decoration: none !important;
    color: #fff !important;
    padding: 14px !important;
    text-align: center !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: 0.2s ease !important;
    border: 2px solid rgba(0,0,0,0.35) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35) !important;
    font-size: 1.2rem !important;
    line-height: 1.0 !important;
}

/* UNIVERSAL HOVER EFFECTS */
.btn:hover,
.button:hover,
.btn-primary:hover,
.btn-success:hover,
.button-primary:hover,
.button-success:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.45) !important;
    filter: brightness(1.10) !important;
    color: #00ffff !important;
    text-shadow:
        0 0 6px #00ffff,
        0 0 12px #00ffff,
        0 0 18px #00ffff !important;
}

/* BLUE FAMILY → Joomla Primary */
.btn-primary,
.button-primary {
    background: linear-gradient(135deg, #4682b4, #1f4f9c) !important;
}

.btn-primary:hover,
.button-primary:hover {
    background: #6aa7d9 !important;
}

/* GREEN FAMILY → Joomla Success */
.btn-success,
.button-success {
    background: linear-gradient(135deg, #0b2b1f, #1f8c4a) !important;
}

.btn-success:hover,
.button-success:hover {
    background: #1f8c4a !important;
}

/* Two equal columns */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;

    /* The magic: widen the container */
    /* max-width: 800px; */
    width: 100%;
    max-width: 1200px;   /* ← this is what doubles the width */
    /* width: 1000px;       /* my first idea that didn't work  */
    margin: 0 auto 0 auto;  
}

/* Make each button wider, but keep it inside its column */
.pillar-wide {
    width: 100% -important!;
    display: block;
    /* max-width: 100%;          /* ← double-width button */
    /* width: 200%;               /* fills its allowed space */
    /* justify-self: center;      /* centers inside each column */
}