/* ------------------------------------------------------------------
   LDelight CMS — styles for content the theme does not cover:
   rich text from the editor, TOC, answer blocks, forms and a11y.
   Layered on top of main.css; uses the theme's colour variables.
   ------------------------------------------------------------------ */

:root {
    --ld-main: #5B3DF5;
    --ld-main-dark: #4526E6;
    --ld-heading: #0B0B15;
    --ld-body: #5C5C72;
    --ld-border: #E6E6EF;
    --ld-surface: #F7F7FB;
}

/* --- Accessibility ------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: var(--ld-main);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 8px 0;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--ld-main);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Reserve layout space for images so they cannot shift content (CLS). */
img { max-width: 100%; height: auto; }

/* --- Rich text (editor output) ------------------------------------- */
.rich-text { color: var(--ld-body); font-size: 1.0625rem; line-height: 1.8; }
.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child { margin-bottom: 0; }

.rich-text h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: var(--ld-heading);
    margin: 2.75rem 0 1rem;
    scroll-margin-top: 110px;
}
.rich-text h3 {
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    color: var(--ld-heading);
    margin: 2.25rem 0 .85rem;
    scroll-margin-top: 110px;
}
.rich-text h4 { font-size: 1.15rem; color: var(--ld-heading); margin: 1.75rem 0 .75rem; }
.rich-text p { margin-bottom: 1.35rem; }

.rich-text a {
    color: var(--ld-main);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.rich-text a:hover { color: var(--ld-main-dark); }

.rich-text ul, .rich-text ol { margin: 0 0 1.5rem; padding-left: 1.35rem; }
.rich-text ul { list-style: none; padding-left: 0; }
.rich-text ul > li {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: .7rem;
}
.rich-text ul > li::before {
    content: "";
    position: absolute;
    left: .35rem;
    top: .68em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ld-main);
}
.rich-text ol > li { margin-bottom: .7rem; padding-left: .35rem; }
.rich-text li > ul, .rich-text li > ol { margin-top: .7rem; margin-bottom: 0; }

.rich-text blockquote {
    margin: 2rem 0;
    padding: 1.5rem 1.75rem;
    border-left: 4px solid var(--ld-main);
    background: var(--ld-surface);
    border-radius: 0 10px 10px 0;
    font-size: 1.15rem;
    color: var(--ld-heading);
    font-style: normal;
}
.rich-text blockquote p:last-child { margin-bottom: 0; }

.rich-text img,
.rich-text figure > img {
    border-radius: 12px;
    margin: 1.75rem 0;
    display: block;
}
.rich-text figure { margin: 1.75rem 0; }
.rich-text figcaption {
    font-size: .9rem;
    color: #8A8AA3;
    text-align: center;
    margin-top: .65rem;
}

.rich-text code {
    background: var(--ld-surface);
    border: 1px solid var(--ld-border);
    border-radius: 5px;
    padding: .15em .45em;
    font-size: .9em;
    color: #C2255C;
}
.rich-text pre {
    background: #14141F;
    color: #E8E8F5;
    padding: 1.35rem 1.5rem;
    border-radius: 12px;
    overflow-x: auto;
    margin: 1.75rem 0;
    font-size: .9rem;
    line-height: 1.65;
}
.rich-text pre code { background: none; border: 0; color: inherit; padding: 0; }

/* Tables must scroll rather than blow out the page on small screens. */
.rich-text .table-wrap { overflow-x: auto; margin: 1.75rem 0; }
.rich-text table {
    width: 100%;
    border-collapse: collapse;
    font-size: .97rem;
    min-width: 520px;
}
.rich-text th, .rich-text td {
    border: 1px solid var(--ld-border);
    padding: .8rem 1rem;
    text-align: left;
    vertical-align: top;
}
.rich-text th { background: var(--ld-surface); color: var(--ld-heading); font-weight: 600; }
.rich-text tbody tr:nth-child(even) { background: #FBFBFE; }

.rich-text hr { border: 0; border-top: 1px solid var(--ld-border); margin: 2.5rem 0; }

.rich-text iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 12px;
    margin: 1.75rem 0;
}

/* --- Table of contents --------------------------------------------- */
.toc__list { list-style: none; padding-left: 0; counter-reset: toc; }
.toc__list > li { padding-left: 1.1rem; position: relative; }
.toc__list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .7em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #C9C9DE;
}
.toc__sub { padding-left: 2.1rem !important; font-size: .95rem; }
.toc__sub::before { left: 1rem !important; }

/* --- Answer block --------------------------------------------------- */
.answer-block { border-left-style: solid; }
.answer-block ul { list-style: none; padding-left: 0; }

