/* ================================================
   WCNO 89.9 FM - Custom Stylesheet
   /wp-content/themes/[child-theme]/css/wcno-custom.css
   
   TABLE OF CONTENTS
   ========================================
   1. Global Variables
   2. Wednesday Live - Single Post
      2a. Breadcrumb
      2b. Category Pill
      2c. Post Title & Date
      2d. Scripture Banner
      2e. Guest Card
      2f. Post Body Content
      2g. Event Block
      2h. Contact Block
      2i. On Demand Listen Bar
      2j. Tags
   3. Programs + Schedule
   4. Shared Components
   ================================================ */


/* ================================================
   1. GLOBAL VARIABLES
   ================================================ */
:root {
    --wcno-blue:       #4A90C2;
    --wcno-blue-dk:    #2e6da4;   /* was #3a7aad - now 5.47:1 on white */
    --wcno-orange:     #E8922D;
    --wcno-orange-dk:  #b05e00;   /* was #c97520 - now 4.72:1 on white */
    --wcno-orange-deep:#9d5500;   /* hover state for orange buttons */
    --wcno-hero-accent:#A9CFEF;   /* light blue for text on dark heroes (9.5:1) - replaced gold */
    --wcno-gold:       #F5B041;
    --wcno-dark:       #1a2535;
    --wcno-dark2:      #263347;
    --wcno-text:       #2d3748;
    --wcno-muted:      #5f6f81;   /* was #8a97a8 - failed WCAG (2.97:1) */
    --wcno-light:      #f7f9fc;
    --wcno-border:     #dce6f0;
    --wcno-white:      #ffffff;
}


/* ================================================
   2. WEDNESDAY LIVE - SINGLE POST
   ================================================ */

/* - 2a. Breadcrumb - */
.wl-breadcrumb {
    font-size: 12px;
    letter-spacing: 0.8px;
    color: var(--wcno-muted);
    margin-bottom: 20px;
}
.wl-breadcrumb a {
    color: var(--wcno-blue-dk);
    text-decoration: none;
    font-weight: 600;
}
.wl-breadcrumb a:hover {
    text-decoration: underline;
}
.wl-breadcrumb .separator {
    margin: 0 6px;
    color: var(--wcno-border);
}

/* - 2b. Category Pill - */
.wl-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--wcno-blue-dk);
    color: var(--wcno-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 3px;
    margin-bottom: 16px;
}
/* mic icon now rendered as a Font Awesome <i> element in the markup */

/* - 2c. Post Title & Date - */
.wl-title {
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 800;
    color: var(--wcno-dark);
    line-height: 1.2;
    margin: 0 0 12px;
}
.wl-date {
    font-size: 12px;
    color: var(--wcno-muted);
    letter-spacing: 0.5px;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.wl-date::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--wcno-orange);
    flex-shrink: 0;
}

/* - 2d. Scripture Banner - */
.wl-scripture {
    background: #eef5fb;
    border-left: 5px solid var(--wcno-orange);
    color: var(--wcno-text);
    padding: 28px 32px 24px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;
}
.wl-scripture::before {
    content: '\201C';
    position: absolute;
    top: -14px;
    left: 16px;
    font-size: 94px;
    color: rgba(232, 146, 45, 0.20);
    font-family: Georgia, serif;
    line-height: 1;
    pointer-events: none;
}
.wl-scripture-text {
    font-style: italic;
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 12px;
    position: relative;
    color: var(--wcno-dark);
}
.wl-scripture-ref {
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--wcno-orange-dk);
    font-style: normal;
    display: block;
}

/* - 2e. Guest Card - */
.wl-guest-card {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    background: var(--wcno-light);
    border: 1px solid var(--wcno-border);
    border-top: 4px solid var(--wcno-orange);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 36px;
}
.wl-guest-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    flex-shrink: 0;
    border: 3px solid var(--wcno-white);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.wl-guest-initials {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wcno-blue), var(--wcno-dark));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wcno-white);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -1px;
}
.wl-guest-info {
    flex: 1;
    min-width: 0;
}
.wl-guest-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--wcno-dark);
    margin: 0 0 6px;
    line-height: 1.2;
}
.wl-guest-title {
    font-size: 14px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0;
}

/* - 2f. Post Body Content - */
.wl-body {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--wcno-text);
    margin-bottom: 36px;
}
.wl-body p {
    margin: 0 0 18px;
}
.wl-body p:last-child {
    margin: 0;
}
.wl-body a {
    color: var(--wcno-blue);
    font-weight: 600;
    text-decoration: none;
}
.wl-body a:hover {
    text-decoration: underline;
}
.wl-body strong {
    color: var(--wcno-dark);
    font-weight: 700;
}

/* - 2g. Event Block - */
.wl-event {
    background: #fff8ee;
    border: 1px solid #f0d8b0;
    border-left: 5px solid var(--wcno-gold);
    border-radius: 0 8px 8px 0;
    padding: 24px 28px;
    margin-bottom: 36px;
}
.wl-event-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--wcno-blue);
    border-bottom: 2px solid var(--wcno-border);
    padding-bottom: 8px;
    margin: 0 0 18px;
}
.wl-event-badge {
    display: inline-block;
    background: var(--wcno-orange-dk);
    color: var(--wcno-white);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.wl-event-name {
    font-size: 19px;
    font-weight: 800;
    color: var(--wcno-dark);
    margin: 0 0 16px;
    line-height: 1.2;
}
.wl-event-row {
    font-size: 14px;
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    align-items: baseline;
    line-height: 1.5;
}
.wl-event-row:last-child {
    margin-bottom: 0;
}
.wl-event-row b {
    color: var(--wcno-orange-dk);
    min-width: 80px;
    flex-shrink: 0;
    font-weight: 700;
}
.wl-event-row a {
    color: var(--wcno-blue-dk);
    font-weight: 600;
    text-decoration: none;
}
.wl-event-row a:hover {
    text-decoration: underline;
}
.wl-event-registration {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0d8b0;
    font-size: 15px;
    line-height: 1.7;
}
.wl-event-registration a {
    color: var(--wcno-blue);
    font-weight: 700;
    text-decoration: none;
}
.wl-event-registration a:hover {
    text-decoration: underline;
}
.wl-event-registration strong {
    color: var(--wcno-dark);
}

/* - 2h. Contact Block - */
.wl-contact {
    background: var(--wcno-light);
    border: 1px solid var(--wcno-border);
    border-left: 5px solid var(--wcno-blue);
    border-radius: 0 8px 8px 0;
    padding: 24px 28px;
    margin-bottom: 36px;
}
.wl-contact-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--wcno-blue);
    border-bottom: 2px solid var(--wcno-border);
    padding-bottom: 8px;
    margin: 0 0 18px;
}
.wl-contact-row {
    font-size: 15px;
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: baseline;
    line-height: 1.6;
}
.wl-contact-row:last-child {
    margin-bottom: 0;
}
.wl-contact-row b {
    color: var(--wcno-dark);
    min-width: 110px;
    flex-shrink: 0;
    font-weight: 700;
}
.wl-contact-row a {
    color: var(--wcno-blue);
    font-weight: 600;
    text-decoration: none;
}
.wl-contact-row a:hover {
    text-decoration: underline;
}
.wl-contact-phone {
    font-size: 20px;
    font-weight: 800;
    color: var(--wcno-orange-dk);
    text-decoration: none;
    display: inline-block;
}
.wl-contact-phone:hover {
    color: var(--wcno-orange-dk);
}
.wl-org-logo {
    display: block;
    max-height: 60px;
    max-width: 240px;
    margin-top: 18px;
    object-fit: contain;
}

/* - 2i. On Demand Listen Bar - */
.wl-listen {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--wcno-dark);
    border-radius: 10px;
    padding: 22px 28px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.wl-listen-icon {
    width: 54px;
    height: 54px;
    background: var(--wcno-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--wcno-white);
    font-size: 20px;
}
.wl-listen-copy {
    flex: 1;
    min-width: 180px;
}
.wl-listen-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #a9b9cc;
    margin-bottom: 3px;
}
.wl-listen-title {
    display: block;
    color: var(--wcno-white);
    font-size: 16px;
    font-weight: 700;
}
.wl-listen-btn {
    display: inline-block;
    background: var(--wcno-orange-dk);
    color: var(--wcno-white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 13px 26px;
    border-radius: 5px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease;
}
.wl-listen-btn:hover {
    background: var(--wcno-orange-deep);
    color: var(--wcno-white);
}

/* - 2j. Tags - */
.wl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.wl-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--wcno-blue-dk);
    background: #eaf3fb;
    border: 1px solid #c3ddf0;
    border-radius: 30px;
    padding: 5px 14px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.wl-tag:hover {
    background: var(--wcno-blue-dk);
    color: var(--wcno-white);
    border-color: var(--wcno-blue);
}

/* - Horizontal Rule - */
.wl-hr {
    border: none;
    border-top: 1px solid var(--wcno-border);
    margin: 36px 0;
}


/* ================================================
   2. WEDNESDAY LIVE - RESPONSIVE
   ================================================ */
@media (max-width: 640px) {
    .wl-guest-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .wl-guest-info {
        text-align: left;
    }
    .wl-listen {
        flex-direction: column;
        align-items: flex-start;
    }
    .wl-listen-btn {
        width: 100%;
        text-align: center;
    }
    .wl-event-row,
    .wl-contact-row {
        flex-direction: column;
        gap: 2px;
    }
    .wl-event-row b,
    .wl-contact-row b {
        min-width: unset;
    }
    .wl-scripture {
        padding: 22px 20px 18px;
    }
}


/* ================================================
   3. PROGRAMS + SCHEDULE
   ================================================ */


/* ================================================
   4. SHARED COMPONENTS (placeholder)
   ================================================ */


/* ================================================
   2b. WEDNESDAY LIVE - ARCHIVE HERO
   ================================================ */

/* - Outer wrap - */
.wla-hero-wrap {
    background: linear-gradient(135deg, var(--wcno-dark) 0%, var(--wcno-dark2) 100%);
    padding: 60px 0 0;
    overflow: hidden;
}

/* - Overline / heading area - */
.wla-hero-overline {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px 40px;
    text-align: center;
}
.wla-hero-overline-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(74, 144, 194, 0.25);
    border: 1px solid rgba(169, 207, 239, 0.45);
    color: var(--wcno-hero-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 30px;
    margin-bottom: 18px;
}
.wla-hero-heading {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 800;
    color: var(--wcno-white);
    line-height: 1.1;
    margin: 0 0 14px;
}
.wla-hero-heading span {
    color: var(--wcno-hero-accent);
    display: block;
}
.wla-hero-sub {
    font-size: 16px;
    color: #c3cedd;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

/* - Magazine grid - */
.wla-hero-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 3px;
    max-width: 1200px;
    margin: 0 auto;
}
.wla-hero-col-main {
    display: flex;
    flex-direction: column;
}
.wla-hero-col-side {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* - Individual panel - */
.wla-hero-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
}
.wla-hero-panel:hover {
    transform: scale(1.01);
    z-index: 2;
}
.wla-hero-panel--large {
    min-height: 480px;
}
.wla-hero-panel--small {
    min-height: 237px;
    flex: 1;
}

