/* ============================================
   ECOFACTOR Design System - Root Styles
   ============================================ */

/* ============================================
   FONTS - Ruberoid
   ============================================ */

@font-face {
  font-family: 'Ruberoid';
  src: url('../fonts/Ruberoid-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ruberoid';
  src: url('../fonts/Ruberoid-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold (600) - використовуємо Medium як fallback */
@font-face {
  font-family: 'Ruberoid';
  src: url('../fonts/Ruberoid-Medium.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ruberoid';
  src: url('../fonts/Ruberoid-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   CSS Custom Properties (Variables)
   ============================================ */

:root {
  /* ===================
     COLOR PALETTE
     =================== */
  
  /* Accent Green */
  --color-green-40: #23A859;
  --color-green-50: #3DD078;
  --color-green-60: #3AF185;

  /* Accent Blue */
  --color-blue-60: #3577D8;

  /* Neutral Colors */
  --color-white: #FFFFFF;
  --color-gray-95: #F1F3F5;
  --color-gray-40: #F6F6F6;
  --color-gray-35: #61646B;
  --color-gray-30: #525252;
  --color-gray-20: #3A3A3A;
  --color-gray-17: #2C2C2C;
  --color-gray-10: #1F1F1F;
  
  /* Loading/Inactive state */
  --color-loading: #F1F3F5;
  
  /* Error color */
  --color-error: #CE2939;

  /* ===================
     SEMANTIC COLORS
     =================== */
  
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-gray-95);
  --bg-tertiary: var(--color-gray-40);
  --bg-dark: var(--color-gray-10);

  --text-primary: var(--color-gray-20);
  --text-secondary: var(--color-gray-30);
  --text-light: var(--color-white);
  --text-accent: var(--color-green-40);

  --action-primary: var(--color-green-40);
  --action-primary-hover: var(--color-green-50);
  --action-primary-active: var(--color-green-60);
  --action-secondary: var(--color-blue-60);

  --border-light: var(--color-gray-40);
  --border-medium: var(--color-gray-30);

  /* ===================
     FONT FAMILY
     =================== */
  
  --font-primary: 'Ruberoid', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ===================
     FONT WEIGHTS
     =================== */
  
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* ===================
     TYPOGRAPHY SCALE
     (Точно з Figma)
     =================== */
  
  /* H1 - Desktop: 40px, Bold, 130%, 3% */
  --h1-size: 40px;
  --h1-weight: 700;
  --h1-line-height: 1.3;
  --h1-letter-spacing: 0.03em;

  /* H1 Mobile: 30px, Bold, 150%, 3% */
  --h1-mobile-size: 30px;
  --h1-mobile-weight: 700;
  --h1-mobile-line-height: 1.5;
  --h1-mobile-letter-spacing: 0.03em;

  /* H2: 32px, Bold, 130%, 0% */
  --h2-size: 32px;
  --h2-weight: 700;
  --h2-line-height: 1.3;
  --h2-letter-spacing: 0;

  /* H3: 28px, Bold, 140%, 0% */
  --h3-size: 28px;
  --h3-weight: 700;
  --h3-line-height: 1.4;
  --h3-letter-spacing: 0;

  /* H3 Alt (Card Title): 26px, Regular, 140%, 0% */
  --h3-alt-size: 26px;
  --h3-alt-weight: 400;
  --h3-alt-line-height: 1.4;
  --h3-alt-letter-spacing: 0;

  /* H4: 20px, Semibold, 150%, 0% */
  --h4-size: 20px;
  --h4-weight: 600;
  --h4-line-height: 1.5;
  --h4-letter-spacing: 0;

  /* Subtitle: 16px, Medium, 150%, 0% */
  --subtitle-size: 16px;
  --subtitle-weight: 500;
  --subtitle-line-height: 1.5;
  --subtitle-letter-spacing: 0;

  /* Body: 16px, Regular, 150%, 0% */
  --body-size: 16px;
  --body-weight: 400;
  --body-line-height: 1.5;
  --body-letter-spacing: 0.01em;

  /* Body Small: 14px, Regular, 155%, 0% */
  --body-small-size: 14px;
  --body-small-weight: 400;
  --body-small-line-height: 1.55;
  --body-small-letter-spacing: 0;
  
  /* Body XS: 12px, Regular, 155% */
  --body-xs-size: 12px;
  --body-xs-weight: 400;
  --body-xs-line-height: 1.55;
  
  /* Caption: 10px, Semi-bold, 155% */
  --caption-size: 10px;
  --caption-weight: 600;
  --caption-line-height: 1.55;
  --caption-letter-spacing: 0.5px;

  /* ===================
     SPACING
     =================== */
  
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ===================
     BORDER RADIUS
     =================== */
  
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ===================
     SHADOWS
     =================== */
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* ===================
     TRANSITIONS
     =================== */
  
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* ===================
     Z-INDEX
     =================== */
  
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* ===================
     CONTAINER
     =================== */
  
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
}

/* ============================================
   CSS RESET / NORMALIZE
   ============================================ */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

main {
  width: 100%;
}

ul, ol {
  list-style: none;
}

img, picture, video, canvas {
    display: block;
    /* width: 100%; */
    /* height: 100%; */
}

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

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

button {
  background: none;
  border: none;
  cursor: pointer;
}

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

/* ============================================
   TYPOGRAPHY STYLES
   (Точно відповідає Figma)
   ============================================ */

/* H1 - 40px / Bold / 130% / 3% letter-spacing */
h1, .h1 {
  font-family: var(--font-primary);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  color: var(--text-primary);
}

/* H2 - 32px / Bold / 130% / 0% */
h2, .h2 {
  font-family: var(--font-primary);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  color: var(--text-primary);
}

/* H3 - 28px / Bold / 140% / 0% */
h3, .h3 {
  font-family: var(--font-primary);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
  color: var(--text-primary);
}

/* H3 Alt (Card Title) - 26px / Regular / 140% / 0% */
.h3-alt {
  font-family: var(--font-primary);
  font-size: var(--h3-alt-size);
  font-weight: var(--h3-alt-weight);
  line-height: var(--h3-alt-line-height);
  letter-spacing: var(--h3-alt-letter-spacing);
  color: var(--text-primary);
}

/* H4 - 20px / Semibold / 150% / 0% */
h4, .h4 {
  font-family: var(--font-primary);
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  color: var(--text-primary);
}

/* Subtitle - 16px / Medium / 150% / 0% */
.subtitle {
  font-family: var(--font-primary);
  font-size: var(--subtitle-size);
  font-weight: var(--subtitle-weight);
  line-height: var(--subtitle-line-height);
  letter-spacing: var(--subtitle-letter-spacing);
  color: var(--text-primary);
}

/* Body - 16px / Regular / 150% / 0% */
p, .body {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--text-primary);
}

/* Body Small - 14px / Regular / 155% / 0% */
small, .body-small {
  font-family: var(--font-primary);
  font-size: var(--body-small-size);
  font-weight: var(--body-small-weight);
  line-height: var(--body-small-line-height);
  letter-spacing: var(--body-small-letter-spacing);
  color: var(--text-primary);
}

/* Strong/Bold text */
strong, b {
  font-weight: var(--font-bold);
}

body.single-post .entry-content p a,
body.single-post .post-content p a,
body.single-post .content p a {
    color: #3DD078 !important;
    font-family: 'Ruberoid', sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 150% !important;
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-skip-ink: none !important;
    text-decoration-thickness: 6% !important;
    text-underline-offset: 25% !important;
    text-underline-position: from-font !important;
}


/* H1 Mobile - responsive */
@media (max-width: 767px) {
  h1, .h1 {
    font-size: var(--h1-mobile-size);
    line-height: var(--h1-mobile-line-height);
    letter-spacing: var(--h1-mobile-letter-spacing);
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

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

/* Text colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-light { color: var(--text-light); }
.text-accent { color: var(--text-accent); }

/* Background colors */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-dark { background-color: var(--bg-dark); }

/* ============================================
   CONTAINER
   Content max-width: 1148px, centered
   Background spans full width
   ============================================ */

.container {
  width: 100%;
  max-width: 1148px;
  margin: 0 auto;
  padding: 0;
}

/* Section wrapper - full width bg, contained content */
.section {
  width: 100%;
  padding: 60px 40px;
}

.section__content {
  width: 100%;
  max-width: 1148px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
  
  .section {
    padding: 40px 20px;
  }
}

nav.woocommerce-pagination {
    display: none;
}