/* Shared booking-style native dropdowns. Page palettes apply to controls and popovers. */
:root{--select-paper:#fffdf8;--select-ink:#283b35;--select-line:#b9c7b4;--select-accent:#48683f;--select-hover:#eaf0e4;--select-selected:#e2ebdb;--select-muted:#64715f}
.blog-index{--select-paper:#fffdf8;--select-ink:#302b40;--select-line:#cec6df;--select-accent:#6650b8;--select-hover:#f1ecfa;--select-selected:#e6ddf7;--select-muted:#70657e}
.wk-page{--select-paper:#fffdf8;--select-ink:#2c3d31;--select-line:#bfccb7;--select-accent:#4d6a42;--select-hover:#edf2e5;--select-selected:#dfeaca;--select-muted:#63715a}
/* Keep real select controls for form validation, keyboard navigation and mobile pickers. */
body main select:not([multiple]):not([size]){
  --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='9' fill='%23eeeee7'/%3E%3Cpath d='m11 14 5 5 5-5' fill='none' stroke='%23464c43' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  appearance:none;-webkit-appearance:none;
  width:100%;min-width:0;box-sizing:border-box;font:400 15px/1.5 Arial,sans-serif;color:var(--select-ink);border:1px solid var(--select-line);min-height:54px;padding:13px 54px 13px 15px;border-radius:10px;
  background:var(--select-paper) var(--select-chevron) no-repeat right 10px center;
  border-color:var(--select-line);box-shadow:0 2px 3px color-mix(in srgb,var(--select-ink) 2%,transparent);
  cursor:pointer;transition:border-color .16s,box-shadow .16s,background-color .16s;
}
body main select:not([multiple]):not([size]):hover:not(:disabled){border-color:var(--select-accent);background-color:var(--select-hover)}
body main select:not([multiple]):not([size]):focus-visible{outline:2px solid var(--select-accent);outline-offset:3px;border-color:var(--select-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--select-accent) 8%,transparent)}
body main select:not([multiple]):not([size]):disabled{opacity:.6;cursor:wait}
body main select:not([multiple]):not([size]):required:invalid{color:var(--select-muted)}
body main select:not([multiple]):not([size]) option{color:var(--select-ink);background:var(--select-paper)}
/* Enhanced native popovers in supporting browsers; the styled control above is the fallback. */
@supports (appearance:base-select){
  body main select:not([multiple]):not([size]),body main select:not([multiple]):not([size])::picker(select){appearance:base-select}
  body main select:not([multiple]):not([size]){display:flex;align-items:center;gap:12px;padding:10px 10px 10px 15px;background-image:none;white-space:normal;overflow-wrap:anywhere}
  body main select:not([multiple]):not([size])::picker-icon{
    content:"";flex:0 0 32px;width:32px;height:32px;margin-inline-start:auto;
    background:var(--select-chevron) no-repeat center;background-color:var(--select-hover);border-radius:9px;transition:rotate .18s;
  }
  body main select:not([multiple]):not([size]):open{border-color:var(--select-accent);background-color:var(--select-hover)}
  body main select:not([multiple]):not([size]):open::picker-icon{rotate:180deg}
  body main select:not([multiple]):not([size])::picker(select){
    margin-block:7px;padding:6px;border:1px solid var(--select-line);border-radius:12px;
    width:anchor-size(width);min-width:0;max-width:calc(100vw - 40px);
    background:var(--select-paper);color:var(--select-ink);box-shadow:0 12px 32px color-mix(in srgb,var(--select-ink) 15%,transparent);
    max-height:min(340px,60dvh);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--select-line) var(--select-paper);
  }
  body main select:not([multiple]):not([size]) option{
    display:flex;align-items:center;gap:16px;min-height:44px;padding:11px 13px;
    border-radius:7px;font:400 15px/1.5 Arial,sans-serif;white-space:normal;overflow-wrap:anywhere;cursor:pointer;
  }
  body main select:not([multiple]):not([size]) option:hover,body main select:not([multiple]):not([size]) option:focus{background:var(--select-hover);color:var(--select-ink);outline:none}
  body main select:not([multiple]):not([size]) option:checked{background:var(--select-selected);color:var(--select-ink);font-weight:600}
  body main select:not([multiple]):not([size]) option::checkmark{order:1;margin-inline-start:auto;color:var(--select-accent);font-size:16px}
}
@media(prefers-reduced-motion:reduce){body main select:not([multiple]):not([size]),body main select:not([multiple]):not([size])::picker-icon{transition:none}}
@media(forced-colors:active){body main select:not([multiple]):not([size]){appearance:auto;background-image:none}body main select:not([multiple]):not([size])::picker-icon{all:revert}}

/* One control system for search, forms and filters. */
body :is(main,dialog) :is(input:not([type]),input[type="text"],input[type="search"],input[type="email"],input[type="tel"],input[type="url"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],select:not([multiple]):not([size]),textarea){
  box-sizing:border-box;width:100%;min-width:0;
  border:1px solid var(--select-line);border-radius:10px;
  background-color:var(--select-paper);color:var(--select-ink);
  font:400 16px/1.5 Arial,sans-serif;letter-spacing:normal;
  padding:13px 15px;box-shadow:0 2px 3px color-mix(in srgb,var(--select-ink) 2%,transparent);
  transition:border-color .16s,box-shadow .16s,background-color .16s;
}
body :is(main,dialog) :is(input:not([type]),input[type="text"],input[type="search"],input[type="email"],input[type="tel"],input[type="url"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],select:not([multiple]):not([size])){height:54px;min-height:54px}
body :is(main,dialog) textarea{height:auto;min-height:140px;resize:vertical}
body :is(main,dialog) :is(input,textarea)::placeholder{font:inherit;letter-spacing:inherit;color:var(--select-muted);opacity:1}
body :is(main,dialog) :is(input:not([type]),input[type="text"],input[type="search"],input[type="email"],input[type="tel"],input[type="url"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],textarea):hover:not(:disabled){border-color:var(--select-accent);background-color:var(--select-hover)}
body :is(main,dialog) :is(input,textarea,select):focus-visible{outline:2px solid var(--select-accent);outline-offset:3px;border-color:var(--select-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--select-accent) 8%,transparent)}
body main select:not([multiple]):not([size]){padding:10px 54px 10px 15px;white-space:nowrap}
@supports(appearance:base-select){body main select:not([multiple]):not([size]){padding:10px 10px 10px 15px}}
body main select:not([multiple]):not([size]) option{font-size:16px}
.blog-index .blog-filter label{gap:8px;font-size:13px;line-height:1.5}
@media(prefers-reduced-motion:reduce){body :is(main,dialog) :is(input,textarea,select){transition:none}}