/* ===================== CMDFW HEADER STYLES ===================== */

/* Base + box-sizing for the header (it lives outside any .cmdfw-home-page wrapper) */
.cmdfw-home-sticky-wrap,
.cmdfw-home-sticky-wrap *,
.cmdfw-home-mobile-menu,
.cmdfw-home-mobile-menu * {
  box-sizing: border-box;
}

.cmdfw-home-sticky-wrap,
.cmdfw-home-mobile-menu {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #2c2c2a;
  line-height: 1.5;
}

.cmdfw-home-sticky-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
}

.cmdfw-home-banner {
  background: #4A1B0C;
  color: #FAEEDA;
  text-align: center;
  padding: 10px 40px 10px 16px;
  font-size: 15px;
  font-family: "Cormorant Garamond", Georgia, serif;
  position: relative;
}

.cmdfw-home-banner a {
  color: #FAC775 !important;
  text-decoration: underline;
  font-weight: 500;
}

.cmdfw-home-banner-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #FAC775;
  cursor: pointer;
  font-size: 16px;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
}

.cmdfw-home-header {
  background: #FFFFFF;
  border-bottom: 0.5px solid #FAC775;
  padding: 18px 20px;   /* was 18px 32px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;            /* was 1.5rem */
}

.cmdfw-home-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

/* Official logo image (CMDFW_LOGO_13). Native 386x92; displayed larger,
   Toronto-scale. height drives it; width auto keeps the aspect ratio. */
.cmdfw-home-logo-img {
  height: 52px;    /* was 46px */
  width: auto;
  display: block;
}

/* Built lockup (Om mark + text) — kept for easy revert if the official
   logo's blue/orange clashes with the maroon header. Both can't show at once;
   header.php renders one or the other. */
.cmdfw-home-logo-mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #4A1B0C;
  color: #FAC775;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  flex-shrink: 0;
}

.cmdfw-home-logo-text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #4A1B0C;
  line-height: 1.1;
}

.cmdfw-home-logo-text .home-sub {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  color: #854F0B;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
  font-weight: 500;
}

.cmdfw-home-nav {
  display: flex;
  gap: 4px;
  font-size: 17px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cmdfw-home-nav-item {
  position: relative;
  list-style: none;
}

.cmdfw-home-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 10px;      /* was 9px 16px */
  white-space: nowrap;    /* NEW — labels can never split mid-word */
  color: #4A1B0C !important;
  text-decoration: none;
  font-weight: 500;
  border-radius: 4px;
}

.cmdfw-home-nav-link:hover {
  color: #BA7517 !important;
}

.cmdfw-home-nav-link svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.cmdfw-home-nav-item:hover .cmdfw-home-nav-link svg {
  transform: rotate(180deg);
}

.cmdfw-home-nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #FFFFFF;
  border: 0.5px solid #FAC775;
  border-radius: 8px;
  padding: 8px 0;
  min-width: 250px;
  box-shadow: 0 8px 24px rgba(74, 27, 12, 0.15);
  list-style: none;
  margin: 6px 0 0;
  z-index: 200;
}

/* Invisible bridge across the 6px gap so the dropdown
   stays open while the cursor travels down to it. */
.cmdfw-home-nav-dropdown::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

/* Dropdown caret for parent items (wp_nav_menu doesn't output the inline SVG). */
.cmdfw-home-nav .menu-item-has-children > .cmdfw-home-nav-link::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
.cmdfw-home-nav .menu-item-has-children:hover > .cmdfw-home-nav-link::after {
  transform: translateY(1px) rotate(225deg);
}

.cmdfw-home-nav-item:hover .cmdfw-home-nav-dropdown {
  display: block;
}

.cmdfw-home-nav-dropdown li {
  list-style: none;
}

.cmdfw-home-nav-dropdown a {
  display: block;
  padding: 10px 18px;
  color: #4A1B0C !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
}

.cmdfw-home-nav-dropdown a:hover {
  background: #FAEEDA;
  color: #BA7517 !important;
}

.cmdfw-home-util {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 15px;
}

.cmdfw-home-util a {
  color: #4A1B0C !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;    /* was 18px */
}

.cmdfw-home-util a:hover {
  color: #BA7517 !important;
}

.cmdfw-home-util .home-donate {
  background: #FAC775;
  color: #4A1B0C !important;
  padding: 9px 20px;
  border-radius: 6px;
  font-weight: 600;
  border: 0.5px solid #FAC775;
}

.cmdfw-home-util .home-donate:hover {
  background: #f0b855;
  color: #4A1B0C !important;
}

.cmdfw-home-util svg {
  width: 17px;
  height: 17px;
}

.cmdfw-home-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: #4A1B0C;
}

.cmdfw-home-hamburger svg {
  width: 24px;
  height: 24px;
}

.cmdfw-home-mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #4A1B0C;
  z-index: 9999;
  overflow-y: auto;
  padding: 1.5rem;
}

.cmdfw-home-mobile-menu.is-open {
  display: block;
}

/* When logged in, the WP admin bar is fixed at the top with a HIGHER z-index
   than this overlay, so it covers the menu's top strip — exactly where the
   close (X) button sits. Push the menu (and its close button) down to clear
   the admin bar. 46px on phones, 32px once the bar goes to its desktop height.
   Front-end visitors aren't logged in, so they never hit this — it only
   affects admins testing the menu. */
body.admin-bar .cmdfw-home-mobile-menu {
  top: 46px;
}
@media screen and (min-width: 783px) {
  body.admin-bar .cmdfw-home-mobile-menu {
    top: 32px;
  }
}

.cmdfw-home-mobile-menu-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: #FAC775;
  cursor: pointer;
  padding: 8px;
}

