/* =====================================================================
   FF Header Nav v1.1.1 (2026-09-28, Sarah + Claude; v1.0.0 2026-09-18)
   v1.1.1: pins the suite sheet's title line-height so theme heading
   line-heights (43px on first-five-theme) cannot push it into the subtitle.
   Dropdowns + Teacher Tools mega menu for the site-1 primary menu.
   Loaded by the "FF Header - mega menu" snippet, which swaps the theme's
   Bootstrap navwalker for FF_Mega_Navwalker on teacher-door pages.
   Every class here is prefixed ffn- (no Bootstrap-reserved names).
   Brand: navy #001b72 (matches the live header buttons), teal #00b09b,
   gold #ffc107, teal tint #e8f8f4, lavender #f4f1ff.
   ===================================================================== */

:root {
  --ffn-navy: #001b72;
  --ffn-teal: #00b09b;
  --ffn-gold: #ffc107;
  --ffn-ink: #101820;
  --ffn-muted: #5f6b7a;
  --ffn-line: #e6e9ef;
  --ffn-tint: #e8f8f4;
  --ffn-lav: #f4f1ff;
  --ffn-hover: #f2fbf9;
  --ffn-shadow: 0 18px 40px rgba(16, 27, 60, .16);
  --ffn-radius: 14px;
}

/* ---------- top level ---------- */
.main-nav-container { position: relative; }

.ffn-item { position: relative; }
.ffn-item--mega { position: static; }

.ffn-top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  cursor: pointer;
}
.ffn-top[aria-haspopup]::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 0 !important;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.ffn-item.is-open > .ffn-top[aria-haspopup]::after { transform: rotate(-135deg) translateY(-2px); }
.ffn-item.is-open > .ffn-top { color: var(--ffn-navy); }
.ffn-item.is-open > .ffn-top::before { width: 100% !important; }

/* small gold NEW above a top-level item (menu item class ffn-new); the
   top link is position:relative in the theme, so this hangs off the link */
.ffn-top { position: relative; }
.ffn-newtop {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-35%);
  background: var(--ffn-gold);
  color: #3b2f00;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  letter-spacing: .02em;
  pointer-events: none;
}

/* ---------- panels ---------- */
.ffn-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  padding-top: 14px; /* hover bridge between link and card */
  margin: 0;
}
.ffn-item.is-open > .ffn-panel { display: block; }
.ffn-item--mega > .ffn-panel { left: 50%; width: min(1120px, calc(100vw - 48px)); }

.ffn-card {
  background: #fff;
  border: 1px solid var(--ffn-line);
  border-radius: var(--ffn-radius);
  box-shadow: var(--ffn-shadow);
  overflow: hidden;
}

/* reset the theme's nav link rules inside panels */
.main-nav-container .ffn-panel ul,
.main-nav-container .ffn-panel li { padding: 0; margin: 0; list-style: none; }
.main-nav-container .ffn-panel a { font-size: 15px; position: static; }
.main-nav-container .ffn-panel a::before,
.main-nav-container .ffn-panel a::after { display: none !important; }

/* simple dropdown list */
.ffn-list { min-width: 320px; padding: 10px; }
.ffn-link {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--ffn-ink);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.25;
}
.ffn-link:hover,
.ffn-link:focus-visible { background: var(--ffn-hover); color: var(--ffn-navy); outline: none; text-decoration: none; }
.ffn-link:focus-visible { box-shadow: inset 0 0 0 2px var(--ffn-teal); }
.ffn-desc {
  display: block;
  color: var(--ffn-muted);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.4;
  margin-top: 3px;
}

