/* =========================================================================
 * SATA — CUSTOM POST TYPE PAGES, MODERN REDESIGN (Round 4)
 *
 * Styles every redesigned CPT surface:
 *   1. Shared tokens & utilities (buttons, chips, empty state, pagination)
 *   2. CPT hero banner (single events / single gallery)
 *   3. Single Event page
 *   4. Single Gallery page
 *   5. Events listing cards ([Events_Cards_page])
 *   6. Gallery listing cards ([gallery_cards])
 *   7. Roles cards ([roles_cards]) + Important Links ([imp_Links])
 *   8. Photo grid (shared by event gallery / gallery single)
 *
 * All selectors are new (sata-* prefix) — legacy CSS in style.css /
 * layout-fixes.css is untouched and simply no longer matched.
 * ========================================================================= */


/* ------------------------------------------------------------------ */
/* 1. Shared — buttons, chips, section titles, empty state, pagination */
/* ------------------------------------------------------------------ */

.sata-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}

.sata-btn:hover {
    transform: translateY(-2px);
}

.sata-btn:focus-visible {
    outline: 3px solid rgba(47, 69, 150, 0.4);
    outline-offset: 2px;
}

.sata-btn--primary {
    background: linear-gradient(135deg, #ff8a00, #ff6a00);
    color: #fff;
    box-shadow: 0 6px 18px rgba(255, 138, 0, 0.35);
}

.sata-btn--primary:hover {
    box-shadow: 0 10px 24px rgba(255, 138, 0, 0.45);
    color: #fff;
}

.sata-btn--whatsapp {
    background: linear-gradient(135deg, #1fb355, #148e29);
    color: #fff;
    box-shadow: 0 6px 18px rgba(20, 142, 41, 0.3);
}

.sata-btn--whatsapp:hover {
    box-shadow: 0 10px 24px rgba(20, 142, 41, 0.4);
    color: #fff;
}

.sata-btn--ghost {
    background: transparent;
    color: #2f4596;
    border-color: #2f4596;
}

.sata-btn--ghost:hover {
    background: #2f4596;
    color: #fff;
}

.sata-btn--block {
    width: 100%;
}

/* Meta chip — icon + text pill used in heros and cards */
.sata-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.sata-chip i {
    font-size: 13px;
}

/* Frosted variant for use over hero imagery */
.sata-chip--glass {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.sata-chip--glass i {
    color: #ffb45e;
}

/* Category tag */
.sata-tag {
    display: inline-block;
    padding: 5px 14px;
    background: #ff8a00;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: 999px;
    text-decoration: none;
}

/* Section heading inside cards (Event Gallery / Event Sponsors / etc.) */
.sata-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 700;
    color: #1d2c5e;
}

.sata-section-title::after {
    content: "";
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #ff8a00, transparent);
    border-radius: 2px;
}

.sata-section-title i {
    color: #ff8a00;
    font-size: 17px;
}

/* Empty state */
.sata-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 60px 24px;
    text-align: center;
    background: #fafbfe;
    border: 1px dashed #d9deeb;
    border-radius: 14px;
    color: #666;
}

.sata-empty i {
    font-size: 34px;
    color: #c3cbe2;
}

.sata-empty p {
    margin: 0;
    font-size: 16px;
}

/* Pagination — styles WP's default .page-numbers output */
.sata-pagination {
    display: flex;
    justify-content: center;
    margin: 36px 0 10px;
}

.sata-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    margin: 0 4px;
    padding: 0 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e4e8f2;
    color: #1d2c5e;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.sata-pagination .page-numbers:hover {
    border-color: #ff8a00;
    color: #ff8a00;
}

.sata-pagination .page-numbers.current {
    background: linear-gradient(135deg, #ff8a00, #ff6a00);
    border-color: transparent;
    color: #fff;
}

.sata-pagination .page-numbers.dots {
    border: 0;
    background: transparent;
}


/* ------------------------------------------------------------------ */
/* 2. CPT hero banner (single event / single gallery)                 */
/* ------------------------------------------------------------------ */

.sata-hero {
    position: relative;
    width: 100%;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    color: #fff;
    background:
        radial-gradient(ellipse at top left, #2a3a78 0%, transparent 60%),
        linear-gradient(135deg, #1d2c5e 0%, #2a1410 100%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    margin-bottom: 44px;
}

/* When a featured image exists it is set as an inline bg on the element;
 * this overlay keeps text readable on any photo. */
.sata-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(18, 26, 54, 0.55) 0%,
            rgba(18, 26, 54, 0.72) 55%,
            rgba(16, 14, 30, 0.94) 100%);
    z-index: 1;
}

.sata-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 110px 24px 42px;
}

.sata-hero .sata-breadcrumb {
    margin-bottom: 16px;
}

.sata-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.sata-hero__title {
    margin: 0 0 18px;
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.18;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 900px;
}

.sata-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* ------------------------------------------------------------------ */
/* 3. Single Event page                                               */
/* ------------------------------------------------------------------ */

.sata-event-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 64px;
}

.sata-event-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 36px;
    align-items: start;
}

.sata-event-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sata-event-card {
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 16px;
    padding: 34px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 28px rgba(16, 24, 40, 0.06);
}

.sata-event-card .sata-single-content {
    font-size: 16px;
    line-height: 1.75;
    color: #333;
}

/* Poster / featured image inside the article */
.sata-event-poster {
    margin: 0 0 26px;
    border-radius: 12px;
    overflow: hidden;
    background: #f2f4fa;
}

.sata-event-poster img {
    width: 100%;
    height: auto;
    display: block;
}

/* CTA row (registration / WhatsApp) */
.sata-event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 26px;
    margin-top: 26px;
    border-top: 1px solid #eef0f5;
}

/* Sidebar fact list (Event Details card) */
.sata-fact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sata-fact-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f2f7;
}

.sata-fact-list li:last-child {
    border-bottom: 0;
}

.sata-fact-list .sata-fact__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f2f5ff;
    color: #2f4596;
    font-size: 15px;
}

.sata-fact-list .sata-fact__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a92ad;
    margin-bottom: 2px;
}

.sata-fact-list .sata-fact__value {
    font-size: 15px;
    font-weight: 600;
    color: #1d2c5e;
    line-height: 1.45;
    word-break: break-word;
}

/* Sponsors strip */
.sata-sponsor-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}

.sata-sponsor-strip .sata-sponsor {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: #fafbfe;
    border: 1px solid #eef0f5;
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.sata-sponsor-strip .sata-sponsor:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08);
}

.sata-sponsor-strip .sata-sponsor img {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
}


/* ------------------------------------------------------------------ */
/* 4. Single Gallery page                                             */
/* ------------------------------------------------------------------ */

.sata-gallery-single-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 64px;
}

.sata-gallery-single-card {
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 16px;
    padding: 34px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 28px rgba(16, 24, 40, 0.06);
}

.sata-gallery-single-card .sata-single-content {
    margin-top: 26px;
    font-size: 16px;
    line-height: 1.75;
    color: #333;
}

.sata-gallery-single-card .sata-single-content:empty {
    display: none;
}

/* "More galleries" strip below the grid */
.sata-more-galleries {
    margin-top: 40px;
}

.sata-more-galleries__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}

.sata-mini-gcard {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #1d2c5e;
    text-decoration: none;
}

.sata-mini-gcard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.sata-mini-gcard:hover img {
    transform: scale(1.06);
}

.sata-mini-gcard__label {
    position: absolute;
    inset: auto 0 0 0;
    padding: 34px 16px 14px;
    background: linear-gradient(180deg, transparent, rgba(12, 16, 34, 0.88));
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}


/* ------------------------------------------------------------------ */
/* 5. Events listing cards ([Events_Cards_page])                      */
/* ------------------------------------------------------------------ */

.sata-events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

@media (max-width: 991px) {
    .sata-events-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

.sata-ecard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sata-ecard:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06), 0 18px 38px rgba(16, 24, 40, 0.12);
}

.sata-ecard__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #1d2c5e;
}

.sata-ecard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.sata-ecard:hover .sata-ecard__media img {
    transform: scale(1.05);
}

.sata-ecard__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
}

.sata-ecard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
    padding: 20px 22px 22px;
}

.sata-ecard__title {
    margin: 0;
    font-size: 18.5px;
    font-weight: 700;
    line-height: 1.35;
}

.sata-ecard__title a {
    color: #1d2c5e;
    text-decoration: none;
    transition: color 0.2s;
}

.sata-ecard__title a:hover {
    color: #ff8a00;
}

.sata-ecard__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 14px;
    color: #555;
}

.sata-ecard__meta li {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.sata-ecard__meta i {
    width: 16px;
    text-align: center;
    color: #ff8a00;
    font-size: 13px;
    flex-shrink: 0;
    transform: translateY(1px);
}

.sata-ecard__foot {
    margin-top: auto;
    padding-top: 14px;
}

.sata-ecard__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: #2f4596;
    text-decoration: none;
}

.sata-ecard__btn i {
    transition: transform 0.2s;
    font-size: 13px;
}

.sata-ecard__btn:hover {
    color: #ff8a00;
}

.sata-ecard__btn:hover i {
    transform: translateX(4px);
}

/* Load More Events Button */
.sata-loadmore-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 42px;
    margin-bottom: 20px;
    width: 100%;
}

.sata-loadmore-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 34px;
    background: linear-gradient(135deg, #ff8a00 0%, #ff6a00 100%);
    color: #ffffff !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(255, 106, 0, 0.32);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    text-decoration: none;
}

.sata-loadmore-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 106, 0, 0.42);
    color: #ffffff !important;
}

.sata-loadmore-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 106, 0, 0.3);
}

.sata-loadmore-btn__icon {
    display: inline-flex;
    align-items: center;
    transition: transform 0.25s ease;
}

.sata-loadmore-btn:hover .sata-loadmore-btn__icon {
    transform: translateY(2px);
}

.sata-loadmore-btn__spinner {
    display: none;
    align-items: center;
}

.sata-loadmore-btn.is-loading {
    pointer-events: none;
    opacity: 0.85;
}

.sata-loadmore-btn.is-loading .sata-loadmore-btn__icon {
    display: none;
}

.sata-loadmore-btn.is-loading .sata-loadmore-btn__spinner {
    display: inline-flex;
}


/* ------------------------------------------------------------------ */
/* 6. Gallery listing cards ([gallery_cards])                         */
/* ------------------------------------------------------------------ */

.sata-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 26px;
}

.sata-gcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sata-gcard:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06), 0 18px 38px rgba(16, 24, 40, 0.12);
}

/* 2×2 photo mosaic */
.sata-gcard__mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    background: #eef0f5;
}

.sata-gcard__mosaic a {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #1d2c5e;
}

.sata-gcard__mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.sata-gcard__mosaic a:hover img {
    transform: scale(1.07);
}

/* "+N" overlay on the last visible tile */
.sata-gcard__more {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 26, 54, 0.62);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sata-gcard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    padding: 20px 22px 22px;
}

.sata-gcard__title {
    margin: 0;
    font-size: 18.5px;
    font-weight: 700;
    line-height: 1.35;
}

.sata-gcard__title a {
    color: #1d2c5e;
    text-decoration: none;
    transition: color 0.2s;
}

.sata-gcard__title a:hover {
    color: #ff8a00;
}

.sata-gcard__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 14px;
    color: #555;
}

.sata-gcard__meta span {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.sata-gcard__meta i {
    color: #ff8a00;
    font-size: 13px;
}

.sata-gcard__foot {
    margin-top: auto;
    padding-top: 12px;
}


/* ------------------------------------------------------------------ */
/* 7. Roles cards + Important Links                                   */
/* ------------------------------------------------------------------ */

.sata-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 26px;
}

.sata-rcard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.sata-rcard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff8a00, #2f4596);
    opacity: 0;
    transition: opacity 0.25s;
}

.sata-rcard:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06), 0 18px 38px rgba(16, 24, 40, 0.12);
}

.sata-rcard:hover::before {
    opacity: 1;
}

.sata-rcard__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sata-rcard__num {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #2f4596, #1d2c5e);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.sata-rcard__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1d2c5e;
    line-height: 1.35;
}

.sata-rcard__img {
    border-radius: 12px;
    overflow: hidden;
    background: #f2f4fa;
}

.sata-rcard__img img {
    width: 100%;
    height: auto;
    display: block;
}

.sata-rcard__content {
    font-size: 15px;
    line-height: 1.65;
    color: #555;
}

.sata-rcard__content p {
    margin: 0 0 10px;
}

.sata-rcard__content p:last-child {
    margin-bottom: 0;
}

/* Important Links — same cards, link variant */
.sata-rcard--link {
    text-decoration: none;
}

.sata-rcard--link .sata-rcard__content {
    color: #555;
}

.sata-rcard--link:hover .sata-rcard__title {
    color: #ff8a00;
}


/* ------------------------------------------------------------------ */
/* 8. Photo grid (event gallery section + gallery single)             */
/* ------------------------------------------------------------------ */

.sata-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.sata-photo-grid a {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #1d2c5e;
}

.sata-photo-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.sata-photo-grid a::after {
    content: "\f00e"; /* fa-magnifying-glass-plus */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    background: rgba(18, 26, 54, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.sata-photo-grid a:hover::after,
.sata-photo-grid a:focus-visible::after {
    opacity: 1;
}

.sata-photo-grid a:hover img {
    transform: scale(1.06);
}


/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
    .sata-event-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 28px;
    }
    .sata-event-card,
    .sata-gallery-single-card {
        padding: 28px;
    }
}

