/*
 * Ready-made parts (proper/parts/README.md). Restyle freely to the plan: set
 * the --p-* colours, fonts and radius from the page's own palette, and add
 * your own rules after this file. Keep the behaviour and the accessibility.
 */
:root {
  --p-font: inherit;
  --p-text: #1A1F27;
  --p-muted: #5A6472;
  --p-ground: #FFFFFF;
  --p-raised: #F3F5F8;
  --p-line: rgba(20, 24, 31, .14);
  --p-accent: #0F5FA8;
  --p-on-accent: #FFFFFF;
  --p-radius: 12px;
  --p-star: #F5B301;
  --p-star-off: rgba(127, 127, 127, .35);
  --p-ease: cubic-bezier(.23, 1, .32, 1);
}

.pt-enquiry, .pt-enquiry *, .pt-reviews *, .pt-map *, .pt-nav, .pt-nav *, .pt-palette * { box-sizing: border-box; }
.pt-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons used by the parts */
.pt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .7em 1.25em;
  border: 1px solid var(--p-accent); border-radius: 999px;
  background: var(--p-accent); color: var(--p-on-accent);
  font: 600 1rem/1.2 var(--p-font); text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--p-ease), filter 160ms ease;
}
.pt-btn:active { transform: scale(.97); }
.pt-btn-ghost { background: transparent; color: var(--p-accent); }
@media (hover: hover) and (pointer: fine) { .pt-btn:hover { filter: brightness(1.08); } }
.pt-btn:focus-visible, .pt-enquiry :focus-visible, .pt-reviews :focus-visible, .pt-map :focus-visible, .pt-palette :focus-visible, .pt-menu-btn:focus-visible {
  outline: 2px solid var(--p-accent); outline-offset: 3px;
}

/* ---------- Enquiry box ---------- */
.pt-enquiry {
  display: grid; gap: 14px;
  padding: clamp(18px, 3vw, 28px);
  border-radius: var(--p-radius);
  background: var(--p-ground); color: var(--p-text);
  border: 1px solid var(--p-line);
  font-family: var(--p-font);
}
.pt-enquiry-title { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.pt-row { display: grid; gap: 14px; }
@media (min-width: 560px) { .pt-row { grid-template-columns: 1fr 1fr; } }
.pt-field { display: grid; gap: 6px; }
.pt-field label { font-size: .9375rem; font-weight: 600; }
.pt-opt { font-weight: 400; color: var(--p-muted); }
.pt-field input, .pt-field select, .pt-field textarea {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--p-line); border-radius: calc(var(--p-radius) * .6);
  background: var(--p-raised); color: var(--p-text);
  font: 400 1rem/1.4 var(--p-font);
}
.pt-field textarea { min-height: 110px; resize: vertical; }
.pt-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pt-actions .pt-btn { flex: 1 1 200px; }
.pt-note { margin: 0; font-size: .875rem; color: var(--p-muted); }

