/* Seasonal countdown landing pages (ramadan.html, new-year.html).
   The page answers one question, "how long is left", so the answer sits in the
   first screen as a sentence and in the units people search with: days, weeks,
   months, hours. Everything else on the page is below it. */

.cd-hero {
  background: var(--primary);
  color: #fff;
  padding-block: clamp(32px, 6vw, 64px) clamp(28px, 5vw, 48px);
  padding-inline: max(16px, env(safe-area-inset-left, 0px));
}
.cd-hero-inner { max-width: 880px; margin-inline: auto; }

.cd-crumbs { font-size: var(--text-sm); color: var(--text-on-dark); margin: 0 0 14px; }
.cd-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.cd-hero h1 {
  color: #fff;
  font-size: clamp(30px, 6vw, 48px);
  line-height: 1.3;
  margin: 0 0 12px;
  text-wrap: balance;
}
.cd-answer {
  font-size: clamp(18px, 3.4vw, 24px);
  line-height: 1.6;
  margin: 0 0 24px;
  color: var(--text-on-dark);
}
.cd-answer strong { color: #fff; font-weight: 700; }
.cd-answer .cd-big {
  color: var(--accent-on-dark);
  font-size: 1.5em;
  font-variant-numeric: tabular-nums;
}

/* The four units people type into Google, each answered on its own line. */
.cd-units {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0 0 20px;
}
.cd-unit { background: var(--primary); padding: 14px 16px; min-width: 0; }
.cd-unit-label { display: block; font-size: var(--text-sm); color: var(--text-on-dark); margin-bottom: 4px; }
.cd-unit-value {
  display: block;
  font-size: clamp(17px, 2.6vw, 21px);
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
@media (max-width: 640px) { .cd-units { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cd-clock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin: 0 0 18px;
  font-variant-numeric: tabular-nums;
}
.cd-clock-label { font-size: var(--text-sm); color: var(--text-on-dark); }
.cd-clock-part { font-size: var(--text-md); color: #fff; }
.cd-clock-part b { font-size: 1.35em; font-weight: 600; margin-inline-end: 4px; }

/* How far along the wait is, from the last occurrence to the next one. */
.cd-track { margin: 0 0 18px; }
.cd-track-bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.cd-track-fill {
  display: block;
  height: 100%;
  width: var(--done, 0%);
  background: var(--accent);
  border-radius: inherit;
}
.cd-track-text { font-size: var(--text-sm); color: var(--text-on-dark); margin: 6px 0 0; }

.cd-target { font-size: var(--text-base); color: var(--text-on-dark); margin: 0; }
.cd-target strong { color: #fff; }

.cd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  transition: background var(--transition-fast);
}
.cd-btn:hover { background: rgba(255, 255, 255, 0.1); }
.cd-btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cd-btn.is-primary:hover { background: var(--accent-hover); }
.cd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Body */
.cd-body { max-width: 880px; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.cd-section { padding-block: var(--section-y-tight); border-bottom: 1px solid var(--border); }
.cd-section:last-child { border-bottom: 0; }
.cd-section h2 { font-size: clamp(22px, 3.6vw, 28px); margin: 0 0 12px; color: var(--primary-text); }
.cd-section h3 { font-size: var(--text-md); margin: 24px 0 8px; }
.cd-section p, .cd-section li { max-width: var(--measure); line-height: var(--leading-body); }
.cd-section .cd-note { font-size: var(--text-sm); color: var(--text-muted); }

.cd-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.cd-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cd-table th, .cd-table td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--border); }
.cd-table th { background: var(--bg); color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.cd-table tr:last-child td { border-bottom: 0; }
.cd-table td:not(:first-child) { font-variant-numeric: tabular-nums; }
@media (min-width: 641px) { .cd-table td:not(:first-child) { white-space: nowrap; } }
@media (max-width: 640px) { .cd-table th, .cd-table td { padding: 10px; } }
.cd-table tr.is-next td { background: var(--note-amber); }
.cd-table tr.is-next td:first-child { font-weight: 600; }

/* Related tools as a plain list of rows: name, one line, arrow. */
.cd-links { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); }
.cd-links li { max-width: none; border-bottom: 1px solid var(--border); }
.cd-links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  padding: 14px 4px;
  color: var(--text);
  text-decoration: none;
}
.cd-links a:hover .cd-link-name { color: var(--primary-text); text-decoration: underline; }
.cd-link-name { font-weight: 600; }
.cd-link-desc { grid-column: 1; font-size: var(--text-sm); color: var(--text-muted); }
.cd-link-arrow { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--accent-text); }

.cd-toast { font-size: var(--text-sm); color: var(--text-on-dark); margin: 10px 0 0; min-height: 1.5em; }

/* Birth-year pages: day and month to make the age exact. */
.by-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; max-width: 560px; }
.by-field { display: grid; gap: 6px; min-width: 0; }
.by-field label { font-size: var(--text-sm); font-weight: 600; }
.by-field input, .by-field select {
  min-height: 44px; padding: 8px 12px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); width: 100%;
}
.by-field input:focus-visible, .by-field select:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 1px; }
.by-submit { border: 0; }
.by-result { font-size: var(--text-md); font-weight: 600; color: var(--primary-text); min-height: 1.6em; margin: 14px 0 6px; }
@media (max-width: 520px) { .by-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .by-submit { grid-column: 1 / -1; justify-content: center; } }