/*
 * Concern Sri Lanka — overrides on top of the Charifund template bundle.
 * Loaded after template/css/app.min.css, so plain specificity wins.
 */

/* ---------------------------------------------------------------------
 * Tamil typography
 *
 * The template drives every font through three custom properties. Rather
 * than overriding font-family across the whole stylesheet, we append
 * Noto Sans Tamil to each stack. Browsers resolve fonts per glyph, so
 * Latin text keeps Recoleta/Satoshi/Nunito and only Tamil codepoints —
 * which those fonts have no glyphs for — fall through to Noto Sans Tamil.
 * This also handles mixed EN/TA strings inside a single heading.
 * ------------------------------------------------------------------ */
:root {
    --nunito: "Nunito", "Noto Sans Tamil", sans-serif;
    --recoleta: "Recoleta", "Noto Sans Tamil", sans-serif;
    --satoshi: "Satoshi", "Noto Sans Tamil", sans-serif;
}

/*
 * Tamil glyphs carry taller ascenders/descenders than Latin at the same
 * font-size, so headings set tight for English clip or collide. These are
 * applied only when the element is in Tamil, leaving English untouched.
 */
:lang(ta) h1,
:lang(ta) h2,
:lang(ta) h3,
:lang(ta) h4,
:lang(ta) h5,
:lang(ta) h6,
:lang(ta) .section-title__title,
:lang(ta) .banner-two__title {
    line-height: 1.35;
}

:lang(ta) p,
:lang(ta) li {
    line-height: 1.9;
}

/*
 * Tamil words do not break mid-word the way English does and single words
 * run much longer, which overflows fixed-width buttons and nav items.
 */
:lang(ta) .thm-btn,
:lang(ta) .main-menu__list > li > a {
    white-space: normal;
    word-break: break-word;
    hyphens: none;
}

/* ---------------------------------------------------------------------
 * Sentence case for body copy
 *
 * The template sets `text-transform: capitalize` on <body>, so every word on
 * the site renders Title Case — "Concern Sri Lanka Carries Out Charity And
 * Community Development Projects". That is a deliberate look for headings and
 * buttons, but it makes running sentences hard to read and mangles proper
 * nouns and acronyms in the client's own content.
 *
 * Headings, nav and buttons are left as the theme designed them; only running
 * text is reverted. Delete this block to get the theme's original behaviour
 * back. (No effect on Tamil, which has no letter case.)
 * ------------------------------------------------------------------ */
p,
li,
.project-body,
.help__content-list li,
.footer-two__widget-content p {
    text-transform: none;
}

/* ---------------------------------------------------------------------
 * Wordmark
 *
 * Stands in for the client's logo. Two type treatments against each other:
 * the organisation name in the template's display face, and the country set
 * small, letterspaced and in caps beneath it.
 *
 * Colours come from the template's own palette — #122f2a dark green,
 * #046a58 teal, #ffc107 amber. The teal rather than the amber carries the
 * second line on light backgrounds: amber on white measures about 1.9:1,
 * well under the 4.5:1 needed for text that small. On the dark footer the
 * amber has plenty of contrast, so it is used there.
 * ------------------------------------------------------------------ */
.site-logo {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/*
 * The footer styles EVERY <span> inside a widget as a small amber dash, for
 * the decorative divider under each column heading:
 *
 *     .footer-two .footer-two__widget span { background: amber; height: 2px; width: 10px }
 *
 * The wordmark's two spans inherited that, collapsed to 10x2px boxes and
 * overlapped each other. This reset has to out-specify that selector (0,2,1),
 * hence the element qualifiers giving (0,2,2). It is deliberately not scoped
 * to the footer, so the header and mobile menu are protected from the same
 * class of rule.
 */
a.site-logo span.site-logo__name,
a.site-logo span.site-logo__suffix {
    display: block;
    width: auto;
    height: auto;
    background-color: transparent;
}

.site-logo__name {
    font-family: var(--recoleta);
    font-weight: 700;
    font-size: clamp(26px, 2.4vw, 34px);
    letter-spacing: -0.015em;
    color: #122f2a;
}

.site-logo__suffix {
    margin-top: 7px;
    font-family: var(--satoshi);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: #046a58;
}

.site-logo--light .site-logo__name {
    color: #ffffff;
}

.site-logo--light .site-logo__suffix {
    color: #ffc107;
}

.site-logo:hover .site-logo__name {
    color: #046a58;
}

.site-logo--light:hover .site-logo__name {
    color: #ffc107;
}

/*
 * Tamil must not inherit the caps-and-letterspacing treatment. Tamil has no
 * letter case, and adding tracking pulls combining vowel signs away from the
 * consonants they belong to, so the word visually falls apart. The second
 * line is set slightly larger instead, since Tamil at 11px is hard to read.
 */
:lang(ta) .site-logo__suffix {
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    margin-top: 5px;
}

:lang(ta) .site-logo__name {
    letter-spacing: 0;
}

/* ---------------------------------------------------------------------
 * Language switcher (topbar)
 *
 * Replaces the template's currency/country dropdowns. Kept as plain links
 * rather than a <select> so each language has a crawlable URL once the
 * /en and /ta prefixes are in place.
 * ------------------------------------------------------------------ */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-switcher__link {
    font-size: 15px;
    line-height: 1.4;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.language-switcher__link:hover,
.language-switcher__link.is-active {
    opacity: 1;
}

.language-switcher__divider {
    opacity: 0.4;
}

/* ---------------------------------------------------------------------
 * Project card meta
 *
 * Occupies the space the template used for the fundraising progress bar,
 * showing the project's location and year instead.
 * ------------------------------------------------------------------ */
.project-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-bottom: 20px;
}

.project-meta p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.project-meta i {
    opacity: 0.7;
}

/* ---------------------------------------------------------------------
 * Events
 * ------------------------------------------------------------------ */
.event-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.event-badge--live {
    background-color: #046a58;
    color: #ffffff;
}

.event-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 30px 0;
    padding: 24px;
    border-radius: 12px;
    background-color: rgba(4, 106, 88, 0.06);
}

