/* ==========================================================================
   FTS: base.css
   Purpose: Global baseline styles (reset-lite, typography defaults, safe layout).
   ========================================================================== */

/* --- Beaver Builder UI Safe Zone --- */
/* NOTE: Keep FTS global rules from affecting builder controls and dialogs. */
:where(
  .fl-builder-ui,
  .fl-builder-settings,
  .fl-builder-panel,
  .fl-builder-bar,
  .fl-lightbox,
  .fl-modal,
  .mce-container,
  .mce-window,
  .mce-widget,
  .mce-toolbar,
  .mce-btn
) {
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
}

:where(
  .fl-builder-ui,
  .fl-builder-settings,
  .fl-builder-panel,
  .fl-builder-bar,
  .fl-lightbox,
  .fl-modal,
  .mce-container,
  .mce-window,
  .mce-widget,
  .mce-toolbar,
  .mce-btn
) a {
  text-decoration: none !important;
  background-image: none !important;
  background-size: 0% 0% !important;
}

/* --- Beaver Builder UI Safe Zone: Disable Focus Rings --- */
/* NOTE: Focus enforcement is for the public UI, not the builder chrome. */
:where(
  .fl-builder-ui,
  .fl-builder-settings,
  .fl-builder-panel,
  .fl-builder-bar,
  .fl-lightbox,
  .fl-modal,
  .mce-container,
  .mce-window
)
:where(a, button, input, textarea, select, summary, [role="button"], [tabindex]) {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

:where(
  .fl-builder-ui,
  .fl-builder-settings,
  .fl-builder-panel,
  .fl-builder-bar,
  .fl-lightbox,
  .fl-modal,
  .mce-container,
  .mce-window
)
:where(a, button, input, textarea, select, summary, [role="button"], [tabindex]):focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}


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

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

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

/* NOTE: Ensure BB theme wrappers inherit the site background. */
.fl-page,
.fl-page-content,
.fl-builder-content {
  background: var(--soft-white);
}

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

img {
  display: block;
}


/* --- Text Safety --- */
/* NOTE: Prevent long strings from blowing up layouts. */
:where(p, li, td, th, a) {
  overflow-wrap: anywhere;
  word-break: normal;
}


/* --- Typography Defaults --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  line-height: 1.15;
  color: var(--midnight);
  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) --- */
/* Notes:
   - Keep link styling neutral at the global level so Beaver Builder/theme settings
     can control nav/footer colors.
   - The underline/interaction system lives in a11y.css.
*/
a {
  color: inherit;
  text-decoration-thickness: var(--fts-link-underline-thickness);
  text-underline-offset: var(--fts-link-underline-offset);
}

a:hover {
  color: inherit;
}

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

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

/* --- Content Link Colors (content only) --- */
/* Notes:
   - Applies to page content, not nav/footer/header/site title, and not buttons.
*/
: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(--ocean);
  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):hover {
  color: var(--sky);
}

/* --- Top Menu --- */
/* NOTE: Allow weight classes to override the link defaults. */
#topMenu:where(.fts-weight-light) { font-weight: var(--weight-light) !important; }
#topMenu:where(.fts-weight-regular) { font-weight: var(--weight-regular) !important; }
#topMenu:where(.fts-weight-medium) { font-weight: var(--weight-medium) !important; }
#topMenu:where(.fts-weight-semibold) { font-weight: var(--weight-semibold) !important; }
#topMenu:where(.fts-weight-bold) { font-weight: var(--weight-bold) !important; }

#topMenu a {
  color: var(--white);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  font-weight: var(--weight-regular) !important;
  text-decoration: none !important;
}

#topMenu a:hover {
  color: var(--sky);
}

/* --- Site Title --- */
/* NOTE: Global branding element. Keep typography stable and overridable. */
#siteTitle {
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.1;
  color: var(--white);
  margin: 0;
}

/* NOTE: Allow weight classes to override the site title defaults. */
#siteTitle:where(.fts-weight-light) { font-weight: var(--weight-light) !important; }
#siteTitle:where(.fts-weight-regular) { font-weight: var(--weight-regular) !important; }
#siteTitle:where(.fts-weight-medium) { font-weight: var(--weight-medium) !important; }
#siteTitle:where(.fts-weight-semibold) { font-weight: var(--weight-semibold) !important; }
#siteTitle:where(.fts-weight-bold) { font-weight: var(--weight-bold) !important; }

