/* === Analemma CSS (mixed/minified) === */

/*** Fonts ***/
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@font-face{font-display:swap;font-family:'OpenDyslexic';font-style:normal;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff2) format('woff2'),url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff) format('woff')}

:root {
  --font-sans: 'Work Sans', system-ui, sans-serif;
  --font-opendyslexic: 'OpenDyslexic', sans-serif;
  --font-atkinson: 'Atkinson Hyperlegible', sans-serif;
  --font-body: var(--font-atkinson);
  --font-body-readable: var(--font-opendyslexic);
  --overlay-rgb: 255, 255, 255;
  --body-link-color:var(--brand-teal-light);
  --body-link-hover-color:var(--brand-teal);
  
}

/*=== Initial ===*/
.com-content-article__body,.com-content-article__body li,.com-content-article__body p,.resident-story,.resident-story li,.resident-story p{font-family:var(--font-body)}
/* Overriding the --font-body variable itself (rather than only
   targeting specific content selectors) makes the readable-font
   toggle apply site-wide: body text, headings, hero tagline,
   timeline labels, etc. all reference var(--font-body), so this
   one override cascades to all of them automatically. */
body.font-readable { --font-body: var(--font-body-readable); }
h1,h2,h3,h4,h5,h6{font-family:var(--font-body)}
.buttons--centered{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.5rem}
.button{background-color:var(--color-primary);border-radius:4px;color:var(--color-primary-text);display:inline-block;font-family:var(--font-sans);font-weight:600;padding:.75em 1.5em;text-decoration:none;transition:.2s ease}
.button:focus-visible{outline:3px solid var(--color-primary-text);outline-offset:2px}
.button:hover{background-color:var(--color-primary-hover);box-shadow:.25rem .25rem .25rem #000;color:#FBF6EE}
.button--disabled,.button[aria-disabled="true"]{background-color:var(--color-disabled-bg);color:var(--color-disabled-text);cursor:not-allowed;pointer-events:none}
.button--secondary{background-color:var(--color-secondary);color:var(--color-secondary-text)}
.button--secondary:hover{background-color:var(--color-secondary-hover)}
.font-toggle-wrap{margin-left:auto;float:right}
.font-toggle{align-items:center;background:none;border:1px solid transparent;border-radius:4px;color:inherit;cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:.8rem;gap:.4rem;opacity:.65;padding:.35em .6em;text-decoration:underline;text-underline-offset:2px;transition:opacity .2s ease}
.font-toggle:focus-visible{border-color:currentColor;opacity:1;outline:none}
.font-toggle:hover{opacity:1}
.t4-main-body{margin-top:0;min-height:calc(100vh - 100px - 170px);padding-top:0}
.article-body a {transition:.5s all;}

/*=== Article Updates ===*/
.image-left{float:left;margin:0 1rem 1rem 0}
.image-right{float:right;margin:0 0 1rem 1rem}
.image-center{margin:1rem auto}
.clearbreak,.clearboth{clear:both}
.source {border-top: 1px dotted var(--brand-teal); margin: 2rem; padding: 1rem 1rem 0;}
div.striped > div:nth-child(odd) {background:var(--stripe-odd); padding:.5rem;}
div.striped > div:nth-child(even) {background:var(--stripe-even); padding:.5rem;}
div.indented p {margin-left:2rem}
table {width:100%;}
table.striped tbody tr:nth-child(odd) {background:var(--stripe-odd);}
table.striped tbody tr:nth-child(even)  {background:var(--stripe-even);}
table.striped thead > tr {background:var(--bg-panel-2);}
table.striped th,table.striped td {padding:.5rem;}

/* === Accordion Bits === */
.site-accordion.accordion .accordion-item, 
.moa-accordion.accordion .accordion-item{background-color:rgba(var(--overlay-rgb),.05) !important;border-color:var(--border-soft) !important}
.site-accordion.accordion .accordion-button, 
.moa-accordion.accordion .accordion-button{background-color:transparent !important;color:var(--text-main) !important}
.site-accordion.accordion .accordion-button:not(.collapsed), .moa-accordion.accordion .accordion-button:not(.collapsed){background-color:rgba(var(--overlay-rgb),.08) !important;color:var(--brand-teal-light) !important}
.site-accordion.accordion .accordion-body, .moa-accordion.accordion .accordion-body{color:var(--text-main) !important}
.site-accordion.accordion .accordion-body a, .moa-accordion.accordion .accordion-body a{color:var(--brand-teal-light) !important}
.site-accordion.accordion .accordion-button::after, .moa-accordion.accordion .accordion-button::after{filter:invert(1) brightness(2) !important}

/* === Sundial cards === */
.sundial-cards .card{background:var(--bg-panel);border:1px solid var(--border-soft);color:var(--text-main)}
.sundial-cards .card-title{color:var(--text-main);font-size:1.3rem;font-weight:600;margin-bottom:.75rem}
.sundial-cards .card-text{color:var(--text-muted)}
.sundial-cards .card-text a{color:var(--brand-teal-light)}
.sundial-cards img{margin-top:.5rem}
/* ===========================================================
   Theme (color palette) variables
   :root holds the default/fallback values (Blue). The JS sets
   data-theme on <html> before first paint, so [data-theme="blue"]
   normally takes over immediately; :root only matters as a
   fallback if JS is blocked/disabled.

   *-rgb variables exist alongside the hex values so effects that
   need a custom alpha (glows, shadows, translucent backgrounds)
   can do rgba(var(--brand-teal-light-rgb), 0.35) instead of a
   second hardcoded color. This is also what makes those glow/
   shadow effects correctly follow the active theme instead of
   staying teal-colored under Black or Purple.

   --gold/--gold-soft and --color-white are intentionally constant
   across all three themes (gold is the brand's fixed accent color;
   white is just white), so they're defined once here and not
   repeated in the per-theme blocks below.
   =========================================================== */
/* ===========================================================
   @property registrations
   By default, browsers treat any change to a custom property's
   value as an instant swap — there's no "in-between" state to
   transition through, which is why the #starfield gradient (built
   from var(--bg-deep)/var(--bg-panel-2)) was snapping instantly
   even with a transition on its background property.

   Registering a property with syntax: '<color>' tells the browser
   it's a typed, animatable color, not an opaque string. Combined
   with the transition on :root below, this makes the custom
   property's value itself interpolate over time — so the gradient
   (and anything else built from these variables) recomputes with
   smoothly changing inputs on every frame, rather than jumping.

   Browser support: modern Chrome/Edge/Safari support this; older
   browsers that don't recognize @property simply ignore it and
   fall back to the previous instant-swap behavior — no breakage,
   just no animation on those browsers.
   =========================================================== */
@property --bg-deep {
  syntax: '<color>';
  inherits: true;
  initial-value: #050b14;
}

@property --bg-panel-2 {
  syntax: '<color>';
  inherits: true;
  initial-value: #0f2237;
}

:root {
  --bg-deep: #050b14;
  --bg-panel: #0c1a29;
  --bg-panel-2: #0f2237;
  --brand-teal: #0e6690;
  --brand-teal-rgb: 14, 102, 144;
  --brand-teal-light: #2ba0cf;
  --brand-teal-light-rgb: 43, 160, 207;
  --gold: #e8b04b;
  --gold-rgb: 232, 176, 75;
  --gold-soft: #f3cd82;
  --text-main: #eaf2f8;
  --text-muted: #9fb3c4;
  --color-white: #fff;
  --white-rgb: 255, 255, 255;
  --border-soft: rgba(var(--overlay-rgb), 0.08);
  --stripe-odd: rgba(var(--overlay-rgb), .05);
  --stripe-even: rgba(var(--overlay-rgb), .1);
  transition: --bg-deep .75s ease, --bg-panel-2 .75s ease;
}

[data-theme="blue"] {
  --bg-deep: #050b14;
  --bg-panel: #0c1a29;
  --bg-panel-2: #0f2237;
  --brand-teal: #0e6690;
  --brand-teal-rgb: 14, 102, 144;
  --brand-teal-light: #2ba0cf;
  --brand-teal-light-rgb: 43, 160, 207;
  --text-main: #eaf2f8;
  --text-muted: #9fb3c4;
}

[data-theme="black"] {
  --bg-deep: #060606;
  --bg-panel: #121212;
  --bg-panel-2: #1c1c1c;
  --brand-teal: #7a7a7a;
  --brand-teal-rgb: 122, 122, 122;
  --brand-teal-light: #b8b8b8;
  --brand-teal-light-rgb: 184, 184, 184;
  --text-main: #f2f2f2;
  --text-muted: #a3a3a3;
}

[data-theme="purple"] {
  --bg-deep: #0b0616;
  --bg-panel: #170f28;
  --bg-panel-2: #1f1533;
  --brand-teal: #6d3fa0;
  --brand-teal-rgb: 109, 63, 160;
  --brand-teal-light: #a06fd6;
  --brand-teal-light-rgb: 160, 111, 214;
  --text-main: #f1eaf8;
  --text-muted: #b3a3c4;
}

[data-theme="light"] {
  --bg-deep: #eef5fa;
  --bg-panel: #e2edf3;
  --bg-panel-2: #d3e5ee;
  --brand-teal: #0a5878;
  --brand-teal-rgb: 10, 88, 120;
  --brand-teal-light: #128dc0;
  --brand-teal-light-rgb: 18, 141, 192;
  --text-main: #16232e;
  --text-muted: #4a5b68;
  --gold: #b8860b;
  --gold-rgb: 184, 134, 11;
  --gold-soft: #8a6508;
  --overlay-rgb: 22, 35, 46;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg-deep);color:var(--text-main);font-family:var(--font-body);font-weight:300;position:relative;min-height:100vh;transition:background .75s ease}
