/* ==========================================================================
   VS INTERNATIONAL COLLEGE — BASE
   --------------------------------------------------------------------------
   Element-level defaults, accessibility primitives and motion policy.

   MIGRATION NOTE
     From Phase 3 style.css loads *before* this file, so these defaults win
     on element selectors. Everything here is still either additive or a
     genuine accessibility fix — nothing restyles legacy pages beyond making
     images behave and focus rings visible.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BOX MODEL & DOCUMENT
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchor targets clear the sticky header instead of hiding beneath it. */
  scroll-padding-top: var(--vsic-scroll-offset, 6rem);
  /* The off-canvas drawer is position:fixed and parked past the right edge,
     which is viewport-relative and so escapes any clip on <body>. Clipping at
     the root contains it. `clip` keeps the sticky header working. */
  overflow-x: clip;
}

/* Smooth in-page scrolling — opt-out honoured in section 6. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100vh;
  font-family: var(--vsic-font-body);
  line-height: 1.65;
  color: var(--vsic-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* The mobile drawer is fixed and parked off the right edge with
     translateX(100%). A fixed element past the viewport edge can still extend
     the scrollable width, so clip it. `clip` (not `hidden`) creates no scroll
     container, so `position: sticky` on the header keeps working. */
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   2. MEDIA
   Unclassed media should never break its container. Bootstrap only handles
   this for .img-fluid, and many CMS-authored images arrive without a class.
   -------------------------------------------------------------------------- */

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Images inside admin-authored rich text stay inline-friendly. */
.vsic-richtext img {
  display: inline-block;
  height: auto;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY DEFAULTS
   Sizes only — families come from the database via --font-*.
   -------------------------------------------------------------------------- */

/* Element defaults, inherited from style.css's old `body.kvc-ui` block.
   Kept at element specificity on purpose: any component class must be able
   to override them without an escalation war. */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--vsic-font-heading);
  color: var(--vsic-text-primary);
  letter-spacing: var(--vsic-tracking-tight);
  text-wrap: balance;
}

p,
li,
label {
  font-family: var(--vsic-font-body);
  text-wrap: pretty;
}

p,
label {
  color: var(--vsic-text-secondary);
}

input,
textarea,
select {
  font-family: var(--vsic-font-body);
}

/* Long-form CMS copy gets a readable measure. */
.vsic-prose {
  max-width: var(--vsic-measure);
  line-height: var(--vsic-leading-relaxed);
}

/* Prevent overflow from long unbroken strings (URLs in CMS content). */
p, li, dd, dt, td, th, figcaption, blockquote {
  overflow-wrap: break-word;
}

code, kbd, samp, pre {
  font-family: var(--vsic-font-mono);
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   4. FORMS
   -------------------------------------------------------------------------- */

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

textarea {
  resize: vertical;
}

/* --------------------------------------------------------------------------
   5. FOCUS & ACCESSIBILITY
   A visible, consistent focus ring everywhere. style.css and Bootstrap 4
   both suppress outlines in places; :focus-visible restores them without
   showing rings on mouse clicks.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: var(--vsic-focus-ring-width) solid var(--vsic-focus-ring-color);
  outline-offset: var(--vsic-focus-ring-offset);
  border-radius: var(--vsic-radius-xs);
}

/* Kill the legacy/Bootstrap practice of removing outlines entirely. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--vsic-focus-ring-width) solid var(--vsic-focus-ring-color);
  outline-offset: var(--vsic-focus-ring-offset);
}

::selection {
  background: var(--vsic-brand-secondary);
  color: var(--vsic-text-inverse);
}

/* Screen-reader-only, but focusable when it needs to be. */
.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.u-visually-hidden--focusable:focus,
.u-visually-hidden--focusable:focus-visible {
  position: fixed !important;
  top: var(--vsic-space-sm) !important;
  left: var(--vsic-space-sm) !important;
  width: auto !important;
  height: auto !important;
  padding: var(--vsic-space-2xs) var(--vsic-space-sm) !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  z-index: var(--vsic-z-max);
  background: var(--vsic-surface);
  color: var(--vsic-text-primary);
  border-radius: var(--vsic-radius-sm);
  box-shadow: var(--vsic-shadow-lg);
}

/* --------------------------------------------------------------------------
   6. MOTION POLICY
   Honoured site-wide. Any component animation must degrade through this.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal-on-scroll elements must never be left invisible. */
  [data-anim],
  [data-animate],
  [data-vsic-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* No-JS safety net: never hide content behind an observer that won't run. */
.no-js [data-vsic-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   7. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .c-header,
  .c-footer,
  .c-drawer,
  .chatbot-widget,
  [data-vsic-no-print] {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}