/* =============================
   MCQDC – One‑File CSS Theme
   ============================= */

/* ---- Brand tokens ---- */
:root {
  --brand: #266c78;
  --brand-dark: #1f5963;
  --text: #222;
  --muted: #555;
  --bg: #f7f7f7;
  --card: #ffffff;
  --border: #e6e6e6;
  --shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* ---- Base ---- */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body { background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }

/* Headings */
h1, h2, h3, h4 { letter-spacing: .2px; margin-top: 0; }
h1 { font-size: clamp(28px, 2.2vw + 16px, 40px); }
h2 { font-size: clamp(22px, 1.4vw + 14px, 30px); }
h3 { font-size: clamp(18px, 1vw + 12px, 24px); }

/* Links */
a { color: var(--brand); text-decoration-thickness: 1.25px; text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); }

/* Focus visibility for keyboard users */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- Buttons ---- */
.btn, button, input[type=submit], .wa-button, .ActionButton {
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.btn:hover, button:hover, input[type=submit]:hover, .wa-button:hover, .ActionButton:hover {
  background: var(--brand-dark) !important;
}

/* Secondary/ghost buttons if WA theme uses them */
.btn--ghost, .Button--ghost { background: transparent !important; color: var(--brand) !important; border: 2px solid var(--brand) !important; }
.btn--ghost:hover, .Button--ghost:hover { color: #fff !important; background: var(--brand) !important; }

/* ---- Cards & containers ---- */
.card, .wa-widget, .wa-gadget, .gadgets-container .gadget, .WidgetContainer, .ContentModule {
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
}

/* ---- Navigation ---- */
#idMainMenu a, .TopMenu a, nav a {
  padding: 12px 14px !important;
  border-radius: 8px;
}

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; border-bottom: 1px solid var(--border); }
th { text-align: left; color: var(--muted); font-weight: 600; }

/* ---- Images ---- */
img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---- Forms ---- */
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password], textarea, select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

/* ---- Skip link (needs matching HTML gadget) ---- */
.visually-hidden-focusable { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden-focusable:focus { position: static; width: auto; height: auto; padding: 8px 12px; background:#fff; border:2px solid var(--brand); border-radius:8px; }

/* ---- Video carousel ---- */
.video-library { display: flex; overflow-x: auto; gap: 16px; padding: 10px; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.video-card { flex: 0 0 320px; scroll-snap-align: start; background: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); padding: 10px; }
.video-card iframe { width: 100%; height: 180px; border: 0; border-radius: 6px; }
.video-card .title { padding: 8px 0; font-weight: 700; font-size: 16px; }
.fullscreen-btn { margin-top: 5px; background-color: var(--brand); color: #fff; border: 0; padding: 6px 12px; border-radius: 5px; cursor: pointer; font-size: 14px; }
.fullscreen-btn:hover { background-color: var(--brand-dark); }

/* ---- Utilities ---- */
.hide { display: none !important; }
.m-0 { margin: 0 !important; } .mt-1 { margin-top: 4px !important; } .mt-2 { margin-top: 8px !important; } .mt-3 { margin-top: 12px !important; } .mt-4 { margin-top: 16px !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: 8px !important; } .mb-4 { margin-bottom: 16px !important; }
.p-0 { padding: 0 !important; } .p-2 { padding: 8px !important; } .p-4 { padding: 16px !important; }
.center { text-align: center !important; }

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---- Responsive tweaks ---- */
@media (max-width: 600px) {
  .video-card { flex-basis: 85vw; }
  #idMainMenu a, .TopMenu a, nav a { padding: 10px 12px !important; }
}

/* ---- Mobile-first typography & spacing ---- */
:root { --page-pad: 16px; }
main, .ContentModule, .WidgetContainer { padding: var(--page-pad); }
body { line-height: 1.7; }

/* Use fluid type so headings don’t blow up on small screens */
h1 { font-size: clamp(24px, 4vw, 34px); }
h2 { font-size: clamp(20px, 3.5vw, 28px); }
h3 { font-size: clamp(18px, 3vw, 22px); }

/* Ensure nothing forces sideways scrolling */
html, body { overflow-x: hidden; }
.gadgets-container, .ContentModule, .wa-gadget { max-width: 100%; }

/* Make nav items wrap instead of overflowing */
#idMainMenu ul, .TopMenu ul, nav ul { flex-wrap: wrap; }

/* Bigger tap targets on mobile */
@media (max-width: 600px) {
  a, button, .btn, .wa-button, input[type=submit] { min-height: 44px; padding: 12px 16px !important; }
}

/* Responsive media: keep 16:9 without fixed heights */
.video-card iframe, iframe[src*="youtube"], iframe[src*="vimeo"] {
  aspect-ratio: 16 / 9; width: 100%; height: auto; display: block;
}

/* Images: don’t overflow; allow soft crop */
img { width: 100%; height: auto; object-fit: cover; }

/* Tables: make scrollable on small screens */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive table { min-width: 640px; }

/* Forms: easier to use on phones */
input, select, textarea { font-size: 16px; } /* avoids iOS zoom */
label { display: block; margin-bottom: 6px; }

/* Footer blocks stack neatly */
.footer, .footer .columns { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer .columns { grid-template-columns: repeat(3, 1fr); } }

/* Make carousels easier to flick */
.video-library { scroll-snap-type: x proximity; }
.video-card { scroll-snap-align: start; }