/**
 * CreatorLayer — sitewide UX polish
 */

/* Form feedback */
.creatorlayer-form-status,
.creatorlayer-quote-status {
  font-size: 15px;
  line-height: 1.5;
  margin-top: 12px;
}

.creatorlayer-form-status[data-state="success"],
.creatorlayer-quote-status[data-state="success"] {
  color: #1a7f4b;
}

.creatorlayer-form-status[data-state="error"],
.creatorlayer-quote-status[data-state="error"] {
  color: #c0392b;
}

/* Focus visibility (keyboard + a11y) */
.form-contact input:focus-visible,
.form-contact textarea:focus-visible,
.form-newsletter input:focus-visible,
.form-newsletter-2 input:focus-visible,
.creatorlayer-quote-form input:focus-visible,
.creatorlayer-quote-form textarea:focus-visible,
.creatorlayer-quote-form select:focus-visible {
  outline: 2px solid var(--cl-blue, #0D24E8);
  outline-offset: 2px;
}

/* Blog sidebar — real links, not dead anchors */
.tf-sidebar .item-tags {
  pointer-events: none;
  cursor: default;
}

.tf-sidebar .item-tags[href]:not([href="#"]) {
  pointer-events: auto;
  cursor: pointer;
}

/* Static blog blocks hidden when CRM content loads */
.cl-dynamic ~ .cl-static-fallback,
.wg-blog-detail.cl-dynamic .cl-static-fallback {
  display: none !important;
}

/* Homepage motto band (moved from inline styles) */
.cl-home-motto {
  text-align: center;
  padding: 80px 20px;
  background: linear-gradient(135deg, var(--digital-marketing-dark) 0%, var(--seo-purple) 100%);
}

.cl-home-motto__eyebrow {
  color: var(--digital-marketing-light, #c8f540);
  margin-bottom: 20px;
}

.cl-home-motto__title {
  color: var(--white, #fff);
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 1.25;
  margin-bottom: 20px;
}

.cl-home-motto__desc {
  color: var(--color-text-1, rgba(255, 255, 255, 0.65));
  max-width: 600px;
  margin: 0 auto;
}

/* Mobile sticky CTA bar */
.cl-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 12px 16px;
  background: rgba(6, 9, 28, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}

.cl-mobile-cta .tf-btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 767px) {
  .cl-mobile-cta {
    display: block;
  }

  body.cl-has-mobile-cta {
    padding-bottom: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-home-motto strong {
    animation: none;
  }
}

/* Inner pages — breadcrumbs & titles */
.page-title .breadkcum {
  font-size: 15px;
  letter-spacing: -0.01em;
}

.page-title .breadkcum a {
  transition: color 0.2s ease;
}

.page-title .breadkcum a:hover {
  color: var(--cl-blue, #0D24E8);
}

.page-title .title {
  letter-spacing: -0.03em;
  line-height: 1.12;
}

/* Blog sidebar */
.tf-sidebar .wg-cta {
  border-radius: 20px;
  overflow: hidden;
}

.tf-sidebar .item-tags {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tf-sidebar .item-tags:not(.active):hover {
  background: var(--cl-blue, #0D24E8);
  border-color: var(--cl-blue, #0D24E8);
  color: var(--white, #fff);
}

/* Newsletter footer — clearer tap targets */
.footer-content.newsletter-footer .tf-btn {
  min-height: 48px;
}

/* Footer headline — always readable (GSAP/WOW must never leave this hidden) */
.footer .big-text,
.footer .big-text.footer-headline-visible,
.footer .big-text .split-line {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.footer .big-text .img {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Contact & quote forms — breathing room on mobile */
@media (max-width: 767px) {
  .form-contact fieldset,
  .creatorlayer-quote-form fieldset {
    margin-bottom: 16px;
  }

  .section-contact .heading-section,
  .section-quote .heading-section {
    margin-bottom: 40px;
  }
}

/* Testimonial avatars — no false link affordance */
.section-testimonials .user-tes .img-avt:not(a) {
  display: inline-block;
}

/* Skip dead sidebar tag styling when href is # */
.tf-sidebar .item-tags[href="#"] {
  pointer-events: none;
  opacity: 0.55;
}

/* CRM-driven team member social links */
.member-socials .member-social {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary, #5046e5);
  text-decoration: none;
}
.member-socials .member-social:hover {
  text-decoration: underline;
}

.cl-service-icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.cl-dynamic.cl-services-grid,
#cl-services-grid.cl-dynamic {
  min-height: 120px;
}

/* ------------------------------------------------------------------
   Design-flaw fixes (sitewide)
   ------------------------------------------------------------------ */

/* 1. Keyboard focus visibility.
   styles.css resets `a:focus { outline: 0 }` globally and the theme never
   restores a ring, so links, buttons, tabs and the menu were focusable but
   invisible. Inputs already had a ring; this covers everything else. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.tf-btn:focus-visible,
.item-link:focus-visible,
.send-btn:focus-visible,
.accordion-item .accordion-button:focus-visible,
.tab-link:focus-visible,
.swiper-button-next:focus-visible,
.swiper-button-prev:focus-visible {
  outline: 2px solid var(--cl-blue, #0D24E8);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Dark surfaces need a light ring to stay visible. */
.footer a:focus-visible,
.footer button:focus-visible,
.header a:focus-visible,
.header button:focus-visible,
.page-title a:focus-visible,
.section-hero a:focus-visible {
  outline-color: #ffffff;
}

/* 2. Line length. Long-form copy ran to 106–129 characters per line at
   desktop widths; 60–75 is the readable range. `ch` keeps this correct
   if the font size changes. */
.creatorlayer-legal-body .legal-section p,
.creatorlayer-legal-body .legal-list li,
.creatorlayer-tldr-list li,
.creatorlayer-faq-item p,
.cl-post-body > p,
.cl-post-body > ul li,
.cl-post-body > ol li,
.cl-proj-body > p,
.cl-proj-body > ul li,
.cl-proj-body > ol li {
  max-width: 72ch;
}

.creatorlayer-aeo-intro {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

/* 3. Minimum hit area for small inline links (WCAG 2.5.8 target size). */
.breadcrumbs a,
.meta-project a,
.item-tags {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* 4. Bootstrap defaults that were showing through as un-branded colour.
   `--bs-body-color` (#212529) was inherited by ~49 elements per page that
   the theme never assigned a colour to, so headings rendered in Bootstrap
   grey-black instead of the brand ink. Its code colour (#d63384) also only
   reached 4.16:1 on the light panels it appears on. */
:root {
  --bs-body-color: var(--cl-ink, #1A1A1A);
  --bs-body-color-rgb: 26, 26, 26;
  --bs-code-color: #A61E5D;
  --bs-link-color: var(--cl-blue, #0D24E8);
  --bs-link-hover-color: #0A1CB8;
}

/* 5. Dark footer never declared a link colour, so contact links (email,
   phone, location) inherited the light-surface ink and rendered at
   1.1:1 on #06091C — effectively invisible. Matches the footer's own
   secondary-link convention (65% white ≈ 8.4:1). Class-based rules in
   styles.css are more specific and still win where they apply. */
.footer a {
  color: var(--color-text-1);
}
.footer a:hover,
.footer a:focus-visible {
  color: var(--white);
}
.footer .logo-footer,
.footer .logo-footer:hover {
  color: inherit;
}

/* 6. The odometer plugin forces `font-family: "Anta"`, a face this site
   never loads — so every animated statistic (the hero "10+", the results
   counters) fell back to the system sans instead of the brand face while
   the "+" beside it stayed in Figtree. */
.odometer.odometer-auto-theme,
.odometer.odometer-theme-default,
.odometer.odometer-auto-theme .odometer-digit,
.odometer.odometer-theme-default .odometer-digit {
  font-family: "Figtree", sans-serif;
}

/* 7. Tabular figures for anything numeric.
   The "01 / 02 / 03" step numbers are set in Manrope, whose default
   proportional figures made 01 (18.0px) narrower than 02 (21.2px), so the
   three step cards' text columns started at different x. Tabular figures
   give every digit the same advance width — this also stops the animated
   odometer counters from reflowing as their digits tick over. */
.working-item .number,
.counter-item .number,
.number-counter,
.odometer,
.odometer .odometer-digit,
.pricing-card .price {
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum" 1;
  font-feature-settings: "tnum" 1;
}

/* 8. Honour prefers-reduced-motion.
   Only one decorative element respected it before. WOW.js sets an inline
   `visibility:hidden` on every off-screen .wow element and reveals it with a
   keyframe animation, so simply disabling animations would leave that content
   permanently invisible — these rules reveal it outright instead. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  html {
    scroll-behavior: auto !important;
  }

  /* Content revealed by WOW must not depend on the animation running. */
  .wow,
  .animated {
    visibility: visible !important;
    animation-name: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Continuous marquees are the most uncomfortable motion on the page. */
  .infiniteslide_wrap,
  .infiniteSlide-wrapper,
  .tf-marquee,
  .blob,
  .img-sharp {
    animation: none !important;
  }
}