.event-detail-meta__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.event-detail-meta__item i {
    margin-top: 4px;
    color: #046a58;
}

.event-detail-meta__item strong {
    display: block;
    margin-bottom: 4px;
}

.event-detail-meta__item p {
    margin: 0;
}

/*
 * FullCalendar ships unstyled apart from its own stylesheet, which is bundled
 * into the script. These only smooth the joins with the template.
 */
.events-calendar {
    margin-top: 20px;
    padding: 0px 20px;
}

.events-calendar .fc {
    font-family: var(--nunito);
}

.events-calendar .fc a {
    text-decoration: none;
}

/*
 * Event blocks.
 *
 * FullCalendar injects its own stylesheet at runtime — after this file — so
 * competing on its internal classes is a losing game. Two things instead:
 * its documented custom properties for colour, and our own markup (see
 * eventContent in the calendar view) for everything to do with layout.
 */
#events-calendar {
    --fc-event-bg-color: #046a58;
    --fc-event-border-color: #046a58;
    --fc-event-text-color: #ffffff;
    --fc-today-bg-color: rgba(255, 193, 7, 0.16);
}

#events-calendar .fc-daygrid-event {
    padding: 4px 7px;
    margin-bottom: 3px;
    border: none;
    border-radius: 6px;
}

/*
 * A single text node holding "09:00 · Event name".
 *
 * position: static is deliberate — FullCalendar positions the contents of an
 * event block itself, and inheriting that is what previously drew the time on
 * top of the title. The theme's global 26px line-height is also overridden,
 * which is what crushed the text into an unreadable strip.
 */
#events-calendar .cal-event {
    display: block;
    position: static;
    width: 100%;
    line-height: 1.35;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    /* white-space: normal; */
    text-transform: none;
    overflow-wrap: anywhere;
}

#events-calendar .fc-daygrid-event:focus-visible {
    outline: 3px solid #ffc107;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Contact form
 *
 * The form itself uses the theme's own .input-single styling from
 * contact-us.html, so only the additions below are ours.
 * ------------------------------------------------------------------ */

/*
 * Honeypot. Hidden from people without display:none — some bots skip fields
 * that are display:none, and a few browsers skip them for autofill too.
 */
.contact-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-notice {
    margin: 24px 0;
    padding: 16px 20px;
    border-radius: 10px;
    border-left: 4px solid;
}

.contact-notice--success {
    border-color: #046a58;
    background-color: rgba(4, 106, 88, 0.1);
}

.contact-notice--error {
    border-color: #c0392b;
    background-color: rgba(192, 57, 43, 0.08);
}

.contact-notice ul {
    margin: 0;
    padding-left: 18px;
}

/*
 * The theme's contact cards assume a single line of text; a multi-line
 * address needs to wrap rather than overflow the card.
 */
.contact-main__single .content p {
    margin: 0;
    text-transform: none;
}

/* ---------------------------------------------------------------------
 * Footer — "Registered as" column
 *
 * These rows are plain <li> elements rather than the <li><span> the theme
 * uses elsewhere, because of this rule:
 *
 *     .footer-two .footer-two__widget span { background: amber; height: 2px; width: 10px }
 *
 * It turns any span in a footer widget into a decorative dash. That is the
 * same rule that previously collapsed the wordmark, so the reset below is a
 * belt-and-braces guard for any text span that ends up in a widget later —
 * it has to out-specify (0,2,1), hence the element qualifiers giving (0,2,2).
 * ------------------------------------------------------------------ */
.footer-two__widget-content--contact li.footer-registered {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.6;
}

.footer-two__widget-content--contact li.footer-registered i {
    margin-top: 5px;
    flex-shrink: 0;
}

.footer-two .footer-two__widget span.is-text {
    display: inline;
    width: auto;
    height: auto;
    background-color: transparent;
}

/* ---------------------------------------------------------------------
 * CMS page content
 *
 * The client writes these in a rich text editor, so the styling has to hold
 * for whatever headings, lists and paragraphs they use.
 * ------------------------------------------------------------------ */
.page-content__body h2 {
    margin: 40px 0 16px;
    font-size: 28px;
}

.page-content__body h2:first-child {
    margin-top: 0;
}

.page-content__body h3 {
    margin: 30px 0 12px;
    font-size: 22px;
}

.page-content__body p {
    margin-bottom: 16px;
}

.page-content__body ul,
.page-content__body ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.page-content__body li {
    margin-bottom: 8px;
}

.page-content__body ul {
    list-style: disc;
}

.page-content__body ol {
    list-style: decimal;
}

/* ---------------------------------------------------------------------
 * Gallery page
 * ------------------------------------------------------------------ */
