/* Base Typography & Layout — Linear-style palette */
:root {
    color-scheme: light;
    --canvas: #fafbfc;
    --surface: #ffffff;
    --border-subtle: #e6e8eb;
    --border-strong: #d1d5db;
    --ink-muted: #6b7280;
    --brand: #5e6ad2;
    --brand-strong: #4f59b8;
}

html {
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
}

body {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-feature-settings: "cv11", "ss01", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

/* Headings get tighter tracking for a modern feel */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
}

/* Hebrew (right-to-left) text uses a traditional Hebrew serif — Inter has no
   Hebrew glyphs, so without this it falls back to a plain system font. */
[dir="rtl"] {
    font-family: "Frank Ruhl Libre", "David Libre", "Noto Serif Hebrew", "Times New Roman", serif;
    letter-spacing: normal;
}

/* Tanach — scribal annotations inside the verse text (kri/ksiv "(כתיב …)"
   notes, "קרי ולא כתיב", rabbati letters), carried as
   <span class="instructional …"> in the Sefaria-sourced corpus. Set small and
   muted so they read as marginal notes, not as words of the pasuk. */
.instructional {
    font-size: 0.62em;
    font-weight: 400;
    color: var(--ink-muted);
}

/* Tanya — tzuras hadaf: justified body like the printed page, with the
   daily-study calendar markers (regular year / leap year) set as small
   in-text notations as they appear in the Kehot Tanya. */
.tanya-text {
    text-align: justify;
    text-align-last: right;
}
.tanya-mark {
    font-size: 0.58em;
    font-weight: 600;
    vertical-align: 0.45em;
    margin: 0 0.15em;
    padding: 0.05em 0.4em;
    border-radius: 0.3rem;
    white-space: nowrap;
    line-height: 1;
    position: relative;
    cursor: help;
}
/* Rashi commentary beneath a Chumash verse. */
.rashi-comment b { color: #1f2937; font-weight: 700; }   /* dibur hamatchil */
.rashi-hidden .rashi-block { display: none; }

/* English translation beneath each verse — hidden when the reader hides it. */
.translation-hidden .translation-block { display: none; }

/* Two-column layout: English (left) | Hebrew (right), side by side per verse. */
.translation-columns .verse-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
  align-items: start;
}
.translation-columns .verse-block > p[dir="rtl"] {
  grid-column: 2;
  grid-row: 1;
}
.translation-columns .verse-block .translation-block {
  grid-column: 1;
  grid-row: 1;
  border-right: none;
  border-left: 2px solid #bae6fd; /* sky-200 */
  padding-right: 0;
  padding-left: 0.75rem;
  margin-right: 0;
}
.translation-columns .verse-block .rashi-block {
  grid-column: 1 / -1;
}

