/*
    File: /css/palette.css
    Purpose: Color palette, semantic color classes, and theme utilities
    Updated: 2026‑04‑30 (Cleaned + Structured)
*/

/* ============================================================= */
/* 0. PALETTE DEFAULT                                             */
/* ============================================================= */

.palette-default {
    /* alias to palette-green */
}

/* ============================================================= */
/* 1. GLOBAL UTILITY COLOR VARIABLES (PALETTE-SAFE)              */
/* ============================================================= */

:root {
    --u-text-dark:    #222;
    --u-text-muted:   #666;
    --u-text-white:   #fff;
    --u-text-blue:    #0057b8;
    --u-text-red:     #b00020;
    --u-text-yellow:  #b88600;

    --u-bg-dark:      #333;
    --u-bg-muted:     #e0e0e0;
    --u-bg-white:     #fff;
    --u-bg-blue:      #d0e4ff;
    --u-bg-red:       #ffe8e8;
    --u-bg-yellow:    #fff4c2;
    --u-bg-gold:      #f0e3c2;

    --u-ac-gold:      #ffcb2b;
}

/* ============================================================= */
/* 2. GREEN PALETTE                                               */
/* ============================================================= */

.palette-green {
    --border-dark:     #3a4a3a;
    --border-medium:   #4f6a4f;
    --header-bg:       #7fa87f;
    --hover-bg:        #9fc89f;
    --tile-bg:         #b4d1b4;
    --panel-bg:        #cfd9cf;
    --sidebar-bg:      #dde7dd;
    --content-bg:      #f5faf5;

    --accent-tint:     #f8fcf8;
    --accent-white:    #ffffff;
    --accent-muted:    #D8BD6C;
    --accent-contrast: #d8b84c;

    --text-on-dark:    #f5faf5;
    --text-muted:      #4f6a4f;
    --text-main:       #3a4a3a;
    --text-highlight:  #3c7a3c;
}

/* ============================================================= */
/* 3. BLUE PALETTE                                                */
/* ============================================================= */

.palette-blue {
    --border-dark:     #2f3f52;
    --border-medium:   #4f647a;
    --header-bg:       #7a9bbd;
    --hover-bg:        #9abbd5;
    --tile-bg:         #b8cbe4;
    --panel-bg:        #d5e0ef;
    --sidebar-bg:      #e0e8f3;
    --content-bg:      #f2f7fb;

    --accent-tint:     #f7fbff;
    --accent-white:    #ffffff;
    --accent-muted:    #d8c27a;
    --accent-contrast: #8a6a1a;

    --text-on-dark:    #f2f7fb;
    --text-muted:      #4f647a;
    --text-main:       #2f3f52;
    --text-highlight:  #1f5fa8;
}

/* ============================================================= */
/* 4. TAN PALETTE                                                 */
/* ============================================================= */

.palette-tan {
    --border-dark:     #5a4732;
    --border-medium:   #7c6447;
    --header-bg:       #b79c74;
    --hover-bg:        #d1b893;
    --tile-bg:         #e0d5b6;
    --panel-bg:        #e8dfcf;
    --sidebar-bg:      #eee7dd;
    --content-bg:      #f7f2ea;

    --accent-tint:     #fdf9f3;
    --accent-white:    #ffffff;
    --accent-muted:    #9bb0c2;
    --accent-contrast: #3c5a72;

    --text-on-dark:    #f7f2ea;
    --text-muted:      #7c6447;
    --text-main:       #5a4732;
    --text-highlight:  #a05f2c;
}

/* ============================================================= */
/* 5. GREY PALETTE                                                */
/* ============================================================= */

.palette-grey {
    --border-dark:     #2f2f2f;
    --border-medium:   #6a6a6a;
    --header-bg:       #4a4a4a;
    --hover-bg:        #7a7a7a;
    --tile-bg:         #c7c7c7;
    --panel-bg:        #dcdcdc;
    --sidebar-bg:      #e4e4e4;
    --content-bg:      #f7f7f7;

    --accent-tint:     #fafafa;
    --accent-white:    #ffffff;
    --accent-muted:    #d8c27a;
    --accent-contrast: #8a6a1a;

    --text-on-dark:    #f7f7f7;
    --text-muted:      #6a6a6a;
    --text-main:       #2f2f2f;
    --text-highlight:  #4a4a4a;
}

/* ============================================================= */
/* 6. STEEL PALETTE                                               */
/* ============================================================= */

.palette-steel {
    --border-dark:      #2f3a45;
    --border-medium:    #4a5a68;
    --header-bg:        #6f8798;
    --hover-bg:         #8fa5b5;
    --tile-bg:          #b2c2cb;
    --panel-bg:         #d5dde2;
    --sidebar-bg:       #dde5e8;
    --content-bg:       #f7f9fa;

    --accent-tint:      #f2f6f8;
    --accent-white:     #ffffff;
    --accent-muted:     #d8c27a;
    --accent-contrast:  #8a6a1a;

    --text-on-dark:     #f7f9fa;
    --text-muted:       #4a5a68;
    --text-main:        #2f3a45;
    --text-highlight:   #3a5f7a;
}

/* ============================================================= */
/* 7. RED PALETTE                                                 */
/* ============================================================= */

.palette-red {
    --border-dark:      #5a0e17;
    --border-medium:    #7a1a24;
    --header-bg:        #a63a45;
    --hover-bg:         #c45a63;
    --tile-bg:          #e0b6b6;
    --panel-bg:         #e8cfcf;
    --sidebar-bg:       #eedddd;
    --content-bg:       #f9ecec;

    --accent-tint:      #fdf7f7;
    --accent-white:     #ffffff;
    --accent-muted:     #d8c27a;
    --accent-contrast:  #8a6a1a;

    --text-on-dark:     #f9ecec;
    --text-muted:       #7a1a24;
    --text-main:        #5a0e17;
    --text-highlight:   #b00020;
}

/* ============================================================= */
/* 8. GOLD PALETTE                                                */
/* ============================================================= */

.palette-gold {
    --border-dark:      #6a5310;
    --border-medium:    #8a6a1a;
    --header-bg:        #b89a3c;
    --hover-bg:         #d8b84c;
    --tile-bg:          #eacb96;
    --panel-bg:         #f0e3c2;
    --sidebar-bg:       #f3ead4;
    --content-bg:       #faf6e6;

    --accent-tint:      #fdfaf0;
    --accent-white:     #ffffff;
    --accent-muted:     #9bb0c2;
    --accent-contrast:  #3c5a72;

    --text-on-dark:     #faf6e6;
    --text-muted:       #8a6a1a;
    --text-main:        #6a5310;
    --text-highlight:   #b85c00;
}

/* ============================================================= */
/* 9. PALETTE-BASED BACKGROUND UTILITIES                         */
/* ============================================================= */

.bg-dark      { background-color: var(--border-dark); }
.bg-border    { background-color: var(--border-medium); }
.bg-header    { background-color: var(--header-bg); }
.bg-hover     { background-color: var(--hover-bg); }
.bg-tile      { background-color: var(--tile-bg); }
.bg-panel     { background-color: var(--panel-bg); }
.bg-sidebar   { background-color: var(--sidebar-bg); }
.bg-content   { background-color: var(--content-bg); }
.bg-tint      { background-color: var(--accent-tint-bg); }
.bg-white     { background-color: var(--accent-white-bg); }
.bg-contrast  { background-color: var(--accent-contrast-bg); }

/* ============================================================= */
/* END OF FILE                                                   */
/* ============================================================= */
/*
    File: /css/sidebar.css
    Purpose: Component‑level styling for sidebar boxes
    Description:
        - Structure, spacing, and typography for sidebar boxes
        - No colors; palette.css supplies colors
        - Palette classes (e.g., .palette-tan) may be applied per-box
    Updated: 2026‑04‑30 (Cleaned + Structured)
*/

/* ============================================================= */
/* 0. GLOBAL SELECTORS (shared utilities)                         */
/* ============================================================= */

.sidebar-list,
.upcoming-list {
    list-style: none;
}

.sidebar-list li,
.upcoming-list li {
    margin-bottom: 8px;
}

.sidebar-list a,
.upcoming-list a {
    color: var(--text-main);
    text-decoration: none;
}

.sidebar-list a:hover,
.upcoming-list a:hover {
    text-decoration: underline;
}

.sidebar-divider,
.upcoming-divider {
    display: block;
    width: fit-content;
    border-bottom: 2px solid var(--border-light);
    margin: 0.5rem auto 1rem auto;
    padding: 0;
    line-height: 0;
}

.sidebar-divider-left,
.upcoming-divider-left {
    margin-left: 0;
    margin-right: 0;
}

.sidebar-info-line,
.upcoming-info-line {
    font-size: 0.9rem;
    background: var(--accent-tint);
    color: var(--text-muted);
    margin: 8px;
}

/* ============================================================= */
/* 1. SIDEBAR SUBSYSTEM                                           */
/* ============================================================= */

/* CONTAINER */
#sidebar {
    background: var(--sidebar-bg);
    padding: 20px;
    border-left: 1px solid var(--border-light);
}

/* HEADERS */
.sidebar-header {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--accent-contrast);
    margin-bottom: 10px;
    text-align: left;
}

/* LINKS BLOCK */
.sidebar-links {
    margin-top: 10px;
}

.sidebar-links .link-row {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
}

.sidebar-links .link-row:last-child {
    border-bottom: none;
}

.sidebar-links a {
    color: var(--text-main);
    text-decoration: none;
}

