/* =========================================================
   CHUNARA CUSTOM WIDGETS — scoped CSS
   All rules prefixed .cw- to avoid conflicts.
   ========================================================= */

.cw-marquee, .cw-partners-carousel, .cw-partners-grid, .cw-brands-grid,
.cw-news-grid, .cw-timeline, .cw-brand-detail, .cw-locator-preview,
.cw-grid-wrapper {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    color: #1c1b1b;
    box-sizing: border-box;
}
.cw-marquee *, .cw-partners-carousel *, .cw-partners-grid *, .cw-brands-grid *,
.cw-news-grid *, .cw-timeline *, .cw-brand-detail *, .cw-locator-preview *,
.cw-grid-wrapper * { box-sizing: border-box; }

.cw-eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.15em;
    color: #B01621; margin-bottom: 12px;
}

/* Buttons shared across widgets */
.cw-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    text-decoration: none; border: 2px solid transparent;
    cursor: pointer; transition: all 200ms ease;
}
.cw-btn--primary { background: #B01621; color: #FFF !important; border-color: #B01621; }
.cw-btn--primary:hover { background: #7A0F17; border-color: #7A0F17; }
.cw-btn--primary-inverted { background: #FFF; color: #B01621 !important; border-color: #FFF; }
.cw-btn--primary-inverted:hover { background: transparent; color: #FFF !important; border-color: #FFF; }
.cw-btn--ghost-light { background: transparent; color: #FFF !important; border-color: #FFF; }
.cw-btn--ghost-light:hover { background: #FFF; color: #1c1b1b !important; }

/* =========================================================
   1. MARQUEE — image-only, truly edge-to-edge full width
   Uses 100vw + negative margin to escape any parent container
   ========================================================= */
.cw-marquee {
    background: #F6F3F2;
    overflow: hidden;
    padding: 40px 0;
    border-top: 1px solid #E3BEBB;
    border-bottom: 1px solid #E3BEBB;
    position: relative;
    /* Break out of any parent width constraint — TRUE full-width */
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box;
}
.cw-marquee::before, .cw-marquee::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 140px;
    z-index: 2; pointer-events: none;
}
.cw-marquee::before { left: 0; background: linear-gradient(to right, #F6F3F2, transparent); }
.cw-marquee::after  { right: 0; background: linear-gradient(to left, #F6F3F2, transparent); }
.cw-marquee__track {
    display: flex; align-items: center; gap: 48px;
    white-space: nowrap; width: max-content;
    animation: cw-marquee-scroll var(--cw-marquee-duration, 45s) linear infinite;
    padding: 0 24px;
}
.cw-marquee--right .cw-marquee__track { animation-direction: reverse; }
.cw-marquee:hover .cw-marquee__track { animation-play-state: paused; }
.cw-marquee__item {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
    transition: transform 200ms ease, opacity 200ms ease;
    width: 160px;
    height: 120px;
    overflow: hidden;
    border: 1px solid #E3BEBB;
    background: #FFF;
}
.cw-marquee__item:hover {
    opacity: 0.85;
    transform: scale(1.03);
}
.cw-marquee__item img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
/* Logo tiles render the mark contained (not cropped) with padding on white,
   which is the correct treatment for brand logos of varying aspect ratio. */
.cw-marquee__item--logo img {
    object-fit: contain;
    padding: 14px;
    background: #FFF;
}
.cw-marquee__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    font-family: 'Open Sans', Georgia, serif;
    font-size: 18px; font-weight: 700;
    color: #1c1b1b;
    text-align: center;
    padding: 8px;
    line-height: 1.2;
}
@keyframes cw-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .cw-marquee__track { animation: none; }
}
@media (max-width: 640px) {
    .cw-marquee__item { width: 120px; height: 90px; }
    .cw-marquee__track { gap: 24px; }
    .cw-marquee { padding: 24px 0; }
    .cw-marquee::before, .cw-marquee::after { width: 60px; }
}

/* =========================================================
   2. PARTNERS CAROUSEL & 3. PARTNERS GRID (shared card)
   ========================================================= */
.cw-partners-carousel {
    padding: 0;
    position: relative;
}

/* Fallback: if Splide fails to init, render slides as a horizontal grid */
.cw-partners-carousel:not(.is-initialized) .splide__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0; margin: 0;
}
.cw-partners-carousel:not(.is-initialized) .splide__slide { width: 100% !important; }
@media (max-width: 1024px) {
    .cw-partners-carousel:not(.is-initialized) .splide__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .cw-partners-carousel:not(.is-initialized) .splide__list { grid-template-columns: 1fr; }
}

/* ============================================================
   ARROWS BELOW THE CAROUSEL (not overlapping the cards)
   Override Splide's default absolute positioning and stack them
   in a centered row underneath the slides.
   ============================================================ */
.cw-partners-carousel .splide__arrows {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 40px !important;
    width: 100% !important;
}
.cw-partners-carousel .splide__arrow {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 48px !important;
    height: 48px !important;
    background: #B01621 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    transition: background 200ms;
}
.cw-partners-carousel .splide__arrow svg {
    fill: #FFF !important;
    width: 18px; height: 18px;
    transform: none !important;
}
.cw-partners-carousel .splide__arrow--prev svg { transform: scaleX(-1) !important; }
.cw-partners-carousel .splide__arrow:hover:not(:disabled) { background: #7A0F17 !important; }
.cw-partners-carousel .splide__arrow:disabled {
    background: #d3d3d3 !important;
    opacity: 0.6 !important;
    cursor: not-allowed;
}
@media (max-width: 640px) {
    .cw-partners-carousel .splide__arrow { width: 40px !important; height: 40px !important; }
}

/* PARTNER CARD — rectangular avatar */
.cw-partner-card {
    background: #FFF;
    border: 1px solid #E3BEBB;
    text-align: left;
    height: 100%;
    display: flex; flex-direction: column;
    transition: border-color 200ms, transform 200ms, box-shadow 200ms;
    overflow: hidden;
}
.cw-partner-card:hover {
    border-color: #B01621;
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(176,22,33,0.25);
}
.cw-partner-card__avatar {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    color: #FFF;
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 56px; font-weight: 700;
    letter-spacing: -2px;
    background: #B01621;
    position: relative;
    /* When background-image is set inline (image-carrying cards), these
       rules take effect. Cards without an image show only background-color
       plus the centered initials <span>. Using background-image instead of
       an <img> element makes the fill completely immune to theme-injected
       img rules (which was leaving a strip of container color visible below
       the photo in the previous implementation). */
    background-size: cover;
    background-position: center 25%;
    background-repeat: no-repeat;
}
.cw-partner-card__initials {
    line-height: 1;
    z-index: 1;
}
.cw-partner-card__name {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 22px; font-weight: 600;
    margin: 20px 24px 6px; line-height: 1.3; color: #1c1b1b;
}
.cw-partner-card__llc {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #B01621; margin: 0 24px 12px;
}
.cw-partner-card__role {
    font-size: 13px; color: #5b403e;
    margin: 0 24px 12px; line-height: 1.5;
}
.cw-partner-card__bio {
    font-size: 13px; color: #666;
    margin: 0 24px 16px; line-height: 1.6;
    flex: 1;
}
.cw-partner-card__joined {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #8f706d; margin: 12px 24px 20px;
    padding-top: 12px; border-top: 1px solid #E3BEBB;
}

/* =========================================================
   FILTER TABS (shared by partners/brands grid)
   ========================================================= */
.cw-filter-tabs {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 32px; padding-bottom: 20px;
    border-bottom: 1px solid #E3BEBB;
}
.cw-filter-tab {
    background: transparent; border: 1px solid #E3BEBB;
    padding: 10px 20px; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #5b403e; cursor: pointer;
    transition: all 200ms;
    font-family: inherit;
}
.cw-filter-tab:hover { color: #B01621; border-color: #B01621; }
.cw-filter-tab--active {
    background: #B01621; border-color: #B01621; color: #FFF;
}
.cw-filter-tab span {
    opacity: 0.6; margin-left: 4px; font-weight: 400;
}

/* Grid layouts */
.cw-grid { display: grid; gap: 24px; }
.cw-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cw-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cw-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
    .cw-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .cw-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .cw-grid--4, .cw-grid--3, .cw-grid--2 { grid-template-columns: 1fr; }
}

/* =========================================================
   4. BRANDS GRID
   ========================================================= */
.cw-brand-card {
    display: flex; flex-direction: column;
    background: #FFF; border: 1px solid #E3BEBB;
    text-decoration: none; color: inherit;
    overflow: hidden;
    transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.cw-brand-card:hover {
    border-color: #B01621;
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(176,22,33,0.25);
}
.cw-brand-card__image {
    aspect-ratio: 4/3; overflow: hidden;
    background: #F6F3F2;
}
.cw-brand-card__image img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.cw-brand-card:hover .cw-brand-card__image img { transform: scale(1.05); }
.cw-brand-card__body { padding: 24px; }
.cw-brand-card__units {
    display: inline-block; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #B01621; margin-bottom: 8px;
}
.cw-brand-card__name {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 24px; font-weight: 600;
    margin: 0 0 8px; line-height: 1.2; color: #1c1b1b;
}
.cw-brand-card__tagline {
    font-size: 14px; color: #5b403e;
    margin: 0 0 16px; line-height: 1.5;
}
.cw-brand-card__entered {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #8f706d; margin: 0 0 16px;
}
.cw-brand-card__cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #B01621;
    padding-top: 12px; border-top: 1px solid #E3BEBB;
}

/* =========================================================
   5. NEWS GRID
   ========================================================= */
.cw-news-grid { display: flex; flex-direction: column; gap: 32px; }
.cw-news-card {
    display: flex; flex-direction: column;
    background: #FFF; border: 1px solid #E3BEBB;
    padding: 32px; text-decoration: none; color: inherit;
    transition: border-color 200ms, transform 200ms;
}
.cw-news-card:hover {
    border-color: #B01621;
    transform: translateY(-4px);
}
.cw-news-card__source {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.15em;
    color: #B01621; margin-bottom: 12px;
}
.cw-news-card__title {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 22px; font-weight: 600; line-height: 1.3;
    margin: 0 0 12px; color: #1c1b1b;
}
.cw-news-card__excerpt {
    font-size: 14px; color: #5b403e;
    line-height: 1.6; margin: 0 0 16px;
    flex: 1;
}
.cw-news-card__date {
    font-size: 12px; color: #8f706d;
    margin-top: auto;
}
.cw-news-card__cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #B01621; margin-top: 16px;
}
.cw-news-card--featured {
    background: linear-gradient(135deg, #F6F3F2 0%, #FFF 100%);
    padding: 48px;
    border-left: 4px solid #B01621;
}
.cw-news-card--featured .cw-news-card__title { font-size: 32px; }
@media (max-width: 768px) {
    .cw-news-card--featured { padding: 32px; }
    .cw-news-card--featured .cw-news-card__title { font-size: 24px; }
}

/* =========================================================
   6. RECOGNITION TIMELINE
   ========================================================= */
.cw-timeline {
    list-style: none; padding: 0; margin: 0;
    position: relative;
    max-width: 900px; margin: 0 auto;
}
.cw-timeline::before {
    content: ''; position: absolute;
    left: 120px; top: 0; bottom: 0; width: 2px;
    background: #E3BEBB;
}
.cw-timeline__item {
    display: flex; gap: 40px;
    padding: 32px 0;
    position: relative;
}
.cw-timeline__item::before {
    content: ''; position: absolute;
    left: 116px; top: 44px;
    width: 10px; height: 10px;
    background: #B01621; border-radius: 50%;
    box-shadow: 0 0 0 4px #FFF, 0 0 0 5px #B01621;
}
.cw-timeline__year {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 36px; font-weight: 700;
    color: #B01621;
    width: 100px; flex-shrink: 0;
    text-align: right;
    line-height: 1;
    padding-top: 6px;
}
.cw-timeline__content { padding-left: 40px; flex: 1; }
.cw-timeline__title {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 22px; font-weight: 600;
    margin: 0 0 8px; line-height: 1.3;
    color: #1c1b1b;
}
.cw-timeline__desc {
    font-size: 15px; color: #5b403e;
    line-height: 1.6; margin: 0 0 8px;
}
.cw-timeline__source {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.15em;
    color: #8f706d; margin: 0;
}
@media (max-width: 768px) {
    .cw-timeline::before { left: 40px; }
    .cw-timeline__item::before { left: 36px; }
    .cw-timeline__year {
        width: 30px; font-size: 20px;
        writing-mode: vertical-rl; transform: rotate(180deg);
    }
    .cw-timeline__content { padding-left: 32px; }
}

/* =========================================================
   7. BRAND DETAIL PAGE
   ========================================================= */
.cw-brand-detail__hero {
    padding: 96px 60px 80px;
    color: #FFF;
    background-size: cover;
    background-position: center;
}
.cw-brand-detail__hero-inner { max-width: 1280px; margin: 0 auto; }
.cw-crumbs {
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 24px;
}
.cw-crumbs a { color: rgba(255,255,255,0.7); text-decoration: none; }
.cw-crumbs a:hover { color: #FFF; }
.cw-crumbs span[aria-hidden] { margin: 0 8px; color: rgba(255,255,255,0.5); }
.cw-brand-detail__title {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 72px; font-weight: 700; line-height: 1.05;
    margin: 0 0 24px; letter-spacing: -1px;
    color: #FFF;
}
.cw-brand-detail__tagline {
    font-size: 20px; line-height: 1.5;
    margin: 0 0 32px; max-width: 640px;
    color: rgba(255,255,255,0.9);
}
.cw-brand-detail__hero-cta {
    display: flex; flex-wrap: wrap; gap: 12px;
}
.cw-brand-detail__body {
    padding: 96px 60px;
    background: #FCF9F8;
}
.cw-brand-detail__grid {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 2fr 1fr; gap: 64px;
    align-items: start;
}
.cw-brand-detail__story h2 {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 40px; font-weight: 700; line-height: 1.2;
    margin: 0 0 24px; color: #1c1b1b;
}
.cw-brand-detail__content {
    font-size: 16px; line-height: 1.75; color: #3a3a3a;
}
.cw-brand-detail__content p { margin: 0 0 20px; }
.cw-brand-detail__sidebar {
    display: flex; flex-direction: column; gap: 24px;
    position: sticky; top: 120px;
}
.cw-brand-detail__stat-card {
    background: #FFF; border: 1px solid #E3BEBB;
    padding: 32px;
}
.cw-stat-list { list-style: none; padding: 0; margin: 0; }
.cw-stat-list li {
    padding: 16px 0;
    border-bottom: 1px solid #E3BEBB;
    display: flex; flex-direction: column; gap: 4px;
}
.cw-stat-list li:last-child { border-bottom: none; padding-bottom: 0; }
.cw-stat-list li:first-child { padding-top: 8px; }
.cw-stat-list strong {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 32px; font-weight: 700;
    color: #B01621; line-height: 1;
}
.cw-stat-list span {
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #5b403e;
}
.cw-partner-list { list-style: none; padding: 0; margin: 0; }
.cw-partner-list li {
    padding: 12px 0;
    border-bottom: 1px solid #E3BEBB;
    display: flex; flex-direction: column;
}
.cw-partner-list li:last-child { border-bottom: none; padding-bottom: 0; }
.cw-partner-list strong {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 15px; color: #1c1b1b;
}
.cw-partner-list span {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #8f706d; margin-top: 4px;
}
.cw-brand-detail__ctas {
    padding: 0 60px 96px;
    background: #FCF9F8;
}
.cw-brand-detail__ctas {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    max-width: 1280px; margin: 0 auto;
    padding: 0 60px 96px;
}
.cw-brand-detail__cta-card {
    background: #FFF; border: 1px solid #E3BEBB;
    padding: 48px;
}
.cw-brand-detail__cta-card--dark {
    background: #1c1b1b; border-color: #1c1b1b; color: #FFF;
}
.cw-brand-detail__cta-card h3 {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 28px; font-weight: 600;
    margin: 0 0 12px; line-height: 1.3;
    color: inherit;
}
.cw-brand-detail__cta-card p {
    font-size: 15px; line-height: 1.6;
    margin: 0 0 24px; opacity: 0.85;
}
@media (max-width: 1024px) {
    .cw-brand-detail__grid { grid-template-columns: 1fr; }
    .cw-brand-detail__sidebar { position: static; }
    .cw-brand-detail__ctas { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .cw-brand-detail__hero { padding: 64px 20px 48px; }
    .cw-brand-detail__title { font-size: 42px; }
    .cw-brand-detail__body { padding: 64px 20px; }
    .cw-brand-detail__ctas { padding: 0 20px 64px; }
    .cw-brand-detail__cta-card { padding: 32px; }
}

/* =========================================================
   8. LOCATOR PREVIEW
   ========================================================= */
.cw-locator-preview {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 5fr 4fr; gap: 48px;
    align-items: center;
    padding: 0 60px;
}
.cw-locator-preview__left h2 {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 48px; font-weight: 700; line-height: 1.1;
    margin: 0 0 16px; color: #1c1b1b;
}
.cw-locator-preview__left p {
    font-size: 16px; color: #5b403e;
    margin: 0 0 24px; line-height: 1.6;
}
.cw-locator-preview__form {
    display: flex; gap: 12px;
    margin-bottom: 20px;
}
.cw-locator-preview__form input {
    flex: 1; padding: 16px 20px;
    border: 2px solid #E3BEBB; background: #FFF;
    font-size: 15px; font-family: inherit;
    color: #1c1b1b;
}
.cw-locator-preview__form input:focus {
    outline: 3px solid #B01621; outline-offset: 2px;
    border-color: #B01621;
}
.cw-locator-preview__cities {
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center;
    font-size: 13px;
}
.cw-locator-preview__cities span {
    font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.1em; color: #8f706d; font-size: 11px;
}
.cw-locator-preview__cities a {
    padding: 6px 14px;
    border: 1px solid #E3BEBB;
    color: #5b403e; text-decoration: none;
    font-size: 13px;
    transition: all 200ms;
}
.cw-locator-preview__cities a:hover {
    background: #B01621; color: #FFF; border-color: #B01621;
}
.cw-locator-preview__right img {
    width: 100%; height: 100%;
    object-fit: cover;
    max-height: 400px;
    display: block;
}
@media (max-width: 1024px) {
    .cw-locator-preview {
        grid-template-columns: 1fr; gap: 32px;
        padding: 0 20px;
    }
    .cw-locator-preview__left h2 { font-size: 36px; }
}
@media (max-width: 640px) {
    .cw-locator-preview__form { flex-direction: column; }
    .cw-locator-preview__form input, .cw-locator-preview__form button { width: 100%; }
}

/* Focus visibility */
.cw-btn:focus-visible,
.cw-filter-tab:focus-visible,
.cw-brand-card:focus-visible,
.cw-news-card:focus-visible,
.cw-locator-preview__cities a:focus-visible {
    outline: 3px solid #B01621; outline-offset: 3px;
}

/* =========================================================
   ELEMENTOR CASCADE OVERRIDES
   The Elementor Global Kit sets a site-wide heading/text color
   (#1c1b1b for legibility on the light theme background). That
   rule wins over our block-level `color: #FFF` on light backgrounds
   like the brand hero and dark CTA card, forcing us to override
   with !important. Same pattern as the stats-centering and pillar
   image fixes in chunara-site-setup/includes/render.php.
   ========================================================= */

/* Brand detail hero — light text on a dark-tinted photo background */
.cw-brand-detail__hero,
.cw-brand-detail__hero h1,
.cw-brand-detail__hero h2,
.cw-brand-detail__hero h3,
.cw-brand-detail__hero p,
.cw-brand-detail__hero .cw-crumbs,
.cw-brand-detail__hero .cw-crumbs span {
    color: #FFF !important;
}
.cw-brand-detail__hero .cw-crumbs a {
    color: rgba(255,255,255,0.75) !important;
}
.cw-brand-detail__hero .cw-crumbs a:hover {
    color: #FFF !important;
}
.cw-brand-detail__hero .cw-brand-detail__tagline {
    color: rgba(255,255,255,0.9) !important;
}

/* Brand detail dark CTA card — light text on #1c1b1b */
.cw-brand-detail__cta-card--dark,
.cw-brand-detail__cta-card--dark h3,
.cw-brand-detail__cta-card--dark p {
    color: #FFF !important;
}

/* =========================================================
   PARTNERS CAROUSEL — arrows below the track (flex reorder)
   Splide auto-injects .splide__arrows at the top of .splide
   in DOM order; making them `position: relative` alone was not
   enough — they were rendering above the slides in normal flow.
   Force flex-column on the wrapper and use `order` to guarantee
   the track sits above the arrow row regardless of DOM order.
   ========================================================= */
.cw-partners-carousel {
    display: flex !important;
    flex-direction: column !important;
}
.cw-partners-carousel .splide__track      { order: 1; }
.cw-partners-carousel .splide__arrows     { order: 2; }
.cw-partners-carousel .splide__pagination { order: 3; }

/* =========================================================
   PARTNER CARD — internal alignment
   Cards have optional role (from post_excerpt) and joined-year
   fields, so cards missing those end up shorter, giving a ragged
   row. Stretch every slide to the tallest, make each card a flex
   column, and let the role paragraph grow so "Since {year}" pins
   to the bottom of every card.
   ========================================================= */
.cw-partners-carousel .splide__slide {
    display: flex !important;
    height: auto !important;
}
.cw-partner-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.cw-partner-card__role {
    flex: 1 1 auto;
}
.cw-partner-card__joined {
    margin-top: auto;
}

/* =========================================================
   HEADER NAVIGATION — Portfolio dropdown styling
   Targets both UAE's .hfe-nav-menu (used by the header
   template) and any generic WP nav-menu submenu, so styling
   applies regardless of which widget renders the menu.
   ========================================================= */
.hfe-nav-menu .sub-menu,
.hfe-nav-menu .sub-menu.sub-menu,
.chunara-primary-menu .sub-menu {
    background: #fcf9f8;
    border: 1px solid #e3bebb;
    box-shadow: 0 8px 24px rgba(28, 27, 27, 0.08);
    min-width: 240px;
    padding: 8px 0;
    border-radius: 0;
}
.hfe-nav-menu .sub-menu li,
.chunara-primary-menu .sub-menu li {
    list-style: none;
    margin: 0;
}
.hfe-nav-menu .sub-menu li a,
.hfe-nav-menu .sub-menu li .hfe-menu-item,
.chunara-primary-menu .sub-menu li a {
    color: #1c1b1b !important;
    padding: 10px 20px !important;
    font-size: 15px !important;
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: block !important;
    line-height: 1.4 !important;
    transition: background 200ms, color 200ms !important;
    border: 0 !important;
}
.hfe-nav-menu .sub-menu li a:hover,
.hfe-nav-menu .sub-menu li a:focus,
.hfe-nav-menu .sub-menu li.current-menu-item > a,
.chunara-primary-menu .sub-menu li a:hover {
    background: #B01621 !important;
    color: #FFF !important;
}

/* Ensure the parent list-item can host the absolute-positioned
   submenu without being clipped. */
.hfe-nav-menu .menu-item-has-children {
    position: relative;
}

/* Mobile: submenu becomes a nested static list inside the drawer;
   flatten background so the dropdown card doesn't get double borders
   inside UAE's mobile menu panel. */
@media (max-width: 921px) {
    .hfe-nav-menu .sub-menu,
    .chunara-primary-menu .sub-menu {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 16px;
        min-width: 0;
    }
    .hfe-nav-menu .sub-menu li a {
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
}

/* =========================================================
   HERO ROTATOR — full-width slideshow with fade transitions
   Renders on the homepage from the chunara_hero_slide CPT.
   Each slide has a full-cover background image, a dark overlay
   for text legibility, a Playfair heading, body text, and a
   "Read More" CTA linked to a News CPT post.
   ========================================================= */
.cw-hero-rotator {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #1c1b1b;
}
.cw-hero-rotator .splide__track {
    height: auto;
}
.cw-hero-slide {
    position: relative;
    min-height: 640px;
    display: flex !important;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0;
    overflow: hidden;
    color: #FFF;
}
.cw-hero-slide__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}
.cw-hero-slide__overlay {
    position: absolute;
    inset: 0;
    /* Very light overlay — kept only as a safety net for lighter images
       uploaded later. The Chunara photos are already dark, so we don't
       add much on top. Text-shadow below carries most of the legibility. */
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.20) 100%);
    z-index: 2;
}
.cw-hero-slide__inner {
    position: relative;
    z-index: 3;
    max-width: 1400px;
    width: 100%;
    padding: 96px 80px 120px;
    margin: 0 auto;
}
.cw-hero-slide__title {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif !important;
    font-size: 52px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
    margin: 0 0 24px !important;
    color: #FFF !important;
    max-width: none;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
.cw-hero-slide__text {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif !important;
    font-size: 19px !important;
    line-height: 1.5 !important;
    margin: 0 0 32px !important;
    color: rgba(255,255,255,0.95) !important;
    max-width: 900px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.cw-hero-slide__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    background: #B01621;
    color: #FFF !important;
    padding: 18px 40px;
    border: 0;
    transition: background 200ms, transform 200ms;
}
.cw-hero-slide__cta:hover,
.cw-hero-slide__cta:focus {
    background: #7A0F17;
    color: #FFF !important;
    transform: translateX(2px);
}

/* Pagination dots — sit at the bottom of the rotator on a subtle strip */
.cw-hero-rotator .splide__pagination {
    position: absolute !important;
    bottom: 24px !important;
    left: 0; right: 0;
    z-index: 4;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.cw-hero-rotator .splide__pagination__page {
    width: 40px !important;
    height: 3px !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,0.4) !important;
    opacity: 1 !important;
    margin: 0 !important;
    transition: background 200ms;
    border: 0 !important;
}
.cw-hero-rotator .splide__pagination__page.is-active {
    background: #FFF !important;
    transform: none !important;
}

/* Mobile */
@media (max-width: 1024px) {
    .cw-hero-slide { min-height: 520px; }
    .cw-hero-slide__inner { padding: 72px 40px 96px; max-width: 100%; }
    .cw-hero-slide__title { font-size: 40px !important; }
    .cw-hero-slide__text { font-size: 17px !important; }
}
@media (max-width: 640px) {
    .cw-hero-slide { min-height: 460px; }
    .cw-hero-slide__inner { padding: 48px 24px 72px; }
    .cw-hero-slide__title { font-size: 30px !important; line-height: 1.15 !important; }
    .cw-hero-slide__text { font-size: 15px !important; margin-bottom: 24px !important; }
    .cw-hero-slide__cta { padding: 14px 28px; font-size: 12px; letter-spacing: 1.5px; }
    /* Keep the light overlay from the desktop rule — no phone-specific
       darker gradient, images already carry enough contrast. */
    .cw-hero-rotator .splide__pagination__page { width: 10px !important; height: 10px !important; }
}

/* =========================================================
   HERO ROTATOR — full-bleed viewport width
   The rotator's parent section may be boxed to the theme's
   content width. This "full-bleed" pattern pushes the element
   to viewport width regardless of parent boxing, using classic
   50vw margins with position:relative for wrap safety.
   ========================================================= */
.cw-hero-rotator {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    padding: 0 !important;
}
.cw-hero-rotator .splide__track,
.cw-hero-rotator .splide__list,
.cw-hero-rotator .splide__slide {
    padding: 0 !important;
    margin: 0 !important;
}
/* Prevent horizontal scrollbar from full-bleed math on browsers
   that count the scrollbar width in 100vw. */
html, body { overflow-x: hidden; }

/* =========================================================
   PARTNERS CAROUSEL — CSS-drawn arrow chevron
   Splide 4's default SVG can render blank on some setups
   (inherited fill not applying to <path>). Instead of
   fighting SVG cascade, we hide the SVG and draw the chevron
   with borders on a pseudo-element — guaranteed to render.
   ========================================================= */
.cw-partners-carousel .splide__arrow svg {
    display: none !important;
}
.cw-partners-carousel .splide__arrow {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Arial', 'Helvetica', sans-serif !important;
    padding: 0 !important;
    line-height: 1 !important;
}
/* Unicode chevron characters — guaranteed to render in every browser,
   no reliance on SVG cascade or border-transform tricks. */
.cw-partners-carousel .splide__arrow::before {
    display: block;
    color: #FFF;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    transform: none !important;
    margin: 0 !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    padding-bottom: 4px;
    transition: color 200ms;
}
.cw-partners-carousel .splide__arrow--prev::before { content: '‹'; padding-right: 3px; }
.cw-partners-carousel .splide__arrow--next::before { content: '›'; padding-left: 3px; }
.cw-partners-carousel .splide__arrow:disabled::before { color: rgba(255,255,255,0.5); }

/* =========================================================
   PARTNER CARDS — clickable, remove default link styling
   Each card is now an <a> so the whole card is a hit target.
   Kill underline, inherit color, keep hover states.
   ========================================================= */
.cw-partner-card--linked {
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.cw-partner-card--linked:hover,
.cw-partner-card--linked:focus {
    text-decoration: none !important;
    color: inherit !important;
}
.cw-partner-card--linked:focus-visible {
    outline: 3px solid #B01621;
    outline-offset: 3px;
}
.cw-partner-card--linked .cw-partner-card__name {
    transition: color 200ms;
}
.cw-partner-card--linked:hover .cw-partner-card__name,
.cw-partner-card--linked:focus .cw-partner-card__name {
    color: #B01621;
}

/* =========================================================
   PARTNER DETAIL — full landing page for /partners/{slug}/
   Two-column layout: portrait image left, name/meta/body right.
   Mirrors the visual language of the brand detail page.
   ========================================================= */
.cw-partner-detail {
    background: #FFF;
    padding: 64px 0 96px;
}
.cw-partner-detail__wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
}
.cw-partner-detail__crumbs {
    margin-bottom: 40px;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8f706d;
}
.cw-partner-detail__crumbs a {
    color: #B01621;
    text-decoration: none;
}
.cw-partner-detail__crumbs a:hover { text-decoration: underline; }
.cw-partner-detail__crumbs span[aria-hidden] { margin: 0 8px; }

.cw-partner-detail__grid {
    display: grid;
    grid-template-columns: minmax(280px, 400px) 1fr;
    gap: 64px;
    align-items: start;
}
.cw-partner-detail__media {
    position: sticky;
    top: 96px;
}
.cw-partner-detail__image {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #B01621;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 96px;
    font-weight: 700;
    letter-spacing: -3px;
    /* Background-image approach — see .cw-partner-card__avatar for the
       full rationale. Set inline as background-image:url(...) when a
       photo exists. */
    background-size: cover;
    background-position: center 25%;
    background-repeat: no-repeat;
}
.cw-partner-detail__initials {
    color: #FFF;
    line-height: 1;
}

.cw-partner-detail__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
}
.cw-partner-detail__name {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif !important;
    font-size: 56px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
    margin: 0 0 12px !important;
    color: #1c1b1b !important;
}
.cw-partner-detail__role {
    font-size: 20px;
    line-height: 1.5;
    color: #5b403e;
    margin: 0 0 32px;
    max-width: 640px;
}

.cw-partner-detail__meta {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0;
    margin: 0 0 40px;
    padding: 24px 0;
    border-top: 1px solid #e3bebb;
    border-bottom: 1px solid #e3bebb;
}
.cw-partner-detail__meta-row {
    display: contents;
}
.cw-partner-detail__meta dt {
    grid-column: 1;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #8f706d;
    padding: 10px 0;
}
.cw-partner-detail__meta dd {
    grid-column: 2;
    font-size: 15px;
    color: #1c1b1b;
    margin: 0;
    padding: 10px 0;
    line-height: 1.5;
}
.cw-partner-detail__meta a {
    color: #B01621;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms;
}
.cw-partner-detail__meta a:hover { border-bottom-color: #B01621; }

.cw-partner-detail__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cw-partner-detail__chip {
    display: inline-block;
    background: #fcf9f8;
    border: 1px solid #e3bebb;
    color: #1c1b1b;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.cw-partner-detail__content {
    font-size: 16px;
    line-height: 1.7;
    color: #1c1b1b;
    margin: 0 0 48px;
}
.cw-partner-detail__content p {
    margin: 0 0 20px;
}
.cw-partner-detail__content p:last-child { margin-bottom: 0; }

.cw-partner-detail__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.cw-partner-detail__actions .cw-btn {
    padding: 16px 32px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none;
    transition: background 200ms, color 200ms;
    display: inline-block;
}
.cw-partner-detail__actions .cw-btn--primary {
    background: #B01621;
    color: #FFF;
}
.cw-partner-detail__actions .cw-btn--primary:hover { background: #7A0F17; color: #FFF; }
.cw-partner-detail__actions .cw-btn--ghost {
    background: transparent;
    color: #B01621;
    border: 2px solid #B01621;
    padding: 14px 30px;
}
.cw-partner-detail__actions .cw-btn--ghost:hover {
    background: #B01621;
    color: #FFF;
}

@media (max-width: 900px) {
    .cw-partner-detail__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .cw-partner-detail__media {
        position: static;
        max-width: 320px;
        margin: 0 auto;
    }
    .cw-partner-detail__name { font-size: 40px !important; }
    .cw-partner-detail__meta {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .cw-partner-detail__meta-row { display: block; padding: 12px 0; border-bottom: 1px solid #f0e6e4; }
    .cw-partner-detail__meta-row:last-child { border-bottom: 0; }
    .cw-partner-detail__meta dt { padding: 0 0 4px; }
    .cw-partner-detail__meta dd { padding: 0; }
}
@media (max-width: 640px) {
    .cw-partner-detail { padding: 40px 0 64px; }
    .cw-partner-detail__wrap { padding: 0 24px; }
    .cw-partner-detail__name { font-size: 32px !important; }
    .cw-partner-detail__role { font-size: 17px; }
}

/* Hide the theme's default post-title output on partner singles so
   the shortcode's H1 is the only one. Hello Elementor uses
   .entry-header / .entry-title; other themes use .page-title. */
body.single-chunara_partner .entry-header,
body.single-chunara_partner .entry-title,
body.single-chunara_partner .page-title,
body.single-chunara_partner header.page-header {
    display: none !important;
}

/* =========================================================
   HERO ROTATOR — arrows + pagination polish
   Explicit styling for the arrows we just enabled in widgets.js.
   Arrows sit centered vertically over the slide, subtle background
   that doesn't compete with the hero copy. Pagination changes from
   long bars to round dots so it reads clearly as a slide picker.
   ========================================================= */
.cw-hero-rotator .splide__arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 52px !important;
    height: 52px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    z-index: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-family: 'Arial', 'Helvetica', sans-serif !important;
    line-height: 1 !important;
    transition: background 200ms, border-color 200ms !important;
    cursor: pointer;
}
.cw-hero-rotator .splide__arrow:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}
.cw-hero-rotator .splide__arrow--prev { left: 32px !important; right: auto !important; }
.cw-hero-rotator .splide__arrow--next { right: 32px !important; left: auto !important; }
.cw-hero-rotator .splide__arrow svg { display: none !important; }
.cw-hero-rotator .splide__arrow::before {
    display: block;
    color: #FFF;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    padding-bottom: 4px;
    border: 0 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
}
.cw-hero-rotator .splide__arrow--prev::before { content: '‹'; padding-right: 3px; }
.cw-hero-rotator .splide__arrow--next::before { content: '›'; padding-left: 3px; }

/* Pagination: round dots instead of long bars, more universally read as
   "click a slide". Sits at the bottom of the rotator over a subtle strip. */
.cw-hero-rotator .splide__pagination {
    position: absolute !important;
    bottom: 24px !important;
    left: 0; right: 0;
    z-index: 10;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.cw-hero-rotator .splide__pagination__page {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 0 !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: background 200ms, transform 200ms !important;
    cursor: pointer;
}
.cw-hero-rotator .splide__pagination__page:hover {
    background: rgba(255, 255, 255, 0.85) !important;
}
.cw-hero-rotator .splide__pagination__page.is-active {
    background: #FFF !important;
    transform: scale(1.3) !important;
}

@media (max-width: 640px) {
    .cw-hero-rotator .splide__arrow {
        width: 40px !important;
        height: 40px !important;
    }
    .cw-hero-rotator .splide__arrow--prev { left: 12px !important; }
    .cw-hero-rotator .splide__arrow--next { right: 12px !important; }
    .cw-hero-rotator .splide__arrow::before { font-size: 26px; }
}

/* =========================================================
   HOMEPAGE — kill theme's default top padding so the hero
   rotator sits flush with the Chunara header (no gap).
   Twenty Twenty-Five and other block themes wrap post
   content in .wp-block-post-content or main.wp-site-blocks
   with top padding from their theme.json; we zero it out
   on the homepage only so other pages keep their spacing.
   ========================================================= */
body.home main,
body.home main.wp-block-group,
body.home .wp-site-blocks > main,
body.home .wp-block-post-content,
body.home .entry-content {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    max-width: none !important;
}
body.home article,
body.home .hentry {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================================
   CANVAS TEMPLATE — used by partner CPT singles
   The canvas-partner.php template renders only <main> + the
   shortcode content. This block ensures that main has no
   default padding/margins from block-theme stylesheets.
   ========================================================= */
body.chunara-canvas .chunara-canvas__main {
    padding: 0;
    margin: 0;
    min-height: 60vh;
    background: #FFF;
}
body.chunara-canvas {
    background: #FFF;
    margin: 0;
    padding: 0;
}

/* =========================================================
   BRAND GRID — homepage responsive logo grid alternative
   to the scrolling marquee. Renders when the shortcode is
   used as [chunara_brand_marquee layout="grid"].
   Mobile: 2 columns. Tablet: 3 columns. Desktop: 4 columns
   (customizable via the cols="N" attribute).
   ========================================================= */
.cw-brand-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}
@media (min-width: 720px) {
    .cw-brand-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (min-width: 1024px) {
    .cw-brand-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
    .cw-brand-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
    .cw-brand-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
    .cw-brand-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
    .cw-brand-grid { gap: 28px; }
}

.cw-brand-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #1c1b1b;
    background: #FFF;
    border: 1px solid #e3bebb;
    padding: 16px;
    transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.cw-brand-grid__item:hover,
.cw-brand-grid__item:focus {
    border-color: #B01621;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -16px rgba(176, 22, 33, 0.28);
    text-decoration: none;
    color: #1c1b1b;
}
.cw-brand-grid__item:focus-visible {
    outline: 3px solid #B01621;
    outline-offset: 3px;
}

.cw-brand-grid__item img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    background: #f6f3f2;
}
/* Logo mode: contain (no crop), padded, white ground so brand marks
   of any color/shape render cleanly on the same visual bed. */
.cw-brand-grid__item--logo img {
    object-fit: contain;
    padding: 16px;
    background: #FFF;
    aspect-ratio: 3 / 2;
}

.cw-brand-grid__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: #B01621;
    color: #FFF;
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 12px;
}

.cw-brand-grid__label {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #1c1b1b;
    text-align: center;
    letter-spacing: 0.02em;
    line-height: 1.3;
    transition: color 200ms;
}
.cw-brand-grid__item:hover .cw-brand-grid__label {
    color: #B01621;
}

@media (max-width: 640px) {
    .cw-brand-grid { padding: 0 16px; gap: 14px; }
    .cw-brand-grid__item { padding: 12px; }
    .cw-brand-grid__label { font-size: 12px; }
}

/* =========================================================
   STATS BAR — force 2-column mobile layout
   Elementor stacks columns to 100% width on mobile by default.
   The stats bar reads better as a 2x2 grid on phones (4 short
   rows feel excessive). Targets .chunara-stats-bar, the class
   stamped on the section by ch_stats_bar_section helper.
   ========================================================= */
@media (max-width: 767px) {
    .elementor-section.chunara-stats-bar .elementor-container,
    .chunara-stats-bar .elementor-container {
        flex-wrap: wrap !important;
    }
    .elementor-section.chunara-stats-bar > .elementor-container > .elementor-column,
    .chunara-stats-bar .elementor-container > .elementor-column {
        width: 50% !important;
        max-width: 50% !important;
    }
    /* Tighten vertical rhythm so 2x2 grid doesn't feel airy */
    .chunara-stats-bar .elementor-widget-counter {
        padding: 8px 0 !important;
    }
}

/* =========================================================
   BRAND GRID — tighter mobile spacing
   The desktop card padding (16px) plus outer grid gap (24px)
   feels roomy on phones and shrinks the images visually.
   Tighten padding, gap, and outer padding on mobile so the
   logos read larger.
   ========================================================= */
@media (max-width: 640px) {
    .cw-brand-grid {
        padding: 0 12px !important;
        gap: 10px !important;
    }
    .cw-brand-grid__item {
        padding: 6px !important;
        gap: 8px !important;
    }
    .cw-brand-grid__item img,
    .cw-brand-grid__item--logo img {
        padding: 6px !important;
    }
    .cw-brand-grid__label {
        font-size: 12px !important;
        padding: 0 4px 6px !important;
    }
}

/* =========================================================
   HEADER — force hamburger toggle visible on mobile
   Defensive rule for cases where the UAE Nav Menu widget's
   mobile toggle got hidden by an edit. If the toggle button
   exists in the DOM, this forces it visible; if it's been
   fully removed from the widget, the header template needs
   a redeploy (Site Setup → Redeploy Header & Footer only).
   ========================================================= */
@media (max-width: 921px) {
    .hfe-nav-menu__toggle,
    .hfe-nav-menu-icon,
    .hfe-mobile-menu-hamburger-icon,
    button.hfe-nav-menu__toggle,
    .elementor-widget-navigation-menu .hfe-nav-menu__toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* Hide the desktop menu on mobile so only the hamburger shows */
    .hfe-nav-menu {
        display: none;
    }
    .hfe-nav-menu.hfe-dropdown-active {
        display: flex;
    }
}

/* =========================================================
   STATS BAR — mobile 2-column layout, robust selector.
   The class-based rule requires the section carry the
   chunara-stats-bar css_class, which existing seeded sections
   may not have. This :has() rule targets any Elementor column
   containing a counter widget directly, so it works on every
   stats section regardless of setup date.
   :has() is supported in Chrome 105+, Safari 15.4+, Firefox 121+.
   ========================================================= */
@media (max-width: 767px) {
    .elementor-section:has(.elementor-widget-counter) > .elementor-container {
        flex-wrap: wrap !important;
    }
    .elementor-column:has(> .elementor-element-populated > .elementor-widget-counter),
    .elementor-column:has(> .elementor-widget-counter) {
        width: 50% !important;
        max-width: 50% !important;
        flex-basis: 50% !important;
    }
    .elementor-widget-counter {
        padding: 12px 0 !important;
    }
}

/* =========================================================
   PARTNER CARDS — smaller on mobile
   The 4:5 aspect at full mobile width makes each card ~380px
   tall, dominating the viewport. Shrink to 1:1 (square) on
   phones and cap the max width so each card doesn't span the
   full row width when carousel is 1-per-view.
   ========================================================= */
@media (max-width: 640px) {
    .cw-partner-card__avatar {
        aspect-ratio: 1 / 1 !important;
    }
    .cw-partner-card {
        max-width: 260px;
        margin: 0 auto;
    }
    .cw-partner-card__name {
        font-size: 18px !important;
        margin: 12px 16px 4px !important;
    }
    .cw-partner-card__llc,
    .cw-partner-card__role {
        font-size: 12px !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
    .cw-partner-card__joined {
        font-size: 11px !important;
        padding: 8px 16px 12px !important;
    }
    .cw-partner-card__avatar {
        font-size: 40px !important;
    }
    /* Partners carousel arrows sit closer to the shorter cards */
    .cw-partners-carousel .splide__arrows {
        margin-top: 20px !important;
    }
}

/* =========================================================
   SEARCH BUTTON — armor against Elementor kit / theme rules.
   The .cw-btn--primary rule uses !important only on color, so
   themes that inject `background: transparent !important` on
   buttons win. Force background too.
   ========================================================= */
.cw-btn.cw-btn--primary,
.cw-locator-preview__form button.cw-btn--primary,
button.cw-btn--primary {
    background: #B01621 !important;
    background-color: #B01621 !important;
    color: #FFFFFF !important;
    border: 2px solid #B01621 !important;
    box-shadow: none !important;
}
.cw-btn.cw-btn--primary:hover,
.cw-btn.cw-btn--primary:focus,
button.cw-btn--primary:hover,
button.cw-btn--primary:focus {
    background: #7A0F17 !important;
    background-color: #7A0F17 !important;
    color: #FFFFFF !important;
    border-color: #7A0F17 !important;
}

/* =========================================================
   CONTACT FORM CONSENT — checkbox + text flow properly
   The consent row was breaking with the Privacy Policy link
   wrapping onto its own two lines instead of flowing inline.
   Flex + gap keeps the checkbox as one column and the text
   (including the link) as a natural flowing paragraph.
   ========================================================= */
.chunara-form__consent,
.chunara-form__consent label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    line-height: 1.5 !important;
}
.chunara-form__consent input[type="checkbox"] {
    flex: 0 0 auto !important;
    margin-top: 3px !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: #B01621;
}
.chunara-form__consent .chunara-form__consent-text,
.chunara-form__consent > *:not(input) {
    flex: 1 1 auto !important;
    display: block !important;
    line-height: 1.5 !important;
}
.chunara-form__consent a {
    display: inline !important;
    white-space: normal !important;
    color: #B01621;
    font-weight: 600;
}

/* =========================================================
   ACCESSIBILITY WIDGET — best-effort close-button visibility.
   The specific third-party plugin isn't named, but almost all
   accessibility widgets follow one of a few common patterns:
   .userway-close, .asw-close, .accessible-close etc. Force a
   visible × character inside any close-icon button in a
   dialog-like container that lacks its own content.
   ========================================================= */
[role="dialog"] button[aria-label*="lose" i]:empty::before,
.userway-close:empty::before,
.asw-close:empty::before,
[class*="accessibility"] [class*="close"]:empty::before {
    content: '\00d7'; /* × Unicode multiplication sign */
    display: block;
    font-family: Arial, sans-serif;
    font-size: 22px;
    line-height: 1;
    color: #FFF;
    font-weight: 400;
}

/* =========================================================
   LEGAL PAGES — typography for the four .chunara-legal
   layouts. Long-form dense text with clear hierarchy.
   ========================================================= */
.chunara-legal {
    max-width: 820px;
    margin: 0 auto;
    padding: 64px 24px;
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    color: #1c1b1b;
    line-height: 1.65;
    font-size: 16px;
}
.chunara-legal__header {
    padding-bottom: 32px;
    margin-bottom: 40px;
    border-bottom: 1px solid #e3bebb;
}
.chunara-legal__title {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    margin: 0 0 16px;
    color: #1c1b1b;
}
.chunara-legal__meta {
    font-size: 13px;
    color: #5b403e;
    margin: 0 0 20px;
}
.chunara-legal__intro {
    font-size: 18px;
    color: #5b403e;
    line-height: 1.55;
    margin: 0;
}
.chunara-legal__section {
    margin-bottom: 40px;
}
.chunara-legal__section h2 {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1c1b1b;
    margin: 0 0 12px;
    line-height: 1.25;
}
.chunara-legal__section h3 {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8f706d;
    margin: 20px 0 8px;
}
.chunara-legal__section p {
    margin: 0 0 12px;
}
.chunara-legal__section ul {
    margin: 0 0 12px 20px;
    padding: 0;
}
.chunara-legal__section li {
    margin-bottom: 6px;
}
.chunara-legal__section a {
    color: #B01621;
    text-decoration: underline;
    text-decoration-color: rgba(176, 22, 33, 0.35);
    text-underline-offset: 2px;
    transition: text-decoration-color 200ms;
}
.chunara-legal__section a:hover {
    text-decoration-color: #B01621;
}
.chunara-legal__footer {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #e3bebb;
    font-size: 13px;
    color: #8f706d;
}
.chunara-legal__footer p { margin: 0 0 6px; }
@media (max-width: 640px) {
    .chunara-legal { padding: 40px 20px; font-size: 15px; }
    .chunara-legal__title { font-size: 34px; }
    .chunara-legal__section h2 { font-size: 20px; }
}

/* =========================================================
   OPEN SANS — enforce site-wide.
   Belt-and-suspenders: Elementor's Global Kit already sets
   Open Sans, but themes and third-party plugins occasionally
   inject their own font-family. This global rule catches any
   element not explicitly targeted elsewhere.

   !important is required because existing Elementor pages have
   font-family baked into their per-widget CSS (from when the
   Global Kit specified Playfair/Inter). Those per-widget rules
   have high specificity (e.g. .elementor-{ID} .elementor-heading-title)
   but no !important. Our !important beats them without needing to
   redeploy every page and lose manual Elementor edits.
   ========================================================= */
body,
body * {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif !important;
}
/* Keep icon fonts intact — Font Awesome, Material Symbols, Splide,
   Dashicons etc. use their glyph fonts as their "family" and would
   render as boxes if forced to Open Sans. Order matters: this rule
   comes after the global rule so it wins on source order at equal
   specificity with equal !important. */
i, em i, .fa, .fas, .far, .fal, .fab, .fad,
[class^="fa-"], [class*=" fa-"],
.material-symbols-outlined, .material-icons,
.dashicons, .dashicons-before::before,
.splide__arrow svg *,
.hfe-icon,
[class^="icon-"], [class*=" icon-"] {
    font-family: revert !important;
}

/* =========================================================
   ACCESSIBILITY WIDGET — best-effort broader CSS
   Common accessibility plugins (UserWay, AccessiBe,
   All-in-One Accessibility, One Click Accessibility, Equally
   AI, Accessibly) each use different DOM structures. This
   block force-shows a visible × on any close-button-like
   element and enlarges any small person-icon on the floating
   trigger.
   ========================================================= */

/* Enlarge the floating trigger's inner icon regardless of plugin */
.userway_buttons_wrapper svg,
.asw-menu-btn svg,
.aioa-icon-type-2 svg,
.aioa-icon-type-3 svg,
[class*="accessibility"][class*="button"] svg,
[class*="accessibility"][class*="icon"] svg,
#accessibility-widget svg,
[aria-label*="accessibility" i] svg,
[aria-label*="accessibility" i] i {
    width: 60% !important;
    height: 60% !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 44px !important;
    max-height: 44px !important;
}
/* If the trigger uses a background image or ::before glyph */
[aria-label*="accessibility" i]::before,
[class*="accessibility"][class*="button"]::before {
    font-size: 28px !important;
}

/* Force a visible × on close buttons across common variants */
.userway-close::before,
.userway-close-btn::before,
.asw-menu-close::before,
.aioa-close-menu::before,
.aioa-close::before,
[role="dialog"] [aria-label*="close" i]:empty::before,
[role="dialog"] button.close:empty::before,
[class*="accessibility"] [class*="close"]:empty::before,
[data-testid*="close" i]:empty::before {
    content: '\00d7' !important;
    display: inline-block !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: #FFFFFF !important;
    font-weight: 400 !important;
    text-align: center !important;
}

/* If the close button has a red background (matching the previous
   screenshot), ensure the × contrasts. */
[role="dialog"] [aria-label*="close" i] {
    color: #FFFFFF !important;
}
[role="dialog"] [aria-label*="close" i] svg {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    width: 60% !important;
    height: 60% !important;
    min-width: 14px !important;
    min-height: 14px !important;
}