/* badges */
.ffn-tag {
  display: inline-block;
  margin-left: 7px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  vertical-align: 2px;
  background: var(--ffn-gold);
  color: #3b2f00;
}
.ffn-tag--soon { background: #eef1f5; color: #586171; }
.ffn-pill {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 999px;
  vertical-align: middle;
  background: var(--ffn-navy);
  color: #fff;
}

/* ---------- mega menu ---------- */
.ffn-mega {
  display: grid;
  grid-template-columns: 1.05fr 1.05fr 1.05fr .95fr;
}
.ffn-col {
  padding: 26px 24px 22px;
  border-right: 1px solid var(--ffn-line);
}
.ffn-col:last-of-type { border-right: 0; }
.ffn-heading {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--ffn-navy);
  margin: 0 0 10px;
}
.ffn-col .ffn-link { padding: 9px 10px; margin: 1px -10px; }
.ffn-col .ffn-link--featured {
  border: 1px solid #cfeee8;
  background: var(--ffn-tint);
  margin-top: 6px;
}
.ffn-col .ffn-link--featured:hover { background: #dcf4ee; }
.ffn-link--soon { cursor: default; color: #6b7480; }
.ffn-link--soon:hover { background: transparent; color: #6b7480; }
.ffn-link--soon .ffn-desc { color: #8a93a3; }

/* tool tiles in front of mega-menu links (menu item class ffn-ico-<key>) */
.ffn-link--ico { display: flex; align-items: flex-start; gap: 11px; }
.ffn-ico { flex: 0 0 32px; width: 32px; height: 32px; margin-top: 1px; }
.ffn-ico svg { display: block; width: 100%; height: 100%; }
.ffn-txt { display: block; min-width: 0; }

/* promo rail (right column) */
.ffn-promo {
  background: linear-gradient(180deg, var(--ffn-tint) 0%, var(--ffn-lav) 100%);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.ffn-promo-card {
  background: #fff;
  border: 1px solid var(--ffn-line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 28px rgba(16, 27, 60, .08);
}
.ffn-promo-eyebrow {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ffn-teal);
}
.ffn-promo-card h3 {
  font-size: 20px;
  line-height: 1.12;
  margin: 7px 0 8px;
  color: var(--ffn-navy);
  font-weight: 800;
}
.ffn-promo-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ffn-muted);
  margin: 0 0 14px;
}
.main-nav-container .ffn-panel a.ffn-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  background: var(--ffn-navy);
  border-radius: 999px;
  padding: 10px 16px;
  white-space: nowrap;
}
.main-nav-container .ffn-panel a.ffn-promo-cta:hover { background: #0a2a8f; color: #fff; }

/* ---------- collapsed header (below the theme's xl breakpoint) ---------- */
@media (max-width: 1199.98px) {
  .ffn-item, .ffn-item--mega { position: static; }
  .ffn-newtop { position: static; transform: none; margin-left: 8px; vertical-align: 2px; }
  .ffn-panel {
    position: static;
    transform: none;
    width: auto !important;
    padding: 0 0 4px 12px;
  }
  .ffn-card { border: 0; box-shadow: none; border-radius: 0; background: transparent; }
  .ffn-list { min-width: 0; padding: 0; }
  .ffn-link { padding: 10px 8px; }
  .ffn-mega { display: block; }
  .ffn-col { padding: 8px 0 12px; border-right: 0; border-bottom: 1px solid var(--ffn-line); }
  .ffn-col .ffn-link { margin: 0; }
  .ffn-heading { margin: 8px 0 4px; }
  .ffn-promo { display: none; } /* keep the phone menu compact */
}

@media (prefers-reduced-motion: reduce) {
  .ffn-top[aria-haspopup]::after { transition: none; }
}

/* --- suite-nav sheet (uploads/et-apps/suite-nav/suite-nav.js) ---------------
   Its h4 has no line-height, so each theme's heading line-height leaks in and
   the title lands on the subtitle. Both sites load this file on every header
   page, and it busts on upload, so the fix lives here rather than behind the
   ETSN_V pins. Fold into suite-nav.js at its next version bump. */
#etsn-sheet h4 { top: 16px !important; line-height: 1.15 !important; }
#etsn-sheet .etsn-sub { top: 38px !important; line-height: 1.3 !important; }