/* ==========================================================================
   FTS: base.css
   Baseline styles safe across BB, ACF, TEC, and standard WP themes.
   No :root declarations — all tokens live in tokens.css.
   No site furniture — that belongs in site-skin.css.
   ========================================================================== */

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

html {
  font-size: var(--base-font-size) !important; /* !important overrides BB theme font-size setting */
  -webkit-text-size-adjust: 100%;
  background: var(--color-bg);
}

body {
  margin: 0;
  font-family: var(--font-sans) !important; /* !important overrides BB theme font-family setting */
  font-size: var(--fts-text-base);
  line-height: var(--fts-leading-body);
  color: var(--color-text);
  background: var(--color-bg);
}

/* BB generates background-color on these wrappers via its own CSS */
.fl-page,
.fl-page-content,
.fl-builder-content {
  background: var(--color-bg);
  background-color: var(--color-bg) !important;
}

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

/* Prevents long URLs or unbreakable strings from blowing out layouts */
:where(p, li, td, th, a) {
  overflow-wrap: anywhere;
  word-break: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: var(--fts-leading-heading);
  color: var(--color-heading);
  margin: 0;
}

/* Global margin reset — content zones re-add rhythm via typography.css */
p {
  margin: 0;
  font-family: var(--font-sans);
}

.no-margin p { margin: 0 !important; }

/* Opt-in paragraph rhythm inside BB content zones */
.fl-builder-content :where(.fl-rich-text, .fl-module-content, .entry-content) p,
:where(main, .entry-content) p {
  margin: 0 0 1rem;
}

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

/* Link baseline — color and underline behavior is applied by scope below.
   a11y.css owns the animated underline for content links. */
a {
  color: inherit;
  text-decoration-thickness: var(--fts-link-underline-thickness);
  text-underline-offset: var(--fts-link-underline-offset);
  font-weight: inherit;
}
a:hover { color: inherit; }

/* Content link color — scoped to avoid colouring nav, footer, and component links */
: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):not(.fts-link-card) {
  color: var(--color-link);
  font-weight: var(--weight-semibold);
}

: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):not(.fts-link-card):hover {
  color: var(--sky);
}

/* Link color utilities — a11y.css owns the underline animation for these */
.fts-link--inherit a       { color: inherit !important; }
.fts-link--inherit a:hover { color: inherit; }

.fts-link--white a       { color: var(--white) !important; }
.fts-link--white a:hover { color: var(--sky) !important; }

.fts-link--light a       { color: var(--sky) !important; }
.fts-link--light a:hover { color: var(--ocean) !important; }

/* Low-emphasis links — uses a concrete muted color, not opacity.
   Opacity-based contrast cannot be reliably audited against all backgrounds. */
.fts-link--muted a {
  color: var(--color-muted) !important;
  font-weight: var(--weight-medium) !important;
}
.fts-link--muted a:hover { color: var(--sky) !important; }

.fts-link--no-underline a {
  background-image: none !important;
  text-decoration: none !important;
}

/* Nav links never show the content-link underline animation */
: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 { background: color-mix(in srgb, var(--sky) 25%, transparent); }

/* Sticky footer — keeps footer anchored to viewport bottom regardless of content height */
html, body { height: 100%; }

.fl-page {
  min-height: 100vh;
  min-height: 100dvh; /* dvh accounts for mobile browser chrome */
  display: flex;
  flex-direction: column;
}

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