<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">


<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">


<link rel="apple-touch-icon" sizes="180x180" href="/outreach/apple-touch-icon.png">
<meta name="theme-color" content="#800000" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#ff8c00" media="(prefers-color-scheme: dark)">


<meta name="msapplication-TileColor" content="#800000">
<meta name="msapplication-config" content="/outreach/browserconfig.xml">





<link rel="preconnect" href="https://translate.google.com">
<link rel="dns-prefetch" href="https://translate.googleapis.com">
<link rel="preload" href="/outreach/fonts/Atkinson/AtkinsonHyperlegibleNext-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/outreach/fonts/Noto Sans/Tamil/NotoSansTamil-VariableFont_wdth,wght.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/outreach/fonts/Noto Sans/Devanagari/NotoSansDevanagari-VariableFont_wdth,wght.ttf" as="font" type="font/ttf" crossorigin>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />


<title>IMSc Outreach | IMSc Outreach</title>
<meta name="description" content="Outreach programs from the Institute of Mathematical Sciences">

<link rel="canonical" href="https://www.imsc.res.in/outreach/events/open-day/2026/event.ics">
<link rel="author" href="/outreach/humans.txt">



<meta property="og:type" content="website">

<meta property="og:site_name" content="IMSc Outreach">
<meta property="og:title" content="IMSc Outreach">
<meta property="og:description" content="Outreach programs from the Institute of Mathematical Sciences">
<meta property="og:url" content="https://www.imsc.res.in/outreach/events/open-day/2026/event.ics">





<meta property="og:image" content="https://www.imsc.res.in/outreach/img/logo/og_image.png">

<meta property="og:image:alt" content="IMSc Outreach">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">



<meta property="article:tag" content="event">




<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@IMScChennai">
<meta name="twitter:creator" content="@IMScChennai">
<meta name="twitter:title" content="IMSc Outreach">
<meta name="twitter:description" content="Outreach programs from the Institute of Mathematical Sciences">



<meta name="twitter:image" content="https://www.imsc.res.in/outreach/img/logo/og_image.png">

<meta name="twitter:image:alt" content="IMSc Outreach">


<link rel="alternate" href="/outreach/feed/feed.xml" type="application/atom+xml" title="IMSc Outreach">
<meta name="generator" content="Eleventy v3.1.2">


<link rel="shortcut icon" href="/outreach/img/logo/IMSc_logo_shape.png" type="image/png">




<!-- JSON-LD Structured Data for Articles -->
<!-- Provides rich search results in Google -->


<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "Event",
	"name": "",
	"description": "BEGIN:VCALENDAR VERSION:2.0 PRODID:-//IMSc Outreach//Event Calendar//EN CALSCALE:GREGORIAN METHOD:PUBLISH BEGIN:VEVENT UID:-events-open-day-2026-@imsc.res.in...",
	"url": "https://www.imsc.res.in/outreach/events/open-day/2026/event.ics",
	"startDate": "Invalid DateTime",
	
	
	"organizer": {
		"@type": "Organization",
		"name": "The Institute of Mathematical Sciences",
		"url": "https://www.imsc.res.in/",
		"logo": {
			"@type": "ImageObject",
			"url": "https://www.imsc.res.in/outreach/img/logo/IMSc_logo_shape.png"
		}
	},
	
	
	"image": "https://www.imsc.res.in/outreach/img/logo/og_image.png",
	"eventStatus": "https://schema.org/EventScheduled",
	"eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
	"isAccessibleForFree": true,
	"inLanguage": "en"
}
</script>



<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "BreadcrumbList",
	"itemListElement": [
		{
			"@type": "ListItem",
			"position": 1,
			"name": "Home",
			"item": "https://www.imsc.res.in/outreach"
		},
		{
			"@type": "ListItem",
			"position": 2,
			"name": "",
			"item": "https://www.imsc.res.in/outreach/events/open-day/2026/event.ics"
		}
	]
}
</script>


		


		




		



		










		



		


	<link rel="stylesheet" href="/outreach/css/carousel.css">
	<link rel="stylesheet" href="/outreach/css/prism.css">


































	














		<style>:root {
    /* Color palette - Light mode */
    --color-bg: #ffffff;
    --color-fg: #111111;
    --color-muted: #666666;
    --color-border: #e6e6e6;
    --maroon: #9f1d35;
    --orange: #ffa500;
    --color-chip-bg: #f1f1f1;
    --color-chip-fg: #333333;
    --link-color: var(--maroon);
    --link-hover: var(--maroon);

    /* Modular typography scale (Major Third - 1.25 ratio) */
    --ratio: 1.25;
    --base-size: 1rem;
    --text-xs: calc(var(--base-size) / var(--ratio) / var(--ratio));
    /* 0.64rem */
    --text-sm: calc(var(--base-size) / var(--ratio));
    /* 0.8rem */
    --text-base: var(--base-size);
    /* 1rem */
    --text-lg: calc(var(--base-size) * var(--ratio));
    /* 1.25rem */
    --text-xl: calc(var(--base-size) * var(--ratio) * var(--ratio));
    /* 1.563rem */
    --text-2xl: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio));
    /* 1.953rem */
    --text-3xl: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio));
    /* 2.441rem */

    /* Spacing scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Focus ring */
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--maroon);

    /* Theme colors */
    --color-gray-20: #e0e0e0;
    --color-gray-50: #C0C0C0;
    --color-gray-90: #333;

    --background-color: #fff;

    --text-color: var(--color-gray-90);
    --text-color-link: #082840;
    --text-color-link-active: var(--maroon);
    --text-color-link-visited: var(--text-color-link);
    --text-color-link-hover: var(--maroon);

    --syntax-tab-size: 2;

    --nav-text-color: var(--maroon);

    /* Font Defaults */
    --font-sans-serif: 'Atkinson Hyperlegible', Helvetica, -apple-system, "Segoe UI", Roboto;
    --font-mono: 'IBM Plex Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
}

/* Enhanced dark mode with proper contrast (WCAG AAA) */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #1a1a1a;
        /* Not pure black - reduces eye strain */
        --color-fg: #f5f5f5;
        /* Not pure white - easier on eyes */
        --color-muted: #b0b0b0;
        /* Improved contrast */
        --color-border: #404040;
        /* Better visibility */
        --color-chip-bg: #2a2a2a;
        --color-chip-fg: #e0e0e0;
        --link-color: var(--orange);
        --link-hover: #ffffff;
        --maroon: var(--orange);
        /* Replace maroon with orange in dark mode */
        --focus-ring-color: var(--orange);

        /* Theme Overrides */
        --color-gray-20: #e0e0e0;
        --color-gray-50: #C0C0C0;
        --color-gray-90: #dad8d8;

        /* --text-color is assigned to --color-gray-_ above */
        --text-color-link: white;
        --text-color-link-active: var(--orange);
        --text-color-link-visited: var(--text-color-link);
        --text-color-link-hover: var(--orange);

        --background-color: black;

        --nav-text-color: var(--orange);
    }
}

/* Language-specific font stacks */
html:lang(ta),
html[lang="ta"],
.lang-tamil {
    --font-sans-serif: 'Noto Sans Tamil', 'Atkinson Hyperlegible', sans-serif;
}

html:lang(hi),
html[lang="hi"],
.lang-hindi {
    --font-sans-serif: 'Noto Sans Devanagari', 'Atkinson Hyperlegible', sans-serif;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
/* Basic Rest Styles */
* {
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    /* iOS momentum scrolling */
}

html {
    color: var(--color-fg);
    background: var(--color-bg);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-y: scroll;
    /* Prevent layout shift when scrollbar appears/disappears */
    scrollbar-gutter: stable;
}

@view-transition {
    navigation: auto;
}

body {
    padding: 0;
    margin: 0 auto;
    font-family: var(--font-sans-serif);
    color: var(--text-color);
    background-color: var(--background-color);
    max-width: 65em;
    min-height: 100vh;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

/* Mobile Polish */
@media (max-width: 640px) {
    main {
        padding: 1rem 0.5rem;
    }
}

/* Base Elements */
main,
footer {
    padding: 1rem;
}

main :first-child {
    margin-top: 0;
}

/* Images and Media */
img {
    max-width: 100%;
}

img[width][height] {
    height: auto;
}

img[src$=".svg"] {
    width: 100%;
    height: auto;
    max-width: none;
}

video,
iframe {
    width: 50%;
    height: auto;
}

iframe {
    aspect-ratio: 16/9;
}

/* Dark Mode Media adjustments */
@media (prefers-color-scheme: dark) {

    /* Reduce image brightness in dark mode */
    img {
        filter: brightness(0.9);
    }

    /* Ensure sufficient contrast for all text */
    body {
        text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
    }
}

/* Accessibility Helpers */
/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Comprehensive focus management */
*:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: 2px;
    transition: outline-offset 0.2s ease;
}

/* Remove focus on mouse click (but keep for keyboard) */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus for interactive elements */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-width: var(--focus-ring-width);
    outline-offset: 0;
}

