/* =========================================================
   Omni-Bot World — Global UI Foundation
   Technology Studio & Engineering Academy
   Shared across every page via templates/base.html
   ========================================================= */

:root {
  /* Brand colors (kept from the site's existing dark/gold identity) */
  --color-bg: #0f1420;
  --color-bg-elevated: #171d2c;
  --color-surface: #1a1a2e;
  --color-border: #2a3142;

  --color-text: #eef1f8;
  --color-text-muted: #a6adc0;

  --color-primary: #4CAF50;      /* existing green — primary actions */
  --color-primary-hover: #3d8b40;
  --color-accent: #ffd700;       /* existing gold — highlights, prices */
  --color-accent-hover: #ffab00;
  --color-link: #6ea8ff;

  --color-danger: #e5484d;
  --color-success: #28a745;

  /* Typography: system-safe stacks with full Hebrew coverage.
     Orbitron (already loaded site-wide) is reserved for the brand
     wordmark / large display headings only — it has no Hebrew glyphs. */
  --font-display: 'Orbitron', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 20px;
  --header-height: 68px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  --transition: all 0.2s ease;

  /* Company-presentation palette (Sprint 2 homepage).
     Strictly additive: --color-primary / --color-accent keep their existing
     meaning so Shop, Blog and internal pages are not repainted. */
  --color-graphite: #0d1117;
  --color-graphite-deep: #08090d;
  --color-surface-elevated: #161b24;
  --color-surface-raised: #1d232e;
  --color-hairline: rgba(255, 255, 255, 0.08);
  --color-hairline-strong: rgba(255, 255, 255, 0.16);

  --color-tech-accent: #4dd0e1;
  --color-tech-accent-soft: rgba(77, 208, 225, 0.12);

  --color-cta: #ff6a2b;
  --color-cta-hover: #ef561a;

  --space-9: 88px;
  --space-10: 120px;
}

/* =========================================================
   Reset / base
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg) url("../img/gets.png") center/cover no-repeat fixed;
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

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

/* Consistent, visible focus state for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* =========================================================
   Typography hierarchy
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--space-4);
}

h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}

small, .text-meta {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* =========================================================
   Layout: container / sections
   ========================================================= */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.site-main {
  flex: 1 0 auto;
}

.section {
  padding-block: var(--space-7);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow);
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  color: #fff;
  transform: translateY(-2px);
}

.btn-accent {
  background: var(--color-accent);
  color: #1a1a1a;
}

.btn-accent:hover {
  background: var(--color-accent-hover);
  color: #1a1a1a;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Primary call to action for company-presentation pages. */
.btn-cta {
  background: var(--color-cta);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 106, 43, 0.22);
}

.btn-cta:hover {
  background: var(--color-cta-hover);
  color: #fff;
  transform: translateY(-2px);
}

/* Quiet outline variant that reads correctly on graphite surfaces. */
.btn-quiet {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-hairline-strong);
}

.btn-quiet:hover {
  border-color: var(--color-tech-accent);
  color: var(--color-tech-accent);
}

/* =========================================================
   Header
   ========================================================= */

.site-header {
  background: rgba(8, 9, 13, 0.9);
  border-bottom: 1px solid var(--color-hairline);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

/* nowrap is load-bearing: the row must stay one --header-height line. If it is
   allowed to wrap, the nav drops under the logo and the sticky header doubles
   in height, pushing the hero down on every desktop width. */
.site-header__inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: nowrap;
  padding-block: var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.brand:hover {
  color: var(--color-text);
}

.brand__logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Orbitron is a wide face, and with 0.12em tracking this wordmark was the
   single widest item on a row that has to hold nine more. Slightly tighter
   metrics here are what let the row fit in Russian while logged in. */
.brand__name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text);
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: var(--space-4);
  flex-wrap: nowrap;
}

/* The auth group and the language switcher sit slightly further apart than the
   section links, so the row reads as three groups rather than one queue. */
.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Shown only once the hamburger drawer takes over. */
.nav-item--drawer-only {
  display: none;
}

/* The row no longer wraps, so a long username can no longer push the language
   switcher off the edge: it truncates instead. The full name is still the link
   text, so assistive technology and the tooltip keep all of it. */
.profile-link {
  max-width: 9ch;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* At 2px the hover backgrounds of adjacent links almost touched and the row
   read as one solid bar. The width for a real gap comes out of the link
   padding below, so the row is no tighter than before — it is 10px wider. */
.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}

