/* ==========================================================================
  FTS: site-skin.css (optional)
  Purpose: Site furniture styling (header/nav/footer/site title).
  Notes:
  - Opinionated per site.
  - Keep core design system neutral.
  - Keep specificity low; avoid global overrides.
  ========================================================================== */

/* ==========================================================================
  Transparent Header Row Overlay
  Purpose:
  - Allow a Beaver Builder ROW (not theme header) to overlay the next row.
  Notes:
  - This is opt-in via #transparentHeaderRow.
  - Make sure the next section has enough top padding so content is not hidden.
  ========================================================================== */

#transparentHeaderRow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

/* Ensure there is a positioned ancestor */
.fl-page,
.fl-builder-content {
  position: relative;
}

/* Optional: add spacing to the first real section below it */
#transparentHeaderRow + .fl-row {
  padding-top: var(--fts-header-height);
}


#sticky-row {
    position: sticky;
    top: 0;
    z-index: 999;
}

/* ------------------------------------------------------------------------
    Fuller Logo
    ------------------------------------------------------------------------ */

.fuller-logo .fl-html a {
  display: inline-block;
  line-height: 0;
}

.fuller-logo .fl-html svg {
  display: block;
  width: 360px;
  max-width: 100%;
  height: auto !important;
}

.fuller-logo-sm .fl-html a {
  display: inline-block;
  line-height: 0;
}

.fuller-logo-sm .fl-html svg {
  display: block;
  width: 320px;
  max-width: 100%;
  height: auto !important;
}

.fuller-tagline {
  width: 260px;
  height: auto;
}

@media (max-width: 767.98px) {
  .fuller-logo { 
    width: 280px;
    height: auto;
  }

   .fuller-logo-sm {
    width: 260px;
    height: auto;
  }
}

/* ------------------------------------------------------------------------
    Top Menu
    ------------------------------------------------------------------------ */

/* Allow explicit weight utility classes to override defaults. */
.top-menu:where(.fts-weight-light) { font-weight: var(--weight-light); }
.top-menu:where(.fts-weight-regular) { font-weight: var(--weight-regular); }
.top-menu:where(.fts-weight-medium) { font-weight: var(--weight-medium); }
.top-menu:where(.fts-weight-semibold) { font-weight: var(--weight-semibold); }
.top-menu:where(.fts-weight-bold) { font-weight: var(--weight-bold); }

.top-menu a {
  color: var(--white) !important;
  font-size: 0.75rem;
  letter-spacing: 0.075em;
  font-weight: var(--weight-regular) !important;
  text-transform: none;
  text-decoration: none;
}

.top-menu a:hover {
  color: var(--sky) !important;
}

.top-menu a:focus-visible {
  outline: var(--fts-focus-width) solid var(--fts-focus-ring);
  outline-offset: var(--fts-focus-offset);
}

.top-menu .sub-menu a {
  color: var(--midnight) !important;
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  text-transform: capitalize;
  letter-spacing: 0.025em;
}

.top-menu .sub-menu a:hover {
	color: var(--sky);
}

/* ------------------------------------------------------------------------
    Main Menu
    ------------------------------------------------------------------------ */

#mainMenu a {
  color: inherit;
  font-weight: var(--weight-semibold);
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
}

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

#mainMenu a:focus-visible {
  outline: var(--fts-focus-width) solid var(--fts-focus-ring);
  outline-offset: var(--fts-focus-offset);
}

/* Keep stacking context reasonable. Prefer the smallest z-index that works. */
#mainMenuRow {
  position: relative;
  background-color: var(--white) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* z-index: 20; */
}

/* WordPress menu sub-menu class is broad. Keep this minimal. */
#mainMenu :where(.sub-menu) {
  background-color: var(--white);
  padding: 10px;
}

.sub-menu a {
  text-transform: none !important;
}

/* WordPress menu sub-menu class is broad. Keep this minimal. */
#mainMenu .sub-menu .menu-item a {
  font-size: 0.875rem !important;
  font-weight: var(--weight-medium) !important;
  text-transform: capitalize !important;
  letter-spacing: 0.025em !important;
}

/* ------------------------------------------------------------------------
    Department Menu
    ------------------------------------------------------------------------ */

#deptMenu {
  position: relative;
}

#deptMenu a {
  color: var(--ivory);
  font-size: 0.875rem !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: 0.075rem !important;
  text-transform: uppercase;
  text-decoration: none;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
}

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

#deptMenu a:active {
  color: var(--midnight);
}

#deptMenu a:focus-visible {
  outline: var(--fts-focus-width) solid var(--fts-focus-ring);
  outline-offset: var(--fts-focus-offset);
}