h1,h2,h3,.hero-title,.section-heading{letter-spacing:0.03em}

/* ---------- Starfield background ---------- */
/* Uses theme variables so the backdrop gradient follows the
   active palette instead of a fixed set of colors. */
#starfield{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% -10%,var(--bg-panel-2) 0%,var(--bg-deep) 55%,var(--bg-deep) 100%);transition:background .75s ease}

/* ---------- T4 default template overrides ---------- */
/* The default T4 template CSS gives .t4-header and .t4-content an
   opaque background-color, which paints above the fixed,
   negative-z-index #starfield canvas and hides it entirely. This
   override is required for the starfield to be visible at all —
   without it, the backdrop silently disappears even though the JS
   and #starfield rule above are both correct. */
.t4-header,.t4-content{background-color:transparent;border:none}
.t4-header .logo-image img{height:50px}
#t4-header.t4-sticky{transition:.5s all}
.not-at-top #t4-header.t4-sticky{background-color:var(--bg-panel-2)}
.t4-megamenu.animate.slide .dropdown .dropdown-menu > div {min-width:350px;}
.t4-palette-dark .nav > li a, 
.t4-palette-dark .nav > li .nav-link {color:var(--brand-teal-light);}
.t4-megamenu .dropdown-toggle .item-caret::before {border-top-color:var(--brand-teal-light);}

