:root {
            /* COLOR TOKENS */
            --navy: #002147;
            --ivory: #FFFDD0;
            --white: #ffffff;
            --saffron: #FF9933;
            --cream: #FFFDD0;
            --gold: #DAA520;


            /* ARCHITECTURAL TOKENS */
            --cmd-size: 9vh;
            --nav-bottom-clearance: 8rem;

            /* FLUID SPACING */
            --beam-gap-fluid: clamp(0.75rem, 1.25rem, 2rem);
            --pillar-padding-v: clamp(2rem, 3rem, 5rem);

/* MOTION STRATEGY */
    --ticker-speed: 90s; /* A slow, meditative pace */
        }

        /* RESET & BASE */
        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            background-color: var(--ivory);
            line-height: 1.6;
        }

         /* IMAGE & FIGURE STYLING */

img {
max-width: 100%; height:auto;
width: clamp(30%, 50%, 75%);
height:auto;
    aspect-ratio: auto;     /* Use image's natural ratio */
    object-fit: contain;    /* Show full image */
object-position: center;
    display: block;         /* Maintains block formatting for centering */
    margin: 0 auto;         /* Centers the image within the figure */
}

        figure {
                        margin-top: 2rem;
            padding: 1rem;
            text-align: left;
            max-width: 100%;
        }

figure img {
max-width: 100%; height:auto;
width: clamp(30%, 50%, 75%);
height:auto;
    aspect-ratio: auto;     /* Use image's natural ratio */
    object-fit: contain;    /* Show full image */
object-position: center;
    display: block;         /* Maintains block formatting for centering */
    margin: 0 auto;         /* Centers the image within the figure */
}

        figcaption {
            margin-top: 1rem;
            padding: 1rem;
            text-align: left;
            line-height: 1.6;
        }

        /* THEME ARCHITECTURE */
        .light-theme { --theme-bg: var(--ivory); --theme-fg: var(--navy); --theme-accent: var(--saffron); background-color: var(--theme-bg); color: var(--theme-fg); }
        .vibrant-theme { --theme-bg: var(--saffron); --theme-fg: var(--navy); --theme-accent: var(--ivory); background-color: var(--theme-bg); color: var(--theme-fg); }
        .gold-theme{ --theme-bg: var(--gold); --theme-fg: var(--navy); --theme-accent: var(--ivory); background-color: var(--theme-bg); color: var(--theme-fg); }
        .dark-theme { --theme-bg: var(--navy); --theme-fg: var(--ivory); --theme-accent: var(--white); background-color: var(--theme-bg); color: var(--theme-fg); }
/*  for screen reader announcements  */

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }



        /* FIXED COMMAND BAR */
        #command-bar {
            position: fixed;
            left: 0;
            width: 100%;
            height: var(--cmd-size);
            z-index: 100;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--beam-gap-fluid);
            padding: 0 5%;
        }

        body[data-dock="top"] #command-bar { top: 0; bottom: auto; border-bottom: 2px solid var(--theme-fg); }
        body[data-dock="bottom"] #command-bar { bottom: 0; top: auto; border-top: 2px solid var(--theme-fg); }

        /* CONTENT VIEWPORT */
        #main-content-viewport {
            transition: opacity 0.3s ease-in-out;
            outline: none; /* Removes visual ring on the container when focused */
        }

        .nav-btn {
            padding: 0.5rem 1rem;
            cursor: pointer;
            font-size: 1.2rem;
            background: transparent;
            color: inherit;
            border: 1px solid currentColor;
            display: flex;
            align-items: center;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }

/* pillar and beams*/

/* .pillar-column (The vertical holder)
   Purpose: Vertical stacking of content.
*/
.pillar-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    width: 100%;
    padding: 1rem 0;
}

.pillar-column > div {
    width: 100%;
    max-width: 900px;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.pillar-column > h2,
.pillar-column > h3,
.pillar-column > p {
    width: 100%;
    max-width: 900px;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-bottom-clearance);
    font-size: 100%; /* Respects browser default (usually 16px) */
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Specific Pillar implementation for Navigation */
#nav-pillar {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Applying Pillar spacing to page sections */
section {
    padding: var(--pillar-padding-v) 10%;
    border-bottom: 1px solid #eee;
}

section h2 {
    margin-bottom: 2rem;
    text-align: center;
}

section h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}
section h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}

