/*
 * Mountain Diary — how a form control looks on this site (Site\Frame\SiteStyles); nothing here
 * decides behaviour, the drop-down component (drop-down.js) does that. Colours come from the
 * design tokens and follow the colour mode; the drop-down arrows are drawn in the text colour.
 * The admin bar is left out by the selectors themselves rather than reset afterwards.
 *
 * 1. Text fields, text areas and drop-downs: field tone, border, focus ring
 * 2. The native drop-down: arrow and states - the whole answer whenever the
 *    component has not run (no script, an error earlier on the page, a
 *    control that opted out)
 * 3. The drop-down component: button, arrow, open list
 * 4. Check boxes and radio buttons
 * 5. The date picker: the calendar, its days, Today and Done
 */

/* 1. Text fields, text areas and drop-downs */

/* One look for every place a visitor types or picks: the light field tone, a
   strong border, the site radius. The component's button is listed too, so a
   drop-down looks the same before and after the component takes over.
   The html body prefix and the :not() parts lift specificity above page-level
   rules that set these colours with !important. The header search box and
   the hidden clipboard of the comment editor keep their own look, and so
   does the caption strip under each photo of the adventure form (Trip photo
   handler); the admin bar draws its own controls. :where() leaves those
   last two exclusions out of the specificity, so they change nothing else. */
/* stylelint-disable-next-line selector-not-notation -- one :not() per part keeps the selector's specificity */
html body :is(input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select, .md-sel-button):not(.search-field-top):not(.ql-clipboard):where(:not(#wpadminbar *):not(.md-gallery-card-caption)) {
    background-color: var(--md-field) !important;
    color: var(--md-text) !important;
    border: 1px solid var(--md-border-strong) !important;
    border-radius: var(--md-radius) !important;
    box-shadow: none !important;
}

/* stylelint-disable-next-line selector-not-notation -- one :not() per part keeps the selector's specificity */
html body :is(input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select):not(.search-field-top):not(.ql-clipboard):where(:not(#wpadminbar *):not(.md-gallery-card-caption)):focus {
    border-color: var(--md-primary) !important;
    outline: 2px solid var(--md-field-ring) !important;
    outline-offset: 1px;
}

html body :is(input, textarea):where(:not(#wpadminbar *))::placeholder {
    color: var(--md-text-muted) !important;
    opacity: 1;
}

/* 2. The native drop-down */

/* appearance none removes the built-in arrow, so the arrow is drawn here:
   two thin strokes painted with gradients in the current text colour, so it
   follows the colour mode - an image could only carry one fixed colour.
   The html body prefix lifts specificity above page-level rules such as
   body.md-form-page .acf-input select, which set a background shorthand with
   !important. A shorthand resets background-image, which would erase the
   arrow, so this rule has to outrank it.
   multiple and size mark a list box rather than a drop-down and get no arrow;
   the admin bar keeps the browser's own drop-down. */
/* stylelint-disable-next-line selector-not-notation -- one :not() per part keeps the selector's specificity */
html body select:not([multiple]):not([size]):where(:not(#wpadminbar *)) {
    /* stylelint-disable-next-line property-no-vendor-prefix -- for the browsers that still need the prefix */
    -webkit-appearance: none !important;
    /* stylelint-disable-next-line property-no-vendor-prefix -- for the browsers that still need the prefix */
    -moz-appearance: none !important;
    appearance: none !important;
    background-image:
        linear-gradient(45deg, transparent calc(50% - 0.8px), currentcolor calc(50% - 0.8px), currentcolor calc(50% + 0.8px), transparent calc(50% + 0.8px)),
        linear-gradient(-45deg, transparent calc(50% - 0.8px), currentcolor calc(50% - 0.8px), currentcolor calc(50% + 0.8px), transparent calc(50% + 0.8px)) !important;
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50% !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
    padding-right: 32px !important;
    cursor: pointer;
}

/* A disabled control should read as disabled, arrow included. */
/* stylelint-disable-next-line no-descending-specificity -- the order of the snippet, which the cascade keeps */
html body select:disabled {
    opacity: 0.6;
    cursor: default;
}

/* 3. The drop-down component */

/* Once enhanced, the native control is out of sight but still in the form
   and still the value that gets read. It is not hidden with display none,
   because a control that is not rendered cannot be measured, and the button
   copies its measurements. */
html body select.md-sel-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

.md-sel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* The box of the button - size, type, spacing, border shape - is copied from
   the native control at runtime; its colours come from section 1. The rules
   here cover what makes it a button rather than a select: the native control
   keeps 32 px on the right for an arrow painted behind its text, the button
   holds its arrow inside, so its right padding is the arrow's 12 px inset. */
.md-sel-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding-right: 12px;
    cursor: pointer;
    text-align: left;
    background-image: none;
}

.md-sel-button:focus-visible {
    outline: 2px solid var(--md-focus);
    outline-offset: 1px;
}

.md-sel-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The arrow is a mask filled with the text colour; the mask image only
   gives the shape. */
.md-sel-arrow {
    flex: none;
    width: 12px;
    height: 8px;
    background-color: currentcolor;
    /* stylelint-disable-next-line property-no-vendor-prefix -- for the browsers that still need the prefix */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 8px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 8px;
    transition: transform 0.15s;
}

.md-sel-open .md-sel-arrow { transform: rotate(180deg); }

.md-sel-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    background: var(--md-dropdown);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius);
    box-shadow: var(--md-shadow);
}

.md-sel-up .md-sel-list {
    top: auto;
    bottom: 100%;
    margin: 0 0 4px;
}

.md-sel-list[hidden] { display: none; }

.md-sel-option {
    padding: 7px 10px;
    border-radius: var(--md-radius-sm);
    font-size: 15px;
    line-height: 1.3;
    color: var(--md-text);
    cursor: pointer;
}

/* The pointer and the keyboard share one highlight, so what the arrow keys
   are on and what the mouse is over can never disagree. */
.md-sel-option.md-sel-active { background: var(--md-hover-tint); }

.md-sel-option[aria-selected="true"] { font-weight: 600; }

.md-sel-option[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
}

.md-sel-disabled .md-sel-button {
    opacity: 0.6;
    cursor: default;
}

@media (width <= 768px) {
    .md-sel-list { max-height: 50vh; }

    .md-sel-option {
        padding: 10px 12px;
        font-size: 16px;
    }
}

/* 4. Check boxes and radio buttons */

/* The browser draws them; the tick and the dot take the primary colour. */
html body :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--md-primary);
}