/* ============================================
   MOBILE UX IMPROVEMENTS
   ============================================ */

/* Text-wrap balance for cleaner headlines (no orphans) */
h1,
h2,
h3 {
    text-wrap: balance;
}

/* CLS Prevention - Reserve space for images before load */
.event-row__image,
.nl-row img,
.card-image img {
    aspect-ratio: 1 / 1;
    background-color: var(--color-bg-secondary);
}

/* Header images typically 16:9 */
.header-image,
.event-header-image img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--color-bg-secondary);
}

/* Safe Area Insets for notched devices */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Fixed headers should respect safe areas */
    header {
        padding-top: env(safe-area-inset-top);
    }

    /* Fixed footers should respect safe areas */
    footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Touch Target Sizing - Minimum 44x44px for accessibility */
a,
button,
input[type="submit"],
input[type="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* Inline links don't need min dimensions */
p a,
li a,
td a,
span a {
    min-height: auto;
    min-width: auto;
}

/* Disable tap highlight for cleaner mobile UX */
a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

/* Ensure active state still provides feedback */
a:active,
button:active {
    opacity: 0.8;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}
/* Font Definitions */
@font-face {
    font-family: 'Atkinson';
    src: url('../fonts/Atkinson/AtkinsonHyperlegibleNext-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Tamil';
    src: url('/fonts/Noto Sans/Tamil/NotoSansTamil-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 62.5% 100%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Devanagari';
    src: url('/fonts/Noto Sans/Devanagari/NotoSansDevanagari-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 62.5% 100%;
    font-style: normal;
    font-display: swap;
}

/* Fluid typography using modular scale */
h1 {
    font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
    scroll-margin-top: 80px;
}

h2 {
    font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
    scroll-margin-top: 80px;
}

h3 {
    font-size: clamp(var(--text-lg), 2.4vw, var(--text-xl));
    scroll-margin-top: 80px;
}

h4 {
    font-size: var(--text-lg);
    scroll-margin-top: 80px;
}

h5,
h6 {
    font-size: var(--text-base);
    scroll-margin-top: 80px; /* Account for fixed header when scrolling to anchor */
}

/* Adjust scroll-margin for mobile */
@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6 {
        scroll-margin-top: 60px; /* Match mobile header height */
    }
    
    /* Account for safe area insets on notched devices */
    @supports (padding: env(safe-area-inset-top)) {
        h1, h2, h3, h4, h5, h6 {
            scroll-margin-top: calc(60px + env(safe-area-inset-top));
        }
    }
}

body,
p,
li {
    font-size: clamp(var(--text-base), 1.6vw, var(--text-lg));
    line-height: 1.5;
}

p:last-child {
    margin-bottom: 0;
}

small {
    font-size: var(--text-sm);
}

.text-xs {
    font-size: var(--text-xs);
}

/* Heading Anchors */
.header-anchor {
    text-decoration: none !important;
    opacity: 0;
    margin-left: 0.5rem;
    color: var(--color-muted);
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
    font-weight: normal;
    font-size: 0.8em;
}

h1:hover .header-anchor,
h2:hover .header-anchor,
h3:hover .header-anchor,
h4:hover .header-anchor,
h5:hover .header-anchor,
h6:hover .header-anchor {
    opacity: 1;
}

.header-anchor:hover {
    color: var(--link-color) !important;
}

.header-anchor:focus-visible {
    opacity: 1;
}

/* Ensure headings links (if any) don't have hover effects like underlines */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    text-decoration: none;
    color: inherit;
}

/* Links */
a {
    color: var(--link-color);
    text-decoration: underline;
    /* Always underline for accessibility (WCAG) */
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: rgba(0, 0, 0, 0.3);
    /* Black underline in light mode */
    transition: text-decoration-thickness 0.15s ease, text-decoration-color 0.15s ease;
}

a[href] {
    color: var(--text-color-link);
}

a[href]:visited {
    color: var(--text-color-link-visited);
}

a[href]:hover,
a[href]:active {
    color: var(--text-color-link-active);
}

/* Hover state - just thicker underline, no background */
a:hover {
    text-decoration-thickness: 2px;
    text-decoration-color: var(--link-color);
}

/* Dark mode - white underline */
@media (prefers-color-scheme: dark) {
    a {
        text-decoration-color: #ffffff66;
        /* grey underline in dark mode */
    }

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

/* Remove underline from links containing only images */
a:has(> img:only-child) {
    text-decoration: none;
}

a:has(> img:only-child):hover {
    text-decoration: none;
}

/* Navigation and button-like links don't need underline */
nav a,
.chip,
.button,
a[role="button"],
header a,
.newsletter-modal-trigger {
    text-decoration: none;
}

nav a:hover,
.chip:hover,
.button:hover,
a[role="button"]:hover,
header a:hover,
.newsletter-modal-trigger:hover {
    text-decoration: none;
}

/* Code */
pre,
code {
    font-family: var(--font-family-monospace);
    font-family: var(--font-mono);
    /* Use variable */
}

pre:not([class*="language-"]) {
    margin: .5em 0;
    line-height: 1.375;
    /* 22px /16 */
    -moz-tab-size: var(--syntax-tab-size);
    -o-tab-size: var(--syntax-tab-size);
    tab-size: var(--syntax-tab-size);
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    overflow-x: auto;
}

code {
    word-break: break-all;
}

/* Table default styles */
table,
td,
th {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 0.5rem;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #ddd;
}

th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: var(--maroon);
    color: white;
}

tr {
    padding-top: 12px;
    padding-bottom: 12px;
}
/* Header Layout */
header.header-standard {
    /* Layout handled by .header-content */
    padding: 0.15em 1em;
    border-bottom: 1px solid var(--color-border);
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 65em;
    /* Match body max-width */
    z-index: 1000;
    transition: transform 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
    min-height: 40px;
    background-color: var(--color-bg);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.header-content {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
}

.mobile-nav-container {
    display: none;
}

/* Ensure body has padding to account for fixed header */
body {
    padding-top: 80px !important; /* Use !important to override base.css padding: 0 */
}

/* Desktop: show header on scroll up, hide on scroll down */
@media (min-width: 769px) {
    /* Header hide-on-scroll disabled - kept for future use
    header.header-hidden {
        transform: translateY(-100%);
    }
    */

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

/* Mobile: Standard header adapts */
@media (max-width: 768px) {
    /* Adjust body padding for mobile header height */
    body {
        padding-top: 60px !important;
    }
    
    /* Account for safe area insets on notched devices */
    @supports (padding: env(safe-area-inset-top)) {
        body {
            padding-top: calc(60px + env(safe-area-inset-top)) !important;
        }
    }

    /* Hide desktop nav */
    header.header-standard .nav-overlay,
    header.header-standard .nav {
        display: none;
    }

    /* Adjust logo for mobile */
    .home-link {
        flex-grow: 1;
    }

    #logo-3d-header img {
        width: 32px;
        height: 32px;
    }

    /* Ensure header remains visible */
    header.header-standard {
        display: flex !important;
        justify-content: space-between;
        min-height: 60px; /* Ensure consistent height on mobile */
    }
}

/* Hamburger Menu Integration */
.hamburger {
    cursor: pointer;
    position: relative;
    width: 48px;
    height: 48px;
    transition: all 0.25s;
    z-index: 10002;
    display: none;
    /* Hidden by default, shown on mobile */
    margin-left: auto;
}

.hamburger__top-bun,
.hamburger__bottom-bun {
    content: '';
    display: block;
    position: absolute;
    left: 15px;
    width: 18px;
    height: 1px;
    background: var(--color-fg);
    transform: rotate(0);
    transition: all 0.25s;
}

.hamburger__top-bun {
    top: 23px;
    transform: translateY(-3px);
}

.hamburger__bottom-bun {
    bottom: 23px;
    transform: translateY(3px);
}

.open {
    transform: rotate(90deg);
}

.open .hamburger__top-bun {
    transform: rotate(45deg) translateY(0px);
}

.open .hamburger__bottom-bun {
    transform: rotate(-45deg) translateY(0px);
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mobile Nav Overlay */
    .mobile-nav-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: var(--color-bg);
        z-index: 10001;
        display: flex;
        flex-direction: column;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        padding-top: 60px;
        /* Space for header */
    }

    .mobile-nav-container.active {
        opacity: 1;
        visibility: visible;
    }

    body.menu-open {
        overflow: hidden;
    }

    .mobile-nav-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-nav-link {
        font-size: 1.5rem;
        font-weight: 500;
        color: var(--color-fg);
        text-decoration: none;
    }

    .mobile-nav-link:hover {
        color: var(--maroon);
    }
}

@media (prefers-color-scheme: dark) {
    header {
        background-color: var(--color-bg);
    }

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

.home-link {
    font-size: 0.95em;
    font-weight: 700;

    display: flex;
    align-items: center;
    gap: 0.4em;
}

.home-link h1 {
    margin: 0;
    line-height: 1;
    font-size: 1.5rem;
    /* Ensure consistent size */
}

.home-link:link:not(:hover) {
    text-decoration: none;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100px;
    right: 0;
    background: var(--maroon);
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 1000;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 0 0 0 4px;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}

/* Prevent visually-hidden skip link from pushing content around when focused */
.skip-link.visually-hidden:focus {
    position: absolute;
    top: 1rem;
    left: 1rem;
    /* Ensure it is positioned on top of everything else when it is shown */
    z-index: 999;
}
/* Footer Layout */
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-top: 1px dashed var(--color-gray-20);
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-minimal {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.footer-minimal .copyright {
    margin-top: 0.5rem;
}

.footer-minimal .footer-logos img {
    width: 80px;
    height: auto;
}

.footer-contact {
    line-height: 1.6;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.contact-item a[href^="tel:"],
.contact-item a[href^="fax:"] {
    text-decoration: none;
    border-bottom: none;
}

.contact-icon {
    width: 1.2rem;
    text-align: center;
    color: var(--maroon);
}

footer svg.social-icon {
    fill: currentColor;
    width: 24px;
    height: 24px;
}

footer svg.social-icon:hover {
    color: var(--maroon);
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.social-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.social-item:hover {
    color: var(--maroon);
    text-decoration: none;
}

/* Since Twitter/X and Facebook have a shared username, 
   only the icons should change on hover, not the username */
.social-item-grouped:hover {
    color: var(--color-muted);
}

.social-item-grouped .social-username {
    color: var(--color-fg);
    transition: none;
}

.social-username {
    font-size: 0.9rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    footer {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        text-align: center;
    }

    .footer-minimal {
        align-items: center;
    }

    .social-links {
        width: 100%;
        justify-content: center;
    }

    footer svg {
        width: 24px;
        height: 24px;
    }

    footer img {
        align-self: center;
        max-width: 150px;
    }

    .contact-item {
        justify-content: center;
    }
}

.footer-logos img {
    width: 150px;
    height: auto;
}

.footer-logos {
    align-items: flex-start;
}
/* Grid Layout - Layout Container */

.content-split {
    display: flex;
    gap: 2em;
}

.content-main {
    flex: 2;
}

.content-sidebar {
    flex: 1;
}

@media (max-width: 768px) {
    .content-split {
        flex-direction: column;
        /* Stacks the columns on top of each other */
    }

    .layout-sidebar::before {
        display: none;
    }

    .layout-sidebar {
        padding-left: 0;
        margin-top: 2rem;
    }
}

.layout-container {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap on small screens */
    gap: 2em;
    /* Adjust the space between main content and sidebar */
    padding: 1em;
    /* Adds some space around the whole container */
}

.layout-main {
    flex: 3;
    /* Main content takes up 3 parts of the available space */
    min-width: 300px;
    /* Prevents the main content from getting too squished */
}

/* Remove default margin from first element in layout-main */
.layout-main> :first-child {
    margin-top: 0;
}

/* Ensure heading is visible on mobile - add padding-top to main content */
@media (max-width: 768px) {
    .layout-main {
        padding-top: 1rem;
    }
    
    /* Ensure first h1 has proper spacing from header */
    .layout-main > h1:first-child {
        margin-top: 0;
        padding-top: 0.5rem;
    }
}

.layout-sidebar {
    flex: 1;
    /* Sidebar takes up 1 part of the available space */
    min-width: 250px;
    /* Ensures the sidebar has a minimum width */
    position: relative;
    /* For the separator */
    padding-left: 2rem;
}

/* Apple-style vertical separator */
.layout-sidebar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed var(--color-gray-20);
}

.layout-container.base-no-sidebar .layout-main {
    flex: 1;
    width: 100%;
}
/* Navigation Component */

.nav {
    display: flex;
    gap: .5em 2rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav-item {
    display: inline-block;
}

.nav-item a[href] {
    color: var(--text-color);
    position: relative;
    padding-bottom: 4px;
}

.nav-overlay {
    display: none;
}

/* Bottom Navigation Bar - Mobile Only */
.bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .nav-overlay {
        display: none;
    }

    .bottom-nav {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background-color: var(--color-bg);
        border-top: 1px solid var(--color-border);
        padding-bottom: env(safe-area-inset-bottom);
        backdrop-filter: blur(20px);
        background-color: rgba(255, 255, 255, 0.95);
    }

    .bottom-nav__list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
        height: 65px;
    }

    .bottom-nav__item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .bottom-nav__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 12px;
        text-decoration: none;
        color: var(--color-muted);
        transition: color 0.2s ease, transform 0.2s ease;
        cursor: pointer;
        background: none;
        border: none;
        font-family: inherit;
        min-width: 60px;
        position: relative;
    }

    .bottom-nav__link i {
        font-size: 22px;
        transition: transform 0.2s ease;
    }

    .bottom-nav__label {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.01em;
    }

    .bottom-nav__link:active {
        transform: scale(0.95);
    }

    /* Improve tap highlight */
    .bottom-nav__link {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .bottom-nav__link--active {
        color: var(--maroon);
    }

    .bottom-nav__link--active i {
        transform: scale(1.1);
    }

    /* Language menu popup */
    .bottom-nav__lang-menu {
        position: absolute;
        bottom: 100%;
        right: 0;
        background-color: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        margin-bottom: 8px;
        min-width: 140px;
        overflow: hidden;
        backdrop-filter: blur(20px);
        background-color: rgba(255, 255, 255, 0.95);
    }

    .bottom-nav__lang-option {
        display: block;
        width: 100%;
        padding: 12px 16px;
        text-align: left;
        background: none;
        border: none;
        border-bottom: 1px solid var(--color-border);
        font-family: inherit;
        font-size: 15px;
        color: var(--color-fg);
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .bottom-nav__lang-option:last-child {
        border-bottom: none;
    }

    .bottom-nav__lang-option:active {
        background-color: var(--color-chip-bg);
    }

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        .bottom-nav {
            background-color: rgba(15, 15, 16, 0.95);
            border-top-color: rgba(255, 255, 255, 0.1);
        }

        .bottom-nav__link--active {
            color: var(--orange);
        }

        .bottom-nav__lang-menu {
            background-color: rgba(15, 15, 16, 0.95);
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        }

        .bottom-nav__lang-option {
            border-bottom-color: rgba(255, 255, 255, 0.1);
        }

        .bottom-nav__lang-option:active {
            background-color: rgba(255, 255, 255, 0.1);
        }
    }
}


.nav-item a[href]:hover {
    color: var(--maroon);
    text-decoration: none !important;
}

.nav-item a[href]:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--maroon);
}

.nav a[href][aria-current="page"] {
    color: var(--nav-text-color);
    font-weight: 600;
    text-decoration: none !important;
}

.nav a[href][aria-current="page"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--maroon);
}

@media (prefers-color-scheme: dark) {
    .nav-item a[href]:hover {
        color: #ffffff;
    }

    .nav-item a[href]:hover::after {
        background-color: #ffffff;
    }

    .nav a[href][aria-current="page"]::after {
        background-color: var(--orange);
    }
}

/* Links Helper for pagination */
.links-nextprev {
    display: flex;
    justify-content: space-between;
    gap: .5em 1em;
    list-style: "";
    border-top: 1px dashed var(--color-gray-20);
    padding: 1em 0;
}

.links-nextprev>* {
    flex-grow: 1;
}

.links-nextprev-next {
    text-align: right;
}
/* Global chips */
.chips {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.chip {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px !important;
    line-height: 1.2;
    min-height: auto;
    min-width: auto;

    background: var(--color-chip-bg);
    color: var(--color-chip-fg) !important;
    /* keep text visible on light chips */
    text-decoration: none !important;
    font-size: 0.85rem;
    font-weight: 300;
    transition: background-color 0.2s ease, color 0.2s ease;
    box-shadow: none !important;
}

.chip:hover {
    background: var(--maroon);
    text-decoration: none !important;
    color: #ffffff !important;
    /* ensure contrast when chip fills */
    box-shadow: none !important;
}

@media (prefers-color-scheme: dark) {
    .chip:hover {
        background: orange;
        color: black !important;
        /* Ensure text remains readable on orange background */
    }
}
/* Button Components */

/* shared/primary button base style */
.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: var(--maroon) !important;
    border: 1px solid var(--maroon);
    border-radius: 999px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--font-sans-serif);
    transition: all 0.2s ease;
    cursor: pointer;
    margin: 0.5rem 0;
    width: auto;
    line-height: 1.5;
    box-sizing: border-box;
}