/* Desktop submenu */
#deptMenu .sub-menu {
  background-color: var(--white);
  padding: 10px;
}

#deptMenu .sub-menu .menu-item > a {
  color: var(--midnight) !important;
  text-transform: none;
  letter-spacing: normal;
}

/* Hover / focus */
#deptMenu .sub-menu .menu-item:hover > a,
#deptMenu .sub-menu .menu-item:focus-within > a,
#deptMenu .sub-menu .menu-item > a:hover,
#deptMenu .sub-menu .menu-item > a:focus-visible,
#deptMenu .sub-menu .menu-item.current-menu-item > a,
#deptMenu .sub-menu .menu-item.current-menu-ancestor > a {
  color: var(--sky) !important;
}



/* Mobile flyout */
#deptMenu .fl-menu-mobile-flyout .menu-item > a {
  color: var(--midnight) !important;
  font-weight: var(--weight-semibold) !important;
  text-align: right;
  text-transform: none;
  letter-spacing: normal;
}

#deptMenu .fl-menu-mobile-flyout .menu-item:hover > a,
#deptMenu .fl-menu-mobile-flyout .menu-item:focus-within > a,
#deptMenu .fl-menu-mobile-flyout .menu-item > a:hover,
#deptMenu .fl-menu-mobile-flyout .menu-item > a:focus-visible {
  color: var(--sky) !important;
}



/* Large / medium type tightening */
@media (max-width: 1200px) {
  #deptMenu a {
    font-size: 0.875rem !important;
    letter-spacing: 0.05em !important;
  }
}

/* Medium and smaller - Beaver Builder responsive toggle menu */
@media (max-width: 992px) {
  /* Main top-level links inside responsive menu */
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .menu > li > a {
    color: var(--soft-white) !important;
  }

  /* Hover / focus for top-level visible links */
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .menu > li > a:hover,
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .menu > li > a:focus-visible {
    color: var(--sky) !important;
  }

  /* Submenu links */
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .sub-menu a {
    color: var(--midnight);
    text-transform: none;
    letter-spacing: normal;
    font-weight: var(--weight-regular);
  }

  #deptMenu .fl-menu-responsive-toggle-medium-mobile .sub-menu .menu-item > a:hover,
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .sub-menu .menu-item > a:focus-visible {
    color: var(--sky) !important;
  }

  /* Mobile toggle label */
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .fl-menu-mobile-toggle-label {
    color: var(--soft-white) !important;
  }

  /* Hamburger icon */
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .hamburger-menu rect {
    fill: var(--soft-white) !important;
  }

  /* Fallback in case SVG itself is styled instead */
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .fl-menu-mobile-toggle svg {
    fill: var(--soft-white) !important;
  }

  /* Toggle button text / icon wrapper */
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .fl-menu-mobile-toggle {
    color: var(--soft-white) !important;
  }

  /* Submenu arrow toggle */
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .fl-menu-toggle {
    color: var(--soft-white) !important;
    border-color: var(--soft-white) !important;
  }

  /* Beaver Builder sometimes draws the arrow with pseudo-elements */
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .fl-menu-toggle::before,
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .fl-menu-toggle::after {
    background-color: var(--soft-white) !important;
  }

  /* Hover / focus on submenu toggles */
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .fl-menu-toggle:hover,
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .fl-menu-toggle:focus-visible {
    color: var(--sky) !important;
    border-color: var(--sky) !important;
  }

  #deptMenu .fl-menu-responsive-toggle-medium-mobile .fl-menu-toggle:hover::before,
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .fl-menu-toggle:hover::after,
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .fl-menu-toggle:focus-visible::before,
  #deptMenu .fl-menu-responsive-toggle-medium-mobile .fl-menu-toggle:focus-visible::after {
    background-color: var(--sky) !important;
  }
}

/* ------------------------------------------------------------------------
    Footer Menu
    ------------------------------------------------------------------------ */

.footer-menu a {
  color: var(--soft-white) !important;
  font-weight: var(--weight-medium) !important;
  font-size: 0.875rem;
  text-transform: uppercase !important;
  line-height: 2;
  letter-spacing: 0.05em;
  text-decoration: none;
  list-style: none !important;
  cursor: pointer;
}

.footer-menu a:hover {
  color: var(--sky) !important;
}

.footer-menu a:focus-visible {
  outline: var(--fts-focus-width) solid var(--fts-focus-ring);
  outline-offset: var(--fts-focus-offset);
}