.sidebar-links a:hover {
    text-decoration: underline;
}

/* IMAGE BOXES */
.sidebar-box {
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 1rem;
    background: var(--sidebar-bg);
    line-height: 1rem;
}

.sidebar-box-img {
    width: 100%;
    margin-bottom: 10px;
}

.sidebar-box-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* CONTENT */
.sidebar-box-content h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
    color: var(--text-main);
}

.sidebar-box-content p {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: 10px;
}

/* FOOTER LINKS */
.sidebar-box-footer {
    margin-top: 10px;
}

.sidebar-footer-link {
    font-size: 0.9rem;
    color: var(--accent);
    text-decoration: none;
}

.sidebar-footer-link:hover {
    text-decoration: underline;
}

/* ============================================================= */
/* 2. UPCOMING SUBSYSTEM                                          */
/* ============================================================= */

/*
    File: /tbbcc/css/upcoming.css
    Purpose: Component‑level styling for upcoming content
    Updated: 2026‑04‑30 (Cleaned + Structured)
*/

/* CONTAINER */
#upcoming {
    background: var(--sidebar-bg);
    padding: 20px;
    border-left: 1px solid var(--border-light);
}

/* HEADERS */
.upcoming-header {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--accent-contrast);
    margin-bottom: 10px;
    text-align: left;
}

/* LINKS BLOCK */
.upcoming-links {
    margin-top: 10px;
}

.upcoming-links .link-row {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
}

.upcoming-links .link-row:last-child {
    border-bottom: none;
}

.upcoming-links a {
    color: var(--text-main);
    text-decoration: none;
}

.upcoming-links a:hover {
    text-decoration: underline;
}

/* IMAGE BOXES */
.upcoming-box {
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 1rem;
    background: var(--sidebar-bg);
    line-height: 1rem;
}

.upcoming-box-img {
    width: 100%;
    margin-bottom: 10px;
}

.upcoming-box-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* CONTENT */
.upcoming-box-content h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
    color: var(--text-main);
}

.upcoming-box-content p {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: 10px;
}

/* FOOTER LINKS */
.upcoming-box-footer {
    margin-top: 10px;
}

.upcoming-footer-link {
    font-size: 0.9rem;
    color: var(--accent);
    text-decoration: none;
}

.upcoming-footer-link:hover {
    text-decoration: underline;
}

/* ============================================================= */
/* END OF FILE                                                   */
/* ============================================================= */
/*
    File: /css/layout.css
    Purpose: Global structure + optional column presets
    Updated: 2026‑04‑30 (Cleaned + Structured)
*/

/* ============================================================= */
/* 0. GLOBAL RESET                                                */
/* ============================================================= */

html {
    height: 100%;
    background: var(--sidebar-bg);
    color: var(--text-main);
    font-family: Arial, sans-serif;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

/* ============================================================= */
/* 1. OUTER WRAPPER — 1500px CENTERED SHELL                      */
/* ============================================================= */

#wrapper {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ============================================================= */
/* 2. PAGE SHELL (global width container)                        */
/* ============================================================= */

.page-shell {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: fit-content;
}

:root {
    --content-max-width: 1250px;
    --sidebar-width: 250px;
}

/* ============================================================= */
/* 3. GLOBAL COLUMN PRESETS + GRID CHILDREN                      */
/* ============================================================= */

.page-grid {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
    align-items: start;
    background: var(--sidebar-bg);
    overflow-x: visible;
}

.page-grid > aside {
    grid-column: 1;
    padding: 2px 8px 2px 2px;
    box-sizing: border-box;
}

.page-grid > main {
    grid-column: 2;
    padding: 20px;
    box-sizing: border-box;
    min-height: 100%;
}

.page-grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0 1rem;
    max-width: 1500px;
    margin: 0 auto;
}

.page-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 0 1rem;
    max-width: 1500px;
    margin: 0 auto;
}

.page-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    padding: 0 1rem;
    max-width: 1500px;
    margin: 0 auto;
}

/* ============================================================= */
/* 4. MAIN CONTENT AREA                                          */
/* ============================================================= */

.page-content {
    background: var(--sidebar-bg);
    padding: 20px;
}

/* ============================================================= */
/* END OF FILE                                                   */
/* ============================================================= */
/*
    File: /css/header.css
    Purpose: Header layout, logo column, site name, page name, and nav grid (DESKTOP ONLY)
    Updated: 2026‑04‑30 (Cleaned + Structured)
*/

/* ============================================================= */
/* 0. GLOBAL / FIXES (dummy selectors stay here)                 */
/* ============================================================= */

/* No dummy selectors in this file */

/* ============================================================= */
/* 1. GOOD SELECTORS — HEADER STRUCTURE (DESKTOP)                */
/* ============================================================= */

.desktop-header {
    background: none;
}

.site-header {
    width: 100%;
    background: linear-gradient(
        to bottom,
        var(--header-bg),
        var(--sidebar-bg)
    );
}

.header-inner {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto auto;
    max-width: 1500px;
    margin: 0 auto;
    color: var(--text-on-dark);
    background: linear-gradient(
        to bottom,
        var(--header-bg),
        var(--sidebar-bg)
    );
}

/* ============================================================= */
/* 2. GOOD SELECTORS — LOGO COLUMN                               */
/* ============================================================= */

.logo-column {
    grid-row: 1 / span 2;
    padding: 15px;
}

.logo-column img {
    width: 225px;
    height: auto;
    display: block;
    filter: drop-shadow(6px 6px 8px rgba(0,0,0,0.35));
}

/* ============================================================= */
/* 3. GOOD SELECTORS — TOP BAND (SITE NAME + NAV)                */
/* ============================================================= */

.header-top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 20px;
    background: none;
}

.site-name {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 4px;
    text-shadow: 13px 13px 16px rgba(0,0,0,0.65);
}

/* ============================================================= */
/* 4. GOOD SELECTORS — NAV GRID (DESKTOP TILE NAV)               */
/* ============================================================= */

.desktop-nav-wrap {
    position: relative;
    overflow: visible;
}

.desktop-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: relative;
    overflow: visible;
    z-index: 10;
    font-size: 1rem;
    line-height: 1.25;
    gap: 8px;
}

.desktop-nav-grid a:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.35);
    background-color: var(--header-bg);
    color: var(--text-on-dark);
}

#desktop-more-trigger {
    cursor: pointer;
}

#desktop-more-trigger * {
    pointer-events: none;
}

#desktop-more-dropdown {
    position: absolute;
    top: calc(100% - 2px);
    left: -12px;
    width: 100%;
    background: transparent;
    padding: 0;
    z-index: 99999;
    display: none;
    font-size: 1rem;
    line-height: 1.25;
}

#desktop-more-dropdown.open {
    display: block;
}

.desktop-more-tile:hover {
    background: var(--header-bg);
    color: var(--text-on-dark);
}

#desktop-more-dropdown .ui-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

#desktop-more-dropdown .tile {
    width: var(--desktop-tile-width);
    height: 48px;
}

#desktop-more-dropdown .tile:hover {
    background: var(--header-bg);
    color: var(--text-on-dark);
}

.desktop-more-placeholder {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    pointer-events: none;
}

.header-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: contents;
}

.header-nav li {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-nav li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: 42px;
    padding: 6px 8px;
    width: 100%;

    background-color: var(--sidebar-bg);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;

    white-space: normal;
    overflow: visible;
    text-overflow: unset;

    position: relative;
    z-index: 10;
    box-shadow: 10px 10px 16px rgba(0,0,0,0.35);

    line-height: 1.2;
    text-align: center;
}

.header-nav li a:hover {
    background-color: var(--border-medium);
    color: var(--text-on-dark);
    box-shadow: 10px 10px 16px rgba(0,0,0,0.35);
}

.header-nav-updated {
    display: block;
    font-size: 0.75rem;
    color: var(--accent-color, #c00);
    margin-top: 2px;
    line-height: 1.2;
    font-weight: 600;
}

/* ============================================================= */
/* 5. GOOD SELECTORS — BOTTOM BAND (PAGE NAME)                   */
/* ============================================================= */

.header-bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 10px 20px;
}

.page-name {
    font-size: 2rem;
    font-weight: 500;
    text-shadow: 10px 10px 16px rgba(0,0,0,0.95);
    text-align: center;
}

/* ============================================================= */
/* 6. GOOD SELECTORS — SOCIAL ICONS                              */
/* ============================================================= */

.header-social {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    margin-top: 8px;
}

.header-social img {
    height: 50px;
    width: auto;
    display: block;
    border-radius: 4px;
}

.header-social a {
    display: inline-flex;
    align-items: center;
    filter: drop-shadow(6px 6px 8px rgba(0,0,0,0.35));
}

/* ============================================================= */
/* END OF FILE                                                   */
/* ============================================================= */
/*
    File: /css/typography.css
    Purpose: Base text system — fonts, headings, structural sizes
    Updated: 2026‑04‑30 (Canonical Separation)
*/

/* ============================================================= */
/* 0. BASE TEXT SYSTEM                                            */
/* ============================================================= */

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

h1, h2, h3 {
    font-weight: 600;
    margin-bottom: 10px;
}

p {
    margin-bottom: 12px;
}

/* ============================================================= */
/* 1. SEMANTIC HEADING SIZES (non‑utility)                        */
/* ============================================================= */

.text-h1 { font-size: 2.0rem; }   /* ~32px */
.text-h2 { font-size: 1.75rem; }  /* ~26px */
.text-h3 { font-size: 1.50rem; }  /* ~22px */

