/* ============================================================================
   theme.css — айдентика ТОВ «КОМПАНІЯ БУДШЛЯХМАШ» (c-bshm.com)
   Палітра власника: синій (акцент) + жовтий #FCCC00 (дія).
   Дві теми: ТЕМНА — основна (дефолт), світла — через перемикач у шапці
   (html[data-theme="light"], вибір зберігається в localStorage).
   ============================================================================ */

/* ── Спільне для обох тем ───────────────────────────────────────────────── */
:root {
  /* Жовтий — колір дії */
  --color-action:        #FCCC00;
  --color-action-hover:  #e3b700;
  --color-on-action:     #141414;

  /* Типографіка: технічний гротеск + Montserrat */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Montserrat', 'Helvetica Neue', sans-serif;
  --display-transform: uppercase;
  --display-spacing:   0.02em;

  /* Індустріальна геометрія — жорсткіші кути */
  --radius-lg: 0.5rem;
  --radius-xl: 0.625rem;
}

/* ── ТЕМНА тема (основна, дефолт) ───────────────────────────────────────── */
:root, [data-theme="dark"] {
  --color-bg:           #141619;
  --color-surface:      #1c1f23;
  --color-surface-2:    #22262b;
  --color-border:       rgba(255, 255, 255, 0.13);
  --color-text:         #e6e8ea;
  --color-text-muted:   #a7adb5;
  --color-text-faint:   #6d747c;
  --color-heading:      #f2f4f6;

  /* Синій світліший — щоб читався на темному */
  --color-primary:       #4d8ef5;
  --color-primary-hover: #7fb0ff;
  --color-accent-light:  rgba(19, 103, 237, 0.16);
  --color-on-primary:    #10131a;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.55);
}

/* ── Світла тема (через перемикач) ──────────────────────────────────────── */
[data-theme="light"] {
  --color-bg:           #f2f4f7;
  --color-surface:      #e9ecf1;
  --color-surface-2:    #ffffff;
  --color-border:       rgba(22, 34, 56, 0.13);
  --color-text:         #2a2f36;
  --color-text-muted:   #5d6570;
  --color-text-faint:   #97a0ab;
  --color-heading:      #1c2a44;

  --color-primary:       #1367ED;
  --color-primary-hover: #0d4fbd;
  --color-accent-light:  #e8f0fd;
  --color-on-primary:    #ffffff;

  --shadow-sm: 0 1px 3px rgba(39,41,43,0.07), 0 1px 2px rgba(39,41,43,0.04);
  --shadow-md: 0 4px 16px rgba(39,41,43,0.09), 0 2px 4px rgba(39,41,43,0.05);
  --shadow-lg: 0 20px 48px rgba(39,41,43,0.13), 0 4px 8px rgba(39,41,43,0.06);
}

/* Плавна зміна теми */
body, .topbar, .section, .hero, .features, .footer,
.partner, .report, .tile, .form, .about-list li, .about__note {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

/* ── Перемикач теми в шапці ─────────────────────────────────────────────── */
.theme-toggle {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
.theme-toggle svg { width: 1.2rem; height: 1.2rem; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ── Hero-фото: у правий край екрана, текст обтікає скіс ────────────────── */
.hero__photo {
  float: right;
  /* 76% контейнера + вся смуга від контейнера до краю вікна —
     фото росте разом з екраном, а не впирається в сітку */
  width: calc(76% + (100vw - 100%) / 2);
  height: auto;
  /* праворуч — до краю вікна */
  margin: 0.4rem calc((100% - 100vw) / 2) var(--space-6) var(--space-6);
  /* контур скосу main.png (полігон надійніший за alpha-канал) */
  shape-outside: polygon(20.5% 0%, 100% 0%, 100% 100%, 29% 100%, 29% 86%, 3% 74%);
  shape-margin: 1.25rem;
}
.hero__flow .hero__descriptor { max-width: none; }
/* Заголовок компактніший, щоб рядки (зокрема «БУДІВНИЦТВАХ») вкладалися
   у звуження скосу без розривів */
.hero__flow .hero__title { font-size: clamp(1.8rem, 1rem + 1.75vw, 2.5rem); }
@media (max-width: 56rem) {
  .hero__photo {
    float: none; width: 100%; max-width: none;
    margin: 0 0 var(--space-8);
    shape-outside: none;
  }
}