/* - Initials fallback inside panel - */
.wla-hero-initials {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(74, 144, 194, 0.3);
    border: 2px solid rgba(74, 144, 194, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wcno-white);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -1px;
}

/* - Panel content - */
.wla-hero-panel-content {
    position: relative;
    padding: 28px;
    z-index: 1;
}
.wla-hero-panel--small .wla-hero-panel-content {
    padding: 20px 22px;
}

/* - Panel pill - */
.wla-hero-panel-pill {
    display: inline-block;
    background: var(--wcno-blue);
    color: var(--wcno-white);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    margin-bottom: 10px;
}

/* - Guest name - */
.wla-hero-panel-name {
    color: var(--wcno-white);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 6px;
}
.wla-hero-panel-name--sm {
    font-size: 17px;
    margin: 0 0 4px;
}

/* - Guest title - */
.wla-hero-panel-title {
    color: #c8d8e8;
    font-size: 13.5px;
    margin: 0 0 8px;
    line-height: 1.4;
}

/* - Date - */
.wla-hero-panel-date {
    color: var(--wcno-hero-accent);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0 0 14px;
}
.wla-hero-panel-date--sm {
    font-size: 10.5px;
    margin: 0 0 10px;
}

/* - Read Story button - */
.wla-hero-panel-btn {
    display: inline-block;
    background: var(--wcno-orange-dk);
    color: var(--wcno-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s ease;
}
.wla-hero-panel-btn--sm {
    font-size: 11px;
    padding: 8px 16px;
}
.wla-hero-panel:hover .wla-hero-panel-btn {
    background: var(--wcno-orange-deep);
}


/* ================================================
   2c. WEDNESDAY LIVE - ARCHIVE FILTER BAR
   ================================================ */

.wla-filter-section {
    background: var(--wcno-white);
    border-bottom: 1px solid var(--wcno-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.wla-filter-bar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.wla-filter-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--wcno-muted);
    flex-shrink: 0;
}
.wla-filter-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}
.wla-filter-select {
    font-size: 13px;
    color: var(--wcno-text);
    border: 1px solid var(--wcno-border);
    border-radius: 4px;
    padding: 7px 12px;
    background: var(--wcno-light);
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}
.wla-filter-select:focus {
    border-color: var(--wcno-blue);
}
.wla-filter-search {
    font-size: 13px;
    color: var(--wcno-text);
    border: 1px solid var(--wcno-border);
    border-radius: 4px;
    padding: 7px 14px;
    background: var(--wcno-light);
    outline: none;
    flex: 1;
    min-width: 200px;
    transition: border-color 0.2s;
}
.wla-filter-search:focus {
    border-color: var(--wcno-blue);
}
.wla-filter-search::placeholder {
    color: var(--wcno-muted);
}
.wla-filter-count {
    font-size: 12px;
    color: var(--wcno-muted);
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}


/* ================================================
   2d. WEDNESDAY LIVE - ARCHIVE CARD GRID
   ================================================ */

.wla-archive-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 72px;
}
.wla-archive-heading {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--wcno-blue);
    margin: 0 0 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.wla-archive-heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--wcno-border);
}
.wla-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

/* - Individual card - */
.wla-card {
    background: var(--wcno-white);
    border: 1px solid var(--wcno-border);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wla-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(26, 37, 53, 0.12);
}

/* Card photo area */
.wla-card-photo {
    height: 200px;
    background: linear-gradient(135deg, var(--wcno-dark) 0%, var(--wcno-dark2) 100%);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.wla-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform 0.3s ease;
}
.wla-card:hover .wla-card-photo img {
    transform: scale(1.04);
}
.wla-card-photo-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 800;
    color: rgba(255,255,255,0.4);
    letter-spacing: -2px;
}
.wla-card-date-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(26, 37, 53, 0.85);
    color: var(--wcno-hero-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 3px;
    backdrop-filter: blur(4px);
}

/* Card body */
.wla-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.wla-card-pill {
    display: inline-block;
    background: #eaf3fb;
    color: var(--wcno-blue);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 3px;
    margin-bottom: 10px;
    align-self: flex-start;
}
.wla-card-guest-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--wcno-dark);
    line-height: 1.25;
    margin: 0 0 5px;
}
.wla-card-guest-title {
    font-size: 13px;
    color: #4a5568;
    line-height: 1.5;
    margin: 0 0 14px;
    flex: 1;
}
.wla-card-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wcno-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-decoration: none;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--wcno-border);
    width: 100%;
}
.wla-card-read .fa,
.wla-card-read [class*="fa-"] {
    transition: transform 0.2s;
}
.wla-card:hover .wla-card-read .fa,
.wla-card:hover .wla-card-read [class*="fa-"] {
    transform: translateX(4px);
}


/* ================================================
   2e. WEDNESDAY LIVE - PAGINATION
   ================================================ */

.wla-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 16px 0 0;
}
.wla-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid var(--wcno-border);
    background: var(--wcno-white);
    color: var(--wcno-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}
.wla-pagination .page-numbers:hover,
.wla-pagination .page-numbers.current {
    background: var(--wcno-blue);
    border-color: var(--wcno-blue);
    color: var(--wcno-white);
}
.wla-pagination .page-numbers.dots {
    border: none;
    background: none;
    pointer-events: none;
}


/* ================================================
   WEDNESDAY LIVE - ARCHIVE RESPONSIVE
   ================================================ */

@media (max-width: 900px) {
    .wla-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    /* Hero stacks vertically */
    .wla-hero-grid {
        grid-template-columns: 1fr;
    }
    .wla-hero-panel--large {
        min-height: 320px;
    }
    .wla-hero-panel--small {
        min-height: 200px;
    }
    .wla-hero-col-side {
        gap: 3px;
    }

    /* Cards single column */
    .wla-card-grid {
        grid-template-columns: 1fr;
    }

    /* Filter bar wraps */
    .wla-filter-bar {
        padding: 12px 16px;
    }
    .wla-filter-controls {
        width: 100%;
    }
    .wla-filter-search {
        min-width: 100%;
    }

    .wla-hero-overline {
        padding: 0 16px 28px;
    }
}


/* ================================================
   3. PROGRAMS + SCHEDULE
   Append into / replace the section-3 placeholder of wcno-custom.css.
   Uses :root vars from section 1.
   ================================================ */

/* - 3a. Program single - */
.wprog-single { max-width: 760px; margin: 0 auto; font-family: 'Open Sans', sans-serif; }
.wprog-breadcrumb { font-size: 12px; letter-spacing: 0.8px; color: var(--wcno-muted); margin-bottom: 20px; }
.wprog-breadcrumb a { color: var(--wcno-blue); text-decoration: none; font-weight: 600; }
.wprog-breadcrumb a:hover { text-decoration: underline; }
.wprog-breadcrumb .separator { margin: 0 6px; color: var(--wcno-border); }
.wprog-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--wcno-blue); color: var(--wcno-white);
    font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
    padding: 5px 14px; border-radius: 3px; margin-bottom: 16px;
}
.wprog-head { display: flex; gap: 22px; align-items: center; margin-bottom: 28px; }
.wprog-img {
    width: 110px; height: 110px; border-radius: 12px; object-fit: cover;
    flex-shrink: 0; border: 1px solid var(--wcno-border);
}
.wprog-img--initials {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--wcno-blue), var(--wcno-dark));
    color: var(--wcno-white); font-size: 32px; font-weight: 800; letter-spacing: -1px;
}
.wprog-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(24px, 4vw, 34px); font-weight: 700;
    color: var(--wcno-dark); line-height: 1.15; margin: 0 0 6px;
}
.wprog-host { font-size: 15px; color: var(--wcno-blue); font-weight: 600; margin: 0; }
.wprog-desc { font-size: 16.5px; line-height: 1.85; color: var(--wcno-text); margin-bottom: 32px; }
.wprog-desc p { margin: 0 0 18px; }
.wprog-contact {
    background: var(--wcno-light); border: 1px solid var(--wcno-border);
    border-left: 5px solid var(--wcno-blue); border-radius: 0 8px 8px 0;
    padding: 24px 28px;
}
.wprog-contact-label {
    font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--wcno-blue); border-bottom: 2px solid var(--wcno-border);
    padding-bottom: 8px; margin: 0 0 18px;
}
.wprog-contact-row { font-size: 15px; display: flex; gap: 14px; margin-bottom: 10px; align-items: baseline; }
.wprog-contact-row:last-child { margin-bottom: 0; }
.wprog-contact-row b { color: var(--wcno-dark); min-width: 120px; flex-shrink: 0; font-weight: 700; }
.wprog-contact-row b .fa-light { color: var(--wcno-orange); margin-right: 6px; }
.wprog-contact-row a { color: var(--wcno-blue); font-weight: 600; text-decoration: none; }
.wprog-contact-row a:hover { text-decoration: underline; }

/* - 3b. Programs grid - */
.wprog-rows { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.wprog-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--wcno-white); border: 1px solid var(--wcno-border);
    border-radius: 10px; padding: 12px 16px; text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wprog-row:hover { border-color: var(--wcno-blue); box-shadow: 0 4px 16px rgba(26,37,53,0.08); }
.wprog-row-tile {
    width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--wcno-blue), var(--wcno-dark));
}
.wprog-row-tile img { width: 100%; height: 100%; object-fit: cover; }
.wprog-row-initials {
    font-size: 15px; font-weight: 800; letter-spacing: -0.5px;
    color: rgba(255,255,255,0.85);
}
.wprog-row-info { flex: 1; min-width: 0; }
.wprog-row-name { display: block; font-size: 15px; font-weight: 800; color: var(--wcno-dark); line-height: 1.25; }
.wprog-row-host { display: block; font-size: 13px; color: var(--wcno-blue-dk); font-weight: 600; margin-top: 2px; }
.wprog-row-read {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    color: var(--wcno-blue); font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
}
.wprog-row-read .fa-solid { transition: transform 0.15s ease; font-size: 11px; }
.wprog-row:hover .wprog-row-read .fa-solid { transform: translateX(3px); }
.wprog-none { text-align: center; color: var(--wcno-muted); padding: 28px 0; }

@media (max-width: 540px) {
    .wprog-row-read span { display: none; }
    .wprog-row-name { font-size: 14px; }
}

/* - 3c. Schedule table (four-column day-group view) - */
.wsched { max-width: 920px; margin: 0 auto; font-family: 'Open Sans', sans-serif; }
.wsched-table {
    border: 1px solid var(--wcno-border); border-radius: 12px; overflow: hidden;
    background: var(--wcno-white);
}
.wsched-thead, .wsched-row {
    display: grid;
    grid-template-columns: 150px 1.4fr 1.4fr 1.6fr;
    align-items: center;
}
.wsched-thead {
    background: var(--wcno-dark); color: var(--wcno-white);
}
.wsched-th {
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 14px 18px;
}
.wsched-row {
    border-top: 1px solid var(--wcno-border);
    text-decoration: none; transition: background 0.12s ease;
}
.wsched-row:hover { background: var(--wcno-light); }
.wsched-cell { padding: 13px 18px; font-size: 14px; color: var(--wcno-text); min-width: 0; }

