/*
Theme Name: CNCI Theme
Author: CNCI Wellington
Author URI: https://cnciwellington.org
Description: A clean, responsive church website theme for CNCI Wellington. Features image carousel, events listing, plans calendar, and fully customizable colors via the WordPress Customizer.
Version: 1.1.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cnci-wellington
Tags: church, portfolio, custom-colors, custom-menu, featured-images, responsive-layout, translation-ready
*/

/*------------------------------------------------------------*/
/*Variables*/
/*------------------------------------------------------------*/
:root {
    --Background:            #ffffff;
    --ButtonPrimary:         #e02020;
    --ButtonPrimaryHover:    #b71111;
    --ButtonSecondary:       #185FA5;
    --ButtonSecondaryHover:  #042c53;
    --Disabled:              #b8b9b9;
    --Error:                 #e02020;
    --Form:                  #e6e6e6;
    --Glow:                  #2684e2;
    --HeroContentBackground: #00000080;
    --Highlights:            #ef9f27;
    --HoverColor:            #042c53;
    --LightboxBackdrop:      #000000e0;
    --MainColor:             #185FA5;
    --NavBorder:             #042c5330;
    --Overlay:               rgba(0,0,0,0.5);
    --OverlayLight:          rgba(255,255,255,0.2);
    --RowEven:               #d4d5d5;
    --RowHover:              #c2d9f0;
    --RowOdd:                #e6e6e6;
    --Section:               #b8b9b9;
    --Shadow:                rgba(0,0,0,0.5);
    --ShadowCard:            rgba(0,0,0,0.1);
    --SnackBar:              #000000;
    --SubSection:            #c8c8c8;
    --subheader:             #436175;
    --Success:               #185FA5;
    --TableHeader:           #185FA5;
    --TableNormal:           #e6e6e6;
    --Text:                  #ffffff;
    --TextDark:              #000000;
    --TextPrimary:           #ffffff;
    --TextSecondary:         #000000;
}



/*------------------------------------------------------------*/
/* Base — Elements                                          */
/*------------------------------------------------------------*/

* {
    box-sizing: border-box; margin:0; padding:0;
}


body {
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif;
    margin-top: 0px !important;
    min-height: 100vh;
    padding-top: 0px !important;
}

button {
    height: 30px;
    width: 80px;
}

em {
    font-style: italic;
}

footer {
    align-items: top;
    background-color: var(--MainColor);
    border-radius: 2px;
    height: auto;
    justify-content: space-between;
    margin: 1px;
    padding: 10px;
}

h1 {
    font-size: 1.8rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: inherit;
    font-family: 'Georgia', 'Times New Roman', 'Palatino', serif;
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.3em;
}

h4 {
    font-size: 1.1rem;
}

h5 {
    font-size: 0.9rem;
}

h6 {
    font-size: 0.8rem;
}

header a:visited {
    color: var(--TextPrimary);
}

html {
    margin-top: 0px !important;
}

main {
    flex: 1;
    margin: 1px;
}

nav {
    z-index: 10000;
}

strong {
    font-weight: 700;
}

