/* Typefaces (Chris, 12 Oct 2026): Fredoka for headings, Nunito Sans for text, both hosted here (SIL Open Font Licence in assets/fonts). */
@font-face { font-family: "Fredoka"; src: url(fonts/fredoka-latin.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url(fonts/nunito-sans-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
:root { --font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --serif: "Fredoka", "Trebuchet MS", system-ui, sans-serif; }
h1, h2, h3, .brand-name, .foot-name { letter-spacing: 0; }
/* bestchristmasmarkets.co.uk: the finder, market facts and lists. Colours come from site.yml (theme). */
:root { --gold: #c8922b; }
@media (max-width: 30rem) { .brand-name { font-size: 1.12rem; } .brand svg { height: 1.7rem; } }

/* first screen: the finder on a deep red band */
.tool-hero { background: var(--accent); background: linear-gradient(160deg, #7a1726 0%, var(--accent) 55%, #a32a35 100%); color: #fff; padding: 2.2rem 0 2.4rem; }
.tool-hero h1 { color: #fff; margin: .1em 0 .3em; max-width: 20ch; font-size: clamp(1.9rem, 5.2vw, 3.2rem); }
.tool-hero .kicker { color: #f3d9a4; }
.tool-hero .lede { color: rgba(255, 255, 255, .92); margin-bottom: 1.4rem; }
.finder { background: #fff; color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.2rem 1rem; max-width: 52rem; }
main > .finder { background: var(--panel); box-shadow: none; margin-bottom: 1.4rem; }
.f-row { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.finder label { display: block; font-size: .84rem; font-weight: 600; color: var(--muted); }
.finder input, .finder select, .filter select { display: block; width: 100%; margin-top: .3rem; font: inherit; font-size: 1.05rem; padding: .6rem .7rem; min-height: 2.9rem; border: 1.5px solid #cdbfb2; border-radius: 10px; background: #fff; color: var(--ink); }
.finder input[name=postcode] { text-transform: uppercase; }
.f-quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; align-items: center; }
.chip { font: inherit; font-size: .92rem; font-weight: 600; min-height: 2.75rem; padding: .45rem .95rem; border-radius: 999px; border: 1.5px solid var(--accent); background: #fff; color: var(--accent); cursor: pointer; }
.chip[aria-pressed=true] { background: var(--accent); color: #fff; }
.f-quick .btn { margin-left: auto; min-height: 2.75rem; }
.f-msg { margin: .7rem 0 0; min-height: 1.2em; }
.filter select { display: inline-block; width: auto; margin: 0 0 0 .4rem; }
#finder-results { max-width: 52rem; margin-top: 1rem; }
.tool-hero #finder-results { color: var(--ink); }
#finder-results:empty { display: none; }
.results { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.results li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); align-items: baseline; }
.results li:last-child { border-bottom: 0; }
.results a { font-weight: 600; font-size: 1.05rem; }
.results .meta { grid-column: 1; font-size: .88rem; color: var(--muted); }
.results .dist { grid-row: 1 / span 2; grid-column: 2; font-size: .9rem; color: var(--muted); white-space: nowrap; text-align: right; }
.results-head { background: #fff; border-radius: var(--radius) var(--radius) 0 0; margin: 0; padding: .9rem 1.1rem .2rem; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; }
.results-head + .results { border-radius: 0 0 var(--radius) var(--radius); }
.results-more { margin: .8rem 0 0; }
.tool-hero .results-more a, .tool-hero .results-more { color: #fff; }

/* states */
.ok { color: var(--ok); font-weight: 600; }
.wait { color: var(--warn); }
.off { color: var(--muted); }
.pill { display: inline-block; font-size: .78rem; font-weight: 700; border-radius: 99px; padding: .12rem .6rem; white-space: nowrap; }
.pill.open { background: #e3f2e6; color: var(--ok); }
.pill.shut { background: #fbe9e7; color: var(--bad); }
.pill.tbc { background: var(--warn-bg); color: var(--warn); }

/* cards and lists */
.card.market h3 { margin-bottom: .15rem; font-size: 1.15rem; }
.card.market p { margin: 0 0 .25rem; }
.card.market .where { font-size: .9rem; color: var(--muted); }
.regions .card h3 { margin-bottom: .2rem; }
.regions .card p { margin: 0; }
.regions .card ol { margin: .4rem 0 0; padding-left: 1.2rem; }
.cols { columns: 16rem; column-gap: 2rem; padding-left: 1.1rem; }
.cols li { break-inside: avoid; margin-bottom: .35rem; }
.az { list-style: none; padding: 0; columns: 22rem; column-gap: 2.5rem; }
.az li { break-inside: avoid; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.az-jump a { display: inline-block; min-width: 2.2rem; min-height: 2.2rem; line-height: 2.2rem; text-align: center; border-radius: 8px; background: var(--panel); text-decoration: none; font-weight: 600; margin: 0 .15rem .3rem 0; }
.rank { padding-left: 1.4rem; }
.rank li { margin-bottom: .4rem; }
.best { list-style: none; counter-reset: best; padding: 0; max-width: 48rem; }
.best > li { counter-increment: best; position: relative; padding: 1rem 0 1rem 3.4rem; border-bottom: 1px solid var(--line); }
.best > li::before { content: counter(best); position: absolute; left: 0; top: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--serif); font-weight: 600; font-size: 1.15rem; display: grid; place-items: center; }
.best h3 { margin: 0 0 .15rem; }
.best p { margin: 0 0 .3rem; }
table.markets th[scope=row] { font-weight: 600; min-width: 11rem; }
table.markets td { min-width: 7rem; }

/* one market */
.live { display: inline-block; background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; padding: .6rem 1rem; font-weight: 600; font-size: 1.08rem; margin: 0 0 1.2rem; }
.live.is-open { background: #e3f2e6; border-color: var(--ok); }
.live.is-shut { background: var(--warn-bg); border-color: var(--warn); }
.keyfacts { margin: 0 0 1.5rem; max-width: 48rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); font-size: 1.0625rem; }
.keyfacts th { width: 9.5rem; font-weight: 600; color: var(--muted); font-size: .9rem; padding: .95rem 0 .85rem 1.2rem; }
.keyfacts td { padding: .85rem 1.2rem; }
.keyfacts td > p { margin: .4rem 0 0; }
@media (max-width: 34rem) { .keyfacts tr { display: block; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); } .keyfacts tr:last-child { border-bottom: 0; } .keyfacts th, .keyfacts td { display: block; width: auto; padding: 0; border: 0; } }
ul.hours { list-style: none; margin: 0; padding: 0; }
ul.hours li { display: flex; flex-wrap: wrap; gap: 0 .6rem; justify-content: space-between; max-width: 24rem; padding: .1rem 0; }
.pc { white-space: nowrap; font-weight: 600; }
.maplink { white-space: nowrap; font-size: .9rem; margin-left: .3rem; }
.checked { max-width: 48rem; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 1.6rem; background: var(--panel); }
.checked h2 { font-size: 1.15rem; margin: 0 0 .4rem; }
.checked ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
.checked p:last-child { margin: 0; }
.full h3 { margin-top: 1.8em; }
.author { float: right; width: 17rem; max-width: 45%; margin: .3rem 0 1rem 1.6rem; }
main .author img { width: 100%; max-width: 100%; height: auto; border-radius: 22px; box-shadow: var(--shadow); }
.author figcaption { text-align: center; }
@media (max-width: 40rem) { .author { float: none; width: 60%; max-width: 16rem; margin: 0 auto 1.2rem; } }
.home main > .facts { margin-top: 1.6rem; }
.vote { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem .6rem; margin: 2.2rem 0 0; max-width: 48rem; }
.vote h2 { margin-top: 0; font-size: 1.3rem; }
.vote-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.vote .chip b { display: inline-block; margin-left: .35rem; padding: 0 .45rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-variant-numeric: tabular-nums; }
.vote .chip[aria-pressed=true] b { background: rgba(255, 255, 255, .2); color: #fff; }

/* ---- The look (Chris, 12 Oct 2026: "Poster", in festive colours): solid colour blocks, thick outlines and hard offset shadows,
   like a printed fair poster. Red header, green band behind the finder, gold for the main button. */
:root { --radius: 6px; --shadow: 5px 5px 0 var(--ink); --green: #17603f; }
body { background: #fffaf0; }
.site-head { background: var(--accent); border-bottom: 3px solid var(--ink); backdrop-filter: none; }
.brand, .nav a, .nav-toggle { color: #fff; }
.brand svg { background: #fff; border-radius: 6px; padding: 2px; }
.nav a:hover, .nav a[aria-current] { border-bottom-color: var(--gold); }
.nav a.nav-cta { background: var(--gold); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.tool-hero { position: relative; background-color: var(--green); background-image: radial-gradient(circle, rgba(255,255,255,.5) 1.5px, transparent 2px), radial-gradient(circle, rgba(255,255,255,.3) 1px, transparent 1.5px), radial-gradient(circle, rgba(255,255,255,.35) 2px, transparent 2.5px); background-size: 97px 113px, 61px 71px, 151px 131px; background-position: 12px 20px, 40px 60px, 80px 8px; color: #fff; padding-bottom: 3.6rem; }
.tool-hero h1 { color: #fff; font-size: clamp(2.2rem, 6.5vw, 4rem); max-width: 16ch; text-shadow: 3px 3px 0 rgba(0, 0, 0, .25); }
.tool-hero .kicker { color: #f6d98a; }
.tool-hero .lede { color: #fff; }
.tool-hero .results-more, .tool-hero .results-more a { color: #fff; }
.finder, .results, .keyfacts, .card, .facts li,
.checked, .vote { border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.results-head { border: 2px solid var(--ink); border-bottom: 0; }
.grid { gap: 1.6rem; }
a.card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--accent); }
.btn, .chip { border-radius: 6px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn.ghost { box-shadow: 3px 3px 0 var(--ink); background: #fff; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.chip { color: var(--ink); }
.chip[aria-pressed=true] { background: var(--accent); color: #fff; }
.live { border: 2px solid var(--ink); border-left-width: 10px; border-radius: 6px; background: #fff; }
h2 { display: inline-block; background: var(--green); color: #fff; padding: .2em .6em .2em .5em; border-radius: 4px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
h2::before { content: "\2605"; color: #f6c744; margin-right: .4em; font-size: .8em; vertical-align: .08em; }
.checked h2, .vote h2, .foot-col h2 { display: block; background: none; color: inherit; padding: 0; border: 0; box-shadow: none; }
.checked h2::before, .foot-col h2::before { content: none; }
.foot-col h2 { color: #fff; }
.site-foot { border-top: 0; position: relative; }
@media (max-width: 52rem) { .nav { background: var(--accent); } }

/* festive trim: a string of lights under the header, snow settling at the foot of the green band, a candy-cane edge on the
   footer and on the "opens in" line. All drawn in CSS, nothing to download. */
.site-head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26'%3E%3Cpath d='M0 3 Q30 17 60 3 T120 3' fill='none' stroke='%231f2421' stroke-width='1.6'/%3E%3Cg stroke='%231f2421' stroke-width='1.2'%3E%3Cellipse cx='15' cy='13' rx='4' ry='5.5' fill='%23e23b3b'/%3E%3Cellipse cx='30' cy='16' rx='4' ry='5.5' fill='%23f6c744'/%3E%3Cellipse cx='45' cy='13' rx='4' ry='5.5' fill='%23fff6d8'/%3E%3Cellipse cx='75' cy='13' rx='4' ry='5.5' fill='%234aa3e0'/%3E%3Cellipse cx='90' cy='16' rx='4' ry='5.5' fill='%23e23b3b'/%3E%3Cellipse cx='105' cy='13' rx='4' ry='5.5' fill='%23f6c744'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0 / 120px 26px; pointer-events: none; }
.tool-hero { padding-top: 3rem; }
.tool-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='30' viewBox='0 0 240 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 V16 Q20 2 45 12 T95 10 Q120 0 150 12 T205 9 Q225 4 240 16 V30 Z' fill='%23fffaf0'/%3E%3C/svg%3E") repeat-x 0 0 / 240px 30px; pointer-events: none; }
.crumbs { padding-top: 2.1rem; }
.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(135deg, #d62f2f 0 10px, #fff 10px 20px); border-bottom: 2px solid var(--ink); }
.live, .live.is-open, .live.is-shut { border: 2px solid var(--ink); border-radius: 6px; padding-left: calc(1rem + 12px); background: repeating-linear-gradient(135deg, #d62f2f 0 6px, #fff 6px 12px) left / 12px 100% no-repeat, #fff; }
.live.is-open { background-color: #e3f2e6; }
.live.is-shut { background-color: var(--warn-bg); }
.facts b { color: var(--accent); }
.best > li::before { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); border-radius: 6px; }
.vote { background: #eef6ef; }
@media (max-width: 30rem) { .tool-hero h1 { font-size: 2.1rem; } :root { --shadow: 4px 4px 0 var(--ink); } }

/* phones: form fields must never be wider than their card (iOS gives date fields their own minimum width) */
.f-row > * { min-width: 0; }
.finder input, .finder select { min-width: 0; max-width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.finder input[type=date] { min-height: 2.9rem; line-height: 1.6; }
.finder input[type=date]::-webkit-date-and-time-value { text-align: left; min-height: 1.6em; }
.finder select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f2421' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.2rem; }
.finder label small { font-weight: 400; }

/* maps, quick answers, today and weekend pages */
.map-wrap { margin: 0 0 1.6rem; max-width: 60rem; }
.map { height: 24rem; max-height: 70vh; border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--panel); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.map.tall { height: min(78vh, 46rem); max-height: none; }
.map.open { display: block; }
.map-wrap figcaption { margin-top: .7rem; line-height: 1.9; }
.key { display: inline-block; margin-right: .8rem; white-space: nowrap; }
.key i { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--ink); margin-right: .35rem; vertical-align: -.05em; }
.map-pin { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: #fff; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--ink); font: 700 .85rem/1.45rem var(--font); text-align: center; cursor: pointer; }
.maplibregl-popup-content { font: .92rem/1.45 var(--font); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--ink); padding: .7rem .9rem; }
ol.sites { columns: 12rem; padding-left: 1.4rem; max-width: 48rem; }
.answers { max-width: 48rem; margin: 0 0 1.6rem; }
.answers h3 { margin: 1.1em 0 .15em; font-size: 1.08rem; }
.answers p { margin: 0; }
.quick { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 1.4rem; }
.kicker a { color: inherit; }
.stale { background: var(--warn-bg); border: 2px solid var(--ink); border-radius: 6px; padding: .6rem .9rem; }
.nav a, .brand-name { white-space: nowrap; }
@media (min-width: 52.01rem) and (max-width: 68rem) { .nav { gap: .2rem .85rem; } .nav a { font-size: .88rem; } .nav a.nav-cta { padding: .45rem .7rem; margin-left: .1rem; } .brand-name { font-size: 1.12rem; } .brand svg { height: 1.7rem; } }

/* /numbers/: headline figures and the Saturday bar chart */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 1.4rem 0 2rem; }
.stats p { margin: 0; background: #fff; border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem 1rem; font-size: .95rem; line-height: 1.35; }
.stats strong { display: block; font-family: var(--serif); font-size: 2.2rem; line-height: 1.1; color: var(--accent); }
table.bars { width: 100%; max-width: 40rem; border-collapse: collapse; margin: 1rem 0 1.6rem; }
table.bars caption { text-align: left; font-size: .86rem; color: var(--muted); padding-bottom: .5rem; }
table.bars th { width: 4.2rem; text-align: right; font-weight: 600; padding: .2rem .7rem .2rem 0; white-space: nowrap; }
table.bars td { padding: .2rem 0; display: flex; align-items: center; gap: .5rem; }
table.bars td span { display: block; height: 1.25rem; background: var(--green); border-radius: 3px; }

/* hotel map (partner embed, loaded on request) */
.hotel-map { background: var(--accent-soft); border: 2px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 1.4rem; }
.hotel-map p { margin: 0 0 .7rem; }
.hotel-map small { display: block; color: var(--muted); margin-top: .6rem; }
.hotel-map iframe { display: block; width: 100%; height: 26rem; border: 0; border-radius: var(--radius); background: #fff; }
/* Affiliate tag: two words beside the link; the full explanation is on /affiliate-disclosure/ */
a.aff { font-size: .74rem; color: var(--muted); text-decoration: none; white-space: nowrap; border: 1px solid currentColor; border-radius: 99px; padding: 0 .45rem; opacity: .75; vertical-align: .08em; }
a.aff:hover { opacity: 1; }
/* Hotel map before it is opened: a map-like panel with the button on it, the same size as the map that replaces it */
.hotel-map-view { display: grid; place-items: center; height: 26rem; border-radius: var(--radius); border: 1px solid rgba(0, 0, 0, .12);
  background-color: #f1ece2;
  background-image: linear-gradient(115deg, transparent 46%, #fff 46%, #fff 49%, transparent 49%), linear-gradient(28deg, transparent 58%, #fff 58%, #fff 60.5%, transparent 60.5%),
    linear-gradient(160deg, transparent 30%, #f7dc8e 30%, #f7dc8e 32%, transparent 32%), radial-gradient(circle at 78% 24%, #cfe3c3 0 13%, transparent 13.5%), radial-gradient(circle at 16% 78%, #b9d6ee 0 17%, transparent 17.5%); }
.hotel-map small { display: block; text-align: right; font-size: .76rem; margin-top: .35rem; }
@media (max-width: 600px) { .hotel-map-view, .hotel-map iframe { height: 22rem; } }