/* ===== Base reset and tokens ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary-blue:#003F7F; --deep-blue:#003F7F;
  --gold:#FFB81C; --light-gold:#FFC845; /* untouched (used by header/ribbon) */
  --navy:#003F7F; --navy-2:#0a1a2c;
  --white:#fff; --text:#fff;
  --shadow:rgba(0,33,71,.10); --shadow-dark:rgba(0,33,71,.2);
}
html,body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);
  min-height:100vh; overflow-x:hidden;
}
body.menu-open{overflow:hidden}

/* ===== Main header ===== */
.main-header{
  background:linear-gradient(135deg,var(--primary-blue) 0%,var(--deep-blue) 100%);
  position:fixed; inset:0 0 auto 0; z-index:1000;
  box-shadow:0 4px 20px var(--shadow-dark);
}
body{padding-top:77px}
.header-container{
  max-width:100%; margin:0 auto; padding:2px;
  display:flex; justify-content:center; align-items:center; position:relative; height:75px;
}
.title-section{text-align:center; color:var(--white)}
.title-section h1{
  font-family:'Crimson Text',serif; font-size:45px!important; font-weight:600; letter-spacing:2px; color:#ffffff!important;
  position:relative; display:inline-block;
}
.title-section h1::after{
  content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%);
  width:240px; height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); /* keep gold */
}
.title-section .subtitle{
  font:400 14px/1 'Inter'; letter-spacing:2px; margin-top:6px;
  color:var(--light-gold)!important; text-transform:uppercase; /* keep gold-ish */
  font-size: 13px!important;
}

/* ===== Burger button ===== */
.menu-btn{
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  width:48px; height:40px; display:flex; flex-direction:column; gap:6px;
  justify-content:center; background:transparent; border:0; cursor:pointer; z-index:30;
}
.menu-btn .line{
  height:3px; border-radius:3px; background:#fff;
  transition:transform .25s ease,opacity .2s ease;
}
.menu-btn .line:nth-child(1){width:28px}
.menu-btn .line:nth-child(2){width:20px}
.menu-btn .line:nth-child(3){width:32px}
.menu-btn .line:nth-child(4){width:16px}
.menu-btn.is-open .line:nth-child(2),
.menu-btn.is-open .line:nth-child(4){opacity:0}
.menu-btn.is-open .line:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-btn.is-open .line:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ===== Legacy grid menu styles (fullscreen) ===== */
.modern-menu{
  display:none; position:fixed; inset:0; z-index:9998;
  opacity:0; visibility:hidden;
}
.modern-menu.active,
.modern-menu[aria-hidden="false"]{ display:block; opacity:1; visibility:visible; }

