/* Visual language of the "קבעתי" campaign brochure (Design/*.pdf).
   Tokens + fonts + decorative primitives. Layout lives in style.css. */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../fonts/heebo-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../fonts/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../fonts/heebo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Verses (with niqqud) */
@font-face {
  font-family: "Frank Ruhl Libre"; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url("../fonts/frank-ruhl-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Frank Ruhl Libre"; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url("../fonts/frank-ruhl-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Big display headlines and prices */
@font-face {
  font-family: "Suez One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/suez-one-hebrew.woff2") format("woff2");
  /* U+20AA (₪) left out: Suez One draws it like the letters שח, so it falls back to Heebo */
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Suez One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/suez-one-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Royal blue ground */
  --royal-500: #1e3f8a;
  --royal-700: #16306f;
  --royal-900: #0d2259;
  --royal-950: #081640;
  --bg-gradient: radial-gradient(120% 90% at 50% 0%, var(--royal-500) 0%, var(--royal-700) 45%, var(--royal-900) 100%);
  --bg-texture: url("../images/bg-texture.webp");

  /* Gold */
  --gold-light: #f6dc8f;
  --gold-dark: #c9a24a;
  --gold-deep: #9a7426;
  --gold-gradient: linear-gradient(180deg, var(--gold-light) 0%, #ecc979 45%, var(--gold-dark) 100%);

  /* Parchment */
  --parchment: #f3dca0;            /* price tag */
  --parchment-light: #f8ebc8;      /* scroll */
  --parchment-edge: #dcb978;
  --paper: #fffdf7;                /* white torn text boxes */

  /* Ink */
  --ink-navy: #13245a;             /* dark blue text on parchment */
  --ink-on-blue: #ffffff;
  --ink-on-blue-soft: #d6def2;

  /* Type */
  --font-body: "Heebo", system-ui, sans-serif;
  --font-verse: "Frank Ruhl Libre", "Times New Roman", serif;
  --font-display: "Suez One", "Heebo", serif;

  /* Decorations */
  --corner-size: clamp(34px, 9vw, 64px);
  --torn-mask: url("../images/ui/torn-mask.svg");
  --torn-mask-soft: url("../images/ui/torn-mask-soft.svg");
  --lozenge: url("../images/ui/lozenge.svg");
  --frame-gold: url("../images/frame-gold.webp");

  --shadow-deep: 0 10px 30px rgba(3, 10, 35, 0.55);
  --shadow-soft: 0 4px 14px rgba(3, 10, 35, 0.35);
  --radius: 4px;
  --max: 1200px;
}

/* ---------- Primitives ---------- */

/* Royal blue fabric/brush background, pinned so the texture doesn't stretch over tall pages */
.theme-ground {
  background: var(--royal-900);
  color: var(--ink-on-blue);
  font-family: var(--font-body);
}
.theme-ground::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--bg-gradient);
}
.theme-ground::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--bg-texture) center / cover no-repeat;
  mix-blend-mode: soft-light; opacity: 0.9;
}

/* Gold gradient text (verse headings, section titles on blue) */
.gold-text {
  background: var(--gold-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 2px rgba(3, 10, 35, 0.6));
}

/* Verse heading with gold lozenge ornaments on both sides */
.verse {
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-verse); font-weight: 900; line-height: 1.35;
  text-align: center; margin: 0;
}
.verse::before, .verse::after {
  content: ""; flex: 0 0 auto; width: 0.55em; height: 2.3em;
  background: var(--lozenge) center / contain no-repeat;
}
.verse > span { min-width: 0; }

/* Torn paper edge */
.torn { -webkit-mask: var(--torn-mask) 0 0 / 100% 100% no-repeat; mask: var(--torn-mask) 0 0 / 100% 100% no-repeat; }
.torn-soft { -webkit-mask: var(--torn-mask-soft) 0 0 / 100% 100% no-repeat; mask: var(--torn-mask-soft) 0 0 / 100% 100% no-repeat; }

/* Image frame with ornate gold corners (SVG) */
.frame { position: relative; margin: calc(var(--corner-size) * 0.22); }
.frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame::after {
  content: ""; position: absolute; pointer-events: none;
  inset: calc(var(--corner-size) * -0.22);
  background:
    url("../images/ui/corner-tl.svg") top left / var(--corner-size) no-repeat,
    url("../images/ui/corner-tr.svg") top right / var(--corner-size) no-repeat,
    url("../images/ui/corner-bl.svg") bottom left / var(--corner-size) no-repeat,
    url("../images/ui/corner-br.svg") bottom right / var(--corner-size) no-repeat;
}