.tanya-mark--reg  { color: #92400e; background: #fef3c7; }   /* regular year */
.tanya-mark--leap { color: #5b21b6; background: #ede9fe; }   /* leap year */
.marks-hidden .tanya-mark { display: none; }

/* Hover tooltip naming the year type (regular vs leap). */
.tanya-mark::after {
    position: absolute;
    bottom: 135%;
    right: 50%;
    transform: translateX(50%);
    background: #1f2937;
    color: #fff;
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 30;
}
.tanya-mark--reg::after  { content: "Regular year · שנה פשוטה"; }
.tanya-mark--leap::after { content: "Leap year · שנה מעוברת"; }
.tanya-mark:hover::after { opacity: 1; }

/* Selection color uses the brand */
::selection {
    background-color: rgba(94, 106, 210, 0.18);
    color: #383f7e;
}

/* Smooth, scoped transitions — only on commonly-animated properties */
a, button, [role="button"], input, select, textarea, summary {
    transition-property: color, background-color, border-color, box-shadow,
        transform, opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 160ms;
}

/* Fade-in Animation */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Blob Animation for Hero Section */
@keyframes blob {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

.animate-blob {
    animation: blob 9s ease-in-out infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* Subtle "shine" used on primary CTAs */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Rich Text Editor Styling (Action Text) */
.trix-content {
    line-height: 1.65;
}

.trix-content h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.trix-content p {
    margin-bottom: 0.75rem;
}

.trix-content ul,
.trix-content ol {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.trix-content a {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-color: rgba(94, 106, 210, 0.35);
    text-underline-offset: 2px;
}

.trix-content a:hover {
    text-decoration-color: currentColor;
}

/* Line Clamp Utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Focus Visible for Better Accessibility */
*:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 0.375rem;
}

button:focus-visible,
a:focus-visible {
    outline-offset: 3px;
}

/* Custom Scrollbar (WebKit browsers) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
    border: 2px solid var(--canvas);
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Light-mode logo inversion (for dark-background logos on light sites) */
.logo-light-mode {
    filter: invert(1);
}

/* App-wide surface card: reusable shell for repeating content blocks */
.app-card {
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 0.5rem;
}

/* Linear-style header — no blur, just a clean 1px border. */
.glass-nav {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border-subtle);
}

/* Subtle top-of-page gradient accent, used on some marketing layouts */
.page-glow {
    background-image:
        radial-gradient(1200px 320px at 15% -10%, rgba(94, 106, 210, 0.10), transparent 60%),
        radial-gradient(900px 260px at 90% -20%, rgba(143, 102, 217, 0.07), transparent 60%);
}

/* Print Styles */
@media print {
    nav, aside, footer, .no-print {
        display: none !important;
    }
    .lg\:pl-56, .lg\:pl-64 {
        padding-left: 0 !important;
    }
    body {
        background: #fff !important;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Seasonal pages use their own markup, but inherit the same visual language as
   the rest of Shafeh. These mappings let their existing layout stay intact
   while bringing bespoke palette classes back to the shared canvas/ink/brand
   tokens. */
.site-standard-theme [class~="bg-[#f4efe4]"],
.site-standard-theme [class~="bg-[#e7eff0]"],
.site-standard-theme [class~="bg-[#f9fcfb]"],
.site-standard-theme [class~="bg-[#f7fbfa]"],
.site-standard-theme [class~="bg-[#f8fbfa]"],
.site-standard-theme [class~="bg-[#f4f9f8]"] { background-color: var(--canvas) !important; }
.site-standard-theme [class~="bg-[#dce9ea]"],
.site-standard-theme [class~="bg-[#edf4f3]"],
.site-standard-theme [class~="bg-[#e6d5b4]"],
.site-standard-theme [class~="bg-[#fbf7ed]"] { background-color: var(--canvas) !important; }
.site-standard-theme [class~="bg-[#17242d]"],
.site-standard-theme [class~="bg-[#213a3e]"] { background-color: var(--canvas) !important; }
.site-standard-theme [class*="bg-[#f9fcfb]"],
.site-standard-theme [class*="bg-[#fbf7ed]"] { background-color: var(--surface) !important; }
.site-standard-theme [class~="text-[#12343b]"],
.site-standard-theme [class~="text-[#17242d]"],
.site-standard-theme [class~="text-[#17373e]"],
.site-standard-theme [class~="text-[#213a3e]"],
.site-standard-theme [class~="text-[#26383b]"],
.site-standard-theme [class~="text-[#294b52]"] { color: var(--ink-900) !important; }
.site-standard-theme [class~="text-[#31525a]"],
.site-standard-theme [class~="text-[#344e50]"],
.site-standard-theme [class~="text-[#48646a]"],
.site-standard-theme [class~="text-[#4b5f5f]"],
.site-standard-theme [class~="text-[#4d6161]"],
.site-standard-theme [class~="text-[#577177]"],
.site-standard-theme [class~="text-[#587176]"],
.site-standard-theme [class~="text-[#60797e]"],
.site-standard-theme [class~="text-[#687779]"] { color: var(--ink-muted) !important; }
.site-standard-theme [class~="text-[#fff9ec]"],
.site-standard-theme [class~="text-[#f9f2e5]"],
.site-standard-theme [class*="text-[#fff9ec]"],
.site-standard-theme [class*="text-[#f9f2e5]"] { color: var(--ink-900) !important; }
.site-standard-theme [class~="text-[#bd644a]"],
.site-standard-theme [class~="text-[#a66143]"],
.site-standard-theme [class~="text-[#9b5d1a]"],
.site-standard-theme [class~="text-[#8a573f]"],
.site-standard-theme [class~="text-[#6e4316]"] { color: var(--brand-strong) !important; }
.site-standard-theme [class~="text-[#f5c870]"],
.site-standard-theme [class~="text-[#e2b866]"],
.site-standard-theme [class~="text-[#f4d79e]"] { color: var(--brand) !important; }
.site-standard-theme [class~="bg-[#f5c870]"] { background-color: var(--brand) !important; }
.site-standard-theme [class~="bg-[#ffe0a0]"] { background-color: var(--brand-strong) !important; }
.site-standard-theme [class~="border-[#c5d7d8]"],
.site-standard-theme [class~="border-[#d8c9ae]"],
.site-standard-theme [class~="border-[#d9bd85]"],
.site-standard-theme [class~="border-[#b9cfd0]"],
.site-standard-theme [class~="border-[#afc6c8]"],
.site-standard-theme [class~="border-[#bdd0d1]"] { border-color: var(--border-subtle) !important; }
.site-standard-theme [class~="border-[#dc9b39]"],
.site-standard-theme [class~="border-[#bd644a]"],
.site-standard-theme [class~="border-[#c99d55]"] { border-color: var(--brand) !important; }
.site-standard-theme [class~="text-[#446068]"] { color: var(--ink-muted) !important; }
.site-standard-theme [class~="border-[#d8e4e4]"] { border-color: var(--border-subtle) !important; }

/* Sticky aliyah ribbon (Tanach reader): exactly one pill — the aliyah whose
   verses are on screen — is "current". Styled as plain CSS (not Tailwind
   utilities) so the look never depends on the Tailwind build being rebuilt.
   The double class beats Tailwind's single-class background/ring rules. */
.aliyah-pill.is-current {
    background-color: #0284c7; /* sky-600 */
    color: #ffffff;
    font-weight: 700;
    --tw-ring-color: #0284c7;
    box-shadow: 0 1px 2px 0 rgba(2, 132, 199, 0.35);
}