.project-gallery--wide {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* ---------------------------------------------------------------------
 * Calendar hover card
 *
 * Appended to <body> rather than to the day cell, so it is never clipped by
 * the calendar's own overflow and never widens a table column.
 * ------------------------------------------------------------------ */
.cal-card {
    position: absolute;
    z-index: 1000;
    width: 300px;
    max-width: calc(100vw - 20px);
    overflow: hidden;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 14px 38px rgba(18, 47, 42, 0.22);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    /* The card follows the pointer's target; it must never become the
       pointer's target itself, or moving onto it would fire mouseleave. */
    pointer-events: none;
}

.cal-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cal-card__image {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
}

.cal-card__body {
    padding: 14px 16px 16px;
}

.cal-card__title {
    margin: 0 0 8px;
    font-family: var(--recoleta);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #122f2a;
    text-transform: none;
}

.cal-card__line {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.5;
    color: #667471;
    text-transform: none;
}

.cal-card__when {
    font-weight: 600;
    color: #046a58;
}

.cal-card__excerpt {
    margin-top: 8px;
}

/* Tamil sits taller than Latin, so the card needs a little more room. */
:lang(ta) .cal-card__title,
:lang(ta) .cal-card__line {
    line-height: 1.6;
}

/*
 * Tamil runs longer than English and the toolbar is the first thing to break,
 * so it is allowed to wrap rather than overflow on narrow screens.
 */
:lang(ta) .events-calendar .fc .fc-toolbar,
.events-calendar .fc .fc-toolbar {
    flex-wrap: wrap;
    gap: 10px;
}

/* ---------------------------------------------------------------------
 * Hero image grading
 *
 * The theme's green overlay is a single directional gradient — solid
 * #091f1b on the left, fully transparent on the right — so it only tints
 * the half the headline sits over. That works because every photograph the
 * theme ships is already desaturated: measured, its own hero images are
 * 1-3% saturation, i.e. effectively greyscale, so they take the brand
 * colour completely.
 *
 * A full-colour photograph does not. Dropping one in leaves the right-hand
 * side looking untinted next to a greyscale slide, which is exactly the
 * mismatch between slides 1 and 2.
 *
 * Rather than require every future upload to be graded by hand, the grade
 * is applied here: each slide is desaturated and given an even wash of the
 * brand green on top of the theme's gradient. Any image now sits in the
 * same palette whatever its source.
 *
 * Tune with the three values below — saturation 0 is fully greyscale.
 * ------------------------------------------------------------------ */
:root {
    /* Multiplied into the hero photograph. Darker or more opaque = stronger
       green wash and less of the original colour showing through. */
    --hero-tint: rgba(9, 31, 27, 0.55);
}

/*
 * The grade is applied with background-blend-mode rather than filter.
 *
 * This element carries a 12-second scale(1) -> scale(1.2) animation, and a
 * filter on an animated element has to be re-applied to the rasterised layer
 * on every frame — visible stutter on a 1776px photograph, worst on the
 * low-powered phones much of this audience is using. Blending the background
 * colour into the background image happens once, at paint time, and the GPU
 * then just transforms the finished layer.
 */
.banner-two .banner-two__slider-bg {
    background-color: var(--hero-tint);
    background-blend-mode: multiply;
}

/* ---------------------------------------------------------------------
 * Hero section backdrop
 *
 * The section itself had no background. That is what produces the two
 * artefacts visible between slides:
 *
 *   - Mid-crossfade, Swiper holds the outgoing slide at ~50% opacity and the
 *     incoming at ~50%. Two half-transparent layers do not add up to full
 *     coverage, so the white page behind shows through and the whole hero
 *     washes out for a moment.
 *   - Where the scaled photograph extends past the box the green gradient
 *     covers, the bare image shows as an untinted band.
 *
 * Painting the section in the darkest brand green means every one of those
 * moments falls back to green rather than to white, and the transition reads
 * as one continuous panel.
 * ------------------------------------------------------------------ */
.banner-two {
    background-color: #091f1b;
}

/* ---------------------------------------------------------------------
 * Hero slide height
 *
 * All three slides share the same CSS and the same Swiper instance — the
 * only thing that differs between them is how tall their headline is.
 *
 * Swiper's wrapper takes the height of the tallest slide (slide 2, whose
 * headline runs to three lines), but the panel inside each slide only grows
 * to its own content. On the shorter slides that panel — and with it the
 * green gradient painted on it — stops short of the bottom, leaving a strip
 * of untinted photograph and then the section's own green below it. That is
 * the band, and the "green twice".
 *
 * Stretching the panel to fill its slide makes every slide the same height,
 * so the gradient always reaches the bottom.
 * ------------------------------------------------------------------ */
.banner-two .swiper-slide {
    display: flex;
    height: auto;
}

.banner-two .banner-two__slider-single {
    flex: 1 0 auto;
    width: 100%;
    /*
     * Clips the scale(1.08) zoom to exactly the box the gradient covers, so
     * the enlarged photograph can never bleed past the tint.
     */
    overflow: hidden;
}

/* ---------------------------------------------------------------------
 * Hero slider timing
 *
 * The theme's numbers do not agree with each other:
 *
 *     Swiper   speed 2000ms, autoplay delay 6000ms   (slide lives ~6s)
 *     CSS      backgroundAnimation 12s               (zoom needs 12s)
 *
 * So the zoom is only ever half-played before the slide is replaced, and the
 * next one restarts from scale(1) — which reads as the movement stopping and
 * jumping rather than easing. Matching the animation to the slide's actual
 * life lets it complete.
 *
 * 8s = the 6s the slide is fully visible plus the 2s crossfade it leaves on.
 * ------------------------------------------------------------------ */
.banner-two .swiper-slide-active .banner-two__slider-bg {
    animation-duration: 8s;
    animation-fill-mode: forwards;
    /* Matches the redefined keyframes below — the theme's static value is
       scale(1.2), which the animation would otherwise snap to on finishing. */
    transform: scale(1.08);
}

/*
 * The theme zooms to scale(1.2), a 20% overshoot. At that size the edges of
 * the photograph travel outside the box the green gradient covers, which is
 * what exposes the bare image along the bottom of the hero. 8% is enough to
 * read as movement while staying inside the tinted area, and it is calmer
 * behind text.
 *
 * Redefining the theme's keyframes by name — this file loads afterwards, so
 * this definition is the one that applies.
 */
@keyframes backgroundAnimation {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.08);
    }
}

/* ---------------------------------------------------------------------
 * Hero calendar
 *
 * Below 1200px it sits in normal flow under the slider, where there is room
 * to read it. From 1200px up it is lifted over the right-hand side of the
 * banner, which is background imagery rather than content, so nothing is
 * covered up.
 * ------------------------------------------------------------------ */
.banner-calendar {
    position: relative;
    z-index: 3;
    margin-top: -30px;
    padding-bottom: 40px;
}

