/* SM-site - styles for markup the plugin renders. Page layout belongs to Elementor.
   Brand from the Split Mind logo; type is the site's Assistant. */

:root {
    --sm-navy: #1C355E;
    --sm-ink: #24292F;
    --sm-muted: #5E6A78;
    --sm-sky: #29ABE2;          /* decoration and large text only - too light for small text */
    --sm-sky-text: #1478A8;     /* sky that passes 4.5:1 on white */
    --sm-magenta: #D10073;      /* calls to action only */
    --sm-tint: #E8F2FA;
    --sm-field: #F4F8FB;
    --sm-rule: #D5E0EA;
    --sm-border: #CFDFEC;

    /* Radii from the logo: its rounded squares have a corner radius of 23% of the side.
       Applied as 23% on small shapes, capped on large ones so panels never turn into pills. */
    --sm-r-shape: 23%;
    --sm-r-panel: 28px;
    --sm-r-card: 24px;
    --sm-r-button: 14px;
    --sm-r-field: 12px;

    /* Motion (Duolingo-like: short, springy, never long) */
    --sm-spring: cubic-bezier(.34, 1.56, .64, 1);
    --sm-ease: cubic-bezier(.2, .7, .2, 1);

    --sm-text: clamp(17px, 0.45vw + 15px, 19px);
    --sm-h2: clamp(26px, 1.8vw + 18px, 36px);
    --sm-h3: clamp(21px, 0.9vw + 17px, 26px);
    --sm-lh-body: 1.4;
    --sm-lh-head: 1.2;
    --sm-measure: 68ch;
}

/* ---------- reading column ---------- */

.sm-prose {
    font-size: var(--sm-text);
    line-height: var(--sm-lh-body);
    color: var(--sm-ink);
    max-width: var(--sm-measure);
}
.sm-prose h2, .sm-prose h3 { font-family: 'Assistant', sans-serif; font-weight: 800; }
.sm-prose h2 { font-size: var(--sm-h2); line-height: var(--sm-lh-head); color: var(--sm-navy); margin: 1.4em 0 0.5em; }
.sm-prose h3 { font-size: var(--sm-h3); line-height: var(--sm-lh-head); color: var(--sm-navy); margin: 1.2em 0 0.4em; }
.sm-prose p, .sm-prose ul, .sm-prose ol { margin: 0 0 1em; }
.sm-prose li { margin-bottom: 0.35em; }
/* Underlined, not colour-only: links inside running text must be distinguishable without colour (WCAG 1.4.1).
   `body` prefix: the Elementor kit's `.elementor-kit-N a { text-decoration: none }` has equal specificity and loads later. */
body .sm-prose a, body #breadcrumbs a { color: var(--sm-navy); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--sm-sky); text-underline-offset: 3px; }
.sm-prose a:hover { color: var(--sm-magenta); }
.sm-prose img { max-width: 100%; height: auto; }

/* ---------- [sm_content] rows ---------- */

