/* ==========================================================================
   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.
   ========================================================================== */

  /* ------------------------------------------------------------------------
     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.05em;
    font-weight: var(--weight-regular);
    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: clamp(1rem, 1.5vw, 1.125rem);
    text-decoration: none, !important;
    cursor: pointer;
  }

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

  #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);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 100;
  }

  /* WordPress menu sub-menu class is broad. Keep this minimal. */
  #mainMenu :where(.sub-menu) {
    margin-left: -10px;
  }

  /* WordPress menu sub-menu class is broad. Keep this minimal. */
  .sub-menu .menu-item a {
    font-weight: var(--weight-medium) !important;
    font-size: 0.875rem !important;
  }

  /* ------------------------------------------------------------------------
     Page Menu
     ------------------------------------------------------------------------ */

  #pageMenu a {
    color: var(--ivory);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
  }

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

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

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

  #pageMenu {
    position: relative;
    z-index: 100;
  }

  #pageMenu :where(.sub-menu) {
	background-color: #ffffff;
  }

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

  #deptMenu a {
    color: var(--ivory);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
  }

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

  #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;
    z-index: 100;
  }

  #deptMenu :where(.sub-menu) {
	background-color: #ffffff;
  }

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

 .footerMenu a {
    color: var(--soft-white) !important;
    font-weight: var(--weight-regular) !important;
    font-size: 0.875rem;
    line-height: 2;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
  }

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

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

.footerMenu {
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 100;
  }

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

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

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

  .deptTitle a {
	color: white !important;
  }

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

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

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