@media (min-width: 1200px) {
    .banner-calendar {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        /* Above the slider controls, which share this corner of the hero. */
        z-index: 4;
        transform: translateY(-50%);
        margin-top: 0;
        padding-bottom: 0;
        /* Let clicks through to the slider except on the panel itself. */
        pointer-events: none;
    }

    .banner-calendar .mini-calendar {
        pointer-events: auto;
    }

    /*
     * The theme pins the hero's prev/next buttons to the middle of the right
     * edge (top: 50%; inset-inline-end: 60px), which sits behind the calendar
     * panel — so they move to the bottom-left when the calendar is on.
     *
     * Scoped to that case only. Applied unconditionally they landed on top of
     * the headline's own buttons whenever the calendar was switched off.
     */
    .banner-two--with-calendar .slider-navigation {
        top: auto;
        bottom: 50px;
        inset-inline-end: auto;
        inset-inline-start: 60px;
        transform: none;
        flex-direction: row;
    }
}

@media (min-width: 1400px) {
    .banner-two--with-calendar .slider-navigation {
        inset-inline-start: 130px;
    }
}

.mini-calendar {
    padding: 22px 24px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 40px rgba(18, 47, 42, 0.18);
    backdrop-filter: blur(4px);
}

.mini-calendar__head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.mini-calendar__month {
    font-family: var(--recoleta);
    font-size: 20px;
    font-weight: 700;
    color: #122f2a;
}

.mini-calendar__more {
    font-size: 14px;
    font-weight: 600;
    color: #046a58;
}

.mini-calendar__grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.mini-calendar__grid th {
    padding-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    color: #667471;
}

.mini-calendar__day {
    padding: 2px;
    text-align: center;
}

.mini-calendar__day span,
.mini-calendar__day a {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    color: #122f2a;
}

.mini-calendar__day.is-outside span,
.mini-calendar__day.is-outside a {
    opacity: 0.35;
}

.mini-calendar__day.is-today span,
.mini-calendar__day.is-today a {
    outline: 2px solid #ffc107;
    outline-offset: -2px;
}

/* A day with an event is the one thing that must stand out. */
.mini-calendar__day.has-event a {
    background-color: #046a58;
    color: #ffffff;
    font-weight: 700;
}

.mini-calendar__day.has-event a:hover {
    background-color: #122f2a;
}

.mini-calendar__list {
    list-style: none;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(18, 47, 42, 0.12);
}

.mini-calendar__list li + li {
    margin-top: 8px;
}

.mini-calendar__list a {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 14px;
    color: #122f2a;
}

.mini-calendar__date {
    flex-shrink: 0;
    font-weight: 700;
    color: #046a58;
}

