/* --- Shared wrapper --- */
.phHeader { background:#308497; border-bottom:1px solid #308497; }
.phContainer { max-width:970px; margin:0 auto; padding:8px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.phLogo img { display:block; height:50px; width:auto; }

/* ===================== DESKTOP ONLY ===================== */
.desktop-header { display:none; } /* default hidden, enabled on >=769px */
.desktop-menu ul { display:flex; align-items:center; gap:18px; }
.desktop-menu a { color:#f1f1f1; padding:10px 4px; font-weight:500; }
.desktop-menu a:hover { text-decoration: underline; }

/* ===================== MOBILE ONLY ====================== */
.mobile-header { display:block; } /* default visible, disabled on >=769px */

/* hamburger */
.hamburger { width:28px; height:20px; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; }
.hamburger span { display:block; height:3px; background:#f1f1f1; border-radius:2px; }

/* mobile search */
.mobile-search { display:flex; align-items:center; gap:6px; margin-inline-start:auto; }
.mobile-search input { padding:6px 8px; border:1px solid #ccc; border-radius:6px; min-width:140px; }
.mobile-search button { padding:6px 10px; border:1px solid #ccc; border-radius:6px; background:#f7f7f7; cursor:pointer; }

/* slide-down mobile menu */
.mobile-menu { display:none; background:#308497; border-top:1px solid #308497; padding:6px 12px; }
.mobile-menu.open { display:block; }
.mobile-menu ul li { border-bottom:1px solid #f1f1f1; }
.mobile-menu ul li a { display:block; padding:10px 0; color:#f1f1f1; }
.mobile-menu ul li:last-child { border-bottom:0; }

/* small banner (mobile only) */
.fal-banner { background:#fff8e1; text-align:center; padding:9px; }
.fal-banner a { color:#d17f00; font-weight:600; }

/* ---- Ensure mobile header can grow on small screens ---- */
@media (max-width: 768px) {
  .phHeader { height:auto !important; overflow:visible !important; }
}

/* ---- Switch to desktop layout ---- */
@media (min-width: 769px) {
  .mobile-header, .fal-banner { display:none !important; } /* hide all mobile-specific UI on desktop */
  .desktop-header { display:block; }
}