/* =========================================================
   itayungerson.com - shared base styles (all pages)
   Recreates the look of the original WordPress/Elementor site
   (Twenty Twenty-Five theme + Elementor kit) without any plugins.
   ========================================================= */

:root {
  /* Brand colors */
  --gold: #c5a059;
  --gold-dark: #9e7e43;
  --gold-light: #e0bc7a;
  --gold-soft: #edc577;
  --orange: #ff8f00;
  --yellow: #eef507;
  --white: #fff;
  --gray-text: #7a7a7a;          /* Elementor default "text" color */
  --theme-contrast: #79f3b1;     /* Twenty Twenty-Five body text color (visible only where nothing overrides it) */
  --heading-blue: #6ec1e4;       /* Elementor "primary" color, used for legal page titles */

  /* Fluid font sizes from the Twenty Twenty-Five theme */
  --fs-small: 0.9rem;
  --fs-medium: clamp(0.9rem, 0.9rem + ((1vw - 0.2rem) * 0.471), 1.2rem);
  --fs-large: clamp(1.2rem, 1.2rem + ((1vw - 0.2rem) * 0.941), 1.8rem);
  --fs-x-large: clamp(1.8rem, 1.8rem + ((1vw - 0.2rem) * 0.627), 2.2rem);
  --fs-xx-large: clamp(2rem, 2rem + ((1vw - 0.2rem) * 1.255), 2.8rem);

  /* Layout */
  --content-max: 1140px;
  --gap: 20px;
}

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