#siteTitle a {
  color: inherit;
  font-weight: var(--weight-light);
  text-decoration: none !important;
}

#siteTitle a:hover,
#siteTitle a:focus-visible {
  color: var(--sky);
}

@media (max-width: 767.98px) {
  #siteTitle{
    text-align: center;
  }
}

/* --- Main Menu --- */
#mainMenu a {
  color: inherit;
  font-weight: var(--weight-semibold);
  text-decoration: none !important;
  cursor: pointer;
}

#mainMenu a:hover {
  color: var(--ocean);
  text-decoration: none !important;
}

#mainMenuRow {
  position: relative;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* --- Page Menu --- */
#pageMenu a {
  color: #ffffff;
  font-weight: var(--weight-bold) !important;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  cursor: pointer;
}

#pageMenu .sub-menu {
	font-weight: 400 !important;
}

#pageMenu a:hover {
  color: var(--cream) !important;
  text-decoration: none !important;
}


/* --- Dept Menu --- */
#deptMenu a {
  color: inherit;
  font-weight: var(--weight-semibold) !important;
  text-decoration: none !important;
  cursor: pointer;
}

#pageMenu a:hover {
  color: inherit;
  text-decoration: none !important;
}

/* --- Department Title --- */
.deptTitle {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: clamp(0.75rem, 1.5vw, 1.125rem);
  letter-spacing: 0.095em;
  text-transform: normal;
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  line-height: 1.1;
  color: var(--cream);
  margin: 0;
}

.deptTitle a {
  color: var(--cream);
}

/* NOTE: Allow weight classes to override the site title defaults. */
.deptTitle:where(.fts-weight-light) { font-weight: var(--weight-light) !important; }
.deptTitle:where(.fts-weight-regular) { font-weight: var(--weight-regular) !important; }
.deptTitle:where(.fts-weight-medium) { font-weight: var(--weight-medium) !important; }
.deptTitle:where(.fts-weight-semibold) { font-weight: var(--weight-semibold) !important; }
.deptTitle:where(.fts-weight-bold) { font-weight: var(--weight-bold) !important; }

.deptTitle a {
  color: inherit;
  font-weight: var(--weight-light);
  text-decoration: none !important;
}

.deptTitle a:hover,
.deptTitle a:focus-visible {
  color: var(--sky);
}

@media (max-width: 767.98px) {
  .deptTitle {
    text-align: center;
  }
}

/* --- Footer Menu --- */
#footerMenu a {
  color: inherit;
  font-size: 0.8275rem;
  font-weight: var(--weight-regular) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.075em !important;
  cursor: pointer;
  margin-top: 20px;
}

#footerMenu a:hover {
  color: var(--sky);
  text-decoration: none !important;
}


/* --- Beaver Builder Buttons: Never Underline --- */
/* NOTE: BB buttons are typically <a class="fl-button">... and should never inherit link underlines. */
:where(a.fl-button, a.fl-button:visited, a.fl-button:hover, a.fl-button:focus, a.fl-button:focus-visible) {
  text-decoration: none !important;
  background-image: none !important;
  background-size: 0% 0% !important;
}

:where(a.fl-button) :where(.fl-button-text, span, i, svg) {
  text-decoration: none !important;
}

/* NOTE: Defensive: Some underline systems can land on child elements/pseudo-elements. */
:where(a.fl-button) :where(*, *::before, *::after) {
  background-image: none !important;
  background-size: 0% 0% !important;
  text-decoration: none !important;
}


/* --- Focus and Selection (baseline) --- */
/* NOTE: Focus ring is enforced in a11y.css; keep baseline predictable. */
:where(a, button, input, textarea, select, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--fts-focus-width) solid var(--fts-focus-ring);
  outline-offset: var(--fts-focus-offset);
}

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


/* --- Anchor the footer --- */
/* NOTE: Keep this. It prevents short pages from floating the footer mid-screen. */
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;
}