.primary-button:hover:not(.disabled):not(:disabled) {
    background: var(--maroon);
    color: white !important;
}

.primary-button:active:not(.disabled):not(:disabled) {
    transform: translateY(0);
}

.primary-button.disabled,
.primary-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-bg-alt);
    color: var(--color-muted) !important;
    border-color: var(--color-muted);
    box-shadow: none;
    pointer-events: none;
}

@media (prefers-color-scheme: dark) {
    .primary-button {
        color: var(--orange) !important;
        border-color: var(--orange);
    }

    .primary-button:hover:not(.disabled):not(:disabled) {
        background: var(--orange);
        color: white !important;
    }
}

/* Specific Implementations */

/* Register Button - uses base primary-button styles via class usage in HTML or @extend if using SASS (we are using CSS) */
/* Ideally, update HTML to use "primary-button" class directly. 
   For now, we will duplicate the properties by applying them to the specific classes to ensure backward compatibility
   without touching every HTML file immediately, BUT the goal is unification.
   
   To "effectivey have only one kind of button style", we will make these classes aliases of primary-button.
*/

/* Register Button */
.register-button {
    width: 100%;
    /* Override width for sidebar */
    margin: 0;
    /* Override margin */
    padding: 0.75rem 1.5rem;
    /* Explicitly set to match calendar button height */
}

