/* Font Face Definitions */
@font-face {
  font-family: 'e-Ukraine_Head-Thin';
  font-weight: 100;
  font-style: normal;
  src: url('/static/fonts/e-UkraineHead-Thin.otf') format('opentype');
}

@font-face {
  font-family: 'e-Ukraine_Head-UltraLight';
  font-weight: 200;
  font-style: normal;
  src: url('/static/fonts/e-UkraineHead-UltraLight.otf') format('opentype');
}

@font-face {
  font-family: 'e-Ukraine_Head-Light';
  font-weight: 300;
  font-style: normal;
  src: url('/static/fonts/e-UkraineHead-Light.otf') format('opentype');
}

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

@font-face {
  font-family: 'e-Ukraine_Head-Medium';
  font-weight: 500;
  font-style: normal;
  src: url('/static/fonts/e-UkraineHead-Medium.otf') format('opentype');
}


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

/* e-Ukraine font definitions */
@font-face {
  font-family: 'e-Ukraine-Thin';
  font-weight: 100;
  font-style: normal;
  src: url('/static/fonts/e-Ukraine-Thin.otf') format('opentype');
}

@font-face {
  font-family: 'e-Ukraine-UltraLight';
  font-weight: 200;
  font-style: normal;
  src: url('/static/fonts/e-Ukraine-UltraLight.otf') format('opentype');
}

@font-face {
  font-family: 'e-Ukraine-Light';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/static/fonts/e-Ukraine-Light.otf') format('opentype');
}

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

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

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

/* Apply e-Ukraine font to all basic text elements */
/* Global heading styles */
h1, h2 {
    font-family: 'e-UkraineHead-Regular', sans-serif;
    line-height: 1.1;
}

/* Fix spacing for spans inside headings */
h1 span, h2 span{
    line-height: inherit;
    vertical-align: baseline;
    font-family: 'e-UkraineHead-Regular', sans-serif;
    line-height: 1.1;
}

/* Global button styles */
.btn, button, .btn-adopt {
    font-family: 'e-Ukraine-Bold', sans-serif;
    line-height: 1.3;
}

/* Button text styles - spans inside buttons */
.btn span, button span, .btn-adopt span, .donation span {
    font-family: 'e-Ukraine-Bold', sans-serif;
    line-height: inherit;
}

/* Global input styles */
input, textarea, select {
    font-family: 'e-Ukraine-Regular', sans-serif;
    line-height: 1.3;
}

/* Global label styles */
label {
    font-family: 'e-Ukraine-Regular', sans-serif;
    line-height: 1.3;
}

/* Global body text styles */
.text-body {
    font-family: 'e-Ukraine-Light', sans-serif;
    line-height: 1.5;
}

/* Global description text styles */
.text-description {
    font-family: 'e-Ukraine-Regular', sans-serif;
    line-height: 1.2;
}

/* Small text style */
.text-small {
    font-family: 'e-Ukraine-Light', sans-serif !important;
    line-height: 1.3;
}

/* Extra small text style */
.text-sm {
    font-family: 'e-Ukraine-Light', sans-serif !important;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: normal;
    font-weight: 300;
}

/* Body light text style */
.body-light-text {
    font-family: 'e-Ukraine-UltraLight', sans-serif !important;
    line-height: 1.5;
}

/* Global link styles */
a {
    font-family: 'e-Ukraine-Regular', sans-serif;
    text-decoration: none;
    line-height: 1.3;
}

/* Basic text elements - paragraphs, spans, divs, list items */
p, span, div, li {
    font-family: 'e-Ukraine-Light', sans-serif;
    line-height: 1.3;
}


/* ========================================
   DESKTOP STYLES (min-width: 1024px)
   ======================================== */

@media (min-width: 1024px) {
    /* Hero heading - largest for desktop impact */
    .heading-hero {
        font-size: 100px;
        line-height: 0.8;
    }
    
    /* Section heading - prominent on desktop */
    .heading-section {
        font-size: 90px;
    }
    
    /* Large section heading - full desktop size */
    .heading-section-large {
        font-size: 90px;
    }
  
        /* Description text - prominent on desktop */
        .text-description {
            font-size: 44px;
    }
    
    /* Body text - comfortable desktop reading */
    .text-body {
        font-size: 24px;
    }
    
    
    /* Button text - desktop optimized */
    .btn, button, .btn-adopt, .btn span, button span, .btn-adopt span, .donation span {
        font-size: 18px;
    }
    
    /* Small text - desktop */
    .text-small {
        font-size: 24px;
        font-family: 'e-Ukraine-Light', sans-serif !important;
    }
    
    span.text-small {
        font-family: 'e-Ukraine-Light', sans-serif !important;
    }
    
    span.text-text.text-small {
        font-family: 'e-Ukraine-Light', sans-serif !important;
    }
    
    /* Link text - desktop */
    a {
        font-size: 18px;
    }
}

/* ========================================
   TABLET STYLES (768px - 1023px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Hero heading - medium size for tablets */
    .heading-hero {
        font-size: 52px;
        line-height: 0.8;
    }
    
    /* Section heading - tablet optimized */
    .heading-section {
        font-size: 52px;
    }
    
    /* Large section heading - full size for tablets */
    .heading-section-large {
        font-size: 90px;
    }
    
        /* Description text - tablet optimized */
        .text-description {
            font-size: 24px;
    }
    
    /* Body text - comfortable reading on tablets */
    .text-body {
        font-size: 18px;
    }
    
    
    /* Button text - tablet optimized */
    .btn, button, .btn-adopt, .btn span, button span, .btn-adopt span, .donation span {
        font-size: 14px;
    }
    
    /* Small text - tablet */
    .text-small {
        font-size: 18px;
        font-family: 'e-Ukraine-Light', sans-serif !important;
    }
    
    span.text-small {
        font-family: 'e-Ukraine-Light', sans-serif !important;
    }
    
    span.text-text.text-small {
        font-family: 'e-Ukraine-Light', sans-serif !important;
    }
    
    /* Link text - tablet */
    a {
        font-size: 18px;
    }
}

/* ========================================
   MOBILE STYLES (max-width: 767px)
   ======================================== */

@media (max-width: 767px) {
    /* Hero heading - smaller for mobile */
    .heading-hero {
        font-size: 40px;
        line-height: 1.2;
    }
    
    /* Section heading - compact for mobile */
    .heading-section {
        font-size: 34px;
    }
    
    /* Large section heading - reduced for mobile */
    .heading-section-large {
        font-size: 65px;
    }
    
    
    /* Description text - optimized for mobile */
    .text-description {
        font-size: 24px;
    }

    /* Body text - readable on small screens */
    .text-body {
        font-size: 18px;
    }

    
    /* Button text - mobile optimized */
    .btn, button, .btn-adopt, .btn span, button span, .btn-adopt span, .donation span {
        font-size: 14px;
    }
    
    /* Small text - mobile */
    .text-small {
        font-size: 18px;
        font-family: 'e-Ukraine-Light', sans-serif !important;
    }
    
    span.text-small {
        font-family: 'e-Ukraine-Light', sans-serif !important;
    }
    
    span.text-text.text-small {
        font-family: 'e-Ukraine-Light', sans-serif !important;
    }
    
/* Link text - mobile */
a {
    font-size: 18px;
}
}