/* ============================================
   CSS Custom Properties & Variables
   ============================================ */

/* Fonts */
:root {
  --default-font: "Open Sans",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff;
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #545454; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #e0c3c1; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #444444;  /* The default color of the main navmenu links */
  --nav-hover-color: #e0c3c1; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #e0c3c1; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Spacing System - Relative units for consistent spacing */
:root {
  --spacing-xs: 0.3125rem;   /* 5px */
  --spacing-sm: 0.625rem;    /* 10px */
  --spacing-md: 1.25rem;     /* 20px */
  --spacing-lg: 1.875rem;    /* 30px */
  --spacing-xl: 2.5rem;      /* 40px */
  --spacing-xxl: 3.125rem;   /* 50px */
  --spacing-3xl: 3.75rem;    /* 60px */
}

/* Font Size System - Relative units for scalability */
:root {
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.125rem;    /* 18px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-2xl: 1.625rem;   /* 26px */
  --font-size-3xl: 1.75rem;    /* 28px */
  --font-size-4xl: 2rem;       /* 32px */
}

/* Border Radius System */
:root {
  --border-radius-sm: 0.3125rem;   /* 5px */
  --border-radius-md: 0.375rem;    /* 6px */
  --border-radius-lg: 0.625rem;    /* 10px */
  --border-radius-xl: 0.9375rem;   /* 15px */
  --border-radius-2xl: 1.25rem;    /* 20px */
  --border-radius-round: 50%;
}

/* Shadow System - Soft, diffused shadows with enhanced blur for a dreamy aesthetic */
:root {
  /* Base shadows - subtle elevation for small components with increased blur */
  --shadow-xs: 0 0.0625rem 0.5rem rgba(0, 0, 0, 0.04),
              0 0.0625rem 0.75rem rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 0.0625rem 0.75rem rgba(0, 0, 0, 0.05),
              0 0.125rem 1rem rgba(0, 0, 0, 0.04);
  --shadow-md: 0 0.125rem 1.25rem rgba(0, 0, 0, 0.06),
              0 0.25rem 1.5rem rgba(0, 0, 0, 0.05);

  /* Elevated shadows - medium elevation for cards and buttons with soft blur */
  --shadow-lg: 0 0.25rem 1.875rem rgba(0, 0, 0, 0.07),
              0 0.5rem 2.5rem rgba(0, 0, 0, 0.05),
              0 0.125rem 0.75rem rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 0.375rem 2.5rem rgba(0, 0, 0, 0.08),
              0 0.75rem 3.5rem rgba(0, 0, 0, 0.06),
              0 0.1875rem 1.25rem rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 0.5rem 3.125rem rgba(0, 0, 0, 0.09),
               0 1rem 4.5rem rgba(0, 0, 0, 0.07),
               0 0.25rem 1.5rem rgba(0, 0, 0, 0.05);

  /* Contextual shadows - brand-aware shadows with dreamy, diffused blur */
  --shadow-card: 0 0.125rem 1.5rem rgba(0, 0, 0, 0.05),
                0 0.25rem 2rem color-mix(in srgb, var(--accent-color), transparent 82%),
                0 0.0625rem 0.75rem rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0 0.375rem 2.5rem rgba(0, 0, 0, 0.07),
                      0 0.625rem 3.5rem color-mix(in srgb, var(--accent-color), transparent 72%),
                      0 0.125rem 1.25rem rgba(0, 0, 0, 0.05);

  /* Interactive shadows - for buttons and interactive elements with enhanced softness */
  --shadow-button: 0 0.125rem 0.875rem rgba(0, 0, 0, 0.07),
                  0 0.1875rem 1.25rem color-mix(in srgb, var(--default-color), transparent 88%);
  --shadow-button-hover: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.09),
                        0 0.375rem 2rem color-mix(in srgb, var(--default-color), transparent 82%);
  --shadow-button-active: 0 0.0625rem 0.5rem rgba(0, 0, 0, 0.07),
                         0 0.125rem 0.75rem rgba(0, 0, 0, 0.05);

  /* Specialty shadows with increased blur for maximum softness */
  --shadow-inset: inset 0 0.125rem 1.25rem rgba(0, 0, 0, 0.05),
                 inset 0 0.0625rem 0.625rem rgba(0, 0, 0, 0.03);
  --shadow-dropdown: 0 0.25rem 2rem rgba(0, 0, 0, 0.07),
                    0 0.5rem 3rem rgba(0, 0, 0, 0.05),
                    0 0 0 0.0625rem rgba(0, 0, 0, 0.03);
  --shadow-focus: 0 0 0 0.1875rem color-mix(in srgb, var(--accent-color), transparent 82%),
                 0 0.125rem 1.25rem rgba(0, 0, 0, 0.07);
}

/* Transition System */
:root {
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Z-Index Scale */
:root {
  --z-index-dropdown: 99;
  --z-index-sticky: 997;
  --z-index-fixed: 9998;
  --z-index-modal-backdrop: 9997;
  --z-index-modal: 9998;
  --z-index-popover: 9999;
  --z-index-tooltip: 99999;
  --z-index-preloader: 999999;
}

/* Size System */
:root {
  --icon-size-sm: 1rem;       /* 16px */
  --icon-size-md: 1.125rem;   /* 18px */
  --icon-size-lg: 1.375rem;   /* 22px */
  --icon-size-xl: 1.5rem;     /* 24px */
  --icon-size-2xl: 1.75rem;   /* 28px */
  --icon-size-3xl: 2.25rem;   /* 36px */
  --icon-size-4xl: 3rem;      /* 48px */
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: var(--transition-base);
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Form fields
--------------------------------------------------------------*/

/* Hide number input spinners cross-browser */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* Label fields */
label {
  font-size: var(--font-size-sm);
}

label:has(.asteriskField) {
  font-weight: bold;
}

.asteriskField {
  font-size: 0;
}

.asteriskField::before {
  font-size: var(--font-size-xs);
  font-weight: normal;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-left: 0.25rem;
  content: "(kötelező)";
}

/* ============================================
   Scroll Animation System (data-animate)
   ============================================ */

[data-animate] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

[data-animate].animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Hero Entrance Animations
   ============================================ */

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroScaleIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes heroBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

.hero-enter {
  opacity: 0;
  animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-enter-1 { animation-delay: 0.10s; }
.hero-enter-2 { animation-delay: 0.25s; }
.hero-enter-3 { animation-delay: 0.40s; }
.hero-enter-4 { animation-delay: 0.55s; }
.hero-enter-5 { animation-delay: 0.70s; }
.hero-enter-6 { animation-delay: 0.85s; }

.hero-enter-carousel {
  opacity: 0;
  animation: heroScaleIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

.hero-scroll-bounce {
  animation: heroBounce 1.8s ease-in-out 1.2s infinite;
}