/* ============================================================= */
/* 2. TEXT SIZE UTILITIES (canonical scale)                       */
/* ============================================================= */

.text-lx   { font-size: 1.375rem; }
.text-xl   { font-size: 1.25rem; }
.text-lg   { font-size: 1.125rem; }
.text-base { font-size: 1rem; }
.text-sm   { font-size: 0.9rem; }
.text-xs   { font-size: 0.8rem; }
.text-xx   { font-size: 0.75rem; }

/* ============================================================= */
/* 3. NUMERIC SIZE ALIASES                                        */
/* ============================================================= */

.text-150 { font-size: 1.5rem; }
.text-137 { font-size: 1.375rem; }
.text-125 { font-size: 1.25rem; }
.text-112 { font-size: 1.125rem; }
.text-100 { font-size: 1rem; }
.text-90  { font-size: 0.9rem; }
.text-80  { font-size: 0.8rem; }
.text-75  { font-size: 0.75rem; }
.text-70  { font-size: 0.70rem; }
.text-65  { font-size: 0.65rem; }

/* ============================================================= */
/* END OF FILE                                                    */
/* ============================================================= */
/*
    File: /css/editorial.css
    Purpose: Editorial content elements — titles, accents, typography, content units
    Updated: 2026‑04‑30 (Cleaned + Structured)
*/

/* ============================================================= */
/* 0. GLOBAL / FIXES (dummy selectors stay here)                 */
/* ============================================================= */

/* No dummy selectors in this file */

/* ============================================================= */
/* 1. GOOD SELECTORS — HEADER / FOOTER BACKGROUNDS               */
/* ============================================================= */

.site-header .header-inner {
    background: linear-gradient(
        to bottom,
        var(--header-bg) 0%,
        var(--sidebar-bg) 100%
    );
}

.site-footer .footer-inner {
    background: linear-gradient(
        to bottom,
        var(--sidebar-bg) 0%,
        var(--header-bg) 100%
    );
}

/* ============================================================= */
/* 2. GOOD SELECTORS — GLOBAL TYPOGRAPHY (HEADINGS)              */
/* ============================================================= */

h1 {
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-dark);
}

h2 {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--text-dark);
}

h3 {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-dark);
}

/* ============================================================= */
/* 3. GOOD SELECTORS — GLOBAL TITLE BLOCKS + ACCENTS             */
/* ============================================================= */

.global-title-wrap {
    display: block;
    width: max-content;
    padding-top: 0;
    margin-bottom: 0.75rem;
    margin-top: 0;
}

.global-title {
    width: 100%;
    text-align: center;
    margin: 0 0 0.25rem 0;
    display: block !important;
    text-shadow: 7px 7px 10px rgba(0,0,0,0.65);
}

.global-subtitle {
    width: 100%;
    text-align: center;
    margin: 0 0 0.25rem 0;
}

.global-group-title {
    padding: 6px 12px 4px 12px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-muted);
    border-radius: 8px 8px 0 0;
    pointer-events: auto;
}

/* ============================================================= */
/* 4. GOOD SELECTORS — ACCENT IDENTITY + GEOMETRY VARIANTS       */
/* ============================================================= */

.global-accent {
    display: block;
    height: 5px;
    background: var(--u-ac-gold);
    border-radius: 2px;
    border-bottom: 1px solid var(--border-muted);
    margin-top: 0;
}

.accent-tight {
    width: 100%;
    margin: 0;
}

.accent-extended {
    width: calc(100% + 1.5rem);
    margin-left: -0.5rem;
    margin-right: -1rem;
}

.accent-full {
    width: 100%;
    margin: 0;
}

.accent-thin {
    height: 3px;
}

.accent-shadow {
    box-shadow: 6px 6px 8px rgba(0,0,0,0.35);
}

/* ============================================================= */
/* 5. GOOD SELECTORS — LINKS (EDITORIAL COLOR + BEHAVIOR)        */
/* ============================================================= */

a {
    color: #004c6d;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.tile {
    aspect-ratio: 2.5 / 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 0.5rem;
    line-height: 1.25;

    background: var(--tile-bg);
    border: 1px solid var(--header-bg);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);

    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);

    box-sizing: border-box;
}

/* ============================================================= */
/* 6. GOOD SELECTORS — GLOBAL EDITORIAL WRAPPER                  */
/* ============================================================= */

.page-content {
    font-size: 1.125rem;
    line-height: 1.45;
    font-weight: 400;
    color: var(--text-main);
}

.page-content p {
    margin-bottom: 0.85rem;
}

.page-sections {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ============================================================= */
/* 7. GOOD SELECTORS — PANEL OUTER WRAPPER                       */
/* ============================================================= */

.panel {
    width: 100%;
    margin: 0;
    position: relative;
}

/* ============================================================= */
/* 8. GOOD SELECTORS — PANEL INNER WRAPPER                       */
/* ============================================================= */

.panel-content {
    padding: 1rem 1.25rem;
    position: relative;
}

.panel-photo {
    border-radius: 4px;
    max-width: 100%;
    height: auto;
}

.panel-photo.left {
    float: left;
    margin: 0 1rem 1rem 0;
}

.panel-photo.right {
    float: right;
    margin: 0 0 1rem 1rem;
}

/* ============================================================= */
/* END OF FILE                                                   */
/* ============================================================= */
/*
    File: /css/ui.css
    Purpose: Global UI stylesheet
    Contents: Hover engine, detail engine, shared inline UI components
    Updated: 2026‑04‑30 (Canonical Cleanup)
*/

/* ============================================================= */
/* 1. UNIVERSAL UI ENGINE — HOVER + CLICKCARD                    */
/* ============================================================= */

.ui-anchor {
    overflow: visible;
    position: relative;
    z-index: 9999;
    isolation: isolate;
}

.ui-trigger {
    position: relative;
    cursor: pointer;
}

/* HOVER CARD */
.ui-hover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;

    background: var(--border-medium);
    color: var(--text-on-dark);
    border: 1px solid var(--border-med);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.3;
}

.ui-trigger:hover > .ui-hover {
    display: block;
}

/* CLICKCARD */
.ui-detail {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;

    background: var(--content-bg);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    padding: 1rem;
    width: 100%;
    max-width: 420px;
}

.ui-detail.active {
    display: block;
}

.ui-detail-content {
    position: relative;
}

/* ============================================================= */
/* 2. INLINE CLOSE BUTTON (for clickcards + inline UI)           */
/* ============================================================= */

.ui-close {
    position: absolute;
    top: 6px;
    right: 6px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    font-weight: 700;
    line-height: 20px;

    color: var(--u-text-red);
    background: transparent;

    border: 2px solid var(--u-text-red);
    border-radius: 6px;

    cursor: pointer;
    user-select: none;

    opacity: 0.9;
    transition: opacity 0.15s ease;
    z-index: 20;
}

.ui-close:hover {
    opacity: 1;
}

/* ============================================================= */
/* 3. GLOBAL TRANSITIONS                                         */
/* ============================================================= */

.ui-img-interactive {
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.ui-img-interactive:hover {
    opacity: 1;
}

.ui-logos img {
    transition: opacity 0.2s ease;
}

/* ============================================================
   4. GLOBAL NOTICE BAR
   Appears on all pages (desktop + mobile)
   ============================================================ */
.site-notice {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #2e8b57;
    color: #fff;
    padding: 2px 12px;
    text-align: center;
    font-size: 0.9rem;
    z-index: 9999;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.site-notice a {
    color: #ffd700;
    text-decoration: underline;
}

/* ============================================================= */
/* END OF FILE                                                   */
/* ============================================================= */
/*
    File: /css/slideshow.css
    Purpose: Unified slideshow / gallery-grid / image-grid / single
    Architecture: Works with slideshow.php + slideshow.js
    Updated: 2026‑04‑30 (Cleaned + Structured)
*/

/* ============================================================ */
/* 0. CORE CONTAINER (base)                                      */
/* ============================================================ */

.slideshow-container {
    width: 100%;
    /* Layout + spacing defined by mode classes */
}

/* ============================================================ */
/* 1. MODE: SLIDESHOW (dynamic NxM grid with rotation)           */
/* ============================================================ */

.slideshow-container.slideshow {
    display: grid;
    gap: 12px;
}

.slideshow-container.slideshow .slideshow-frame {
    width: 100%;
    aspect-ratio: auto;
}

/* ============================================================ */
/* 2. MODE: GALLERY-GRID (static 3×2 or Nx3)                     */
/* ============================================================ */

.slideshow-container.gallery-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
}

.slideshow-container.gallery-grid .slideshow-frame {
    width: 100%;
    aspect-ratio: 3 / 2;
}

/* ============================================================ */
/* 3. MODE: IMAGE-GRID (2-column utility grid)                   */
/* ============================================================ */

.slideshow-container.image-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
}

.slideshow-container.image-grid .slideshow-frame {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.slideshow-container.image-grid img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ============================================================ */
/* 4. FRAME GEOMETRY (shared across all modes)                   */
/* ============================================================ */

.slideshow-frame {
    width: 100%;
    overflow: hidden;
    background: transparent;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================ */
/* 5. IMAGE SCALING (unified behavior)                           */
/* ============================================================ */

.slideshow-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: pointer;
}

/* ============================================================ */
/* 6. SINGLE IMAGE MODE                                          */
/* ============================================================ */

.mode-single img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================ */
/* 7. UNIVERSAL IMAGE OVERLAY                                    */
/* ============================================================ */

#image-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
}

