/* "Programs" dropdown in the header nav (home, program guides, blog). */
.dd { position: relative; }
.dd-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.dd-btn::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.dd.open .dd-btn { color: var(--blue); }
.dd.open .dd-btn::after { transform: translateY(1px) rotate(225deg); }
/* padding-top bridges the gap so the menu doesn't close on the way down */
.dd-menu { position: absolute; top: 100%; left: -24px; padding-top: 18px; min-width: 320px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.dd-menu > div { background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--gold); box-shadow: 0 24px 60px -24px rgba(11,16,64,.3); padding: 8px; }
.dd:has(:focus-visible) .dd-menu, .dd.open .dd-menu { opacity: 1; visibility: visible; transform: none; }
/* Hover only on real pointers; touch screens keep :hover stuck after a tap, so they use the .open toggle. */
@media (hover: hover) {
  .dd:hover .dd-btn { color: var(--blue); }
  .dd:hover .dd-menu { opacity: 1; visibility: visible; transform: none; }
}
.dd-menu a { display: block; padding: 14px 16px; text-decoration: none; color: var(--ink); font-weight: 600; }
.dd-menu a small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 2px; }
.dd-menu a:hover { background: var(--mist); color: var(--blue); }
@media (max-width: 960px) { header nav .dd { display: none; } }

/* Phone menu (☰), built by nav-menu.js from the desktop nav. */
.burger { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; position: relative; color: var(--ink); }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 11px; width: 22px; height: 1.5px; background: currentColor; transition: transform .2s, background .2s; }
.burger span { top: 21px; }
.burger span::before, .burger span::after { content: ""; left: 0; }
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }
.mnav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(11,16,64,.35); padding: 8px clamp(20px, 5vw, 72px) 28px; max-height: calc(100vh - 120px); overflow-y: auto; }
.mnav[hidden] { display: none; }
.mnav small.label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 18px 0 6px; }
.mnav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 17px; }
.mnav a small { display: block; font: 13px "Open Sans", sans-serif; color: var(--muted); margin-top: 2px; }
.mnav .progs a { font-family: Lora, serif; font-size: 21px; }
@media (max-width: 960px) {
  .burger { display: block; }
  header nav { gap: 6px; }
}
/* Phones: logo + button + ☰ must fit in one row, so the button gets a shorter label
   (the full text stays in the markup for screen readers). */
@media (max-width: 560px) {
  header nav .btn[data-book] { font-size: 0; padding: 10px 16px; }
  header nav .btn[data-book]::after { content: "Book a Call"; font-size: 13px; }
}
@media (min-width: 961px) { .mnav { display: none; } }

/* Smallest phones (iPhone SE): shrink the logo so logo + button + ☰ fit without squashing. */
header.main img { flex: none; width: auto; }
@media (max-width: 380px) {
  header.main img { height: 28px !important; }
  header nav .btn[data-book] { padding: 9px 12px; }
  .burger { margin-right: -6px; width: 40px; }
  header nav { gap: 4px !important; }
}