/* Column 1: icon + time + day */
.wsched-cell-time { display: flex; align-items: center; gap: 11px; }
.wsched-ico {
    width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #eef5fb; color: var(--wcno-blue); font-size: 14px;
}
.wsched-ico--mic { background: linear-gradient(135deg, var(--wcno-blue), var(--wcno-dark)); color: var(--wcno-white); }
.wsched-time { font-size: 13px; font-weight: 700; color: var(--wcno-dark); line-height: 1.2; }
.wsched-cell-time > span:not(.wsched-ico) { display: inline-block; }
.wsched-cell-time { flex-wrap: wrap; }
.wsched-day {
    display: block; width: 100%; padding-left: 45px; margin-top: 1px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--wcno-muted);
}

/* Program / host / contact */
.wsched-prog { font-weight: 700; }
.wsched-prog a { color: var(--wcno-dark); text-decoration: none; }
.wsched-prog a:hover { color: var(--wcno-blue); text-decoration: underline; }
.wsched-host { color: #4a5568; }
.wsched-contact { font-size: 13px; }
.wsched-contact a { color: var(--wcno-blue); text-decoration: none; font-weight: 600; }
.wsched-contact a:hover { text-decoration: underline; }
.wsched-contact .fa-solid { font-size: 9px; }
.wsched-sep { color: var(--wcno-border); margin: 0 7px; }

/* Available slot rows: soft orange, subtle */
.wsched-row--avail { background: #fffaf2; }
.wsched-row--avail:hover { background: #fff3e0; }
.wsched-row--avail .wsched-ico { background: #fbe9cf; color: var(--wcno-orange-dk); }
.wsched-prog--avail { color: var(--wcno-orange-dk); font-weight: 600; font-style: italic; }
.wsched-contact--avail {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--wcno-orange-dk); font-weight: 700; font-size: 12px;
    letter-spacing: 0.4px;
}
.wsched-contact--avail .fa-solid { font-size: 10px; transition: transform 0.15s ease; }
.wsched-row--avail:hover .wsched-contact--avail .fa-solid { transform: translateX(3px); }

.wsched-empty { padding: 28px 18px; text-align: center; color: var(--wcno-muted); font-size: 14px; }
.wsched-empty a { color: var(--wcno-blue); font-weight: 600; text-decoration: none; }

@media (max-width: 760px) {
    .wprog-head { flex-direction: column; text-align: center; }
    .wprog-contact-row { flex-direction: column; gap: 2px; }
    .wprog-contact-row b { min-width: 0; }
    /* Stack the table into cards on mobile */
    .wsched-thead { display: none; }
    .wsched-row { grid-template-columns: 1fr; gap: 0; padding: 6px 0 12px; }
    .wsched-cell { padding: 4px 16px; }
    .wsched-cell-time { padding-top: 12px; }
    .wsched-host:empty { display: none; }
    .wsched-host:not(:empty)::before { content: "Host: "; color: var(--wcno-muted); font-weight: 600; }
    .wsched-contact:not(.wsched-contact--avail):not(:empty)::before { content: "Contact: "; color: var(--wcno-muted); font-weight: 600; font-size: 12px; }
}

/* ================================================
   5. LIVE METADATA - NOW PLAYING + PLAYED TODAY
   Append to wcno-custom.css. Uses :root vars from section 1.
   ================================================ */

/* - 5a. Now Playing Card - */
.wcno-np {
    background: var(--wcno-white);
    border: 1px solid var(--wcno-border);
    border-radius: 14px;
    padding: 18px;
    max-width: 330px;
    box-shadow: 0 12px 40px rgba(26, 37, 53, 0.12);
}
.wcno-np-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.wcno-np-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fdeaea;
    color: #d6342c;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 50px;
}
.wcno-np-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d6342c;
    display: inline-block;
    animation: wcno-pulse 1.6s ease-in-out infinite;
}
@keyframes wcno-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.wcno-np-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--wcno-muted);
}
.wcno-np-art {
    width: 100%;
    height: 150px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fbe9cf 0%, #f7d9a8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    transition: background 0.4s ease;
}
.wcno-np.is-program .wcno-np-art {
    background: linear-gradient(135deg, var(--wcno-dark) 0%, var(--wcno-dark2) 100%);
}
.wcno-np-ico {
    font-size: 46px;
    color: var(--wcno-orange);
    line-height: 1;
}
.wcno-np.is-program .wcno-np-ico { color: var(--wcno-gold); }
.wcno-np-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--wcno-dark);
    text-align: center;
    line-height: 1.25;
    margin-bottom: 4px;
}
.wcno-np-sub {
    font-size: 14px;
    color: var(--wcno-blue);
    font-weight: 600;
    text-align: center;
}
.wcno-np-tagrow { text-align: center; margin-top: 8px; min-height: 8px; }
.wcno-np-tag {
    display: inline-block;
    background: #fbe9cf;
    color: var(--wcno-orange-dk);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 10px;
    border-radius: 50px;
}
.wcno-np-link {
    font-size: 13px;
    color: var(--wcno-blue);
    text-decoration: none;
    font-weight: 600;
}
.wcno-np-link:hover { text-decoration: underline; }
.wcno-np-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--wcno-border);
    overflow: hidden;
    margin-top: 18px;
}
.wcno-np-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--wcno-orange);
    transition: width 1s linear;
}
.wcno-np.is-program .wcno-np-fill { background: var(--wcno-gold); }


/* - 5b. Played Today Timeline - */
.wcno-pt {
    max-width: 720px;
    margin: 0 auto;
    font-family: 'Open Sans', sans-serif;
}
.wcno-pt-head { margin-bottom: 18px; }
.wcno-pt-h {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--wcno-dark);
    margin: 0 0 4px;
}
.wcno-pt-note { font-size: 14px; color: var(--wcno-muted); }
.wcno-pt-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.wcno-pt-search {
    flex: 1;
    min-width: 220px;
    font-size: 14px;
    color: var(--wcno-text);
    border: 1px solid var(--wcno-border);
    border-radius: 6px;
    padding: 9px 14px;
    background: var(--wcno-light);
    outline: none;
    transition: border-color 0.2s;
}
.wcno-pt-search:focus { border-color: var(--wcno-blue); }
.wcno-pt-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--wcno-muted);
    cursor: pointer;
    white-space: nowrap;
}
.wcno-pt-hour {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--wcno-muted);
    margin: 18px 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--wcno-border);
}
.wcno-pt-song {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--wcno-white);
    border: 1px solid var(--wcno-border);
    border-radius: 8px;
    margin-bottom: 7px;
}
.wcno-pt-time {
    font-size: 12px;
    color: var(--wcno-muted);
    width: 68px;
    flex-shrink: 0;
    font-weight: 600;
}
.wcno-pt-ico {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #fbe9cf;
    color: var(--wcno-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.wcno-pt-meta { min-width: 0; flex: 1; }
.wcno-pt-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--wcno-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wcno-pt-tag {
    display: inline-block;
    background: #fbe9cf;
    color: var(--wcno-orange-dk);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 50px;
    margin-left: 8px;
    vertical-align: middle;
}
.wcno-pt-artist {
    font-size: 13px;
    color: #4a5568;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wcno-pt-prog {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 5px 14px;
    margin-bottom: 7px;
    opacity: 0.7;
}
.wcno-pt-progname {
    font-size: 13px;
    font-style: italic;
    color: var(--wcno-muted);
}
.wcno-pt-empty {
    text-align: center;
    padding: 36px 0;
    color: var(--wcno-muted);
    font-size: 14px;
}

@media (max-width: 640px) {
    .wcno-pt-time { width: 58px; font-size: 11px; }
    .wcno-pt-search { min-width: 100%; }
}

/* ================================================
   6. PRAYER & SHARE
   Append to wcno-custom.css. Uses :root vars from section 1.
   Reuses .wl-scripture (section 2d) for the verse banners.
   ================================================ */

.wps { max-width: 760px; margin: 0 auto; font-family: 'Open Sans', sans-serif; }

.wps-head { text-align: center; margin-bottom: 28px; }
.wps-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--wcno-orange-dk); color: var(--wcno-white);
    font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
    padding: 5px 14px; border-radius: 50px; margin-bottom: 14px;
}
.wps-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(26px, 5vw, 40px); font-weight: 700;
    color: var(--wcno-dark); line-height: 1.15; margin: 0;
}

/* - Thermometer - */
.wps-meter {
    border: 1px solid var(--wcno-border); border-radius: 14px;
    padding: 28px 32px; margin-bottom: 36px; text-align: center;
    background: var(--wcno-light);
}
.wps-meter.is-active { border-color: var(--wcno-orange); background: #fff8ee; }
.wps-meter-status { margin-bottom: 14px; }
.wps-live {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fdeaea; color: #d6342c;
    font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    padding: 4px 11px; border-radius: 50px; margin-right: 8px;
}
.wps-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #d6342c;
    display: inline-block; animation: wcno-pulse 1.6s ease-in-out infinite;
}
.wps-meter-head {
    font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--wcno-blue);
}
.wps-meter-head .fa-light,
.wps-meter-head .fa-solid { color: var(--wcno-orange); margin-right: 4px; }
.wps-meter.is-closed .wps-meter-head {
    display: inline-flex; align-items: center; gap: 7px;
    background: #e8f5ee; color: #0f6e56;
    font-size: 11px; letter-spacing: 0.6px; text-transform: none;
    padding: 5px 14px; border-radius: 50px;
}
.wps-meter.is-closed .wps-meter-head .fa-solid { color: #0f6e56; margin-right: 0; }
.wps-numbers { margin-bottom: 16px; }
.wps-raised {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(30px, 6vw, 46px); font-weight: 700; color: var(--wcno-dark);
    display: block; line-height: 1.1; margin-bottom: 4px;
}
.wps-of { font-size: 14px; color: var(--wcno-muted); }
.wps-bar {
    height: 16px; border-radius: 50px; background: var(--wcno-border);
    overflow: hidden; margin: 8px auto 6px; max-width: 420px;
}
.wps-fill {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--wcno-gold), var(--wcno-orange));
    border-radius: 50px; transition: width 0.8s ease;
}
.wps-pct { font-size: 13px; font-weight: 700; color: var(--wcno-orange-dk); letter-spacing: 0.3px; margin-top: 10px; }

.wps-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.wps-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--wcno-orange-dk); color: var(--wcno-white);
    font-size: 14px; font-weight: 700; letter-spacing: 0.3px;
    padding: 12px 22px; border-radius: 50px; text-decoration: none;
    transition: background 0.2s ease;
}
.wps-btn:hover { background: var(--wcno-orange-deep); color: var(--wcno-white); }
.wps-btn--alt { background: transparent; border: 2px solid var(--wcno-blue-dk); color: var(--wcno-blue-dk); padding: 10px 20px; }
.wps-btn--alt:hover { background: var(--wcno-blue-dk); color: var(--wcno-white); }

.wps-next {
    margin-top: 14px; font-size: 14px; color: var(--wcno-muted);
    display: inline-flex; align-items: center; gap: 7px;
}
.wps-next .fa-light { color: var(--wcno-orange); }
.wps-next--solo { display: flex; justify-content: center; margin: 0 0 36px; }

/* - Scripture banners (reuse .wl-scripture) - */
/* Scripture banners use the base .wl-scripture style (now light sitewide). */
.wps-scripture { margin-bottom: 32px; }

