/**
 * Dripex modern reset.
 * Phase 1: Foundation & Design System.
 *
 * Loads after dripex-variables.css and before dripex-typography.css /
 * child-style.css (see dripex_enqueue_styles() in functions.php) — that
 * load order, not !important, is what lets the button rule below beat
 * Storefront's Customizer-generated inline CSS: both rules target
 * `.button` at equal specificity, so whichever prints later in <head>
 * wins the cascade on its own.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

/* Storefront's Customizer button color has no theme_mod override set, so it
   falls back to its own default of #96588a (purple) — replace with the
   Dripex navy until later phases give buttons their final per-context
   styling (CTA red, WooCommerce add-to-cart, etc.). */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.widget a.button {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

/* Default hover: dark fill + white text. Every component that restyles a <button> must set BOTH the
   background and the text colour in its own :hover rule — setting only one leaves this default (or
   Storefront's own, which is different) showing through and can leave the label unreadable. */
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.widget a.button:hover {
  background-color: var(--gray-800);
  border-color: var(--gray-800);
  color: var(--color-white);
}

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* Modern container max-width: upgrade Storefront's default 66.5em (1064px) to 1280px */
.col-full {
  max-width: var(--container-max, 1280px);
  box-sizing: border-box;
}

/* Storefront sets `.site { overflow-x: hidden }` (and on body) to stop
   horizontal scroll. Any overflow other than `visible` makes the element a
   scroll container — overflow-y then computes to `auto` — and every
   `position: sticky` descendant binds to that container, which never scrolls,
   so nothing inside #page could ever stick. `clip` still prevents horizontal
   overflow but does NOT create a scroll container. (Browsers without
   `overflow: clip` ignore this and keep Storefront's rule: sticky just stays
   inert there, as before.) */
.site {
  overflow-x: clip;
}