/*
Theme Name: Delba
Theme URI: https://example.com/delba
Author: Your Name
Author URI: https://example.com
Description: A component-based WordPress theme with modular architecture
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: delba
*/

/* CSS Variables & Base Configuration */
:root {
  /* Color palette */
  --white-100: rgba(255, 255, 255, 1);;
  --white-90: rgba(255, 255, 255, 0.9);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-10: rgba(255, 255, 255, 0.1);
  
  --primary: #FF280E;
  --primary-light: #FF5945;
  --primary-extra-light: #FF7766;
  --primary-hover: #FF6452;

  --secondary: #000000;
  --secondary-hover: #313131;

  --tertiary: #343E52;
  --tertiary-hover: #4A566E;

  --custom-one: #C3C3C3;
  --custom-two: #d8dee8;
  --custom-three: #76777a;
  
  --text: #000000;
  
  --background: #EBEEF4;
  --transparent-background: rgba(235, 238, 244, 0);

  /* Notofication */
  --error-color: #FF280E;
  --success-color: #008000;
  --warning-color: #FFA500;

  /* gradients */
  --gradient-background: linear-gradient(180deg, var(--transparent-background) 0%, var(--background) 100%);

  /* Shadows */
  --shadow-100: 0px 0px calc(1 * var(--rpx)) rgba(0, 0, 0, 1);
  --shadow-90: 0px 0px calc(1 * var(--rpx)) rgba(0, 0, 0, 0.9);
  --shadow-80: 0px 0px calc(1 * var(--rpx)) rgba(0, 0, 0, 0.8);
  --shadow-70: 0px 0px calc(1 * var(--rpx)) rgba(0, 0, 0, 0.7);
  --shadow-60: 0px 0px calc(1 * var(--rpx)) rgba(0, 0, 0, 0.6);
  --shadow-50: 0px 0px calc(1 * var(--rpx)) rgba(0, 0, 0, 0.5);
  --shadow-40: 0px 0px calc(1 * var(--rpx)) rgba(0, 0, 0, 0.4);
  --shadow-30: 0px 0px calc(1 * var(--rpx)) rgba(0, 0, 0, 0.3);
  --shadow-20: 0px 0px calc(1 * var(--rpx)) rgba(0, 0, 0, 0.2);
  --shadow-10: 0px 0px calc(1 * var(--rpx)) rgba(0, 0, 0, 0.1);

  /* Overlay */
  --overlay-100: rgba(0, 0, 0, 1);
  --overlay-90: rgba(0, 0, 0, 0.9);
  --overlay-80: rgba(0, 0, 0, 0.8);
  --overlay-70: rgba(0, 0, 0, 0.7);
  --overlay-60: rgba(0, 0, 0, 0.6);
  --overlay-50: rgba(0, 0, 0, 0.5);
  --overlay-40: rgba(0, 0, 0, 0.4);
  --overlay-30: rgba(0, 0, 0, 0.3);
  --overlay-20: rgba(0, 0, 0, 0.2);
  --overlay-10: rgba(0, 0, 0, 0.1);

  --overlay-color-70: rgba(35, 44, 60, 0.7);

  /* Font families */
  --font-primary: 'Ekibastuz', system-ui;

  /* Transitions presets */
  --transition-slow: var(--transition-property-all) var(--transition-duration-slow) var(--transition-timing-function-ease);
  --transition-normal: var(--transition-property-all) var(--transition-duration-normal) var(--transition-timing-function-ease);
  --transition-fast: var(--transition-property-all) var(--transition-duration-fast) var(--transition-timing-function-ease);

  --transition-duration-slow: 0.75s;
  --transition-duration-normal: 0.5s;
  --transition-duration-fast: 0.3s;

  --transition-delay-slow: 0.75s;
  --transition-delay-normal: 0.5s;
  --transition-delay-fast: 0.3s;

  --transition-timing-function-ease: ease;
  --transition-timing-function-ease-in-out: ease-in-out;

  --transition-property-all: all;
  --transition-property-background-color: background-color;
  --transition-property-color: color;
  --transition-property-transform: transform;
  --transition-property-opacity: opacity;


  /* Radiuses */
  --radius-4: calc(var(--rpx) * 4);
  --radius-8: calc(var(--rpx) * 8);
  --radius-12: calc(var(--rpx) * 12);
  --radius-16: calc(var(--rpx) * 16);
  --radius-20: calc(var(--rpx) * 20);
  --radius-24: calc(var(--rpx) * 24);
  --radius-28: calc(var(--rpx) * 28);
  --radius-32: calc(var(--rpx) * 32);
  --radius-36: calc(var(--rpx) * 36);
  --radius-40: calc(var(--rpx) * 40);
  --radius-44: calc(var(--rpx) * 44);
  --radius-48: calc(var(--rpx) * 48);
  --radius-52: calc(var(--rpx) * 52);
  --radius-56: calc(var(--rpx) * 56);
  --radius-60: calc(var(--rpx) * 60);

  /* Radiuses */
  --spacing-4: calc(var(--rpx) * 4);
  --spacing-8: calc(var(--rpx) * 8);
  --spacing-12: calc(var(--rpx) * 12);
  --spacing-16: calc(var(--rpx) * 16);
  --spacing-20: calc(var(--rpx) * 20);
  --spacing-24: calc(var(--rpx) * 24);
  --spacing-28: calc(var(--rpx) * 28);
  --spacing-32: calc(var(--rpx) * 32);
  --spacing-36: calc(var(--rpx) * 36);
  --spacing-40: calc(var(--rpx) * 40);
  --spacing-44: calc(var(--rpx) * 44);
  --spacing-48: calc(var(--rpx) * 48);
  --spacing-52: calc(var(--rpx) * 52);
  --spacing-56: calc(var(--rpx) * 56);
  --spacing-60: calc(var(--rpx) * 60);
  --spacing-64: calc(var(--rpx) * 64);
  --spacing-68: calc(var(--rpx) * 68);
  --spacing-72: calc(var(--rpx) * 72);
  --spacing-76: calc(var(--rpx) * 76);
  --spacing-80: calc(var(--rpx) * 80);
}