/* - Prose body - */
.wps-body { font-size: 16.5px; line-height: 1.85; color: var(--wcno-text); margin-bottom: 32px; }
.wps-body p { margin: 0 0 18px; }
.wps-body p:last-child { margin: 0; }
.wps-body a { color: var(--wcno-blue); font-weight: 600; text-decoration: none; }
.wps-body a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .wps-meter { padding: 22px 18px; }
    .wps-cta { flex-direction: column; }
    .wps-btn, .wps-btn--alt { width: 100%; justify-content: center; }
}

/* ================================================
   7. FEATURED EVENTS  (wcno-events-* / wcno-event-*)
   Pure-CSS carousel: horizontal scroll-snap, no JS.
   ================================================ */
.wcno-events-carousel-section { background: var(--wcno-light); padding: 3rem 0; border-bottom: 1px solid var(--wcno-border); font-family: 'Open Sans', sans-serif; }
.wcno-events-container { max-width: 1400px; margin: 0 auto; padding: 0 4%; }
.wcno-events-header { text-align: center; margin-bottom: 2.5rem; }
.wcno-events-badge { display: inline-block; background: rgba(232,146,45,.1); color: var(--wcno-orange-dk); padding: .5rem 1.25rem; border-radius: 50px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1rem; border: 1px solid rgba(232,146,45,.25); }
.wcno-events-title { font-family: 'Playfair Display', Georgia, serif; font-size: 2.5rem; font-weight: 700; color: var(--wcno-dark); margin: 0 0 .75rem; }
.wcno-events-title span { color: var(--wcno-orange); }
.wcno-events-sub { font-size: 1.1rem; color: var(--wcno-text); max-width: 600px; margin: 0 auto; }
.wcno-events-empty { text-align: center; padding: 2rem 0; color: var(--wcno-muted); font-size: .95rem; }
.wcno-events-wrapper { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: .75rem; }
.wcno-events-wrapper::-webkit-scrollbar { height: 8px; }
.wcno-events-wrapper::-webkit-scrollbar-thumb { background: var(--wcno-border); border-radius: 4px; }
.wcno-events-carousel { display: flex; gap: 1.5rem; }
.wcno-event-card { flex: 0 0 300px; scroll-snap-align: start; background: var(--wcno-white); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.06); border: 1px solid var(--wcno-border); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.wcno-event-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,.12); border-color: var(--wcno-orange); }
.wcno-event-image { height: 160px; background: linear-gradient(135deg, var(--wcno-blue) 0%, var(--wcno-dark) 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.wcno-event-image img { width: 100%; height: 100%; object-fit: cover; }
.wcno-event-icon { font-size: 3rem; }
.wcno-event-date-badge { position: absolute; top: 1rem; left: 1rem; background: var(--wcno-orange); color: var(--wcno-white); padding: .5rem .75rem; border-radius: 8px; text-align: center; font-weight: 700; box-shadow: 0 4px 15px rgba(0,0,0,.18); }
.wcno-event-date-badge .day { font-size: 1.5rem; line-height: 1; display: block; }
.wcno-event-date-badge .month { font-size: .65rem; text-transform: uppercase; letter-spacing: 1px; }
.wcno-event-content { padding: 1.25rem; }
.wcno-event-card-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; font-weight: 600; margin: 0 0 .5rem; color: var(--wcno-dark); line-height: 1.3; }
.wcno-event-location { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--wcno-muted); margin: 0; }
.wcno-event-link { display: inline-block; margin-top: .75rem; color: var(--wcno-blue); text-decoration: none; font-weight: 600; font-size: .85rem; transition: color .2s ease; }
.wcno-event-link:hover { color: var(--wcno-orange-dk); }
.wcno-view-all-events { text-align: center; margin-top: 2rem; }
.wcno-view-all-btn { display: inline-flex; align-items: center; gap: .5rem; background: transparent; border: 2px solid var(--wcno-blue-dk); color: var(--wcno-blue-dk); padding: .875rem 2rem; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .5px; transition: all .3s ease; }
.wcno-view-all-btn:hover { background: var(--wcno-blue); color: var(--wcno-white); }

@media (max-width: 768px) { .wcno-event-card { flex: 0 0 85%; } }

/* ================================================
   8. RECENTLY PLAYED  (wcno-playlist__*)
   ================================================ */
.wcno-playlist { max-width: 760px; margin: 0 auto; color: var(--wcno-dark); }
.wcno-playlist__bar { position: relative; margin-bottom: 1.25rem; }
.wcno-playlist__search-icon { position: absolute; z-index: 2; left: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--wcno-muted); font-size: .95rem; pointer-events: none; }
.wcno-playlist__search { width: 100%; box-sizing: border-box; padding: .85rem 1rem .85rem 3rem !important; font-size: 1rem; color: inherit; background: var(--wcno-white); border: 1px solid var(--wcno-border); border-radius: 999px; outline: none; transition: border-color .15s, box-shadow .15s; }
.wcno-playlist__search:focus { border-color: var(--wcno-orange); box-shadow: 0 0 0 3px rgba(232,146,45,.15); }
.wcno-playlist__meta { margin: .25rem .25rem 1rem; font-size: .82rem; color: var(--wcno-muted); }
.wcno-playlist__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--wcno-border); border-radius: 16px; overflow: hidden; background: var(--wcno-white); }
.wcno-playlist__item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--wcno-border); }
.wcno-playlist__item:last-child { border-bottom: none; }
.wcno-playlist__icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 12px; background: var(--wcno-light); color: var(--wcno-orange); font-size: 1.15rem; overflow: hidden; box-shadow: 0 3px 12px rgba(26,37,53,.12); }
.wcno-playlist__icon--img { background: var(--wcno-white); }
.wcno-playlist__img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.wcno-playlist__text { min-width: 0; flex: 1 1 auto; }
.wcno-playlist__title { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 1.08rem; font-weight: 700; line-height: 1.25; color: var(--wcno-dark); }
.wcno-playlist__artist { display: block; margin-top: .25rem; color: var(--wcno-blue-dk); font-size: .9rem; font-weight: 600; }
.wcno-playlist__album { display: block; margin-top: .18rem; color: var(--wcno-muted); font-size: .76rem; }
.wcno-playlist__time { flex: 0 0 auto; color: var(--wcno-muted); font-size: .8rem; text-align: right; }
.wcno-playlist__preview { flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--wcno-orange-dk); color: #fff; cursor: pointer; box-shadow: 0 3px 10px rgba(176,94,0,.25); }
.wcno-playlist__preview:hover, .wcno-playlist__preview.is-playing { background: var(--wcno-blue-dk); }
.wcno-playlist__preview:focus-visible { outline: 3px solid rgba(46,109,164,.35); outline-offset: 2px; }

/* Keep Hello Elementor's default magenta button hover out of the WCNO palette. */
body [type="button"]:hover,
body [type="button"]:focus,
body [type="submit"]:hover,
body [type="submit"]:focus,
body button:hover,
body button:focus {
    background-color: var(--wcno-blue-dk);
    color: var(--wcno-white);
}

/* A self-contained SVG icon avoids theme icon-font and pseudo-element
   collisions while keeping the control large enough to tap comfortably. */
body .wcno-playlist__preview {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0 !important;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: var(--wcno-orange-dk) !important;
    border: 0 !important;
    color: var(--wcno-white) !important;
}
body .wcno-playlist__preview:hover,
body .wcno-playlist__preview:focus,
body .wcno-playlist__preview.is-playing {
    background-color: var(--wcno-blue-dk) !important;
    color: var(--wcno-white) !important;
}
body .wcno-playlist__preview > i { display: none; }
body .wcno-playlist__preview svg { display: block; width: 24px; height: 24px; fill: currentColor; }

/* Elementor's default accent is magenta. Give every WCNO control an explicit
   resting paint so that color cannot leak through before hover or focus. */
body .wcno-pr-submit,
body .wla-loadmore {
    background-color: var(--wcno-orange-dk) !important;
    border-color: var(--wcno-orange-dk) !important;
    color: var(--wcno-white) !important;
}
body .wcno-ch-near {
    background-color: var(--wcno-light) !important;
    border-color: var(--wcno-border) !important;
    color: var(--wcno-blue-dk) !important;
}
body .wcno-album-art,
body .wcno-slider-dot,
body .wcno-hamburger,
body .wcno-offcanvas__overlay {
    border-color: transparent !important;
}
body .wcno-album-art { color: var(--wcno-blue-dk) !important; }
body .wcno-hamburger { color: var(--wcno-dark) !important; }
body .wcno-slider-dot { color: var(--wcno-white) !important; }
body .e-n-tab-title { border-color: transparent !important; }

/* Compact homepage hero Now Playing card. These scoped rules intentionally
   outrank the older Elementor inline component styles. */
body .wcno-hero .wcno-now-playing {
    width: 250px;
    padding: 1rem;
    border-radius: 16px;
    box-shadow: 0 16px 45px rgba(0,0,0,.22);
}
body .wcno-hero .wcno-now-playing-header { margin-bottom: .8rem; }
body .wcno-hero .wcno-album-art {
    height: 135px;
    margin-bottom: .75rem;
    border-radius: 12px;
}
body .wcno-hero .wcno-np-artwork {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .25s ease;
}
body .wcno-hero .wcno-album-art.has-artwork .wcno-np-artwork { opacity: 1; }
body .wcno-hero .wcno-album-art.has-artwork::before { display: none; }
body .wcno-hero .wcno-play-badge { width: 54px; height: 54px; }
body .wcno-hero .wcno-play-badge svg { width: 23px; height: 23px; }
body .wcno-hero .wcno-song-info { margin-bottom: .8rem; }
body .wcno-hero .wcno-song-title { font-size: 1.08rem; margin-bottom: .25rem; }
body .wcno-hero .wcno-artist-name { font-size: .84rem; }
@media (max-width: 992px) {
    body .wcno-hero .wcno-now-playing { width: 100%; max-width: 250px; }
}

.wcno-inquiry-inline { padding: 3.5rem 5%; background: var(--wcno-light); }
.wcno-inquiry-inline--form-only { padding-top: 1rem; }
.wcno-inquiry-inline__inner { max-width: 900px; margin: 0 auto; }
.wcno-inquiry-inline__inner > h2 { margin: 0 0 .5rem; text-align: center; font-family: 'Playfair Display', Georgia, serif; color: var(--wcno-dark); }
.wcno-inquiry-inline__inner > p { margin: 0 0 1.5rem; text-align: center; color: var(--wcno-muted); }

/* Font Awesome compatibility: Elementor bundles FA5, while WCNO's custom
   components also use several FA6 class names. Map those aliases to the local
   solid font so icons never collapse into blank/zero-width elements. */