#image-overlay-img {
    max-width: 90vw;
    max-height: 90vh;
}

.image-overlay-close {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    color: #fff;
    font-size: 24px;
}

#quick-enlarge-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

#quick-enlarge-overlay.open {
    display: flex;
}

#quick-enlarge-img {
    max-width: 90%;
    max-height: 90%;
}

#quick-enlarge-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
}

/* ============================================================ */
/* 8. OPTIONAL NOTE TEXT                                         */
/* ============================================================ */

.slideshow-note {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

/* ========================================================== */
/* END OF FILE                                               */
/* ========================================================== */
/*
    File: /css/calendar.css
    Purpose: Calendar panel layout + editorial structure
    Updated: 2026-03-30 (Unified Panel Architecture)
*/

/* ============================================================= */
/* 0. GLOBAL / FIXES (dummy selectors stay here)                 */
/* ============================================================= */

.calendar-dummy {
    margin: 0;
    padding: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
}

/* ============================================================= */
/* 1. PAGE-CALENDAR GRID + LAYOUT                                */
/* ============================================================= */

.calendar-grid3 {
    display: grid;
    grid-template-columns: .85fr 1.40fr .75fr;
    gap: 1.25rem !important;
    position: relative;
}

.calendar-left   { grid-column: 1; }
.calendar-middle { grid-column: 2; }

.calendar-right {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
}

/* ============================================================= */
/* 2. CALENDAR PANEL WRAPPER                                     */
/* ============================================================= */

.calendar-panel {
    position: relative;
    padding-bottom: 2rem;
}

.calendar-events-panel {
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    background: var(--panel-bg);
    padding: 2rem 1rem 0 1rem;
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* ============================================================= */
/* 3. EVENT ROW STRUCTURE                                        */
/* ============================================================= */

.calendar-box {
    background: var(--tile-bg);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    margin-bottom: 1rem;
    position: relative;
    min-height: 80px;
    overflow: visible !important;
    box-sizing: border-box;
    max-width: 100%;
}

.calendar-row {
    cursor: pointer;
    padding: 12px 12px 6px 16px;
    border-radius: 6px;
    margin-bottom: 10px;
    position: relative;
    display: block;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    width: 100%;
    /* background: var(--tile-bg); */
}

.calendar-info {
    display: block;
}

.calendar-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
}

.cal-event-date {
    font-weight: 700;
}

.event-sep {
    opacity: 0.85;
}

.event-name {
    font-weight: 700;
}

.cal-event-info-line {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.1rem;
    opacity: 0.85;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--content-bg);
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================= */
/* 4. HOVER ENGINE                                               */
/* ============================================================= */

.cal-hover-trigger {
    position: relative;
    display: block;
    width: 100%;
    cursor: default;
}

.cal-hover-card {
    position: absolute;
    z-index: 10000;
    display: none;
    pointer-events: auto;
    visibility: hidden;
    background: var(--header-bg);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 8px 8px 16px rgba(0,0,0,0.25);
    margin-top: 16px;
}

.cal-hover-card .detail-trigger {
    position: relative;
    z-index: 20002;
    pointer-events: auto;
    cursor: pointer;
}   /* nested selector — no standalone block */

.cal-hover-inner {
    background: var(--content-bg) !important;
    color: var(--text-main);
    padding: 4px;
    border-radius: 4px;
    width: 100%;          /* ← THIS is the missing piece */
    box-sizing: border-box;
}


.cal-hover-card .cal-hover-afford,
.cal-hover-card .cal-click-hint,
.cal-hover-card .cal-hover-line a {
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    z-index: 20001;
}   /* nested selector — no standalone block */

.cal-hover-line {
    background: var(--content-bg);
    padding: 2px 4px;
    margin-top: 3px;
    border-radius: 4px;
    font-size: 16px;
    display: block;
    width: 100%;
    font-weight: 600;
    line-height: 1.1rem;
    color: var(--text-main);
}

.cal-hover-afford {
    margin-top: 4px;
    font-style: italic;
    opacity: 0.85;
    color: var(--text-muted);
    cursor: pointer;
    pointer-events: auto;
}

.cal-hover-through {
    margin-left: 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    font-style: italic;
}

.cal-click-hint {
    cursor: pointer;
    text-decoration: underline;
    pointer-events: auto !important;
}

/* ============================================================= */
/* 5. DETAIL ENGINE                                              */
/* ============================================================= */

.cal-detail-card {
    z-index: 30000 !important;
    position: absolute !important;
    overflow: visible;
    visibility: hidden;
    opacity: 0;
    display: block;
    background: var(--tile-bg);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    box-shadow: 8px 8px 12px rgba(0,0,0,0.40);
    width: calc(100% - 16px);
    padding: 4px 12px 12px 12px;
    top: 100%;
    left: 0;
}

.cal-detail-card-content {
    background: var(--content-bg);
    color: var(--text-main);
    border-radius: 8px;
    padding: 8px;
    margin-top: 8px;
}

.cal-detail-card-content,
.cal-detail-card-content * {
    font-size: 1rem !important;
    line-height: 1.1rem;
    font-weight: 600;
}

.cal-detail-card .cal-detail-close {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 28px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    color: var(--u-text-red);
    cursor: pointer;
    user-select: none;
    background: white;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: opacity 0.15s ease;
    z-index: 10;
    border: 1px solid var(--u-text-red);
    border-radius: 8px;
}

.cal-detail-card .cal-detail-close:hover {
    opacity: 1;
}

/* ============================================================= */
/* DYNAMIC SELECTORS (JS-ONLY / STATE)                           */
/* ============================================================= */

.cal-hover-card.active {
    display: block;
    visibility: visible;
}

.cal-hover-card.flip-up {
    top: auto !important;
    bottom: 100% !important;
    margin-bottom: 6px;
}

.cal-detail-card.cal-detail-card-open {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================================= */
/* END OF FILE                                      */            
/* ============================================================= */


/*
    File: /css/recurring.css
    Purpose: Recurring panel layout + editorial structure
    Updated: 2026‑04‑30 (Cleaned + Structured)
*/

/* ============================================================= */
/* 0. DUMMY SELECTOR (forces CSS load order, same as calendar)   */
/* ============================================================= */

.recurring-dummy {
    background: yellow !important; /* ghost selector — do not remove */
}

/* ============================================================= */
/* 1. PANEL WRAPPERS                                             */
/* ============================================================= */

.recurring-events-panel {
    display: block;
    background: var(--panel-bg);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 2rem 1rem 0 1rem;
    position: relative;
    overflow: visible !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.recurring-panel {
    display: flow-root;
    position: relative;
    overflow: visible !important;
    padding: 0.25rem 0 0.5rem 0;
}

.recurring-anchor {
    position: relative;
    margin-bottom: 1rem;
}

.recurring-anchor:last-child {
    margin-bottom: 0;
}

/* ============================================================= */
/* 2. SECTION BOXES                                              */
/* ============================================================= */

.recurring-section {
    background: var(--tile-bg);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 12px 12px 0 12px;
    margin-bottom: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.recurring-section .global-header {
    margin-bottom: 0.5rem;
}

/* ============================================================= */
/* 3. ROW STRUCTURE (trigger row + name)                         */
/* ============================================================= */

.recurring-row {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    line-height: 1.1;
    width: 100%;
    box-sizing: border-box;
}

.recurring-item {
    position: relative;
    margin-bottom: 8px;
    overflow: visible !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.rec-hover-trigger {
    position: relative !important;
    z-index: 10;
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: var(--content-bg);
    overflow: visible !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.rec-hover-trigger.rec-hover-disabled,
.rec-hover-disabled {
    pointer-events: none !important;
}

.recurring-name {
    background: var(--content-bg);
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1rem;
}

/* ============================================================= */
/* 4. HOVER CARD                                                 */
/* ============================================================= */

.rec-hover-zone {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.rec-hover-card {
    position: absolute;
    z-index: 2000;

    top: calc(100% - 6px);
    left: 20px;
    right: auto;
    margin-top: 0;

    display: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: auto;

    padding: 10px 12px;
    background: var(--header-bg);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    font-size: 0.90rem;
    line-height: 1.25;

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.rec-hover-card.rec-hover-visible {
    opacity: 1;
    display: block;
    pointer-events: auto;
}

.rec-hover-line {
    background: var(--content-bg);
    color: var(--text-muted);
    padding: 2px 4px;
    margin-top: 3px;
    border-radius: 0;
    font-size: 0.90rem;
    pointer-events: auto;
    position: relative;
}

.rec-hover-line:first-child {
    margin-top: 0;
    border-radius: 6px 6px 0 0;
}

.rec-hover-line + .rec-hover-line {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

.rec-click-trigger {
    text-decoration: underline;
    background: var(--content-bg) !important;
    color: var(--text-muted);
    padding: 2px 4px;
    cursor: pointer;
}

.rec-hover-zone::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
}

/* ============================================================= */
/* 5. DETAIL CARD                                                */
/* ============================================================= */

.rec-detail-card {
    position: absolute;
    z-index: 20000;

    margin-top: 32px;
    margin-left: -23px;
    top: auto;
    left: auto;
    right: 0;

    background: var(--header-bg);
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);

    display: block;
    opacity: 0;
    visibility: hidden;
}

.rec-detail-card.rec-detail-visible {
    opacity: 1;
    visibility: visible;
}

.rec-detail-content {
    background: var(--content-bg);
    padding: 12px 14px;
    border-radius: 6px;
    font-size: var(--text-xs);
    line-height: 1.45;
}

.rec-detail-card .rec-detail-close {
    position: absolute;
    top: 0;
    right: 0;

    font-size: 28px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    color: var(--u-text-red);
    cursor: pointer;
    user-select: none;
    background: white;

    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0.9;
    transition: opacity 0.15s ease;
    z-index: 10;
    border: 1px solid var(--u-text-red);
    border-radius: 8px;
}

.rec-detail-close:hover {
    opacity: 1;
}

.rec-detail-content p {
    margin: 0 0 8px 0;
}

/* ============================================================= */
/* 6. OVERRIDES (keep hover behavior intact)                     */
/* ============================================================= */

.calendar-left,
.recurring-events,
.recurring-panel {
    overflow: visible !important;
}

/* ============================================================= */
/* END OF FILE                                                   */
/* ============================================================= */


/*
    File: /css/pages.css
    Purpose: Stylesheet for stand‑alone panels
    Updated: 2026‑04‑30 (Cleaned + Structured)
*/

/* ============================================================= */
/* 0. GLOBAL SELECTORS (apply to multiple panels)                 */
/* ============================================================= */

/* Shared grid utilities */
.contacts-grid-2 {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0.75rem 1.25rem;
}

.contact-role {
    font-weight: 600;
}

.contact-info a {
    color: var(--accent-blue);
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

.contacts-updated {
    margin-top: 15px;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

/* ============================================================= */
/* 1. CONTACTS PANEL                                              */
/* ============================================================= */

.page-contacts .contacts-left   { grid-column: 1; }
.page-contacts .contacts-middle { grid-column: 2; }
.page-contacts .contacts-right  { grid-column: 3; }

.page-contacts .contacts-grid3 {
    display: grid;
    grid-template-columns: .70fr 1.15fr 1.15fr;
    gap: 1.25rem;
}

.contacts-panel {
    max-width: 600px;
    padding: 20px 60px;
    background: var(--content-bg);
    border-radius: 12px;
    box-shadow: 10px 10px 16px rgba(0,0,0,0.35);
    margin-bottom: 40px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.contacts-intro {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

/* ============================================================= */
/* 2. ADDRESS PANEL                                               */
/* ============================================================= */

.address-panel {
    max-width: 480px;
    margin-top: 40px;
    padding: 20px;
    background: var(--content-bg);
    border-radius: 12px;
    box-shadow: 10px 10px 16px rgba(0,0,0,0.35);
}

.address-panel-body {
    margin-top: 20px;
    text-align: center;
}

.address-block .address-line {
    font-size: 1.1rem;
    margin: 4px 0;
    color: var(--text-main);
    line-height: 1.1rem;
}

.address-updated {
    margin-top: 15px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============================================================= */
/* 3. MEMBERSHIP PANEL                                            */
/* ============================================================= */

.page-membership .membership-left   { grid-column: 1; padding: 5px; }
.page-membership .membership-middle { grid-column: 2; padding: 5px; }
.page-membership .membership-right  { grid-column: 3; padding: 5px; }

.page-membership .membership-grid3 {
    display: grid;
    grid-template-columns: .3fr 1.8fr .9fr;
    gap: 20px;
    align-items: start;
    margin-left: auto;
    margin-right: auto;
}

.membership-panel {
    max-width: 600px;
    padding: 20px 60px;
    background: var(--content-bg);
    border-radius: 12px;
    box-shadow: 10px 10px 16px rgba(0,0,0,0.35);
    margin-bottom: 40px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.membership-panel-body p {
    margin-bottom: 1rem;
    line-height: 1.5;
    color: var(--text-main);
}

.membership-application {
    text-align: center;
    margin: 15px 0;
}

.membership-form-image {
    width: 150px;
    border-radius: 8px;
    box-shadow: 6px 6px 12px rgba(0,0,0,0.25);
    margin-bottom: 5px;
}

.membership-mailing {
    text-align: center;
    margin: 25px 0;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--text-main);
}

.membership-note {
    text-align: center;
    color: var(--text-muted);
    margin-top: 20px;
}

.membership-updated {
    margin-top: 25px;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

.membership-panel h3,
.membership-panel p {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* ============================================================= */
/* 4. REGALIA PANEL (MATCHES MEMBERSHIP PANEL)                    */
/* ============================================================= */

.page-regalia .regalia-left   { grid-column: 1; padding: 0; }
.page-regalia .regalia-middle { grid-column: 2; padding: 0; }
.page-regalia .regalia-right  { grid-column: 3; padding: 0; }

.page-regalia .regalia-grid3 {
    display: grid;
    grid-template-columns: .3fr 1.8fr .9fr;
    gap: 20px;
    align-items: start;
    margin-left: auto;
    margin-right: auto;
}

.regalia-panel {
    max-width: 600px;
    padding: 20px 75px;
    background: var(--content-bg);
    border-radius: 12px;
    box-shadow: 10px 10px 16px rgba(0,0,0,0.35);
    margin-bottom: 40px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.regalia-panel-body {
    margin-bottom: 1rem;
    line-height: 1.5;
    color: var(--text-main);
    font-weight: 600;
}

.regalia-panel-body p {
    margin-bottom: 1rem;
    line-height: 1.5;
    color: var(--text-main);
    font-weight: 700;
}

.regalia-subheader {
    font-size: 1.35rem;
    margin: 1.25rem 0 .75rem 0;
    font-weight: 600;
}

.regalia-store-link {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    margin: 1rem 0;
}

.regalia-store-image {
    max-width: 150px;
    border-radius: 6px;
    margin-bottom: .5rem;
}

.regalia-store-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent-blue);
}

.regalia-contact a {
    color: var(--accent-blue);
    text-decoration: none;
}

.regalia-contact a:hover {
    text-decoration: underline;
}

.regalia-updated {
    margin-top: 2rem;
    font-size: .9rem;
    color: var(--text-muted);
}

/* ============================================================= */
/* 5. OURCARS PANEL                                               */
/* ============================================================= */

.car-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px 0 40px;
}

.car-frame {
    width: 100%;
    height: 350px;
    background: var(--sidebar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
}

.car-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--sidebar-bg);
}

.car-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.car-overlay-inner {
    position: relative;
    padding: 10px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

.car-overlay-inner img {
    max-width: 1000px;
    height: auto;
    display: block;
}

.car-overlay-close {
    position: absolute;
    top: -10px;
    right: -10px;
    background: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.car-sidebar-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#carSidebarGrid {
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

#carSidebarGrid + .global-title-wrap {
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

.car-sidebar-title {
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

.car-sidebar-frame {
    width: 100%;
    max-width: var(--sidebar-width);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--content-bg);
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(0,0,0,0.15);
    margin-left: auto;
    margin-right: auto;
}

.car-sidebar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: var(--sidebar-width);
}

/* ============================================================= */
/* END OF FILE                                                   */
/* ============================================================= */
/*
    File: /css/links.css
    Purpose: Styling for the Sidebar Links subsystem
    Architecture:
        .links-box              — outer panel wrapper (anchor for overlay)
        .links-box-content      — inner panel content
        .links-inline           — inline content (Regional + Suppliers)
        .links-overlay-panel    — overlay panel for closed groups
        .link-row               — each link row
        .link-name              — link text
        .inactive               — non-clickable rows
        .links-toggle           — clickable group header
        .overlay-close          — X button
    Updated: 2026‑04‑30 (Cleaned + Structured)
*/

/* ============================================================= */
/* 0. DUMMY SELECTORS (must remain at top)                       */
/* ============================================================= */

,links-dummy { margin: 100%; }    /* first block won't render without this */

/* ============================================================= */
/* 1. GOOD SELECTORS — SIDEBAR PANEL WRAPPER                     */
/* ============================================================= */

.sidebar .panel {
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.links-box {
    position: relative !important;
    background: var(--panel-bg);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: visible !important;
    outline: 1px solid black !important;
}

.links-box-content {
    margin-left: 2px;
    padding: 16px;
    border-radius: 8px;
    background-color: transparent;
}

/* ============================================================= */
/* 2. GOOD SELECTORS — LINK ROWS + INLINE VARIANT                */
/* ============================================================= */

.links-inline .link-row {
    padding: 4px 0;    /* spacing above/below link-name */
}

.link-row {
    background-color: var(--accent-tint);
    padding: 2px 0 2px 8px;
    border-radius: 4px;
}

.link-name {
    display: block;
    width: 100%;
    background: var(--accent-tint);
    font-weight: 600;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 0.80rem;
    color: var(--text-main);
    text-decoration: none;
    line-height: 0.80rem;
}

.link-row:hover .link-name {
    text-decoration: underline;
}

.link-row.inactive .link-name {
    margin: 0;
    padding: 0;
    text-decoration: none;
    opacity: 0.6;
    cursor: default;
}

/* ============================================================= */
/* 3. GOOD SELECTORS — GROUP HEADER (TOGGLE)                     */
/* ============================================================= */

.links-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: var(--panel-bg);
}

.links-closed-note {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-left: 8px;
}

/* ============================================================= */
/* 4. GOOD SELECTORS — OVERLAY PANEL                             */
/* ============================================================= */

.links-overlay-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    font-weight: 600;
    display: none !important;

    background: var(--panel-bg) !important;
    border: 1px solid var(--border-main);
    border-radius: 8px !important;
    box-shadow: var(--shadow-box-low);

    opacity: 1 !important;
    transform: none !important;

    margin: 0;
    right: auto !important;

    z-index: 9999 !important;
    outline: 1px solid black !important;
}

.links-overlay-panel.open {
    display: block !important;
}

.links-overlay-content {
    padding: 16px;
    max-width: 320px;
}

/* ============================================================= */
/* 5. GOOD SELECTORS — OVERLAY HEADER + CLOSE BUTTON             */
/* ============================================================= */

.overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 13px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-light);
    border-radius: 8px 8px 0 0;
    margin-top: 1px;
}

.links-detail-close {
    font-size: 24px;
    font-weight: 700;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    border: 1px solid var(--border-main);
    border-radius: 4px;
    cursor: pointer;
    color: red;
    background: var(--bg-main);
    position: absolute;
    top: 8px;
    right: 8px;
    outline: 1px solid grey !important;
    margin: -4px;
}


/* ============================================================= */
/* SAFE ZONE — COMMENTED BLOCKS PRESERVED                     */
/* ============================================================= */

/*
.url-hover-card {
    position: fixed;
    background: red;
    border: 1px solid var(--border-dark);
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--text-main);
    box-shadow: var(--shadow-box-medium);
    z-index: 9999;
    white-space: nowrap;
    display: none;
    left: 8px;
    top: -4px;
    pointer-events: auto
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
*/

/* ============================================================= */
/* END OF FILE                                                   */
/* ============================================================= */
/*
    File: /css/footer.css
    Purpose: Full‑width footer with centered content and optional logo row
    Updated: 2026‑04‑30 (Cleaned + Structured)
*/

/* ============================================================= */
/* 0. GLOBAL / FIXES (dummy selectors stay here)                 */
/* ============================================================= */

/* No dummy selectors in this file */

/* ============================================================= */
/* 1. GOOD SELECTORS — FOOTER OUTER WRAPPER                      */
/* ============================================================= */

footer {
    background: linear-gradient(
        to bottom,
        var(--sidebar-bg),
        var(--header-bg)
    );
}

.site-footer {
    width: 100%;
    display: block;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    position: relative;
    z-index: 500;
    color: var(--text-on-dark);
}

/* ============================================================= */
/* 2. GOOD SELECTORS — INNER FOOTER GRID                         */
/* ============================================================= */

.footer-inner {
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
}

/* ============================================================= */
/* 3. GOOD SELECTORS — FOOTER CONTENT BOX                        */
/* ============================================================= */

.footer-box {
    display: inline-block;
    background-color: var(--content-bg);
    color: var(--text-main);
    padding: 10px 20px;
    border-radius: 12px;
    box-shadow: 10px 10px 16px rgba(0,0,0,0.35);

    width: clamp(260px, 90%, 750px);
    white-space: normal;

    font-size: clamp(0.85rem, 1.5vw, 1rem);
    line-height: 1.35;
}

.footer-social {
    display: none;
}

.footer-box > p img,
.footer-social img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* ============================================================= */
/* 4. GOOD SELECTORS — OPTIONAL LOGO ROW                         */
/* ============================================================= */

.footer-logos {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 15px 0;
}

.footer-logos img {
    height: 50px;
    width: auto;
    max-width: 75px;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.footer-logos img:hover {
    opacity: 1;
}

/* ============================================================= */
/* 5. GOOD SELECTORS — VISIT COUNTER                             */
/* ============================================================= */

.visit-counter {
    text-align: center;
    font-size: 1.1rem;
    margin: 1rem 0 2rem 0;
    opacity: 1;
}

/* ============================================================= */
/* END OF FILE                                                   */
/* ============================================================= */
/*
    File: /css/dropdown.css
    Purpose: CSS for dropdown menu in nav grids
    Updated: 2026‑04‑30 (Cleaned + Structured)
*/

/* ============================================================= */
/* 0. GLOBAL / FIXES (dummy selectors stay here)                 */
/* ============================================================= */

/* No dummy selectors in this file */

/* ============================================================= */
/* 1. GOOD SELECTORS — BASE DROPDOWN STRUCTURE                   */
/* ============================================================= */

/* Anchor dropdown to More tile */
.more-menu {
    position: relative;
}

/* Remove grid/tile formatting from dropdown items */
.more-dropdown li {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

/* Dropdown link styling */
.more-dropdown li a {
    display: block;
    padding: 6px 10px;
    white-space: nowrap;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 4px;
    background-color: var(--tile-bg);
    color: var(--text-main);
}

/* Dropdown hover */
.more-dropdown li a:hover {
    background-color: var(--header-bg);
    color: var(--text-on-dark);
}

/* Dropdown container */
.more-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;

    width: auto !important;
    min-width: 100% !important;
    max-width: max-content !important;

    background-color: var(--tile-bg);
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    z-index: 999;

    grid-column: auto !important;
    grid-row: auto !important;
}

/* Show dropdown on hover */
.more-menu:hover .more-dropdown {
    display: block;
}

/* FIX: Grid tiles should use header hover */
.header-nav li a:hover {
    background-color: var(--header-bg);
    color: var(--text-on-dark);
}

/* ============================================================= */
/* END OF FILE                                                   */
/* ============================================================= */
/*
    File: /css/device.css
    Purpose: Authoritative responsive overrides for tablet and mobile
    Updated: 2026‑04‑16 (Cleaned + Structured)
*/

/* ============================================================= */
/* 0. GLOBAL / FIXES (dummy selectors stay here)                 */
/* ============================================================= */

/* No dummy selectors in this file */

/* ============================================================= */
/* 1. BASELINE (DESKTOP DEFAULT) — GOOD SELECTORS                */
/* ============================================================= */

.desktop-header { display: block; }
.mobile-header { display: none; }
.nav-mobile { display: none; }

/* tablet scaling base */
body.tablet-scale {
    transform-origin: top left;
}

/* ============================================================= */
/* 2. TABLET (769px–1024px) — GOOD SELECTORS                     */
/* ============================================================= */

@media (max-width: 1024px) and (min-width: 769px) {

    html { font-size: 1.00rem; }

    /* Desktop header remains visible */
    .mobile-header { display: none; }
}

/* ============================================================= */
/* 3. MOBILE (≤ 768px) — GOOD SELECTORS                          */
/* ============================================================= */

@media (max-width: 768px) {

    html { font-size: 0.90rem; }

    /* -----------------------------------------
       MOBILE HEADER (from mobile.css)
    ----------------------------------------- */
    .header-mobile {
        display: grid;
        grid-template-columns: auto minmax(40px, 1fr) minmax(0, max-content);
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 0.75rem;
        padding: 1rem 1rem 0 1rem;
        background: linear-gradient(to bottom, var(--header-bg), var(--sidebar-bg));
        margin-bottom: 0.5rem;
        justify-items: center;
    }

    .mobile-header-top { grid-column: 1 / 2; grid-row: 1 / 2; }

    .mobile-logo-wrap {
        width: 160px;
        height: 160px;
        display: flex;
        align-items: center;
    }

    .mobile-logo {
        height: 100%;
        width: auto;
        display: block;
        filter: drop-shadow(6px 6px 8px rgba(0,0,0,0.35));
    }

    .mobile-nav-wrap {
        position: relative;
        grid-row: 1 / 2;
        grid-column: 3 / 4;
        padding-right: 1rem;
    }

    .mobile-site-name {
        grid-row: 2 / 3;
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1rem;
        text-align: center;
        color: var(--text-muted);
    }

    .mobile-empty {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        display: block;
    }

    /* -----------------------------------------
       MOBILE TILE GRID
    ----------------------------------------- */
    .mtile {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        background: var(--content-bg);
        text-decoration: none;
        color: var(--text-main);
        font-weight: 600;
        line-height: 1.25;
        padding: 0.35rem 0.60rem;
        font-size: 0.75rem;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.15);
        width: 100%;
    }

    .mtile-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        width: 100%;
    }

    .mobile-nav-updated {
        font-size: 0.65rem;
        line-height: 1.1;
        margin-top: 0.15rem;
        color: var(--text-muted);
    }

    .mobile-tile-grid {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.50rem;
        max-width: 100%;
        width: fit-content;
    }

    .mobile-tile-grid .mtile:hover {
        background: var(--header-bg);
        color: var(--text-on-dark);
    }

    /* -----------------------------------------
       MOBILE CONTENT FLOW
    ----------------------------------------- */
    main.page-content { padding: 1rem; }

    /* -----------------------------------------
       MOBILE OVERFLOW PAGE
    ----------------------------------------- */
    .mobile-more-wrapper { padding: 1rem; }

    .mobile-more-title {
        font-size: 1.6rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: var(--text-main);
        text-align: center;
    }

    .mobile-more-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .mobile-more-list .more-item {
        display: block;
        background: var(--tile-bg);
        padding: 0.9rem 1rem;
        border-radius: 6px;
        text-decoration: none;
        color: var(--text-main);
        font-size: 1.2rem;
        font-weight: 600;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }

    .mobile-more-list .more-item:hover {
        background: var(--header-bg);
        color: var(--text-on-dark);
    }

    /* Make nav-grid and More-grid tiles identical width */
    .header-mobile .nav-grid,
    .ui-overlay-more .mobile-tile-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mobile-nav-photo {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(120px, 1fr);
        gap: 0.75rem;
        overflow-x: auto;
        padding: 0.5rem 0 0.75rem 0;
        scrollbar-width: none;
    }

    .mobile-nav-photo::-webkit-scrollbar {
        display: none;
    }

    .mobile-nav-photo .mtile {
        flex-shrink: 0;
        width: 120px;
    }

    /* -----------------------------------------
       MOBILE FOOTER SOCIAL
    ----------------------------------------- */
    .footer-social {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem 0;
    }

    .footer-social img {
        height: auto;
        display: block;
        width: 32px;
    }

    .footer-box {
        font-size: 0.95rem;
    }

    /* -----------------------------------------
       MOBILE NAV LIST
    ----------------------------------------- */
    .mobile-nav-list { list-style: none; padding: 0; margin: 0; }
    .mobile-nav-list li { margin-bottom: 0.5rem; }

    .mobile-nav-list a {
        display: block;
        padding: 0.75rem 1rem;
        background: var(--tile-bg);
        color: var(--text-main);
        text-decoration: none;
        border-radius: 6px;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .mobile-nav-list a:hover {
        background: var(--header-bg);
        color: var(--text-on-dark);
    }

    /* -----------------------------------------
       MOBILE TITLE BLOCK
    ----------------------------------------- */
    .mobile-title-wrap {
        display: block;
        grid-column: 2;
        text-align: center;
        width: max-content;
        margin: 1rem auto;
        padding-top: 0;
        justify-self: center;
    }

    .mobile-title {
        width: 100%;
        text-align: center;
        margin: 0 0 0.25rem 0;
        display: block !important;
        text-shadow: 7px 7px 10px rgba(0,0,0,0.65);
    }

    .mobile-subtitle {
        width: 100%;
        text-align: center;
        margin: 0 0 0.25rem 0;
    }

    .mobile-group-title {
        padding: 6px 12px 4px 12px;
        pointer-events: auto;
    }

    .mobile-accent {
        display: block;
        height: 5px;
        width: calc(100% + 2rem);
        margin-left: -1rem;
        margin-right: -1rem;
        background: var(--u-ac-gold);
        border-radius: 2px;
        border-bottom: 1px solid var(--border-muted);
        margin-top: 0;
    }

    .mobile-shell { width: 100%; padding: 0; margin: 0; }
    .mobile-main { width: 100%; padding: 1rem; box-sizing: border-box; }

    .mobile-panel {
        background: var(--panel-bg, #fff);
        padding: 1rem;
        margin-bottom: 1.25rem;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.15);
        width: 100%;
    }

    .mobile-content {
        width: 100%;
    }

    .mobile-main img {
        max-width: 50%;
        height: auto;
        display: block;
    }

    /* Regalia images */
    .mobile-main .regalia-store-image,
    .desktop-main .regalia-store-image {
        display: inline-block !important;
        vertical-align: middle;
        max-width: 140px !important;
        height: auto !important;
        margin: 0 6px;
    }

    .mobile-image-row {
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    .mobile-image-row img {
        max-width: 140px;
        height: auto;
    }

    .mobile-next {
        text-align: right;
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding-right: 2rem;
    }

    .mobile-next-link {
        text-decoration: none;
        color: inherit;
        display: inline-block;
    }

    .mobile-next-title-wrap {
        display: inline-block;
        text-align: right;
    }

    .mobile-next-label {
        font-weight: 400;
        opacity: 0.8;
        margin-right: 1rem;
    }

    .mobile-next-arrow {
        font-size: 1.25rem;
        font-weight: 700;
        margin-left: 0.35rem;
        opacity: 0.85;
    }
}

/* ============================================================= */
/* 4. SMALL MOBILE (≤ 480px) — GOOD SELECTORS                    */
/* ============================================================= */

@media (max-width: 480px) {

    html { font-size: 0.80rem; }

    .mobile-header .mobile-title-block { padding: 8px 10px; }
    .nav-mobile a { padding: 8px 16px; }

    .footer-box { font-size: 0.85rem; }
    .footer-box img { width: 22px; }
}

/* ============================================================= */
/* 5. VERY SMALL MOBILE (≤ 360px) — GOOD SELECTORS               */
/* ============================================================= */

@media (max-width: 360px) {
    .footer-box img { width: 18px; }
}

/* ============================================================= */
/* 6. OVERLAY BASE — INLINE, NOT MODAL — GOOD SELECTORS          */
/* ============================================================= */

.overlay-root {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    top: calc(100% + 4px);
    z-index: 9999;
}

.ui-overlay {
    position: static !important;
    display: none;
    width: 100% !important;
    min-height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 4px 0 0 0 !important;
    z-index: auto !important;

    /* REMOVE ALL MODAL BEHAVIOR
    inset: unset !important;
    justify-content: unset !important;
    align-items: unset !important;
    overflow: visible !important; */
}

/* ============================================================= */
/* 7. OVERLAY TILE GRID — MATCH NAV-GRID GEOMETRY — GOOD         */
/* ============================================================= */

.ui-overlay-more .mobile-tile-grid,
.ui-overlay-gallery .mobile-tile-grid {
    grid-column: unset !important;
    grid-row: unset !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;

    display: grid !important;
    grid-auto-flow: column !important;

    /* TILE WIDTH */
    grid-auto-columns: var(--tile-width) !important;

    /* TILE SPACING */
    gap: 6px !important;

    /* ⭐ RIGHT-EDGE ANCHORING (critical) */
    direction: ltr !important;
    justify-content: flex-end !important;

    /* remove artificial spacing */
    padding-right: 0 !important;
    margin-left: -16px !important;
}

.ui-overlay.open {
    display: block;
}

.ui-overlay-more .mtile,
.ui-overlay-gallery .mtile {
    width: var(--tile-width) !important;
    min-width: var(--tile-width) !important;
    max-width: var(--tile-width) !important;
}

.ui-overlay-more .ui-overlay-inner,
.ui-overlay-gallery .ui-overlay-inner {
    gap: 16px;
}

/* ============================================================= */
/* 8. OVERLAY INNER — REMOVE MODAL BOX — GOOD                    */
/* ============================================================= */

.ui-overlay-inner {
    position: relative;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: 100% !important;
    box-shadow: none !important;
}

.mobile-nav-overlay {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
}

/* ============================================================= */
/* 9. TILE GRID — MATCH NAV-GRID (2 columns) — GOOD              */
/* ============================================================= */

.ui-overlay .mtile {
    direction: ltr;
}

/* ============================================================= */
/* 10. MOBILE OVERLAY CLOSE BUTTON — GOOD                        */
/* ============================================================= */
@media (max-width: 899px) {

    .mobile-overlay-close {
        position: absolute;
        top: -8px;
        right: 0;
        left: auto !important;
        transform: none !important;

        width: 18px;
        height: 18px;
        border: 2px solid #c00;
        border-radius: 4px;
        background: #fff;
        color: #c00;
        font-size: 16px;
        font-weight: bold;
        line-height: 16px;
        text-align: center;
        cursor: pointer;
        z-index: 10;
    }
}

@media (max-width: 899px) {
    .cal-detail-close,
    .rec-detail-close {
        position: absolute;
        top: -8px;
        right: 0;
        width: 18px;
        height: 18px;
        border: 2px solid #c00;
        border-radius: 4px;
        background: #fff;
        color: #c00;
        font-size: 16px;
        font-weight: bold;
        line-height: 16px;
        text-align: center;
        cursor: pointer;
        z-index: 10;
    }
}

@media (min-width: 900px) {
    .cal-detail-close,
    .rec-detail-close {
        display: none;
    }
}

/* -----------------------------------------
   Hide mobile close button on desktop/tablet
----------------------------------------- */
@media (min-width: 900px) {
    .mobile-overlay-close {
        display: none;
    }
}

/* ============================================================= */
/* 11. MODAL CLOSE BUTTON — GOOD                                 */
/* ============================================================= */

.ui-overlay-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 18px;
    height: 18px;
    border: 2px solid #c00;
    border-radius: 4px;
    background: #fff;
    color: #c00;
    font-size: 16px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    z-index: 2000000;
}

/* ============================================================= */
/* 12. DESKTOP DROPDOWN (More…) — GOOD                           */
/* ============================================================= */

.ui-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: none;
    z-index: 99999;
}

.more-tile {
    cursor: pointer;
}

/* ============================================================= */
/* 13. SHARED TILE GRID (modal + dropdown) — GOOD                */
/* ============================================================= */

.ui-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 10px;
}

.ui-grid .mtile {
    width: 100%;
}

/* ============================================================= */
/* 14. IMAGE SCALING CLASSES — GOOD                              */
/* ============================================================= */

@media (max-width: 768px) {
    .img-200 { width: 200% !important; height: auto; }
    .img-100 { width: 100% !important; height: auto; }
    .img-125 { width: 125% !important; height: auto; }
    .img-75  { width: 75% !important; height: auto; }
    .img-67  { width: 67% !important; height: auto; }
    .img-50  { width: 50% !important; height: auto; }
    .img-33  { width: 33% !important; height: auto; }
    .img-25  { width: 25% !important; height: auto; }
}

/* ------------------------------------------------------------- */
/* ORPHANS INSIDE MEDIA QUERIES — WITH GHOST WRAPPERS            */
/* ------------------------------------------------------------- */

/* ghost @media (max-width: 768px)
@media (max-width: 768px) {
    .mobile-nav-photo .mtile:hover {
        background: var(--header-bg);
        color: var(--text-on-dark);
    }   // orphan — not found in markup
} */

/* ghost @media (max-width: 768px)
@media (max-width: 768px) {
    .mobile-more-list .more-item:active {
        background: var(--header-bg);
        color: var(--text-on-dark);
    }   // orphan — not found in markup
} */

/* ghost @media (max-width: 768px)
@media (max-width: 768px) {
    .mobile-nav-list a:active {
        background: var(--header-bg);
        color: var(--text-on-dark);
    }   // orphan — not found in markup
} */

/* ghost @media (max-width: 768px)
@media (max-width: 768px) {
    .mobile-next-link:active {
        opacity: 0.75;
    }   // orphan — not found in markup
} */

/* ghost @media (max-width: 480px)
@media (max-width: 480px) {
    .mobile-title-block {
        padding: 6px 8px;
    }   // orphan — not found in markup
} */

/* ghost @media (max-width: 360px)
@media (max-width: 360px) {
    .mobile-title-block {
        padding: 4px 6px;
    }   // orphan — not found in markup
} */

/* ============================================================= */
/* SAFE ZONE — LEGACY BLOCK (PRESERVED EXACTLY AS-IS)        */
/* ============================================================= */

/*
    .mobile-site-wrap {
        position: relative;
        z-index: 0;
    }

    .mobile-calendar {
        position: relative;
        z-index: 1000;
        padding-bottom: 2rem;
    }
 UNIVERSAL IMAGE OVERLAY
div id="image-overlay">
div class="image-overlay-close">×</div>
img id="image-overlay-img" src=""> 

    PAGE GRID COLLAPSE (old nested block)
    .page-grid,
    .sidebar,
    .page-content,
    .contacts-grid3,
    .contacts-left,
    .contacts-middle,
    .contacts-right {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

*/

/* ========================================================== */
/* END OF FILE                                                            */
/* ========================================================== */

/*
    File: /css/main.css
    Purpose: Global resets, base elements, and universal defaults
    Updated: 2026‑04‑30 (Cleaned + Structured)
*/

/* ============================================================= */
/* 0. GLOBAL RESET                                                */
/* ============================================================= */

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

body {
    margin: 0 !important;
}

/* ============================================================= */
/* 1. IMAGES                                                      */
/* ============================================================= */

img {
    max-width: 100%;
    height: auto;
}

/* ============================================================= */
/* END OF FILE                                                   */
/* ============================================================= */
/*
    File: /css/utilities.css
    Purpose: Global utility classes — spacing, alignment, transforms,
             colors, backgrounds, opacity, shadows, borders, misc.
    Updated: 2026‑04‑30 (Canonical Separation)
*/

/* ============================================================= */
/* 0. SPACING UTILITIES                                           */
/* ============================================================= */

.mb-0   { margin-bottom: 0; }
.mb-2   { margin-bottom: 2px; }
.mb-5   { margin-bottom: 5px; }
.mb-10  { margin-bottom: 10px; }
.mb-12  { margin-bottom: 12px; }
.mb-20  { margin-bottom: 20px; }
.mb-30  { margin-bottom: 30px; }

.mt-t1  { margin-top: -20px; }
.mt-t2  { margin-top: -40px; }
.mt-t3  { margin-top: -60px; }
.mt-s1  { margin-top: -18px; }
.mt-s2  { margin-top: -36px; }
.mt-s3  { margin-top: -54px; }
.mt-r1  { margin-top: -15px; }
.mt-r2  { margin-top: -30px; }
.mt-r3  { margin-top: -45px; }
.mt-x   { margin-top: -6px; }
.mt-y   { margin-top: -4px; }
.mt-z   { margin-top: -2px; }

.mt-0   { margin-top: 0; }
.mt-2   { margin-top: 2px; }
.mt-3   { margin-top: 3px; }
.mt-5   { margin-top: 5px; }
.mt-10  { margin-top: 10px; }
.mt-12  { margin-top: 12px; }
.mt-20  { margin-top: 20px; }
.mt-21  { margin-top: 21px; }
.mt-23  { margin-top: 23px; }
.mt-25  { margin-top: 25px; }
.mt-27  { margin-top: 27px; }
.mt-30  { margin-top: 30px; }
.mt-35  { margin-top: 35px; }
.mt-40  { margin-top: 40px; }
.mt-45  { margin-top: 45px; }
.mt-50  { margin-top: 50px; }

.mr-4   { margin-right: 4px; }

.pad-2  { padding: 2px 12px 4px 12px; }

.pt-3   { padding-top: 3px; }
.pt-5   { padding-top: 5px; }
.pt-10  { padding-top: 10px; }
.pt-12  { padding-top: 12px; }
.pt-20  { padding-top: 20px; }
.pt-23  { padding-top: 23px; }
.pt-25  { padding-top: 25px; }
.pt-27  { padding-top: 27px; }
.pt-30  { padding-top: 30px; }
.pt-35  { padding-top: 35px; }
.pt-40  { padding-top: 40px; }
.pt-45  { padding-top: 45px; }
.pt-50  { padding-top: 50px; }

/* ============================================================= */
/* 1. TEXT ALIGNMENT UTILITIES                                    */
/* ============================================================= */

.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-center { text-align: center; }

/* ============================================================= */
/* 2. TEXT TRANSFORM UTILITIES                                    */
/* ============================================================= */

.text-uppercase  { text-transform: uppercase; }
.text-lowercase  { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.nowrap          { white-space: nowrap; }

/* ============================================================= */
/* 3. TEXT WEIGHT UTILITIES                                       */
/* ============================================================= */

.text-bold    { font-weight: 700; }
.text-b       { font-weight: 600; }
.text-normal  { font-weight: 400; }

/* ============================================================= */
/* 4. TEXT COLOR UTILITIES (palette-safe)                         */
/* ============================================================= */

.text-dark    { color: var(--u-text-dark); }
.text-muted   { color: var(--u-text-muted); }
.text-white   { color: var(--u-text-white); }
.text-blue    { color: var(--u-text-blue); }
.text-red     { color: var(--u-text-red); }
.text-yellow  { color: var(--u-text-yellow); }

.text-highlight { color: var(--text-highlight); }

/* ============================================================= */
/* 5. TEXT BACKGROUND UTILITIES                                   */
/* ============================================================= */

.text-bg-dark    { background-color: var(--u-bg-dark);    color: white; }
.text-bg-muted   { background-color: var(--u-bg-muted);   color: black; }
.text-bg-white   { background-color: var(--u-bg-white);   color: black; }
.text-bg-blue    { background-color: var(--u-bg-blue);    color: black; }
.text-bg-red     { background-color: var(--u-bg-red);     color: black; }
.text-bg-yellow  { background-color: var(--u-bg-yellow);  color: black; }

/* ============================================================= */
/* 6. TEXT OPACITY UTILITIES                                      */
/* ============================================================= */

.text-o90 { opacity: var(--opacity-90); }
.text-o80 { opacity: var(--opacity-80); }
.text-o70 { opacity: var(--opacity-70); }

/* ============================================================= */
/* 7. BACKGROUND COLOR UTILITIES                                  */
/* ============================================================= */

.bg-dark        { background-color: var(--u-bg-dark); }
.bg-muted       { background-color: var(--u-bg-muted); }
.bg-white       { background-color: var(--u-bg-white); }
.bg-blue-soft   { background-color: var(--u-bg-blue); }
.bg-red-soft    { background-color: var(--u-bg-red); }
.bg-yellow-soft { background-color: var(--u-bg-yellow); }

/* ============================================================= */
/* 8. BORDER RADIUS UTILITIES                                     */
/* ============================================================= */

.br-6 { border-radius: 6px; }
.br-8 { border-radius: 8px; }

/* ============================================================= */
/* 9. SHADOW UTILITIES                                            */
/* ============================================================= */

.shadow-text-low    { text-shadow: 1px 1px 2px rgba(0,0,0,0.25); }
.shadow-text-medium { text-shadow: 3px 3px 6px rgba(0,0,0,0.45); }
.shadow-text-high   { text-shadow: 7px 7px 10px rgba(0,0,0,0.65); }

.shadow-box-low     { box-shadow: 0 2px 4px rgba(0,0,0,0.20); }
.shadow-box-medium  { box-shadow: 0 4px 8px rgba(0,0,0,0.30); }
.shadow-box-high    { box-shadow: 0 8px 16px rgba(0,0,0,0.40); }

.shadow-image-low    { filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.35)); }
.shadow-image-medium { filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.45)); }
.shadow-image-high   { filter: drop-shadow(7px 7px 10px rgba(0,0,0,0.55)); }

/* Replacements for @apply */
.u-shadow-soft    { box-shadow: 0 2px 4px rgba(0,0,0,0.20); }
.u-shadow-light   { box-shadow: 0 2px 4px rgba(0,0,0,0.20); }
.u-shadow-medium  { box-shadow: 0 4px 8px rgba(0,0,0,0.30); }
.u-shadow-strong  { box-shadow: 0 8px 16px rgba(0,0,0,0.40); }
.u-shadow-xstrong { box-shadow: 0 8px 16px rgba(0,0,0,0.40); }

/* ============================================================= */
/* 10. MISC UTILITIES                                             */
/* ============================================================= */

.updated { margin-top: 4px; }
.text-underline { text-decoration: underline; }

/* ============================================================= */
/* 11. TOOLTIP COMPONENT                                          */
/* ============================================================= */

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tiptext {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--header-bg);
    color: var(--text-on-dark);
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 0.85rem;
    transition: opacity 0.2s ease;
    z-index: 20;
}

.tooltip:hover .tiptext {
    visibility: visible;
    opacity: 1;
}

/* ============================================================= */
/* END OF FILE                                                    */
/* ============================================================= */