@media (max-width: 860px) {
    .sata-event-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .sata-hero {
        min-height: 260px;
    }
    .sata-hero__inner {
        padding: 90px 24px 32px;
    }
    /* On phones the sidebar follows the article — keep details near top */
    .sata-event-sidebar {
        position: static;
    }
}

@media (max-width: 560px) {
    .sata-event-wrap,
    .sata-gallery-single-wrap {
        padding: 0 16px 44px;
    }
    .sata-event-card,
    .sata-gallery-single-card {
        padding: 20px;
        border-radius: 12px;
    }
    .sata-hero__inner {
        padding: 80px 16px 26px;
    }
    .sata-hero__meta {
        gap: 8px;
    }
    .sata-chip {
        padding: 7px 13px;
        font-size: 13px;
    }
    .sata-events-grid,
    .sata-gallery-grid,
    .sata-roles-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .sata-photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }
    .sata-event-actions .sata-btn {
        flex: 1 1 100%;
    }
    .sata-pagination .page-numbers {
        min-width: 38px;
        height: 38px;
        margin: 0 2px;
    }
}

/* Sidebar reuse — the event sidebar uses the blog .sata-side-card styles;
 * make it sticky on desktop like the blog one. */
.sata-event-sidebar {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
    position: sticky;
    top: 24px;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    .sata-btn,
    .sata-ecard,
    .sata-gcard,
    .sata-rcard,
    .sata-mini-gcard img,
    .sata-ecard__media img,
    .sata-gcard__mosaic img,
    .sata-photo-grid img,
    .sata-sponsor-strip .sata-sponsor {
        transition: none;
    }
    .sata-ecard:hover,
    .sata-gcard:hover,
    .sata-rcard:hover,
    .sata-btn:hover,
    .sata-sponsor-strip .sata-sponsor:hover {
        transform: none;
    }
    .sata-ecard:hover .sata-ecard__media img,
    .sata-gcard__mosaic a:hover img,
    .sata-mini-gcard:hover img,
    .sata-photo-grid a:hover img {
        transform: none;
    }
}


/* =========================================================================
 * ROUND 4b — CARD POLISH (events / gallery / blog cards + inner pages)
 * Richer titles, pill action buttons, icon badges, meta chips.
 * ========================================================================= */

/* ---- 1. Card action button — soft pill that fills on hover ----
 * Shared by: events cards, gallery cards ("View Details" / "View Full
 * Gallery") and the blog listing "Read More". */
.sata-card-btn,
.sata-ecard__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 20px;
    border-radius: 999px;
    background: #f2f5ff;
    border: 1px solid #e2e8fa;
    color: #2f4596;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease;
}

.sata-card-btn i,
.sata-ecard__btn i {
    font-size: 12.5px;
    transition: transform 0.25s ease;
}

.sata-card-btn:hover,
.sata-card-btn:focus-visible,
.sata-ecard__btn:hover,
.sata-ecard__btn:focus-visible {
    background: linear-gradient(135deg, #ff8a00, #ff6a00);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 138, 0, 0.35);
}

.sata-card-btn:hover i,
.sata-ecard__btn:hover i {
    transform: translateX(4px);
}

/* Card footers get a subtle separator + breathing room */
.sata-ecard__foot,
.sata-gcard__foot {
    border-top: 1px dashed #e9ecf4;
    padding-top: 16px;
}

/* ---- 2. Card titles — heavier, navy, animated orange underline ---- */
.sata-ecard__title,
.sata-gcard__title {
    font-size: 20px;
    letter-spacing: -0.01em;
}

.sata-ecard__title a,
.sata-gcard__title a,
html body .blog-wrap.blogs-page .blogs-item .blog-name {
    color: #1d2c5e;
    background-image: linear-gradient(90deg, #ff8a00, #ff6a00);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease, color 0.2s ease;
}

.sata-ecard__title a:hover,
.sata-gcard__title a:hover,
html body .blog-wrap.blogs-page .blogs-item .blog-name:hover {
    color: #1d2c5e;
    background-size: 100% 2px;
}

/* Blog listing title — bump size/weight to match the CPT cards */
html body .blog-wrap.blogs-page .blogs-item .blog-name {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    padding-bottom: 3px; /* room for the underline */
}

/* ---- 3. Meta rows — icons in soft tinted badges ---- */
.sata-ecard__meta li,
.sata-gcard__meta span {
    align-items: center;
}

.sata-ecard__meta i,
.sata-gcard__meta i {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff4e6;
    border-radius: 8px;
    color: #ff8a00;
    font-size: 12px;
    flex-shrink: 0;
    transform: none;
}

.sata-ecard__meta {
    gap: 9px;
    font-size: 14.5px;
    color: #444;
}

.sata-gcard__meta {
    gap: 8px 16px;
    font-size: 14.5px;
    color: #444;
}

.sata-gcard__meta span {
    gap: 9px;
}

/* ---- 4. Blog listing footer — date pill left, Read More right ---- */
html body .blog-wrap.blogs-page .blogs-item .post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* Slightly richer green date pill (gradient + soft shadow) */
html body .blog-wrap.blogs-page .blogs-item .post-date,
html body .blog-wrap.home-blogs .blogs-item .post-date {
    background: linear-gradient(135deg, #1aa435, #148e29) !important;
    box-shadow: 0 3px 10px rgba(20, 142, 41, 0.28) !important;
}

/* Blog card corners/shadow aligned with the CPT cards */
html body .blog-wrap.blogs-page .blogs-item {
    border-radius: 14px;
    border-color: #eef0f5;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.05);
}

html body .blog-wrap.blogs-page .blogs-item:hover {
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06), 0 18px 38px rgba(16, 24, 40, 0.12);
}

html body .blog-wrap.blogs-page .blogs-item .content {
    padding: 20px 22px 18px;
}

/* ---- 5. Gallery mosaic — smart spans for 1 or 3 photos ---- */
.sata-gcard__mosaic a:first-child:last-child {
    grid-column: span 2; /* single photo fills the row */
}

.sata-gcard__mosaic a:nth-child(3):last-child {
    grid-column: span 2; /* 3 photos: last one spans full width */
}

/* ---- 6. Inner pages — single.php meta as chips ---- */
.sata-single-meta__row {
    gap: 10px;
}

.sata-single-meta__date,
.sata-single-meta__author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 999px;
    background: #f6f8fd;
    border: 1px solid #e9edf7;
    font-size: 13.5px;
    font-weight: 500;
    color: #40486a;
}

.sata-single-meta__row i {
    margin-right: 0;
    color: #ff8a00;
}

/* ---- 7. Inner pages — sidebar card title accent bar ---- */
html body .sata-side-card__title {
    position: relative;
    border-bottom: 1px solid #eef0f5;
}

html body .sata-side-card__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ff8a00, #ff6a00);
}

/* ---- 8. Inner pages — event fact icons get a gradient tint ---- */
.sata-fact-list .sata-fact__icon {
    background: linear-gradient(135deg, #f2f5ff, #e8edfc);
    box-shadow: inset 0 0 0 1px #e2e8fa;
}

/* Reduced motion: no arrow slide / underline grow */
@media (prefers-reduced-motion: reduce) {
    .sata-card-btn,
    .sata-ecard__btn,
    .sata-card-btn i,
    .sata-ecard__btn i,
    .sata-ecard__title a,
    .sata-gcard__title a {
        transition: none;
    }
    .sata-card-btn:hover i,
    .sata-ecard__btn:hover i {
        transform: none;
    }
}


/* ---- 9. Inner pages — prev/next post navigation (single.php) ---- */
.sata-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}

.sata-post-nav__item {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.04);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sata-post-nav__item:hover {
    transform: translateY(-3px);
    border-color: #ffd9ad;
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.1);
}

.sata-post-nav__item--next {
    text-align: right;
    align-items: flex-end;
}

/* Only one link (first or last post): let it take a single column */
.sata-post-nav__item:only-child {
    grid-column: 1 / -1;
}

.sata-post-nav__dir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ff8a00;
}

.sata-post-nav__dir i {
    font-size: 12px;
}

.sata-post-nav__title {
    font-size: 15px;
    font-weight: 600;
    color: #1d2c5e;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .sata-post-nav {
        grid-template-columns: 1fr;
    }
    .sata-post-nav__item--next {
        text-align: left;
        align-items: flex-start;
    }
}


/* =========================================================================
 * ROUND 4c — CONTACT FORM (Contact Form 7 — .contactus-form)
 * Live markup: .form-submit.contactus-form > .input-field (name/email/
 * number/subject/text-area) + .submit. Labels are hidden by the theme
 * (placeholder-only design) — kept that way; added inline field icons.
 * High-specificity + !important used only where style.css forces values.
 * ========================================================================= */

/* ---- Card shell + 2-column field grid ---- */
html body .form-submit.contactus-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
    max-width: 780px;
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 20px;
    padding: 34px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 34px rgba(16, 24, 40, 0.07);
}

/* Textarea + submit span the full width */
html body .form-submit.contactus-form .text-area,
html body .form-submit.contactus-form .submit {
    grid-column: 1 / -1;
}

/* Field wrapper — anchor for the icon */
html body .form-submit.contactus-form .input-field {
    position: relative;
    width: 100%;
    margin: 0;
}

html body .form-submit.contactus-form .input-field > p {
    margin: 0;
}

/* The theme leaves a stray <br> after the hidden label — remove the gap */
html body .form-submit.contactus-form .input-field br {
    display: none;
}

html body .form-submit.contactus-form .wpcf7-form-control-wrap {
    display: block;
}

/* ---- Inputs ---- */
html body .form-submit.contactus-form .input-field input,
html body .form-submit.contactus-form .input-field textarea {
    width: 100%;
    background: #f6f8fd;
    border: 1.5px solid #e6e9f2;
    border-radius: 12px;
    padding: 15px 18px 15px 48px;
    font-size: 15px;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    color: #1d2c5e !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

html body .form-submit.contactus-form .input-field textarea {
    height: auto !important;
    min-height: 140px;
    resize: vertical;
    padding-top: 15px;
}

html body .form-submit.contactus-form .input-field ::placeholder,
html body .form-submit.contactus-form .input-field input::placeholder,
html body .form-submit.contactus-form .input-field textarea::placeholder {
    color: #97a0bd;
    opacity: 1;
}

/* ---- Focus state — orange border + soft glow ring ---- */
html body .form-submit.contactus-form .input-field input:focus,
html body .form-submit.contactus-form .input-field textarea:focus {
    background: #fff;
    border-color: #ff8a00 !important;
    box-shadow: 0 0 0 4px rgba(255, 138, 0, 0.14);
    outline: none;
}

/* ---- Inline field icons (Font Awesome) ---- */
html body .form-submit.contactus-form .input-field::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff8a00;
    font-size: 15px;
    z-index: 3;
    pointer-events: none;
    transition: color 0.2s ease;
}

html body .form-submit.contactus-form .name-field::before    { content: "\f007"; } /* user */
html body .form-submit.contactus-form .email-field::before   { content: "\f0e0"; } /* envelope */
html body .form-submit.contactus-form .number-field::before  { content: "\f095"; } /* phone */
html body .form-submit.contactus-form .subject-field::before { content: "\f02b"; } /* tag */
html body .form-submit.contactus-form .text-area::before {
    content: "\f4ad"; /* comment-dots */
    top: 22px;
    transform: none;
}

/* Icon brightens while its field is focused */
html body .form-submit.contactus-form .input-field:focus-within::before {
    color: #ff6a00;
}

/* ---- Invalid state ---- */
html body .form-submit.contactus-form .input-field input.wpcf7-not-valid,
html body .form-submit.contactus-form .input-field textarea.wpcf7-not-valid {
    border-color: #eb4d4d !important;
    background: #fff6f6;
}

html body .form-submit.contactus-form .wpcf7-not-valid-tip {
    position: static;
    text-align: left;
    margin-top: 6px;
    font-size: 12px;
}

/* ---- Submit button — full pill, gradient, hover lift ---- */
html body .form-submit.contactus-form .submit {
    margin-top: 6px;
}

html body .form-submit.contactus-form .submit p {
    margin: 0;
}

html body .form-submit.contactus-form .wpcf7-submit,
html body .form-submit.contactus-form .submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 15px 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff8a00, #ff6a00);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 22px rgba(255, 138, 0, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

html body .form-submit.contactus-form .wpcf7-submit:hover,
html body .form-submit.contactus-form .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 138, 0, 0.45);
    filter: brightness(1.03);
    color: #fff;
}

html body .form-submit.contactus-form .wpcf7-submit:active,
html body .form-submit.contactus-form .submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(255, 138, 0, 0.35);
}

html body .form-submit.contactus-form .wpcf7-submit:focus-visible,
html body .form-submit.contactus-form .submit-btn:focus-visible {
    outline: 3px solid rgba(255, 138, 0, 0.45);
    outline-offset: 3px;
}

/* CF7 AJAX spinner alignment */
html body .form-submit.contactus-form .wpcf7-spinner {
    margin: 0 0 0 12px;
}

/* ---- Response / validation banner ---- */
html body .wpcf7-form .wpcf7-response-output {
    width: auto !important;
    margin: 20px 0 0 !important;
    padding: 13px 18px !important;
    border-radius: 10px !important;
    border-width: 1px !important;
    font-size: 14px !important;
    font-family: 'Poppins', sans-serif !important;
    line-height: 1.5;
}

html body .wpcf7-form.invalid .wpcf7-response-output,
html body .wpcf7-form.unaccepted .wpcf7-response-output,
html body .wpcf7-form.payment-required .wpcf7-response-output {
    border-color: #eb4d4d !important;
    background: #fff6f6;
    color: #a12626;
}

