/**
 * Friends of Bulgaria - Base Styles
 * Reset, typography, and utility classes.
 * Requirements: 2.3, 11.7
 */

/* =========================================
   CSS Reset / Normalize (Modern Approach)
   ========================================= */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: var(--fob-line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * The mobile navigation panel is parked off-screen with translateX(100%),
 * which otherwise widens the document to the viewport plus the panel and
 * clips every section on small screens.
 *
 * `clip` rather than `hidden` deliberately: `overflow: hidden` would make
 * these elements scroll containers and break the sticky header. Browsers
 * without `clip` simply keep the minor horizontal scroll.
 */
html,
body {
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* =========================================
   Base Typography
   ========================================= */

body {
  font-family: var(--fob-font-primary);
  font-size: var(--fob-font-size-base);
  font-weight: var(--fob-font-weight-normal);
  color: var(--fob-color-text);
  background-color: var(--fob-color-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--fob-font-heading);
  font-weight: var(--fob-font-weight-heading);
  line-height: var(--fob-line-height-tight);
  letter-spacing: var(--fob-tracking-heading);
  color: var(--fob-color-heading);
}

/* h4-h6 are UI labels in this design, not display type — keep them sans. */
h4,
h5,
h6 {
  font-family: var(--fob-font-primary);
  font-weight: var(--fob-font-weight-semibold);
  letter-spacing: normal;
}

h1 {
  font-size: var(--fob-font-size-h1);
}

h2 {
  font-size: var(--fob-font-size-h2);
}

h3 {
  font-size: var(--fob-font-size-h3);
}

h4 {
  font-size: var(--fob-font-size-xl);
}

h5 {
  font-size: var(--fob-font-size-large);
}

h6 {
  font-size: var(--fob-font-size-medium);
}

p {
  line-height: var(--fob-line-height-base);
  margin-bottom: var(--fob-space-md);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--fob-color-primary);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--fob-dark);
}

strong,
b {
  font-weight: var(--fob-font-weight-bold);
}

small {
  font-size: var(--fob-font-size-small);
}

code,
pre {
  font-family: var(--fob-font-mono);
  font-size: var(--fob-font-size-small);
}

blockquote {
  border-left: 4px solid var(--fob-color-primary);
  padding-left: var(--fob-space-lg);
  font-style: italic;
  color: var(--fob-color-text);
}

/* =========================================
   Focus Indicators (WCAG 11.7 — 3:1 contrast)
   Uses a double-ring box-shadow approach:
   inner ring (white) + outer ring (red #C41E3A)
   ensures visibility against both light and dark backgrounds.
   #C41E3A on #FFFFFF = 5.6:1 contrast (exceeds 3:1).
   #C41E3A on #333333 = 2.3:1 — inner white ring provides separation.
   ========================================= */

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--fob-color-background), 0 0 0 5px var(--fob-color-primary);
}

/* =========================================
   Utility Classes — Spacing
   ========================================= */

/* Margin utilities */
.mt-xs { margin-top: var(--fob-space-xs); }
.mt-sm { margin-top: var(--fob-space-sm); }
.mt-md { margin-top: var(--fob-space-md); }
.mt-lg { margin-top: var(--fob-space-lg); }
.mt-xl { margin-top: var(--fob-space-xl); }
.mt-xxl { margin-top: var(--fob-space-xxl); }

.mb-xs { margin-bottom: var(--fob-space-xs); }
.mb-sm { margin-bottom: var(--fob-space-sm); }
.mb-md { margin-bottom: var(--fob-space-md); }
.mb-lg { margin-bottom: var(--fob-space-lg); }
.mb-xl { margin-bottom: var(--fob-space-xl); }
.mb-xxl { margin-bottom: var(--fob-space-xxl); }

.my-xs { margin-top: var(--fob-space-xs); margin-bottom: var(--fob-space-xs); }
.my-sm { margin-top: var(--fob-space-sm); margin-bottom: var(--fob-space-sm); }
.my-md { margin-top: var(--fob-space-md); margin-bottom: var(--fob-space-md); }
.my-lg { margin-top: var(--fob-space-lg); margin-bottom: var(--fob-space-lg); }
.my-xl { margin-top: var(--fob-space-xl); margin-bottom: var(--fob-space-xl); }

/* Padding utilities */
.pt-xs { padding-top: var(--fob-space-xs); }
.pt-sm { padding-top: var(--fob-space-sm); }
.pt-md { padding-top: var(--fob-space-md); }
.pt-lg { padding-top: var(--fob-space-lg); }
.pt-xl { padding-top: var(--fob-space-xl); }
.pt-xxl { padding-top: var(--fob-space-xxl); }

.pb-xs { padding-bottom: var(--fob-space-xs); }
.pb-sm { padding-bottom: var(--fob-space-sm); }
.pb-md { padding-bottom: var(--fob-space-md); }
.pb-lg { padding-bottom: var(--fob-space-lg); }
.pb-xl { padding-bottom: var(--fob-space-xl); }
.pb-xxl { padding-bottom: var(--fob-space-xxl); }

.py-xs { padding-top: var(--fob-space-xs); padding-bottom: var(--fob-space-xs); }
.py-sm { padding-top: var(--fob-space-sm); padding-bottom: var(--fob-space-sm); }
.py-md { padding-top: var(--fob-space-md); padding-bottom: var(--fob-space-md); }
.py-lg { padding-top: var(--fob-space-lg); padding-bottom: var(--fob-space-lg); }
.py-xl { padding-top: var(--fob-space-xl); padding-bottom: var(--fob-space-xl); }

.px-xs { padding-left: var(--fob-space-xs); padding-right: var(--fob-space-xs); }
.px-sm { padding-left: var(--fob-space-sm); padding-right: var(--fob-space-sm); }
.px-md { padding-left: var(--fob-space-md); padding-right: var(--fob-space-md); }
.px-lg { padding-left: var(--fob-space-lg); padding-right: var(--fob-space-lg); }
.px-xl { padding-left: var(--fob-space-xl); padding-right: var(--fob-space-xl); }

/* =========================================
   Utility Classes — Visibility
   ========================================= */

.visually-hidden,
.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Allow sr-only elements to become visible on focus (skip nav links) */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within,
.skip-link:focus {
  position: fixed;
  top: var(--fob-space-sm);
  left: var(--fob-space-sm);
  z-index: 100000;
  width: auto;
  height: auto;
  padding: var(--fob-space-sm) var(--fob-space-md);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: var(--fob-white);
  color: var(--fob-color-primary);
  font-size: var(--fob-font-size-base);
  font-weight: var(--fob-font-weight-semibold);
  text-decoration: underline;
  box-shadow: 0 0 0 2px var(--fob-color-background), 0 0 0 5px var(--fob-color-primary);
  border-radius: 4px;
}

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

/* =========================================
   Utility Classes — Text
   ========================================= */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-bold { font-weight: var(--fob-font-weight-bold); }
.font-semibold { font-weight: var(--fob-font-weight-semibold); }
.font-normal { font-weight: var(--fob-font-weight-normal); }

.text-small { font-size: var(--fob-font-size-small); }
.text-base { font-size: var(--fob-font-size-base); }
.text-large { font-size: var(--fob-font-size-large); }