/* Reset & Logo Styles */
.sfhm-hd__logo b {
  display: block;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sfhm-hd__logo span {
  display: block;
  color: var(--gold, #FFB800);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Navigation Menu Styles */
.sfhm-hd__nav {
  display: flex;
  align-items: center;
  gap: 4px 14px;
  flex-wrap: wrap;
}

.sfhm-hd__nav > a,
.sfhm-hd__nav-item,
.sfhm-hd__dd-toggle {
  color: #fff;
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}

.sfhm-hd__nav > a:hover,
.sfhm-hd__dd-toggle:hover {
  color: var(--gold, #FFB800);
  border-bottom-color: var(--gold, #FFB800);
}

.sfhm-hd__nav-item--disabled {
    color: #666;
    cursor: not-allowed;
}

.sfhm-hd__nav > a[aria-current=page] {
  color: var(--gold, #FFB800);
  border-bottom-color: var(--gold, #FFB800);
}

/* Registration Button */
.sfhm-hd__reg {
  background: #AD4A2E !important; /* Accessible Terracotta text color context */
  color: #fff !important;
  font-weight: 700;
  padding: 9px 20px !important;
  border-radius: 999px;
  font-size: .82rem;
  letter-spacing: .05em;
  border-bottom: none !important;
  display: inline-block !important; /* Ensure visibility */
}

.sfhm-hd__reg:hover {
  background: #8C3A24 !important;
}

/* Dropdown */
.sfhm-hd__dd {
  position: relative;
  display: inline-block;
}

.sfhm-hd__dd-toggle {
  cursor: pointer;
}

.sfhm-hd__dd-toggle::after {
  content: '\25BE';
  font-size: .7em;
  margin-left: 3px;
  opacity: .7;
}

.sfhm-hd__dd-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: #0A0A0A;
  border: 1px solid #1E1E1E;
  border-top: 2px solid #C2593F; /* Primary Accent Color */
  z-index: 1000;
  padding: 16px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

/* 4th Column Layout within Panel */
.sfhm-hd__dd-panel.mega-has-cta {
    display: none;
    min-width: 600px;
    gap: 20px;
}

.sfhm-hd__dd.open .sfhm-hd__dd-panel.mega-has-cta,
.sfhm-hd__dd:hover .sfhm-hd__dd-panel.mega-has-cta {
    display: grid !important; /* Ensure grid displays on hover/open */
}


.sfhm-hd__dd-col {
    display: flex;
    flex-direction: column;
}

.sfhm-hd__dd-panel a {
  display: flex !important;
  align-items: center;
  padding: 8px 12px !important;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: none !important;
  min-height: 36px;
  box-sizing: border-box;
}

.sfhm-hd__dd-panel a:hover {
  color: #FFB800;
  background: #141414;
}

.sfhm-hd__dd:hover .sfhm-hd__dd-panel,
.sfhm-hd__dd:focus-within .sfhm-hd__dd-panel {
  display: block;
}

.sfhm-hd__dd.open .sfhm-hd__dd-panel {
  display: block;
}

/* SFHM-CTA-CARD Variables Fallbacks */
:root {
  --line: #e2e8f0;
  --adobe: #C2593F;
  --font-display: 'Oswald', sans-serif;
  --ink: #1a202c;
  --ink-soft: #4a5568;
  --clay: #AD4A2E;
}


/* SFHM-CTA-CARD Styles */
#sitenav-wrap .mega-has-cta {
    grid-template-columns: repeat(3,1fr) 240px;
}

#sitenav-wrap .mega-ctacard {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 5px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--line);
    border-left: 3px solid var(--adobe);
}

#sitenav-wrap .mcc-head {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ink);
    margin: 0;
}

#sitenav-wrap .mcc-date {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--ink-soft);
    margin: 0;
}

#sitenav-wrap .mcc-btn {
    margin-top: auto;
    text-align: center;
    background: var(--clay);
    color: #fff5e9;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: background .2s;
}

#sitenav-wrap .mcc-btn:hover,
#sitenav-wrap .mcc-btn:focus-visible {
    background: #8C3A24;
}

@media (max-width:1100px) {
    #sitenav-wrap .mega-has-cta {
        grid-template-columns: repeat(3,1fr);
    }
    #sitenav-wrap .mega-ctacard {
        display: none;
    }
}


/* Know-Before-You-Go tiles */
.sfhm-kbyg {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 8px;
}

.sfhm-kbyg__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.sfhm-kbyg__tile {
  background: #111;
  border: 1px solid #1E1E1E;
  border-radius: 10px;
  padding: 18px 16px;
  position: relative;
  overflow: hidden;
}

.sfhm-kbyg__tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 10px 10px 0 0;
}

.sfhm-kbyg__tile--start::before {
  background: #FFB800;
}

.sfhm-kbyg__tile--packet::before {
  background: #2C6E49;
}

.sfhm-kbyg__tile--kids::before {
  background: #E07A5F;
}

.sfhm-kbyg__tile--roads::before {
  background: #C44536;
}

.sfhm-kbyg__tile h3 {
  font-family: 'Oswald', sans-serif;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FFB800;
  margin: 0 0 8px;
  font-weight: 700;
}

.sfhm-kbyg__tile p {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  line-height: 1.5;
  color: #D4D4D4;
  margin: 0;
}

.sfhm-kbyg__tile p strong {
  color: #fff;
}

.sfhm-kbyg__tile a {
  color: #FFB800;
  text-decoration: underline;
  font-size: .78rem;
}

@media(max-width:760px){
  .sfhm-hd__in{
    justify-content: center;
    text-align: center;
  }
  .sfhm-hd__nav{
    justify-content: center;
  }
  .sfhm-hd__dd-panel{
    left: 50%;
    transform: translateX(-50%);
  }
  .sfhm-kbyg__grid{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

@media(max-width:480px){
  .sfhm-kbyg__grid{
    grid-template-columns: 1fr;
  }
}