/**
 * Design System - Központi stílusdefiníciók
 * 
 * Ez a fájl tartalmazza az összes projektben használt betűtípusokat,
 * színeket és betűméreteket desktopra, tabletre és mobilra.
 */

:root {
    /* ============================================
       BETŰTÍPUSOK
       ============================================ */
    
    /* Főbetűtípus (Címek) */
    --font-family-heading: "Cardo", Sans-serif;
    
    /* Szövegtípus (Body) */
    --font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    
    /* Monospace (Admin/Code) */
    --font-family-mono: 'Courier New', Courier, monospace;
    
    
    /* ============================================
       SZÍNPALETTA
       ============================================ */
    
    /* Főszínek */
    --color-primary: #333333;
    --color-secondary: #666666;
    --color-text: #000000;
    --color-text-light: #555555;
    
    /* Accent színek (Linkek, Gombok) */
    --color-accent: #DD183B;
    --color-accent-dark: #B0142E;
    --color-accent-hover: #B0142E;
    --color-accent-light: #E8455D;
    
    /* Secondary gomb színek */
    --color-button-secondary-border: #DD183B;
    --color-button-secondary-text: #DD183B;
    --color-button-secondary-bg: transparent;
    --color-button-secondary-hover-bg: #DD183B;
    --color-button-secondary-hover-text: #ffffff;
    
    /* Háttérszínek */
    --color-background: #ffffff;
    --color-background-light: #f8f8f8;
    --color-background-lighter: #f5f5f5;
    
    /* Szegély és elválasztó színek */
    --color-border: #e0e0e0;
    --color-border-light: #d0d0d0;
    
    /* Fehér szöveg (overlay-eken) */
    --color-white: #ffffff;
    
    /* Árnyékok */
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-heavy: 0 5px 20px rgba(0, 0, 0, 0.15);
    --shadow-overlay: rgba(0, 0, 0, 0.5);
    --shadow-overlay-dark: rgba(0, 0, 0, 0.9);
    
    
    /* ============================================
       BORDER RADIUS (Egységes lekerekítések)
       ============================================ */
    
    /* Alapvető értékek */
    --border-radius-none: 0;
    --border-radius-xs: 2px;        /* Kis gombok, finom lekerekítések */
    --border-radius-sm: 4px;        /* Gombok, kis elemek */
    --border-radius-md: 8px;        /* Kártyák, képek, alapértelmezett */
    --border-radius-lg: 12px;       /* Nagyobb kártyák */
    --border-radius-xl: 1.5rem;     /* Nagyon nagy konténerek (24px) */
    --border-radius-pill: 24px;     /* Pill alakú elemek (gombok, badge-ek) */
    --border-radius-circle: 50%;    /* Kör alakú elemek (avatárok, ikon gombok) */
    
    /* Használati célok szerint */
    --border-radius-button: var(--border-radius-sm, 4px);
    --border-radius-card: var(--border-radius-md, 8px);
    --border-radius-image: var(--border-radius-md, 8px);
    --border-radius-container: var(--border-radius-xl, 1.5rem);
    
    
    /* ============================================
       BETŰMÉRETEK - DESKTOP (min-width: 1025px)
       ============================================ */
    
    --font-size-h1-desktop: 2.5rem;      /* 40px */
    --font-size-h2-desktop: 2rem;        /* 32px */
    --font-size-h3-desktop: 1.5rem;      /* 24px */
    --font-size-h4-desktop: 1.25rem;     /* 20px */
    --font-size-h5-desktop: 1.125rem;    /* 18px */
    --font-size-h6-desktop: 1rem;        /* 16px */
    --font-size-body-desktop: 1rem;      /* 16px */
    --font-size-large-desktop: 1.125rem; /* 18px */
    --font-size-small-desktop: 100%; /* 14px */
    --font-size-tiny-desktop: 0.75rem;   /* 12px */
    
    /* Line heights */
    --line-height-heading-desktop: 1.2;
    --line-height-body-desktop: 1.6;
    --line-height-tight-desktop: 1.3;
    
    /* Letter spacing */
    --letter-spacing-heading-desktop: 0.5px;
    --letter-spacing-body-desktop: 0;
    
    
    /* ============================================
       BETŰMÉRETEK - TABLET (768px - 1024px)
       ============================================ */
    
    --font-size-h1-tablet: 2rem;         /* 32px */
    --font-size-h2-tablet: 1.75rem;      /* 28px */
    --font-size-h3-tablet: 1.375rem;     /* 22px */
    --font-size-h4-tablet: 1.125rem;     /* 18px */
    --font-size-h5-tablet: 1rem;         /* 16px */
    --font-size-h6-tablet: 0.9375rem;    /* 15px */
    --font-size-body-tablet: 0.9375rem;  /* 15px */
    --font-size-large-tablet: 1rem;      /* 16px */
    --font-size-small-tablet: 100%; /* 13px */
    --font-size-tiny-tablet: 0.75rem;    /* 12px */
    
    /* Line heights */
    --line-height-heading-tablet: 1.25;
    --line-height-body-tablet: 1.6;
    --line-height-tight-tablet: 1.35;
    
    /* Letter spacing */
    --letter-spacing-heading-tablet: 0.3px;
    --letter-spacing-body-tablet: 0;
    
    
    /* ============================================
       BETŰMÉRETEK - MOBIL (max-width: 767px)
       ============================================ */
    
    --font-size-h1-mobile: 2rem;         /* 32px - növelve 28px-ről */
    --font-size-h2-mobile: 1.75rem;      /* 28px - növelve 24px-ről */
    --font-size-h3-mobile: 1.5rem;       /* 24px - növelve 20px-ről */
    --font-size-h4-mobile: 1.25rem;      /* 20px - növelve 17px-ről */
    --font-size-h5-mobile: 1.125rem;     /* 18px - növelve 16px-ről */
    --font-size-h6-mobile: 1rem;         /* 16px - növelve 15px-ről */
    --font-size-body-mobile: 1rem;       /* 16px - növelve 15px-ről */
    --font-size-large-mobile: 1.125rem;  /* 18px - növelve 16px-ről */
    --font-size-small-mobile: 100%; /* 15px - növelve 13px-ről */
    --font-size-tiny-mobile: 0.875rem;   /* 14px - növelve 12px-ről */
    
    /* Line heights */
    --line-height-heading-mobile: 1.3;
    --line-height-body-mobile: 1.6;
    --line-height-tight-mobile: 1.4;
    
    /* Letter spacing */
    --letter-spacing-heading-mobile: 0.2px;
    --letter-spacing-body-mobile: 0;
    
    
    /* ============================================
       FONT WEIGHTS
       ============================================ */
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}