body {
  margin: 0;
  color: var(--theme-contrast);
  font-family: "Roboto", Sans-serif;
  font-size: var(--fs-medium);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5;
  background-color: transparent;
  background-image: linear-gradient(180deg, #030202 0%, #090909 100%);
}

h1, h2, h3, h4, h5, h6 {
  font-family: Literata, serif;
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.24;
}
h1 { font-size: var(--fs-xx-large); font-family: "Fredoka", Sans-serif; }
h2 { font-size: var(--fs-x-large); }
h3 { font-size: var(--fs-large); }
h4 { font-size: var(--fs-medium); }

h1, h2, h3, h4, h5, h6, p, blockquote, caption, figcaption { text-wrap: pretty; }

a {
  color: currentColor;
  text-decoration: none;
  text-decoration-thickness: 1px !important;
  text-underline-offset: .1em;
}

img { border: none; border-radius: 0; box-shadow: none; height: auto; max-width: 100%; }
figure { margin: 0; }
pre { overflow-x: auto; }

.sr-only {
  position: absolute; top: -10000em; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* ---------- Layout primitives ---------- */

/* Full-width section with a centered 1140px content column */
.box { padding-inline: 10px; }
.box__inner {
  max-width: min(100%, var(--content-max));
  margin: 0 auto;
  padding-block: 10px;
}

/* Vertical stack with 20px between blocks */
.stack { display: flex; flex-direction: column; gap: var(--gap); }

/* A content block ("widget"). Flex items form their own formatting context,
   so inner margins stay inside the block - matches the original spacing. */
.w { position: relative; min-width: 0; }

/* Keep a left-to-right visual order for two-column layouts on an RTL page
   (the original page was built LTR). Content inside stays RTL. */
.ltr-layout { direction: ltr; }
.ltr-layout > * { direction: rtl; }

/* ---------- Text blocks ---------- */
.text { font-family: "Roboto", Sans-serif; font-weight: 400; color: var(--gray-text); text-align: center; }
.text--white { color: var(--white); }

/* ---------- Divider ---------- */
.divider { display: flex; padding-block: 15px; }
.divider > span { display: flex; width: 100%; margin: 0; border-block-start: 1px solid #000; direction: ltr; }

/* ---------- Social icons ---------- */
.social { direction: ltr; display: flex; justify-content: center; gap: 10px; }
.social__icon {
  --icon-color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%;
  font-size: 25px; line-height: 25px; text-align: center;
  background-color: #69727d; cursor: pointer;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.social__icon:hover, .social__icon:focus, .social__icon:active { transform: scale(1.1); }
.social__icon i { color: var(--icon-color); }
.social__icon--instagram { background-color: #262626; }
.social__icon--youtube { background-color: #cd201f; }

/* ---------- Icon fonts (Font Awesome 5 Brands + Elementor icons, self-hosted) ---------- */
.fab {
  font-family: "Font Awesome 5 Brands"; font-weight: 400; font-style: normal; font-variant: normal;
  display: inline-block; line-height: 1; text-rendering: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.fa-tiktok::before { content: "\e07b"; }
.fa-instagram::before { content: "\f16d"; }
.fa-youtube::before { content: "\f167"; }

[class^="eicon-"], [class*=" eicon-"] {
  display: inline-block; font-family: eicons; font-size: inherit; font-weight: 400; font-style: normal;
  font-variant: normal; line-height: 1; text-rendering: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.eicon-chevron-right::before { content: "\e87d"; }
.eicon-chevron-left::before { content: "\e87e"; }

/* ---------- Spacer ---------- */
.spacer { height: var(--size, 50px); }

/* =========================================================
   Legal pages. Same tokens as the home letter, scoped here
   so :root and unqualified headings stay off these pages.
   ========================================================= */
.page-legal {
  --bg: #060505;
  --text: #f4efe6;
  --muted: #a89880;
  --font-display: "Frank Ruhl Libre", serif;
  --font-body: "IBM Plex Sans Hebrew", sans-serif;
  --fs-body: 18px;
  --lh-body: 1.65;
  --fw-body: 400;
  --fw-title: 700;
  --fs-chapter: 40px;
  --lh-chapter: 1.25;
  --fs-room: 22px;
  --fs-rules: 16px;
  --measure: 42rem;
  --page: 1140px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-40: 40px;
  --space-96: 96px;
  --dur: 200ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  background-color: var(--bg);
  background-image: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  letter-spacing: 0;
  line-height: var(--lh-body);
}

@media (min-width: 768px) {
  .page-legal { --fs-chapter: 48px; }
}

@media (max-width: 767px) {
  .page-legal {
    --fs-chapter: 32px;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .page-legal .page {
    padding: 24px max(16px, env(safe-area-inset-left), env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom));
  }

  .page-legal .legal-text,
  .page-legal .legal-note,
  .page-legal .legal-footer,
  .page-legal li {
    overflow-wrap: break-word;
  }
}

.page-legal .page {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--space-40) var(--space-16) var(--space-96);
}

.page-legal .box { direction: rtl; padding-inline: 0; }
.page-legal .box__inner { padding-block: 0; }
.page-legal .stack { gap: var(--space-12); }
.page-legal .spacer { height: 0; }

.page-legal h1,
.page-legal h2,
.page-legal .legal-title {
  margin: var(--space-24) 0 var(--space-12);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-chapter);
  font-weight: var(--fw-title);
  letter-spacing: 0;
  line-height: var(--lh-chapter);
}

.page-legal h1,
.page-legal .legal-title { margin-top: 0; }

.page-legal h3 {
  margin: var(--space-24) 0 var(--space-8);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-room);
  font-weight: var(--fw-title);
  letter-spacing: 0;
  line-height: var(--lh-chapter);
}

.page-legal p { margin: 0; }
.page-legal p + p,
.page-legal li + li { margin-top: var(--space-12); }

.page-legal .legal-text,
.page-legal .legal-note,
.page-legal .legal-footer {
  max-width: var(--measure);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  color: var(--text);
  text-align: start;
}

.page-legal .legal-note em { font-style: normal; }

.page-legal .legal-footer,
.page-legal .legal-footer small {
  color: var(--muted);
  font-size: var(--fs-rules);
}

.page-legal a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--dur) var(--ease);
}

.page-legal a:hover { color: var(--text); }

.page-legal a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .page-legal a { transition: none; }
}