/*
Theme Name: Medizine Quiz
Theme URI: https://quiz2.medizine.eu/
Author: Delta Medical
Description: Lightweight classic theme for the Medizine quiz & landing-page factory. No external dependencies, built for speed. Quiz rendering is handled by the companion Medizine Quiz plugin.
Version: 0.3.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: medizine-quiz
*/

/* ============================================================
   Design tokens — derived from the existing Medizine visual
   language (light-blue gradient field, white card, blue
   accents, orange submit). Kept deliberately small.
   ============================================================ */
:root {
  /* Surface */
  --mq-bg-top:      #eaf4fb;
  --mq-bg-bottom:   #d6eaf6;
  --mq-card:        #ffffff;
  --mq-card-soft:   #f6f9fc;

  /* Ink */
  --mq-ink:         #1f2d3d;
  --mq-ink-soft:    #5a6b7b;
  --mq-ink-faint:   #8aa0b2;

  /* Accents */
  --mq-blue:        #2e83c9;   /* headings, links */
  --mq-blue-strong: #1f6aa8;
  --mq-blue-btn:    #4aa3e0;   /* "Почати вікторину" */
  --mq-orange:      #f47a20;   /* "Відправити" submit */
  --mq-orange-dark: #e06a12;

  /* Feedback */
  --mq-ok:          #2e9e6b;
  --mq-ok-bg:       #e8f6ef;
  --mq-err:         #d0453f;
  --mq-err-bg:      #fbecec;

  /* Lines & shadow */
  --mq-line:        #e2ebf2;
  --mq-line-strong: #cddbe7;
  --mq-shadow:      0 10px 40px rgba(31, 80, 130, 0.12);
  --mq-shadow-soft: 0 2px 10px rgba(31, 80, 130, 0.06);

  /* Metrics */
  --mq-radius:      18px;
  --mq-radius-sm:   10px;
  --mq-field-h:     52px;
  --mq-maxw:        720px;
  --mq-gap:         18px;

  --mq-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ============================================================
   Reset-ish base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--mq-font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--mq-ink);
  background: linear-gradient(170deg, var(--mq-bg-top) 0%, var(--mq-bg-bottom) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

a {
  color: var(--mq-blue);
  text-decoration: none;
}
a:hover { color: var(--mq-blue-strong); text-decoration: underline; }

h1, h2, h3 {
  color: var(--mq-ink);
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 0.6em;
}
h1 { font-size: 1.7rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.12rem; }

p { margin: 0 0 1em; }

/* ============================================================
   Layout skeleton
   ============================================================ */
.mq-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.mq-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--mq-maxw);
  margin: 0 auto;
  padding: 40px 20px 64px;
}

/* Header — deliberately minimal for a landing factory */
.mq-header {
  width: 100%;
  padding: 18px 20px;
  text-align: center;
}
.mq-header__inner {
  max-width: var(--mq-maxw);
  margin: 0 auto;
}
.mq-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--mq-blue-strong);
}
.mq-logo:hover { text-decoration: none; }
.mq-logo__mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--mq-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

/* Footer */
.mq-footer {
  flex-shrink: 0;
  text-align: center;
  padding: 22px 20px 30px;
  color: var(--mq-ink-faint);
  font-size: 0.82rem;
}
.mq-footer a { color: var(--mq-ink-soft); }

/* ============================================================
   The card — the signature container every landing sits in
   ============================================================ */
.mq-card {
  background: var(--mq-card);
  border-radius: var(--mq-radius);
  box-shadow: var(--mq-shadow);
  padding: 40px 42px;
}
.mq-card + .mq-card { margin-top: 24px; }

.mq-card__lead {
  text-align: center;
  color: var(--mq-ink-soft);
  margin-bottom: 28px;
}

/* Greeting strip (e.g. "Ваш контактний номер телефону: …") */
.mq-note {
  border: 1px solid var(--mq-line-strong);
  border-radius: var(--mq-radius-sm);
  background: var(--mq-card-soft);
  padding: 12px 18px;
  text-align: center;
  color: var(--mq-ink-soft);
  margin-bottom: 22px;
}

/* ============================================================
   Form primitives — shared by quiz plugin AND classic content
   ============================================================ */
.mq-field { margin-bottom: var(--mq-gap); }

.mq-label {
  display: block;
  font-size: 0.95rem;
  color: var(--mq-ink-soft);
  margin-bottom: 6px;
}
.mq-label .req { color: var(--mq-orange); }

.mq-input,
.mq-select,
.mq-textarea {
  width: 100%;
  min-height: var(--mq-field-h);
  padding: 12px 16px;
  font: inherit;
  color: var(--mq-ink);
  background: var(--mq-card-soft);
  border: 1px solid var(--mq-line);
  border-radius: var(--mq-radius-sm);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.mq-textarea { min-height: 120px; resize: vertical; }

.mq-input:focus,
.mq-select:focus,
.mq-textarea:focus {
  outline: none;
  border-color: var(--mq-blue-btn);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74, 163, 224, 0.18);
}

.mq-input::placeholder,
.mq-textarea::placeholder { color: var(--mq-ink-faint); }

/* Responsive field grids used across the forms */
.mq-grid { display: grid; gap: var(--mq-gap); }
.mq-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mq-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) {
  .mq-grid--2, .mq-grid--3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Buttons
   ============================================================ */
.mq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--mq-field-h);
  padding: 12px 34px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--mq-blue-btn);
  border: none;
  border-radius: var(--mq-radius-sm);
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.mq-btn:hover { background: var(--mq-blue-strong); text-decoration: none; color:#fff; }
.mq-btn:active { transform: translateY(1px); }
.mq-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Orange submit — the "Відправити" of contact forms */
.mq-btn--submit {
  background: var(--mq-orange);
  min-width: 210px;
}
.mq-btn--submit:hover { background: var(--mq-orange-dark); }

/* Big primary — the "Почати вікторину" */
.mq-btn--start {
  min-width: 240px;
  font-size: 1.05rem;
  padding: 16px 40px;
  box-shadow: 0 8px 20px rgba(74, 163, 224, 0.35);
}

.mq-actions {
  margin-top: 26px;
  text-align: center;
}

/* ============================================================
   Consent / small print (spoiler pattern preserved)
   ============================================================ */
.mq-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: center;
  margin: 22px 0 8px;
  font-size: 0.95rem;
}
.mq-consent input { margin-top: 4px; }

.mq-fineprint {
  line-height: 1.4;
  font-size: 0.8rem;
  color: var(--mq-ink-soft);
  padding: 14px 22px;
  border: 1px solid var(--mq-line);
  border-radius: 14px;
  margin-top: 14px;
}

/* ============================================================
   Content pages (rules, about) rendered via Gutenberg
   ============================================================ */
.mq-content > *:first-child { margin-top: 0; }
.mq-content h2 { margin-top: 1.4em; }
.mq-content ul, .mq-content ol { padding-left: 1.3em; }
.mq-content li { margin-bottom: .4em; }
.mq-content img { border-radius: var(--mq-radius-sm); }

/* Utility */
.mq-center { text-align: center; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Responsive card padding
   ============================================================ */
@media (max-width: 620px) {
  .mq-card { padding: 26px 20px; }
  .mq-main { padding: 24px 14px 44px; }
  h1 { font-size: 1.42rem; }
}