/* Toranj News – notice bar above the header. Uses the Toranj theme tokens, with fallbacks for other themes. */
.tjn {
  --tjn-bg: var(--tj-surface, #fbf9f4);
  --tjn-ink: var(--tj-ink, #1a2350);
  --tjn-ink-2: var(--tj-ink-2, #4a5378);
  --tjn-rule: var(--tj-rule, #dcd2bd);
  --tjn-acc: var(--tj-saffron, #b07a22);
  --tjn-acc-ink: var(--tj-saffron-text, #8a5c12);
  position: relative;
  z-index: 40;
  background: var(--tjn-bg);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--tjn-acc) 9%, transparent), color-mix(in srgb, var(--tjn-acc) 3%, transparent) 60%, transparent);
  border-bottom: 1px solid var(--tjn-rule);
  color: var(--tjn-ink);
  font-family: var(--tj-font, system-ui, sans-serif);
  overflow: hidden;
  transition: background-color .4s, opacity .25s, transform .25s;
}
.tjn[dir="rtl"] { background-image: linear-gradient(270deg, color-mix(in srgb, var(--tjn-acc) 9%, transparent), color-mix(in srgb, var(--tjn-acc) 3%, transparent) 60%, transparent); }
.tjn::before {
  /* thin accent line and a faint girih ornament on the far side */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--tjn-acc);
}
.tjn::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 180px;
  opacity: .08;
  pointer-events: none;
  background: var(--tjn-acc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='9' y='9' width='14' height='14'/%3E%3Crect x='9' y='9' width='14' height='14' transform='rotate(45 16 16)'/%3E%3C/g%3E%3C/svg%3E") 0 50% / 32px 32px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='9' y='9' width='14' height='14'/%3E%3Crect x='9' y='9' width='14' height='14' transform='rotate(45 16 16)'/%3E%3C/g%3E%3C/svg%3E") 0 50% / 32px 32px;
}
.tjn[dir="rtl"]::after { inset: 0 auto 0 0; transform: scaleX(-1); }
.tjn--bye { opacity: 0; transform: translateY(-6px); }

.tjn__in {
  position: relative;
  z-index: 1;
  max-width: var(--tj-max, 1180px);
  margin: 0 auto;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
}
.tjn__slide { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
.tjn__slide[hidden] { display: none; }
.tjn--in { animation: tjn-in .45s var(--tj-out, cubic-bezier(.16, 1, .3, 1)); }
@keyframes tjn-in { from { opacity: 0; transform: translateY(4px); } }

.tjn__art {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--tjn-acc);
  background: color-mix(in srgb, var(--tjn-acc) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tjn-acc) 30%, transparent);
}
.tjn__art svg { width: 22px; height: 22px; }
.tjn__body { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 14.5px; line-height: 1.5; color: var(--tjn-ink-2); }
.tjn__title { color: var(--tjn-ink); font-weight: 700; margin-inline-end: 4px; }
.tjn[dir="rtl"] .tjn__body, .tjn__slide[dir="rtl"] .tjn__body { font-size: 15px; line-height: 1.7; }

.tjn__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--tjn-acc-ink);
  background: color-mix(in srgb, var(--tjn-acc) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tjn-acc) 35%, transparent);
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.tjn__link:hover, .tjn__link:focus-visible { color: var(--tjn-bg); background: var(--tjn-acc-ink); text-decoration: none; }