td {
    border: none;
    cursor: default;
    height: 40px;
    margin: opx;
    max-width: 150px;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

th {
    border: none;
    border-width: 0;
    height: 30px;
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;
}

thead {
    border: none;
    text-align: left;
}

/*------------------------------------------------------------*/
/* A — Archive                                              */
/*------------------------------------------------------------*/

.cnci-th-archive-item-cs {
    background: var(--Form);
    border: 1.5px solid var(--Disabled);
    border-radius: 10px;
    color: var(--TextDark);
    margin: 10px;
    min-width: 250px;
    padding: 10px;
}

.cnci-th-archive-item-cs:hover {
    font-weight: 500;
    margin-bottom: 5px;
    margin-left: 5px;
}

/*------------------------------------------------------------*/
/* B — Buttons                                              */
/*------------------------------------------------------------*/

.cnci-th-btn-cs {
    border-radius: 4px;
    font-weight: bold;
    padding: 12px 24px;
    text-decoration: none;
}

.cnci-th-btn-primary-cs {
    background: var(--ButtonPrimary);
    color: var(--TextPrimary);
    font-size: large;
    min-width: 150px;
}

.cnci-th-btn-primary-cs:hover {
    background: var(--ButtonPrimaryHover);
    color: var(--Highlights);
    font-size: larger;
    text-shadow: 0 0 10px var(--Glow);
    transform: translateY(-2px);
}

.cnci-th-btn-secondary-cs {
    background: var(--ButtonSecondary);
    color: var(--TextPrimary);
    font-size: large;
    min-width: 150px;
}

.cnci-th-btn-secondary-cs:hover {
    background: var(--ButtonSecondaryHover);
    color: var(--Highlights);
    font-size: larger;
    text-shadow: 0 0 10px var(--Glow);
    transform: translateY(-2px);
}

/*------------------------------------------------------------*/
/* E — Event Carousel                                       */
/*------------------------------------------------------------*/

/* The Upcoming Events strip between the hero and the Post Carousel. Same card
   size, spacing and arrows as the other two strips, but with its own selectors
   rather than shared ones, so restyling events can never disturb the posts or
   the gallery. The date/location lines are the only thing genuinely new here. */

.cnci-th-event-carousel-body-cs {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

/* The arrow that replaced the Read More link. It has to out-specify the
   blanket span rules in this block, which is why it is written as a descendant
   of the body rather than on its own. */
.cnci-th-event-carousel-body-cs .cnci-th-event-carousel-more-cs {
    align-self: flex-end;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
    opacity: 0.7;
}

.cnci-th-event-carousel-body-cs a {
    color: var(--TextDark);
    text-decoration: none;
}

.cnci-th-event-carousel-body-cs h4 {
    margin: 0;
}

.cnci-th-event-carousel-body-cs p {
    flex: 1;
    font-size: 0.9rem;
}

.cnci-th-event-carousel-cs {
    margin: 1px;
    margin-top: 10px;
}

/* This is an <a> now, wrapping the whole card, so it needs the two things a
   link brings with it undone: the underline, and the browser's link colour
   leaking into the text below. */
.cnci-th-event-carousel-item-cs {
    background: var(--Form);
    border: 1.5px solid var(--Disabled);
    border-radius: 10px;
    color: var(--TextDark);
    display: flex;
    flex: 0 0 280px;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
}

.cnci-th-event-carousel-item-cs:hover * {
    background: var(--HoverColor);
    color: var(--Highlights);
}

.cnci-th-event-carousel-item-cs img {
    display: block;
    height: 160px;
    object-fit: cover;
    width: 100%;
}

/* Overrides the global `button` size rule, which would otherwise squash the
   round arrows into an 80x30 box. */
.cnci-th-event-carousel-nav-cs {
    align-items: center;
    background: var(--MainColor);
    border: none;
    border-radius: 50%;
    color: var(--TextPrimary);
    cursor: pointer;
    display: flex;
    font-size: 1.6rem;
    height: 40px;
    justify-content: center;
    line-height: 1;
    opacity: 0.85;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    z-index: 2;
}

.cnci-th-event-carousel-nav-cs:hover {
    background: var(--HoverColor);
    color: var(--Highlights);
    opacity: 1;
}

.cnci-th-event-carousel-next-cs {
    right: 4px;
}

.cnci-th-event-carousel-prev-cs {
    left: 4px;
}

.cnci-th-event-carousel-stage-cs {
    position: relative;
}

.cnci-th-event-carousel-thumb-cs {
    display: block;
}

.cnci-th-event-carousel-track-cs {
    display: flex;
    gap: 20px;
    padding: 5px;
    padding-left: 50px;
    padding-right: 50px;
}

.cnci-th-event-carousel-viewport-cs {
    -ms-overflow-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.cnci-th-event-carousel-viewport-cs::-webkit-scrollbar {
    display: none;
}

/* The date line carries the emphasis — on an events strip it is the thing
   people scan for, so it reads stronger than the location under it. */
.cnci-th-event-carousel-when-cs {
    color: var(--TextDark);
    font-size: 0.85rem;
    font-weight: 600;
}

.cnci-th-event-carousel-where-cs {
    font-size: 0.8rem;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .cnci-th-event-carousel-item-cs {
        flex: 0 0 85%;
    }
    .cnci-th-event-carousel-nav-cs {
        height: 34px;
        width: 34px;
    }
}

/*------------------------------------------------------------*/
/* F — Footer                                               */
/*------------------------------------------------------------*/

.cnci-th-footer-info-cs h3 {
    color: var(--TextPrimary);
    margin: 0px;
    margin-bottom: 10px;
}

.cnci-th-footer-info-cs p {
    color: var(--TextPrimary);
    margin: 0px;
    margin-bottom: 2px;
}

/*------------------------------------------------------------*/
/* H — Hamburger                                            */
/*------------------------------------------------------------*/

.cnci-th-hamburger-cs {
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    display: none;
    flex-direction: column;
    gap: 5px;
    height: 30px;
    justify-content: center;
    text-align: center;
    width: 30px;
}

.cnci-th-hamburger-cs span {
    background: white;
    display: block;
    height: 3px;
    width: 25px;
}

@media (max-width: 768px) {
    .cnci-th-hamburger-cs {
        display: flex;
        top: 60px;
    }
}

/*------------------------------------------------------------*/
/* H — Header                                               */
/*------------------------------------------------------------*/

.cnci-th-header-branding-cs {
    align-items: center;
    display: flex;
    font-weight: bold;
    gap: 10px;
    justify-content: center;
    text-align: center;
}

.cnci-th-header-branding-cs img {
    border-radius: 50%;
    height: 50px;
    object-fit: cover;
    width: 50px;
}

.cnci-th-header-cs {
    align-items: center;
    background-color: var(--MainColor);
    border-radius: 1px;
    display: flex;
    height: 60px;
    justify-content: space-between;
    margin: 1px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    position: sticky;
    top:0px;
    z-index: 1000;
}

.cnci-th-header-cs a {
    font-size: larger;
    text-decoration: none;
}

/*------------------------------------------------------------*/
/* H — Hero                                                 */
/*------------------------------------------------------------*/

.cnci-th-hero-buttons-cs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.cnci-th-hero-content-cs {
    background-color: var(--HeroContentBackground);
    border-radius: 15px;
    max-width: 600px;
    padding: 15px;
}

.cnci-th-hero-cs {
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    min-height: 400px;
    padding: 60px 20px;
    text-align: center;
}

.cnci-th-hero-title-cs {
    color: var(--TextPrimary);
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.cnci-th-hero-verse-cs {
    color: var(--TextPrimary);
    font-style: italic;
    margin-bottom: 30px;
}

.cnci-th-hero-verse-ref-cs {
    color: var(--TextPrimary);
    margin-bottom: 10px;
}

/*------------------------------------------------------------*/
/* I — Image Carousel                                       */
/*------------------------------------------------------------*/

.cnci-th-image-carousel-cs {
    overflow: hidden;
    position: relative;
}

.cnci-th-image-carousel-cs .cnci-th-hero-content-cs {
    position: relative;
    z-index: 1;
}

.cnci-th-image-carousel-slide-cs {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 1.2s ease-in-out;
}

.cnci-th-image-carousel-slide-cs.cnci-th-image-carousel-active-cs {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .cnci-th-image-carousel-slide-cs {
        transition: none;
    }
}

/*------------------------------------------------------------*/
/* L — Lightbox                                             */
/*------------------------------------------------------------*/

/* The full-screen photo viewer the Gallery thumbnails open into. One dialog is
   printed for the whole strip and the JS swaps its contents, so these rules
   describe a single box no matter how many pictures the library holds.

   It sits above the sticky header on purpose: the header stacks at 1000, so
   9999 here puts the photo over everything without the header needing to know
   the viewer exists. */

.cnci-th-lightbox-cs {
    align-items: center;
    background: var(--LightboxBackdrop);
    display: none;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 9999;
}

.cnci-th-lightbox-cs.cnci-th-lightbox-open-cs {
    display: flex;
}

.cnci-th-lightbox-caption-cs {
    color: var(--TextPrimary);
    font-size: 0.95rem;
    margin-top: 12px;
    text-align: center;
}

/* Overrides the global `button` size rule, which would otherwise squash the
   round close and arrow buttons into an 80x30 box. */
.cnci-th-lightbox-close-cs {
    align-items: center;
    background: var(--OverlayLight);
    border: none;
    border-radius: 50%;
    color: var(--TextPrimary);
    cursor: pointer;
    display: flex;
    font-size: 1.5rem;
    height: 44px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 44px;
    z-index: 2;
}

.cnci-th-lightbox-close-cs:hover {
    background: var(--MainColor);
    color: var(--Highlights);
}

.cnci-th-lightbox-counter-cs {
    color: var(--TextPrimary);
    font-size: 0.8rem;
    left: 24px;
    opacity: 0.75;
    position: absolute;
    top: 30px;
}

.cnci-th-lightbox-figure-cs {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0;
    max-height: 92vh;
    max-width: 92vw;
}

.cnci-th-lightbox-image-cs {
    border-radius: 6px;
    box-shadow: 0 10px 40px var(--Shadow);
    display: block;
    max-height: 80vh;
    max-width: 92vw;
    object-fit: contain;
}

/* Put on <body> while the viewer is open. Without it the page underneath still
   scrolls behind the fixed overlay, so closing the viewer drops you somewhere
   you never chose to be. */
.cnci-th-lightbox-lock-cs {
    overflow: hidden;
}

.cnci-th-lightbox-nav-cs {
    align-items: center;
    background: var(--OverlayLight);
    border: none;
    border-radius: 50%;
    color: var(--TextPrimary);
    cursor: pointer;
    display: flex;
    font-size: 2rem;
    height: 52px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    z-index: 2;
}

.cnci-th-lightbox-nav-cs:hover {
    background: var(--MainColor);
    color: var(--Highlights);
}

.cnci-th-lightbox-next-cs {
    right: 24px;
}

.cnci-th-lightbox-prev-cs {
    left: 24px;
}

@media (max-width: 768px) {
    .cnci-th-lightbox-nav-cs {
        font-size: 1.5rem;
        height: 40px;
        width: 40px;
    }
    .cnci-th-lightbox-next-cs {
        right: 8px;
    }
    .cnci-th-lightbox-prev-cs {
        left: 8px;
    }
}

/*------------------------------------------------------------*/
/* M — Main                                                 */
/*------------------------------------------------------------*/

.cnci-th-main-cs {
    padding: 0px;
}

/*------------------------------------------------------------*/
/* N — Navigation                                           */
/*------------------------------------------------------------*/

.cnci-th-nav-cs ul {
    display: flex;
    gap: .05px;
    list-style: none;
    margin: 0;
    padding: 0.5px;
}

.cnci-th-nav-cs ul li {
    height: 60px;
    min-width: 110px;
    position: relative;
}

.cnci-th-nav-cs ul li a {
    align-items: center;
    border-radius: 2px;
    color: var(--TextPrimary);
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 1px;
    text-align: center;
}

.cnci-th-nav-cs ul li.cnci-th-nav-open-cs > ul {
    border-color: var(--NavBorder);
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    display: flex;
}

.cnci-th-nav-cs ul li:hover > a,
.cnci-th-nav-cs ul li.cnci-th-nav-open-cs > a {
    border-color: var(--NavBorder);
    border-style: solid;
    border-width: 1px;
    color: var(--Highlights);
    font-weight: 500;
    padding-bottom: 5px;
    text-shadow: 0 0 10px var(--Glow);
}

.cnci-th-nav-cs ul li:hover,
.cnci-th-nav-cs ul li.cnci-th-nav-open-cs {
    background: var(--HoverColor);
    border-color: var(--NavBorder);
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
}

.cnci-th-nav-cs ul ul {
    background: var(--MainColor);
    border-radius: 2px;
    display: none;
    flex-direction: column;
    left: 0;
    min-width: 100px;
    padding-top: 1px;
    position: absolute;
    top: 100%;
}

/* Hover opens the submenu, but only where hovering is a real thing.
   (hover: hover) and (pointer: fine) ask about the input device rather than the
   screen, so a 1024px tablet is correctly told no while a 1366px laptop is told
   yes — which no width breakpoint could ever get right, because the two sit on
   the same side of every sensible one.

   min-width is paired with them for a different reason. Below 769px the nav is
   a stacked drawer, and hovering down a drawer would flap every submenu open in
   turn. That is a layout question, and width is the right way to ask it.

   .cnci-th-pointer-fine-cs is set by the script and tracks the input actually
   being used, not merely the one available. A touchscreen laptop answers both
   features "yes" and is telling the truth, right up until someone taps the
   screen — at which point the class comes off and tap-to-open takes over. See
   cnci_th_pointer_watch().

   :focus-within is deliberately not gated on that class: a keyboard user needs
   the submenu whether or not the last thing to touch the screen was a finger. */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
    .cnci-th-nav-cs ul li:focus-within > ul,
    .cnci-th-pointer-fine-cs .cnci-th-nav-cs ul li:hover > ul {
        border-color: var(--NavBorder);
        border-radius: 5px;
        border-style: solid;
        border-width: 1px;
        display: flex;
    }
}

@media (max-width: 768px) {
    .cnci-th-nav-cs {
        display: none;
    }
    .cnci-th-nav-cs.cnci-th-nav-active-cs {
        background: var(--MainColor);
        display: block;
        left: 0;
        position: absolute;
        top: 62px;
        width: 100%;
        z-index: 999;
    }
    .cnci-th-nav-cs.cnci-th-nav-active-cs ul {
        flex-direction: column;
    }
    .cnci-th-nav-cs ul li ul {
        border-radius: 0;
        display: none;
        padding-top: 0;
        position: static;
        width: 100%;
    }
    .cnci-th-nav-cs ul li.cnci-th-nav-open-cs > ul {
        display: flex;
    }
    .cnci-th-nav-cs ul li.cnci-th-nav-open-cs > ul li a {
        padding-left: 20px;
    }
    .cnci-th-nav-cs ul ul {
        position: static;
    }
    .cnci-th-nav-cs ul li {
        height: auto;
    }
    .cnci-th-nav-cs ul li.cnci-th-nav-open-cs > ul li a {
        background: var(--HoverColor);
        padding-left: 30px;
    }
}

/*------------------------------------------------------------*/
/* P — Page                                                 */
/*------------------------------------------------------------*/

.cnci-th-page-content-cs {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 1px;
    padding: 10px;
}

.cnci-th-page-title-cs {
    align-items: center;
    background-color: var(--Section);
    border-radius: 2px;
    display: flex;
    height: 40px;
    justify-content: space-between;
    margin: 1px;
    margin-top: 0px;
    padding: 10px;
}

/*------------------------------------------------------------*/
/* P — Picture Carousel                                     */
/*------------------------------------------------------------*/

/* The Gallery strip under the Post Carousel. It shares the Post Carousel's
   sizing and arrows on purpose, but keeps its own rules rather than sharing
   selectors, so restyling the gallery can never disturb the posts above it. */

.cnci-th-picture-carousel-cs {
    margin: 1px;
    margin-top: 10px;
}

.cnci-th-picture-carousel-image-cs {
    display: block;
    height: 180px;
    object-fit: cover;
    width: 100%;
}

/* position: relative is what the ::after overlay below anchors to; without it
   the overlay would size itself to the viewport instead of the thumbnail. */
.cnci-th-picture-carousel-item-cs {
    background: var(--Form);
    border: 1.5px solid var(--Disabled);
    border-radius: 10px;
    cursor: pointer;
    flex: 0 0 280px;
    margin: 0;
    overflow: hidden;
    position: relative;
}

/* The ⊕ that fades in over a thumbnail, so it is obvious the picture opens
   rather than just sitting there. Touch devices never hover and so never see
   it — tapping still opens the viewer, which is why this is the only hint and
   not the mechanism. */
.cnci-th-picture-carousel-item-cs::after {
    align-items: center;
    background: var(--Overlay);
    color: var(--TextPrimary);
    content: "\2295";
    display: flex;
    font-size: 2rem;
    inset: 0;
    justify-content: center;
    opacity: 0;
    position: absolute;
    transition: opacity 0.18s ease;
}

.cnci-th-picture-carousel-item-cs:hover::after {
    opacity: 1;
}

/* Overrides the global `button` size rule, which would otherwise squash the
   round arrows into an 80x30 box. */
.cnci-th-picture-carousel-nav-cs {
    align-items: center;
    background: var(--MainColor);
    border: none;
    border-radius: 50%;
    color: var(--TextPrimary);
    cursor: pointer;
    display: flex;
    font-size: 1.6rem;
    height: 40px;
    justify-content: center;
    line-height: 1;
    opacity: 0.85;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    z-index: 2;
}

.cnci-th-picture-carousel-nav-cs:hover {
    background: var(--HoverColor);
    color: var(--Highlights);
    opacity: 1;
}

.cnci-th-picture-carousel-next-cs {
    right: 4px;
}

.cnci-th-picture-carousel-prev-cs {
    left: 4px;
}

.cnci-th-picture-carousel-stage-cs {
    position: relative;
}

.cnci-th-picture-carousel-track-cs {
    display: flex;
    gap: 20px;
    padding: 5px;
    padding-left: 50px;
    padding-right: 50px;
}

.cnci-th-picture-carousel-viewport-cs {
    -ms-overflow-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.cnci-th-picture-carousel-viewport-cs::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px) {
    .cnci-th-picture-carousel-item-cs {
        flex: 0 0 85%;
    }
    .cnci-th-picture-carousel-nav-cs {
        height: 34px;
        width: 34px;
    }
}

/*------------------------------------------------------------*/
/* P — Post Carousel                                        */
/*------------------------------------------------------------*/

.cnci-th-post-carousel-body-cs {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

/* Written as a descendant so it beats the blanket `span` rule further down
   this block, which would otherwise shrink the arrow to date-line size. */
.cnci-th-post-carousel-body-cs .cnci-th-post-carousel-more-cs {
    align-self: flex-end;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
    opacity: 0.7;
}

.cnci-th-post-carousel-body-cs a {
    color: var(--TextDark);
    text-decoration: none;
}

.cnci-th-post-carousel-body-cs h4 {
    margin: 0;
}

.cnci-th-post-carousel-body-cs p {
    flex: 1;
    font-size: 0.9rem;
}

.cnci-th-post-carousel-body-cs span {
    font-size: 0.8rem;
    opacity: 0.85;
}

.cnci-th-post-carousel-cs {
    margin: 1px;
    margin-top: 10px;
}

/* An <a> around the whole card — see the event carousel item for the same two
   link defaults being undone. */
.cnci-th-post-carousel-item-cs {
    background: var(--Form);
    border: 1.5px solid var(--Disabled);
    border-radius: 10px;
    color: var(--TextDark);
    display: flex;
    flex: 0 0 280px;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
}

.cnci-th-post-carousel-item-cs:hover * {
    background: var(--HoverColor);
    color: var(--Highlights);
}

.cnci-th-post-carousel-item-cs img {
    display: block;
    height: 160px;
    object-fit: cover;
    width: 100%;
}

/* Overrides the global `button` size rule, which would otherwise squash the
   round arrows into an 80x30 box. */
.cnci-th-post-carousel-nav-cs {
    align-items: center;
    background: var(--MainColor);
    border: none;
    border-radius: 50%;
    color: var(--TextPrimary);
    cursor: pointer;
    display: flex;
    font-size: 1.6rem;
    height: 40px;
    justify-content: center;
    line-height: 1;
    opacity: 0.85;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    z-index: 2;
}

.cnci-th-post-carousel-nav-cs:hover {
    background: var(--HoverColor);
    color: var(--Highlights);
    opacity: 1;
}

.cnci-th-post-carousel-next-cs {
    right: 4px;
}

.cnci-th-post-carousel-prev-cs {
    left: 4px;
}

.cnci-th-post-carousel-stage-cs {
    position: relative;
}

.cnci-th-post-carousel-thumb-cs {
    display: block;
}

.cnci-th-post-carousel-track-cs {
    display: flex;
    gap: 20px;
    padding: 5px;
    padding-left: 50px;
    padding-right: 50px;
}

.cnci-th-post-carousel-viewport-cs {
    -ms-overflow-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.cnci-th-post-carousel-viewport-cs::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px) {
    .cnci-th-post-carousel-item-cs {
        flex: 0 0 85%;
    }
    .cnci-th-post-carousel-nav-cs {
        height: 34px;
        width: 34px;
    }
}

/*------------------------------------------------------------*/
/* S — Search Bar                                           */
/*------------------------------------------------------------*/

.cnci-th-search-bar-cs {
    align-items: center;
    background-color: var(--Background);
    display: flex;
    margin: 0px;
    max-width: 800px;
    min-height: 40px;
    padding-left: 10px;
    padding-right: 10px;
}

.cnci-th-search-bar-cs form div input[type="submit"] {
    background-color: var(--ButtonPrimary);
    border-color: var(--NavBorder);
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    color: var(--TextPrimary);
    font-size: large;
    font-weight: 500;
    min-height: 25px;
    min-width: 250px;
    padding: 5px;
}

.cnci-th-search-bar-cs form div input[type="submit"]:hover {
    background-color: var(--ButtonPrimaryHover);
    color: var(--Highlights);
    font-size: larger;
    text-shadow: 0 0 10px var(--Glow);
    transform: translateY(-2px);
}

.cnci-th-search-bar-cs form div input[type="text"] {
    border-color: var(--NavBorder);
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    font-size: large;
    font-weight: 500;
    min-height: 25px;
    min-width: 250px;
    padding: 5px;
}

@media (max-width: 768px) {
    .cnci-th-search-bar-cs {
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        padding: 5px;
        width: 100%;
    }
    .cnci-th-search-bar-cs button {
        margin-top: 5px;
        width: 100%;
    }
    .cnci-th-search-bar-cs input {
        margin-top: 5px;
        width: 100%;
    }
}