/* The primary sections have to stay legible on one desktop row, so the
   horizontal padding is tight rather than the type size. The hamburger
   breakpoint below takes over before they would run out of room. */
.nav-link {
  display: inline-block;
  padding: 0.5rem 0.4rem;
  border-radius: var(--radius);
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.84rem;
  white-space: nowrap;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-tech-accent);
}

.nav-link.active {
  color: var(--color-tech-accent);
}

/* Restrained WhatsApp entry point in the header. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-hairline-strong);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.nav-cta:hover {
  border-color: var(--color-cta);
  color: var(--color-cta);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
}

/* =========================================================
   Language switcher
   ========================================================= */

.lang-switcher {
  position: relative;
}

.lang-button {
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.language-list {
  display: none;
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  min-width: 160px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 1001;
}

.language-list form {
  margin: 0;
}

.lang-option {
  display: block;
  width: 100%;
  text-align: start;
  padding: 0.65rem 1rem;
  background: none;
  border: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.lang-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-accent);
}

.lang-option.active {
  color: var(--color-accent);
  font-weight: 600;
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  margin-top: var(--space-8);
  background: rgba(10, 14, 24, 0.95);
  border-top: 1px solid var(--color-border);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-7);
}

.footer-col h3,
.footer-col h4 {
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col a {
  color: var(--color-text-muted);
}

.footer-col a:hover {
  color: var(--color-accent);
}

.footer-col h4 {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.footer-tagline {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.9rem;
}

.footer-contact a {
  color: var(--color-text-muted);
}

.footer-contact a:hover {
  color: var(--color-tech-accent);
}

.site-footer__bottom {
  border-top: 1px solid var(--color-hairline);
  padding-block: var(--space-4);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.site-footer__bottom p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Legal links move out of the column grid to keep the footer quiet. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

/* =========================================================
   RTL support (Hebrew)
   Logical properties above already flip automatically with
   dir="rtl". The rules below cover the few cases that don't.
   ========================================================= */

html[dir="rtl"] body {
  direction: rtl;
}

html[dir="rtl"] .nav-list,
html[dir="rtl"] .nav-left,
html[dir="rtl"] .nav-right,
html[dir="rtl"] .top-nav,
html[dir="rtl"] .site-header__inner {
  /* flexbox row direction already mirrors correctly under dir="rtl";
     nothing to override here besides text alignment defaults below */
}

html[dir="rtl"] .footer-col,
html[dir="rtl"] .site-footer__bottom p,
html[dir="rtl"] p,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
  text-align: start;
}

/* Directional icons: a "→" glyph reads correctly in LTR but points
   the wrong way once the flex row reverses under RTL; mirror it. */
html[dir="rtl"] .process-arrow,
html[dir="rtl"] .arrow-glyph {
  display: inline-block;
  transform: scaleX(-1);
}

/* =========================================================
   Responsive foundation (detailed mobile work is a later sprint)
   ========================================================= */

/* The container itself stops growing at 1200px, so that is the width below
   which the row can no longer hold the sections plus auth, WhatsApp and the
   language switcher. The collapse mechanism itself is unchanged. */
@media (max-width: 1200px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Header content is free to wrap again here: the drawer is supposed to
     open below the logo row. */
  .site-header__inner {
    flex-wrap: wrap;
  }

  /* The accessibility widget anchors a 44px trigger to the leading top corner
     and mirrors under RTL, so below this width it sat on top of the logo in
     both directions. The wordmark starts clear of it instead. Scoped to the
     homepage because that is the only page that loads the widget. */
  .page-home .brand {
    margin-inline-start: 30px;
  }

  .nav-item--drawer-only {
    display: block;
  }

  .top-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .top-nav.is-open {
    display: flex;
    flex-basis: 100%;
    padding-block-end: var(--space-3);
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-link {
    padding: 0.7rem 0.5rem;
    font-size: 0.95rem;
  }

  /* Only the stacked section list gets separators, and they run the full width
     of the drawer: as an inline-block rule the line stopped at the end of each
     label, and on the auth row it read as an underlined link rather than a
     divider. */
  .nav-list .nav-link {
    display: block;
    border-block-end: 1px solid var(--color-hairline);
  }

  .nav-left,
  .nav-right {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .lang-switcher {
    margin-inline-start: auto;
  }
}

@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}