.sm-content { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }
.sm-row { scroll-margin-top: 96px; display: grid; gap: 24px; }
.sm-row--media { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: start; }
.sm-row__title { margin-top: 0; }
.sm-row__media { margin: 0; }
.sm-row__media img { width: 100%; height: auto; display: block; border-radius: var(--sm-r-card); }
.sm-row__embed { grid-column: 1 / -1; }
@media (max-width: 767px) {
    .sm-row--media { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- [sm_toc] ---------- */

.sm-toc { background: #fff; border-radius: var(--sm-r-card); padding: 0; font-size: 16px; line-height: var(--sm-lh-body); }
.sm-toc__title { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 700; color: var(--sm-navy); display: flex; justify-content: space-between; align-items: center; min-height: 44px; box-sizing: border-box; }
.sm-toc__title::-webkit-details-marker { display: none; }
.sm-toc__title::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sm-sky); transition: transform .3s var(--sm-spring); }
.sm-toc[open] .sm-toc__title::after { transform: scale(1.4); }
.sm-toc__list { margin: 0; padding: 0 18px 16px 18px; padding-inline-start: 36px; }
.sm-toc__list li { margin: 6px 0; }
.sm-toc__list a { color: var(--sm-ink); text-decoration: none; }
.sm-toc__list a:hover { color: var(--sm-magenta); }

/* ---------- [sm_faq] ---------- */

.sm-faq { display: flex; flex-direction: column; gap: 12px; }
.sm-faq__item { background: var(--sm-field); border-radius: var(--sm-r-card); padding: 0 24px; }
.sm-faq__q { cursor: pointer; list-style: none; padding: 18px 0; font-size: var(--sm-h3); line-height: var(--sm-lh-head); font-weight: 700; color: var(--sm-navy); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.sm-faq__q::-webkit-details-marker { display: none; }
.sm-faq__q::after { content: ""; flex: 0 0 14px; height: 14px; border: 2px solid var(--sm-navy); border-radius: var(--sm-r-shape); transform: rotate(45deg); transition: border-radius .3s var(--sm-ease), background .3s, transform .4s var(--sm-spring); }
.sm-faq__item[open] .sm-faq__q::after { border-radius: 50%; transform: rotate(0); background: var(--sm-magenta); border-color: var(--sm-magenta); }   /* logo square -> logo circle */
.sm-faq__a { padding-bottom: 18px; }

/* ---------- [sm_case_link] ---------- */

.sm-case-link { font-weight: 700; color: var(--sm-navy); text-underline-offset: 3px; }
.sm-case-link::after { content: " ←"; }
.sm-case-link:hover { color: var(--sm-magenta); }

/* ---------- [sm_hero_side] ---------- */

.sm-hero-side img { width: 100%; height: auto; display: block; border-radius: var(--sm-r-panel); }
.sm-hero-side--form { background: #fff; padding: clamp(20px, 3vw, 36px); border-radius: var(--sm-r-panel); }

/* ---------- [sm_testimonials] / [sm_client_logos] ---------- */

.sm-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.sm-testimonial { margin: 0; background: var(--sm-field); border-radius: var(--sm-r-card); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.sm-testimonial__quote { margin: 0; font-size: var(--sm-text); line-height: var(--sm-lh-body); color: var(--sm-ink); }
.sm-testimonial__quote::before { content: "”"; display: block; font-size: 64px; line-height: 0.8; font-weight: 800; color: var(--sm-sky); }
.sm-testimonial:nth-child(3n+2) .sm-testimonial__quote::before { color: var(--sm-magenta); }
.sm-testimonial__by { margin-top: auto; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.sm-testimonial__photo { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sm-testimonial__name { font-weight: 700; color: var(--sm-navy); }
.sm-testimonial__role { font-size: 15px; color: var(--sm-muted); }

.sm-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 44px; }
.sm-logos img { max-height: 44px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.sm-logos a:hover img, .sm-logos img:hover { filter: none; opacity: 1; }

/* ---------- [sm_motif] - logo shapes, light motion ---------- */

.sm-motif { display: block; overflow: visible; }
.sm-motif__sq rect { fill: none; stroke: var(--sm-navy); stroke-width: 1.6; }
.sm-on-dark .sm-motif__sq rect { stroke: #fff; }
.sm-on-dark .sm-motif__ci { mix-blend-mode: screen; }
/* At rest by default. Plays while its card is hovered (desktop) or while sm-site.js marks it
   .is-playing (touch screens: the card sits in the top part of the viewport). Time-based, not
   driven by the pointer or scroll position. Every keyframe loop starts and ends at the rest pose. */
.sm-motif__ci { mix-blend-mode: multiply; }
.sm-motif__sq, .sm-motif__ci { animation: none; }
.sm-card:hover .sm-motif__sq, .sm-motif-host:hover .sm-motif__sq, .is-playing .sm-motif__sq { animation: sm-sway 2.4s var(--sm-ease) infinite; }
.sm-card:hover .sm-motif__ci, .sm-motif-host:hover .sm-motif__ci, .is-playing .sm-motif__ci { animation: sm-pop 1.6s var(--sm-spring) infinite; }
@keyframes sm-pop { 0%, 100% { transform: translate(0, 0) scale(1); } 35% { transform: translate(2px, -7px) scale(1.12); } 60% { transform: translate(-1px, -2px) scale(.96); } }
@keyframes sm-sway  { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 70% { transform: rotate(9deg); } }

/* ---------- reveal on scroll (classes set in Elementor: sm-reveal) ----------
   Hidden only once sm-site.js has marked <html class="sm-js">; a head-script timer
   removes the hiding after 2.5 s if the footer script never runs. */

.sm-js .sm-reveal:not(.is-in) { opacity: 0; transform: translateY(28px) scale(.97); }
.sm-reveal { transition: opacity .5s var(--sm-ease), transform .7s var(--sm-spring); transition-delay: var(--sm-delay, 0s); }
.sm-js.sm-reveal-off .sm-reveal { opacity: 1; transform: none; }

/* ---------- buttons with a pressable edge (class sm-btn on the Button widget) ---------- */

.sm-btn .elementor-button {
    border-radius: var(--sm-r-button) !important;
    box-shadow: 0 4px 0 #8E0050;
    transition: transform .12s var(--sm-ease), box-shadow .12s var(--sm-ease), background-color .2s;
}
.sm-btn .elementor-button:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #8E0050; }
.sm-btn .elementor-button:active { transform: translateY(4px); box-shadow: 0 0 0 #8E0050; }
.sm-btn--ghost .elementor-button { box-shadow: 0 4px 0 var(--sm-border); }
.sm-btn--ghost .elementor-button:hover { box-shadow: 0 5px 0 var(--sm-border); }
.sm-btn--ghost .elementor-button:active { box-shadow: 0 0 0 var(--sm-border); }

/* ---------- soft cards (class sm-card on a container) ---------- */

.sm-card { transition: transform .35s var(--sm-spring), box-shadow .35s var(--sm-ease); }
.sm-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(28, 53, 94, .35); }
.e-loop-item .sm-card img, .sm-card .elementor-widget-theme-post-featured-image img { border-radius: calc(var(--sm-r-card) - 8px); }

/* ---------- [sm_card_visual] / [sm_archive_hero] ---------- */

.sm-card-visual img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: calc(var(--sm-r-card) - 8px); }
.sm-card-visual--motif { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: calc(var(--sm-r-card) - 8px); }

.sm-archive-hero { display: flex; flex-direction: column; gap: 16px; }
.sm-archive-hero__title { margin: 0; font-family: 'Assistant', sans-serif; font-weight: 800; font-size: clamp(36px, 5vw, 72px); line-height: var(--sm-lh-head); color: var(--sm-navy); }
.sm-archive-hero__lead { margin: 0; font-size: clamp(18px, 1.5vw, 22px); line-height: var(--sm-lh-body); color: var(--sm-ink); max-width: 60ch; }

/* ---------- header menu (Nav Menu widget, class sm-nav) ----------
   Elementor's "stretch" positions the dropdown wrongly in RTL (it covered only half the screen),
   so on tablet/mobile the open dropdown is pinned as a full-width rounded card under the sticky header. */

.sm-header.elementor-sticky--effects { box-shadow: 0 6px 20px -16px rgba(28, 53, 94, .45); }
@media (max-width: 1024px) {
    .sm-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
        position: fixed !important; top: 76px !important; left: 16px !important; right: 16px !important;
        width: auto !important; max-height: calc(100vh - 100px); overflow-y: auto;
        border-radius: var(--sm-r-panel); box-shadow: 0 20px 40px -20px rgba(28, 53, 94, .45); padding: 8px 0;
    }
    .sm-nav .elementor-menu-toggle { border-radius: var(--sm-r-field); width: 44px; height: 44px; }
}

/* ---------- forms in sections (Elementor Form widget) ---------- */

.elementor-form .elementor-field-textual { border-radius: var(--sm-r-field); }

@media (prefers-reduced-motion: reduce) {
    .sm-toc__title::after, .sm-faq__q::after, .sm-logos img, .sm-card, .sm-btn .elementor-button { transition: none; }
    .sm-motif__sq, .sm-motif__ci { animation: none !important; }
    .sm-js .sm-reveal:not(.is-in) { opacity: 1; transform: none; }
}