/* 5. The date picker */

/* ACF's date fields open the calendar of jQuery UI, painted by ACF's own
   theme (assets/inc/datepicker/jquery-ui.min.css of the plugin): white, grey
   day cells, blue under the pointer, and arrows cut from image sprites in
   fixed colours. Here the calendar takes the look of the drop-down lists -
   the drop-down tone in a hairline, the site radius and shadow - and the
   colours of the mode: the days are quiet text that tints under the pointer,
   today is ringed in the accent colour, the chosen day is filled with the
   primary colour, and the arrows are masks filled with the text colour.
   #ui-datepicker-div is the one calendar jQuery UI keeps on a page and
   .acf-ui-datepicker the wrapper ACF puts round it. The id outranks every
   class selector of that theme; only the two states that ACF's own input
   stylesheet marks !important - today under the pointer, today chosen -
   answer in kind. */
.acf-ui-datepicker #ui-datepicker-div {
    padding: 8px;
    background: var(--md-dropdown);
    color: var(--md-text);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius);
    box-shadow: var(--md-shadow);
}

.acf-ui-datepicker #ui-datepicker-div .ui-datepicker-header {
    background: none;
    border: 0;
    color: var(--md-text);
}

/* Month and year side by side, also once the drop-down component (drop-down.js)
   has wrapped each of them in a box of full width. */
.acf-ui-datepicker #ui-datepicker-div .ui-datepicker-title {
    display: flex;
    gap: 6px;
}

.acf-ui-datepicker #ui-datepicker-div .ui-datepicker-title > .md-sel {
    flex: 1 1 0;
    min-width: 0;
}

.acf-ui-datepicker #ui-datepicker-div :is(.ui-datepicker-prev, .ui-datepicker-next) {
    background: none;
    border: 0;
    border-radius: var(--md-radius-sm);
    color: var(--md-text);
    cursor: pointer;
}

.acf-ui-datepicker #ui-datepicker-div :is(.ui-datepicker-prev, .ui-datepicker-next):hover {
    background: var(--md-hover-tint);
}

/* The arrow is a mask filled with the text colour; the mask image only
   gives the shape. */
.acf-ui-datepicker #ui-datepicker-div :is(.ui-datepicker-prev, .ui-datepicker-next) .ui-icon {
    background: currentcolor;
    /* stylelint-disable-next-line property-no-vendor-prefix -- for the browsers that still need the prefix */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M6 1.5 1.5 6 6 10.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 8px 12px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M6 1.5 1.5 6 6 10.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 8px 12px;
}

.acf-ui-datepicker #ui-datepicker-div .ui-datepicker-next .ui-icon {
    /* stylelint-disable-next-line property-no-vendor-prefix -- for the browsers that still need the prefix */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M2 1.5 6.5 6 2 10.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M2 1.5 6.5 6 2 10.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The theme frames every table in a hairline; the grid of days stands free. */
.acf-ui-datepicker #ui-datepicker-div table {
    border: 0;
}

.acf-ui-datepicker #ui-datepicker-div th {
    color: var(--md-text-muted);
    font-weight: 600;
}

/* Every day first, then its states in rising order: under the pointer,
   today, the chosen day. */
.acf-ui-datepicker #ui-datepicker-div td :is(a, span).ui-state-default {
    padding: 0.35em 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--md-radius-sm);
    color: var(--md-text);
    text-align: center;
}

.acf-ui-datepicker #ui-datepicker-div td a.ui-state-hover {
    background: var(--md-hover-tint);
}

.acf-ui-datepicker #ui-datepicker-div td a.ui-state-highlight {
    border-color: var(--md-accent);
    color: var(--md-accent-text);
    font-weight: 600;
}

.acf-ui-datepicker #ui-datepicker-div td a.ui-state-active {
    background: var(--md-primary);
    border-color: var(--md-primary);
    color: var(--md-on-primary);
}

.acf-ui-datepicker #ui-datepicker-div td a.ui-state-highlight.ui-state-hover {
    background: var(--md-hover-tint) !important;
    border-color: var(--md-accent) !important;
    color: var(--md-accent-text) !important;
    font-weight: 600 !important;
}

.acf-ui-datepicker #ui-datepicker-div td a.ui-state-highlight.ui-state-active {
    background: var(--md-primary) !important;
    border-color: var(--md-primary) !important;
    color: var(--md-on-primary) !important;
    font-weight: 600 !important;
}

/* Today and Done: small outlined buttons under a hairline */
.acf-ui-datepicker #ui-datepicker-div .ui-datepicker-buttonpane {
    background: none;
    border-top: 1px solid var(--md-border);
}

.acf-ui-datepicker #ui-datepicker-div .ui-datepicker-buttonpane button {
    background: none;
    border: 1px solid var(--md-border-strong);
    border-radius: var(--md-radius-sm);
    color: var(--md-text);
    opacity: 1;
}

.acf-ui-datepicker #ui-datepicker-div .ui-datepicker-buttonpane button:hover {
    background: var(--md-hover-tint);
}