@media (max-width: 767px) {
  :root {
    --rpx: 1px;
    --spacing-container: 10px;
    --section-padding-top: 60px;
    --footer-padding-top: 60px;
    --header-height: 50px;
  }

  [pc],
  [tablet],
  [pc-tablet] {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --rpx: 1px;
    --spacing-container: 10px;
    --section-padding-top: 60px;
    --footer-padding-top: 60px;
    --header-height: 50px;
  }

  [pc],
  [mobile] {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  :root {
    --base-width: 1440;
    --base-width-max: 1920;
    --max-height-window: 1080px;
    --rpx: min(max(calc(100vw / var(--base-width)), calc(100vw / var(--base-width-max))), calc(1px * var(--base-width-max) / var(--base-width)));
    --width-container: min(calc(calc(var(--rpx) * 1330) + (2 * var(--spacing-container))), 1920px);
    --spacing-container: calc(var(--rpx) * 55);
    --section-padding-top: calc(var(--rpx) * 120);
    --footer-padding-top: calc(var(--rpx) * 120);
    --header-height: calc(var(--rpx) * 88);
  }

  [mobile],
  [tablet],
  [mobile-tablet] {
    display: none !important;
  }
}

/* Base Styles */
html, html body, html *, html *::before, html *::after {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font: var(--font-p4);
  color: var(--text);
  background-color: var(--background);
  scroll-padding: var(--header-height);
  opacity: 0;
  transition: all 0.5s ease;
}
body.loaded {
  opacity: 1;
}

/* Начальное состояние для всех секций */
section {
  opacity: 0;
  transition: all 0.5s ease;
}
/* Состояние после получения атрибута load - настраивается индивидуально в компонентах */
section[load] {
  opacity: 1;
}

::-webkit-scrollbar-thumb {
  background: var(--secondary);
  border-radius: var(--radius-8);
}

::-webkit-scrollbar {
  width: 5px;
}

a, button, input, textarea {
  transition: var(--transition-fast);
}

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

a:hover {
  color: var(--primary);
}

a.submenu {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.nowrap {white-space: nowrap;}