/* Site-specific overrides for King Ceyda.
   Kept separate from the vendor theme so style.css can still be regenerated
   from assets/scss/ without losing these changes. */

/* The theme assumed short English video titles. Real Somali titles run long
   and were covering the whole thumbnail, so clamp them and keep the meta row
   readable against the artwork. */
.jo-video-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The hero portrait is wrapped in <picture> for the WebP/PNG fallback, which
   breaks the theme's `.jo-banner__img > img` direct-child selector. Re-apply
   the same sizing to the wrapped image. */
.jo-banner__img>picture>img {
    max-width: 33.854vw;
}

@media (max-width: 991px) {
    .jo-banner__img>picture>img {
        max-width: 60%;
        margin: auto;
    }
}

.jo-video-card .jo-video-card__txt {
    background: linear-gradient(to top,
            rgba(0, 0, 0, .88) 0%,
            rgba(0, 0, 0, .70) 45%,
            rgba(0, 0, 0, 0) 100%);
}


/* ==========================================================================
   Logo lockup — crown mark + "King Ceyda" wordmark
   Built as markup rather than an SVG file so the wordmark uses the same Anton
   webfont as the hero, stays crisp at any size, and recolours for the dark
   footer without needing a second asset.
   Scale the whole lockup by setting font-size on .ck-logo.
   ========================================================================== */

.ck-logo {
    display: inline-flex;
    align-items: center;
    gap: .42em;
    font-size: 25px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: #1b0f2b;
}

.ck-logo:hover {
    text-decoration: none;
    color: #1b0f2b;
}

.ck-logo__mark {
    flex: none;
    width: 1.32em;
    height: 1.32em;
}

.ck-logo__word {
    font-family: Anton, "Arial Narrow", sans-serif;
    font-weight: 400;
    font-size: 1em;
    letter-spacing: .012em;
    color: inherit;
}

/* Dark footer panel. */
.ck-logo--light,
.ck-logo--light:hover {
    color: #fff;
}

.ck-logo--light .ck-logo__mark {
    fill: #fff;
}

/* The theme sized the old <img> per slot; re-apply those to the lockup. */
.jo-sidebar .ck-logo {
    font-size: 23px;
}

.jo-footer-top .ck-logo {
    font-size: 30px;
    width: auto;
}

@media (max-width: 575px) {

    .ck-logo,
    .jo-footer-top .ck-logo {
        font-size: 21px;
    }
}


/* Honeypot field — must be invisible to people but present in the DOM for
   bots to find. Deliberately not display:none, which some bots skip. */
.ck-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Form result banner (send.php redirects back with ?sent=1 or ?error=1). */
.ck-formmsg {
    margin: 0 0 1.25rem;
    padding: .9rem 1.1rem;
    border-radius: 12px;
    font-size: .95rem;
    line-height: 1.5;
}

.ck-formmsg--ok {
    background: rgba(28, 160, 90, .12);
    border: 1px solid rgba(28, 160, 90, .35);
    color: #12703f;
}

.ck-formmsg--err {
    background: rgba(214, 38, 106, .10);
    border: 1px solid rgba(214, 38, 106, .35);
    color: #a01044;
}


/* Contact CTA card.
   The theme gives this card `margin-bottom: -225px` so it hangs down and
   overlaps the "Trusted Partners" strip that used to sit below it. That strip
   was removed (unverifiable brand logos), so the overhang had nothing to hang
   into and `.jo-contact { overflow: hidden }` was clipping the Send Message
   button. Drop the negative margin and give the section real bottom padding. */
.jo-contact-form-wrapper {
    margin-bottom: 0;
}

.jo-contact .top {
    padding-bottom: 100px;
}

@media (max-width: 1199px) {
    .jo-contact .top {
        padding-bottom: 70px;
    }
}


/* The theme's breadcrumb banner is a placeholder JPG that literally reads
   "1920X585". Until a real banner image exists, use the site's own gradient
   rather than shipping the placeholder. */
.jo-breadcrumb {
    background: linear-gradient(103deg, #d94f9e 0%, #ef7d7d 38%, #f0a95f 72%, #e98fb4 100%);
}

/* ==========================================================================
   Reels — official TikTok / Instagram / Facebook embeds behind platform tabs
   ========================================================================== */

.ck-reels__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 2rem;
}

.ck-reels__tabs {
    display: inline-flex;
    gap: .35rem;
    padding: .3rem;
    border-radius: 100px;
    background: rgba(27, 15, 43, .06);
}

.ck-reels__tab {
    border: 0;
    background: transparent;
    border-radius: 100px;
    padding: .55rem 1.15rem;
    font-size: .9rem;
    font-weight: 600;
    color: #1b0f2b;
    opacity: .65;
    cursor: pointer;
    transition: background .18s ease, opacity .18s ease;
}

.ck-reels__tab:hover {
    opacity: 1;
}

.ck-reels__tab.is-active {
    background: #fff;
    opacity: 1;
    box-shadow: 0 2px 8px rgba(27, 15, 43, .12);
}

