/* ==========================================================================
   FTS: base.css
   Purpose: Baseline styles that are safe across themes, BB, ACF, TEC.
   Notes:
   - No site furniture styling here.
   - Keep selectors broad but low-specificity.
   ========================================================================== */


  /* --- Reset Lite --- */
  *, *::before, *::after { box-sizing: border-box; }

  html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    background: var(--color-bg);
  }

  body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--base-font-size);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
  }

  /* BB wrappers inherit background */
  .fl-page,
  .fl-page-content,
  .fl-builder-content {
    background: var(--color-bg);
  }

  /* Media defaults */
  img, svg, video, canvas {
    max-width: 100%;
    height: auto;
  }
  img { display: block; }

  /* Text safety for long strings */
  :where(p, li, td, th, a) {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Headings baseline */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    line-height: 1.15;
    color: var(--color-heading);
    margin: 0 0 0.5em;
  }

  p { margin: 0 0 1em; }
  small { font-size: 0.875em; }

  code, kbd, samp, pre { font-family: var(--font-mono); }

  /* Links baseline: neutral, a11y handles underline behaviors */
  a {
    color: inherit;
    text-decoration-thickness: var(--fts-link-underline-thickness);
    text-underline-offset: var(--fts-link-underline-offset);
	font-weight: var(--semibold);
  }
  a:hover { 
    color: inherit;
  }

  .light-link a {
	color: var(--sky);
  }

  .light-link a:hover {
	color: var(--ocean);
  }

  /* Content link color, scoped to content areas only */
  :where(main, .entry-content, .fl-builder-content, .fl-rich-text, .fl-module-content)
  a:not(.fl-button):not(.fts-btn):not([class*="fts-btn"]):not([role="button"]):not(.wp-block-button__link) {
    color: var(--color-link);
    font-weight: var(--weight-medium);
  }

  :where(main, .entry-content, .fl-builder-content, .fl-rich-text, .fl-module-content)
  a:not(.fl-button):not(.fts-btn):not([class*="fts-btn"]):not([role="button"]):not(.wp-block-button__link):hover {
    color: var(--denim);
  }

/* --------------------------------------------------------------------------
   Content links: animated underline on hover + focus
   Uses background-image underline so it survives themes that force
   text-decoration rules.
   IMPORTANT: Do NOT remove existing text-decoration underlines.
   -------------------------------------------------------------------------- */
  :where(.entry-content, .fl-rich-text, .fl-accordion-content, .fl-accordion-content-inner)
  a:not(.fl-button):not(.fts-btn):not([class*="fts-btn"]):not([role="button"]):not(.wp-block-button__link) {
    /* uncomment the line below to add underline on hover */
    /* background-image: linear-gradient(currentColor, currentColor) !important; */
    background-repeat: no-repeat !important;
    background-position: 0 calc(100% + 0.02em) !important;
    background-size: 0% var(--fts-link-underline-thickness, 0.14em) !important;
    transition: background-size 220ms ease;
  }

  :where(.entry-content, .fl-rich-text, .fl-accordion-content, .fl-accordion-content-inner)
  a:not(.fl-button):not(.fts-btn):not([class*="fts-btn"]):not([role="button"]):not(.wp-block-button__link):hover,
  :where(.entry-content, .fl-rich-text, .fl-accordion-content, .fl-accordion-content-inner)
  a:not(.fl-button):not(.fts-btn):not([class*="fts-btn"]):not([role="button"]):not(.wp-block-button__link):focus-visible {
    color: var(--denim);
    background-size: 100% var(--fts-link-underline-thickness, 0.14em) !important;
  }

  /* Navigation links: never show underline (color-only hover handled in site skin) */
  :where(nav, .fl-menu, .menu, .sub-menu) a:hover,
  :where(nav, .fl-menu, .menu, .sub-menu) a:focus-visible {
    text-decoration: none !important;
    background-image: none !important;
  }

  /* Selection */
  ::selection { background: color-mix(in srgb, var(--sky) 25%, transparent); }

  /* Footer anchor (keeps short pages from floating footer) */
  html, body { height: 100%; }

  .fl-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .fl-page-content { flex: 1 0 auto; }

  .fl-page-footer-wrap,
  .fl-theme-builder-footer {
    margin-top: auto;
  }

/* --------------------------------------------------------------------------
   Beaver Builder Editor UI: Global Styles color swatch preview
   BB paints the swatch using the CSS variable `--color` on a button.
   Some resets can null the button background, making the swatch appear blank.
   Scoped to builder chrome only.
   -------------------------------------------------------------------------- */

:where(.fl-builder-ui, .fl-builder-settings, .fl-builder-panel, .fl-lightbox, .fl-modal)
button.fl-controls-color-swatch {
  background: var(--color) !important;
  background-color: var(--color) !important;
}

/* Beaver Builder Editor UI: Color chips inside module dialogs
   BB uses multiple chip elements across panels (button/div/span), usually driven
   by `--color`. Paint them all safely in builder chrome only. */
:where(.fl-builder-ui, .fl-builder-settings, .fl-builder-panel, .fl-lightbox, .fl-modal)
:where(
  .fl-controls-color-swatch,
  .fl-controls-color-chip,
  .fl-controls-color-preview,
  .fl-controls-color-preset,
  .fl-color-swatch,
  .fl-color-chip,
  .fl-color-preview
) {
  background: var(--color) !important;
  background-color: var(--color) !important;
}