/* The layout and controls are defined in style.css for all four sites. */
html[data-country] {
  --green: var(--nav);
  --paper: var(--surface);
  --orange: var(--accent);
}

html[data-country] .sidebar {
  background: linear-gradient(160deg, var(--nav-light), var(--nav) 68%);
}
html[data-country] .brand {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: normal;
}
html[data-country] .country-wordmark {
  line-height: 1.05;
}
html[data-country] .brand-icon {
  flex: 0 0 20px;
  height: 20px;
  background: var(--thread);
  clip-path: var(--cut);
}
html[data-country] .brand-dot,
html[data-country] .note-sun,
html[data-country] .suggestion-open,
html[data-country] .departure-locate {
  color: var(--thread);
}
html[data-country] .nav-label {
  font-weight: 500;
}
html[data-country] .nav-item {
  color: #f6faff;
}
html[data-country] .nav-item.active,
html[data-country] .nav-item:hover,
html[data-country] .nav-item small {
  background: rgb(255 255 255 / 17%);
}
html[data-country] .suggestion-open {
  color: #fff;
  background: rgb(255 255 255 / 9%);
  border-color: rgb(255 255 255 / 34%);
}
html[data-country] .suggestion-open:hover {
  background: rgb(255 255 255 / 17%);
}
html[data-country] .hero {
  background: var(--sky) var(--sky-pattern);
}
html[data-country] .hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 7px;
  background: var(--ribbon);
}
html[data-country] .hero-art {
  object-fit: contain;
  object-position: right bottom;
}
html[data-country] :is(.eyebrow, h1 em, .card-bottom .event-link) {
  color: var(--accent);
}
html[data-country] :is(.hero p, .hero-foot, .collection-heading > p) {
  color: var(--muted);
}
html[data-country] :is(.filter-panel, .card, .explore-card, .calendar-grid .day, .suggestion-dialog-body) {
  background-color: var(--panel);
}
html[data-country] :is(.trip-region, .collection-panel-art, .collection-panel-themes .explore-card) {
  border-color: var(--line);
  background-color: var(--panel);
}
html[data-country] :is(.trip-region, .collection-panel-themes .explore-card) {
  background-color: var(--field);
}
html[data-country] :is(.filters select, .quick-filters button, .view-switch, .tag-chip) {
  background-color: var(--field);
}
html[data-country] :is(.view-switch button.selected, .tag-chip.selected, .quick-filters button[aria-pressed="true"]) {
  background-color: var(--sky);
  color: var(--ink);
}
.country-card-art {
  position: absolute;
  inset: 0;
  background: var(--sky) no-repeat;
  background-size: 200% 200%;
}
.country-card-art[data-season]:not([data-season="undated"]) {
  background-image: url("/design/card-seasons.webp");
}
.country-card-art[data-season="spring"] { background-position: left top; }
.country-card-art[data-season="summer"] { background-position: right top; }
.country-card-art[data-season="autumn"] { background-position: left bottom; }
.country-card-art[data-season="winter"] { background-position: right bottom; }
.country-card-art[data-season="undated"] {
  background: url("/event-card-undated.webp") center 58% / cover no-repeat;
}
.country-card-art > .country-card-sun {
  position: absolute;
  top: 4%;
  right: 15.8%;
  width: auto;
  height: 46%;
}
.country-card-pictogram {
  position: absolute;
  right: 11%;
  bottom: 19%;
  height: 42%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.country-card-pictogram::before {
  content: "";
  --icon-size: max(var(--icon-width), var(--icon-height));
  width: calc(100% * var(--icon-width) / var(--icon-size));
  height: calc(100% * var(--icon-height) / var(--icon-size));
  background: url("/event-card-pictograms.webp") no-repeat;
  background-size: calc(100% * 1619 / var(--icon-width)) calc(100% * 972 / var(--icon-height));
  background-position:
    calc(100% * var(--icon-x) / (1619 - var(--icon-width)))
    calc(100% * var(--icon-y) / (972 - var(--icon-height)));
  filter: drop-shadow(0 1px 1px rgb(28 46 53 / 73%));
}

/* Each drawing has its own bounds because the sheet is not an even grid. */
html[data-country="pl"] .country-card-art[data-category="harvest"] {
  --icon-x: 34; --icon-y: 9; --icon-width: 301; --icon-height: 344;
}
html[data-country="pl"] .country-card-art[data-category="food"] {
  --icon-x: 346; --icon-y: 24; --icon-width: 304; --icon-height: 315;
}
html[data-country="pl"] .country-card-art[data-category="pastoral"] {
  --icon-x: 662; --icon-y: 8; --icon-width: 288; --icon-height: 335;
}
html[data-country="pl"] .country-card-art[data-category="crafts"] {
  --icon-x: 963; --icon-y: 7; --icon-width: 307; --icon-height: 330;
}
html[data-country="pl"] .country-card-art[data-category="customs"] {
  --icon-x: 1286; --icon-y: 5; --icon-width: 284; --icon-height: 351;
}
html[data-country="hu"] .country-card-art[data-category="harvest"] {
  --icon-x: 39; --icon-y: 365; --icon-width: 256; --icon-height: 283;
}
html[data-country="hu"] .country-card-art[data-category="food"] {
  --icon-x: 310; --icon-y: 388; --icon-width: 340; --icon-height: 254;
}
html[data-country="hu"] .country-card-art[data-category="pastoral"] {
  --icon-x: 650; --icon-y: 355; --icon-width: 295; --icon-height: 300;
}
html[data-country="hu"] .country-card-art[data-category="crafts"] {
  --icon-x: 974; --icon-y: 358; --icon-width: 283; --icon-height: 301;
}
html[data-country="hu"] .country-card-art[data-category="customs"] {
  --icon-x: 1288; --icon-y: 371; --icon-width: 308; --icon-height: 269;
}
html[data-country="bg"] .country-card-art[data-category="harvest"] {
  --icon-x: 6; --icon-y: 658; --icon-width: 313; --icon-height: 304;
}
html[data-country="bg"] .country-card-art[data-category="food"] {
  --icon-x: 317; --icon-y: 692; --icon-width: 348; --icon-height: 251;
}
html[data-country="bg"] .country-card-art[data-category="pastoral"] {
  --icon-x: 705; --icon-y: 654; --icon-width: 163; --icon-height: 306;
}
html[data-country="bg"] .country-card-art[data-category="crafts"] {
  --icon-x: 930; --icon-y: 681; --icon-width: 328; --icon-height: 278;
}
html[data-country="bg"] .country-card-art[data-category="customs"] {
  --icon-x: 1274; --icon-y: 644; --icon-width: 330; --icon-height: 320;
}