/* Classic gilded picture frame (from the brochure) */
.frame-gilded {
  border: 18px solid transparent;
  border-image: var(--frame-gold) 30 round;
  box-shadow: var(--shadow-deep);
  background: var(--royal-950);
}
.frame-gilded img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Parchment-gold price tag */
.price-tag {
  background: linear-gradient(180deg, #f8e6b4 0%, var(--parchment) 55%, #e9cb85 100%);
  color: var(--ink-navy); text-align: center;
  padding: 0.7em 1em 0.6em;
  box-shadow: var(--shadow-soft);
  font-family: var(--font-body);
}
.price-tag .zchut { margin: 0; font-weight: 800; font-size: 1rem; line-height: 1.3; }
.price-tag .engrave { margin: 0; font-weight: 600; font-size: 0.92rem; }
.price-tag .amount {
  margin: 0.1em 0 0; font-family: var(--font-display); font-size: 2.1rem; line-height: 1.1;
  letter-spacing: 0.01em; direction: ltr; unicode-bidi: isolate;
  display: inline-flex; align-items: baseline; gap: 0.25em; flex-direction: row-reverse;
}
.price-tag .amount .cur { font-size: 0.5em; }

/* Parchment scroll with rollers on both sides */
.scroll {
  --roller: clamp(16px, 4vw, 30px);
  position: relative; color: var(--ink-navy);
  padding: clamp(28px, 6vw, 56px) calc(var(--roller) + clamp(18px, 5vw, 48px));
  background:
    radial-gradient(120% 80% at 50% 50%, rgba(255, 250, 230, 0.9) 0%, rgba(255, 250, 230, 0) 70%),
    linear-gradient(90deg, #e2c27f 0%, var(--parchment-light) 12%, #fbf1d6 50%, var(--parchment-light) 88%, #e2c27f 100%);
  box-shadow: var(--shadow-deep), inset 0 0 40px rgba(150, 110, 40, 0.35);
}
.scroll::before, .scroll::after {
  content: ""; position: absolute; top: -18px; bottom: -18px; width: var(--roller);
  border-radius: calc(var(--roller) / 2);
  background:
    radial-gradient(circle at 50% 8px, #fff4c8 0 3px, #d9b25a 4px 7px, transparent 8px) top / 100% 18px no-repeat,
    radial-gradient(circle at 50% 10px, #fff4c8 0 3px, #d9b25a 4px 7px, transparent 8px) bottom / 100% 18px no-repeat,
    linear-gradient(90deg, #6e4a14 0%, #c99a45 22%, #f6dc8f 45%, #b98a35 70%, #5e3d0f 100%);
  box-shadow: 0 6px 14px rgba(3, 10, 35, 0.5);
}
.scroll::before { inset-inline-start: calc(var(--roller) * -0.35); }
.scroll::after { inset-inline-end: calc(var(--roller) * -0.35); }

/* White torn paper text box (used on blue) */
.paper {
  background: var(--paper); color: var(--ink-navy);
  padding: clamp(20px, 5vw, 36px) clamp(18px, 5vw, 40px);
  box-shadow: var(--shadow-deep);
}

/* Buttons */
.btn-gold {
  display: inline-block; text-decoration: none; text-align: center; cursor: pointer;
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.02em;
  color: var(--ink-navy); background: var(--gold-gradient);
  padding: 0.55em 1.6em; border: 1px solid var(--gold-deep); border-radius: 999px;
  box-shadow: 0 3px 0 var(--gold-deep), var(--shadow-soft);
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-gold:hover, .btn-gold:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 0 var(--gold-deep), var(--shadow-deep); }
.btn-gold:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-deep); }
.btn-outline {
  display: inline-block; text-decoration: none; text-align: center;
  font-family: var(--font-display); font-size: 1.05rem;
  color: var(--gold-light); border: 1.5px solid var(--gold-dark); border-radius: 999px;
  padding: 0.5em 1.4em; background: rgba(8, 22, 64, 0.35);
}
.btn-outline:hover, .btn-outline:focus-visible { background: rgba(246, 220, 143, 0.12); }

:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}