/* Design-system component styles (button + card + scroll reveal).
   Ported from the React DS; hover/press states (JS in the original) become CSS here. */

/* ---- Button ---- */
.aoa-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:0.04em;text-transform:uppercase;line-height:1;border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);}
.aoa-btn--sm{padding:8px 16px;font-size:13px;gap:8px;}
.aoa-btn--md{padding:13px 24px;font-size:14px;gap:10px;}
.aoa-btn--lg{padding:17px 34px;font-size:16px;gap:12px;}
.aoa-btn--primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand);}
.aoa-btn--primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);}
.aoa-btn--primary:active{background:var(--brand-press);border-color:var(--brand-press);transform:translateY(1px);}
.aoa-btn--secondary{background:transparent;color:var(--text-strong);border-color:var(--border-strong);}
.aoa-btn--secondary:hover{background:var(--text-strong);color:var(--surface-page);}
.aoa-btn--ghost{background:transparent;color:var(--text-strong);border-color:transparent;}
.aoa-btn--ghost:hover{color:var(--brand);}
/* on a dark band: white outline, inverts on hover */
.aoa-btn--on-dark{color:#fff;border-color:#fff;background:transparent;}
.aoa-btn--on-dark:hover{background:#fff;color:var(--ink-950);border-color:#fff;}

/* ---- Card ---- */
.aoa-card{border-radius:var(--radius-md);}
.aoa-card--outline{background:var(--surface-card);border:1px solid var(--border-subtle);}
.aoa-card--block{background:var(--surface-card);border:2px solid var(--ink-950);box-shadow:var(--shadow-hard);}
.aoa-card--block-red{background:var(--surface-card);border:2px solid var(--brand);box-shadow:var(--shadow-hard-red);}

/* ---- Nav dropdown (Courses → children) ---- */
.aoa-nav-links li{position:relative;}
.aoa-nav-links .menu-item-has-children > a::after{content:"";display:inline-block;width:0;height:0;margin-left:7px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;vertical-align:middle;opacity:0.7;}
.aoa-nav-links .sub-menu{list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:-16px;min-width:260px;background:var(--ink-950);border:1px solid var(--ink-800);border-radius:var(--radius-sm);box-shadow:0 14px 34px rgba(0,0,0,0.45);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),visibility var(--dur-fast);z-index:120;}
.aoa-nav-links .sub-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px;} /* hover bridge */
.aoa-nav-links li.menu-item-has-children:hover > .sub-menu,
.aoa-nav-links li.menu-item-has-children:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none;}
.aoa-nav-links .sub-menu a{display:block;padding:11px 18px;font-family:var(--font-display);font-size:13px;font-weight:var(--fw-bold);letter-spacing:0.04em;text-transform:uppercase;color:rgba(255,255,255,0.82);white-space:nowrap;transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);}
.aoa-nav-links .sub-menu a:hover{color:#fff;background:var(--ink-900);}
/* mobile menu: nested children indented, always visible */
.aoa-nav-mobile .sub-menu{list-style:none;margin:6px 0 0;padding:0 0 0 18px;}

/* ---- Reveal on scroll (data-reveal) ---- */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);}
  [data-reveal].is-hidden{opacity:0;transform:translateY(18px);}
}