.ck-reels__panel[hidden] {
    display: none;
}

.ck-reels__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

/* Embeds size themselves via their own script; give each slot a stable box so
   the page doesn't reflow as the third-party iframes settle. */
.ck-reel {
    position: relative;
    min-height: 580px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(27, 15, 43, .05);
}

.ck-reel iframe {
    width: 100%;
    height: 100%;
    min-height: 580px;
    border: 0;
    display: block;
}

.ck-reel--ig {
    min-height: 520px;
}

.ck-reel--ig iframe {
    min-height: 520px;
}

.ck-reels__fb {
    max-width: 340px;
    margin-inline: auto;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(27, 15, 43, .05);
}

.ck-reels__fb iframe {
    width: 100%;
    height: 170px;
    border: 0;
    display: block;
}

.ck-reels__more {
    margin-top: 2rem;
    text-align: center;
}

@media (max-width: 575px) {
    .ck-reels__grid {
        grid-template-columns: 1fr;
    }

    .ck-reels__heading {
        justify-content: center;
        text-align: center;
    }
}


/* ==========================================================================
   Hero — bespoke treatment (.ck-*)
   Replaces the theme's stock banner headline. Deliberately not reusing
   .jo-banner__title so the vendor styles stay untouched.
   ========================================================================== */

.ck-hero {
    --ck-ink: #1b0f2b;
    position: relative;
    z-index: 2;
    padding-block: clamp(2rem, 5vw, 4.5rem);
}

/* Kicker ------------------------------------------------------------------ */
.ck-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.25rem;
    padding: .5rem 1.1rem .5rem .8rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .3);
    border: 1px solid rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--ck-ink);
    font-size: clamp(.72rem, 1.05vw, .85rem);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1;
}

.ck-hero__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff2d55;
    box-shadow: 0 0 0 0 rgba(255, 45, 85, .7);
    animation: ck-pulse 2.4s infinite;
}

@keyframes ck-pulse {
    70% {
        box-shadow: 0 0 0 10px rgba(255, 45, 85, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 45, 85, 0);
    }
}

/* Headline ---------------------------------------------------------------- */
.ck-hero__title {
    margin: 0 0 1.4rem;
    line-height: .92;
    letter-spacing: -.035em;
    color: var(--white);
}

.ck-hero__line1 {
    display: block;
    font-size: clamp(1rem, 1.9vw, 1.6rem);
    font-weight: 500;
    /* Kept modest: wide tracking pulls the apostrophe off "I'm". */
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: .5rem;
}

.ck-hero__name {
    display: block;
    /* Anton is condensed, so it carries a larger size than Inter did in the
       same column width. Ships with a single weight — 400 renders as black. */
    font-family: Anton, "Arial Narrow", sans-serif;
    font-weight: 400;
    font-size: clamp(3.4rem, 9.6vw, 9.75rem);
    letter-spacing: .005em;
    /* background-clip:text clips the gradient to the element box, not to the
       glyph outlines — so a line-height below 1 silently cut the descenders
       off "g" and "y". Keep the box taller than the ink. */
    line-height: 1.04;
    /* Generous, because Anton's descent metric is deep. The negative margin
       below cancels the extra box height so the layout does not shift. */
    padding-bottom: .26em;
    margin-bottom: -.16em;
    /* Ink -> magenta. An earlier version swept to white, which lost all
       contrast against the amber half of the banner; every stop here stays
       dark enough to read across the whole gradient. */
    background: linear-gradient(96deg, var(--ck-ink) 0%, #52204a 38%, #c9265c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: .08em;
}

/* Lede -------------------------------------------------------------------- */
.ck-hero__lede {
    max-width: 46ch;
    margin: 0 0 2rem;
    color: var(--ck-ink);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.6;
    opacity: .85;
}

/* Stat strip -------------------------------------------------------------- */
.ck-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.25rem, 3.5vw, 3rem);
    margin: 0 0 2.25rem;
    padding: 0;
}

.ck-hero__stats>div {
    position: relative;
}

.ck-hero__stats>div+div::before {
    position: absolute;
    content: "";
    left: calc(-1 * clamp(1.25rem, 3.5vw, 3rem) / 2);
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: rgba(27, 15, 43, .22);
}

.ck-hero__stats dt {
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--white);
}

.ck-hero__stats dd {
    margin: .35rem 0 0;
    font-size: clamp(.7rem, 1vw, .82rem);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ck-ink);
    opacity: .7;
}

/* Buttons ----------------------------------------------------------------- */
.ck-hero__btns {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.ck-hero__btns .flaticon-youtube-1 {
    margin-right: .4rem;
}

/* Figure ------------------------------------------------------------------ */
.ck-hero__figure>picture>img {
    filter: drop-shadow(0 24px 48px rgba(27, 15, 43, .28));
}

@media (max-width: 991px) {
    .ck-hero {
        text-align: center;
        padding-block: 3rem 1rem;
    }

    .ck-hero__lede {
        margin-inline: auto;
    }

    .ck-hero__stats,
    .ck-hero__btns {
        justify-content: center;
    }
}