i.fa-solid::before,
i.fa-light::before {
    display: inline-block;
    font-family: "Font Awesome 5 Free" !important;
    font-style: normal;
    font-weight: 900 !important;
    line-height: 1;
}
.fa-radio::before { content: "\f519"; }
.fa-hands-praying::before { content: "\f684"; }
.fa-magnifying-glass::before { content: "\f002"; }
.fa-map-location-dot::before { content: "\f5a0"; }
.fa-location-crosshairs::before { content: "\f05b"; }
.fa-location-dot::before { content: "\f3c5"; }
.fa-diamond-turn-right::before { content: "\f5eb"; }
.fa-calendar-days::before { content: "\f073"; }
.fa-pen-to-square::before { content: "\f044"; }
.fa-comment-dots::before { content: "\f4ad"; }
.fa-hand-holding-heart::before { content: "\f4be"; }
.fa-circle-check::before { content: "\f058"; }
.fa-phone::before { content: "\f095"; }
.fa-credit-card::before { content: "\f09d"; }
.fa-heart::before { content: "\f004"; }
.fa-calendar::before { content: "\f133"; }
.fa-desktop::before { content: "\f108"; }
.fa-chevron-down::before { content: "\f078"; }
.fa-handshake::before { content: "\f2b5"; }
.fa-arrow-up-right-from-square::before { content: "\f35d"; }
.fa-church::before { content: "\f51d"; }
.fa-arrow-right::before { content: "\f061"; }
.fa-clock::before { content: "\f017"; }
.fa-store::before { content: "\f54e"; }
.fa-sun::before { content: "\f185"; }
.fa-moon::before { content: "\f186"; }
.fa-user-check::before { content: "\f4fc"; }
.fa-calendar-check::before { content: "\f274"; }
.fa-music::before { content: "\f001"; }
.fa-envelope::before { content: "\f0e0"; }
.fa-microphone::before { content: "\f130"; }

.wprog-img--mic {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wcno-blue), var(--wcno-blue-dk));
    color: var(--wcno-white);
    font-size: 38px;
}
.wprog-img--mic i { color: inherit; font-size: inherit; }
.wcno-event-icon .fa-calendar-days { color: var(--wcno-orange-dk); }

/* Give editable hero titles enough room to remain on one line on desktop. */
body .wcno-hero .wcno-hero-content {
    max-width: 1600px;
    padding-left: 4%;
    padding-right: 4%;
    gap: 2rem;
}
body .wcno-hero .wcno-hero-text { max-width: 900px; }
body .wcno-hero .wcno-hero-title {
    font-size: clamp(2.1rem, 2.3vw, 2.25rem);
    line-height: 1.1;
}
@media (max-width: 1100px) {
    body .wcno-hero .wcno-hero-text { max-width: 100%; }
    body .wcno-hero .wcno-hero-title { font-size: clamp(2rem, 5vw, 2.35rem); }
}
.wcno-playlist__catalog { flex: 0 0 auto; color: var(--wcno-blue-dk); font-size: .75rem; font-weight: 700; }
@media (max-width: 560px) { .wcno-playlist__icon { width: 58px; height: 58px; } .wcno-playlist__time { font-size: .72rem; max-width: 72px; } }

/* Live audio player — .wcno-listen (js/wcno-live-audio.js) */
.wcno-listen { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; border: none; font: inherit; font-weight: 700; color: var(--wcno-white); background: var(--wcno-orange-dk); border-radius: 999px; padding: .6rem 1.15rem; line-height: 1; transition: background .15s, transform .05s, box-shadow .15s; }
.wcno-listen:hover { box-shadow: 0 4px 14px rgba(232,146,45,.35); }
.wcno-listen:active { transform: translateY(1px); }
.wcno-listen:focus-visible { outline: 3px solid rgba(74,144,194,.5); outline-offset: 2px; }
.wcno-listen__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; }
.wcno-listen.is-playing { background: var(--wcno-blue-dk); }
.wcno-listen.is-loading { opacity: .85; cursor: progress; }
.wcno-listen--compact { padding: .4rem .5rem; font-size: .82rem; }
.wcno-listen--compact .wcno-listen__icon { width: 1em; }
.wcno-np-listen { margin-left: auto; }

/* Add to Home Screen — .wcno-install (inc/install-app.php) */
.wcno-install { max-width: 960px; margin: 0 auto; color: var(--wcno-dark); }
.wcno-install__intro { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.wcno-install__logo { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 14px; object-fit: cover; box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.wcno-install__heading { margin: 0 0 .25rem; font-size: 1.5rem; line-height: 1.15; }
.wcno-install__lead { margin: 0; color: var(--wcno-muted); font-size: .96rem; }
.wcno-install__stores { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.25rem; }
.wcno-install__store { display: inline-flex; align-items: center; gap: 0.7rem; background: #1a2535; color: #fff; text-decoration: none; border-radius: 12px; padding: 0.6rem 1.15rem; transition: transform .15s, box-shadow .15s; }
.wcno-install__store:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.2); color: #fff; }
.wcno-install__store-icon { font-size: 1.7rem; line-height: 1; }
.wcno-install__store-text { display: flex; flex-direction: column; line-height: 1.1; }
.wcno-install__store-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.wcno-install__store-v { font-size: 1.05rem; font-weight: 700; }
.wcno-install__or { margin: 0 0 1.25rem; color: var(--wcno-muted); font-weight: 600; font-size: .92rem; }
.wcno-install__section { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--wcno-border); }
.wcno-install__section:last-child { border-bottom: none; }
.wcno-install__subhead { margin: 0 0 .3rem; font-size: 1.15rem; }
.wcno-install__note { margin: 0 0 1rem; color: var(--wcno-muted); font-size: .92rem; }
.wcno-install__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.wcno-install__card { background: var(--wcno-white); border: 1px solid var(--wcno-border); border-radius: 16px; padding: 1.15rem 1.25rem; }
.wcno-install__card-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .85rem; padding-bottom: .75rem; border-bottom: 1px solid var(--wcno-border); }
.wcno-install__os-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--wcno-light); color: var(--wcno-orange); font-size: 1.05rem; }
.wcno-install__os { font-weight: 700; }
.wcno-install__badge { margin-left: auto; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--wcno-blue); background: rgba(74,144,194,.12); border-radius: 999px; padding: .2rem .6rem; }
.wcno-install__steps { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .55rem; }
.wcno-install__steps li { font-size: .92rem; line-height: 1.4; }
.wcno-install__steps li::marker { color: var(--wcno-orange); font-weight: 700; }

/* Prayer Requests — .wcno-pr* (inc/prayer-requests.php) */
.wcno-pr-form { max-width: 640px; margin: 0 auto 2rem; color: var(--wcno-dark); }
.wcno-pr-form__heading { margin: 0 0 .5rem; font-size: 1.4rem; }
.wcno-pr-form__intro { margin: 0 0 1.15rem; color: var(--wcno-muted); font-size: .92rem; }
.wcno-pr-field { display: block; margin-bottom: 1rem; }
.wcno-pr-label { display: block; margin-bottom: .35rem; font-weight: 700; font-size: .9rem; }
.wcno-pr-label small { font-weight: 400; color: var(--wcno-muted); }
.wcno-pr-field input, .wcno-pr-field textarea { width: 100%; box-sizing: border-box; padding: .75rem .9rem; font: inherit; color: inherit; background: var(--wcno-white); border: 1px solid var(--wcno-border); border-radius: 12px; outline: none; transition: border-color .15s, box-shadow .15s; }
.wcno-pr-field input:focus, .wcno-pr-field textarea:focus { border-color: var(--wcno-orange); box-shadow: 0 0 0 3px rgba(232,146,45,.15); }
.wcno-pr-check { display: flex; align-items: center; gap: .55rem; margin: .25rem 0 1.25rem; font-size: .92rem; }
.wcno-pr-submit { display: inline-flex; align-items: center; gap: .5rem; border: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--wcno-white); background: var(--wcno-orange); border-radius: 999px; padding: .8rem 1.6rem; transition: background .15s, box-shadow .15s; }
.wcno-pr-submit:hover { box-shadow: 0 4px 14px rgba(232,146,45,.35); }
.wcno-pr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wcno-pr-notice { padding: .8rem 1rem; border-radius: 12px; margin-bottom: 1.1rem; font-size: .92rem; }
.wcno-pr-notice--ok { background: rgba(74,144,194,.12); color: var(--wcno-blue); }
.wcno-pr-notice--err { background: rgba(200,60,60,.1); color: #b33; }
.wcno-pr-wall { max-width: 760px; margin: 0 auto; color: var(--wcno-dark); }
.wcno-pr-search { position: relative; margin-bottom: 1.25rem; }
.wcno-pr-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--wcno-muted); font-size: .95rem; }
.wcno-pr-search input { width: 100%; box-sizing: border-box; padding: .8rem 1rem .8rem 2.6rem; font: inherit; background: var(--wcno-white); border: 1px solid var(--wcno-border); border-radius: 999px; outline: none; }
.wcno-pr-search input:focus { border-color: var(--wcno-orange); box-shadow: 0 0 0 3px rgba(232,146,45,.15); }
.wcno-pr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.wcno-pr-item { background: var(--wcno-white); border: 1px solid var(--wcno-border); border-radius: 16px; padding: 1.1rem 1.25rem; }
.wcno-pr-item.is-praise { border-color: rgba(74,144,194,.4); background: rgba(74,144,194,.05); }
.wcno-pr-item__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.wcno-pr-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--wcno-light); color: var(--wcno-orange); }
.wcno-pr-item__name { font-weight: 700; }
.wcno-pr-item__badge { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--wcno-blue); background: rgba(74,144,194,.12); border-radius: 999px; padding: .15rem .55rem; }
.wcno-pr-item__date { margin-left: auto; font-size: .78rem; color: var(--wcno-muted); }
.wcno-pr-item__body { font-size: .95rem; line-height: 1.5; }
.wcno-pr-item__body p { margin: 0 0 .5rem; }
.wcno-pr-empty { text-align: center; color: var(--wcno-muted); padding: 2rem 1rem; }

