/* ==========================================================================
  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: 120px; /* adjust to header height */
}

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

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

.fuller-logo .fl-html svg {
  display: block;
  width: 380px;
  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. */
#topMenu:where(.fts-weight-light) { font-weight: var(--weight-light); }
#topMenu:where(.fts-weight-regular) { font-weight: var(--weight-regular); }
#topMenu:where(.fts-weight-medium) { font-weight: var(--weight-medium); }
#topMenu:where(.fts-weight-semibold) { font-weight: var(--weight-semibold); }
#topMenu:where(.fts-weight-bold) { font-weight: var(--weight-bold); }

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

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

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

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

#mainMenu a {
  color: inherit;
  font-weight: var(--weight-semibold) !important;
  font-size: 1rem;
  letter-spacing: 0.015em;
  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: 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: #ffffff;
  padding: 10px;
}

/* 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 a {
  color: var(--ivory);
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.075rem !important;
  text-transform: uppercase;
  text-decoration: none;
  padding-top: 10px;
  padding-bottom:10px;
  cursor: pointer;
}

#deptMenu a:hover {
  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);
}

#deptMenu {
  position: relative;
}

#deptMenu .fl-menu-mobile-flyout {
  background-color: var(--white);
  padding: 10px !important;
}

#deptMenu .fl-menu-mobile-flyout .menu-item > a {
  color: var(--midnight) !important;
  font-weight: var(--weight-semibold);
  text-align: right;
}

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

/* ------------------------------------------------------------------------
    Footer: list reset
    Prevents themes from applying bullets/margins to footer navigation lists.
    Defined here (front end) rather than fts-bb-ui-fixes.css (editor-only)
    to ensure live site and editor are in sync.
    ------------------------------------------------------------------------ */

.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;
}

/* ------------------------------------------------------------------------
    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);
}

/* ------------------------------------------------------------------------
    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 {
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  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);
  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: center; }
}

/* 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;
}

/* Author name */
.comment-author {
  font-weight: 600;
  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);
}

/* Comment text */
.comment-content {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--midnight);
}

/* Reply link */
.reply a {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  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: 0;
  border-left: 2px solid var(--cream);
  padding-left: 1.5rem;
}


/* ==========================================================================
   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: 600;
  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: 0px !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; */
}