.cmdfw-home-mobile-menu-close svg {
  width: 26px;
  height: 26px;
}

.cmdfw-home-mobile-menu-search {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FAEEDA;
  border-radius: 6px;
  padding: 10px 14px;
}

.cmdfw-home-mobile-menu-search svg {
  width: 18px;
  height: 18px;
  color: #854F0B;
  flex-shrink: 0;
}

.cmdfw-home-mobile-menu-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  color: #4A1B0C;
  font-family: inherit;
}

.cmdfw-home-mobile-menu-search input::placeholder {
  color: #854F0B;
  opacity: 0.7;
}

.cmdfw-home-mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cmdfw-home-mobile-accordion {
  border-bottom: 0.5px solid rgba(250, 199, 117, 0.2);
}

.cmdfw-home-mobile-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  color: #FAEEDA;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.cmdfw-home-mobile-accordion-header svg {
  width: 16px;
  height: 16px;
  color: #FAC775;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.cmdfw-home-mobile-accordion.is-open .cmdfw-home-mobile-accordion-header svg {
  transform: rotate(180deg);
}

.cmdfw-home-mobile-accordion-body {
  display: none;
  padding: 4px 0 16px 16px;
}

.cmdfw-home-mobile-accordion.is-open .cmdfw-home-mobile-accordion-body {
  display: block;
}

.cmdfw-home-mobile-accordion-body a {
  display: block;
  padding: 9px 4px;
  color: #F5C4B3 !important;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}

.cmdfw-home-mobile-accordion-body a:hover {
  color: #FAC775 !important;
}

.cmdfw-home-mobile-menu-nav > a {
  display: block;
  padding: 14px 4px;
  color: #FAEEDA !important;
  text-decoration: none;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
  border-bottom: 0.5px solid rgba(250, 199, 117, 0.2);
}

.cmdfw-home-mobile-menu-nav > a:hover {
  color: #FAC775 !important;
}

.cmdfw-home-mobile-menu-divider {
  height: 1px;
  background: rgba(250, 199, 117, 0.3);
  margin: 1.5rem 0;
  border: none;
}

.cmdfw-home-mobile-menu-utility {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cmdfw-home-mobile-menu-utility a {
  padding: 12px 14px;
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cmdfw-home-mobile-menu-utility .mobile-login {
  border: 0.5px solid #FAC775;
  color: #FAC775 !important;
}

.cmdfw-home-mobile-menu-utility .mobile-donate {
  background: #FAC775;
  color: #4A1B0C !important;
  border: 0.5px solid #FAC775;
}

.cmdfw-home-mobile-menu-utility svg {
  width: 14px;
  height: 14px;
}

/* ----- Desktop header search (inline pill; hidden < 1100px, mobile uses the menu search) ----- */
.cmdfw-home-search {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #FAEEDA;
  border: 1px solid #EBD9B8;
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cmdfw-home-search:focus-within {
  border-color: #FAC775;
  box-shadow: 0 0 0 3px rgba(250, 199, 117, 0.25);
}
.cmdfw-home-search input {
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #4A1B0C;
  width: 95px;    /* was 120px */
}
.cmdfw-home-search input::placeholder { color: #9A7A52; opacity: 1; }
.cmdfw-home-search button {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #854F0B;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.cmdfw-home-search button:hover { background: #FAC775; color: #4A1B0C; }
.cmdfw-home-search button svg { width: 15px; height: 15px; }


/* ----- Header responsive ----- */
@media (max-width: 1100px) {
  .cmdfw-home-nav { display: none; }
  .cmdfw-home-hamburger { display: block; }
  .cmdfw-home-search { display: none; }
}

@media (max-width: 640px) {
  .cmdfw-home-header { padding: 12px 16px; gap: 1rem; }
  .cmdfw-home-logo-img { height: 42px; }
  .cmdfw-home-logo-text { font-size: 17px; }
  .cmdfw-home-logo-text .home-sub { font-size: 10px; }
  .cmdfw-home-logo-mark { width: 40px; height: 40px; font-size: 18px; }
  .cmdfw-home-util { gap: 12px; font-size: 13px; }
  .cmdfw-home-util .home-donate { padding: 7px 14px; font-size: 13px; }
  .cmdfw-home-util a span.home-login-label { display: none; }
}

/* ----- Login dropdown (desktop) ----- */
.cmdfw-home-login {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* caret on the trigger, matching the nav dropdowns */
.cmdfw-home-login-trigger::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
.cmdfw-home-login:hover .cmdfw-home-login-trigger::after {
  transform: translateY(1px) rotate(225deg);
}

/* reuse the nav-dropdown panel look; just anchor it to the right edge */
.cmdfw-home-login-dropdown {
  right: 0;
  left: auto;
}

/* reveal on hover (the .cmdfw-home-nav-item rule doesn't reach this wrapper) */
.cmdfw-home-login:hover .cmdfw-home-login-dropdown {
  display: block;
}

/* dropdown links — restore the menu-item look (overrides .cmdfw-home-util a) */
.cmdfw-home-login-dropdown a {
  display: block;
  padding: 10px 18px;
  gap: 0;
  font-size: 15px;
  font-weight: 400;
  color: #4A1B0C !important;
}
.cmdfw-home-login-dropdown a:hover {
  background: #FAEEDA;
  color: #BA7517 !important;
}

/* greyed, non-clickable "coming soon" item */
.cmdfw-home-login-soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 18px;
  font-size: 15px;
  color: #b3aaa0;
  cursor: default;
}
.cmdfw-home-login-soon small {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b3aaa0;
  border: 0.5px solid #e3dccf;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}

/* on tablet/mobile the hover dropdown isn't usable — keep Login a plain link */
@media (max-width: 1100px) {
  .cmdfw-home-login-trigger::after { display: none; }
}