.mini-calendar__name {
    text-transform: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Announcements
 * ------------------------------------------------------------------ */
.announcements {
    padding: 40px 0 0;
}

.announcement {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
    padding: 20px 24px;
    border-left: 4px solid #ffc107;
    border-radius: 10px;
    background-color: rgba(255, 193, 7, 0.1);
}

.announcement__label {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #046a58;
}

:lang(ta) .announcement__label {
    text-transform: none;
    letter-spacing: 0;
}

.announcement__title {
    margin: 0 0 6px;
    font-size: 20px;
}

.announcement__content p {
    margin: 0;
}

/* ---------------------------------------------------------------------
 * Project listing and detail
 * ------------------------------------------------------------------ */
.project-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

.project-filters__link {
    padding: 8px 20px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 15px;
    line-height: 1.4;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.project-filters__link:hover,
.project-filters__link.is-active {
    opacity: 1;
}

.project-cover {
    margin: 30px 0;
}

.project-cover img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.project-body {
    margin-bottom: 40px;
}

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

.project-gallery__heading {
    margin-bottom: 20px;
}

.project-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 50px;
}

/* A fixed ratio gives object-fit something to crop against, so a mix of
   portrait and landscape uploads still lays out as an even grid. */
.project-gallery__item {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 10px;
}

.project-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.project-gallery__item:hover img {
    transform: scale(1.04);
}

.project-pagination {
    margin-top: 40px;
}

/* Laravel's default pagination markup is Tailwind-based; keep it from
   inheriting the template's list bullets and spacing. */
.project-pagination ul,
.project-pagination ol {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ---------------------------------------------------------------------
 * Equal-height cards
 *
 * The theme sizes both card types to their own content, so a project with a
 * two-line description sits shorter than one with four, and the "View
 * Project" buttons land at different heights across a row.
 *
 * These stretch every card to the tallest in its row rather than pinning a
 * pixel height. A fixed height would clip: Tamil runs longer than the same
 * sentence in English, so the height that fits /en would truncate /ta.
 *
 * Covers the homepage slider, the projects and events listings, and the
 * related-projects strip — all of which sit inside .cause.
 * ------------------------------------------------------------------ */
.cause .swiper-slide,
.difference .swiper-slide {
    height: auto;
}

/* -- Project and event cards -- */
.cause .cause__slider-inner {
    height: 100%;
}

.cause .cause__slider-single {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/*
 * The description is what varies, so it absorbs the difference. Growing it
 * also pushes the meta and button block to the bottom on its own, which is
 * why the theme's 24px margin above that block is left alone.
 */
.cause .cause__slider-single .content {
    flex: 1 1 auto;
}

/* -- "What we do" cards -- */
.difference .difference__single-wrapper {
    height: 100%;
}

.difference .difference__single {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---------------------------------------------------------------------
 * Events page — upcoming list beside the calendar
 *
 * The list scrolls inside its own column so a busy month never pushes the
 * calendar down the page. The height is tied to the viewport rather than
 * fixed in pixels, so it stays in proportion on a laptop and a large
 * monitor alike.
 * ------------------------------------------------------------------ */
.event-panel {
    height: 100%;
    padding: 24px 20px;
    border-radius: 14px;
    background-color: rgba(4, 106, 88, 0.06);
}

.event-panel__heading {
    margin: 0 0 18px;
    font-size: 22px;
    line-height: 1.3;
}

.event-panel__scroll {
    max-height: min(60vh, 560px);
    overflow-y: auto;
    /* Room for the scrollbar so it never sits on top of the text. */
    padding-right: 6px;
    overscroll-behavior: contain;
}

.event-panel__scroll:focus-visible {
    outline: 3px solid #ffc107;
    outline-offset: 3px;
}

.event-panel__empty {
    margin: 0;
    opacity: 0.75;
}

/* -- One event in the list -- */
.event-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 10px;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

.event-row + .event-row {
    border-top: 1px solid rgba(18, 47, 42, 0.1);
}

.event-row:hover {
    background-color: rgba(255, 255, 255, 0.75);
}

.event-row__date {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: #046a58;
    color: #ffffff;
    line-height: 1.1;
}

.event-row__day {
    font-size: 18px;
    font-weight: 700;
}

.event-row__month {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Tamil has no letter case, and tracking pulls its vowel signs off the
   consonants they attach to. */
:lang(ta) .event-row__month {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}

.event-row__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.event-row__name {
    font-weight: 600;
    line-height: 1.35;
    color: #122f2a;
    text-transform: none;
}

.event-row__meta {
    font-size: 14px;
    line-height: 1.5;
    color: #667471;
    text-transform: none;
}

/* Stacked on phones, so the list does not eat the screen before the
   calendar is reached. */
@media (max-width: 767.98px) {
    .event-panel__scroll {
        max-height: 320px;
    }
}

/* ---------------------------------------------------------------------
 * Inner page banner — shorter, and showing the whole picture
 *
 * The theme sizes this band with 120px of padding top and bottom and then
 * stretches the image to fill whatever height that produces — the image
 * has width:100% and height:100% with no object-fit, so it is distorted
 * rather than cropped.
 *
 * The banner image is 1826x344, a 5.31:1 strip. Tying the band's height to
 * that same ratio means "cover" has nothing to crop: the whole picture is
 * visible edge to edge. The padding drops to give the shorter band the
 * client asked for, and min-height keeps the title from ever colliding
 * with the edges once the viewport is narrow enough that the ratio alone
 * would leave too little room.
 * ------------------------------------------------------------------ */
:root {
    /* Width divided by height of the banner image. Update alongside it. */
    --page-banner-ratio: 5.31;
}

.common-banner {
    padding: 48px 0;
    min-height: calc(100vw / var(--page-banner-ratio));
    display: flex;
    align-items: center;
}

.common-banner .banner-bg img {
    width: 100%;
    height: 100%;
    /* The band matches the image's proportions, so nothing is lost. */
    object-fit: cover;
    object-position: center;
}

/*
 * Below that, the ratio alone gives less height than the heading needs, so
 * the band grows and the picture does crop — unavoidable for a 5.31:1 strip
 * on a phone. Centring keeps the middle of the image in view.
 */
@media (max-width: 991.98px) {
    .common-banner {
        min-height: 220px;
        padding: 40px 0;
    }
}

/* ---------------------------------------------------------------------
 * Full-bleed image band (homepage)
 *
 * The band carries the image's own 5.31:1 ratio, so "cover" has nothing to
 * crop and the whole picture is visible at every width — phone through to a
 * wide monitor. That is only possible because nothing is laid over it: any
 * text would need vertical room the ratio does not allow, and the sides
 * would start cropping on narrow screens.
 *
 * It escapes any container it is placed in, so it stays edge to edge even
 * if the section around it is later given a max-width.
 * ------------------------------------------------------------------ */
.banner-strip {
    display: block;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    /* Belongs to the image, not the page: no scrollbar from the 100vw. */
    overflow: hidden;
    line-height: 0;
}

.banner-strip img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1826 / 344;
    object-fit: cover;
}

/* ---------------------------------------------------------------------
 * Hero height
 *
 * Three things made the band far taller than it needed to be:
 *
 *   1. the theme caps the headline at max-width: 460px, which forced a long
 *      title into six short lines;
 *   2. the slide carries 120px of padding top and bottom;
 *   3. every slide matches the tallest, so the longest headline set the
 *      height for all three.
 *
 * The column the headline sits in already limits its width, so the 460px cap
 * only added line breaks. Removing it and scaling the type with the viewport
 * takes the same words to roughly half the lines.
 *
 * Nothing here caps the height in pixels: the slide clips its overflow, so a
 * hard cap would cut the end off a long Tamil headline rather than shrink it.
 * ------------------------------------------------------------------ */
.banner-two .banner-two__slider-single {
    padding: clamp(56px, 6vw, 96px) 0;
}

.banner-two .banner-two__slider-content h1 {
    max-width: 100%;
    font-size: clamp(30px, 3.2vw, 54px);
    line-height: 1.16;
}

/*
 * The handwritten highlight inside the headline is set in fixed pixels at
 * two breakpoints (70px, then 90px), which would tower over the smaller
 * heading. In em it tracks whatever size the headline lands on. The selector
 * has to match the theme's four-class specificity to win.
 */
.banner-two .banner-two__slider-single .banner-two__slider-content h1 span {
    font-size: 1.08em;
    line-height: 1;
}

/*
 * Tamil sits taller than Latin at the same size and runs longer, so it gets
 * a little more leading and a slightly smaller cap.
 */
:lang(ta) .banner-two .banner-two__slider-content h1 {
    font-size: clamp(26px, 2.9vw, 46px);
    line-height: 1.35;
}

/* ---------------------------------------------------------------------
 * Hero padding
 *
 * The hero uses .container-fluid, which carries only half a gutter — about
 * 12px — so the headline and buttons sit almost against the edge of the
 * screen. This gives the content room to breathe without pulling it into a
 * narrow centred container, which would undo the full-width look.
 *
 * Scoped to .banner-two: other sections use .container-fluid too, and this
 * deliberately leaves them alone.
 * ------------------------------------------------------------------ */
.banner-two > .banner-two__slider .container-fluid,
.banner-two > .banner-calendar .container-fluid {
    padding-inline: clamp(20px, 4vw, 72px);
}

/* ---------------------------------------------------------------------
 * Header pill at every desktop width
 *
 * The theme drops the yellow pill between 1200px and 1400px:
 *
 *     @media (min-width: 1200px) and (max-width: 1399.98px) {
 *         .header-secondary .navbar__menu-wrapper { background-color: transparent }
 *     }
 *
 * It does that to reclaim width for the "Call Us Now" block, which sits
 * inside the pill alongside the menu. That block only renders when a phone
 * number is set in Site settings, so on this site the room is there and the
 * header can keep one identity at every desktop size.
 *
 * The theme's tighter link padding in this range is left as it is — that is
 * what keeps the menu fitting; only the background comes back.
 * ------------------------------------------------------------------ */
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
    .header-secondary .navbar__menu-wrapper {
        background-color: var(--base-color);
        border-radius: 60px;
        /* The pill needs inner room the theme removed along with it. */
        padding-inline: 22px;
    }
}

/* ---------------------------------------------------------------------
 * Donate button
 *
 * Uses the theme's own button styling, so it matches every other call to
 * action. Only the heart and the header spacing are ours.
 * ------------------------------------------------------------------ */
.donate-button {
    gap: 8px;
}

.navbar__options .donate-button {
    margin-inline-end: 8px;
}

.mobile-menu__cta .donate-button {
    width: 100%;
    justify-content: center;
}

/* ---------------------------------------------------------------------
 * Donation section
 *
 * Two tones so it can sit against whatever comes before it: dark on the
 * brand green for a strong close to a page, light on the cream ground when
 * the section above is already dark.
 * ------------------------------------------------------------------ */
.donate-section {
    padding: clamp(56px, 7vw, 100px) 0;
}

.donate-section__inner {
    max-width: 720px;
    margin-inline: auto;
}

.donate-section__heading {
    margin: 0 0 16px;
    font-size: clamp(26px, 2.6vw, 40px);
    line-height: 1.25;
}

.donate-section__body {
    margin: 0 0 28px;
    font-size: 17px;
    line-height: 1.7;
    text-transform: none;
}

.donate-section__cta {
    display: flex;
    justify-content: center;
}

/*
 * The registration line is reassurance, not a heading — quiet, but present.
 */
.donate-section__note {
    margin: 22px 0 0;
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.75;
    text-transform: none;
}

/*
 * -- Dark tone --
 *
 * Deep teal rather than the brand green (#122f2a). The homepage runs cream,
 * the featured event flyer, cream, then this, and on the green the flyer
 * section and the donation section read as the same block interrupted —
 * the eye stops registering them as two invitations.
 *
 * Teal is a cousin of the brand green, cooler and bluer, so the page still
 * holds together while the two dark bands are plainly distinct. Warm colours
 * were the other candidate and are ruled out by the donate button: it is now
 * PayPal's gold pill, and on an amber ground it disappears. Against this it
 * carries the section.
 */
.donate-section--dark {
    background-color: #0d3a3d;
    /* A little depth so the band is not a flat fill. */
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.045) 0%, transparent 55%);
}

.donate-section--dark .donate-section__heading {
    color: #ffffff;
}

.donate-section--dark .donate-section__body,
.donate-section--dark .donate-section__note {
    color: #d7dedc;
}

/*
 * -- Brand tone (default) --
 *
 * White ground, brand green headings, gold accents.
 *
 * The gold is #8a6100, not the brand's #ffc107. On white the bright amber
 * measures 1.63:1, which is unreadable — it is a fill colour, not a text
 * colour. Deepening it to #8a6100 keeps it plainly gold while reaching
 * 5.54:1. The bright amber still appears here, but only behind the eyebrow
 * as a tint, where it carries no words.
 *
 * The hairline rules top and bottom matter more than they look: the sections
 * above and below are cream, and without an edge the white band drifts into
 * them instead of reading as its own invitation.
 */
.donate-section--brand {
    background-color: #ffffff;
    border-block: 1px solid rgba(18, 47, 42, 0.1);
}

.donate-section--brand .donate-section__heading {
    color: #122f2a;
}

.donate-section--brand .donate-section__body {
    color: #3f524e;
}

.donate-section--brand .donate-section__note {
    /* Set outright rather than dimmed: opacity on white is unpredictable
       for contrast, and this line is the charity registration. */
    opacity: 1;
    color: #5a6b67;
}

.donate-section--brand .sub-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background-color: rgba(255, 193, 7, 0.16);
    color: #8a6100;
}