/* ============================================
   RESPONSIVE TYPOGRAPHY MIXINS
   ============================================ */

/* Desktop (min-width: 1025px) */
@media (min-width: 1025px) {
    :root {
        /* Dinamikus értékek, amit a CSS változókból veszünk */
    }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        /* Override desktop értékek tablet értékekre */
        --font-size-h1: var(--font-size-h1-tablet);
        --font-size-h2: var(--font-size-h2-tablet);
        --font-size-h3: var(--font-size-h3-tablet);
        --font-size-h4: var(--font-size-h4-tablet);
        --font-size-h5: var(--font-size-h5-tablet);
        --font-size-h6: var(--font-size-h6-tablet);
        --font-size-body: var(--font-size-body-tablet);
        --font-size-large: var(--font-size-large-tablet);
        --font-size-small: var(--font-size-small-tablet);
        --font-size-tiny: var(--font-size-tiny-tablet);
        
        --line-height-heading: var(--line-height-heading-tablet);
        --line-height-body: var(--line-height-body-tablet);
        --line-height-tight: var(--line-height-tight-tablet);
        
        --letter-spacing-heading: var(--letter-spacing-heading-tablet);
        --letter-spacing-body: var(--letter-spacing-body-tablet);
    }
}

/* Mobil (max-width: 767px) */
@media (max-width: 767px) {
    :root {
        /* Override desktop értékek mobil értékekre */
        --font-size-h1: var(--font-size-h1-mobile);
        --font-size-h2: var(--font-size-h2-mobile);
        --font-size-h3: var(--font-size-h3-mobile);
        --font-size-h4: var(--font-size-h4-mobile);
        --font-size-h5: var(--font-size-h5-mobile);
        --font-size-h6: var(--font-size-h6-mobile);
        --font-size-body: var(--font-size-body-mobile);
        --font-size-large: var(--font-size-large-mobile);
        --font-size-small: var(--font-size-small-mobile);
        --font-size-tiny: var(--font-size-tiny-mobile);
        
        --line-height-heading: var(--line-height-heading-mobile);
        --line-height-body: var(--line-height-body-mobile);
        --line-height-tight: var(--line-height-tight-mobile);
        
        --letter-spacing-heading: var(--letter-spacing-heading-mobile);
        --letter-spacing-body: var(--letter-spacing-body-mobile);
    }
}