/* Map Button */
/* Uses base primary-button styles */

.map-button span {
    color: inherit !important;
}

.map-button:hover span,
.map-button:hover .map-button__icon {
    color: white !important;
}

.map-button__icon {
    flex-shrink: 0;
    font-size: 1rem;
    color: inherit !important;
}

@media (prefers-color-scheme: dark) {
    .map-button:hover .map-button__icon {
        color: white !important;
    }
}

/* Newsletter Modal Trigger Specifics */
.newsletter-modal-trigger {
    width: 100%;
    /* Override width */
    padding: 0.75rem 1.25rem;
}

.newsletter-modal-trigger:hover i::before {
    content: "\f2b6";
    /* fa-envelope-open */
}

.newsletter-modal-trigger i {
    font-size: 1.4rem;
}


/* Pagination Styling */
.pagination-btn {
    font-family: var(--font-sans-serif);
    font-size: 0.95rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: var(--color-bg);
    color: var(--color-fg);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--color-chip-bg);
    border-color: var(--maroon);
    color: var(--maroon);
    transform: translateY(-1px);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-bg-alt);
    color: var(--color-muted);
    box-shadow: none;
}

@media (prefers-color-scheme: dark) {
    .pagination-btn:hover:not(:disabled) {
        border-color: var(--orange);
        color: var(--orange);
    }
}
/* Sidebar Component */

.sidebar-widget {
    margin-bottom: 2.5rem;
}

.sidebar-widget h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--color-muted);
    margin: 0 0 1rem 0;
}

.sidebar-widget ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar-widget li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.sidebar-widget a[href]:link {
    color: var(--color-fg);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sidebar-widget a[href]:visited {
    color: var(--color-fg);
}

.sidebar-widget a[href]:hover {
    color: var(--maroon);
}

/* For dark mode sidebar adjustments */
@media (prefers-color-scheme: dark) {
    .sidebar-widget {
        border-color: #333;
    }

    .sidebar-widget h3 {
        color: var(--color-muted);
        /* Keep muted for consistency */
    }

    .sidebar-widget a[href]:hover {
        color: var(--orange);
    }
}

.heading-wrapper {
    position: relative;
}

.heading-wrapper .direct-link {
    display: none;
}

.heading-wrapper:hover .direct-link {
    display: inline;
}
/* Posts list */
.postlist {
    counter-reset: start-from var(--postlist-index);
    list-style: none;
    padding: 0;
    padding-left: 1.5rem;
}

.postlist-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    counter-increment: start-from -1;
    margin-bottom: 1em;
}

.postlist-item:before {
    display: inline-block;
    pointer-events: none;
    content: "" counter(start-from, decimal-leading-zero) ". ";
    line-height: 100%;
    text-align: right;
    margin-left: -1.5rem;
}

.postlist-date,
.postlist-item:before {
    font-size: 0.8125em;
    /* 13px /16 */
    color: var(--color-gray-90);
}

.postlist-date {
    word-spacing: -0.5px;
}

.postlist-link {
    font-size: 1.1875em;
    /* 19px /16 */
    font-weight: 700;
    flex-basis: calc(100% - 1.5rem);
    padding-left: .25em;
    padding-right: .5em;
    text-underline-position: from-font;
    text-underline-offset: 0;
    text-decoration-thickness: 1px;
}

.postlist-item-active .postlist-link {
    font-weight: bold;
}

/* Tags */
.post-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
    font-style: italic;
}

.postlist-item>.post-tag {
    align-self: center;
}

/* Tags list */
.post-metadata {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5em;
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-metadata time {
    margin-right: 1em;
}
/* Event Cards */
.event-card {
    background: var(--color-chip-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.event-card h4 {
    color: var(--maroon);
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

.event-card p {
    color: var(--color-muted);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.event-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.event-card li {
    margin: 0;
}

.event-card .chip {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    transition: background-color 0.2s ease;
}

.event-card .chip:hover {
    background: var(--maroon);
    color: #ffffff;
    border-color: var(--maroon);
}


/* Recurring Event Card */
.event-card-recurring {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1.5rem;
    align-items: start;
    background: var(--color-chip-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .event-card-recurring {
        grid-template-columns: 1fr;
    }
}

.event-card-recurring-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

@media (max-width: 640px) {
    .event-card-recurring-image img {
        max-width: 150px;
        margin: 0 auto;
        display: block;
        width: 100%;
        object-fit: contain;
        /* Switch to contain to see full logo/image */
    }

    .event-card-recurring-image {
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
    }
}

.event-card-recurring-content h4 {
    color: var(--maroon);
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

.event-card-recurring-content p {
    color: var(--color-muted);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.event-card-recurring-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}


@media (prefers-color-scheme: dark) {
    .event-card {
        background: #1a1a1a;
        border-color: #333;
    }

    .event-card h4 {
        color: var(--orange);
    }

    .event-card .chip {
        background: #0f0f10;
        border-color: #333;
    }

    .event-card .chip:hover {
        background: orange;
        color: black;
        border-color: orange;
    }

    .event-card-recurring-content h4 {
        color: var(--orange);
    }
}
#logo-3d-header {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

#logo-3d-header canvas {
    display: pointer;
    cursor: normal;
    width: 60px !important;
    height: 60px !important;
}

#logo-3d-header canvas:active {
    cursor: pointer;
}

/* Adjust noscript fallback image size */
#logo-3d-header img {
    width: 34px;
    height: 34px;
}

#logo-3d-404 {
    width: 80%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    margin: 2rem auto;
    display: block;
}

#logo-3d-404 canvas {
    display: block;
    cursor: grab;
    width: 100%;
    height: 100%;
}

#logo-3d-404 canvas:active {
    cursor: grabbing;
}
/* File Link Label Styles */

.file-link-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    background: var(--color-bg-secondary);
    border-radius: 0.25rem;
    color: var(--color-fg-muted);
    vertical-align: middle;
    margin-left: 0.25rem;
}