.donate-section--brand .sub-title i {
    color: #8a6100;
}

/* -- Light tone -- */
.donate-section--light {
    background-color: rgba(4, 106, 88, 0.06);
}

.donate-section--light .donate-section__heading {
    color: #122f2a;
}

/* Tamil sits taller and runs longer than the same sentence in English. */
:lang(ta) .donate-section__heading {
    font-size: clamp(22px, 2.2vw, 34px);
    line-height: 1.45;
}

/* ---------------------------------------------------------------------
 * Header clearance
 *
 * The theme's header is position:absolute at top:0, and expects each page's
 * first section to clear it by hand — .banner-two and .common-banner both
 * carry margin-top:90px for exactly that. Pages built without either (the
 * projects listing, a project, the gallery, events) started at y=0 and their
 * heading rendered underneath the header. It showed up first in Tamil only
 * because Tamil headings are taller, not because it was a Tamil problem.
 *
 * The offset now lives on the page wrapper, once, so it applies to every
 * page including any added later. The theme's own margins are zeroed so the
 * space is not counted twice.
 * ------------------------------------------------------------------ */
:root {
    --header-clearance: 90px;
}

.site-main {
    padding-top: var(--header-clearance);
}

.site-main > .banner-two,
.site-main > .common-banner {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Home page projects slider
   --------------------------------------------------------------------------
   Slide counts are set in resources/views/home/sections/causes.blade.php:
   1 on mobile, 2 small, 3 medium, 4 large and up.

   Swiper sizes each slide to a fraction of the container, so with fewer
   published projects than slots the cards packed to the left and left a gap
   on the right — three projects against four slots left a whole quarter of
   the row empty. Spreading them evenly keeps the row balanced until there is
   enough content to fill it.

   This is inert once the slides do fill the container: their combined width
   then meets or exceeds it, and justify-content has nothing left to
   distribute, so sliding is unaffected.
   -------------------------------------------------------------------------- */
.cause__slider .swiper-wrapper {
    justify-content: space-evenly;
}

/* ---------------------------------------------------------------------
 * Header: one row at every desktop width
 *
 * The desktop menu appears at 1200px, and from there to roughly 1500px the
 * logo, the nav pill and the donate button together outgrew the row. Bootstrap
 * navbars wrap by default, so the donate button dropped onto a second line
 * and sat under the menu.
 *
 * Two causes, both fixed here. The row is told not to wrap, and the PayPal
 * button — a raster image with no intrinsic constraint, which rendered far
 * wider than the theme's own button — is held to the height of the pill
 * beside it. The pill is allowed to shrink so the nav absorbs what is left
 * rather than forcing the overflow.
 * ------------------------------------------------------------------ */
@media only screen and (min-width: 1200px) {
    .header-secondary .navbar {
        flex-wrap: nowrap;
    }

    /* Without min-width:0 a flex item refuses to shrink below its content. */
    .header-secondary .navbar__menu-wrapper {
        min-width: 0;
    }
}

/* ---------------------------------------------------------------------
 * Donate button
 *
 * Drawn in CSS instead of PayPal's btn_donate_LG.gif. That image is 122x47,
 * so any attempt to size it for the header resampled a small raster and it
 * went soft; it was also English-only. This keeps PayPal's familiar gold
 * pill and navy label — donors recognise it, and recognition is worth
 * keeping — while staying sharp at any size and translating.
 * ------------------------------------------------------------------ */
.donate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 30px;
    border: 1px solid #c9971f;
    border-radius: 999px;
    background-image: linear-gradient(180deg, #fefbe8 0%, #f9e79f 42%, #f5d76e 52%, #e8b62c 100%);
    color: #003087;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    /* The top highlight is what gives the pill its rounded, lit look. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.18);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: filter 0.2s ease, transform 0.1s ease;
}

.donate-btn:hover,
.donate-btn:focus-visible {
    filter: brightness(1.05);
}

.donate-btn:active {
    /* Pressed: the highlight moves to the bottom so the pill reads as pushed in. */
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.6), inset 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

/*
 * Tamil has no italic tradition, and the browser would synthesise a slant
 * over the Noto Sans Tamil glyphs. The angle is an English-only flourish.
 */
html[lang="ta"] .donate-btn {
    font-style: normal;
}

/* The form is only a wrapper; it must not add height or line-box space. */
.donate-form {
    margin: 0;
    line-height: 0;
}

.mobile-menu__cta .donate-form,
.mobile-menu__cta .donate-btn {
    width: 100%;
}

/* ---------------------------------------------------------------------
 * Featured event
 *
 * Sits midway down the homepage, built around the client's printed flyer.
 *
 * The ground is the brand green rather than the cream used above and below
 * it: the flyer is saturated magenta, and on cream the two fought each
 * other. A dark field lets the poster read as the object it is and gives
 * the section a clear edge in the scroll.
 *
 * The flyer is only 375x533, so it is never asked to render larger than it
 * was supplied — scaling it up would show the softness immediately. It is
 * capped, not stretched, and the column simply centres it when there is
 * more room.
 * ------------------------------------------------------------------ */
.featured-event {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 7vw, 100px) 0;
    background-color: #122f2a;
    color: #ffffff;
}