html body .wpcf7-form.sent .wpcf7-response-output {
    border-color: #148e29 !important;
    background: #f2fbf4;
    color: #14722a;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    html body .form-submit.contactus-form {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 22px;
        border-radius: 16px;
    }
    html body .form-submit.contactus-form .wpcf7-submit,
    html body .form-submit.contactus-form .submit-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .form-submit.contactus-form .wpcf7-submit,
    html body .form-submit.contactus-form .submit-btn {
        transition: none;
    }
    html body .form-submit.contactus-form .wpcf7-submit:hover,
    html body .form-submit.contactus-form .submit-btn:hover {
        transform: none;
    }
}


/* =========================================================================
 * ROUND 4e — NEWS & BLOGS ARCHIVE: MOBILE FIXES
 *
 * Two stale rules broke the archive on phones:
 *   1. `.blog-page { padding: 24px 0 }` (style.css) -> zero horizontal
 *      padding, so cards sat flush against the screen edges.
 *   2. `.sidebar-wrap .widget_block ul { display:flex; gap:60px }`
 *      (responsive.css, <=767px) -> turned the Categories AND Recent Posts
 *      lists into horizontal rows, overflowing sideways with long Telugu
 *      titles.
 *
 * The old sidebar rules (`.blog-wrap.blogs-page .sidebar-wrap`) no longer
 * match — index.php now renders <aside class="sidebar-wrap"> as a SIBLING of
 * the posts grid, not a descendant — so the sidebar was left unstyled.
 * Styled here as a proper card, matching the single-post sidebar.
 * ========================================================================= */

/* ---- 1. Horizontal breathing room for the archive ---- */
html body .archive-container.blog-page {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 1250px;
}

/* Nothing inside may push the page sideways */
html body .archive-container.blog-page,
html body .blog-wrap.blogs-page,
html body .blog-wrap.blogs-page .posts-wrapper {
    max-width: 100%;
}

html body .blog-wrap.blogs-page .posts-wrapper > article {
    min-width: 0;
}

/* ---- 2. Archive sidebar — real card, vertical lists ---- */
html body .archive-container .sidebar-wrap {
    display: block;
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
    background: none;
    box-shadow: none;
}

html body .archive-container .sidebar-wrap .custom-cate-widget,
html body .archive-container .sidebar-wrap .custom-recent-widget,
html body .archive-container .sidebar-wrap .custom-searchbar,
html body .archive-container .sidebar-wrap .custom-archive {
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 14px;
    padding: 24px 26px;
    margin: 0 0 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.05);
}

/* Widget headings — colour only, no underline (client request).
 * The grey border-bottom and the orange ::after accent bar are both removed;
 * the orange heading colour alone now sets the sidebar titles apart. */
html body .archive-container .sidebar-wrap .widget h2,
html body .archive-container .sidebar-wrap .widget .wp-block-heading {
    position: relative;
    margin: 0 0 12px;
    padding-bottom: 4px;
    border-bottom: 0;
    font-size: 18px;
    font-weight: 700;
    color: #ff6a00;
}

/* Kill any leftover accent bar from earlier rounds / cached CSS. */
html body .archive-container .sidebar-wrap .widget h2::after,
html body .archive-container .sidebar-wrap .widget .wp-block-heading::after {
    content: none !important;
}

/* Second heading in the same card (e.g. "Recent Posts") needs top spacing */
html body .archive-container .sidebar-wrap .widget + .widget h2,
html body .archive-container .sidebar-wrap .widget + .widget .wp-block-heading {
    margin-top: 26px;
}

/* THE FIX: force widget lists back to a normal vertical list.
 * responsive.css sets display:flex + gap:60px on these below 1200px. */
html body .sidebar-wrap .widget_block ul,
html body .sidebar-wrap .wp-block-categories,
html body .sidebar-wrap .wp-block-latest-posts,
html body .archive-container .sidebar-wrap ul {
    display: block !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

html body .archive-container .sidebar-wrap ul li {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #f0f2f7;
    list-style: none;
}

html body .archive-container .sidebar-wrap ul li:last-child {
    border-bottom: 0;
}

html body .archive-container .sidebar-wrap ul li a {
    display: block;
    padding: 11px 0 11px 18px;
    position: relative;
    color: #333;
    text-decoration: none;
    font-size: 14.5px;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
    transition: color 0.2s;
}

/* NOTE: the arrow bullet is drawn ONCE, as an SVG background-image on the <a>
 * (see the Round 7 rule further down). The old Font Awesome ::before chevron
 * that used to live here has been removed — it was rendering a SECOND arrow
 * next to the SVG one. Do not re-add a ::before chevron here. */

html body .archive-container .sidebar-wrap ul li a:hover {
    color: #2f4596;
}

/* ---- 3. Banner on phones ---- */
@media (max-width: 767px) {
    /* responsive.css pins a fixed height:300px — let it grow with the text */
    html body .blogs-banner {
        height: auto !important;
        min-height: 240px;
        padding: 40px 0;
        background-position: center center;
    }
    html body .blogs-banner .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    html body .blogs-banner .page-heading {
        font-size: 26px;
        line-height: 1.25;
    }
    html body .blogs-banner .bread {
        font-size: 13px;
    }
}

/* ---- 4. Cards on phones ---- */
@media (max-width: 767px) {
    html body .archive-container.blog-page {
        padding-left: 14px;
        padding-right: 14px;
    }
    html body .blog-wrap.blogs-page .posts-wrapper {
        gap: 20px !important;
    }
    html body .archive-container .sidebar-wrap .custom-cate-widget,
    html body .archive-container .sidebar-wrap .custom-recent-widget,
    html body .archive-container .sidebar-wrap .custom-searchbar,
    html body .archive-container .sidebar-wrap .custom-archive {
        padding: 20px;
    }
    /* Date pill + Read More stack cleanly if they can't sit side by side */
    html body .blog-wrap.blogs-page .blogs-item .post-footer {
        gap: 12px;
    }
    /* Pagination wraps instead of overflowing */
    html body .blog ul.page-numbers,
    html body .sata-pagination {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}


/* =========================================================================
 * ROUND 4f — BLOGS ARCHIVE: recent posts, pagination, banner (client review)
 * ========================================================================= */

/* ---- 1. Recent Posts / Categories widgets — force a real vertical list ----
 * The widget markup is:
 *   div#block-8.widget.widget_block.widget_recent_entries
 *     > ul.wp-block-latest-posts__list.wp-block-latest-posts > li > a
 * responsive.css turns these into `display:flex; gap:60px` below 1200px,
 * which laid each post title out as its own narrow column (one character per
 * line) and pushed the page sideways. Pinned back to a block list. */
html body .sidebar-wrap ul.wp-block-latest-posts,
html body .sidebar-wrap ul.wp-block-latest-posts__list,
html body .sidebar-wrap ul.wp-block-categories,
html body .sidebar-wrap ul.wp-block-categories-list,
html body .sidebar-wrap .widget_block ul,
html body .sidebar-wrap .widget_recent_entries ul,
html body .sidebar-wrap .wp-block-group ul,
html body .sidebar-wrap .wp-block-group__inner-container ul {
    display: block !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    column-count: 1 !important;
    column-gap: 0 !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

html body .sidebar-wrap .widget_block ul > li,
html body .sidebar-wrap .widget_recent_entries ul > li {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Recent-post links wrap normally instead of one-char-per-line */
html body .sidebar-wrap .wp-block-latest-posts__post-title {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
}


/* ---- 2. Archive pagination (Neve's <ul class="page-numbers">) ----
 * Markup: ul.page-numbers > li > span.page-numbers.current | a.page-numbers
 * Was rendering as a dark purple square + bare text links. */
html body .blog ul.page-numbers,
html body .archive-container ul.page-numbers,
html body .blog-page ul.page-numbers {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin: 36px 0 16px;
    padding: 0;
    border: 0;
    list-style: none;
}

html body .blog ul.page-numbers > li,
html body .archive-container ul.page-numbers > li,
html body .blog-page ul.page-numbers > li {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}

html body .archive-container ul.page-numbers .page-numbers,
html body .blog-page ul.page-numbers .page-numbers,
html body .blog ul.page-numbers .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e4e8f2;
    color: #1d2c5e;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

html body .archive-container ul.page-numbers a.page-numbers:hover,
html body .blog-page ul.page-numbers a.page-numbers:hover,
html body .blog ul.page-numbers a.page-numbers:hover {
    border-color: #ff8a00;
    color: #ff8a00;
    box-shadow: 0 4px 12px rgba(255, 138, 0, 0.18);
}

/* Active page — orange gradient pill */
html body .archive-container ul.page-numbers .page-numbers.current,
html body .blog-page ul.page-numbers .page-numbers.current,
html body .blog ul.page-numbers .page-numbers.current {
    background: linear-gradient(135deg, #ff8a00, #ff6a00) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(255, 138, 0, 0.35);
}

/* Prev / Next — wider, navy text */
html body .archive-container ul.page-numbers .next,
html body .archive-container ul.page-numbers .prev,
html body .blog-page ul.page-numbers .next,
html body .blog-page ul.page-numbers .prev,
html body .blog ul.page-numbers .next,
html body .blog ul.page-numbers .prev {
    padding: 0 20px;
    font-weight: 600;
    color: #2f4596;
}


/* ---- 3. Keep the archive centred (no sideways drift) ---- */
html body .archive-container.blog-page {
    margin-left: auto;
    margin-right: auto;
}

html body .blog-wrap.blogs-page .posts-wrapper {
    width: 100% !important;
    justify-content: stretch;
}


/* ---- 4. Banner on phones — text still anchored bottom ---- */
@media (max-width: 767px) {
    html body .blogs-banner {
        height: auto !important;
        min-height: 260px;
        padding: 70px 0 0 !important;
        align-items: flex-end;
        background-position: center 25%;
    }
    html body .blogs-banner .content {
        padding-bottom: 24px;
    }
    html body .archive-container ul.page-numbers .page-numbers,
    html body .blog-page ul.page-numbers .page-numbers,
    html body .blog ul.page-numbers .page-numbers {
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        font-size: 14px;
    }
}


/* =========================================================================
 * ROUND 4g — SINGLE POST: banner removed
 * Client: "for single posts do not add the banner — instead add the
 * breadcrumb and title simply without BG."
 * The gradient .sata-page-banner is replaced by a plain header that sits on
 * the page background. (.sata-page-banner styles are left in layout-fixes.css
 * but no longer used by single.php.)
 * ========================================================================= */

.sata-post-header {
    width: 100%;
    background: none;
    padding: 34px 0 0;
}

.sata-post-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Breadcrumb — dark text on the page background */
.sata-post-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-size: 14px;
    color: #7a8298;
}

.sata-post-crumb a {
    color: #2f4596;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.sata-post-crumb a:hover {
    color: #ff8a00;
}

.sata-post-crumb i {
    font-size: 11px;
    color: #b9c0d1;
}

.sata-post-crumb .current {
    color: #7a8298;
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Title — dark navy, no background */
.sata-post-header__title {
    margin: 0;
    font-size: clamp(25px, 3.4vw, 38px);
    font-weight: 800;
    line-height: 1.25;
    color: #1d2c5e;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* The content wrapper below no longer needs the banner's bottom margin */
.sata-post-header + .sata-single-wrap {
    padding-top: 26px;
}

@media (max-width: 767px) {
    .sata-post-header {
        padding-top: 22px;
    }
    .sata-post-header__inner {
        padding: 0 16px;
    }
    .sata-post-crumb {
        font-size: 13px;
        gap: 7px;
    }
    .sata-post-crumb .current {
        max-width: 22ch;
    }
    .sata-post-header + .sata-single-wrap {
        padding-top: 18px;
    }
}


/* =========================================================================
 * ROUND 5 — MOBILE NAVIGATION (Elementor HFE nav widget)
 *
 * Markup (unchanged — this is the stock WordPress menu rendered by HFE):
 *   nav.hfe-dropdown
 *     ul.hfe-nav-menu
 *       li.menu-item > a.hfe-menu-item
 *       li.hfe-has-submenu > div.hfe-has-submenu-container
 *                              > a.hfe-menu-item > span.hfe-menu-toggle
 *                          > ul.sub-menu > li > a.hfe-sub-menu-item
 *
 * STYLING ONLY — no JavaScript. HFE opens and closes both the panel and the
 * submenus itself; we never override the properties it animates
 * (left / display / visibility / opacity / height), so its native behaviour is
 * left completely intact.
 *
 * The one thing we DO override is HFE's submenu geometry: on mobile it still
 * emits its desktop fly-out coordinates (right:100%, transform:translateX(450px)),
 * which pushes the submenu clean outside the panel — so an "open" submenu was
 * simply off-screen. See the submenu block below.
 * ========================================================================= */

@media (max-width: 1024px) {

    /* ---- The sliding panel ---- */
    header#masthead nav.hfe-dropdown {
        background: #fff !important;
        border-radius: 0 22px 22px 0;
        box-shadow: 0 20px 60px rgba(16, 24, 40, 0.3);
        padding: 6px 0 20px;
    }

    header#masthead nav.hfe-dropdown > ul.hfe-nav-menu {
        padding: 60px 12px 16px !important;
        margin: 0 !important;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* ---- Top-level items ---- */
    header#masthead nav.hfe-dropdown ul.hfe-nav-menu > li.menu-item {
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #f2f4f9 !important;
    }

    header#masthead nav.hfe-dropdown ul.hfe-nav-menu > li.menu-item:last-child {
        border-bottom: 0 !important;
    }

    header#masthead nav.hfe-dropdown ul.hfe-nav-menu > li > a.hfe-menu-item,
    header#masthead nav.hfe-dropdown ul.hfe-nav-menu > li > .hfe-has-submenu-container > a.hfe-menu-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px;
        padding: 15px 16px !important;
        margin: 3px 0 !important;
        border-radius: 12px;
        background: transparent !important;
        color: #1d2c5e !important;
        font-family: 'Montserrat', sans-serif;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.35;
        text-align: left;
        transition: background 0.2s ease, color 0.2s ease;
    }

    header#masthead nav.hfe-dropdown ul.hfe-nav-menu > li > a.hfe-menu-item:hover,
    header#masthead nav.hfe-dropdown ul.hfe-nav-menu > li > .hfe-has-submenu-container:hover > a.hfe-menu-item {
        background: #fff4e6 !important;
        color: #ff6a00 !important;
    }

    /* Current page — orange pill instead of the old flat yellow block */
    header#masthead nav.hfe-dropdown ul.hfe-nav-menu > li.current-menu-item > a.hfe-menu-item,
    header#masthead nav.hfe-dropdown ul.hfe-nav-menu > li.current_page_item > a.hfe-menu-item,
    header#masthead nav.hfe-dropdown ul.hfe-nav-menu > li.current_page_parent > a.hfe-menu-item,
    header#masthead nav.hfe-dropdown ul.hfe-nav-menu > li.current-menu-parent > .hfe-has-submenu-container > a.hfe-menu-item,
    header#masthead nav.hfe-dropdown ul.hfe-nav-menu > li.current-menu-ancestor > .hfe-has-submenu-container > a.hfe-menu-item {
        background: linear-gradient(135deg, #ff8a00, #ff6a00) !important;
        color: #fff !important;
        box-shadow: 0 6px 16px rgba(255, 138, 0, 0.3);
    }

    /* ---- Dropdown chevron chip ---- */
    header#masthead nav.hfe-dropdown .hfe-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 9px;
        background: #f2f5ff;
        color: #2f4596;
        font-size: 13px;
        transition: transform 0.3s ease, background 0.2s ease, color 0.2s ease;
    }

    header#masthead nav.hfe-dropdown .hfe-menu-toggle i {
        color: inherit;
        font-size: 13px;
        line-height: 1;
    }

    /* Chevron flips while its branch is open.
     * Driven off HFE's own aria-expanded / open class — no custom JS. */
    header#masthead nav.hfe-dropdown .hfe-has-submenu-container[aria-expanded="true"] .hfe-menu-toggle,
    header#masthead nav.hfe-dropdown li.hfe-has-submenu.menu-is-active > .hfe-has-submenu-container .hfe-menu-toggle {
        transform: rotate(180deg);
    }

    /* On an orange (current) row the chip has to read against orange */
    header#masthead nav.hfe-dropdown li.current-menu-parent > .hfe-has-submenu-container .hfe-menu-toggle,
    header#masthead nav.hfe-dropdown li.current-menu-ancestor > .hfe-has-submenu-container .hfe-menu-toggle {
        background: rgba(255, 255, 255, 0.28);
        color: #fff;
    }

    /* ---- Submenu ----
     *
     * IMPORTANT: this block must NOT touch display / visibility / opacity /
     * height / max-height. HFE opens and closes the submenu itself by writing
     * those exact properties inline, and overriding them takes the menu away
     * from HFE without reliably giving control to anything else — which is what
     * left the dropdowns unable to open.
     *
     * What we DO fix is HFE's positioning: on mobile it still emits its desktop
     * fly-out geometry —
     *     position: relative; right: 100%; transform: translateX(450.4px);
     * — which shoves the submenu ~450px to the right, i.e. completely outside
     * a 430px-wide panel. So even when HFE "opened" it, it was off-screen.
     * Neutralising the geometry lets it render in-flow inside the panel, and
     * HFE's own show/hide keeps working untouched. */
    header#masthead nav.hfe-dropdown ul.hfe-nav-menu ul.sub-menu {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: 0 !important;
        border-left: 3px solid #ffd7a8 !important;
        border-radius: 0 10px 10px 0;
        background: #f8fafd !important;
        margin: 0 0 6px 14px !important;
        padding: 0 !important;
        overflow: hidden;
    }

    header#masthead nav.hfe-dropdown ul.sub-menu li.menu-item {
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    header#masthead nav.hfe-dropdown ul.sub-menu li.menu-item a.hfe-sub-menu-item {
        display: block !important;
        padding: 12px 14px !important;
        margin: 2px 6px !important;
        border: 0 !important;
        border-radius: 8px;
        background: transparent !important;
        color: #485070 !important;
        font-family: 'Montserrat', sans-serif;
        font-size: 15px !important;
        font-weight: 500 !important;
        text-align: left !important;
        transition: background 0.2s ease, color 0.2s ease;
    }

    header#masthead nav.hfe-dropdown ul.sub-menu li.menu-item a.hfe-sub-menu-item:hover {
        background: #fff4e6 !important;
        color: #ff6a00 !important;
    }

    header#masthead nav.hfe-dropdown ul.sub-menu li.current-menu-item > a.hfe-sub-menu-item,
    header#masthead nav.hfe-dropdown ul.sub-menu li.current_page_item > a.hfe-sub-menu-item {
        background: #fff0dd !important;
        color: #ff6a00 !important;
        font-weight: 600 !important;
    }

    /* Stop the page behind the panel scrolling while it is open */
    html.no-scroll,
    body.no-scroll {
        overflow: hidden;
    }
}