.file-link-label i {
    font-size: 0.75rem;
}

/* PDF specific styling */
.file-link-label .fa-file-pdf {
    color: #dc2626;
}

/* Word specific styling */
.file-link-label .fa-file-word {
    color: #2563eb;
}

/* Excel specific styling */
.file-link-label .fa-file-excel {
    color: #16a34a;
}

/* PowerPoint specific styling */
.file-link-label .fa-file-powerpoint {
    color: #ea580c;
}

/* Archive specific styling */
.file-link-label .fa-file-zipper {
    color: #eab308;
}

/* Audio specific styling */
.file-link-label .fa-file-audio {
    color: #8b5cf6;
}

/* Video specific styling */
.file-link-label .fa-file-video {
    color: #ec4899;
}

/* Code specific styling */
.file-link-label .fa-file-code {
    color: #0891b2;
}
/* Component: Images
 * Consolidates styles for header images, inline images, captions, and lightboxes.
 * Merged from: enhanced-images.css, inline-images.css, helpers.css
 */

/* Header Images */
.header-image-figure {
    margin: 2rem 0;
    text-align: center;
}

.header-image {
    max-width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 8px;
}

/* Inline Images */
/* Generic responsive figures */
.inline-image-figure {
    margin: 1.5rem 0;
    text-align: center;
}

.inline-image-figure img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}

/* Specific article/post image styling (from enhanced-images.css) */
.post img:not(.header-image),
.layout-main img:not(.header-image):not(.swiper-slide img) {
    display: block;
    margin: 1.5rem auto;
    height: auto;
    max-height: 50vh;
    /* Use the improved logic from enhanced-images */
    max-width: min(100%, 800px);
    object-fit: contain;
    border-radius: 8px;
    cursor: pointer;
    /* Implies lightbox availability */
}