/* ---------- Review panel: one per platform ---------- */
.pt-reviews { display: grid; gap: 16px; color: var(--p-text); font-family: var(--p-font); }
.pt-reviews-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.pt-platform { margin: 0; font-weight: 700; font-size: 1.125rem; }
.pt-score { display: flex; align-items: center; gap: 8px; margin: 0; }
.pt-score b { font-size: 1.5rem; line-height: 1; }
.pt-count { color: var(--p-muted); font-size: .9375rem; }
.pt-all { margin-left: auto; color: var(--p-accent); font-weight: 600; text-underline-offset: 3px; }
.pt-stars {
  --rating: 5;
  display: inline-block; width: 5.5em; height: 1.1em; vertical-align: -.15em; flex: none;
  background: linear-gradient(90deg, var(--p-star) calc(var(--rating) / 5 * 100%), var(--p-star-off) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E") 0 0 / 1.1em 1.1em repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E") 0 0 / 1.1em 1.1em repeat-x;
}
.pt-review-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 340px); gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 4px 2px 10px;
}
.pt-review-row::-webkit-scrollbar { display: none; }
.pt-review {
  scroll-snap-align: start;
  display: grid; align-content: start; gap: 10px;
  margin: 0; padding: 18px;
  border-radius: var(--p-radius);
  background: var(--p-ground); border: 1px solid var(--p-line);
}
.pt-review-top { display: flex; align-items: center; gap: 10px; }
.pt-avatar {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--p-accent); color: var(--p-on-accent); font-weight: 700;
}
.pt-name { display: block; font-weight: 700; }
.pt-date { display: block; font-size: .8125rem; color: var(--p-muted); }
.pt-review blockquote { margin: 0; }
.pt-review blockquote p { margin: 0; line-height: 1.5; }
.pt-row-ctl { display: flex; gap: 10px; }
.pt-row-ctl button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--p-line); background: var(--p-ground); color: var(--p-text);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.pt-row-ctl button:disabled { opacity: .35; cursor: default; }

/* ---------- Map section: the picture from map.mjs, and the way there ---------- */
.pt-map { display: grid; gap: 18px; color: var(--p-text); font-family: var(--p-font); }
@media (min-width: 900px) { .pt-map { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 32px; } }
.pt-map-pic { position: relative; display: block; overflow: hidden; border-radius: var(--p-radius); border: 1px solid var(--p-line); }
.pt-map-pic img { display: block; width: 100%; height: auto; transition: transform 600ms var(--p-ease); }
@media (hover: hover) and (pointer: fine) { .pt-map-pic:hover img { transform: scale(1.02); } }
.pt-map-cta {
  position: absolute; left: 12px; bottom: 12px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--p-ground); color: var(--p-text);
  font-weight: 600; font-size: .9375rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.pt-map-info { display: grid; gap: 10px; align-content: start; }
.pt-map-info h2, .pt-map-info p { margin: 0; }
.pt-addr { font-style: normal; line-height: 1.5; }

/* ---------- Phone menu: the button and the panel. The header's own look is the page's. ---------- */
.pt-menu-btn { display: none; }
@media (max-width: 760px) {
  .pt-menu-btn {
    display: inline-grid; place-items: center; gap: 5px; align-content: center;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px;
    background: transparent; color: inherit; cursor: pointer;
  }
  .pt-menu-btn i { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 220ms var(--p-ease); }
  .pt-menu-btn[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
  .pt-menu-btn[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
  .pt-nav {
    position: fixed; left: 0; right: 0; top: var(--pt-header-h, 64px); z-index: 50;
    padding: 12px 20px 20px;
    background: var(--p-ground); color: var(--p-text);
    border-bottom: 1px solid var(--p-line);
    box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .35);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 200ms ease, transform 240ms var(--p-ease), visibility 0s linear 240ms;
  }
  .pt-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease, transform 240ms var(--p-ease); }
  .pt-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .pt-nav a { display: flex; align-items: center; min-height: 48px; color: inherit; text-decoration: none; font-weight: 600; }
}

/* ---------- Reveal: rises once into view (only when the script runs) ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 640ms var(--p-ease), transform 640ms var(--p-ease); transition-delay: calc(var(--d, 0) * 70ms); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Palette switch ---------- */
.pt-palette {
  position: fixed; right: 12px; bottom: 44px; z-index: 60;
  display: flex; align-items: center; gap: 4px;
  padding: 4px 4px 4px 12px; border-radius: 999px;
  background: rgba(20, 22, 26, .88); color: #F3F5F8;
  font: 600 .75rem/1 var(--p-font); box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.pt-palette button {
  min-width: 36px; min-height: 36px; border: 0; border-radius: 999px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.pt-palette button[aria-pressed="true"] { background: #F3F5F8; color: #14161A; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pt-btn, .pt-map-pic img, .pt-menu-btn i, .pt-nav { transition: none !important; }
}