/* =========================================================================
 * ROUND 7 — Blogs archive sidebar column, content images, thumb lightbox
 * ========================================================================= */

/* ---- 1. Wider shell (1300px) ---- */
html body .archive-container.blog-page,
html body .sata-single-wrap,
html body .sata-post-header__inner {
    max-width: 1300px !important;
}


/* ---- 2. Sidebar list arrows — drawn as SVG, not a font glyph ----
 * They were rendering broken because the chevron came from a Font Awesome
 * pseudo-element (content: "\f105"), which depends on the FA webfont being
 * loaded and on the right weight (900) resolving. An inline SVG has no font
 * dependency at all, so it can never fall back to tofu — and it aligns to the
 * first line of text properly on wrapped Telugu titles. */
html body .archive-container .sidebar-wrap ul li a::before {
    content: none !important;
}

/* Kill the SECOND (faint grey) chevron — a legacy blog.css rule puts a
 * FontAwesome "\f054" on the LIST ITEM itself:
 *   .sidebar-wrap .widget_block ul li::before { content: "\f054"; ... }
 * Our own arrow lives on the <a> (SVG background) below, so the li::before
 * one is a duplicate. Remove it here. */
html body .archive-container .sidebar-wrap ul li::before,
html body .archive-container .sidebar-wrap .widget_block ul li::before,
html body .archive-container .sidebar-wrap .wp-block-categories li::before,
html body .archive-container .sidebar-wrap .wp-block-latest-posts li::before {
    content: none !important;
    display: none !important;
}

html body .archive-container .sidebar-wrap ul li a {
    padding-left: 22px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1L6.5 6L1.5 11' fill='none' stroke='%23ff8a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 2px 15px;
    background-size: 7px 10px;
}

/* Same treatment for the single-post sidebar lists (they use <i> icons —
 * keep those, just make sure they sit on the first line, not floating). */
html body .sata-side-list li a i {
    margin-top: 3px;
}


/* ---- 3. DESKTOP: blogs archive gets its sidebar column (like single-blog) ----
 * index.php renders <aside class="sidebar-wrap"> as a sibling of the posts
 * grid, so it was stacking underneath. Turn the section into the same
 * 2-column grid single.php uses. */
@media (min-width: 1025px) {
    html body .archive-container section.blog-page {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 36px;
        align-items: start;
    }

    /* Anything that isn't the posts grid or the sidebar (e.g. the search-bar
     * widget area) spans the full width rather than landing in a column. */
    html body .archive-container section.blog-page > *:not(.blog-wrap):not(.sidebar-wrap) {
        grid-column: 1 / -1;
    }

    html body .archive-container section.blog-page > .blog-wrap.blogs-page {
        grid-column: 1;
        min-width: 0;
    }

    html body .archive-container section.blog-page > .sidebar-wrap {
        grid-column: 2;
        min-width: 0;
        margin-top: 0 !important;
        position: sticky;
        top: 24px;
    }

    /* Cards now share the row with a 320px sidebar — let them go a bit
     * narrower so two still fit comfortably. */
    html body .blog-wrap.blogs-page .posts-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }
}


/* ---- 4. Single post: hide Categories + Recent Posts on mobile ----
 * (Requested — they push the article a long way down on a phone.) */
@media (max-width: 860px) {
    html body .sata-single-sidebar .sata-side-card--cats,
    html body .sata-single-sidebar .sata-side-card--recent {
        display: none !important;
    }

    /* If nothing else is in the sidebar, drop the empty gap it leaves. */
    html body .sata-single-sidebar:empty {
        display: none;
    }
}


/* ---- 5. Content images — cap the height, centre them ----
 * Tall portrait images were rendering full-height and dominating the article. */
html body .sata-single-content img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 600px;
    object-fit: contain;
    margin: 20px auto;
    border-radius: 10px;
}

/* WordPress wraps images in <figure> — centre those too, and their captions */
html body .sata-single-content figure {
    margin: 22px auto;
    text-align: center;
    max-width: 100%;
}

html body .sata-single-content figure img {
    margin: 0 auto;
}

html body .sata-single-content figcaption {
    margin-top: 8px;
    font-size: 13.5px;
    color: #7a8298;
    text-align: center;
}

/* A bare <img> inside a <p> (classic editor) — centre the paragraph */
html body .sata-single-content p > img:only-child {
    margin: 20px auto;
}


/* ---- 6. Featured image — click to open full size (Fancybox) ---- */
html body .sata-single-thumb {
    margin: 0 0 24px;
    border-radius: 12px;
    overflow: hidden;
    background: #f2f4fa;
}

html body .sata-single-thumb a {
    position: relative;
    display: block;
    cursor: zoom-in;
}

html body .sata-single-thumb img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

html body .sata-single-thumb a:hover img {
    transform: scale(1.03);
}

/* Magnifier hint on hover — same language as the gallery photo grid */
html body .sata-single-thumb a::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: rgba(18, 26, 54, 0.55);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

html body .sata-single-thumb a:hover::after,
html body .sata-single-thumb a:focus-visible::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    html body .sata-single-thumb img,
    html body .sata-single-thumb a:hover img {
        transition: none;
        transform: none;
    }
}


/* =========================================================================
 * ROUND 12 — IMPACT / STATS SECTION  ([sata_stats] + [sata_stat])
 *
 * Fixes from client review of v2:
 *   1. Cards were sizing to 4-per-row, stranding a lone 5th card. The card
 *      flex-basis now guarantees a MAXIMUM of 3 per row, so 6 cards read as
 *      two clean rows of three (and any odd count still centres).
 *   2. The big outlined "ghost" numeral is hidden on desktop — it was
 *      colliding with the description text. Kept on mobile, where the card is
 *      full width and it sits clear of the copy.
 *   3. Section heading rebuilt: eyebrow + solid title + rule (the gradient
 *      text washed out and read poorly).
 *
 * Colours arrive as custom properties from the shortcode, so the section is
 * re-themed from a shortcode attribute, never a CSS edit.
 * ========================================================================= */

.sata-stats {
    --sata-stat-accent: #148e29;   /* overridden inline by the shortcode */
    --sata-stat-accent-2: #0b5c1b;

    position: relative;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 16px 16px 28px;
}


/* ---------------- Section heading ---------------- */

.sata-stats__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 46px;
    text-align: center;
}

/* Small label above the title — sets context before the shout */
.sata-stats__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(20, 142, 41, 0.10);
    border: 1px solid rgba(20, 142, 41, 0.20);
    color: var(--sata-stat-accent-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
}

/* Solid colour, NOT gradient-filled text: the gradient washed out against the
 * cream page and the heading lost its weight. */
.sata-stats__title {
    margin: 0;
    font-size: clamp(26px, 3.6vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--sata-stat-accent-2);
    text-wrap: balance;
    max-width: 20ch;
}

/* Short weighted rule — a taper, rather than a plain dash */
.sata-stats__rule {
    display: block;
    width: 84px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--sata-stat-accent) 25%,
        var(--sata-stat-accent-2) 50%,
        var(--sata-stat-accent) 75%,
        transparent 100%);
}

.sata-stats__subtitle {
    margin: 0;
    max-width: 56ch;
    font-size: 16px;
    line-height: 1.65;
    color: #5d6b62;
}


/* ---------------- Grid ----------------
 * Flex (not CSS grid) so an odd final row stays CENTRED.
 * The 300px basis is what caps the row at three cards: at the 1160px section
 * width a fourth card cannot fit, so 6 cards land as a tidy 3 + 3. */
.sata-stats__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}


/* ---------------- Card ---------------- */

.sata-stat {
    position: relative;
    flex: 1 1 300px;
    max-width: 344px;
    min-width: 0;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 38px 26px 32px;

    background:
        radial-gradient(120% 90% at 50% -20%, rgba(20, 142, 41, 0.09) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fbfefb 100%);
    border: 1px solid rgba(11, 92, 27, 0.14);
    border-radius: 22px;
    box-shadow:
        0 1px 2px rgba(11, 92, 27, 0.05),
        0 10px 30px rgba(11, 92, 27, 0.08);

    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;

    animation: sata-stat-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Gradient hairline sweeping the top edge on hover */
.sata-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--sata-stat-accent-2), var(--sata-stat-accent));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}

.sata-stat:hover {
    transform: translateY(-8px);
    border-color: rgba(20, 142, 41, 0.35);
    box-shadow:
        0 4px 10px rgba(11, 92, 27, 0.07),
        0 24px 50px rgba(11, 92, 27, 0.20);
}