/* Desktop alapértelmezett értékek (min-width: 1025px) */
@media (min-width: 1025px) {
    :root {
        --font-size-h1: var(--font-size-h1-desktop);
        --font-size-h2: var(--font-size-h2-desktop);
        --font-size-h3: var(--font-size-h3-desktop);
        --font-size-h4: var(--font-size-h4-desktop);
        --font-size-h5: var(--font-size-h5-desktop);
        --font-size-h6: var(--font-size-h6-desktop);
        --font-size-body: var(--font-size-body-desktop);
        --font-size-large: var(--font-size-large-desktop);
        --font-size-small: var(--font-size-small-desktop);
        --font-size-tiny: var(--font-size-tiny-desktop);
        
        --line-height-heading: var(--line-height-heading-desktop);
        --line-height-body: var(--line-height-body-desktop);
        --line-height-tight: var(--line-height-tight-desktop);
        
        --letter-spacing-heading: var(--letter-spacing-heading-desktop);
        --letter-spacing-body: var(--letter-spacing-body-desktop);
    }
}


/* ============================================
   GLOBÁLIS TYPOGRAPHY HELPER OSZTÁLYOK
   ============================================ */

/* Heading stílusok */
.ds-heading-h1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h1);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    font-weight: var(--font-weight-normal);
    color: var(--color-primary);
}

.ds-heading-h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    font-weight: var(--font-weight-normal);
    color: var(--color-primary);
}

.ds-heading-h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h3);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    font-weight: var(--font-weight-normal);
    color: var(--color-primary);
}

.ds-heading-h4 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h4);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    font-weight: var(--font-weight-normal);
    color: var(--color-primary);
}

/* Body stílusok */
.ds-body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-body);
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
}

.ds-body-large {
    font-family: var(--font-family-body);
    font-size: var(--font-size-large);
    line-height: var(--line-height-body);
    color: var(--color-text);
}

.ds-body-small {
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    line-height: var(--line-height-body);
    color: var(--color-secondary);
}

/* Link stílusok */
.ds-link {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ds-link:hover {
    color: var(--color-accent-hover);
    text-decoration: none;
}

.ds-link:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--border-radius-xs, 2px);
}

.menu-link {
    color:white!important;
}

/* Menüelemek fekete színe single page-eken */
body.single-post .menu-item a,
body.single-post .menu-link,
body.single-galeria .menu-item a,
body.single-galeria .menu-link,
body.single-csoportok .menu-item a,
body.single-csoportok .menu-link,
body.single-hirek .menu-item a,
body.single-hirek .menu-link {
    color: #000000 !important;
}

/* Ha a body-n van az ast-main-header-nav-open osztály, akkor fekete a menü színe */
body.ast-main-header-nav-open .menu-item a,
body.ast-main-header-nav-open .menu-link {
    color: #000000 !important;
}

/* Single page-eken kívül, ha a hamburger menü ki van nyitva, invert filter a logóra */
body:not(.single-post):not(.single-galeria):not(.single-csoportok):not(.single-hirek).ast-main-header-nav-open .custom-logo-link img {
    filter: invert(1) !important;
}

.sorkizart {
    text-align: justify!important;
}