/*
Theme Name: Ogen Katan
Theme URI: http://localhost:8089/
Author: Zinka
Description: Classic RTL theme for עוגן קטן ע״ר, built from Figma hwo0T85mJouIqV3tsXR44W.
Version: 2.0.0
Text Domain: ogen-katan
*/

/* ──────────────────────────────────────────────────────────────────────────
   Layer 1 — base. Fonts, tokens, reset and the components that repeat across
   the whole site. Section geometry lives in assets/css/home.css and is
   generated from the Figma frame; nothing in this file sets a section size.
   ────────────────────────────────────────────────────────────────────────── */

/* Talent FS, shipped as Polin. The metric overrides are not cosmetic: Polin is
   flagged USE_TYPO_METRICS, so the browser takes typo ascent 0.8em where Figma
   takes hhea 1.0em and every line sits 0.1em too high (13px on an 84px heading). */
@font-face {
  font-family: "Talent FS";
  src: url("assets/fonts/Polin-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 20%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Talent FS";
  src: url("assets/fonts/Polin-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 20%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Talent FS";
  src: url("assets/fonts/Polin-Bold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 20%;
  line-gap-override: 0%;
}

:root {
  /* Paint styles, exactly as the frame reports them. */
  --ok-light: #ffffff;
  --ok-200: #f7f7fa;
  --ok-400: #d5d6e6;
  --ok-900: #4d5494;
  --ok-accent: #2b3380;
  --ok-accent-2: #eb6185;
  --ok-accent-3: #b8d1c2;
  --ok-ink: #242541;        /* DARK on every section                     */
  --ok-ink-header: #022d38; /* DARK as the header frame reports it       */
  --ok-paper: #fafafe;

  /* The unit rule: every Figma length is written as calc(N * var(--ok-scale)),
     which is N / 1920 * 100vw. The mobile frame is 390 wide, so the same
     numbers can be re-measured against their own base in the media query. */
  --ok-scale: calc(100vw / 1920);
}

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

/* The one clip we are allowed to add: the page root, against sideways scroll.
   It has to be on BOTH html and body. Several frames bleed past the left edge on
   purpose (the mint ribbon of section 8 reaches x -1148), and because the document
   is dir="rtl" that bleed extends the scroll canvas to the left instead of being
   ignored — which moves the whole page sideways. Nothing inside a section is
   clipped by this; the bleed still paints, it just stops growing the canvas. */
html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ok-paper);
  color: var(--ok-ink);
  font-family: "Talent FS", "Arial Hebrew", Arial, sans-serif;
  font-weight: 400;
}

img,
svg {
  display: block;
  max-width: none;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.screen-reader-text:focus {
  position: fixed;
  top: 0;
  right: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  background: var(--ok-light);
  color: var(--ok-accent);
  clip-path: none;
  z-index: 100;
}

/* ── Type scale, from the text styles the frame reports ─────────────────── */

/* H2 — Regular 70, line-height 1. The bold run inside a heading is ACCENT. */
.ok-h2 {
  margin: 0;
  font-size: calc(70 * var(--ok-scale));
  font-weight: 400;
  line-height: 1;
  text-align: right;
}

.ok-h2 strong {
  font-weight: 700;
  color: var(--ok-accent);
}

/* טקסט רץ — Regular 18, line-height 1.3, letter-spacing 2%. */
.ok-body {
  font-size: calc(18 * var(--ok-scale));
  line-height: 1.3;
  letter-spacing: calc(0.36 * var(--ok-scale));
  text-align: right;
}

.ok-body strong {
  font-weight: 700;
}

.ok-body p {
  margin: 0;
}

/* A run carrying the 900 token inside running text. */
.sc-copy-accent {
  font-weight: 700;
  color: var(--ok-900);
}

/* ── Pill button (כפתור) ────────────────────────────────────────────────────
   Height 54, radius 500, padding 20/10, gap 16, label Regular 20.
   One component, three skins:
     .ok-pill            fill 200, ACCENT outline, ACCENT label  (the default)
     .ok-pill--solid     fill ACCENT, white outline, white label (header)
     .ok-pill--light     fill white, no outline, ACCENT label    (footer)
     .ok-pill--bare      no fill, no outline, ACCENT label       (CTA link)
   Hover and focus invert the default skin to the ACCENT fill, which is the
   second state the frame draws for the same component. */
.ok-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(16 * var(--ok-scale));
  height: calc(54 * var(--ok-scale));
  padding: calc(10 * var(--ok-scale)) calc(20 * var(--ok-scale));
  border: calc(1 * var(--ok-scale)) solid var(--ok-accent);
  border-radius: calc(500 * var(--ok-scale));
  background: var(--ok-200);
  color: var(--ok-accent);
  font-size: calc(20 * var(--ok-scale));
  line-height: 1;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.ok-pill__icon {
  display: block;
  flex: 0 0 auto;
  width: calc(24 * var(--ok-scale));
  height: calc(38 * var(--ok-scale));
}

.ok-pill__icon--thin {
  width: calc(9.5 * var(--ok-scale));
  height: calc(19 * var(--ok-scale));
}

.ok-pill__icon img {
  width: 100%;
  height: 100%;
}

.ok-pill__label {
  display: block;
}

.ok-pill:hover,
.ok-pill:focus-visible {
  background: var(--ok-accent);
  border-color: var(--ok-accent);
  color: var(--ok-light);
  outline: none;
}

.ok-pill:hover .ok-pill__icon img,
.ok-pill:focus-visible .ok-pill__icon img {
  filter: brightness(0) invert(1);
}

.ok-pill--solid {
  background: var(--ok-accent);
  border-color: var(--ok-light);
  color: var(--ok-light);
}

.ok-pill--solid .ok-pill__icon img {
  filter: brightness(0) invert(1);
}

.ok-pill--solid:hover,
.ok-pill--solid:focus-visible {
  background: var(--ok-200);
  border-color: var(--ok-accent);
  color: var(--ok-accent);
}

.ok-pill--solid:hover .ok-pill__icon img,
.ok-pill--solid:focus-visible .ok-pill__icon img {
  filter: none;
}

.ok-pill--light {
  background: var(--ok-light);
  border-color: transparent;
  color: var(--ok-accent);
}

.ok-pill--light:hover,
.ok-pill--light:focus-visible {
  background: var(--ok-accent);
  border-color: var(--ok-light);
  color: var(--ok-light);
}

.ok-pill--bare {
  background: none;
  border-color: transparent;
}

.ok-pill--bare:hover,
.ok-pill--bare:focus-visible {
  background: none;
  border-color: var(--ok-accent);
  color: var(--ok-accent);
}

.ok-pill--bare:hover .ok-pill__icon img,
.ok-pill--bare:focus-visible .ok-pill__icon img {
  filter: none;
}

/* ── Round arrow (חצי קרוסלה) ───────────────────────────────────────────────
   70 circle, fill 200, ACCENT outline 1.296. The frame draws a second copy of
   the same component with an ACCENT fill: that is this component's hover and
   focus state, not a separate button. */
.ok-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: calc(70 * var(--ok-scale));
  height: calc(70 * var(--ok-scale));
  border: calc(1.296 * var(--ok-scale)) solid var(--ok-accent);
  border-radius: 50%;
  background: var(--ok-200);
  transition: background-color 160ms ease, opacity 160ms ease;
}

.ok-arrow img {
  width: calc(31.111 * var(--ok-scale));
  height: calc(49.259 * var(--ok-scale));
}

.ok-arrow:hover,
.ok-arrow:focus-visible {
  background: var(--ok-accent);
  outline: none;
}

.ok-arrow:hover img,
.ok-arrow:focus-visible img {
  filter: brightness(0) invert(1);
}

.ok-arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

.ok-arrow[disabled]:hover {
  background: var(--ok-200);
}

.ok-arrow[disabled]:hover img {
  filter: none;
}

/* Direction of the chevron, by where the button sits. The asset points left. */
.ok-arrow--up img {
  transform: rotate(90deg);
}

.ok-arrow--down img {
  transform: rotate(-90deg);
}

.ok-arrow--right img {
  transform: rotate(180deg);
}

/* ── Simple inner page, until those frames are built ───────────────────── */
.ok-page__inner {
  width: calc(930 * var(--ok-scale));
  margin: 0 auto;
  padding: calc(160 * var(--ok-scale)) 0 calc(120 * var(--ok-scale));
}

.ok-page__title {
  margin: 0 0 calc(28 * var(--ok-scale));
  font-size: calc(70 * var(--ok-scale));
  font-weight: 400;
  line-height: 1;
  text-align: right;
  color: var(--ok-ink);
}

.ok-page__content {
  font-size: calc(18 * var(--ok-scale));
  line-height: 1.3;
  text-align: right;
}