.sata-stat:hover::before {
    transform: scaleX(1);
}


/* ---- Ghost numeral — MOBILE ONLY ----
 * On desktop it ran straight through the description text. It is hidden by
 * default and only switched on in the mobile media query below, where the card
 * is full width and the numeral sits clear of the copy. */
.sata-stat__ghost {
    display: none;
}


/* ---- Floating icon badge ---- */
.sata-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    flex-shrink: 0;

    border-radius: 20px;
    background: linear-gradient(140deg, var(--sata-stat-accent) 0%, var(--sata-stat-accent-2) 100%);
    color: #fff;
    font-size: 23px;

    box-shadow:
        0 10px 22px rgba(20, 142, 41, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);

    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.sata-stat:hover .sata-stat__icon {
    transform: translateY(-3px) rotate(-6deg) scale(1.06);
    box-shadow:
        0 16px 30px rgba(20, 142, 41, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}


/* ---- The figure ---- */
.sata-stat__value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    margin: 0 0 12px;

    font-size: clamp(38px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--sata-stat-accent-2);
}

.sata-stat__affix {
    font-size: 0.5em;
    font-weight: 700;
    color: var(--sata-stat-accent);
}


/* ---- Label ---- */
.sata-stat__label {
    position: relative;
    margin: 0 0 14px;
    padding-bottom: 12px;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1c2b20;
}

.sata-stat__label::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--sata-stat-accent);
    opacity: 0.55;
    transition: width 0.35s ease, opacity 0.35s ease;
}

.sata-stat:hover .sata-stat__label::after {
    width: 46px;
    opacity: 1;
}


/* ---- Supporting line ---- */
.sata-stat__text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #5d6b62;
    max-width: 30ch;
}


/* ---------------- Entrance animation ---------------- */

@keyframes sata-stat-in {
    from { opacity: 0; transform: translateY(26px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sata-stats__grid > .sata-stat:nth-child(1) { animation-delay: 0.00s; }
.sata-stats__grid > .sata-stat:nth-child(2) { animation-delay: 0.08s; }
.sata-stats__grid > .sata-stat:nth-child(3) { animation-delay: 0.16s; }
.sata-stats__grid > .sata-stat:nth-child(4) { animation-delay: 0.24s; }
.sata-stats__grid > .sata-stat:nth-child(5) { animation-delay: 0.32s; }
.sata-stats__grid > .sata-stat:nth-child(6) { animation-delay: 0.40s; }
.sata-stats__grid > .sata-stat:nth-child(7) { animation-delay: 0.48s; }
.sata-stats__grid > .sata-stat:nth-child(8) { animation-delay: 0.56s; }


/* ---------------- Responsive ---------------- */

/* Tablet — two per row */
@media (max-width: 1024px) {
    .sata-stats {
        max-width: 760px;
    }
    .sata-stat {
        flex: 1 1 300px;
        max-width: 360px;
        padding: 34px 22px 28px;
    }
}

/* Mobile — one full-width card per row; ghost numeral returns */
@media (max-width: 640px) {
    .sata-stats {
        padding: 10px 14px 20px;
    }
    .sata-stats__header {
        margin-bottom: 34px;
        gap: 10px;
    }
    .sata-stats__title {
        font-size: 26px;
        max-width: none;
    }
    .sata-stats__grid {
        gap: 16px;
    }
    .sata-stat {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 30px 22px 26px;
        border-radius: 18px;
    }
    .sata-stat__icon {
        width: 54px;
        height: 54px;
        font-size: 20px;
        margin-bottom: 14px;
        border-radius: 17px;
    }
    .sata-stat__text {
        max-width: none;
    }

    /* Ghost numeral, mobile only — anchored bottom-right, behind the content
     * and clear of the copy on a full-width card. */
    .sata-stat__ghost {
        display: block;
        position: absolute;
        right: 2px;
        bottom: -22px;
        z-index: -1;

        font-size: 92px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.04em;
        font-variant-numeric: tabular-nums;

        color: transparent;
        -webkit-text-stroke: 1.5px rgba(20, 142, 41, 0.12);
        pointer-events: none;
        user-select: none;
    }
}


/* ---------------- Motion safety ---------------- */

@media (prefers-reduced-motion: reduce) {
    .sata-stat,
    .sata-stat::before,
    .sata-stat__icon,
    .sata-stat__label::after {
        animation: none !important;
        transition: none !important;
    }
    .sata-stat:hover {
        transform: none;
    }
    .sata-stat:hover .sata-stat__icon {
        transform: none;
    }
}


/* =========================================================================
 * ROUND 13 — HOME PAGE SHORTCODES, MODERN PASS
 *
 * Restyles every shortcode that renders on the home page, in the design
 * language now used across the site (navy #1d2c5e, orange #ff8a00, SATA green
 * #148e29; rounded cards, layered shadows, hover lift, image zoom).
 *
 *   [banner_carousel]      -> .banner-wrap .banner-item
 *   [latestnews_carousel]  -> .latestnews-wrap .latestnews-item
 *   [Events_Home_card]     -> .events-wrap.home-wrap .event-item
 *   [gallery_carousel]     -> .homegallery-wrap .gallery-item
 *   [blogs_carousel]       -> .blog-wrap.home-blogs .blogs-item
 *   [sponsors_carousel]    -> .sponsors-wrap .sponsor-item
 *   [videos_carousel]      -> .videos-wrap .videos-item
 *
 * NO markup changes — every class here already exists in the PHP output, so
 * the home page keeps working exactly as-is. Existing rules live in style.css
 * and layout-fixes.css; this file loads last, and selectors are prefixed with
 * `html body` so they win without needing !important (except against the two
 * places style.css already uses !important — the owl dots).
 * ========================================================================= */

/* ------------------------------------------------------------------ */
/* 0. Shared carousel furniture — dots + nav arrows                    */
/* ------------------------------------------------------------------ */

/* style.css sets `.owl-dot { background-color:#e2e2e2 !important }` and paints
 * the active dot with a gradient !important — so these need !important too. */
html body .owl-carousel .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

html body .owl-carousel .owl-dot {
    width: 8px;
    height: 8px;
    padding: 0 !important;
    border: 0;
    border-radius: 999px !important;
    background-color: #d8dde8 !important;
    background-image: none !important;
    opacity: 1;
    transition: width 0.3s ease, background-color 0.3s ease !important;
}

html body .owl-carousel .owl-dot:hover {
    background-color: #b9c2d6 !important;
}

/* Active dot stretches into a pill — clearer than a colour change alone */
html body .owl-carousel .owl-dot.active {
    width: 26px;
    background-color: transparent !important;
    background-image: linear-gradient(90deg, #148e29, #0b5c1b) !important;
}

/* ------------------------------------------------------------------ */
/* 1. [banner_carousel] — hero slider                                  */
/* ------------------------------------------------------------------ */

html body .banner-wrap .banner-item {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #1d2c5e;
}

html body .banner-wrap .banner-item .banner-img {
    margin: 0;
    line-height: 0;
}

html body .banner-wrap .banner-item .banner-img img {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1.001); /* avoids a 1px edge gap during the scrim fade */
    transition: transform 6s ease-out;
}

/* Slow ambient zoom while a slide is showing — cinematic, not distracting */
html body .banner-wrap .owl-item.active .banner-item .banner-img img {
    transform: scale(1.06);
}

/* Scrim so the title stays readable over any artwork */
html body .banner-wrap .banner-item::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    background: linear-gradient(180deg, transparent 0%, rgba(12, 18, 40, 0.82) 100%);
    z-index: 1;
    pointer-events: none;
}

html body .banner-wrap .banner-item .content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 28px 30px 30px;
}

html body .banner-wrap .banner-item .banner-title {
    margin: 0;
}

html body .banner-wrap .banner-item .banner-name {
    margin: 0;
    color: #fff;
    font-size: clamp(18px, 2.2vw, 28px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Small orange rule above the title — ties the banner to the site accent */
html body .banner-wrap .banner-item .banner-title::before {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-bottom: 12px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ff8a00, #ff6a00);
}

/* ------------------------------------------------------------------ */
/* 2. [latestnews_carousel] — scrolling ticker                         */
/* NOTE: the marquee itself is a CSS animation in style.css             */
/* (animation-name: infiniteScroll) — deliberately NOT touched here.    */
/* ------------------------------------------------------------------ */

html body .latestnews-wrap .latestnews-item {
    padding-left: 26px;
    display: flex;
    align-items: center;
}

/* Replace the plain bullet with a soft orange dot separator */
html body .latestnews-wrap .latestnews-item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #ff8a00;
    box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.22);
}

html body .latestnews-wrap .latestnews-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* 3. [Events_Home_card] — event cards                                 */
/* Mirrors the .sata-ecard design used on the events listing page.      */
/* ------------------------------------------------------------------ */

html body .events-wrap.home-wrap .event-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

html body .events-wrap.home-wrap .event-item:hover {
    transform: translateY(-6px);
    border-color: #e2e7f4;
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06), 0 18px 38px rgba(16, 24, 40, 0.12);
}

html body .events-wrap.home-wrap .event-item .image {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #1d2c5e;
    flex-shrink: 0;
}

html body .events-wrap.home-wrap .event-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

html body .events-wrap.home-wrap .event-item:hover .image img {
    transform: scale(1.05);
}

html body .events-wrap.home-wrap .event-item .content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 12px;
    padding: 20px 22px 22px;
}

html body .events-wrap.home-wrap .event-item .event-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

html body .events-wrap.home-wrap .event-item .event-title a {
    color: #1d2c5e;
    text-decoration: none;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
}

html body .events-wrap.home-wrap .event-item .event-title a:hover {
    color: #ff8a00;
}

html body .events-wrap.home-wrap .event-item .event-details {
    display: flex;
    flex-direction: column;
}

html body .events-wrap.home-wrap .event-item .event-details p {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}

html body .events-wrap.home-wrap .event-item .event-details i {
    width: 15px;
    flex-shrink: 0;
    text-align: center;
    color: #ff8a00;
    font-size: 13px;
}

/* "More Info" — a real button, pushed to the card foot so all cards align */
html body .events-wrap.home-wrap .event-item .details-btn {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff8a00, #ff6a00);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(255, 138, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

html body .events-wrap.home-wrap .event-item .details-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(255, 138, 0, 0.42);
    color: #fff;
}

/* ------------------------------------------------------------------ */
/* 4. [gallery_carousel] — gallery cards                               */
/* Markup is: .gallery-item > a.gallery-link > img, then a.gallery-title.
 * The title is lifted onto the image as an overlay (matches the
 * .sata-mini-gcard treatment on the single-gallery page).             */
/* ------------------------------------------------------------------ */

html body .homegallery-wrap .gallery-item {
    position: relative;
    height: auto; /* style.css forces 225px — the aspect-ratio below governs instead */
    border-radius: 16px;
    overflow: hidden;
    background: #1d2c5e;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

html body .homegallery-wrap .gallery-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06), 0 18px 38px rgba(16, 24, 40, 0.14);
}

html body .homegallery-wrap .gallery-item .gallery-link {
    display: block;
    /* Landscape rectangle (Round 24b — was 4/3, read as too square/tall).
     * height:auto beats style.css's fixed 225px so the ratio actually applies. */
    aspect-ratio: 16 / 9;
    height: auto;
    overflow: hidden;
    line-height: 0;
}

html body .homegallery-wrap .gallery-item .gallery-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

html body .homegallery-wrap .gallery-item:hover .gallery-link img {
    transform: scale(1.07);
}

/* ------------------------------------------------------------------ */
/* 5. [blogs_carousel] — home blog cards                               */
/* layout-fixes.css already lays these out (min-height keeps the        */
/* carousel rows aligned — kept). This adds the modern finish.          */
/* ------------------------------------------------------------------ */

html body .blog-wrap.home-blogs .blogs-item {
    border: 1px solid #eef0f5;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

html body .blog-wrap.home-blogs .blogs-item:hover {
    transform: translateY(-6px);
    border-color: #e2e7f4;
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06), 0 18px 38px rgba(16, 24, 40, 0.12);
}

html body .blog-wrap.home-blogs .blogs-item:hover .blogs-img img {
    transform: scale(1.06);
}

/* Category pill — softer than the solid orange block */
html body .blog-wrap.home-blogs .blogs-item .category span {
    padding: 5px 13px;
    background: #fff2e2;
    color: #d96b00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid #ffddb8;
}

html body .blog-wrap.home-blogs .blogs-item .blog-name {
    transition: color 0.2s ease;
}

html body .blog-wrap.home-blogs .blogs-item:hover .blog-name {
    color: #ff8a00;
}

/* ------------------------------------------------------------------ */
/* 7. [videos_carousel] — video cards                                  */
/* ------------------------------------------------------------------ */

html body .videos-wrap .videos-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

html body .videos-wrap .videos-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06), 0 18px 38px rgba(16, 24, 40, 0.12);
}

html body .videos-wrap .videos-item video {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    background: #0f1424;
    object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
    html body .banner-wrap .banner-item {
        border-radius: 12px;
    }
    html body .banner-wrap .banner-item .content {
        padding: 18px 18px 20px;
    }
    html body .banner-wrap .banner-item .banner-title::before {
        width: 34px;
        margin-bottom: 8px;
    }
    html body .events-wrap.home-wrap .event-item .content,
    
    html body .sponsors-wrap .sponsor-item {
        min-height: 96px;
        padding: 14px;
    }
    html body .sponsors-wrap .sponsor-item .image img {
        max-height: 62px;
        /* Touch devices have no hover — show logos in full colour. */
        filter: none;
        opacity: 1;
    }
    
}