section p {
    margin: 1rem 0;
    line-height: 1.8;
    text-align: left;
}

/* .beam-row (The horizontal holder)
   Purpose: Horizontal distribution of elements.
   Includes flex-wrap for natural responsiveness.
*/
.beam-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--beam-gap-fluid);
    padding: 1rem 5%;
}

.beam-row img {
    max-width: 100%;
width:clamp(30%, 50%, 75%);
    height: auto;
    aspect-ratio: auto;     /* Use image's natural ratio */
    object-fit: contain;    /* Show full image */
object-position: center;
    display: block;         /* Maintains block formatting for centering */
    margin: 0 auto;         /* Centers the image within the figure */

}

/* Icon styling for small images like logos */
.beam-row img.icon {
    width: clamp(48px, 64px, 80px);
    max-width: 80px;
}

/* INTERACTIVE STATES */
a, a:visited {
    color: var(--theme-fg);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.7;
    text-decoration: underline;
}

a:focus {
    outline: 2px solid var(--theme-accent);
    outline-offset: 4px;
}

/* Link styled as button */
.link-as-button {
    display: inline-block;
    padding: 1rem 2rem;
    background-color: var(--gold);
    color: var(--navy);
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.link-as-button:hover {
    background-color: var(--saffron);
    text-decoration: none;
    opacity: 1;
    transform: translateY(-2px);
}

.link-as-button:focus {
    outline: 2px solid var(--saffron);
    outline-offset: 4px;
}

::selection {
    background-color: var(--theme-fg);
    color: var(--theme-bg);
}

/* ul bullet formatting */

.ul-without-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ul-with-square-bullets {
    list-style-type: square;
    padding-left: 1.5rem;
    margin: 1rem 0;
    line-height: 1.8;
}

.ul-with-square-bullets li {
    list-style-type: square;
    margin: 0.5rem 0;
}

/* Details and Summary styling */
details {
    margin: 1.5rem 0;
    border-left: 3px solid var(--theme-fg);
    padding-left: 1rem;
}

summary {
    cursor: pointer;
    font-weight: bold;
    padding: 0.75rem;
    margin-left: -1rem;
    transition: background-color 0.2s ease;
}

summary:hover {
    background-color: var(--theme-fg);
    color: var(--theme-bg);
}

details[open] summary {
    margin-bottom: 1rem;
}

/* Definition Lists */
dl {
    margin: 1.5rem 0;
}

dt {
    font-weight: bold;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--theme-fg);
}

dd {
    margin-left: 2rem;
    margin-bottom: 1rem;
    line-height: 1.8;
}

/* Table styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
}

thead {
    position: sticky;
    top: 0;
}

th {
    padding: 1rem;
    text-align: left;
    font-weight: bold;
}

td {
    padding: 0.75rem;
    border-bottom: 1px solid #ddd;
}

/* Horizontal rules */
hr {
    border: none;
    border-top: 2px solid var(--theme-fg);
    margin: 2rem 0;
    opacity: 0.5;
}

/* tiruman related styles */
/* HEADER & ASSETS */
.tiruman-style{
    height: 4rem;     /* This is 64px when font size is 16px*/
    width: auto;          /* Prevents squashing/distortion */
    display: block; /*  treats this as an block element, not a text element*/
    margin: 2rem auto; /* Centers it with some breathing room */
    background-color: transparent;
    text-align: center;
}

/* ticker related*/
/* TICKER ANIMATION */

/* The outer container that clips the moving text */
.ticker-wrap {
    overflow: hidden;
    white-space: nowrap; /* Prevents text from wrapping to a second line */
    border-top: 1px solid var(--ivory);
}

/* The moving element containing the text */
.ticker-content {
    display: inline-block;
    padding-left: 100%; /* Forces the text to start off-screen to the right */
    animation: ticker-move var(--ticker-speed) linear infinite;
}

/* The Hardware-Accelerated Keyframes */
@keyframes ticker-move {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        /* Moves the content entirely to the left */
        transform: translate3d(-100%, 0, 0);
    }
}


/*
<div class="ticker-wrap dark-theme">
    <div class="ticker-content">
        PAST EVENTS • UPCOMING RITUALS • COMMUNITY NOTICES • SACRED CALENDAR •
    </div>
</div>
*/