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

:root {
  --blue-dark: #1565C0;
  --blue-electric: #448AFF;
  --violet: #7C4DFF;
  --accent: #E65100;
  --white: #ffffff;
  --text: #1a1a2e;
  --text-muted: #555577;
  --surface: #f5f7ff;
  --border: #e2e6f5;
  --gradient: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-electric) 50%, var(--violet) 100%);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Single source of truth for motion. scrollIntoView({behavior:'auto'}) defers to
   this property rather than meaning "instant", so honouring the preference in JS
   alone would silently do nothing. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  font-size: 17px;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Two columns on desktop, one on mobile. The rail is sticky so the composer and
   the app buttons stay reachable while reading a long list of greetings. */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 44px; align-items: start; }
.layout main { min-width: 0; }
/* margin-top matches the sticky offset so the rail sits the same distance from
   the header at rest as it does from the viewport edge once it starts floating.
   Without it the rail butts against the header bar until you scroll. */
.rail { position: sticky; top: 24px; margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }

@media (max-width: 940px) {
  .layout { grid-template-columns: 1fr; gap: 0; }
  .rail { position: static; margin: 36px 0 0; }
  .wrap { max-width: 760px; }
}

/* ── Site header ── */
.site-header { background: var(--gradient); padding: 14px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-header img { height: 26px; display: block; }
.site-header a.get-app {
  color: var(--white); font-size: 14px; font-weight: 600; text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.6); padding: 7px 14px; border-radius: 50px; white-space: nowrap;
}
.site-header a.get-app:hover { background: rgba(255,255,255,0.14); }