/* A soft warm glow behind the poster, so the block is not a flat slab. */
.featured-event::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(58% 70% at 22% 30%, rgba(255, 193, 7, 0.16), transparent 65%),
        radial-gradient(48% 60% at 88% 82%, rgba(255, 193, 7, 0.09), transparent 70%);
    pointer-events: none;
}

.featured-event > .container {
    position: relative; /* above the glow */
}

.featured-event__inner {
    display: grid;
    /* The poster column is bounded by the flyer's own width. */
    grid-template-columns: minmax(0, 375px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

@media only screen and (max-width: 991.98px) {
    .featured-event__inner {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }
}

/* -- Poster -- */
.featured-event__poster img {
    display: block;
    width: 100%;
    max-width: 375px; /* never upscaled past what was supplied */
    height: auto;
    border-radius: 18px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-event__poster a:hover img,
.featured-event__poster a:focus-visible img {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
}

/* -- Copy -- */
.featured-event__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 7px 16px;
    border: 1px solid rgba(255, 193, 7, 0.45);
    border-radius: 999px;
    background-color: rgba(255, 193, 7, 0.12);
    color: var(--base-color, #ffc107);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.featured-event__presents {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
}

.featured-event__title {
    margin-bottom: 10px;
    color: #ffffff;
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.15;
}

.featured-event__subtitle {
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
}

.featured-event__lineup {
    margin-bottom: 26px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
}

.featured-event__lineup span {
    display: block;
    margin-bottom: 4px;
    color: var(--base-color, #ffc107);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* -- Date, venue, telephone -- */
.featured-event__meta {
    display: grid;
    gap: 14px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.featured-event__meta li {
    display: grid;
    grid-template-columns: 22px auto;
    gap: 2px 12px;
    align-items: start;
}

@media only screen and (max-width: 991.98px) {
    .featured-event__meta li {
        justify-content: center;
    }
}

.featured-event__meta i {
    grid-row: span 2;
    margin-top: 4px;
    color: var(--base-color, #ffc107);
    text-align: center;
}

.featured-event__meta-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.featured-event__meta-value,
.featured-event__meta-value a {
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
}

.featured-event__meta-value a:hover {
    color: var(--base-color, #ffc107);
}

/* -- Ticket prices -- */
.featured-event__tickets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 30px;
}

@media only screen and (max-width: 991.98px) {
    .featured-event__tickets {
        justify-content: center;
    }
}

.featured-event__tickets-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.featured-event__tickets ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.featured-event__tickets li {
    padding: 6px 15px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.06);
    font-size: 15px;
    font-weight: 600;
}

/* -- Call to action -- */
.featured-event__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 22px;
    align-items: center;
}

@media only screen and (max-width: 991.98px) {
    .featured-event__cta {
        justify-content: center;
    }
}

.featured-event__sponsors {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-style: italic;
}

html[lang="ta"] .featured-event__sponsors {
    font-style: normal;
}

/* ---------------------------------------------------------------------
 * Events calendar — presentation
 *
 * FullCalendar injects its own stylesheet at runtime, after this file, so it
 * wins the cascade on its internal classes. Two things are used instead of
 * fighting it: its documented custom properties, and specificity through the
 * #events-calendar id.
 *
 * The default look is a spreadsheet — heavy rules on every side of every
 * cell, a slate-grey button bar, and six week rows whatever the month. That
 * reads as a data table. This makes it a card: one soft outer edge, hairline
 * separators inside, and the brand on the controls.
 * ------------------------------------------------------------------ */
#events-calendar {
    --fc-border-color: rgba(18, 47, 42, 0.09);
    --fc-page-bg-color: #ffffff;
    /* Today is marked on the date itself, not by washing the whole cell. */
    --fc-today-bg-color: transparent;
    --fc-neutral-bg-color: rgba(18, 47, 42, 0.02);

    padding: clamp(14px, 2vw, 24px);
    border: 1px solid rgba(18, 47, 42, 0.09);
    border-radius: 18px;
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(18, 47, 42, 0.06);
}

.events-calendar {
    padding: 0;
}

/* -- Toolbar -- */
#events-calendar .fc-toolbar.fc-header-toolbar {
    margin-bottom: 18px;
}

#events-calendar .fc-toolbar-title {
    color: #122f2a;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 700;
    letter-spacing: -0.01em;
}

#events-calendar .fc .fc-button-group {
    gap: 8px;
}

/* The bar is ours, so the whole default button skin is replaced. */
#events-calendar .fc .fc-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(18, 47, 42, 0.14);
    border-radius: 999px;
    background-color: #ffffff;
    background-image: none;
    color: #122f2a;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#events-calendar .fc .fc-button-primary:hover:not(:disabled) {
    border-color: #046a58;
    background-color: rgba(4, 106, 88, 0.08);
    color: #046a58;
}