/* Touch / no-hover devices: never leave logos stuck grey */
@media (hover: none) {
    html body .sponsors-wrap .sponsor-item .image img {
        filter: none;
        opacity: 1;
    }
}

/* ------------------------------------------------------------------ */
/* Motion safety                                                       */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    html body .banner-wrap .banner-item .banner-img img,
    html body .banner-wrap .owl-item.active .banner-item .banner-img img,
    html body .events-wrap.home-wrap .event-item,
    html body .events-wrap.home-wrap .event-item .image img,
    html body .events-wrap.home-wrap .event-item .details-btn,
    html body .homegallery-wrap .gallery-item,
    html body .homegallery-wrap .gallery-item .gallery-link img,
    html body .blog-wrap.home-blogs .blogs-item,
    html body .sponsors-wrap .sponsor-item,
    html body .sponsors-wrap .sponsor-item .image img,
    html body .videos-wrap .videos-item {
        transition: none !important;
        transform: none !important;
    }
}

/* =========================================================================
 * ROUND 14 — Home carousels: nav arrows, blog card footer, sponsors
 *
 * 1. ARROWS. Every carousel was built with nav:false, so Owl never created
 *    the .owl-nav buttons — there was literally nothing on the page to style.
 *    The shortcode default is now nav:true (+ navText icons), so the buttons
 *    exist; this section positions and skins them.
 * 2. Blog cards gained a footer (date + Read More) — laid out here.
 * 3. Sponsors redesigned + 2-up on mobile.
 * ========================================================================= */


/* ------------------------------------------------------------------ */
/* 1. Carousel nav arrows                                              */
/* ------------------------------------------------------------------ */

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

/* The nav bar spans the carousel and is click-through; only the buttons
 * themselves catch clicks, so arrows can float over the slides without
 * blocking links underneath. */
html body .owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 6;
}

html body .owl-carousel .owl-nav button.owl-prev,
html body .owl-carousel .owl-nav button.owl-next {
    pointer-events: auto;
    position: relative;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e4e8f2;
    color: #1d2c5e;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.16);
    transition: background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, transform 0.25s ease,
                box-shadow 0.25s ease, opacity 0.25s ease;
}

/* Tuck them just inside the edges — fully outside would be clipped by the
 * section, and overlapping the card edge reads fine with the shadow. */
html body .owl-carousel .owl-nav button.owl-prev { margin-left: -6px; }
html body .owl-carousel .owl-nav button.owl-next { margin-right: -6px; }

html body .owl-carousel .owl-nav button.owl-prev:hover,
html body .owl-carousel .owl-nav button.owl-next:hover {
    background: linear-gradient(135deg, #ff8a00, #ff6a00);
    border-color: transparent;
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 10px 24px rgba(255, 138, 0, 0.42);
}

html body .owl-carousel .owl-nav button.owl-prev:focus-visible,
html body .owl-carousel .owl-nav button.owl-next:focus-visible {
    outline: 3px solid rgba(255, 138, 0, 0.45);
    outline-offset: 2px;
}

/* Owl greys these out at the ends of a non-looping carousel */
html body .owl-carousel .owl-nav button.owl-prev.disabled,
html body .owl-carousel .owl-nav button.owl-next.disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Owl hides the whole bar when there is nothing to page through */
html body .owl-carousel .owl-nav.disabled {
    display: none;
}

/* The banner is one full-bleed image — arrows sit inside it, so give them a
 * frosted look rather than a solid white puck. */
html body .banner-wrap .owl-nav button.owl-prev,
html body .banner-wrap .owl-nav button.owl-next {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.34);
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

html body .banner-wrap .owl-nav button.owl-prev { margin-left: 14px; }
html body .banner-wrap .owl-nav button.owl-next { margin-right: 14px; }

/* Dots and arrows coexist — keep dots clear of the arrow row */
html body .owl-carousel.owl-theme .owl-dots {
    margin-top: 14px;
}


/* ------------------------------------------------------------------ */
/* 2. Home blog cards — footer (date + Read More)                      */
/* ------------------------------------------------------------------ */

html body .blog-wrap.home-blogs .blogs-item .post-content {
    flex-grow: 1;
}

html body .blog-wrap.home-blogs .blogs-item .post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;      /* pin to the card foot so every button lines up */
    padding-top: 14px;
    border-top: 1px dashed #e6e8ee;
}

/* The button must not stretch to full width inside the flex column */
html body .blog-wrap.home-blogs .blogs-item .post-footer .sata-card-btn {
    flex: 0 0 auto;
    padding: 9px 18px;
    font-size: 13.5px;
}

/* Long Telugu dates + the button need room to stack on narrow slides */
@media (max-width: 420px) {
    html body .blog-wrap.home-blogs .blogs-item .post-footer,
    html body .blog-wrap.blogs-page .blogs-item .post-footer {
        justify-content: flex-start;
    }
}


/* ------------------------------------------------------------------ */
/* 3. Sponsors — clean white tiles                                     */
/*                                                                     */
/* WHY THIS IS PLAIN WHITE: the sponsor logos are supplied as JPEGs     */
/* with their own baked-in backgrounds (alrajhi / LuLu / Malabar are    */
/* white; Joyalukkas is maroon; Vivarta is navy). An earlier pass gave  */
/* the tile a green radial wash, so every white-background logo showed  */
/* up as a hard white rectangle floating inside a tinted card — a box   */
/* inside a box. Matching the tile to the logos' own white makes the    */
/* seam disappear.                                                      */
/* ------------------------------------------------------------------ */

html body .sponsors-wrap .sponsor-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-height: 112px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e9edf3;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    box-shadow: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* No tint, no accent bar — anything painted on the tile shows the logos'
 * own backgrounds as a seam. Kept explicitly so a later edit doesn't
 * quietly reintroduce the problem. */
html body .sponsors-wrap .sponsor-item::before,
html body .sponsors-wrap .sponsor-item::after {
    content: none;
}

html body .sponsors-wrap .sponsor-item:hover {
    transform: translateY(-3px);
    border-color: #b9e0c4;
    box-shadow: 0 8px 22px rgba(20, 142, 41, 0.14);
}

html body .sponsors-wrap .sponsor-item .image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: visible;
}

/* Logos vary wildly in aspect ratio, so cap BOTH axes and let each one
 * settle at its natural shape inside the same box. */
html body .sponsors-wrap .sponsor-item .image img {
    max-width: 100%;
    max-height: 62px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none;
    opacity: 1;
    transition: transform 0.25s ease;
}

html body .sponsors-wrap .sponsor-item:hover .image img {
    transform: scale(1.04);
}