.t4-header #t4-megamenu-mainmenu a{transition:.5s all}
.t4-header #t4-megamenu-mainmenu .nav li li a,
.t4-header #t4-megamenu-mainmenu .nav li.active li a{color:var(--brand-teal); padding:.5rem 2rem; transition:.4s all; }
.t4-header #t4-megamenu-mainmenu .nav li li.active > a{color:var(--brand-teal);font-weight:bold}
.t4-header #t4-megamenu-mainmenu .nav li li a:hover,
.t4-header #t4-megamenu-mainmenu .nav li.active li a:hover {background:var(--brand-teal);color:#fff; }
.t4-megamenu .dropdown-menu {padding:1rem 0;}
.header-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.header-grid-center{grid-column:2}
.header-grid-end{align-items:center;display:flex;gap:1rem;grid-column:3;justify-self:end}

@media (max-width: 991.98px) {
  .nav-breakpoint-lg .t4-megamenu .navbar-nav > li.active > a,
  .nav-breakpoint-lg .t4-megamenu .navbar-nav > li.active > .nav-link { color: var(--brand-teal); }
  .nav-breakpoint-lg .t4-palette-dark .t4-megamenu .navbar-nav > li a:hover,
  .nav-breakpoint-lg .t4-palette-dark .t4-megamenu .navbar-nav > li .nav-link:hover,
  .nav-breakpoint-lg .t4-palette-dark .t4-megamenu .navbar-nav > li a:focus,
  .nav-breakpoint-lg .t4-palette-dark .t4-megamenu .navbar-nav > li .nav-link:focus,
  .nav-breakpoint-lg .t4-palette-dark .t4-megamenu .navbar-nav > li.animating a,
  .nav-breakpoint-lg .t4-palette-dark .t4-megamenu .navbar-nav > li.animating .nav-link { color: var(--bg-panel-2); }
}