/* Mobile constrained helper (from helpers.css) */
.mobile-constrained-image {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Captions */
.image-caption,
figcaption,
.inline-image-figure .image-caption,
.inline-image-figure figcaption {
    font-style: italic;
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-align: center;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* Image credit styling */
.image-credit {
    font-size: var(--text-sm);
    color: var(--color-muted);
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-style: normal;
}

/* Support markdown links in captions */
.image-caption a,
figcaption a {
    color: var(--color-muted);
    text-decoration: underline;
}

.image-caption a:hover,
figcaption a:hover {
    color: var(--maroon);
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

.lightbox.active {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.lightbox-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.lightbox-image {
    max-width: 90%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    animation: slideIn 0.3s ease;
    transform-origin: center center;
    transition: transform 0.3s ease-out;
    user-select: none;
}

.lightbox-caption {
    display: none;
    /* Usually hidden in lightbox to focus on image */
}

.lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    padding: 0;
    line-height: 0;
    z-index: 10001;
}

.lightbox-close svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    pointer-events: none;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Gallery Lightbox Extensions */
.gallery-grid img,
.gallery-masonry img {
    cursor: pointer;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.lightbox-nav.prev {
    left: 2rem;
}

.lightbox-nav.next {
    right: 2rem;
}

.lightbox-nav.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   MEDIA QUERIES
   ======================================== */
@media (max-width: 768px) {
    .header-image {
        max-height: 40vh;
    }

    .post img:not(.header-image),
    .layout-main img:not(.header-image):not(.swiper-slide img) {
        max-height: 40vh;
        margin: 1rem auto;
    }

    .lightbox-close {
        top: 1rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .lightbox-nav {
        width: 2.5rem;
        height: 2.5rem;
    }

    .lightbox-nav.prev {
        left: 1rem;
    }

    .lightbox-nav.next {
        right: 1rem;
    }

    .mobile-constrained-image {
        max-width: 150px;
        margin: 0 auto;
        display: block;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .inline-image-figure {
        margin: 1rem 0;
    }

    .inline-image-figure .image-caption,
    .inline-image-figure figcaption {
        font-size: 0.85rem;
    }
}

@media (prefers-color-scheme: dark) {

    .image-caption a:hover,
    figcaption a:hover {
        color: var(--orange);
    }
}
/* Breadcrumbs Styles */

.breadcrumbs {
    margin-bottom: 1.5rem;
}

.breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.25rem;
    font-size: 0.85rem;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-link {
    color: var(--color-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-link:hover {
    color: var(--maroon);
}

@media (prefers-color-scheme: dark) {
    .breadcrumb-link:hover {
        color: var(--orange);
    }
}

[data-theme="dark"] .breadcrumb-link:hover {
    color: var(--orange);
}

.breadcrumb-separator {
    color: var(--color-border);
    margin: 0 0.25rem;
}

.breadcrumb-current {
    color: var(--color-fg);
    font-weight: 500;
}

/* Home icon */
.breadcrumb-link i {
    font-size: 0.9em;
}

/* Screen reader only class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile: smaller text */
@media (max-width: 600px) {
    .breadcrumbs-list {
        font-size: 0.8rem;
    }
}

/* Print: hide */
@media print {
    .breadcrumbs {
        display: none;
    }
}
/* Utilities & Helpers */

/* PDF embed styles */
.pdf-embed {
    margin: 1.5rem 0;
}

/* 
 * NOTE: Image styles have been moved to css/components/images.css 
 */

p.copyright {
    position: relative;
    width: 100%;
    line-height: 40px;
    font-size: 0.7em;
    text-align: center;
    margin: 0;
}


/* Accessibility Enhancements */

/* Reduced motion support - respects user preferences */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Keep essential transitions for usability */
    *:focus-visible {
        transition: none !important;
    }
}

/* Mobile Optimization */

/* Ensure all interactive elements meet 44x44px minimum (WCAG 2.5.5) */
@media (hover: none) and (pointer: coarse) {

    a:not(.chip),
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
	select {
        min-height: 36px;
        padding: 0.4rem 0.75rem;
    }

    /* Ensure form inputs are large enough */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea {
        min-height: 44px;
        font-size: 16px;
        /* Prevents zoom on iOS */
    }

    /* Larger tap targets for navigation */
    .nav-item a {
        min-height: 48px;
        padding: 0.75rem 1rem;
    }

    /* Improve spacing for mobile */
    body {
        padding: var(--space-sm);
    }

    .event-row {
        gap: 0.5rem;
    }

    .event-row__image {
        height: 150px;
        /* Larger images on mobile */
    }
}

@media (prefers-color-scheme: dark) {

    #youtube,
    #twitter-x {
        fill: white;
    }
}
/* Skip Link for Accessibility
 * Allows keyboard users to skip navigation
 */

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
}

.skip-link:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    padding: 1rem 1.5rem;
    background: var(--color-primary);
    color: white;
    font-weight: 600;
    text-decoration: none;
    z-index: 9999;
}

/* Enhanced Focus Rings
 * Visible focus states for keyboard navigation
 */

*:focus {
    outline: none;
}

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

/* More prominent focus for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Dark mode focus rings */
@media (prefers-color-scheme: dark) {
    *:focus-visible {
        outline-color: var(--color-accent, #ff8c00);
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline-color: var(--color-accent, #ff8c00);
    }
}
/* Print Styles for A4 Portrait */

@media print {
	/* Hide non-essential elements */
	header,
	footer,
	.nav,
	.sidebar,
	.hamburger,
	.nav-overlay,
	#google_translate_element,
	.language-selector {
		display: none !important;
	}
	
	/* Page setup for A4 portrait */
	@page {
		size: A4 portrait;
		margin: 2cm;
	}
	
	/* Reset colors for print */
	* {
		color: #000 !important;
		background: #fff !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}
	
	body {
		font-size: 12pt;
		line-height: 1.5;
		max-width: 100%;
		margin: 0;
		padding: 0;
	}
	
	/* Main content */
	main {
		max-width: 100%;
		margin: 0;
		padding: 0;
	}
	
	/* Typography */
	h1 {
		font-size: 24pt;
		margin-top: 0;
	}
	
	h2 {
		font-size: 18pt;
		margin-top: 1em;
	}
	
	h3 {
		font-size: 14pt;
	}
	
	/* Page breaks */
	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid;
		page-break-inside: avoid;
	}
	
	p, blockquote, pre {
		page-break-inside: avoid;
	}
	
	img, figure {
		page-break-inside: avoid;
		max-width: 100%;
		height: auto;
	}
	
	/* Links */
	a {
		text-decoration: underline;
	}
	
	a[href^="http"]:after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		word-wrap: break-word;
	}
	
	/* Don't show URLs for internal links */
	a[href^="/"]:after,
	a[href^="#"]:after {
		content: "";
	}
	
	/* Tables */
	table {
		border-collapse: collapse;
		width: 100%;
		margin: 1em 0;
	}
	
	th, td {
		border: 1pt solid #000;
		padding: 0.5em;
		text-align: left;
	}
	
	th {
		font-weight: bold;
		background: #f0f0f0 !important;
	}
	
	/* Event details card */
	.event-card {
		border: 1pt solid #000;
		padding: 1em;
		margin: 1em 0;
	}
	
	/* Code blocks */
	pre, code {
		border: 1pt solid #ccc;
		padding: 0.5em;
		font-family: "Courier New", monospace;
		font-size: 10pt;
		white-space: pre-wrap;
		word-wrap: break-word;
	}
	
	/* Blockquotes */
	blockquote {
		border-left: 3pt solid #000;
		padding-left: 1em;
		margin-left: 0;
		font-style: italic;
	}
	
	/* Lists */
	ul, ol {
		padding-left: 2em;
	}
	
	/* Chips/tags */
	.chip {
		border: 1pt solid #000;
		padding: 0.2em 0.5em;
		margin-right: 0.5em;
		display: inline-block;
	}
	
	/* Carousel - show all images */
	.carousel {
		display: block !important;
	}
	
	.carousel-slide {
		display: block !important;
		page-break-inside: avoid;
		margin-bottom: 1em;
	}
	
	/* Hide carousel controls */
	.carousel-button,
	.carousel-pagination {
		display: none !important;
	}
}

/* Print-specific utilities */
@media print {
	.print-only {
		display: block !important;
	}
	
	.no-print {
		display: none !important;
	}
	
	.page-break-before {
		page-break-before: always;
	}
	
	.page-break-after {
		page-break-after: always;
	}
}
/* External Link Styles */

/* Arrow icon after external links - disabled
.external-link::after {
    content: " ↗";
    font-size: 0.75em;
    opacity: 0.6;
    vertical-align: super;
}
*/

/* Data Saver Mode Styles */
.data-saver-mode img {
    filter: grayscale(0.2);
}

.data-saver-mode .carousel,
.data-saver-mode .embla {
    /* Disable fancy transitions in data saver mode */
    --transition-duration: 0s;
}

/* RTL Support - Use logical properties */
/* These are already good practices that work for LTR and RTL */

/* Example of logical properties already in use:
   - padding-inline-start instead of padding-left
   - margin-inline-end instead of margin-right
   - border-inline-start instead of border-left
*/

/* Note: Full RTL conversion should be done project-wide
   when translation to Arabic/Hebrew is planned */
/* Link Preview Hover Cards */

.link-preview-card {
    position: absolute;
    z-index: 1000;
    width: 300px;
    max-width: calc(100vw - 20px);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
}

.link-preview-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.link-preview-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.link-preview-content {
    padding: 0.75rem 1rem;
}

.link-preview-title {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-fg);
    line-height: 1.3;
}

.link-preview-desc {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-fg-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .link-preview-card {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .link-preview-card {
        transition: opacity 0.1s ease;
        transform: none;
    }
}
/* Back to Top Button */

.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--maroon);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
    z-index: 100;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--color-primary-hover, #a00000);
    transform: translateY(-2px);
}

.back-to-top:active {
    transform: translateY(0);
}

/* Account for bottom nav on mobile */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 5rem;
        right: 1rem;
        width: 44px;
        height: 44px;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: opacity 0.1s, visibility 0.1s;
    }
}

/* Hide on print */
@media print {
    .back-to-top {
        display: none;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .back-to-top {
        background: var(--color-accent, #ff8c00);
        color: #1f1f20;
    }

    .back-to-top:hover {
        background: var(--color-accent-hover, #ffad33);
    }
}
/* Calendar Add Button Styles */
/* Uses primary-button base styles, with calendar-specific adjustments */

.calendar-download-btn {
    /* Inherits from .primary-button - same styling as register button */
    width: 100%;
    margin: 0;
    padding: 0.75rem 1.5rem;
    /* Explicitly set to match register button height */
}

.calendar-download-btn .register-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Hide on print */
@media print {
    .calendar-download-btn {
        display: none;
    }
}
/* Table Styling */

table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
}

table,
td,
th {
    border: 1px solid #000;
    padding: 0.5rem;
    text-align: left;
}

/* Make table scrollable on mobile */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Alternating rows for readability */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #ddd;
}

/* Header styling */
th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: var(--maroon);
    color: white;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 10;
}

tr {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {

    table,
    td,
    th {
        border-color: var(--color-border);
    }

    tr:nth-child(even) {
        background-color: var(--color-chip-bg);
        color: var(--color-fg);
    }

    tr {
        background-color: transparent;
        color: var(--color-fg);
    }

    tr:hover {
        background-color: var(--color-border);
        color: var(--color-fg);
    }

    th {
        background-color: var(--color-bg);
        border-bottom: 2px solid var(--color-border);
        color: var(--color-fg);
    }
}</style>
		
		<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/

let globalInstanceIndex = 0;

class HeadingAnchors extends HTMLElement {
	static register(tagName) {
		if ("customElements" in window) {
			customElements.define(tagName || "heading-anchors", HeadingAnchors);
		}
	}

	static attributes = {
		exclude: "data-ha-exclude",
		prefix: "prefix",
		content: "content",
	}

	static classes = {
		anchor: "ha",
		placeholder: "ha-placeholder",
		srOnly: "ha-visualhide",
	}

	static defaultSelector = "h2,h3,h4,h5,h6";

	static css = `
.${HeadingAnchors.classes.srOnly} {
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}
.${HeadingAnchors.classes.anchor} {
	position: absolute;
	left: var(--ha_offsetx);
	top: var(--ha_offsety);
	text-decoration: none;
	opacity: 0;
}
.${HeadingAnchors.classes.placeholder} {
	opacity: .3;
}
.${HeadingAnchors.classes.anchor}:is(:focus-within, :hover) {
	opacity: 1;
}
.${HeadingAnchors.classes.anchor},
.${HeadingAnchors.classes.placeholder} {
	display: inline-block;
	padding: 0 .25em;

	/* Disable selection of visually hidden label */
	-webkit-user-select: none;
	user-select: none;
}

@supports (anchor-name: none) {
	.${HeadingAnchors.classes.anchor} {
		position: absolute;
		left: anchor(left);
		top: anchor(top);
	}
}`;

	get supports() {
		return "replaceSync" in CSSStyleSheet.prototype;
	}

	get supportsAnchorPosition() {
		return CSS.supports("anchor-name: none");
	}

	constructor() {
		super();

		if(!this.supports) {
			return;
		}

		let sheet = new CSSStyleSheet();
		sheet.replaceSync(HeadingAnchors.css);
		document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

		this.headingStyles = {};
		this.instanceIndex = globalInstanceIndex++;
	}

	connectedCallback() {
		if (!this.supports) {
			return;
		}

		this.headings.forEach((heading, index) => {
			if(!heading.hasAttribute(HeadingAnchors.attributes.exclude)) {
				let anchor = this.getAnchorElement(heading);
				let placeholder = this.getPlaceholderElement();

				// Prefers anchor position approach for better accessibility
				// https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
				if(this.supportsAnchorPosition) {
					let anchorName = `--ha_${this.instanceIndex}_${index}`;
					placeholder.style.setProperty("anchor-name", anchorName);
					anchor.style.positionAnchor = anchorName;
				}

				heading.appendChild(placeholder);
				heading.after(anchor);
			}
		});
	}

	// Polyfill-only
	positionAnchorFromPlaceholder(placeholder) {
		if(!placeholder) {
			return;
		}

		let heading = placeholder.closest("h1,h2,h3,h4,h5,h6");
		if(!heading.nextElementSibling) {
			return;
		}

		// TODO next element could be more defensive
		this.positionAnchor(heading.nextElementSibling);
	}

	// Polyfill-only
	positionAnchor(anchor) {
		if(!anchor || !anchor.previousElementSibling) {
			return;
		}

		// TODO previous element could be more defensive
		let heading = anchor.previousElementSibling;
		this.setFontProp(heading, anchor);

		if(this.supportsAnchorPosition) {
			// quit early
			return;
		}

		let placeholder = heading.querySelector(`.${HeadingAnchors.classes.placeholder}`);
		if(placeholder) {
			anchor.style.setProperty("--ha_offsetx", `${placeholder.offsetLeft}px`);
			anchor.style.setProperty("--ha_offsety", `${placeholder.offsetTop}px`);
		}
	}

	setFontProp(heading, anchor) {
		let placeholder = heading.querySelector(`.${HeadingAnchors.classes.placeholder}`);
		if(placeholder) {
			let style = getComputedStyle(placeholder);
			let props = ["font-weight", "font-size", "line-height", "font-family"];
			let font = props.map(name => style.getPropertyValue(name));
			anchor.style.setProperty("font", `${font[0]} ${font[1]}/${font[2]} ${font[3]}`);
		}
	}

	getAccessibleTextPrefix() {
		// Useful for i18n
		return this.getAttribute(HeadingAnchors.attributes.prefix) || "Jump to section titled";
	}

	getContent() {
		if(this.hasAttribute(HeadingAnchors.attributes.content)) {
			return this.getAttribute(HeadingAnchors.attributes.content);
		}
		return "#";
	}

	// Placeholder nests inside of heading
	getPlaceholderElement() {
		let ph = document.createElement("span");
		ph.setAttribute("aria-hidden", true);
		ph.classList.add(HeadingAnchors.classes.placeholder);
		let content = this.getContent();
		if(content) {
			ph.textContent = content;
		}

		ph.addEventListener("mouseover", (e) => {
			let placeholder = e.target.closest(`.${HeadingAnchors.classes.placeholder}`);
			if(placeholder) {
				this.positionAnchorFromPlaceholder(placeholder);
			}
		});

		return ph;
	}

	getAnchorElement(heading) {
		let anchor = document.createElement("a");
		anchor.href = `#${heading.id}`;
		anchor.classList.add(HeadingAnchors.classes.anchor);

		let content = this.getContent();
		anchor.innerHTML = `<span class="${HeadingAnchors.classes.srOnly}">${this.getAccessibleTextPrefix()}: ${heading.textContent}</span>${content ? `<span aria-hidden="true">${content}</span>` : ""}`;

		anchor.addEventListener("focus", e => {
			let anchor = e.target.closest(`.${HeadingAnchors.classes.anchor}`);
			if(anchor) {
				this.positionAnchor(anchor);
			}
		});

		anchor.addEventListener("mouseover", (e) => {
			// when CSS anchor positioning is supported, this is only used to set the font
			let anchor = e.target.closest(`.${HeadingAnchors.classes.anchor}`);
			this.positionAnchor(anchor);
		});

		return anchor;
	}

	get headings() {
		return this.querySelectorAll(this.selector.split(",").map(entry => `${entry.trim()}[id]`));
	}

	get selector() {
		return this.getAttribute("selector") || HeadingAnchors.defaultSelector;
	}
}

HeadingAnchors.register();

export { HeadingAnchors }
</script>
		<link rel="stylesheet" href="/outreach/css/prism.css">
	</head>
	<body>
		<a href="#main" id="skip-link" class="skip-link visually-hidden">Skip to main content</a>

		<a href="#main" class="skip-link visually-hidden">Skip to main content</a>

<header class="header-standard" data-turbo-permanent>
	<div class="header-content">
		<a href="/outreach/" class="home-link">
			
			<div id="logo-3d-header" aria-label="IMSc Logo">
				<noscript>
					<img src="/outreach/img/IMSc_logo_shape.png" alt="IMSc Logo" width="32" height="32" style="display: block;">
				</noscript>
			</div>
			
			<h1>IMSc Outreach</h1>
		</a>
		<div class="nav-overlay"></div>
		<nav>
	<h2 class="visually-hidden">Top level navigation menu</h2>
	<ul class="nav">
		<li class="nav-item"><a href="/outreach/events.html">Events</a></li>
		<li class="nav-item"><a href="/outreach/newsletter/">Newsletter</a></li>
		<li class="nav-item"><a href="/outreach/Resources/">Resources</a></li>
	</ul>
</nav>


		
		<div class="hamburger" id="hamburger-menu">
			<span class="hamburger__top-bun"></span>
			<span class="hamburger__bottom-bun"></span>
		</div>
	</div>

    
    <div class="mobile-nav-container">
        <nav class="mobile-nav">
            <ul class="mobile-nav-list">
                <li class="mobile-nav-item"><a href="/outreach/" class="mobile-nav-link" >Home</a></li>
                <li class="mobile-nav-item"><a href="/outreach/events.html" class="mobile-nav-link" >Events</a></li>
                <li class="mobile-nav-item"><a href="/outreach/newsletter/" class="mobile-nav-link" >Newsletter</a></li>
                <li class="mobile-nav-item"><a href="/outreach/Resources/" class="mobile-nav-link" >Resources</a></li>
            </ul>
        </nav>
    </div>
</header>

<script>
(function() {
	const header = document.querySelector('header');
    const hamburger = document.getElementById('hamburger-menu');
    const mobileNav = document.querySelector('.mobile-nav-container');
	
	// Header scroll behavior
	let lastScrollY = window.scrollY;
	let ticking = false;
	
	function updateHeader() {
		const scrollY = window.scrollY;
		const isDesktop = window.matchMedia('(min-width: 769px)').matches;
		
		// Add blur effect when scrolled
		if (scrollY > 20) {
			header.classList.add('scrolled');
		} else {
			header.classList.remove('scrolled');
		}
		
		// Desktop only: hide header on scroll down, show on scroll up
        // User requested FIXED header site-wide, so disabling hide-on-scroll for now to keep it simple and consistent
		/*
        if (isDesktop) {
			if (scrollY > lastScrollY && scrollY > 100) {
				// Scrolling down
				header.classList.add('header-hidden');
			} else if (scrollY < lastScrollY) {
				// Scrolling up
				header.classList.remove('header-hidden');
			}
		} else {
			// Mobile: always show header, remove hidden class if present
			header.classList.remove('header-hidden');
		}
        */
		
		lastScrollY = scrollY;
		ticking = false;
	}
	
	function requestTick() {
		if (!ticking) {
			window.requestAnimationFrame(updateHeader);
			ticking = true;
		}
	}
	
	window.addEventListener('scroll', requestTick, { passive: true });
	
	// Handle resize to ensure header state is correct
	let resizeTicking = false;
	window.addEventListener('resize', () => {
		if (!resizeTicking) {
			window.requestAnimationFrame(() => {
				updateHeader();
				resizeTicking = false;
			});
			resizeTicking = true;
		}
	}, { passive: true });

    // Mobile Menu Logic
    if (hamburger && mobileNav) {
        function toggleMenu() {
            hamburger.classList.toggle('open');
            mobileNav.classList.toggle('active');
            document.body.classList.toggle('menu-open');
        }

        hamburger.addEventListener('click', toggleMenu);

        // Close when clicking a link
        const links = mobileNav.querySelectorAll('a');
        links.forEach(link => {
            link.addEventListener('click', () => {
                toggleMenu();
            });
        });
    }
})();
</script>


		<div class="layout-container">
			<main id="main" class="layout-main">
				<heading-anchors>
					
					<h1></h1>
					BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//IMSc Outreach//Event Calendar//EN
CALSCALE:GREGORIAN
METHOD:PUBLISH
BEGIN:VEVENT
UID:-events-open-day-2026-@imsc.res.in
DTSTAMP:20260817T111530Z
DTSTART:20260806T040000Z
DTEND:20260806T110000Z
SUMMARY:IMSc Open Day 2026
DESCRIPTION:Demonstrations and experiments for school students.\n\nMore info: https://www.imsc.res.in/outreach/events/open-day/2026/
LOCATION:
URL:https://www.imsc.res.in/outreach/events/open-day/2026/
STATUS:CONFIRMED
END:VEVENT
END:VCALENDAR
				</heading-anchors>
			</main>

			<aside class="layout-sidebar">
	            <div class="sidebar-widget">
  <h3>Event Details</h3>
  <ul class="event-details">
    
   
      <li>
        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
          <path fill="currentColor" d="M7 2v2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 8H5v8h14v-8z"/>
        </svg>
        <span class="event-date-display">
          
            <span class="event-day">Invalid DateTime</span>
            <span class="event-date-line">
              Invalid DateTime
            </span>
          
        </span>
      </li>
    
    
    
  </ul>
  
  
  
  
  
  
</div>

<style>
  .event-details { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
  .event-details li { display: grid; grid-template-columns: 20px 1fr; gap: .5rem; align-items: center; }
  .event-details .icon { width: 20px; height: 20px; color: var(--color-brand); }
  
  .register-button-wrapper {
    margin-top: 1rem;
  }
  


  /* Restored styles */
  .event-details li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
  }
  
  .event-details .icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
  }
  
  .event-date-display {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  
  .event-day {
    font-weight: 600;
    font-size: inherit;
  }
  
  .event-date-line {
    font-size: inherit;
    color: var(--color-fg);
  }

  .register-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  
  .deadline-info {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-muted);
    text-align: center;
    line-height: 1.4;
  }

  @media (prefers-color-scheme: dark) {
    .deadline-info {
      color: var(--color-muted);
    }
  }
</style>
	        </aside>
		</div>

		<footer>

	<div class="footer-contact">

		<strong>The Institute of Mathematical Sciences</strong><br>
		IV&nbsp;Cross Road, CIT&nbsp;Campus<br>
		Taramani<br>
		Chennai 600 113<br>
		Tamil Nadu, India.<br>
		<a href="#" class="primary-button map-button" id="map-button">
	<i class="fa-solid fa-location-dot map-button__icon" aria-hidden="true"></i>
	<span>Directions in Maps</span>
</a>

<script>
(function() {
	const button = document.getElementById('map-button');
	const imscLocation = 'Institute of Mathematical Sciences, CIT Campus, Taramani, Chennai';
	const coordinates = '12.9943,80.2470';
	
	const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
	const isMac = /Macintosh/.test(navigator.userAgent);
	const isAppleDevice = isIOS || isMac;
	
	if (isAppleDevice) {
		button.href = `http://maps.apple.com/?q=${encodeURIComponent(imscLocation)}&ll=${coordinates}`;
	} else {
		button.href = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(imscLocation)}`;
	}
})();
</script>



		
		<div class="contact-item">
			<i class="fa-solid fa-phone contact-icon" aria-hidden="true"></i>
			<a href="tel:+91-44-22543100">+91-44-22543100</a>
		</div>
		<div class="contact-item">
			<i class="fa-solid fa-envelope contact-icon" aria-hidden="true"></i>
			<a href="mailto:outreach@imsc.res.in">outreach@imsc.res.in</a>
		</div>
        
	</div>

    <div class="social-links">
        
       


		<a href="https://www.youtube.com/@matsciencechannel" aria-label="YouTube" class="social-item">
            <svg class="social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg>
            <span class="social-username">@matsciencechannel</span>
        </a>

		<div class="social-item social-item-grouped">
    <a href="https://x.com/IMScChennai" aria-label="X (Twitter)" class="icon-link">
        <svg class="social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
    </a>
    
    <a href="https://www.facebook.com/IMScChennai/" aria-label="Facebook" class="icon-link">
        <svg class="social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.8 90.7 226.4 209.3 245V327.7h-63V256h63v-54.6c0-62.2 37-96.5 93.7-96.5 27.1 0 55.5 4.8 55.5 4.8v61h-31.3c-30.8 0-40.4 19.1-40.4 38.7V256h68.8l-11 71.7h-57.8V501C413.3 482.4 504 379.8 504 256z"/></svg>
    </a>

    <span class="social-username">@IMScChennai</span>
</div>
    </div>
	
	<div class="footer-logos">
		<a href="https://www.imsc.res.in/">
			<img src="/outreach/img/logo/imsc_logo_wbg.png" alt="Logo of the Institute of Mathematical Sciences" width="400px" eleventy:ignore>
		</a>
		<a href="https://www.hbni.ac.in/">
			<img src="/outreach/img/logo/Homi_Bhabha_National_Institute_logo.png" alt="Logo of HBNI" width="400px" eleventy:ignore>
		</a>
		<a href="https://dae.gov.in/">
			<img src="/outreach/img/logo/DAE_logo.png" alt="Logo of DAE" width="400px" eleventy:ignore>
		</a>
	</div>

	<p class="copyright">
	
		Copyright © 2026 The Institute of Mathematical Sciences, Chennai.<br>
			<a href="https://www.imsc.res.in/outreach/archive/html/"> Old webpage </a> 
	</p>
	
	<div class="footer-translate">
		
<style>
/* Hide Google Translate default UI completely */
div.skiptranslate,
#google_translate_element2,
#goog-gt- {
  display: none !important;
}

body {
  top: 0 !important;
}

.goog-te-banner-frame.skiptranslate {
  display: none !important;
}
</style>

<div id="google_translate_element2">
  <div class="skiptranslate goog-te-gadget" dir="ltr">
    <div id=":0.targetLanguage">
      <select class="goog-te-combo" aria-label="Language Translate Widget">
        <option value="en">English</option>
        <option value="hi">Hindi</option>
        <option value="ta">Tamil</option>
      </select>
    </div>
  </div>
</div>

<script src="/outreach/js/google-translate-init.js"></script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>

<select onchange="doGTranslate(this);" style="font-family: var(--font-sans-serif); font-size: 0.9rem; padding: 0.4rem 0.6rem; border: 1px solid var(--color-border); border-radius: 4px; background-color: var(--color-bg); color: var(--color-fg); cursor: pointer;">
  <option value="en|en" style="font-weight:bold;">English</option>
  <option value="en|ta">தமிழ்</option>
  <option value="en|hi">हिन्दी</option>
</select>

	</div>
</footer>


<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "Organization",
	"name": "The Institute of Mathematical Sciences",
	"alternateName": "IMSc",
	"url": "https://www.imsc.res.in/",
	"logo": {
		"@type": "ImageObject",
		"url": "https://www.imsc.res.in/outreach/img/logo/imsc_logo_wbg.png",
		"width": 512,
		"height": 512
	},
	"address": {
		"@type": "PostalAddress",
		"streetAddress": "IV Cross Road, CIT Campus, Taramani",
		"addressLocality": "Chennai",
		"postalCode": "600 113",
		"addressRegion": "Tamil Nadu",
		"addressCountry": "IN"
	},
	"contactPoint": {
		"@type": "ContactPoint",
		"telephone": "+91-44-22543100",
		"contactType": "General Inquiry",
		"areaServed": "IN",
		"availableLanguage": ["en", "ta", "hi"]
	},
	"sameAs": [
		"https://x.com/IMScChennai",
		"https://www.facebook.com/IMScChennai/",
		"https://www.youtube.com/@matsciencechannel"
	]
}
</script>

<style>
.social-item {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Proper spacing between icons and text */
}

.social-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.icon-link {
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
    color: var(--color-muted);
}

/* Hover state for icon links only, not the username */
.icon-link:hover {
    color: var(--maroon);
}

.icon-link:hover svg {
    color: var(--maroon);
}

/* For grouped social items, prevent hover from affecting username */
.social-item-grouped {
    color: var(--color-muted);
}

.social-item-grouped:hover {
    color: var(--color-muted); /* Keep username color unchanged on container hover */
}

.social-item-grouped .social-username {
    color: var(--color-fg); /* White in dark mode, black in light mode */
    transition: none; /* Username should not change color */
}

/* Only the icon links should change color on hover */
.social-item-grouped .icon-link:hover {
    color: var(--maroon);
}

.footer-translate {
	display: flex;
	justify-content: flex-end;
	padding: 1rem 0;
	margin-top: 1rem;
}
</style>


		<!-- This page `/events/open-day/2026/event.ics` was built on 2026-08-17T11:15:35.078Z -->
	
	
	
	<script src="/outreach/js/enhanced-images.js"></script>
	<script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
	<script defer src="/outreach/js/icosahedron.js"></script>
	
	<script type="module" src=""></script>
	
	<script src="/outreach/js/back-to-top.js" defer></script>
	<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.3/dist/turbo.es2017-umd.js"></script>
	</body>
</html>