.tjn__nav { flex: none; display: flex; align-items: center; gap: 2px; color: var(--tjn-ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tjn__nav[hidden] { display: none; }
.tjn__count { min-width: 38px; text-align: center; }
.tjn__btn {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tjn-ink-2);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.tjn__btn svg { width: 16px; height: 16px; }
.tjn__btn:hover, .tjn__btn:focus-visible { background: color-mix(in srgb, var(--tjn-ink) 8%, transparent); color: var(--tjn-ink); outline: none; }
.tjn[dir="rtl"] .tjn__btn[data-prev] svg, .tjn[dir="rtl"] .tjn__btn[data-next] svg { transform: scaleX(-1); }

/* accents per kind – light */
.tjn-on-availability { --tjn-acc: var(--tj-ok, #2f6b4f); --tjn-acc-ink: var(--tj-ok, #2f6b4f); }
.tjn-on-alert { --tjn-acc: var(--tj-madder, #a8322a); --tjn-acc-ink: var(--tj-bad, #9b2c25); }
.tjn-on-nowruz, .tjn-on-sizdah { --tjn-acc: #3e7c4f; --tjn-acc-ink: #2f6440; }
.tjn-on-chaharshanbe { --tjn-acc: #c4581d; --tjn-acc-ink: #a14512; }
.tjn-on-yalda { --tjn-acc: #a12a3c; --tjn-acc-ink: #8c2132; }
.tjn-on-nikolaus { --tjn-acc: #b0392c; --tjn-acc-ink: #942e23; }
.tjn-on-christmas { --tjn-acc: #2f6b47; --tjn-acc-ink: #25573a; }
.tjn-on-newyear { --tjn-acc: #a87a1e; --tjn-acc-ink: #855f12; }
.tjn-on-easter { --tjn-acc: #7a5aa6; --tjn-acc-ink: #634789; }
.tjn-on-summer { --tjn-acc: #b8761a; --tjn-acc-ink: #8f5a0f; }
.tjn-on-autumn { --tjn-acc: #ad541f; --tjn-acc-ink: #8c4214; }

/* accents per kind – dark (theme switch, or system dark on other themes) */
:root[data-theme="dark"] .tjn-on-nowruz, :root[data-theme="dark"] .tjn-on-sizdah { --tjn-acc: #86c79a; --tjn-acc-ink: #a3d8b2; }
:root[data-theme="dark"] .tjn-on-chaharshanbe { --tjn-acc: #f0955a; --tjn-acc-ink: #f6ae7c; }
:root[data-theme="dark"] .tjn-on-yalda { --tjn-acc: #ec8193; --tjn-acc-ink: #f2a0ae; }
:root[data-theme="dark"] .tjn-on-nikolaus { --tjn-acc: #ec8a7e; --tjn-acc-ink: #f2a59b; }
:root[data-theme="dark"] .tjn-on-christmas { --tjn-acc: #7cc49b; --tjn-acc-ink: #9bd6b4; }
:root[data-theme="dark"] .tjn-on-newyear { --tjn-acc: #e2b764; --tjn-acc-ink: #ecc985; }
:root[data-theme="dark"] .tjn-on-easter { --tjn-acc: #bfa3ea; --tjn-acc-ink: #d1bcf1; }
:root[data-theme="dark"] .tjn-on-summer { --tjn-acc: #ecb25c; --tjn-acc-ink: #f2c57f; }
:root[data-theme="dark"] .tjn-on-autumn { --tjn-acc: #ec9a63; --tjn-acc-ink: #f2b386; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .tjn-on-nowruz, :root:not([data-theme]) .tjn-on-sizdah { --tjn-acc: #86c79a; --tjn-acc-ink: #a3d8b2; }
  :root:not([data-theme]) .tjn-on-yalda { --tjn-acc: #ec8193; --tjn-acc-ink: #f2a0ae; }
  :root:not([data-theme]) .tjn-on-christmas { --tjn-acc: #7cc49b; --tjn-acc-ink: #9bd6b4; }
}

/* falling flakes for the winter nights, petals for Nowruz: only in the ornament strip, never over the text */
.tjn__fx { position: absolute; inset: 0 0 0 auto; width: 240px; pointer-events: none; display: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.tjn[dir="rtl"] .tjn__fx { inset: 0 auto 0 0; -webkit-mask-image: linear-gradient(270deg, transparent, #000 70%); mask-image: linear-gradient(270deg, transparent, #000 70%); }
.tjn-on-christmas .tjn__fx, .tjn-on-yalda .tjn__fx, .tjn-on-nikolaus .tjn__fx, .tjn-on-nowruz .tjn__fx, .tjn-on-newyear .tjn__fx {
  display: block;
  opacity: .55;
  background-image:
    radial-gradient(circle, var(--tjn-acc) 1.3px, transparent 1.7px),
    radial-gradient(circle, var(--tjn-acc) 1px, transparent 1.4px),
    radial-gradient(circle, var(--tjn-acc) .8px, transparent 1.2px);
  background-size: 110px 70px, 70px 60px, 50px 50px;
  background-position: 10px 0, 40px 20px, 25px 10px;
  animation: tjn-fall 14s linear infinite;
}
@keyframes tjn-fall { to { background-position: 10px 70px, 40px 80px, 25px 60px; } }
@media (prefers-reduced-motion: reduce) {
  .tjn--in, .tjn__fx { animation: none !important; }
}

@media (max-width: 640px) {
  .tjn::after { width: 110px; opacity: .06; }
  .tjn__fx { width: 140px; }
  .tjn__in { flex-wrap: wrap; gap: 6px 10px; padding-top: 12px; padding-bottom: 10px; }
  .tjn__slide { flex: 1 1 100%; flex-wrap: wrap; gap: 8px 10px; padding-inline-end: 30px; }
  .tjn__art { width: 32px; height: 32px; }
  .tjn__art svg { width: 19px; height: 19px; }
  .tjn__body { flex: 1 1 calc(100% - 42px); font-size: 14px; }
  .tjn__link { margin-inline-start: 42px; min-height: 32px; }
  .tjn__close { position: absolute; top: 8px; inset-inline-end: max(6px, env(safe-area-inset-right, 0px)); }
  .tjn__nav { margin-inline-start: auto; margin-top: -4px; }
}
@media print { .tjn { display: none; } }