/* Mobile theme/font toggles are rendered inside #t4-megamenu-mainmenu
   itself (spliced in via elements/megamenu.php), so they collapse and
   show together with the mobile nav automatically — no JS or :has()
   sibling logic needed. Hidden again at desktop widths, where the
   header-toggles module renders separately via .header-grid-end. */
.header-toggles-mobile{align-items:center;display:flex;gap:1rem;margin-top:1rem}
.header-toggles-mobile > div.custom{width:100%}

@media (min-width: 992px) {
  .header-toggles-mobile { display: none !important; }
}

/* ---------- Special Announcement ---------- */
.announcement{background:var(--bg-panel);border:1px solid var(--border-soft);border-left:4px solid var(--gold);border-radius:8px;margin:2rem auto;max-width:700px;padding:1.5rem 1.75rem}
.announcement-header{align-items:baseline;display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between;margin-bottom:.75rem}
.announcement-title{align-items:center;color:var(--gold-soft);display:inline-flex;font-size:1.1rem;font-weight:700;gap:.6rem;letter-spacing:.03em;margin:0}
.announcement-title .dot{animation:pulse 2.2s ease-in-out infinite;background:var(--gold);border-radius:50%;box-shadow:0 0 8px 2px rgba(var(--gold-rgb),.7);flex-shrink:0;height:9px;width:9px}
.announcement-date{color:var(--text-muted);font-size:.85rem;white-space:nowrap}
.announcement-text{color:var(--text-main);line-height:1.6;margin-bottom:1rem}
.announcement-links{color:var(--text-muted);font-size:.9rem;list-style:none;margin:0;padding:0}
.announcement-links li{margin-bottom:.3rem}
.announcement-links a{color:var(--brand-teal-light);word-break:break-word}