.footer-menu {
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.fl-page-footer-wrap .menu,
.fl-page-footer-wrap .menu > ul,
.fl-page-footer-wrap ul.menu,
.fl-page-footer-wrap ul#menu-footer-menu,
.fl-page-footer-wrap ul.fl-menu,
.fl-page-footer-wrap ul.fl-menu-vertical,
.fl-page-footer-wrap ul.fl-menu-horizontal,
.fl-page-footer-wrap ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Safety: kill markers on li in case a theme re-adds them */
.fl-page-footer-wrap li::marker {
  content: "" !important;
}

/* ==========================================================================
   Submenus
   ========================================================================== */
.section-menu .fl-menu .sub-menu,
#menu-role-based-menu li ul {
  min-width: 240px;
  padding: 0.5rem 0;
  background-color: var(--white, #ffffff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: var(--weight-regular, 400) !important;
}

.section-menu .fl-menu .sub-menu li,
#menu-role-based-menu li ul li {
  border-bottom: none;
  background-color: transparent;
  font-weight: var(--weight-regular, 400) !important;
}

.section-menu .fl-menu .sub-menu li > a,
.section-menu .fl-menu .sub-menu li > a span,
#menu-role-based-menu li ul li > a,
#menu-role-based-menu li ul li > a span {
  display: block;
  padding: 0.35rem 0.75rem !important;
  font-family: var(--font-sans, "Noto Sans", sans-serif);
  font-style: normal;
  font-weight: var(--weight-regular, 400) !important;
  font-size: 0.875rem !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
  text-transform: none;
  text-decoration: none;
  color: var(--midnight, #101820) !important;
  background-color: transparent;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.section-menu .fl-menu .sub-menu li:is(:hover, :focus-within) > a,
.section-menu .fl-menu .sub-menu li:is(:hover, :focus-within) > a span,
.section-menu .fl-menu .sub-menu li > a:is(:hover, :focus, :focus-visible),
.section-menu .fl-menu .sub-menu li > a:is(:hover, :focus, :focus-visible) span,
#menu-role-based-menu li ul li:is(:hover, :focus-within) > a,
#menu-role-based-menu li ul li:is(:hover, :focus-within) > a span,
#menu-role-based-menu li ul li > a:is(:hover, :focus, :focus-visible),
#menu-role-based-menu li ul li > a:is(:hover, :focus, :focus-visible) span {
  color: var(--sky, #007fa3) !important;
  background-color: transparent;
}

.section-menu .fl-menu .sub-menu li > a:active,
.section-menu .fl-menu .sub-menu li > a:active span,
#menu-role-based-menu li ul li > a:active,
#menu-role-based-menu li ul li > a:active span,
.section-menu .fl-menu .sub-menu li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor) > a,
.section-menu .fl-menu .sub-menu li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor) > a span,
#menu-role-based-menu li ul li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor) > a,
#menu-role-based-menu li ul li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor) > a span {
  color: var(--midnight, #101820) !important;
  background-color: transparent;
}

/* ------------------------------------------------------------------------
    Site Title
    ------------------------------------------------------------------------ */

#siteTitle {
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.1;
  color: var(--white);
  margin: 0;
}

/* Allow explicit weight utility classes to override defaults. */
#siteTitle:where(.fts-weight-light) { font-weight: var(--weight-light); }
#siteTitle:where(.fts-weight-regular) { font-weight: var(--weight-regular); }
#siteTitle:where(.fts-weight-medium) { font-weight: var(--weight-medium); }
#siteTitle:where(.fts-weight-semibold) { font-weight: var(--weight-semibold); }
#siteTitle:where(.fts-weight-bold) { font-weight: var(--weight-bold); }

#siteTitle a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

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

#siteTitle a:focus-visible {
  outline: var(--fts-focus-width) solid var(--fts-focus-ring);
  outline-offset: var(--fts-focus-offset);
}

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

/* ------------------------------------------------------------------------
    Department Title
    ------------------------------------------------------------------------ */

#deptTitle p {
  font-family: var(--font-serif) !important;
  font-weight: var(--weight-light) !important;
  font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
  letter-spacing: 0.1em;
  text-transform: none;
/*   text-align: left; */
  line-height: 1.1;
  color: var(--white) !important;
  margin: 0;
  padding: 0;
}

/* Allow explicit weight utility classes to override defaults. */
#deptTitle:where(.fts-weight-light) { font-weight: var(--weight-light); }
#deptTitle:where(.fts-weight-regular) { font-weight: var(--weight-regular); }
#deptTitle:where(.fts-weight-medium) { font-weight: var(--weight-medium); }
#deptTitle:where(.fts-weight-semibold) { font-weight: var(--weight-semibold); }
#deptTitle:where(.fts-weight-bold) { font-weight: var(--weight-bold); }