#events-calendar .fc .fc-button-primary:focus-visible {
    outline: 3px solid #ffc107;
    outline-offset: 2px;
    box-shadow: none;
}

/* Prev and next are icons, so they get an even circle rather than a pill. */
#events-calendar .fc .fc-prev-button,
#events-calendar .fc .fc-next-button {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
}

#events-calendar .fc .fc-today-button {
    padding: 9px 18px;
    border-color: #046a58;
    background-color: #046a58;
    color: #ffffff;
}

#events-calendar .fc .fc-today-button:hover:not(:disabled) {
    border-color: #122f2a;
    background-color: #122f2a;
    color: #ffffff;
}

/*
 * "Today" is disabled while the current month is on screen, which is most of
 * the time. At FullCalendar's default opacity it looks broken rather than
 * inactive, so it steps back to a quiet outline instead.
 */
#events-calendar .fc .fc-today-button:disabled {
    border-color: rgba(18, 47, 42, 0.12);
    background-color: transparent;
    color: #8a9793;
    opacity: 1;
}

/* -- Grid -- */
#events-calendar .fc-scrollgrid {
    border: none;
}

#events-calendar .fc-scrollgrid-section > td {
    border: none;
}

#events-calendar .fc-col-header-cell {
    padding: 0 0 10px;
    border-bottom: 1px solid var(--fc-border-color);
    background-color: transparent;
}

#events-calendar .fc-col-header-cell-cushion {
    color: #6b7d79;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Tamil event names run long, so cells are given room rather than clipping. */
#events-calendar .fc-daygrid-day-frame {
    min-height: 96px;
    padding: 4px;
}

#events-calendar .fc-day-sat,
#events-calendar .fc-day-sun {
    background-color: rgba(18, 47, 42, 0.02);
}

#events-calendar .fc-daygrid-day-number {
    padding: 6px 8px;
    color: #2f423e;
    font-size: 14px;
    font-weight: 600;
}

/* Days spilling in from the neighbouring months are context, not content. */
#events-calendar .fc-day-other .fc-daygrid-day-number {
    color: #b9c3c0;
    font-weight: 500;
}

/*
 * Today is a filled disc on the date, the convention every phone calendar
 * uses. The default tints the entire cell, which competes with the event
 * blocks sitting inside it.
 */
#events-calendar .fc-day-today .fc-daygrid-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 3px;
    padding: 0;
    border-radius: 50%;
    background-color: #046a58;
    color: #ffffff;
}

/* -- Events -- */
#events-calendar .fc-daygrid-event {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#events-calendar .fc-daygrid-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(4, 106, 88, 0.28);
}

#events-calendar .fc-daygrid-more-link {
    color: #046a58;
    font-size: 12px;
    font-weight: 600;
}

/* -- Small screens -- */
@media only screen and (max-width: 767.98px) {
    #events-calendar .fc-daygrid-day-frame {
        min-height: 62px;
    }

    #events-calendar .fc-toolbar.fc-header-toolbar {
        justify-content: center;
    }

    #events-calendar .cal-event {
        font-size: 12px;
    }
}