/*
Theme Name: generatepress-child
Template: generatepress
Version: 1.0
Description: Дочірня тема для iash.org.ua — реєстр практиків МАСГ

!! ПЕРЕВІР "Template:" вище — має точно збігатись з назвою папки
   батьківської теми в /wp-content/themes/. Якщо папка Listeo
   називається інакше (напр. "listeo" замість "listeo_theme"),
   заміни значення — інакше сайт впаде в білий екран.
*/

/* ============================================
   ДИЗАЙН-ТОКЕНИ
   ============================================ */
:root {

  /* --- КОЛЬОРИ МАСГ — виміряні з лого (спіраль ДНК) --- */
  --color-primary:       #2F7F79; /* глибокий бірюзовий — темний кінець градієнта спіралі */
  --color-primary-dark:  #1E5A54; /* hover / активні стани */
  --color-accent:        #71CEC3; /* світлий м'ятний — світлий кінець градієнта спіралі */

  /* нейтральна шкала з легким бірюзовим підтоном — тримає палітру єдиною */
  --color-ink:          #1B2B27; /* заголовки */
  --color-body-text:    #3B4E49; /* основний текст */
  --color-muted:        #6C7D79; /* другорядний текст */
  --color-border:       #DDE8E5;
  --color-surface:      #FFFFFF; /* картки */
  --color-bg:           #F5FAF9; /* фон сторінки, ледь відчутний м'ятний */

  /* бейджі рівнів сертифікації — автоматично похідні від primary,
     тому підлаштуються самі, коли зміниш --color-primary */
  --tier-1: color-mix(in srgb, var(--color-primary) 30%, white);
  --tier-2: color-mix(in srgb, var(--color-primary) 65%, white);
  --tier-3: var(--color-primary);

  /* --- ТИПОГРАФІКА --- */
  --font-display: "PT Serif", Georgia, serif;
  --font-body:    "PT Sans", "Segoe UI", sans-serif;

  --fs-h1: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --fs-h2: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* --- SPACING (крок 4px) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* --- RADIUS / SHADOW --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
}

/* ============================================
   БАЗОВА ТИПОГРАФІКА (глобально)
   ============================================ */
body {
  font-family: var(--font-body);
  color: var(--color-body-text);
  background: var(--color-bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  line-height: 1.15;
  font-weight: 700;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   КОМПОНЕНТИ-ПРИМІТИВИ (префікс iash- —
   не перетинається з класами Listeo)
   ============================================ */

.iash-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  background: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .15s ease;
}
.iash-btn:hover { background: var(--color-primary-dark); color: #fff; }

.iash-btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.iash-btn--outline:hover { background: var(--color-primary); color: #fff; }

.iash-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.iash-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 700;
  color: #fff;
}
.iash-badge--tier-1 { background: var(--tier-1); color: var(--color-ink); }
.iash-badge--tier-2 { background: var(--tier-2); }
.iash-badge--tier-3 { background: var(--tier-3); }

.iash-section {
  padding-block: var(--space-8);
}

.iash-muted { color: var(--color-muted); }