/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
    /* Arrows shrink slightly and hug the edges on phones */
    html body .owl-carousel .owl-nav button.owl-prev,
    html body .owl-carousel .owl-nav button.owl-next {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
    html body .owl-carousel .owl-nav button.owl-prev { margin-left: 2px; }
    html body .owl-carousel .owl-nav button.owl-next { margin-right: 2px; }
    html body .banner-wrap .owl-nav button.owl-prev { margin-left: 8px; }
    html body .banner-wrap .owl-nav button.owl-next { margin-right: 8px; }

    /* Sponsors: 2 per row (shortcode sends items:2 for mobile) —
     * shrink the tile so two fit comfortably. */
    html body .sponsors-wrap .sponsor-item {
        min-height: 88px;
        padding: 12px;
        border-radius: 10px;
    }
    html body .sponsors-wrap .sponsor-item .image img {
        max-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .owl-carousel .owl-nav button.owl-prev,
    html body .owl-carousel .owl-nav button.owl-next,
    html body .sponsors-wrap .sponsor-item,
    html body .sponsors-wrap .sponsor-item .image img {
        transition: none !important;
        transform: none !important;
    }
    html body .owl-carousel .owl-nav button.owl-prev:hover,
    html body .owl-carousel .owl-nav button.owl-next:hover,
    html body .sponsors-wrap .sponsor-item:hover {
        transform: none !important;
    }
}


/* ------------------------------------------------------------------ */
/* 4. Legacy owl-nav rules in style.css — neutralised                  */
/*                                                                     */
/* style.css carries an old arrow implementation scoped to the home     */
/* blogs carousel, written back when nav was enabled. Now that nav is   */
/* on again it would fight the new buttons:                            */
/*                                                                     */
/*   .blog-wrap.home-blogs .owl-nav button::before {                   */
/*       content: '\f104'; font-family: fontawesome; }                 */
/*                                                                     */
/* That paints a SECOND arrow on top of the real <i> icon — and it asks */
/* for the Font Awesome 4 family name ("fontawesome"), which no longer  */
/* resolves now the site loads FA6, so it renders as a tofu box.        */
/* Kill the pseudo-elements and let the real icon show.                 */
/* ------------------------------------------------------------------ */

html body .blog-wrap.home-blogs .owl-nav button::before,
html body .blog-wrap.home-blogs .owl-nav button::after,
html body .blog-wrap.home-blogs .owl-nav button:hover::after {
    content: none !important;
    display: none !important;
}

/* The old rules also styled the DISABLED nav as the visible layout
 * (.owl-nav.disabled { width:114%; left:-60px; display:flex }) — that
 * selector is 4 classes, so it outranks the generic hide rule above and would
 * drag a dead, mispositioned arrow bar back on screen. !important settles it. */
html body .owl-carousel .owl-nav.disabled,
html body .blog-wrap.home-blogs .owl-nav.disabled {
    display: none !important;
}

/* Old padding-based sizing on those buttons (padding: 25px) would blow the
 * new 44px circles out of shape whenever the legacy selector matched. */
html body .blog-wrap.home-blogs .owl-nav button.owl-prev,
html body .blog-wrap.home-blogs .owl-nav button.owl-next {
    padding: 0 !important;
    width: 44px;
    height: 44px;
}

@media (max-width: 767px) {
    html body .blog-wrap.home-blogs .owl-nav button.owl-prev,
    html body .blog-wrap.home-blogs .owl-nav button.owl-next {
        width: 38px;
        height: 38px;
    }
}


/* =========================================================================
 * ROUND 15 — Home EVENTS section: tabs, 3-up grid, empty state
 *
 * The section sits on a dark green patterned background, so everything here
 * is designed to read on DARK — frosted translucency + white text, rather
 * than the light cards used elsewhere.
 *
 * Tabs are Elementor "Nested Tabs" (.e-n-tabs). Markup:
 *   .e-n-tabs > .e-n-tabs-heading[role=tablist] > button.e-n-tab-title
 *                                                   > span.e-n-tab-title-text
 *             > .e-n-tabs-content > [role=tabpanel]
 * Elementor ships its own per-widget inline CSS, hence the !important calls.
 * ========================================================================= */


/* ------------------------------------------------------------------ */
/* 1. Tabs — segmented control (both nested and classic Elementor tabs)*/
/* ------------------------------------------------------------------ */

/* The heading row becomes a clean pill track */
html body .e-n-tabs > .e-n-tabs-heading,
html body .elementor-tabs > .elementor-tabs-wrapper {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px !important;
    margin: 0 0 30px !important;
    border-radius: 999px !important;
    background: #f1f4f9 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Inactive tabs: clearly visible dark slate text */
html body .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title,
html body .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-title {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
    padding: 11px 26px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #374151 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

html body .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title .e-n-tab-title-text,
html body .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-title a,
html body .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-title span {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    text-decoration: none !important;
}

/* Elementor draws its own underline/indicator pseudo-elements — remove them
 * so they don't cut across the pill. */
html body .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title::before,
html body .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title::after,
html body .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-title::before,
html body .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-title::after {
    content: none !important;
    display: none !important;
}

html body .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title:hover,
html body .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-title:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #ff8a00 !important;
}

/* Active pill — vibrant orange gradient with crisp white text */
html body .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title[aria-selected="true"],
html body .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title.elementor-active,
html body .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-title.elementor-active {
    background: linear-gradient(135deg, #ff8a00, #ff6a00) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(255, 106, 0, 0.36) !important;
}

html body .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title[aria-selected="true"] .e-n-tab-title-text,
html body .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title.elementor-active .e-n-tab-title-text,
html body .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-title.elementor-active a,
html body .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-title.elementor-active span {
    color: #ffffff !important;
}

html body .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title:focus-visible,
html body .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-title:focus-visible {
    outline: 3px solid rgba(255, 138, 0, 0.5);
    outline-offset: 2px;
}


/* ------------------------------------------------------------------ */
/* 2. Events carousel — 3 across with a gap                            */
/* ------------------------------------------------------------------ */

/* Owl sets slide widths inline from the shortcode's items/margin values.
 * These rules only handle what CSS owns: equal-height slides so a short card
 * doesn't leave its neighbours ragged, and breathing room for the arrows. */
html body .events-wrap.home-wrap.owl-carousel .owl-stage {
    display: flex;
}

html body .events-wrap.home-wrap.owl-carousel .owl-item {
    display: flex;
    height: auto;
}

html body .events-wrap.home-wrap.owl-carousel .owl-item > div,
html body .events-wrap.home-wrap.owl-carousel .owl-item .event-item {
    width: 100%;
    height: auto;
}

/* Room so the arrows don't sit on top of the cards */
html body .events-wrap.home-wrap.owl-carousel {
    padding: 0 6px;
}


/* ------------------------------------------------------------------ */
/* 3. Empty state — designed for the dark green section                */
/* ------------------------------------------------------------------ */

.sata-events-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
    padding: 46px 30px 48px;
    text-align: center;

    background: rgba(255, 255, 255, 0.07);
    border: 1px dashed rgba(255, 255, 255, 0.28);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.sata-events-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin-bottom: 4px;
    border-radius: 20px;
    background: linear-gradient(140deg, rgba(255, 138, 0, 0.9), rgba(255, 106, 0, 0.9));
    color: #fff;
    font-size: 26px;
    box-shadow: 0 10px 24px rgba(255, 106, 0, 0.34);
}

.sata-events-empty__title {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.sata-events-empty__text {
    margin: 0;
    max-width: 42ch;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 1.6;
}


/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
    html body .e-n-tabs > .e-n-tabs-heading {
        display: flex !important;
        width: 100%;
        margin-bottom: 22px !important;
    }
    html body .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title {
        flex: 1 1 0;
        padding: 10px 12px !important;
        font-size: 13.5px !important;
    }

    .sata-events-empty {
        padding: 34px 20px 36px;
        border-radius: 16px;
    }
    .sata-events-empty__icon {
        width: 56px;
        height: 56px;
        font-size: 22px;
        border-radius: 17px;
    }
    .sata-events-empty__title {
        font-size: 18px;
    }
    .sata-events-empty__text {
        font-size: 14.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .e-n-tabs > .e-n-tabs-heading > button.e-n-tab-title {
        transition: none !important;
    }
}


/* =========================================================================
 * ROUND 17 — LOADING SCREEN (traditional gold, transparent backdrop)
 *
 * Backdrop: frosted, translucent warm ivory — the page shows THROUGH it
 * rather than being hidden behind a solid colour.
 *
 * Loader: a beaded gold filigree ring turning around a polished gold band
 * with a specular highlight sweeping round it — the "shine". The namaste mark
 * sits on a gold-rimmed medallion in the middle.
 *
 * The namaste PNG is warm terracotta artwork (avg RGB ~171,98,45), so on this
 * light ground it is left in its NATURAL colours — no invert filter. That is
 * also why the backdrop is warm ivory rather than a cool white: the mark and
 * the gold sit in the same family.
 *
 * .loader-wrapper / #sata-loader / .is-hidden unchanged — js/custom.js drives
 * the fade-out and now guarantees it clears within 2.5s.
 * ========================================================================= */

html body .loader-wrapper {
    gap: 24px;

    /* Glass, not a veil.
     *
     * The tint is almost nothing now (0.08). Note the BLUR was the real
     * culprit, not the tint: at 22px over a mostly-white page every shape
     * smeared into a white wash, so the screen read as solid white even at 32%
     * opacity. Dropping it to 8px keeps the page recognisable underneath —
     * which is what "transparent" actually looks like here.
     *
     * Legibility is carried by the drop-shadows on the mark and wordmark,
     * which hug the artwork rather than covering the page. */
    background: rgba(255, 250, 240, 0.15);
    -webkit-backdrop-filter: blur(8px) saturate(1.04);
    backdrop-filter: blur(8px) saturate(1.04);
}

/* Dot lattice removed at the client's request — the backdrop is clean now. */
html body .loader-wrapper::before {
    content: none;
}

/* Halo removed at the client's request — its soft edge was reading as a visible
 * white dome over the page. Legibility is now carried by the backdrop blur plus
 * the tight drop-shadows on the mark and wordmark below, which hug the artwork
 * instead of laying a shape over the screen. */
html body .loader-wrapper::after {
    content: none;
}

/* ---- Spinner ---- */
.sata-loader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 158px;
    height: 158px;
    flex-shrink: 0;
    z-index: 1;
}

.sata-loader__arc {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
}

/* -- Outer: beaded gold filigree, like a jewellery border --
 * repeating-conic-gradient makes the beads; the radial mask punches the
 * middle out so it reads as a ring rather than a disc. */
.sata-loader__arc--outer {
    width: 158px;
    height: 158px;
    margin: -79px 0 0 -79px;
    background: repeating-conic-gradient(from 0deg,
        #c8971f 0deg 2.6deg,
        rgba(200, 151, 31, 0) 2.6deg 9deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation: sata-loader-spin 9s linear infinite;
}

/* -- Inner: polished gold band with a travelling highlight = the shine -- */
.sata-loader__arc--inner {
    width: 124px;
    height: 124px;
    margin: -62px 0 0 -62px;
    background: conic-gradient(from 0deg,
        #a4750f 0deg,
        #d9a92c 55deg,
        #fff3c4 96deg,      /* specular highlight */
        #ffffff 104deg,     /* hot spot */
        #f0cf6a 118deg,
        #c8971f 175deg,
        #8a6207 235deg,
        #d9a92c 300deg,
        #a4750f 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
    animation: sata-loader-spin 2.6s linear infinite;
    filter: drop-shadow(0 0 6px rgba(212, 160, 23, 0.5));
}

/* Static hairline between the two rings */
.sata-loader::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    margin: -70px 0 0 -70px;
    border-radius: 50%;
    border: 1px solid rgba(160, 110, 30, 0.22);
}

/* ---- Centre mark ----
 * The ivory disc, gold rim and bevel are gone at the client's request — the
 * namaste now floats directly on the frosted page inside the gold rings. */
.sata-loader__core {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    background: none;
    border: 0;
    box-shadow: none;
    animation: sata-loader-pulse 2.6s ease-in-out infinite;
}

/* Natural artwork colours — the mark is already warm terracotta/gold.
 * The drop-shadow replaces the disc it used to sit on: it hugs the artwork's
 * own edges, so the mark stays readable over whatever is behind it without
 * putting a visible shape on screen. */
.sata-loader__core img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
    /* Verified against the file: the artwork is fully transparent outside the
     * hands (0% near-white pixels), so these shadows trace the mark itself and
     * never square off into a box. */
    filter:
        drop-shadow(0 0 3px rgba(255, 255, 255, 1))
        drop-shadow(0 0 9px rgba(255, 255, 255, 0.9))
        drop-shadow(0 1px 3px rgba(120, 80, 15, 0.3));
}

/* ---- Wordmark ---- */
.sata-loader__text {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: 'Poppins', 'Montserrat', sans-serif;
    font-size: clamp(15px, 2vw, 19px);
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    text-indent: 0.26em;
    color: #7a4a12;

    /* Gold shine travelling across the letters */
    background: linear-gradient(100deg,
        #8a5a18 0%,
        #8a5a18 36%,
        #e8b93f 48%,
        #fff0bf 52%,
        #e8b93f 56%,
        #8a5a18 68%,
        #8a5a18 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: sata-loader-sheen 2.8s ease-in-out infinite;

    /* With the backdrop down to glass, this is the only thing keeping the gold
     * legible over live page content. filter (not text-shadow) is deliberate:
     * text-shadow paints BEHIND the glyphs, and these glyphs are transparent —
     * background-clip:text means the shadow would show straight through them.
     * filter operates on the rendered result, so it hugs the gold letterforms. */
    filter:
        drop-shadow(0 0 2px rgba(255, 255, 255, 1))
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.85));
}

/* ---- Progress bar ---- */
.sata-loader__bar {
    position: relative;
    z-index: 1;
    display: block;
    width: 186px;
    height: 3px;
    border-radius: 999px;
    background: rgba(160, 110, 30, 0.18);
    overflow: hidden;
}

.sata-loader__bar i {
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(212, 160, 23, 0), #d4a017, #fff0bf, #d4a017, rgba(212, 160, 23, 0));
    animation: sata-loader-slide 1.5s ease-in-out infinite;
}

/* ---- Keyframes ---- */
@keyframes sata-loader-spin {
    to { transform: rotate(360deg); }
}

@keyframes sata-loader-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

@keyframes sata-loader-sheen {
    0%   { background-position: 160% 0; }
    100% { background-position: -60% 0; }
}

@keyframes sata-loader-slide {
    0%   { left: -42%; }
    100% { left: 100%; }
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
    html body .loader-wrapper { gap: 18px; }
    .sata-loader { width: 124px; height: 124px; }
    .sata-loader__arc--outer { width: 124px; height: 124px; margin: -62px 0 0 -62px; }
    .sata-loader__arc--inner { width: 98px;  height: 98px;  margin: -49px 0 0 -49px; }
    .sata-loader::before      { width: 111px; height: 111px; margin: -55.5px 0 0 -55.5px; }
    .sata-loader__core { width: 76px; height: 76px; }
    .sata-loader__core img { width: 48px; height: 48px; }
    .sata-loader__bar { width: 150px; }
}

/* ---- Motion / support safety ---- */
@media (prefers-reduced-motion: reduce) {
    .sata-loader__arc--outer { animation-duration: 16s; }
    .sata-loader__arc--inner { animation-duration: 7s; }
    .sata-loader__core,
    .sata-loader__text,
    .sata-loader__bar i {
        animation: none;
    }
    .sata-loader__text {
        -webkit-text-fill-color: #7a4a12;
        background: none;
    }
    .sata-loader__bar i { left: 0; width: 100%; opacity: 0.55; }
}

/* No mask support -> the conic gradients would fill as solid DISCS and bury
 * the medallion. Fall back to simple gold rings. */
@supports not ((-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000))) {
    .sata-loader__arc--outer,
    .sata-loader__arc--inner {
        background: none;
        border: 3px solid rgba(200, 151, 31, 0.25);
        filter: none;
    }
    .sata-loader__arc--outer { border-top-color: #c8971f; }
    .sata-loader__arc--inner { border-top-color: #f0cf6a; }
}

/* Never let the wordmark render invisible. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .sata-loader__text {
        -webkit-text-fill-color: #7a4a12;
        background: none;
    }
}

/* No backdrop-filter (older Firefox) -> lean on opacity so the loader still
 * separates from the page behind it. */
/* No backdrop-filter (older Firefox): there is no blur to diffuse the page, so
 * the light 0.32 tint alone would leave the loader unreadable over busy
 * content. Fall back to a mostly-opaque veil — less pretty, but legible. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html body .loader-wrapper {
        background: rgba(255, 250, 240, 0.93);
    }
}


/* =========================================================================
 * ROUND 18 — Gallery + Video titles ALWAYS VISIBLE
 *
 * Why they were missing: style.css hides both titles until hover —
 *
 *   .homegallery-wrap .gallery-item .gallery-title { opacity: 0; ... }
 *   .homegallery-wrap .gallery-item:hover .gallery-title { opacity: 1; }
 *   .videos-wrap .videos-item .videos-title       { opacity: 0; ... }
 *
 * So the titles were in the HTML the whole time, just invisible — and on
 * phones and tablets there is no hover at all, so they could NEVER be seen.
 *
 * Round 13 restyled these but never reset `opacity` or `position`, so the
 * titles stayed hidden (and the video title stayed absolutely positioned on
 * top of the video). Both are corrected here.
 * ========================================================================= */


/* ------------------------------------------------------------------ */
/* 1. Gallery (Photos tab) — caption REMOVED in Round 24b             */
/* The home marquee now shows individual photos (many per event), so a */
/* repeated caption on every tile was noise. functions.php no longer   */
/* outputs a.gallery-title, and the bottom scrim went with it. Belt &  */
/* braces for cached HTML that may still contain the old markup:       */
/* ------------------------------------------------------------------ */

html body .homegallery-wrap .gallery-item .gallery-title {
    display: none;
}

html body .homegallery-wrap .gallery-item::after {
    content: none;
}


/* ------------------------------------------------------------------ */
/* 2. Videos tab — caption below the video                            */
/* ------------------------------------------------------------------ */

html body .videos-wrap .videos-item .videos-title {
    /* style.css floated this over the video at top:20px with opacity:0 —
     * put it back in normal flow beneath the player. */
    position: static;
    top: auto;
    left: auto;
    opacity: 1;
    z-index: auto;

    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 15px 18px 17px;

    color: #1d2c5e;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;

    white-space: normal;       /* was nowrap + ellipsis */
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Small orange play glyph before the title */
html body .videos-wrap .videos-item .videos-title::before {
    content: "\f04b"; /* fa-play */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 11px;
    color: #ff8a00;
}

html body .videos-wrap .videos-item:hover .videos-title {
    opacity: 1;
}


/* ------------------------------------------------------------------ */
/* 3. Gallery tile height — room for the caption                       */
/* ------------------------------------------------------------------ */

/* style.css fixes .gallery-item and .gallery-link to height:225px, which
 * beats the aspect-ratio set in Round 13. Keep a fixed height (the carousel
 * needs even tiles) but give it a little more room now a caption sits in it. */
html body .homegallery-wrap .gallery-item,
html body .homegallery-wrap .gallery-item .gallery-link {
    height: 250px;
}

@media (max-width: 640px) {
    html body .homegallery-wrap .gallery-item,
    html body .homegallery-wrap .gallery-item .gallery-link {
        height: 220px;
    }
    html body .homegallery-wrap .gallery-item .gallery-title {
        font-size: 14.5px;
        padding: 28px 13px 12px;
    }
    html body .videos-wrap .videos-item .videos-title {
        padding: 13px 15px 15px;
        font-size: 14.5px;
    }
}


/* =========================================================================
 * ROUND 20 — Home carousels: cropped hover, uneven cards, content/footer gap
 *
 * Three linked problems on the home blog carousel:
 *
 * 1. BOTTOM CROPPED ON HOVER
 *    owl.carousel.css sets `.owl-carousel .owl-stage-outer { overflow:hidden }`.
 *    The cards lift 6px and cast a ~38px shadow on hover, and both were being
 *    sliced off at the stage edge. Fixed by padding the stage-outer and pulling
 *    the same amount back with negative margins: `overflow:hidden` clips at the
 *    PADDING box, so the padding becomes extra visible room while the
 *    surrounding layout height stays exactly the same.
 *
 * 2. UNEVEN CARDS
 *    The flex equaliser only stretched `.owl-item > div`. Owl clones slides
 *    when loop:true, and a cloned wrapper could break the chain — so the
 *    stretch is re-asserted here through every level down to .blogs-item.
 *
 * 3. BIG GAP BETWEEN EXCERPT AND BUTTONS
 *    `.blogs-item { min-height: 480px }` forced cards taller than their
 *    content, and `.post-content { flex-grow: 1 }` then inflated the excerpt
 *    box to absorb the slack — parking the footer far below the text.
 *    min-height is dropped (the flex equaliser already keeps cards level), the
 *    excerpt no longer grows, and the footer's margin-top:auto does the work.
 * ========================================================================= */


/* ------------------------------------------------------------------ */
/* 1. Give hover lift + shadow room to breathe                        */
/* ------------------------------------------------------------------ */

html body .blog-wrap.home-blogs.owl-carousel .owl-stage-outer,
html body .events-wrap.home-wrap.owl-carousel .owl-stage-outer,
html body .homegallery-wrap.owl-carousel .owl-stage-outer,
html body .videos-wrap.owl-carousel .owl-stage-outer,
html body .sponsors-wrap.owl-carousel .owl-stage-outer {
    padding-top: 12px;
    padding-bottom: 34px;
    margin-top: -12px;
    margin-bottom: -34px;
}


/* ------------------------------------------------------------------ */
/* 2. Equal-height slides — asserted through every level              */
/* ------------------------------------------------------------------ */

html body .blog-wrap.home-blogs.owl-carousel .owl-stage,
html body .events-wrap.home-wrap.owl-carousel .owl-stage,
html body .videos-wrap.owl-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

html body .blog-wrap.home-blogs.owl-carousel .owl-item,
html body .events-wrap.home-wrap.owl-carousel .owl-item,
html body .videos-wrap.owl-carousel .owl-item {
    display: flex;
    height: auto;
    align-items: stretch;
}

/* The wrapper Owl puts around each slide (and around cloned slides) */
html body .blog-wrap.home-blogs.owl-carousel .owl-item > div,
html body .events-wrap.home-wrap.owl-carousel .owl-item > div,
html body .videos-wrap.owl-carousel .owl-item > div {
    display: flex;
    width: 100%;
    height: auto;
}

/* The card itself fills whatever height the row settles on */
html body .blog-wrap.home-blogs.owl-carousel .owl-item .blogs-item,
html body .events-wrap.home-wrap.owl-carousel .owl-item .event-item,
html body .videos-wrap.owl-carousel .owl-item .videos-item {
    width: 100%;
    height: auto;
}


/* ------------------------------------------------------------------ */
/* 3. Home blog card — tighten the content / footer gap               */
/* ------------------------------------------------------------------ */

/* Drop the forced height. The flex equaliser above already levels the row, so
 * min-height only ever added dead space. */
html body .blog-wrap.home-blogs .blogs-item {
    min-height: 0;
}

/* Slightly shorter image => shorter card => less slack to absorb */
html body .blog-wrap.home-blogs .blogs-img {
    aspect-ratio: 16 / 10;
}

html body .blog-wrap.home-blogs .blogs-item .content {
    gap: 10px;
    padding: 16px 20px 18px;
}

/* The excerpt must NOT grow — that is what pushed the footer away from the
 * text. Let the footer's margin-top:auto collect the leftover space instead,
 * so the gap sits below the buttons' separator, not above it. */
html body .blog-wrap.home-blogs .blogs-item .post-content {
    flex-grow: 0;
}

html body .blog-wrap.home-blogs .blogs-item .post-footer {
    margin-top: auto;
    padding-top: 12px;
}

/* Reserve two title lines so titles stay level card-to-card, but no more */
html body .blog-wrap.home-blogs .blogs-item .blogs-title {
    min-height: 52px;
}

@media (max-width: 767px) {
    html body .blog-wrap.home-blogs .blogs-item {
        min-height: 0;
    }
    html body .blog-wrap.home-blogs .blogs-item .content {
        padding: 14px 16px 16px;
    }
    html body .blog-wrap.home-blogs.owl-carousel .owl-stage-outer,
    html body .events-wrap.home-wrap.owl-carousel .owl-stage-outer,
    html body .homegallery-wrap.owl-carousel .owl-stage-outer,
    html body .videos-wrap.owl-carousel .owl-stage-outer,
    html body .sponsors-wrap.owl-carousel .owl-stage-outer {
        padding-bottom: 26px;
        margin-bottom: -26px;
    }
}


/* =========================================================================
 * ROUND 24c — Home Photos tab: pure-CSS infinite marquee
 *
 * Owl's continuous-loop recipe bounced back and forth at the end of the
 * strip, so [gallery_carousel] no longer uses Owl at all. functions.php
 * renders the photo strip TWICE inside .sata-marquee-track and this
 * animation slides the track exactly one strip-width (-50%) on a linear
 * infinite loop — the wrap point is pixel-identical to the start, so it
 * physically cannot rewind. Duration arrives per-page via the
 * --sata-marquee-duration custom property (photo count × seconds/photo).
 * ========================================================================= */

html body .sata-photo-marquee {
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

html body .sata-photo-marquee *,
html body .sata-photo-marquee *::before,
html body .sata-photo-marquee *::after {
    box-sizing: border-box;
}

html body .sata-photo-marquee .sata-marquee-track {
    display: flex;
    width: max-content;
    animation: sata-marquee-scroll var(--sata-marquee-duration, 78s) linear infinite;
    will-change: transform;
}

/* Pause while the visitor is pointing at it so photos are clickable. */
html body .sata-photo-marquee:hover .sata-marquee-track {
    animation-play-state: paused;
}

html body .sata-photo-marquee .sata-marquee-set {
    display: flex;
    gap: 16px;
    /* Trailing space so set 1 + set 2 tile seamlessly at the -50% wrap. */
    padding-right: 16px;
}

/* Landscape rectangle tiles — 16:10, fixed width, photos cover-cropped. */
html body .sata-photo-marquee .sata-marquee-item {
    display: block;
    flex: 0 0 auto;
    width: 340px;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    background: #1d2c5e;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 22px rgba(16, 24, 40, 0.10);
}

html body .sata-photo-marquee .sata-marquee-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

html body .sata-photo-marquee .sata-marquee-item:hover img {
    transform: scale(1.05);
}

@keyframes sata-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 900px) {
    html body .sata-photo-marquee .sata-marquee-item { width: 280px; }
}

@media (max-width: 560px) {
    html body .sata-photo-marquee .sata-marquee-item { width: 230px; }
    html body .sata-photo-marquee .sata-marquee-set  { gap: 12px; padding-right: 12px; }
}

/* Motion-sensitive visitors get a still, normally-scrollable strip. */
@media (prefers-reduced-motion: reduce) {
    html body .sata-photo-marquee {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    html body .sata-photo-marquee .sata-marquee-track {
        animation: none;
    }
}


/* =========================================================================
 * ROUND 32 — "Grand Success" event highlight + press coverage ([sata_event_success])
 * ========================================================================= */

.sata-success{
	position:relative; overflow:hidden;
	max-width:1160px; margin:26px auto; padding:0; border-radius:26px;
	background:
		radial-gradient(46% 42% at 90% 6%, rgba(255,138,0,0.13) 0%, rgba(255,138,0,0) 62%),
		radial-gradient(44% 44% at 6% 96%, rgba(29,44,94,0.10) 0%, rgba(29,44,94,0) 62%),
		radial-gradient(130% 120% at 50% -25%, #fff5ec 0%, rgba(255,245,236,0) 58%),
		linear-gradient(180deg,#ffffff 0%,#f5f8fc 100%);
	border:1px solid #eaeef4;
	box-shadow:0 20px 54px rgba(16,24,40,0.08);
	color:#111a3a;
}
/* thin brand accent line along the very top */
.sata-success::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; z-index:2;
	background:linear-gradient(90deg,#ff8a00,#ff6a00 45%,#1d2c5e); }
/* simple decorative dot texture, softly faded so it never competes with the text */
.sata-success::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
	background-image:radial-gradient(rgba(29,44,94,0.07) 1.1px, transparent 1.6px);
	background-size:24px 24px;
	-webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0,0,0,0) 72%);
	mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0,0,0,0) 72%); }
.sata-success__confetti{ display:none; } /* legacy node — hidden in the modern style */
.sata-success__inner{ position:relative; z-index:1; }

/* zones: photo hero band on top, light area below */
.sata-success__hero{ position:relative; padding:56px 46px 46px; }
.sata-success__lower{ position:relative; z-index:1; padding:40px 46px 50px; }

.sata-success__head{ text-align:center; max-width:720px; margin:0 auto; }
.sata-success__eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:7px 16px; margin-bottom:18px;
	border-radius:999px; background:#fff1e6; border:1px solid #ffd7bd;
	font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#e15c00; }
.sata-success__eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:#ff6a00; box-shadow:0 0 0 3px rgba(255,106,0,0.22);
	animation:sata-success-pulse 1.6s ease-in-out infinite; }
@keyframes sata-success-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

.sata-success__title{ margin:0 0 14px; font-size:clamp(26px,3.6vw,40px); font-weight:800; line-height:1.14;
	letter-spacing:-0.02em; color:#0f1836; }
.sata-success__title span{ color:#ff6a00; }
.sata-success__msg{ margin:0 auto; max-width:640px; font-size:15.5px; line-height:1.75; color:#5b6270; }

/* ---- Hero variant: event photo as a vivid HERO BAND across the top ---- */
.sata-success--hero .sata-success__hero{ background:var(--sata-hero) center 30%/cover no-repeat; overflow:hidden;
	min-height:460px; display:flex; align-items:flex-end; justify-content:center;
	padding:44px 46px 40px; box-shadow:inset 0 -1px 0 rgba(0,0,0,0.06); }
/* scrim darkens toward the bottom, where the title now sits — top stays bright */
.sata-success--hero .sata-success__scrim{ position:absolute; inset:0; z-index:0; pointer-events:none;
	background:linear-gradient(180deg, rgba(12,17,42,0.10) 0%, rgba(12,17,42,0.22) 42%, rgba(12,15,36,0.52) 74%, rgba(13,10,28,0.74) 100%); }
.sata-success--hero .sata-success__head{ position:relative; z-index:1; width:100%; }
.sata-success--hero .sata-success__eyebrow{ background:rgba(255,255,255,0.16); border-color:rgba(255,214,170,0.6); color:#ffe1bb;
	-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.sata-success--hero .sata-success__title{ color:#fff; text-shadow:0 2px 22px rgba(0,0,0,0.42); }
.sata-success--hero .sata-success__title span{ color:#ffb35c; }
/* description now sits in the light area below the photo — smaller + centred */
.sata-success__lower .sata-success__msg{ margin-bottom:30px; max-width:600px; font-size:14px; line-height:1.7; text-align:center; }

.sata-success__press-label{ display:flex; align-items:center; justify-content:center; gap:16px; margin:0 auto 24px;
	font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#a2a9b6; }
.sata-success__press-label::before,.sata-success__press-label::after{ content:""; height:1px; width:min(140px,16%);
	background:linear-gradient(90deg,transparent,#dee3ec); }
.sata-success__press-label::after{ background:linear-gradient(90deg,#dee3ec,transparent); }
.sata-success__cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }

.sata-press-card{ display:flex; flex-direction:column; gap:14px; padding:26px 24px; border-radius:18px; text-decoration:none;
	background:#fff; border:1px solid #e9edf3; box-shadow:0 4px 18px rgba(16,24,40,0.05);
	transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.sata-press-card:hover{ transform:translateY(-6px); border-color:#ffd0ab; box-shadow:0 22px 44px rgba(16,24,40,0.13); }
.sata-press-card__logo{ height:46px; display:flex; align-items:center; }
.sata-press-card__logo img{ height:38px; width:auto; max-width:170px; object-fit:contain; display:block; }
.sata-press-card__name{ font-size:18px; font-weight:800; color:#1d2c5e; letter-spacing:-0.01em; }
.sata-press-card__desc{ font-size:13.5px; line-height:1.55; color:#5b6270;
	display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sata-press-card__cta{ margin-top:auto; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:800; color:#ff6a00; }
.sata-press-card__cta i{ font-size:11px; transition:transform .2s ease; }
.sata-press-card:hover .sata-press-card__cta i{ transform:translate(2px,-2px); }

@media (max-width:640px){
	.sata-success{ border-radius:20px; }
	.sata-success__hero,.sata-success--hero .sata-success__hero{ padding:40px 20px 30px; }
	.sata-success--hero .sata-success__hero{ min-height:300px; }
	.sata-success__lower{ padding:30px 18px 34px; }
	.sata-success__cards{ grid-template-columns:1fr; }
	.sata-success__press-label::before,.sata-success__press-label::after{ width:14%; }
}
/* confetti burst when the section scrolls into view (JS-triggered) */
.sata-success__burst{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:5; }
.sata-success__burst i{ position:absolute; top:-16px; display:block; border-radius:2px; will-change:transform,opacity;
	animation-name:sata-success-confetti; animation-timing-function:cubic-bezier(.28,.55,.55,1); animation-fill-mode:forwards; }
@keyframes sata-success-confetti{
	0%{ transform:translate3d(0,-16px,0) rotate(0deg); opacity:1; }
	100%{ transform:translate3d(var(--dx,0), var(--fall,700px), 0) rotate(var(--r,540deg)); opacity:0; } }

@media (prefers-reduced-motion: reduce){
	.sata-success__eyebrow .dot{ animation:none; }
	.sata-press-card{ transition:none; }
	.sata-press-card:hover{ transform:none; }
	.sata-success__burst{ display:none; }
}