/* ── Breadcrumb ── */
.crumbs { font-size: 14px; color: var(--text-muted); padding: 18px 0 0; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ── Article ── */
article { padding: 8px 0 56px; }

h1 { font-size: clamp(28px, 5.5vw, 40px); font-weight: 700; line-height: 1.2; margin: 14px 0 20px; }

/* The answer block. This is the featured-snippet target: it states the date in
   one short sentence, immediately after the h1, with nothing between them. */
.answer {
  background: var(--surface); border-left: 5px solid var(--blue-electric);
  border-radius: 0 14px 14px 0; padding: 20px 22px; margin: 0 0 28px;
}
.answer .date { font-size: clamp(24px, 4.5vw, 32px); font-weight: 700; color: var(--blue-dark); line-height: 1.25; display: block; }
.answer .sub { font-size: 16px; color: var(--text-muted); margin-top: 6px; }

/* ── The action inside the answer box ──
   One button at a time: "Trimite o urare" on the day, "Amintește-mi" otherwise.
   The :has() rule collapses the row when every button in it is hidden, so the
   answer box never grows a blank strip on a page where neither action applies. */
.answer-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.answer-cta:not(:has(> :not([hidden]))) { display: none; }
.acta {
  font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  border: none; border-radius: 50px; padding: 12px 24px; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.acta[hidden] { display: none; }
.acta-today { background: var(--blue-dark); color: var(--white); }
.acta-today:hover { background: #0d4a94; color: var(--white); }
.acta-remind { background: var(--white); color: var(--blue-dark); box-shadow: inset 0 0 0 2px var(--blue-dark); }
.acta-remind:hover { background: #e8ecff; }

/* ── Reminder dialog ── */
html.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-veil { position: absolute; inset: 0; background: rgba(20, 24, 50, 0.55); }
.modal-card {
  position: relative; background: var(--white); border-radius: 18px; padding: 28px 26px 22px;
  width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(15, 20, 45, 0.28);
}
.modal-x {
  position: absolute; top: 8px; right: 10px; width: 44px; height: 44px;
  background: none; border: none; font-size: 30px; line-height: 1;
  color: var(--text-muted); cursor: pointer;
}
.modal-card h2 { font-size: 21px; font-weight: 700; margin: 0 0 8px; padding-right: 36px; line-height: 1.3; }
.modal-lead { font-size: 15px; color: var(--text-muted); margin: 0 0 18px; }
.remind-form label {
  display: block; font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 6px;
}
.remind-form input[type="email"] {
  width: 100%; font-family: inherit; font-size: 16px; padding: 13px 15px; color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.remind-form input[type="email"]:focus { outline: none; border-color: var(--blue-electric); background: var(--white); }
.remind-error { font-size: 14px; color: #b3261e; margin: 9px 0 0; }
.remind-error[hidden] { display: none; }
.remind-submit {
  width: 100%; margin-top: 12px; font-family: inherit; font-size: 16px; font-weight: 700;
  padding: 13px 20px; min-height: 48px; border: none; border-radius: 50px;
  background: var(--blue-dark); color: var(--white); cursor: pointer;
}
.remind-submit:hover { background: #0d4a94; }
.remind-submit:disabled { opacity: 0.6; cursor: default; }
/* Positioned off-screen rather than display:none, because some bots skip fields
   they can tell are not rendered — and a bot filling this in is the whole point. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.remind-done[hidden] { display: none; }
.remind-done-h { font-size: 17px; font-weight: 700; color: #2e7d32; margin: 0 0 6px; }
.modal-app { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.modal-app[hidden] { display: none; }
.modal-app p { font-size: 15px; color: var(--text-muted); margin: 0 0 12px; }
.modal-app a {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  min-height: 48px; padding: 12px 20px; border-radius: 50px; background: var(--gradient);
  color: var(--white); font-weight: 700; font-size: 15px; text-decoration: none;
}
.modal-fine { font-size: 13px; color: var(--text-muted); margin: 16px 0 0; line-height: 1.5; }
.modal-fine a { color: var(--blue-dark); }

article p { margin: 0 0 18px; }
article h2 { font-size: clamp(20px, 3.5vw, 25px); font-weight: 700; margin: 36px 0 14px; line-height: 1.3; }
article a { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 2px; }
article a:hover { color: var(--violet); }

/* ── Name chips ── */
.names { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 20px; }
.names a, .names span {
  display: inline-block; background: var(--surface); border: 1px solid var(--border);
  border-radius: 50px; padding: 7px 15px; font-size: 15px; font-weight: 500;
  text-decoration: none; color: var(--text);
}
.names a:hover { border-color: var(--blue-electric); color: var(--blue-dark); }

.chips-stacked { list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin: 0 0 20px; }
.chips-stacked li { background: var(--surface); border: 1px solid var(--border); border-radius: 50px; padding: 7px 16px; font-size: 15px; font-weight: 500; }

/* ── Facts strip ── */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 26px 0; }
.fact { background: var(--surface); border-radius: 12px; padding: 14px 16px; }
.fact .k { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); font-weight: 600; }
.fact .v { font-size: 17px; font-weight: 700; margin-top: 3px; }

/* ── Filter pills ──
   These only hide and show messages that are already in the HTML. Every greeting
   is present in the served markup whether or not a filter is active, because the
   greetings are the reason the page ranks at all. */
.filters { margin: 4px 0 24px; display: flex; flex-direction: column; gap: 12px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-right: 4px; }
.pill {
  font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  background: var(--white); color: var(--text); border: 1px solid var(--border);
  border-radius: 50px; padding: 8px 15px; min-height: 40px;
}
.pill:hover { border-color: var(--blue-electric); }
.pill.is-active { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--white); }

.result-count { font-size: 14px; color: var(--text-muted); margin: 0 0 16px; }

/* ── Messages ── */
.msg {
  border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px;
  margin: 0 0 12px; background: var(--white); cursor: pointer;
}
.msg:hover { border-color: var(--blue-electric); }
.msg.is-selected { border-color: var(--blue-dark); box-shadow: 0 0 0 1px var(--blue-dark); background: var(--surface); }
.msg[hidden] { display: none; }
.msg p { font-size: 17px; margin: 0 0 10px; }
.msg-meta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.msg-meta .tag {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--blue-dark); background: var(--surface); padding: 3px 10px; border-radius: 50px;
}
.msg.is-selected .msg-meta .tag { background: var(--white); }
.msg-meta .pick { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--blue-dark); }

.no-results { background: var(--surface); border-radius: 14px; padding: 20px; color: var(--text-muted); }

/* ── Composer (in the rail) ── */
.composer { border: 1px solid var(--border); border-radius: 16px; padding: 18px; background: var(--white); }
.composer h2 { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
.composer textarea {
  width: 100%; min-height: 150px; resize: vertical; font-family: inherit; font-size: 16px;
  line-height: 1.55; color: var(--text); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; background: var(--surface);
}
.composer textarea:focus { outline: none; border-color: var(--blue-electric); background: var(--white); }
.composer-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.composer-actions button, .composer-actions a {
  font-family: inherit; font-size: 15px; font-weight: 700; padding: 12px 18px; border-radius: 50px;
  border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; min-height: 46px; width: 100%;
}
.btn-copy { background: var(--blue-dark); color: var(--white); }
.btn-copy:hover { background: #0d4a94; }
.btn-copy.done { background: #2e7d32; }
.btn-wa { background: #25D366; color: #06301b; }
.btn-wa:hover { background: #1eb257; }
.composer-hint { font-size: 13px; color: var(--text-muted); margin: 10px 0 0; text-align: center; }

/* ── App call to action ── */
.cta { background: var(--gradient); border-radius: 18px; padding: 26px 22px; text-align: center; color: var(--white); }
.cta h2 { font-size: clamp(19px, 3.4vw, 24px); margin: 0 0 8px; color: var(--white); }
.cta p { color: rgba(255,255,255,0.86); margin: 0 0 18px; font-size: 15px; }
.cta-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cta-buttons a {
  background: var(--white); color: var(--blue-dark); font-weight: 700; font-size: 15px;
  padding: 11px 20px; border-radius: 50px; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; min-height: 46px; flex: 1 1 auto;
}
.cta-buttons a.outline { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55); }
.rail .cta-buttons { flex-direction: column; }

/* ── Year table for moveable feasts ── */
.years { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0 0 22px; }
.years li { display: flex; gap: 14px; align-items: baseline; background: var(--surface); border-radius: 10px; padding: 10px 14px; }
.years .y { font-weight: 700; color: var(--blue-dark); min-width: 52px; }

/* ── Related links ── */
.related { margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border); }
.related h2 { font-size: 19px; margin: 0 0 14px; }
.related ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.related a { color: var(--blue-dark); text-decoration: none; font-weight: 500; }
.related a:hover { text-decoration: underline; }

/* ── Directory ── */
.dir-month { margin: 0 0 30px; }
.dir-month h2 { margin: 0 0 12px; }
.dir-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.dir-list a, .dir-list .plain { display: block; padding: 11px 14px; background: var(--surface); border-radius: 10px; text-decoration: none; color: var(--text); font-weight: 500; }
.dir-list a:hover { background: #e8ecff; color: var(--blue-dark); }
.dir-list a strong { color: var(--blue-dark); }
.dir-list .d { color: var(--text-muted); font-weight: 400; font-size: 15px; }

/* ── Footer ── */
footer { border-top: 1px solid var(--border); padding: 26px 0 40px; text-align: center; }
footer img { height: 22px; opacity: 0.65; margin-bottom: 10px; }
footer p { font-size: 13px; color: var(--text-muted); margin: 0 0 6px; }
footer a { color: var(--blue-electric); text-decoration: none; font-size: 13px; }
footer a:hover { text-decoration: underline; }