/* Language Learn Online — shared styles.
   Sections carry their layout inline (imported from the design source);
   this file holds the base rules, responsive switches and interactive states. */

body { margin: 0; background: #FFFFFF; }

a { color: #FE6019; text-decoration: none; }
a:hover { color: #D94E10; }

/* [hidden] must beat inline display:flex on modals, notices and form states */
[hidden] { display: none !important; }

/* Page wrapper is an inline-size container (see the wrapper div on each page),
   so these track page width. data-hide-narrow: desktop-only UI (header CTA).
   data-hide-wide: mobile-only UI (sticky call bar). The cookie card lifts
   above the sticky bar on narrow screens. */
@container (max-width: 719px) {
  [data-hide-narrow] { display: none !important; }
  [data-cookie] { bottom: 96px !important; }
}
@container (min-width: 720px) {
  [data-hide-wide] { display: none !important; }
}

/* Interactive states (base styles are inline, so these need !important) */
.hv-orange:hover { background: #E85410 !important; }
.hv-black:hover { background: #000 !important; }
.hv-green:hover { background: #1EA952 !important; }
.hv-paper:hover { background: #F3F0ED !important; }
.hv-cream:hover { background: #FDFBF9 !important; }
.hv-bd-orange:hover { border-color: #FE6019 !important; }
.hv-bd-ink:hover { border-color: #17181A !important; }
.hv-orange-text:hover { color: #FE6019 !important; }
.hv-bd-orange-text:hover { border-color: #FE6019 !important; color: #FE6019 !important; }
.fx-bd-orange:focus { border-color: #FE6019 !important; }

:focus-visible { outline: 2px solid #FE6019; outline-offset: 2px; }

body.modal-open { overflow: hidden; }

/* Meetup slide-in: small corner card, slides up once triggered (site.js) */
#meetup-slidein {
  font-family: 'Manrope', system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  position: fixed; right: clamp(14px, 3vw, 24px); bottom: 20px; z-index: 65;
  max-width: 360px; background: #fff; border: 1px solid #E4D8CE;
  border-radius: 16px; box-shadow: 0 20px 50px rgba(23, 24, 26, .22);
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease;
}
#meetup-slidein.show { opacity: 1; transform: none; }
@media (max-width: 719px) {
  /* clear the sticky call bar, same as the cookie card */
  #meetup-slidein { left: 14px; right: 14px; bottom: 96px; max-width: none; }
}