/*
 * What Storefront's colour settings cannot reach.
 *
 * Storefront generates most of its palette from the Customizer, and
 * functions.php feeds that generator a dark set — so headers, footers, buttons,
 * links, payment boxes and order tables are already right before this file
 * loads. What is left is the roughly sixty rules Storefront hardcodes in its
 * own stylesheet, and they are almost all the same shape: a faint BLACK overlay
 * used as a border or a panel tint. On white that reads as a hairline; on our
 * ground it is invisible. Flipping those to white overlays is most of this file.
 *
 * Every colour comes from a --ms-* property defined in functions.php, so the
 * palette has one home. Keep this file short: each rule here is an override
 * that has to be re-checked when WooCommerce or Storefront updates.
 */

/* ---------------------------------------------------------------- structure */

/* Storefront paints these from its own stylesheet, ahead of the Customizer. */
body,
.site {
  background-color: var(--ms-ground);
}

hr,
.footer-widgets,
.hentry .entry-header,
.hentry .entry-taxonomy,
#comments .comments-title,
.widget .widget-title,
.widget .widgettitle,
h2 + h3,
.beta + h3,
.pagination,
.woocommerce-pagination {
  border-color: var(--ms-line);
}

hr {
  background-color: var(--ms-line);
}

blockquote {
  border-left-color: var(--ms-line-strong);
}

.wp-caption .wp-caption-text {
  border-bottom-color: var(--ms-line);
}

/* Panels: faint tints that need to lift off the ground rather than sink in. */
pre,
code,
kbd,
tt,
var,
#respond,
.error404 .site-content .widget_product_search,
.error404 .fourohfour-columns-2 .col-2,
.pagination .page-numbers li .page-numbers,
.woocommerce-pagination .page-numbers li .page-numbers {
  background-color: var(--ms-surface);
  color: var(--ms-text);
}

.error404 .fourohfour-columns-2 {
  border-color: var(--ms-line);
}

.pagination .page-numbers li a.page-numbers:hover,
.woocommerce-pagination .page-numbers li a.page-numbers:hover {
  background-color: var(--ms-line-strong);
}

/* ------------------------------------------------------------------- forms */

/*
 * Storefront gives inputs a light grey fill and dark text — the single most
 * visible thing left if this block is missing, because it puts a bright box on
 * every checkout, login and address form.
 */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select,
.input-text,
.select2-container .select2-selection--single,
.select2-dropdown {
  background-color: var(--ms-surface);
  color: var(--ms-text);
  border: 1px solid var(--ms-line);
  box-shadow: none;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.input-text:focus {
  background-color: var(--ms-surface);
  border-color: var(--ms-accent);
  outline: 2px solid transparent;   /* keeps a visible focus ring in forced-colours */
  outline-offset: 2px;
}

::placeholder {
  color: var(--ms-text-dim);
  opacity: 1;
}

/* select2 is WooCommerce's country/state picker — it is not Storefront's, so
   the theme's colours never reach it. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[data-selected="true"] {
  background-color: var(--ms-button);
  color: var(--ms-on-button);
}

/* --------------------------------------------------------- navigation */

.main-navigation ul li a:hover {
  color: var(--ms-heading);
}

.main-navigation ul.menu ul a:hover,
.main-navigation ul.menu ul li:hover > a,
.main-navigation ul.menu ul li.focus,
.main-navigation ul.nav-menu ul a:hover,
.secondary-navigation .menu ul a {
  background-color: var(--ms-surface);
}

/* ------------------------------------------------------------ woocommerce */

.single-product div.product .product_meta,
.product_list_widget li,
.widget_shopping_cart p.total,
table.cart td.actions .coupon,
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.tabs li,
.hentry .entry-content .woocommerce-MyAccount-navigation ul,
.hentry .entry-content .woocommerce-MyAccount-navigation ul li {
  border-color: var(--ms-line);
}

#payment .woocommerce-terms-and-conditions {
  background-color: var(--ms-surface);
  box-shadow: none;
  border: 1px solid var(--ms-line);
}

/* Order, cart and account tables: Storefront leans on borders that have gone
   invisible, so rows run together without this. */
table.shop_table,
table.shop_table th,
table.shop_table td,
table.shop_attributes th,
table.shop_attributes td,
.woocommerce-MyAccount-content table td,
.woocommerce-MyAccount-content table th {
  border-color: var(--ms-line);
}

/* The gallery zoom layer is painted solid white, which flashes on a dark page. */
.single-product div.product .woocommerce-product-gallery .zoomImg {
  background-color: var(--ms-ground);
}

.widget_price_filter .price_slider_wrapper .ui-widget-content {
  background-color: var(--ms-surface);
}

/*
 * The block cart and checkout.
 *
 * WooCommerce 11 writes these almost entirely in currentColor and inherited
 * backgrounds, so they follow the theme on their own. These few carry a literal
 * light value or lean on a border that has disappeared.
 */
.wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-cart-items__row,
.wc-block-components-order-summary-item,
.wc-block-checkout__form fieldset,
.wc-block-components-radio-control__option {
  border-color: var(--ms-line);
}

.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea {
  background-color: var(--ms-surface);
  color: var(--ms-text);
  border-color: var(--ms-line);
}

.wc-block-components-sidebar,
.wc-block-components-order-summary {
  background-color: var(--ms-surface);
}

/*
 * Autofill.
 *
 * Chrome paints a fixed pale-yellow fill over any field it completes, ignoring
 * the rule above. There is no property to switch it off; the accepted trick is
 * an inset shadow large enough to cover the field, plus a text-fill colour.
 * Without this, a returning buyer's whole address block turns bright at the
 * moment they reach payment.
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--ms-surface) inset;
  -webkit-text-fill-color: var(--ms-text);
  caret-color: var(--ms-text);
}

/* ----------------------------------------------------------------- polish */

/*
 * A visible keyboard focus ring. Storefront's is a faint outline tuned for a
 * white page, which disappears here — and the checkout is exactly where someone
 * tabbing through fields needs to see where they are.
 */
:focus-visible {
  outline: 2px solid var(--ms-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}