/* ==========================================================================
   Fax.Clinic — theme layer
   Loaded AFTER faxclinic-base.css.

   Scope note: the palette rebrand happens in faxclinic-base.css, where every
   Medsender hue is remapped onto the blue axis in place. That means the site's
   own component styles already come out on-brand.

   This layer therefore stays deliberately thin. It only adds things the base
   sheet cannot express: the design tokens, typographic polish, accessible
   focus states, and a few icons that are remote assets rather than CSS.

   It must not restyle components generically. Broad substring selectors
   (`[class*="-card"]`, `[class*="footer"]`) match far more than they appear to
   — `.ms-card-title`, `.footer_link`, `.icons-tabler-outline` — and blanket
   colour rules on h1-h6/p/li break white-on-dark sections. Keep selectors
   exact.
   ========================================================================== */

:root {
  /* Brand blues */
  --fc-blue:          #1E4ED8;
  --fc-blue-hover:    #1E40AF;
  --fc-blue-accent:   #3B82F6;
  --fc-blue-soft:     #60A5FA;
  --fc-blue-050:      #EFF6FF;
  --fc-blue-100:      #DBEAFE;
  --fc-navy:          #1E3A8A;

  /* Surfaces */
  --fc-white:         #FFFFFF;
  --fc-surface:       #F8FAFC;
  --fc-surface-blue:  #F0F7FF;

  /* Text */
  --fc-ink:           #0F172A;
  --fc-ink-2:         #334155;
  --fc-ink-3:         #64748B;

  /* Lines */
  --fc-border:        #E2E8F0;
  --fc-border-strong: #CBD5E1;

  /* Positive state (kept green) */
  --fc-success:       #16A34A;
}

/* --------------------------------------------------------------------------
   Rendering polish — no colour, no layout
   -------------------------------------------------------------------------- */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

::selection { background: var(--fc-blue-100); color: var(--fc-ink); }

/* Tighter display type and better line breaking. Deliberately no `color` —
   headings sit on both light and dark sections. */
h1, h2, h3 { letter-spacing: -0.022em; text-wrap: balance; }
h1 { letter-spacing: -0.03em; }

p, li { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Accessibility — visible keyboard focus (the base sheet has none)
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fc-blue-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Form focus ring — colour only, no border/radius changes that shift layout */
.w-input:focus,
.w-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--fc-blue);
  box-shadow: 0 0 0 3px rgba(30, 78, 216, .14);
  outline: none;
}

/* --------------------------------------------------------------------------
   Remote icon assets
   These are files on the Webflow CDN, so their colour cannot be remapped at
   source the way CSS values were. Both rules are scoped to exact filenames.
   -------------------------------------------------------------------------- */

/* Feature-list bullets pulled a purple checkmark.svg off the CDN as a CSS
   background. Inline blue tick instead — on-palette, one fewer request. */
.list_item_icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%231E4ED8' stroke-width='1.6'/%3E%3Cpath d='M6 10.3l2.6 2.6 5.6-5.6' fill='none' stroke='%231E4ED8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-position: 0 0.15em;
}

/* Purple-tinted decorative SVGs. Matched on filename so photography and
   partner logos — whose colours carry meaning — are never touched. */
img[src*="check-icon"],
img[src*="manual-icon"],
img[src*="security-icon"],
img[src*="plus-icon"],
img[src*="arrows-icon"],
img[src*="ai-icon"],
img[src*="icons8-"] {          /* footer social icons */
  filter: hue-rotate(-75deg) saturate(1.1);
}

/* Testimonial quote marks ship as colour-named files (quote_purple.png,
   pink_quote.svg, orange_quote.svg). Same treatment. */
img[src*="quote_purple"],
img[src*="pink_quote"],
img[src*="orange_quote"] {
  filter: hue-rotate(-70deg) saturate(1.05);
}

/* --------------------------------------------------------------------------
   Motion courtesy
   -------------------------------------------------------------------------- */

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