/*
Theme Name: Andrew Folkler — Strategic Advisor
Theme URI: https://andrewfolkler.com
Author: Andrew Folkler
Author URI: https://andrewfolkler.com
Description: Lean child of hello-elementor for Andrew Folkler LLC (Strategic Advisor positioning). Holds the design tokens and the small set of Elementor overrides that bring Elementor's rendering in line with the editorial design system. Source of truth lives in the Obsidian vault at 2. Areas/AFLLC/Marketing/assets/website-theme/andrewfolkler-child/. Edits made here on the server should be mirrored back to the vault.
Template: hello-elementor
Version: 1.0.0
License: Proprietary
Text Domain: andrewfolkler-child
Tags: elementor, editorial
*/

/* ============================================================
   Element-level overrides + Elementor corrections.
   Tokens themselves are defined in design-tokens.css (loaded
   before this file via functions.php).
   ============================================================ */

/* Sharp corners on common Elementor cards — the editorial register
   prefers 4px over Elementor's default 8–12px. */
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-cta,
.elementor-pricing,
.elementor-call-to-action,
.elementor-image-carousel-wrapper .swiper-slide,
.e-con.e-con-boxed > .e-con-inner {
  border-radius: var(--r-md, 4px);
}

/* Hairline borders — keep them 1px even on retina. */
.elementor-section .elementor-element[class*="border"] {
  border-width: 1px;
}

/* Link transition matches the brand 120ms / cubic-bezier. */
a, .elementor a {
  transition:
    border-color var(--dur-base, 200ms) var(--ease-standard, cubic-bezier(0.2, 0, 0.2, 1)),
    color        var(--dur-base, 200ms) var(--ease-standard, cubic-bezier(0.2, 0, 0.2, 1));
}

/* Focus rings — 2px cyan at 2px offset. Accessibility + brand. Never removed. */
*:focus-visible,
.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor input:focus-visible,
.elementor textarea:focus-visible {
  outline: 2px solid var(--af-blue, #00EEFF);
  outline-offset: 2px;
}

/* Long-form reading column: 38rem (≈65ch). Apply with class `.is-prose`. */
.is-prose,
.elementor-widget-text-editor.is-prose .elementor-widget-container {
  max-width: 38rem;
}

/* Long-form prose body — Lora secondary serif. */
.is-prose p,
.elementor-widget-text-editor.is-prose p {
  font-family: var(--font-secondary, "Lora", Georgia, serif);
  font-size: var(--fs-md, 1.125rem);
  line-height: var(--lh-long, 1.7);
  color: var(--fg-1, #0A054D);
}

/* Italic pull-quotes inside prose. */
.is-prose blockquote,
.elementor-widget-text-editor.is-prose blockquote {
  font-family: var(--font-secondary, "Lora", Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-xl, 1.75rem);
  line-height: var(--lh-normal, 1.35);
  color: var(--fg-1, #0A054D);
  border-left: 2px solid var(--af-blue, #00EEFF);
  padding-left: var(--sp-5, 24px);
  margin: var(--sp-6, 32px) 0;
}

/* On-indigo / on-paper helper classes (mirrors the design system). */
.on-indigo {
  background: var(--af-indigo, #0A054D);
  color: var(--fg-on-indigo, #FEFFFE);
}
.on-indigo h1, .on-indigo h2, .on-indigo h3, .on-indigo h4 {
  color: var(--fg-on-indigo, #FEFFFE);
}
.on-paper {
  background: var(--paper, #FBF8F1);
  color: var(--fg-1, #0A054D);
}

/* Brand eyebrow / tagline — tracked caps with the short cyan rule.
   Use as: <span class="brand-eyebrow">The signals</span> */
.brand-eyebrow {
  font-family: var(--font-display, "Roboto", sans-serif);
  font-weight: 500;
  font-size: var(--fs-sm, 0.875rem);
  letter-spacing: var(--tr-widest, 0.24em);
  text-transform: uppercase;
  color: var(--fg-accent, #008E99);  /* contrast-safe on light surfaces */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  text-decoration: none;
  border-bottom: none;
}
.brand-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--af-blue, #00EEFF);
  display: inline-block;
  flex-shrink: 0;
}

/* On indigo, the eyebrow flips to full electric blue. */
.on-indigo .brand-eyebrow {
  color: var(--af-blue, #00EEFF);
}

/* Disable Elementor's bouncy / typewriter animation presets. The brand
   permits fade+rise only. */
.elementor-animation-bounce,
.elementor-animation-rubberBand,
.elementor-animation-shake,
.elementor-animation-tada,
.elementor-animation-wobble,
.elementor-animation-jello {
  animation: none !important;
}