/* --- Breadcrumbs ---------------------------------------------------- */
.breadcrumb-list { list-style: none; padding-left: 0; font-size: .93rem; }

/* --- Utility spacing the theme lacks -------------------------------- */
.max-w-400-px { max-width: 400px; }
.max-w-700-px { max-width: 700px; }
.max-w-800-px { max-width: 800px; }
.max-w-900-px { max-width: 900px; }
.tw-h-240-px { height: 240px; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Cards ---------------------------------------------------------- */
.post-card, .service-card, .metric-card, .case-card {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.post-card:hover, .service-card:hover, .case-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(11, 11, 21, .08);
}

.metric-card { background: var(--ld-surface); border-radius: 14px; padding: 1.75rem; }
.metric-card__value { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; color: var(--ld-main); line-height: 1.1; }

/* --- Forms ---------------------------------------------------------- */
.form-control-ld {
    width: 100%;
    height: 56px;
    border: 1px solid var(--ld-border);
    border-radius: 10px;
    padding: 0 1.15rem;
    color: var(--ld-heading);
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
textarea.form-control-ld { height: auto; padding: 1rem 1.15rem; min-height: 150px; resize: vertical; }
.form-control-ld:focus {
    border-color: var(--ld-main);
    box-shadow: 0 0 0 4px rgba(91, 61, 245, .12);
    outline: none;
}
.form-label-ld { display: block; font-weight: 600; color: var(--ld-heading); margin-bottom: .5rem; font-size: .95rem; }
.form-error { color: #D93025; font-size: .9rem; margin-top: .35rem; }
.form-hint { color: #8A8AA3; font-size: .875rem; margin-top: .35rem; }

.alert-ld { padding: 1rem 1.25rem; border-radius: 10px; margin-bottom: 1.5rem; font-weight: 500; }
.alert-ld--error { background: #FDECEA; color: #A6231A; border: 1px solid #F6C7C2; }
.alert-ld--success { background: #E7F7EE; color: #10693C; border: 1px solid #BEE8D1; }

/* --- Sticky sidebar ------------------------------------------------- */
@media (min-width: 992px) {
    .sticky-side { position: sticky; top: 110px; }
}

/* --- Print ---------------------------------------------------------- */
@media print {
    .header, .footer, .cta-band, .progress-wrap, .preloader, .mobile-menu { display: none !important; }
    .rich-text a::after { content: " (" attr(href) ")"; font-size: .85em; color: #666; }
}

/* --- Header dropdowns ------------------------------------------------
   The theme's submenu markup relies on a `tw-w-max` utility that its
   compiled CSS never defines. Without it the submenu falls back to
   min-width:190px and shrink-to-fits against the parent <li>, which wraps
   every label onto two lines. Size the menus to their content instead.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
    .header-menu .nav-submenu {
        width: max-content;
        min-width: 220px;
        max-width: 380px;
    }

    /* Labels set the width and must stay on one line; descriptions may wrap. */
    .header-menu .nav-submenu__link { white-space: nowrap; }

    .nav-submenu__desc {
        display: block;
        white-space: normal;
        max-width: 250px;
        line-height: 1.4;
        margin-top: 2px;
    }

    /* A twelve-item menu in one column becomes a 400px scrolling strip.
       Two columns fit it on screen without scrolling at all. */
    .header-menu .nav-submenu--wide {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 4px;
        max-width: 640px;
        max-height: none;
        overflow: visible;
    }
}

/* Six top-level items with real words do not fit the theme's 3.5rem nav gap at
   the narrow end of desktop, so the labels themselves wrap ("Servi/ces").
   Keep labels intact and tighten the gap instead. */
@media (min-width: 992px) {
    .header-menu .nav-menu__link,
    .header .btn .button__label { white-space: nowrap; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .header-menu .nav-menu.tw-gap-14 { gap: 1.5rem; }
    .header .btn { padding-inline: 1.25rem; }
    .header .logo img { max-width: 150px; }
    /* Keep a two-column dropdown inside the viewport at this width. */
    .header-menu .nav-submenu--wide { max-width: 520px; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .header-menu .nav-menu.tw-gap-14 { gap: 2.25rem; }
}

/* --- Audience fork --------------------------------------------------- */
.audience-fork__card { color: inherit; }
.audience-fork__card:hover {
    border-color: var(--ld-main);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(11, 11, 21, .08);
    text-decoration: none;
}

/* ------------------------------------------------------------------
   Utilities the theme's build never compiled.

   main.css only contains the utility classes the original Sasstech
   templates happened to use — it is not a full Tailwind build. Anything
   this site uses that those templates did not is simply absent, which is
   why (for example) `tw-mx-auto` silently failed to centre anything.
   Values follow the theme's own scale (0.25rem per step) and tokens.
   ------------------------------------------------------------------ */

/* Spacing */
.tw-py-20   { padding-block: 5rem; }
.tw-pb-24   { padding-bottom: 6rem; }
.tw-pt-0    { padding-top: 0; }
.tw-mb-20   { margin-bottom: 5rem; }
.tw-mb-0    { margin-bottom: 0; }
.tw-mt-auto { margin-top: auto; }
.tw-mx-auto { margin-inline: auto; }

/* Sizing */
.tw-w-20 { width: 5rem; }
.tw-h-20 { height: 5rem; }
.tw-w-24 { width: 6rem; }
.tw-h-24 { height: 6rem; }
.tw-w-32 { width: 8rem; }
.tw-h-32 { height: 8rem; }
.max-w-600-px { max-width: 600px; }

.rounded-lg   { border-radius: 0.5rem; }
.leading-none { line-height: 1; }

/* Status colours — the tokens exist in the theme, the utilities do not. */
.text-danger-600  { color: var(--danger-600) !important; }
.text-warning-600 { color: var(--warning-600) !important; }
.text-success-600 { color: var(--success-600) !important; }
.bg-danger-100    { background-color: #FDE8E8 !important; }
.bg-warning-100   { background-color: #FEF3E2 !important; }

/* Hero scale. The theme ships no display-* classes, so these map onto its
   own heading tokens rather than inventing a second type scale. */
.display-three { font-size: var(--heading-one); line-height: 1.08; }
.display-four  { font-size: var(--heading-two); line-height: 1.12; }

/* Secondary button used beside the primary CTA. */
.btn-outline-heading {
    background: transparent;
    color: var(--ld-heading);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-outline-heading:hover {
    background: var(--ld-heading);
    border-color: var(--ld-heading) !important;
    color: #fff;
}

/* Hover states used by the cards on this site. The theme compiled some
   `group-hover-item-*` utilities but not these. */
.group-item:hover .group-hover-item-bg-main-600 { background-color: var(--main-600) !important; }
.group-item:hover .group-hover-item-text-white  { color: #fff !important; }
.group-item:hover .group-hover-item-translate-x-1 { transform: translateX(4px); }

/* The theme's mobile drawer expects bottom padding so the final item clears
   the viewport edge; the utility was never compiled. */
.tw-pb-68 { padding-bottom: 17rem; }

/* --- Floating WhatsApp button ---------------------------------------- */
.whatsapp-fab {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 54px;
    padding: 0 15px;
    border-radius: 999px;
    background: #25D366;
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
    transition: gap .25s ease, padding .25s ease, background .2s ease;
    text-decoration: none;
}
.whatsapp-fab:hover { background: #1DB854; color: #fff; text-decoration: none; gap: 9px; padding-right: 22px; }
.whatsapp-fab i { font-size: 1.7rem; line-height: 1; }
.whatsapp-fab__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width .25s ease;
}
.whatsapp-fab:hover .whatsapp-fab__label { max-width: 160px; }

/* The theme's own scroll-to-top control sits bottom-right; keep clear of it. */
@media (max-width: 575.98px) {
    .whatsapp-fab { left: 16px; bottom: 16px; height: 48px; padding: 0 13px; }
    .whatsapp-fab i { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .whatsapp-fab, .whatsapp-fab__label { transition: none; }
}

/* --- Editor preview banner ------------------------------------------- */
.preview-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: #14141F;
    color: #fff;
    font-size: .9rem;
}
.preview-bar__dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #F5A524; flex-shrink: 0;
}
.preview-bar code { background: rgba(255,255,255,.12); padding: 1px 6px; border-radius: 4px; }
.preview-bar a { color: #fff; text-decoration: underline; margin-left: auto; font-weight: 600; }

/* --- Reveal-on-scroll override ---------------------------------------
   aos.css hides [data-aos] elements until AOS marks them, and AOS decides
   that from window scroll offsets that are wrong under GSAP ScrollSmoother
   (the page moves by transform, not by scrolling). With the theme's
   `once: false`, AOS also strips the class again on every scroll event, so
   content reached via an in-page anchor stays invisible permanently.

   site.js marks elements with `is-revealed` from IntersectionObserver, which
   reports real on-screen geometry. !important is deliberate: this must win
   over AOS's own state no matter what AOS decides afterwards.
   ------------------------------------------------------------------ */
html [data-aos].is-revealed {
    opacity: 1 !important;
    transform: none !important;
}