/* ==================================================================
   yearly-calendar.css  (added 2026-10-06)
   Loaded only on the /YYYY-calendar/ pages. Same colours and controls
   as the month pages and the calendar makers. Every class starts with
   "yc" so nothing clashes with style.css or Tailwind.
   ================================================================== */

.yc-page { max-width: 1180px; margin: 0 auto; padding: 14px 16px 40px; color: #1f2937; }

/* ---------------- Title and years ---------------- */
.yc-top { margin: 6px 0 16px; }
.yc-h1 { font-size: 2.1rem; font-weight: 800; color: #111827; line-height: 1.2; margin: 0 0 6px; }
.yc-lead { font-size: 1rem; line-height: 1.6; color: #374151; margin: 0 0 12px; max-width: 820px; }
.yc-years { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.yc-yr { display: inline-block; padding: 4px 12px; border: 1px solid #d1d5db; border-radius: 999px; background: #fff;
    color: #1e3a8a; font-weight: 600; font-size: 0.9rem; text-decoration: none; line-height: 1.5; }
.yc-yr:hover { background: #eef2ff; border-color: #c7d2fe; }
.yc-yr.is-on { background: #1e3a8a; border-color: #1e3a8a; color: #fff; }
.yc-yr-arrow { border-color: transparent; background: none; }

/* ---------------- Options ---------------- */
.yc-tool { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px 16px 16px; }
.yc-bar { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin: 0 0 14px; }
.yc-field { display: flex; align-items: center; gap: 8px; }
.yc-flbl { font-size: 0.85rem; font-weight: 700; color: #374151; }
.yc-bar select { font: inherit; font-size: 0.9rem; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #111827; }
.yc-seg { display: flex; gap: 4px; }
.yc-seg label { display: flex; align-items: center; gap: 5px; font-size: 0.88rem; background: #fff; border: 1px solid #d1d5db;
    border-radius: 6px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.yc-seg label.is-on, .yc-seg label:has(input:checked) { border-color: #1e3a8a; background: #eef2ff; }
.yc-seg input { accent-color: #1e3a8a; margin: 0; }
.yc-bar select:focus-visible, .yc-seg label:focus-within, .yc-btn:focus-visible { outline: 2px solid #1e3a8a; outline-offset: 1px; }

/* ---------------- The calendar card ---------------- */
.yc-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 18px 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
.yc-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    border-bottom: 3px solid #1e3a8a; padding-bottom: 6px; margin-bottom: 14px; }
.yc-card-year { font-size: 2rem; font-weight: 800; color: #1e3a8a; line-height: 1.2; }
.yc-card-sub { font-size: 0.95rem; font-weight: 700; color: #6b7280; }
.yc-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; align-items: start; }

/* One small month (same markup on the page, in the PDF and in print) */
.ycm { min-width: 0; }
.ycm-t { font-weight: 800; font-size: 1rem; margin: 0 0 4px; line-height: 1.4; }
.ycm-t a { color: #1e3a8a; text-decoration: none; }
.ycm-t a:hover { text-decoration: underline; }
.ycm-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; font-size: 0.82rem; row-gap: 1px; }
.ycm-wd { font-size: 0.68rem; font-weight: 700; color: #4b5563; padding: 2px 0 3px; border-bottom: 1px solid #e5e7eb; margin-bottom: 2px; }
.ycm-wd.ycm-wkd { color: #9ca3af; }
.ycm-d { line-height: 1.95; border-radius: 4px; color: #111827; font-variant-numeric: tabular-nums; }
.ycm-we { background: #f1f5f9; }
.ycm-hol { color: #b91c1c; font-weight: 800; background: #fee2e2; }
.ycm-d.is-today { box-shadow: inset 0 0 0 2px #2563eb; font-weight: 800; }
.ycm-h { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.74rem; line-height: 1.4; color: #374151; }
.ycm-h li { padding: 1px 0; }
.ycm-h b { color: #b91c1c; display: inline-block; min-width: 1.7em; }

.yc-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.78rem; color: #4b5563; margin: 14px 0 2px; }
.yc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.yc-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.yc-sw-hol { background: #fee2e2; border: 1px solid #fca5a5; }
.yc-sw-we { background: #f1f5f9; border: 1px solid #cbd5e1; }
.yc-sw-today { box-shadow: inset 0 0 0 2px #2563eb; }
.yc-nodata { font-size: 0.85rem; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 6px 10px; margin: 10px 0 0; }

/* ---------------- Buttons ---------------- */
.yc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.yc-btn { font: inherit; font-size: 0.95rem; font-weight: 600; padding: 10px 18px; border-radius: 6px; cursor: pointer;
    border: 1px solid #1e3a8a; background: #fff; color: #1e3a8a; }
.yc-btn:hover { background: #eef2ff; }
.yc-btn-primary { background: #1e3a8a; color: #fff; }
.yc-btn-primary:hover { background: #172e6e; }
.yc-btn[disabled] { opacity: 0.6; cursor: wait; }
.yc-status { font-size: 0.88rem; font-weight: 600; color: #1f2937; min-height: 1.3em; margin: 8px 2px 0; }
.yc-tip { font-size: 0.85rem; color: #4b5563; margin: 4px 2px 0; }
.yc-tip a { color: #1e3a8a; text-decoration: underline; }

/* ---------------- Article ---------------- */
.yc-content { max-width: 880px; margin: 34px auto 0; line-height: 1.65; }
.yc-sec { border-top: 1px solid #e5e7eb; padding-top: 22px; margin-top: 26px; }
.yc-sec:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.yc-sec h2 { font-size: 1.45rem; font-weight: 700; color: #111827; margin: 0 0 10px; scroll-margin-top: 16px; }
.yc-sec h3 { font-size: 1.08rem; font-weight: 700; color: #111827; margin: 18px 0 6px; }
.yc-sec p { margin: 0 0 10px; }
.yc-sec a { color: #1e3a8a; text-decoration: underline; }
.yc-small { font-size: 0.9rem; color: #4b5563; }
.yc-callout { background: #eff6ff; border-left: 4px solid #1e3a8a; border-radius: 0 8px 8px 0; padding: 10px 14px; }
.yc-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 12px; }
.yc-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.yc-table th, .yc-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.yc-table thead th { background: #f9fafb; font-weight: 700; color: #111827; }
.yc-table tfoot th, .yc-table tfoot td { font-weight: 700; border-top: 2px solid #d1d5db; }
.yc-facts th { width: 45%; font-weight: 600; color: #374151; }
.yc-num td:not(:first-child), .yc-num th:not(:first-child) { text-align: right; }
.yc-nowrap { white-space: nowrap; }
.yc-k-season td:last-child { color: #047857; }
.yc-k-clock td:last-child { color: #6d28d9; }
.yc-list { margin: 0 0 12px; padding-left: 22px; list-style: disc; }
.yc-list li { margin: 4px 0; }
.yc-steps { margin: 0 0 12px; padding-left: 22px; list-style: decimal; }
.yc-steps li { margin: 6px 0; }

.yc-countries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.yc-country { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 16px; background: #fff; }
.yc-country h3 { margin: 0 0 6px; color: #1e3a8a; }
.yc-country ul { list-style: none; margin: 0 0 8px; padding: 0; font-size: 0.92rem; }
.yc-country li { padding: 3px 0; border-bottom: 1px solid #f3f4f6; }
.yc-cd { display: inline-block; min-width: 4.2em; font-weight: 700; color: #b91c1c; }
.yc-country .yc-small { font-size: 0.82rem; margin: 0; }

.yc-monthlinks { list-style: none; padding: 0; margin: 6px 0 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; }

.yc-faq details { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; margin: 0 0 10px; }
.yc-faq summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; position: relative; }
.yc-faq summary::-webkit-details-marker { display: none; }
.yc-faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    font-size: 1.4rem; color: #1e3a8a; line-height: 1; }
.yc-faq details[open] summary::after { content: "\2212"; }
.yc-faq summary:focus-visible { outline: 2px solid #1e3a8a; outline-offset: 2px; border-radius: 10px; }
.yc-faq summary h3 { display: inline; margin: 0; font-size: 1rem; font-weight: 600; color: #111827; line-height: 1.45; }
.yc-faq .yc-faq-a { padding: 0 16px 14px; color: #374151; }
.yc-faq .yc-faq-a p { margin: 0; }

.yc-pin figure { margin: 10px auto 0; max-width: 360px; text-align: center; }
.yc-pin img { width: 100%; height: auto; border: 1px solid #e5e7eb; border-radius: 6px; }
.yc-pin figcaption { font-size: 0.82rem; color: #6b7280; margin-top: 6px; }

/* ---------------- Phones and tablets ---------------- */
@media (max-width: 1023px) {
    .yc-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
    .yc-page { padding: 10px 12px 32px; }
    .yc-h1 { font-size: 1.65rem; }
    .yc-years { gap: 5px; }
    .yc-yr { padding: 3px 10px; font-size: 0.85rem; }
    .yc-tool { padding: 12px 10px 14px; }
    .yc-card { padding: 12px 10px 10px; }
    .yc-months { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
    .yc-bar { gap: 10px 14px; }
    .yc-field { flex-wrap: wrap; }
    .yc-actions .yc-btn { flex: 1 1 auto; }
    .yc-countries { grid-template-columns: 1fr; }
    .yc-monthlinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .yc-table { font-size: 0.88rem; }
    .yc-table th, .yc-table td { padding: 7px 8px; }
}
@media (max-width: 339px) {
    .yc-months { grid-template-columns: 1fr; }
}

/* ==================================================================
   THE SHEET: one page for the PDF, PNG and print, drawn at real paper
   size (96 px per inch). Sizes are in em, so A4 and Letter scale alike.
   Line heights are generous because html2canvas draws text a little low.
   ================================================================== */
.ycx { position: absolute; left: -40000px; top: 0; }
.ycs { position: relative; background: #fff; color: #111827; box-sizing: border-box; overflow: hidden;
    font-family: Inter, Arial, Helvetica, sans-serif; display: flex; flex-direction: column; padding: 2.4em 2.7em 1.4em; line-height: 1.3; }
.ycs * { box-sizing: border-box; }
.ycs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; flex: none;
    border-bottom: 0.22em solid #1e3a8a; padding-bottom: 0.35em; margin-bottom: 1em; }
.ycs-title { font-size: 2.7em; font-weight: 800; color: #1e3a8a; line-height: 1.35; padding-bottom: 0.08em; white-space: nowrap; }
.ycs-sub { font-size: 1.15em; font-weight: 700; color: #6b7280; padding-bottom: 0.35em; white-space: nowrap; }
.ycs-months { flex: 1; min-height: 0; display: grid; gap: 1em 1.7em; }
.ycs .ycm { display: flex; flex-direction: column; min-height: 0; }
.ycs .ycm-t { font-size: 1.15em; margin: 0 0 0.25em; line-height: 1.35; padding-bottom: 0.1em; }
.ycs .ycm-t a { color: #1e3a8a; }
.ycs .ycm-g { flex: 1; min-height: 0; font-size: 0.95em; grid-auto-rows: minmax(0, 1fr); row-gap: 0.1em; }
.ycs .ycm-wd { font-size: 0.72em; padding: 0.15em 0 0.35em; line-height: 1.3; }
.ycs .ycm-d { line-height: 1.5; display: flex; align-items: center; justify-content: center; padding-bottom: 0.1em; }
.ycs .ycm-h { display: none; }
.ycs-hlist { flex: none; display: grid; gap: 0.15em 1.6em; font-size: 0.78em; color: #374151; line-height: 1.45;
    border-top: 1px solid #e5e7eb; margin-top: 1em; padding-top: 0.6em; }
.ycs-hlist b { color: #b91c1c; display: inline-block; min-width: 3.6em; }
.ycs-foot { flex: none; font-size: 0.72em; color: #6b7280; text-align: right; margin-top: 0.5em; letter-spacing: 0.02em; }
/* html2canvas (PDF and PNG) draws text about 0.6em lower than the browser does.
   Measured 2026-10-06: without this the day numbers sat 26% low in their boxes,
   with it they sit where the browser puts them. Print is drawn by the browser,
   so it does not get the is-h2c class. */
.ycs.is-h2c .ycm-d { padding-bottom: 1.2em; }
.ycs.is-h2c .ycs-head { padding-bottom: 0.9em; }

/* ---------------- Print ---------------- */
#ycPrint { display: none; }
@media print {
    body > *:not(#ycPrint) { display: none !important; }
    #ycPrint { display: block !important; }
    #ycPrint .ycs { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}