/* Prayer page hero ([wcno_prayer_hero]) */
.wcno-prayhero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); background-size: cover; background-position: center; color: #fff; padding: 4rem 6%; text-align: center; }
.wcno-prayhero-inner { position: relative; max-width: 720px; margin: 0 auto; }
.wcno-prayhero-kicker { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.15); color: var(--wcno-hero-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; border-radius: 999px; padding: .4rem 1rem; }
.wcno-prayhero-title { font-family: 'Playfair Display', Georgia, serif; font-size: 2.6rem; line-height: 1.12; margin: 1rem 0 .6rem; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.wcno-prayhero-sub { margin: 0 auto 1.4rem; max-width: 580px; color: rgba(255,255,255,.93); font-size: 1.05rem; line-height: 1.6; }
.wcno-prayhero-verse { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.1rem; color: #fff; margin: 0 auto; max-width: 540px; }
.wcno-prayhero-verse cite { display: block; font-style: normal; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--wcno-hero-accent); margin-top: .5rem; }
@media (max-width: 600px) { .wcno-prayhero-title { font-size: 2rem; } .wcno-prayhero { padding: 3rem 5%; } }

/* Praise Reports wall — celebratory gold/green look, distinct from the prayer wall */
.wcno-pr-wall--praise .wcno-pr-search i { color: var(--wcno-orange); }
.wcno-pr-wall--praise .wcno-pr-item,
.wcno-pr-wall--praise .wcno-pr-item.is-praise { background: linear-gradient(180deg, #fffdf6 0%, #fbf7ec 100%); border-color: rgba(232,146,45,.35); border-left: 4px solid var(--wcno-orange); }
.wcno-pr-wall--praise .wcno-pr-item__icon { background: rgba(232,146,45,.16); color: var(--wcno-orange); }
.wcno-pr-wall--praise .wcno-pr-item__badge { color: #2e7d4f; background: rgba(46,125,79,.14); }
.wcno-pr-wall--praise .wcno-pr-item__date { color: #a97b33; }

/* Schedule / program-page hero ([wcno_schedule_hero]) */
.wcno-schero { position: relative; border-radius: 0; overflow: hidden; background-size: cover; background-position: center; color: #fff; padding: 3rem 6%; text-align: center; }
.wcno-schero-inner { position: relative; max-width: 720px; margin: 0 auto; }
.wcno-schero-kicker { display: inline-block; background: rgba(255,255,255,.15); color: var(--wcno-hero-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; border-radius: 999px; padding: .35rem 1rem; }
.wcno-schero-title { font-family: 'Playfair Display', Georgia, serif; font-size: 2.6rem; line-height: 1.12; margin: 1rem 0 .5rem; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.wcno-schero-sub { margin: 0 auto 1.5rem; max-width: 560px; color: rgba(255,255,255,.92); font-size: 1.05rem; }
.wcno-schero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.4rem; }
.wcno-schero-listen { display: inline-flex; align-items: center; gap: .6rem; background: linear-gradient(135deg, #BF6608 0%, #9D5500 100%); color: #fff; text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: .9rem; border-radius: 999px; padding: .85rem 1.8rem; box-shadow: 0 4px 18px rgba(232,146,45,.45); border: none; cursor: pointer; transition: transform .15s; }
.wcno-schero-listen:hover { transform: translateY(-2px); color: #fff; }
.wcno-schero-listen.is-playing { background: linear-gradient(135deg, #2e6da4 0%, #2E5A82 100%); }
.wcno-schero-now { display: inline-flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.9); font-size: .9rem; }
.wcno-schero-dot { width: 9px; height: 9px; border-radius: 50%; background: #FF4444; animation: wcnoPulse 1.5s ease-in-out infinite; }
@keyframes wcnoPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .75; transform: scale(1.15); } }

/* Full-bleed interior heroes (events / prayer-share / schedule) — edge to edge,
   no rounded-card look, regardless of the Elementor column width. */
.wcno-evhero, .wps-hero, .wcno-schero { border-radius: 0; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* Program Inquiry radios (inc/program-inquiry.php) */
.wcno-inq .wcno-pr-label small { color: var(--wcno-orange-dk); }
.wcno-inq-radios { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.wcno-inq-radio { display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; background: var(--wcno-white); border: 1px solid var(--wcno-border); border-radius: 10px; padding: .5rem .8rem; cursor: pointer; }
.wcno-inq-radio:hover { border-color: var(--wcno-orange); }

/* On-Air Hosts roster + scrolling banners (inc/hosts.php) */
.wcno-hosts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; max-width: 1080px; margin: 0 auto; }
@media (max-width: 900px) { .wcno-hosts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wcno-hosts__grid { grid-template-columns: 1fr; } }
.wcno-hosts__card { background: var(--wcno-white); border: 1px solid var(--wcno-border); border-radius: 18px; padding: 1.35rem; text-align: center; box-shadow: 0 4px 18px rgba(26,37,53,.05); }
/* Uniform photo frame: fixed 4:3 crop, soft corners, faces kept in view.
   Contains ANY source image - no more mixed sizes or portraits spilling
   over the host's name. */
.wcno-hosts__photo-wrap { width: 100%; aspect-ratio: 4 / 3; margin: 0 auto 1rem; border-radius: 12px; overflow: hidden; background: var(--wcno-light); }
.wcno-hosts__photo,
.wcno-hosts__photo-wrap img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center 30%; border-radius: 12px; display: block; }
.wcno-hosts__photo--placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--wcno-light); color: var(--wcno-orange-dk); font-size: 2.6rem; }
.wcno-hosts__name { margin: 0 0 .2rem; font-size: 1.2rem; }
.wcno-hosts__role { margin: 0 0 .6rem; font-size: .86rem; color: var(--wcno-blue); font-weight: 600; }
.wcno-hosts__bio { font-size: .9rem; line-height: 1.5; color: var(--wcno-dark); margin-bottom: .9rem; text-align: left; }
.wcno-hosts__btn, .wcno-hostban__btn { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .85rem; color: var(--wcno-white); background: var(--wcno-orange); border-radius: 999px; padding: .5rem 1rem; text-decoration: none; }
.wcno-hosts__btn:hover, .wcno-hostban__btn:hover { box-shadow: 0 4px 14px rgba(232,146,45,.35); }
.wcno-hosts__empty { text-align: center; color: var(--wcno-muted); padding: 2rem 1rem; }

.wcno-hostban { overflow: hidden; width: 100%; }
.wcno-hostban__track { display: flex; width: max-content; gap: 1rem; animation-name: wcno-hostban-scroll; animation-timing-function: linear; animation-iteration-count: infinite; }
.wcno-hostban:hover .wcno-hostban__track { animation-play-state: paused; }
.wcno-hostban__item { display: inline-flex; align-items: center; gap: .8rem; flex: 0 0 auto; background: var(--wcno-white); border: 1px solid var(--wcno-border); border-radius: 999px; padding: .55rem .8rem .55rem .55rem; }
.wcno-hostban__photo-wrap { flex: 0 0 auto; width: 48px; height: 48px; }
.wcno-hostban__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.wcno-hostban__photo--placeholder { display: flex; align-items: center; justify-content: center; background: var(--wcno-light); color: var(--wcno-orange); }
.wcno-hostban__text { display: flex; flex-direction: column; line-height: 1.2; }
.wcno-hostban__name { font-weight: 700; font-size: .95rem; }
.wcno-hostban__role { font-size: .78rem; color: var(--wcno-muted); }
@keyframes wcno-hostban-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wcno-hostban__track { animation: none; } .wcno-hostban { overflow-x: auto; } }

/* Prayer & Share feed (inc/prayer-share.php → [wcno_prayer_share_feed]) */
.wcno-psfeed { max-width: 1100px; margin: 0 auto; color: var(--wcno-dark); }
.wcno-psfeed-head { text-align: center; margin-bottom: 2rem; }
.wcno-psfeed-title { margin: .6rem 0 .4rem; font-size: 2rem; }
.wcno-psfeed-sub { margin: 0; color: var(--wcno-muted); }
.wcno-psfeed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.wcno-psfeed-card { display: flex; flex-direction: column; background: var(--wcno-white); border: 1px solid var(--wcno-border); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; }
.wcno-psfeed-card:hover { transform: translateY(-4px); border-color: var(--wcno-orange); box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.wcno-psfeed-card-img img { display: block; width: 100%; height: 180px; object-fit: cover; }
.wcno-psfeed-card-body { padding: 1.2rem 1.35rem; display: flex; flex-direction: column; gap: .4rem; }
.wcno-psfeed-status { align-self: flex-start; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: .2rem .6rem; }
.wcno-psfeed-status.is-active { color: #E53E3E; background: rgba(255,68,68,.1); }
.wcno-psfeed-status.is-closed { color: var(--wcno-blue); background: rgba(74,144,194,.12); }
.wcno-psfeed-card-title { margin: .1rem 0; font-size: 1.2rem; }
.wcno-psfeed-date { font-size: .85rem; color: var(--wcno-muted); }
.wcno-psfeed-link { margin-top: .35rem; font-weight: 700; font-size: .88rem; color: var(--wcno-orange-dk); }
.wcno-psfeed-empty { text-align: center; color: var(--wcno-muted); padding: 2.5rem 1rem; }

/* Community Calendar (inc/community-calendar.php → [wcno_community_calendar]) */
.wcno-cal { max-width: 1000px; margin: 0 auto; color: var(--wcno-dark); }
.wcno-cal-bar { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1.25rem; }
.wcno-cal-month { margin: 0; font-size: 1.5rem; min-width: 12rem; text-align: center; }
.wcno-cal-nav { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--wcno-light); color: var(--wcno-orange); text-decoration: none; font-size: 1.2rem; font-weight: 700; transition: background .15s, color .15s; }
.wcno-cal-nav:hover { background: var(--wcno-orange); color: #fff; }
.wcno-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wcno-cal-dow { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--wcno-muted); padding: .35rem 0; }
.wcno-cal-cell { min-height: 92px; background: var(--wcno-white); border: 1px solid var(--wcno-border); border-radius: 10px; padding: .4rem; display: flex; flex-direction: column; gap: .25rem; }
.wcno-cal-cell.is-empty { background: transparent; border: none; }
.wcno-cal-cell.is-today { border-color: var(--wcno-orange); box-shadow: 0 0 0 2px rgba(232,146,45,.2); }
.wcno-cal-cell.has-items { background: #fffdf9; }
.wcno-cal-num { font-size: .82rem; font-weight: 700; color: var(--wcno-muted); }
.wcno-cal-cell.is-today .wcno-cal-num { color: var(--wcno-orange-dk); }
.wcno-cal-items { display: flex; flex-direction: column; gap: 3px; }
.wcno-cal-item { font-size: .72rem; line-height: 1.25; background: rgba(74,144,194,.12); color: var(--wcno-blue); border-radius: 5px; padding: .15rem .35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcno-cal-more { font-size: .68rem; color: var(--wcno-muted); }
.wcno-cal-agenda { margin-top: 2rem; display: flex; flex-direction: column; gap: .85rem; }
.wcno-cal-ag-row { display: flex; gap: 1rem; background: var(--wcno-white); border: 1px solid var(--wcno-border); border-radius: 12px; padding: .9rem 1.1rem; }
.wcno-cal-ag-date { flex: 0 0 8.5rem; font-weight: 700; color: var(--wcno-orange-dk); font-size: .9rem; }
.wcno-cal-ag-title { margin: 0 0 .3rem; font-size: 1.02rem; }
.wcno-cal-ag-text { font-size: .92rem; line-height: 1.5; }
.wcno-cal-ag-text p { margin: 0 0 .4rem; }
.wcno-cal-empty { text-align: center; color: var(--wcno-muted); padding: 2rem 1rem; }
@media (max-width: 640px) {
	.wcno-cal-cell { min-height: 60px; }
	.wcno-cal-item, .wcno-cal-more { display: none; }
	.wcno-cal-cell.has-items::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--wcno-orange); align-self: flex-start; }
	.wcno-cal-ag-row { flex-direction: column; gap: .25rem; }
	.wcno-cal-ag-date { flex-basis: auto; }
}

/* Churches Directory (inc/churches.php → [wcno_churches]) */
.wcno-ch { max-width: 1100px; margin: 0 auto; color: var(--wcno-dark); }
.wcno-ch-bar { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.wcno-ch-search { position: relative; flex: 1 1 240px; }
.wcno-ch-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--wcno-muted); font-size: .95rem; }
.wcno-ch-search input { width: 100%; box-sizing: border-box; padding: .8rem 1rem .8rem 2.6rem; font: inherit; background: var(--wcno-white); border: 1px solid var(--wcno-border); border-radius: 999px; outline: none; }
.wcno-ch-search input:focus, .wcno-ch-city:focus { border-color: var(--wcno-orange); box-shadow: 0 0 0 3px rgba(232,146,45,.15); }
.wcno-ch-city { padding: .8rem 1rem; font: inherit; background: var(--wcno-white); border: 1px solid var(--wcno-border); border-radius: 999px; outline: none; }
.wcno-ch-go { border: none; cursor: pointer; font: inherit; font-weight: 700; color: #fff; background: var(--wcno-orange); border-radius: 999px; padding: .8rem 1.4rem; }
.wcno-ch-go:hover { box-shadow: 0 4px 14px rgba(232,146,45,.35); }
.wcno-ch-map { width: 100%; height: 380px; border-radius: 16px; border: 1px solid var(--wcno-border); margin-bottom: 1.5rem; overflow: hidden; }
.wcno-ch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.wcno-ch-card { background: var(--wcno-white); border: 1px solid var(--wcno-border); border-radius: 16px; padding: 1.25rem 1.4rem; }
.wcno-ch-name { margin: 0 0 .25rem; font-size: 1.15rem; }
.wcno-ch-denom { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--wcno-blue); background: rgba(74,144,194,.12); border-radius: 999px; padding: .18rem .55rem; margin-bottom: .6rem; }
.wcno-ch-line { display: flex; align-items: flex-start; gap: .5rem; margin: .35rem 0; font-size: .9rem; color: var(--wcno-dark); }
.wcno-ch-line i { color: var(--wcno-orange); margin-top: .18rem; }
.wcno-ch-line a { color: inherit; text-decoration: none; }
.wcno-ch-web { font-weight: 700; font-size: .88rem; color: var(--wcno-orange-dk); text-decoration: none; }
.wcno-ch-empty { text-align: center; color: var(--wcno-muted); padding: 2.5rem 1rem; }
/* interactivity: tools, distance, directions */
.wcno-ch-tools { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.wcno-ch-search--place { flex: 1 1 240px; }
.wcno-ch-near { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--wcno-border); cursor: pointer; font: inherit; font-weight: 700; color: var(--wcno-blue); background: var(--wcno-white); border-radius: 999px; padding: .8rem 1.3rem; transition: border-color .15s, color .15s; }
.wcno-ch-near:hover { border-color: var(--wcno-blue); }
.wcno-ch-near:disabled { opacity: .7; cursor: progress; }
.wcno-ch-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.wcno-ch-dist { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: var(--wcno-blue); background: rgba(74,144,194,.12); border-radius: 999px; padding: .12rem .55rem; white-space: nowrap; }
.wcno-ch-dist:empty { display: none; }
.wcno-ch-links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin-top: .7rem; }
.wcno-ch-dir { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .88rem; color: var(--wcno-blue-dk); text-decoration: none; }
.wcno-ch-dir:hover, .wcno-ch-web:hover { text-decoration: underline; }

/* Prayer & Share hero ([wcno_prayer_share_hero]) */
.wps-hero { position: relative; border-radius: 0; overflow: hidden; background: linear-gradient(135deg, rgba(46,90,130,.80) 0%, rgba(26,43,53,.88) 100%), url('https://wcno.stuartwebconsulting.com/wp-content/uploads/2026/07/WCNO-sunset-hero1.jpg'); background-size: cover; background-position: center; color: #fff; padding: 3rem 6%; text-align: center; }
.wps-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(232,146,45,.25) 0%, transparent 55%); pointer-events: none; }
.wps-hero-inner { position: relative; max-width: 720px; margin: 0 auto; }
.wps-hero .wps-pill { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.15); color: var(--wcno-hero-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; border-radius: 999px; padding: .4rem 1rem; }
.wps-hero-title { font-family: 'Playfair Display', Georgia, serif; font-size: 2.4rem; line-height: 1.15; margin: 1rem 0 .6rem; color: #fff; }
.wps-hero-status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: #fff; margin-bottom: 1.25rem; }
.wps-hero-status .wps-dot { width: 9px; height: 9px; border-radius: 50%; background: #FF4444; animation: wcnoPulse 1.5s ease-in-out infinite; }
.wps-hero-status--done { color: var(--wcno-hero-accent); }
.wps-hero-numbers { margin-bottom: .75rem; }
.wps-hero-raised { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 3rem; font-weight: 700; color: var(--wcno-hero-accent); line-height: 1; }
.wps-hero-of { font-size: 1rem; color: rgba(255,255,255,.9); }
.wps-hero .wps-bar { width: 100%; max-width: 520px; margin: 1rem auto .5rem; height: 12px; background: rgba(255,255,255,.2); border-radius: 999px; overflow: hidden; }
.wps-hero .wps-fill { display: block; height: 100%; background: linear-gradient(90deg, #E8922D, #F5B041); border-radius: 999px; transition: width .6s ease; }
.wps-hero .wps-pct { font-size: .85rem; color: rgba(255,255,255,.85); margin-bottom: 1.5rem; }
.wps-hero .wps-cta { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }
.wps-hero .wps-btn { display: inline-flex; align-items: center; gap: .55rem; background: linear-gradient(135deg, #BF6608 0%, #9D5500 100%); color: #fff; text-decoration: none; font-weight: 700; border-radius: 999px; padding: .85rem 1.6rem; box-shadow: 0 4px 18px rgba(232,146,45,.4); transition: transform .15s, box-shadow .15s; }
.wps-hero .wps-btn:hover { transform: translateY(-2px); }
.wps-hero .wps-btn--alt { background: rgba(255,255,255,.95); color: #2E5A82; box-shadow: 0 4px 18px rgba(0,0,0,.2); }
.wps-hero .wps-btn--ghost { background: transparent; border: 2px solid rgba(255,255,255,.6); color: #fff; box-shadow: none; }
.wps-hero-next { margin: 1.1rem 0 0; color: rgba(255,255,255,.85); font-size: .92rem; }
@media (max-width: 600px) { .wps-hero-title { font-size: 1.9rem; } .wps-hero-raised { font-size: 2.4rem; } }

/* Events hero ([wcno_events_hero]) */
.wcno-evhero { position: relative; border-radius: 0; overflow: hidden; background: linear-gradient(135deg, rgba(74,144,194,.72) 0%, rgba(46,90,130,.86) 100%), url('https://wcno.stuartwebconsulting.com/wp-content/uploads/2026/07/WCNO-sunset-hero1.jpg'); background-size: cover; background-position: center; color: #fff; padding: 2.5rem 6%; }
.wcno-evhero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(232,146,45,.28) 0%, transparent 55%); pointer-events: none; }
.wcno-evhero-inner { position: relative; max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 2rem; }
.wcno-evhero-date { flex: 0 0 auto; width: 108px; height: 108px; border-radius: 18px; background: #fff; color: #2E5A82; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.wcno-evhero-day { font-family: 'Playfair Display', Georgia, serif; font-size: 2.8rem; font-weight: 700; line-height: 1; color: var(--wcno-orange-dk); }
.wcno-evhero-mon { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.wcno-evhero-body { flex: 1 1 auto; }
.wcno-evhero-pill { display: inline-block; background: rgba(255,255,255,.15); color: var(--wcno-hero-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; border-radius: 999px; padding: .35rem 1rem; }
.wcno-evhero-title { font-family: 'Playfair Display', Georgia, serif; font-size: 2.2rem; line-height: 1.15; margin: .75rem 0 .6rem; color: #fff; }
.wcno-evhero-meta { display: flex; align-items: center; gap: .55rem; margin: .3rem 0; color: rgba(255,255,255,.92); font-size: .98rem; }
.wcno-evhero-meta i { color: var(--wcno-hero-accent); }
.wcno-evhero-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.25rem; }
.wcno-evhero-btn { display: inline-flex; align-items: center; gap: .5rem; background: linear-gradient(135deg, #E8922D 0%, #D4780F 100%); color: #fff; text-decoration: none; font-weight: 700; border-radius: 999px; padding: .8rem 1.6rem; box-shadow: 0 4px 18px rgba(232,146,45,.4); transition: transform .15s; }
.wcno-evhero-btn:hover { transform: translateY(-2px); }
.wcno-evhero-btn--ghost { background: transparent; border: 2px solid rgba(255,255,255,.6); color: #fff; box-shadow: none; }
@media (max-width: 640px) { .wcno-evhero-inner { flex-direction: column; text-align: center; } .wcno-evhero-meta { justify-content: center; } .wcno-evhero-cta { justify-content: center; } }

/* Events hero — festive July 4th / America's birthday treatment */
.wcno-evhero--july4 { background: radial-gradient(circle at 18% 20%, rgba(178,34,52,.35) 0%, transparent 45%), radial-gradient(circle at 82% 30%, rgba(60,110,180,.42) 0%, transparent 50%), linear-gradient(160deg, #0d1c34 0%, #10233f 55%, #0b1730 100%); }
.wcno-evhero--july4::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #b22234 0 33%, #fff 33% 66%, #3c5a99 66%); opacity: .9; z-index: 1; }
.wcno-evhero--july4 .wcno-evhero-day { color: #b22234; }
.wcno-evhero--july4 .wcno-evhero-pill { color: var(--wcno-hero-accent); background: rgba(169,207,239,.18); }
.wcno-evhero-stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.wcno-evhero-stars span { position: absolute; color: rgba(245,176,65,.55); }
.wcno-evhero-stars span:nth-child(1) { top: 16%; left: 14%; font-size: 13px; }
.wcno-evhero-stars span:nth-child(2) { top: 26%; left: 86%; font-size: 18px; }
.wcno-evhero-stars span:nth-child(3) { top: 68%; left: 10%; font-size: 16px; }
.wcno-evhero-stars span:nth-child(4) { top: 74%; left: 88%; font-size: 12px; }
.wcno-evhero-stars span:nth-child(5) { top: 12%; left: 62%; font-size: 11px; }

/* Events grid ([wcno_events_grid]) — full grid layout of the event cards */
.wcno-events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.75rem; max-width: 1200px; margin: 0 auto; }
.wcno-events-grid .wcno-event-card { width: auto; min-width: 0; flex: none; scroll-snap-align: none; }
.wcno-events-empty { grid-column: 1 / -1; text-align: center; color: var(--wcno-muted); padding: 2.5rem 1rem; }
.wcno-event-icon i { color: #ffffff; font-size: 2.5rem; }
.wcno-playlist__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wcno-playlist__title { font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcno-playlist__artist { font-size: .88rem; color: var(--wcno-blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcno-playlist__time { flex: 0 0 auto; font-size: .78rem; color: var(--wcno-muted); white-space: nowrap; }
.wcno-playlist__state { padding: 1.5rem; text-align: center; color: var(--wcno-muted); font-size: .92rem; }
@media (max-width: 520px) { .wcno-playlist__time { display: none; } }

/* ================================================
   9. BUSINESS PARTNERS  (wcno-partners-*)
   CSS-only scrolling marquee — no JavaScript.
   ================================================ */
.wcno-partners-section { padding: 4.5rem 6%; background: var(--wcno-white); font-family: 'Open Sans', sans-serif; text-align: center; }
.wcno-partners-header { margin-bottom: 1rem; }
.wcno-partners-badge { display: inline-block; background: var(--wcno-light); color: var(--wcno-orange-dk); padding: .5rem 1.25rem; border-radius: 50px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1rem; border: 1px solid var(--wcno-border); }
.wcno-partners-title { font-family: 'Playfair Display', Georgia, serif; font-size: 2.5rem; font-weight: 700; color: var(--wcno-dark); margin: 0 0 .75rem; }
.wcno-partners-description { font-size: 1.1rem; color: var(--wcno-text); max-width: 600px; margin: 0 auto; }
.wcno-site-credit { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.75rem auto 0; padding: .85rem 1.2rem; max-width: 520px; color: var(--wcno-dark); background: var(--wcno-light); border: 1px solid var(--wcno-border); border-radius: 14px; box-shadow: 0 4px 18px rgba(26,37,53,.08); text-decoration: none; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.wcno-site-credit:hover, .wcno-site-credit:focus { color: var(--wcno-dark); border-color: var(--wcno-orange); box-shadow: 0 7px 22px rgba(26,37,53,.13); transform: translateY(-2px); }
.wcno-site-credit__logo { flex: 0 0 64px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; padding: .3rem; background: var(--wcno-white); border-radius: 12px; overflow: hidden; }
.wcno-site-credit__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wcno-site-credit__copy { display: flex; flex-direction: column; line-height: 1.35; font-size: .86rem; color: var(--wcno-muted); }
.wcno-site-credit__copy strong { margin: .1rem 0; color: var(--wcno-blue-dk); font-family: 'Playfair Display', Georgia, serif; font-size: 1.18rem; }
@media (max-width: 520px) { .wcno-site-credit { width: 100%; box-sizing: border-box; } .wcno-site-credit__logo { flex-basis: 58px; width: 58px; height: 58px; } }

.wcno-partners-marquee { overflow: hidden; margin: 2rem auto 2.5rem; }
.wcno-partners-track { display: flex; align-items: center; gap: 2rem; width: max-content; animation: wcno-partners-scroll 45s linear infinite; }
.wcno-partners-marquee:hover .wcno-partners-track { animation-play-state: paused; }
@keyframes wcno-partners-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wcno-partners-track { animation: none; flex-wrap: wrap; justify-content: center; } }

.wcno-partner-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 80px; min-width: 150px; padding: 0 1rem; background: var(--wcno-light); border: 1px solid var(--wcno-border); border-radius: 12px; transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.wcno-partner-logo:hover { border-color: var(--wcno-orange); transform: translateY(-3px); }
.wcno-partner-logo img { max-height: 60px; max-width: 160px; object-fit: contain; display: block; }
.wcno-partner-name { color: var(--wcno-muted); font-weight: 600; font-size: .9rem; }

.wcno-partner-cta { margin-top: 1rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.wcno-partner-btn { display: inline-flex; align-items: center; gap: .5rem; background: transparent; border: 2px solid var(--wcno-blue); color: var(--wcno-blue); padding: .875rem 2rem; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .5px; transition: all .3s ease; }
.wcno-partner-btn:hover { background: var(--wcno-blue-dk); color: var(--wcno-white); }
.wcno-partner-btn--alt { border-color: var(--wcno-orange-dk); color: var(--wcno-orange-dk); }
.wcno-partner-btn--alt:hover { background: var(--wcno-orange-dk); color: var(--wcno-white); }

/* ================================================
   10. BUSINESS PARTNERS DIRECTORY (.wcno-pdir)
   Shortcode: [wcno_partners_directory]
   ================================================ */
.wcno-pdir { max-width: 1080px; margin: 0 auto; font-family: 'Open Sans', sans-serif; }

/* - Filter bar - */
.wcno-pdir-bar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: var(--wcno-white); border: 1px solid var(--wcno-border);
    border-radius: 12px; padding: 14px 18px; margin-bottom: 26px;
    box-shadow: 0 2px 10px rgba(26,37,53,.05);
}
.wcno-pdir-label {
    font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--wcno-muted); flex-shrink: 0;
}
.wcno-pdir-controls { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.wcno-pdir-selectwrap { position: relative; display: inline-flex; flex: 0 1 auto; }
.wcno-pdir-select {
    appearance: none; -webkit-appearance: none;
    font-size: 15px; font-weight: 600; color: var(--wcno-dark);
    border: 1.5px solid var(--wcno-border); border-radius: 8px;
    padding: 10px 40px 10px 14px; background: var(--wcno-light);
    cursor: pointer; outline: none; transition: border-color .2s;
    min-width: 230px;
}
.wcno-pdir-select:focus { border-color: var(--wcno-blue-dk); box-shadow: 0 0 0 3px rgba(46,109,164,.18); }
.wcno-pdir-caret {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: var(--wcno-orange-dk); font-size: .8rem; pointer-events: none;
}
.wcno-pdir-search {
    font-size: 15px; color: var(--wcno-text);
    border: 1.5px solid var(--wcno-border); border-radius: 8px;
    padding: 10px 14px; background: var(--wcno-light); outline: none;
    flex: 1; min-width: 190px; transition: border-color .2s;
}
.wcno-pdir-search:focus { border-color: var(--wcno-blue-dk); box-shadow: 0 0 0 3px rgba(46,109,164,.18); }
.wcno-pdir-search::placeholder { color: var(--wcno-muted); }
.wcno-pdir-count { font-size: 13px; color: var(--wcno-muted); font-weight: 700; flex-shrink: 0; white-space: nowrap; }

/* - Card grid - */
.wcno-pdir-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.wcno-pdir-card {
    display: flex; flex-direction: column;
    background: var(--wcno-white); border: 1px solid var(--wcno-border);
    border-radius: 12px; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wcno-pdir-card:hover { transform: translateY(-4px); border-color: var(--wcno-orange); box-shadow: 0 10px 26px rgba(26,37,53,.12); }
.wcno-pdir-logo {
    display: flex; align-items: center; justify-content: center;
    height: 130px; background: var(--wcno-light); padding: 14px;
    border-bottom: 1px solid var(--wcno-border);
}
.wcno-pdir-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wcno-pdir-logo-ph { font-size: 2.2rem; color: var(--wcno-orange-dk); }
.wcno-pdir-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.wcno-pdir-cat {
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--wcno-orange-dk);
}
.wcno-pdir-name { font-size: 15.5px; font-weight: 800; color: var(--wcno-dark); line-height: 1.3; }
.wcno-pdir-link {
    margin-top: auto; padding-top: 8px;
    font-size: 13.5px; font-weight: 700; color: var(--wcno-blue-dk);
    text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.wcno-pdir-link:hover { text-decoration: underline; color: var(--wcno-blue-dk); }
.wcno-pdir-link i { font-size: .75em; }
.wcno-pdir-none, .wcno-pdir-empty { text-align: center; color: var(--wcno-muted); padding: 2.2rem 0; font-size: 15px; }

@media (max-width: 640px) {
    .wcno-pdir-bar { align-items: stretch; flex-direction: column; gap: 10px; }
    .wcno-pdir-select, .wcno-pdir-selectwrap, .wcno-pdir-search { width: 100%; min-width: 0; }
    .wcno-pdir-count { text-align: center; }
    /* 16px inputs stop iOS Safari from zooming the page on focus */
    .wcno-pdir-select, .wcno-pdir-search,
    .wla-filter-select, .wla-filter-search { font-size: 16px; }
    .wcno-pdir-grid { grid-template-columns: 1fr; gap: 12px; }
    .wcno-pdir-logo { height: 100px; }
}

/* Churches search: the new PlaceAutocompleteElement replaces the old input -
   make the web component fill the search bar like the input it swapped out. */
.wcno-ch-search gmp-place-autocomplete { width: 100%; display: block; }

/* Churches filter bar: reuses the partners-directory bar (.wcno-pdir-*) with
   a second row for the map tools. */
.wcno-ch-bar2 { margin-bottom: 22px; }
.wcno-ch-placewrap {
    flex-basis: 100%; display: flex; align-items: center; gap: .7rem;
    padding-top: 12px; border-top: 1px solid var(--wcno-border); margin-top: 4px;
}
.wcno-ch-placewrap > i { color: var(--wcno-orange-dk); font-size: 1rem; flex-shrink: 0; }
.wcno-ch-placewrap .wcno-pdir-search,
.wcno-ch-placewrap gmp-place-autocomplete { flex: 1; min-width: 160px; }
.wcno-ch-near {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .5rem;
    font-size: 14px; font-weight: 700; color: var(--wcno-blue-dk);
    background: var(--wcno-light); border: 1.5px solid var(--wcno-border);
    border-radius: 8px; padding: 10px 16px; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.wcno-ch-near:hover { border-color: var(--wcno-blue-dk); }
.wcno-ch-near:disabled { opacity: .6; cursor: progress; }
@media (max-width: 640px) {
    .wcno-ch-placewrap { flex-wrap: wrap; }
    .wcno-ch-near { width: 100%; justify-content: center; }
    .wcno-ch-placewrap .wcno-pdir-search { font-size: 16px; }
}


/* ================================================
   11. ACCESSIBILITY
   ================================================ */

/* Visible keyboard focus on all custom interactive elements (2.4.7 / 2.4.13) */
.wcno-pdir-select:focus-visible, .wcno-pdir-search:focus-visible,
.wcno-ch-near:focus-visible, .wla-filter-select:focus-visible,
.wla-filter-search:focus-visible, .wcno-listen:focus-visible,
.wcno-schero-listen:focus-visible, .wl-listen-btn:focus-visible,
.wla-card:focus-visible, .wla-hero-panel:focus-visible,
.wcno-pdir-link:focus-visible, .wcno-partner-logo:focus-visible,
.wcno-partner-btn:focus-visible, .wps-btn:focus-visible,
.wcno-ch-web:focus-visible, .wcno-ch-dir:focus-visible,
.wcno-pr-submit:focus-visible, .wcno-psfeed-card:focus-visible,
.wl-tag:focus-visible, .wcno-event-link:focus-visible {
    outline: 3px solid var(--wcno-blue-dk);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Respect reduced-motion preferences (2.3.3): stop the partner marquee,
   pulsing dots, and hover-lift animations. */
@media (prefers-reduced-motion: reduce) {
    .wcno-partners-track { animation: none !important; }
    .wcno-schero-dot, .wps-dot, .wcno-np-dot, [class*="wcno"] .fa-spin { animation: none !important; }
    .wcno-pdir-card, .wla-card, .wcno-bap-card, .wcno-psfeed-card,
    .wcno-event-card, .wcno-partner-logo, .wcno-schero-listen {
        transition: none !important; transform: none !important;
    }
    .wcno-pdir-card:hover, .wla-card:hover, .wcno-event-card:hover { transform: none !important; }
}

/* Wednesday Live: "Load More" reveal (12 at a time, 36 per page) */
.wla-card--lm-hidden { display: none !important; }
.wla-loadmore-wrap { text-align: center; margin: 26px 0 6px; }
.wla-loadmore {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--wcno-orange-dk); color: var(--wcno-white);
    font-size: 15px; font-weight: 700; letter-spacing: .3px;
    padding: 13px 30px; border-radius: 50px; border: none; cursor: pointer;
    transition: background .15s;
}
.wla-loadmore:hover { background: var(--wcno-orange-deep); }
.wla-loadmore:focus-visible { outline: 3px solid var(--wcno-blue-dk); outline-offset: 2px; }