/**
 * MIKA THEME — Global Reset & Base Styles (global-reset.css)
 *
 * CSS reset, box model, accessibility baseline, scroll behaviour,
 * container utilities, and section spacing helpers.
 * These styles load on every page regardless of which plugins are active.
 *
 * @package MikaTheme
 * @since   1.0.0
 */

/* ── Reset & Box Model ───────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden !important;
  max-width: 100vw;
}

body {
  font-family:              var(--mika-font-body);
  font-size:                var(--text-base);
  font-weight:              var(--fw-regular);
  color:                    var(--mika-color-text);
  background-color:         var(--mika-color-bg);
  line-height:              var(--lh-normal);
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
  overflow-x:               hidden !important;
  max-width:                100vw;
}

img,
video,
svg {
  display:   block;
  max-width: 100%;
}

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

ul,
ol {
  list-style: none;
}

button {
  cursor:      pointer;
  border:      none;
  background:  none;
  font-family: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size:   inherit;
}

/* ── Skip to Content (Accessibility) ───────────────────────── */

.mika-theme-skip-link {
  position:      absolute;
  top:           -100%;
  left:          1rem;
  padding:       0.75rem 1.5rem;
  background:    var(--mika-color-primary);
  color:         #ffffff;
  font-family:   var(--mika-font-body);
  font-weight:   var(--fw-semibold);
  font-size:     var(--text-sm);
  border-radius: var(--mika-radius-sm);
  z-index:       9999;
  transition:    top 0.2s ease;
}

.mika-theme-skip-link:focus {
  top: 1rem;
}

/* ── Focus Styles (visible, accessible) ──────────────────── */

:focus-visible {
  outline:        3px solid var(--mika-color-primary);
  outline-offset: 3px;
  border-radius:  var(--mika-radius-sm);
}

/* ── Scroll-Progress Bar ──────────────────────────────────── */

.mika-scroll-progress {
  position:   fixed;
  top:        0;
  left:       0;
  height:     3px;
  width:      0%;
  background: var(--mika-color-primary);
  z-index:    9999;
  transition: width 0.05s linear;
}

/* ── Back-to-Top Button ───────────────────────────────────── */

.mika-back-top {
  position:      fixed;
  bottom:        2rem;
  right:         1.5rem;
  width:         46px;
  height:        46px;
  border-radius: 50%;
  background:    var(--mika-color-text);
  color:         #ffffff;
  font-size:     1.2rem;
  display:       flex;
  align-items:   center;
  justify-content: center;
  z-index:       var(--z-above);
  opacity:       0;
  transform:     translateY(10px);
  pointer-events: none;
  transition:    opacity var(--mika-transition-base), transform var(--mika-transition-base);
  border:        none;
  cursor:        pointer;
}

.mika-back-top.is-visible {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}

.mika-back-top:hover {
  background: var(--mika-color-primary);
}

/* ── Container ────────────────────────────────────────────── */

.mika-container {
  width:          100%;
  max-width:      var(--mika-container-width);
  margin-inline:  auto;
  padding-inline: var(--container-px);
}

/* ── Section Spacing Utilities ────────────────────────────── */

.mika-section {
  padding-block: var(--section-py);
}

.mika-section--sm {
  padding-block: var(--section-py-sm);
}

/* ── Shared dark band utility ─────────────────────────────── */

.mika-band--dark {
  background: var(--color-black);
  color:      var(--color-white);
  position:   relative;
  overflow:   hidden;
}

/* ── Grid helpers (used by widget renders) ────────────────── */

.mika-grid-2 {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   1.5rem;
}

.mika-grid-3 {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.5rem;
}

.mika-grid-6 {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   1rem;
}

.mika-flex-between {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
}

.mika-flex-center {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             1rem;
}

/* ── Global Responsive overrides for layout helpers ─────── */

@media (max-width: 1024px) {
  .mika-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .mika-grid-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .mika-grid-2,
  .mika-grid-3 { grid-template-columns: 1fr; }
  .mika-grid-6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .mika-grid-6 { grid-template-columns: 1fr; }
}

/* ── WordPress Core Alignment Classes (Elementor compat) ── */

.alignwide  { max-width: 1440px; margin-inline: auto; }
.alignfull  { max-width: none; width: 100%; }
.aligncenter { text-align: center; }

/* ── WordPress responsive embed (required theme support) ── */

.wp-block-embed__wrapper {
  position:    relative;
  padding-top: 56.25%;
  height:      0;
  overflow:    hidden;
}

.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper embed,
.wp-block-embed__wrapper object {
  position: absolute;
  top:      0;
  left:     0;
  width:    100%;
  height:   100%;
}

/* Global Mobile Touch & Safari Auto-Zoom Prevention */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }
}