#deptTitle a {
  color: inherit; /* inherits var(--white) from #deptTitle */
  font-weight: inherit;
  text-decoration: none;
}

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

#deptTitle a:focus-visible {
  outline: var(--fts-focus-width) solid var(--fts-focus-ring);
  outline-offset: var(--fts-focus-offset);
}

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

/* Forced colors support: rely on system outlines. */
@media (forced-colors: active) {
  :where(#topMenu a, #mainMenu a, #pageMenu a, #siteTitle a, #deptTitle a):focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }
}


/* ==========================================================================
   FTS: WordPress Comments
   Purpose: Align default WP comments with Fuller brand system
   ========================================================================== */

.fl-comments-list-title { font-size: 1.5rem !important; }

/* Wrapper */
.comments-area {
  margin-top: 1rem;
  font-family: var(--font-sans);
}

/* Section title */
.comments-area h2,
.comments-area .comments-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--midnight);
}

/* Comment list reset */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* Individual comment */
.comment {
  margin-bottom: 0;
  padding-bottom: 0;
  /* border-bottom: 1px solid var(--cream); */
}

/* Comment body */
.comment-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.comment-content {
  background-color: var(--ivory);
  border: none !important;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--midnight);
}

/* Author name */
.comment-author {
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--ocean);
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.comment-meta:has(img.avatar) {
  padding-left: 0;
}

.comment-avatar img.avatar[src*="gravatar.com"][src*="d=blank"] {
  display: none;
}

.comment-avatar:has(img.avatar[src*="gravatar.com"][src*="d=blank"]) {
  display: none;
}

/* Metadata (date, edit link) */
.comment-metadata {
  display: flex;
  flex-direction: row;
  font-size: 0.8rem;
  color: var(--slate);
}

.comment-metadata a {
  color: var(--slate);
}

.comment-metadata a:hover {
  color: var(--sky);
}



/* Reply link */
.reply a {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--weight-semibold);
  color: var(--ocean);
}

.reply a:hover {
  color: var(--sky);
}

/* Nested comments */
.comment-list .children {
  list-style: none;
  margin-left: 2rem;
  margin-top: 1.5rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--cream);
}


/* ==========================================================================
   Comment Form
   ========================================================================== */

.comment-respond {
  margin-top: 3rem;
}

.comment-form label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--weight-semibold);
  margin-bottom: 0.4rem;
  color: var(--midnight);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--cream);
  border-radius: var(--radius-0) !important;
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color 160ms ease;
}

.comment-form input:focus-visible,
.comment-form textarea:focus-visible {
  outline: var(--fts-focus-width) solid var(--fts-focus-ring);
  outline-offset: var(--fts-focus-offset);
  border-color: var(--sky);
}

/* Submit button uses Fuller button base */
.comment-form input[type="submit"],
#fl-comment-form-submit {
  margin-top: 1rem;
  background-color: var(--ocean) !important;
  color: var(--white);
  border: 0px solid transparent !important;
  border-radius: 0px !important;
  padding: 10px 30px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--fts-btn-transition) ease;
}

.comment-form input[type="submit"]:hover {
  background-color: var(--sky);
}

/* ==========================================================================
   FTS Panel Toggle
   Purpose:
   - Panels begin closed on the front end
   - Panels remain visible in Beaver Builder editing contexts
   ========================================================================== */

body:not(.fl-builder):not(.fl-builder-edit):not(.fl-builder-preview) .fts-panel {
  display: none;
}

.eyebrow {
  color: var(--midnight) !important;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold) !important;
  font-size: 1.125rem !important;
  letter-spacing: 0.015em;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0;
  /* margin-bottom: 0.125rem !important; */
}

/* ==========================================================================
   Beaver Builder Native Tabs Theme Layer
   Scope with .fts-theme-tabs so this is opt-in
   ========================================================================== */

.fts-theme-tabs .fl-tabs {
  font-family: var(--font-sans);
  color: var(--midnight);
}

.fts-theme-tabs .fl-tabs-labels {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.fts-theme-tabs .fl-tabs-label {
  background: transparent;
  border: 0;
  padding: 0.25rem 0;
  font-weight: 600;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--midnight);
}

.fts-theme-tabs .fl-tabs-label:hover,
.fts-theme-tabs .fl-tabs-label:focus-visible {
  color: var(--sky);
  background: transparent;
  border: 0;
}

.fts-theme-tabs .fl-tabs-label.fl-tab-active {
  color: var(--ocean);
  background: transparent;
  border: 0;
}

.fts-theme-tabs .fl-tabs-panel-content {
  background: var(--white);
  padding: 1rem;
}

.fts-theme-tabs .fl-tabs-panel-content li {
  line-height: 2;
}