/* ---------- Hero ---------- */
.hero{min-height:92vh;padding:3rem 1rem;position:relative}
.hero-content{max-width:640px}
.hero-logo{filter:drop-shadow(0 0 18px rgba(var(--brand-teal-light-rgb),.35));height:auto;max-width:70vw;width:auto}
.hero-title{color:var(--text-main);font-size:clamp(2.2rem,6vw,3.6rem);font-weight:700;margin-bottom:.25rem;text-shadow:0 0 24px rgba(var(--brand-teal-light-rgb),.25)}
.hero-tagline{color:var(--gold-soft);font-family:var(--font-body);font-size:1.25rem;font-style:italic;font-weight:400;letter-spacing:.08em;margin-bottom:1.5rem}
.hero-badge{align-items:center;background:rgba(var(--overlay-rgb),.04);border:1px solid var(--border-soft);border-radius:999px;color:var(--text-muted);display:inline-flex;font-size:.85rem;gap:.6rem;max-width:100%;padding:.55rem 1.1rem}
.hero-badge .dot{animation:pulse 2.2s ease-in-out infinite;background:var(--gold);border-radius:50%;box-shadow:0 0 8px 2px rgba(var(--gold-rgb),.7);flex-shrink:0;height:8px;width:8px}
.hero-content--split{align-items:stretch;display:flex;gap:2rem;max-width:900px;text-align:left}
.hero-content--split .hero-logo-wrap{align-items:center;align-self:stretch;display:flex;flex:0 0 auto;justify-content:center;width:160px}
.hero-content--split .hero-logo{filter:drop-shadow(0 0 18px rgba(var(--brand-teal-light-rgb),.35));height:100%;object-fit:contain;width:100%}
.hero-text{display:flex;flex:1;flex-direction:column;justify-content:center;min-width:0}
.hero-text h1 {margin-top:0;}
@media (max-width:767.98px){
  .hero-content--split{align-items:center;flex-direction:column;text-align:center}
  .hero-content--split .hero-logo-wrap{align-self:auto;height:auto;max-height:180px;width:auto}
  .hero-content--split .hero-logo{height:auto;max-height:180px;width:auto}
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.btn-outline-glow{background:rgba(var(--brand-teal-light-rgb),.08);border:1px solid var(--brand-teal-light);border-radius:999px;color:var(--text-main);font-family:var(--font-body);letter-spacing:.04em;padding:.65rem 1.6rem;transition:all .25s ease}
.btn-outline-glow:hover{background:var(--brand-teal-light);box-shadow:0 0 22px rgba(var(--brand-teal-light-rgb),.55);color:#04121c}

/* ---------- Sections ---------- */
main section{border-top:1px solid var(--border-soft);position:relative}
.section-heading{color:var(--text-main);font-size:clamp(1.6rem,4vw,2.2rem);font-weight:600;margin-bottom:.75rem}
.section-heading::after{background:linear-gradient(90deg,var(--brand-teal-light),var(--gold));border-radius:3px;content:"";display:block;height:3px;margin:.6rem auto 0;width:56px}
.section-subheading{color:var(--text-muted);font-size:1.25rem}
.about-text{color:#d7e3ec;font-weight:300}
.about-history{color:#d7e3ec;font-weight:300;line-height:1.7;margin:1.75rem auto 0;text-align:left}
.about-history p{font-size:1.25rem; margin-bottom:1rem}
.about-history p:last-child{margin-bottom:0}
.location-note{color:var(--text-muted);font-size:1rem}
.location-note a{color:var(--brand-teal-light)}

/* ---------- Join/Membership CTA button ---------- */
.btn-join{align-items:center;background:rgba(var(--brand-teal-light-rgb),.08);border:1px solid var(--brand-teal-light);border-radius:999px;color:var(--text-main);cursor:pointer;display:inline-flex;font-family:var(--font-body);font-weight:600;gap:.5rem;letter-spacing:.03em;text-decoration:none;transition:background .3s ease,box-shadow .3s ease,color .3s ease,transform .15s ease}
.btn-join:hover{background:linear-gradient(135deg,var(--brand-teal),var(--brand-teal-light));box-shadow:0 0 18px rgba(var(--brand-teal-light-rgb),.5);color:var(--bg-deep);transform:translateY(-1px)}
.btn-join:focus-visible{outline:2px solid var(--text-main);outline-offset:3px}
.btn-join--header{font-size:.85rem;padding:.5em 1.2em}
.btn-join--hero{font-size:1.05rem;padding:.85em 2em}
.btn-join--hero:hover{box-shadow:0 0 30px rgba(var(--gold-rgb),.4)}

/* ---------- Social / contact links ---------- */
.social-links{font-size:.9rem;color:var(--text-muted)}
.social-links a{color:var(--brand-teal-light);text-decoration:none}
.social-links a:hover{text-decoration:underline}
.social-sep{color:var(--text-muted);margin:0 .4rem}
.footer-links{margin-bottom:.4rem;font-size:.85rem}
.footer-links a{color:var(--brand-teal-light);text-decoration:none}
.footer-links a:hover{text-decoration:underline}

/* ---------- Filter bar ---------- */
.filter-chip{border:1px solid var(--border-soft);background:rgba(var(--overlay-rgb),.03);color:var(--text-muted);padding:.4rem 1rem;border-radius:999px;font-size:.85rem;letter-spacing:.02em;transition:all .2s ease;cursor:pointer}
.filter-chip:hover{border-color:var(--brand-teal-light);color:var(--text-main)}
.filter-chip.active{background:var(--brand-teal);border-color:var(--brand-teal-light);color:var(--color-white);box-shadow:0 0 14px rgba(var(--brand-teal-rgb),.6)}

/* ---------- Timeline ---------- */
.timeline{margin:0 auto;max-width:780px;padding-left:2.2rem;position:relative}
.timeline::before{background:linear-gradient(180deg,var(--brand-teal-light),rgba(var(--brand-teal-light-rgb),.05));bottom:.3rem;content:"";left:.5rem;position:absolute;top:.3rem;width:2px}
.timeline-month{color:var(--gold-soft);font-family:var(--font-body);font-size:1rem;letter-spacing:.12em;margin:2.2rem 0 1rem;position:relative;text-transform:uppercase}
.timeline-month:first-child{margin-top:0}
.timeline-item{border-radius:10px;margin-bottom:.6rem;padding:.9rem 0 .9rem 1.4rem;position:relative;transition:background .2s ease,transform .2s ease}
.timeline-item::before{background:var(--bg-deep);border:2px solid var(--brand-teal-light);border-radius:50%;content:"";height:11px;left:-1.72rem;position:absolute;top:1.35rem;transition:box-shadow .2s ease;width:11px}
.timeline-item.special::before{border-color:var(--gold);box-shadow:0 0 10px 2px rgba(var(--gold-rgb),.5)}
.timeline-item:hover{background:rgba(var(--overlay-rgb),.03);transform:translateX(3px)}
.timeline-item .ti-row{align-items:baseline;display:flex;flex-wrap:wrap;gap:.5rem .9rem}
.ti-date{color:var(--text-main);font-family:var(--font-body);font-size:.95rem;font-weight:600;min-width:132px}
.ti-time{background:rgba(var(--brand-teal-light-rgb),.1);border-radius:6px;color:var(--brand-teal-light);font-size:.82rem;padding:.1rem .5rem;white-space:nowrap}
.timeline-item.special .ti-time{background:rgba(var(--gold-rgb),.12);color:var(--gold-soft)}
.ti-title{color:var(--text-main);flex-basis:100%;font-size:1.02rem;font-weight:500;margin-top:.15rem}
.ti-title.ti-link{align-items:baseline;cursor:pointer;display:inline-flex;flex-wrap:wrap;gap:.5rem;text-decoration:none}
.ti-title.ti-link:hover{color:var(--brand-teal-light)}
.ti-title.ti-link:hover .ti-link-icon{transform:translate(2px,-2px)}
.ti-link-icon{color:var(--brand-teal-light);font-size:.85em;transition:transform .2s ease}
.ti-link-label{border:1px solid var(--border-soft);border-radius:5px;color:var(--text-muted);font-size:.72rem;letter-spacing:.05em;padding:.05rem .4rem;text-transform:uppercase}
.ti-desc{color:var(--text-muted);flex-basis:100%;font-size:.86rem;line-height:1.5;margin-top:.35rem}
.ti-badge{border:1px solid rgba(var(--gold-rgb),.4);border-radius:6px;color:var(--gold-soft);display:inline-block;font-size:.72rem;letter-spacing:.06em;padding:.05rem .45rem;text-transform:uppercase}
.timeline-empty{color:var(--text-muted);font-style:italic;padding:2rem 0;text-align:center}
.analemma-events-module .timeline-item::before {height: 1rem;left: -2.1rem; width: 1rem;}

/* ---------- Theme swatch toggle ---------- */
/* Swatch backgrounds are intentionally hardcoded per-theme literals,
   not tied to the reactive --brand-teal variables: each swatch must
   always preview its own theme's colors regardless of which theme
   is currently active on the page. */
.theme-toggle-wrap{align-items:center;display:flex;gap:.5rem}
.theme-swatch{border:2px solid var(--border-soft);border-radius:50%;cursor:pointer;height:20px;padding:0;transition:transform .15s ease,border-color .15s ease;width:20px}
.theme-swatch:hover{transform:scale(1.12)}
.theme-swatch:focus-visible{outline:2px solid var(--text-main);outline-offset:2px}
.theme-swatch[aria-pressed="true"]{border-color:var(--text-main);box-shadow:0 0 0 2px var(--bg-deep),0 0 0 4px var(--text-main)}
.theme-swatch[data-theme-value="blue"]{background:linear-gradient(135deg,#0e6690,#2ba0cf)}
.theme-swatch[data-theme-value="black"]{background:linear-gradient(135deg,#060606,#7a7a7a)}
.theme-swatch[data-theme-value="purple"]{background:linear-gradient(135deg,#0b0616,#6d3fa0)}
.theme-swatch[data-theme-value="light"]{background:linear-gradient(135deg,#eef5fa,#128dc0)}
/* ---------- Light Theme Overrides  ---------- */
[data-theme="light"] .about-text,
[data-theme="light"] .about-history{color:var(--text-muted)}
[data-theme="light"] .t4-header .logo-image img{filter: drop-shadow(0rem 0rem 0rem rgba(0, 0, 0, 1));}
[data-theme="light"] .t4-palette-dark .t4-megamenu .navbar-nav > li.active > a, 
[data-theme="light"] .t4-palette-dark .t4-megamenu .navbar-nav > li.active > .nav-link,
[data-theme="light"] .t4-palette-dark .t4-megamenu .navbar-nav > li a:hover,
[data-theme="light"] .t4-palette-dark .t4-megamenu .navbar-nav > li .nav-link:hover{color:var(--brand-teal);}


/* ---------- Footer ---------- */
footer{border-top:1px solid var(--border-soft);color:var(--text-muted);font-size:.85rem}
.t4-footer .container{margin:0 auto;padding:0}
.footer-sub{font-size:.78rem;opacity:.7}

/* ---------- Responsive ---------- */
@media (max-width: 576px) {
  .timeline { padding-left: 1.6rem; }
  .ti-date { min-width: 100%; }
}