.menu-overlay{
  position:absolute; inset:0;
  background:#003F7F;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}

.menu-container{
  position:relative; z-index:1; width:100%; height:100%;
  display:flex; flex-direction:column;
  padding:1px 40px 60px; max-width:100%; margin:0 auto;
  transform:translateY(-20px); transition:transform .3s ease;
}
.modern-menu.active .menu-container{ transform:translateY(0); }

/* --- menu window: gold -> white --- */
.menu-close-btn{
  position:absolute; top:30px; right:40px; width:50px; height:50px; border-radius:50%;
  border:1px solid #fff; background:transparent; color:#fff;           /* was gold */
  font-size:24px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all .3s ease; z-index:10;
}
.menu-close-btn:hover{ background:#fff; color:var(--navy); transform:scale(1.1); } /* was gold */

.menu-header{ display:flex; justify-content:flex-end; margin-bottom:60px; }
.menu-search{
  display:flex; align-items:center; 
  border-radius:25px; padding:5px; border:1px solid rgba(255,255,255,.3); /* was rgba gold */
}
.search-input{
  background:transparent; border:0; padding:12px 20px; color:var(--white);
  font-size:16px; width:200px; outline:none;
}
.search-input::placeholder{ color:rgba(255,255,255,.7); }
.search-btn{
  background:#fff; border:0; width:40px; height:40px; border-radius:50%;
  color:var(--navy); cursor:pointer; transition:all .3s ease; display:flex; align-items:center; justify-content:center; /* was gold */
}
.search-btn:hover{ background:#fff; transform:scale(1.1); }

.menu-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-bottom:60px;
}

/* Card + submenu wrapper */
.menu-item-wrapper{ position:relative; }

/* Main card */
.menu-item{
  display:flex; flex-direction:column; align-items:center; text-decoration:none;
  padding:40px 20px;
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 100%); /* was gold tint */
  border:1px solid rgba(255,255,255,.20); border-radius:15px; position:relative; overflow:hidden;
  transition:all .3s ease;
}
.menu-item::before{
  content:''; position:absolute; inset:0 auto 0 -100%;
  width:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); /* was gold tint */
  transition:left .6s ease;
}
.menu-item:hover::before{ left:100%; }
.menu-item:hover{
  transform:translateY(-5px); border-color:#fff;                            /* was gold */
  box-shadow:0 10px 30px rgba(255,255,255,.2);                              /* was gold */
}
.menu-icon{
  width:80px; height:80px; background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  font-size:32px; color:var(--navy); transition:all .3s ease;display:none;         /* was gold */
}
.menu-item:hover .menu-icon{ transform:scale(1.1); background:#fff; }       /* was light-gold */
.menu-label{
  font-family:'Montserrat',sans-serif; font-size:18px; font-weight:600;
  color:var(--white); text-transform:uppercase; letter-spacing:1px; text-align:center; transition:all .3s ease;
}
.menu-item:hover .menu-label{ color:#fff; }                                  /* was gold */

/* Submenu indicator */
.submenu-indicator{
  position:absolute; top:15px; right:15px; font-size:16px; color:#fff;      /* was gold */
  transition:transform .3s ease;
}
.menu-item-wrapper:hover .submenu-indicator{ transform:rotate(180deg); }

/* Submenu dropdown */
.submenu{
  position:absolute; top:100%; left:0; right:0;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  border:1px solid rgba(255,255,255,.3); border-radius:10px; margin-top:10px; padding:20px; /* was rgba gold */
  opacity:0; visibility:hidden; transform:translateY(-10px); transition:all .3s ease; z-index:100;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.menu-item-wrapper:hover .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.submenu-item{
  display:flex; align-items:center; padding:12px 15px; color:var(--white); text-decoration:none;
  border-radius:8px; transition:all .3s ease; font-family:'Inter',sans-serif; font-weight:500; margin-bottom:8px;
}
.submenu-item:last-child{ margin-bottom:0; }
.submenu-item:hover{ background:rgba(255,255,255,.15); color:#fff; padding-left:25px; } /* was gold */
.submenu-arrow{ margin-right:10px; font-size:12px; transition:transform .3s ease; }
.submenu-item:hover .submenu-arrow{ transform:translateX(5px); }

/* WP menu block under grid (optional) */
.wordpress-menu-container{ border-top:1px solid rgba(255,255,255,.3); padding-top:40px; } /* was rgba gold */
.wp-menu{
  list-style:none; margin:0; padding:0; display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
}
.wp-menu a{
  display:block; padding:15px 20px; color:var(--white); text-decoration:none;
  border-left:3px solid transparent; transition:all .3s ease; font-family:'Inter',sans-serif; font-weight:500;
}
.wp-menu a:hover{
  color:#fff; border-left-color:#fff;                                      /* was gold */
  background:rgba(255,255,255,.05); padding-left:30px;                     /* was rgba gold */
}

/* Performance hints */
.menu-item, .submenu{ will-change:transform, opacity; }

/* Responsive */
@media (max-width:1024px){
  .menu-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .menu-container{ padding:80px 30px 40px; }
  .submenu{ position:relative; top:auto; left:auto; right:auto; margin-top:15px; opacity:1; visibility:visible; transform:none; display:none; }
  .menu-item-wrapper:hover .submenu{ display:block; }
}
@media (max-width:768px){
  .menu-grid{ grid-template-columns:1fr; gap:15px; }
  .menu-container{ padding:70px 20px 30px; }
  .menu-header{ justify-content:center; margin-bottom:40px; }
  .menu-close-btn{ top:20px; right:20px; width:40px; height:40px; font-size:20px; }
  .menu-item{ padding:30px 15px; }
  .menu-icon{ width:60px; height:60px; font-size:24px; }
  .menu-label{ font-size:16px; }
  .wp-menu{ grid-template-columns:1fr; }
  .submenu-indicator{ display:none; }
}
@media (max-width:480px){
  .menu-container{ padding:60px 15px 20px; }
  .menu-search{ width:100%; max-width:800px; }
  .search-input{ width:100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .menu-item, .submenu, .menu-container, .modern-menu{ transition:none; }
}

/* === Keep submenus always visible (no hover needed) === */
.menu-item-wrapper .submenu{
  position: static !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;

  margin-top: 12px;
  padding: 14px 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Neutralize hover-only rule (from previous dropdown behavior) */
.menu-item-wrapper:hover .submenu{
  position: static;
  display: block;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Tidy link styling when shown inline under the card */
.submenu-item{
  padding: 8px 0;
  background: transparent;
  border-radius: 0;
  
}
.submenu-item:hover{
  background: transparent;
  padding-left: 0;
  color: #fff; /* was var(--gold) */
}

/* If you prefer a compact list look, use bullets/chevrons: */
.submenu-item .submenu-arrow{
  display: none; /* hide the decorative arrow */
}

/* Hide the dropdown chevron since submenus are always open */
.submenu-indicator{ display: none !important; }

/* Optional: make submenu a vertical list with subtle separators */
.menu-item-wrapper .submenu{
  border-top: 1px solid rgba(255,255,255,.20);          /* was rgba gold */
}
.menu-item-wrapper .submenu .submenu-item + .submenu-item{
  border-top: 1px dashed rgba(255,255,255,.15);         /* was rgba gold */
}

.menu-emblem{
  margin:0 auto;
}


/* Close button matches header burger style */
.menu-close-btn{
  position:absolute; top:30px; right:40px;
  width:48px; height:40px;
  display:flex; flex-direction:column; gap:6px; justify-content:center; align-items:center;
  background:transparent; border:0; cursor:pointer; z-index:10;
  transition:transform .25s ease;
}
.menu-close-btn:hover { transform: scale(1.05); }

/* Close button lines (same look as header .menu-btn .line) */
.menu-close-btn .line{
  height:3px; border-radius:3px; background:#fff;
  transition:transform .25s ease, opacity .2s ease, width .25s ease;
}

/* Widths mimic the header button’s stagger */
.menu-close-btn .line:nth-child(1){ width:28px; }
.menu-close-btn .line:nth-child(2){ width:20px; }
.menu-close-btn .line:nth-child(3){ width:32px; }
.menu-close-btn .line:nth-child(4){ width:16px; }

/* Render as an “X” (keep middle bars hidden like your is-open state) */
.menu-close-btn .line:nth-child(2),
.menu-close-btn .line:nth-child(4){ opacity:0; }

.menu-close-btn .line:nth-child(1){
  transform: translateY(9px) rotate(45deg);
  width:32px; /* match active width */
}
.menu-close-btn .line:nth-child(3){
  transform: translateY(-9px) rotate(-45deg);
  width:32px; /* match active width */
}

/* Focus ring for accessibility */
.menu-close-btn:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}



/* Mobile position tweaks (mirror your other controls) */
@media (max-width:768px){
  .menu-close-btn{ top:20px; right:20px; }
}

@media only screen and (max-width: 600px) {
.title-section h1{font-size:30px!important}
.title-section .subtitle {
  font: 400 8px/1 'Inter';
}
}

a.submenu-item {
    padding-left: 10px!important;
    background: #fff!important;
    color:#000000;
}
.menu-emblem h1 a {
    color: #fff!important;
}
a.submenu-item:hover {
    padding-left: 10px!important;
    background:#003F7F!important;
    color:white!important;

}
.title-section h1 a {
    color: #fff;
}
/* === Square chevron: no hover effects, bars fully inside border === */
.menu-close-btn{
  right: 18px !important;
  left: auto !important;
  top: 16px !important;

  width: 48px !important;                 /* outer box */
  height: 48px !important;
  border: 1px solid #fff !important;      /* square border */
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;

  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* No motion */
  transition: none !important;
  transform: none !important;
}

/* Keep original X bars hidden */
.menu-close-btn .line{ display: none !important; }

/* Build chevron with safe insets so it doesn't touch the border */
.menu-close-btn::before,
.menu-close-btn::after{
  content: "";
  position: absolute;

  /* Inner “safe area” = 48px box - 2px border each side = 44px.
     We keep ~6px padding from the border at any point in the stroke. */
  width: 20px;                 /* stroke length kept modest to avoid touching */
  height: 1px;                 /* stroke thickness */
  background: currentColor;
  border-radius: 0;            /* square ends */
  top: 50%;
  left: 50%;
  transform-origin: center center;
}

/* Top stroke */
.menu-close-btn::before{
  /* Center, then shift slightly left so the point of the chevron sits well inside */
  transform: translate(-10px, -6px) rotate(45deg);
}

/* Bottom stroke */
.menu-close-btn::after{
  transform: translate(-10px, 6px) rotate(-45deg);
}

/* No visual changes on hover */
.menu-close-btn:hover{
  background: transparent !important;
  color: inherit !important;
  border-color: inherit !important;
  transform: none !important;
}

/* Keep keyboard accessibility */
.menu-close-btn:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Mobile: slightly larger safe area but still away from edges */
@media (max-width: 768px){
  .menu-close-btn{
    top: 16px !important;
    right: 1px !important;
    width: 52px !important;
    height: 50px !important;
  }
  .menu-close-btn::before,
  .menu-close-btn::after{
    width: 30px!important;   /* a touch longer but still within border */
    height: 1px;
  }
  .menu-close-btn::before{ transform: translate(-11px, -7px) rotate(45deg); }
  .menu-close-btn::after{  transform: translate(-11px,  7px) rotate(-45deg); }
}

/* Reduced motion: already transition-free, included for clarity */
@media (prefers-reduced-motion: reduce){
  .menu-close-btn{ transition: none !important; }
}

.menu-close-btn:hover {
    color: white !important;
    border-color: white !important;
    transform: none !important;
}

@media (min-width: 801px){
  h2.slide-title {
    font-size: 40px!important;
}
}