/* Shivti - Sugyos for Shemini Atzeres & Simchas Torah 5787 - standalone page styles */

@font-face { font-family: "Noto Serif Hebrew"; src: url("../fonts/NotoSerifHebrew-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Serif Hebrew"; src: url("../fonts/NotoSerifHebrew-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

html { background: #f4efec; }
html, body { margin: 0; min-height: 100%; }
body { -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }

/* Page card (matches the hosted version's card) */
.page-card {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px;
  background: #fbfaf9;
  color: #251f21;
  display: flex;
  flex-direction: column;
  gap: 48px;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.01em;
}
.page-card > * { min-width: 0; }
.page-card a { color: #251f21; }
.page-card :focus-visible { outline: 2px solid #251f21; outline-offset: 2px; }
@media (min-width: 768px) { .page-card { padding: 36px; } }

/* Campaign design */

.brand { margin: -24px -24px 0; background: #f7f1e3; color: #2b2320; font-family: Arial, Helvetica, sans-serif; }
@media (min-width: 768px) { .brand { margin: -36px -36px 0; } }

.brand-logo { width: 100%; display: block; }

.brand-maroon { background: #4a1414; padding: 26px 28px 24px; text-align: center; }
.brand-maroon .eyebrow { color: #d9b96a; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 8px; }
.brand-maroon h1 { line-height: 1.2; color: #f7f1e3; font-family: Georgia, 'Times New Roman', serif; font-size: 32px; margin: 0 0 10px; }
.brand-maroon .sub { color: #e8dcc3; font-size: 14px; line-height: 1.6; max-width: 640px; margin: 0 auto; }
.brand-maroon .sub b { color: #f0d48a; }

.brand-hero { width: 100%; display: block;  }

.brand-strip { background: #c9a227; color: #4a1414; text-align: center; font-size: 13px; font-weight: bold; padding: 10px 16px; }

.sugya-grid { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 18px 16px 8px; }
@media (min-width: 700px) { .sugya-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .sugya-grid { grid-template-columns: 1fr 1fr 1fr; } }

.sugya-card { background: #fff; border: 1px solid #e3d5b8; border-radius: 8px; padding: 12px; display: flex; gap: 12px; text-decoration: none; color: inherit; transition: box-shadow .15s ease; }
.sugya-card:hover, .sugya-card:focus-visible { box-shadow: 0 3px 14px rgba(74,20,20,.18); outline: none; border-color: #c9a227; }

.cover-wrap { flex: none; width: 108px; }
.cover-wrap img { width: 108px; height: 107px; object-fit: cover; border: 1px solid #d9cba6; border-radius: 4px; display: block; }

.sugya-text { display: flex; flex-direction: column; min-width: 0; }
.badge { align-self: flex-start; font-size: 9px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; margin-bottom: 5px; }
.badge-timely { background: #c9a227; color: #4a1414; }

.heb { font-family: 'Noto Serif Hebrew', Georgia, serif; direction: rtl; text-align: left; font-size: 15px; font-weight: bold; color: #4a1414; line-height: 1.35; }
.en { line-height: 1.4; font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: #8a5a2e; margin: 4px 0 5px; font-weight: bold; }
.blurb { font-size: 12.5px; line-height: 1.45; color: #4a4038; margin-bottom: 6px; }
.cta { font-size: 11.5px; font-weight: bold; color: #8a5a2e; margin-top: 4px; }

.orderbox { margin: 10px 16px 22px; background: #4a1414; border-radius: 10px; padding: 18px 22px; color: #f7f1e3; }
.orderbox h2 { font-family: Georgia, serif; color: #f0d48a; font-size: 20px; margin: 0 0 8px; }
.orderbox p { font-size: 13.5px; line-height: 1.65; margin: 0; }
.orderbox a { color: #f0d48a; font-weight: bold; }

@media (max-width: 640px) { .brand-maroon h1 { font-size: 25px; } }

.hoshana { background: #f7f1e3; text-align: center; padding: 22px 20px 20px; font-family: "Noto Serif Hebrew", serif; color: #4a1414; border-bottom: 3px solid #c9a227; }
.hoshana-title { font-weight: 700; font-size: 28px; line-height: 1.5; margin-bottom: 6px; }
.hoshana-text { font-size: 19px; line-height: 1.8; }