/*
Theme Name:   Hello Elementor Child
Description:  IVFP child theme for the homepage and the shop: self-hosted Raleway and site-wide base styles. Everything else lives in Elementor, on the element it styles.
Template:     hello-elementor
Version:      0.3.0
Text Domain:  hello-elementor-child
*/

/* Raleway, self-hosted: loading it from fonts.googleapis.com sends every
   visitor's IP to Google, which German courts have ruled a GDPR breach.
   One variable file per subset and style covers every weight from 100 to 900. */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/raleway-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/raleway-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/raleway-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/raleway-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Both sites use this theme, so nothing here names a colour: each site's
   palette is its own Elementor variables. */
html { scroll-behavior: smooth; }

body {
  font-family: 'Raleway', sans-serif;
  /* Raleway's default old-style figures make dates and prices look uneven. */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

/* Footer at the bottom of the window on short pages (thank-you, empty cart).
   The admin bar pushes the page down by its height, so subtract it there. */
body { display: flex; flex-direction: column; min-height: 100vh; }
body.admin-bar { min-height: calc(100vh - 32px); }
@media (max-width: 782px) { body.admin-bar { min-height: calc(100vh - 46px); } }
body > .elementor-location-footer { margin-top: auto; }

/* The shop's palette where it has one; the fallback is Hello's own default,
   so the homepage, which has no shop- variables, keeps its links as they are. */
a { color: var(--shop-primary, #c36); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Carousel arrows. assets/js/carousel.js adds them next to each
   .shop-carousel, so there is no Elementor element to carry this CSS. */
.shop-carousel-wrap { position: relative; }
.shop-carousel-nav button {
  position: absolute;
  top: calc(50% - 6px);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--shop-border);
  border-radius: 50%;
  background-color: var(--shop-bg);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--shop-text) 15%, transparent);
  cursor: pointer;
}
.shop-carousel-nav button::before {
  content: "";
  width: 10px;
  height: 10px;
  border-style: solid;
  border-color: var(--shop-primary);
  border-width: 0 2px 2px 0;
}
.shop-carousel-prev { left: -22px; }
.shop-carousel-prev::before { transform: translateX(2px) rotate(135deg); }
.shop-carousel-next { right: -22px; }
.shop-carousel-next::before { transform: translateX(-2px) rotate(-45deg); }
/* Hello's reset paints every button pink (#c36) on hover and focus: the
   arrows stay white on focus and take the shop's tint on hover. */
.shop-carousel-nav button:focus { background-color: var(--shop-bg); }
.shop-carousel-nav button:hover { border-color: var(--shop-primary); background-color: var(--shop-bg-tint); }
@media (max-width: 767px) {
  .shop-carousel-prev { left: 4px; }
  .shop-carousel-next { right: 4px; }
}

/* Carousel autoplay: the line that fills until the next move, and its pause
   button, below the row (assets/js/carousel.js adds both). */
/* Above the row: its bottom padding (room for the cards' hover shadow) reaches
   under the line and would otherwise take the button's clicks. */
.shop-carousel-progress {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.shop-carousel-progress-track {
  position: relative;
  flex: 1;
  height: 1px;
  overflow: hidden;
  background-color: var(--shop-border);
}
.shop-carousel-progress-fill {
  position: absolute;
  inset: 0;
  background-color: var(--shop-primary);
  transform: scaleX(0);
  transform-origin: left;
}
.shop-carousel-progress-fill.is-running { animation: shop-carousel-fill linear forwards; }
.is-paused .shop-carousel-progress-fill { animation-play-state: paused; }
@keyframes shop-carousel-fill { to { transform: scaleX(1); } }
.shop-carousel-pause {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--shop-border);
  border-radius: 50%;
  background-color: var(--shop-bg);
  cursor: pointer;
}
.shop-carousel-pause:focus { background-color: var(--shop-bg); }
.shop-carousel-pause:hover { border-color: var(--shop-primary); background-color: var(--shop-bg-tint); }
/* Pause: two bars. Pressed (paused): a play triangle. */
.shop-carousel-pause::before,
.shop-carousel-pause::after {
  content: "";
  width: 2px;
  height: 7px;
  background-color: var(--shop-primary);
}
.shop-carousel-pause[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  margin-left: 1px;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--shop-primary);
  background-color: transparent;
}
.shop-carousel-pause[aria-pressed="true"]::after { display: none; }

/* Address forms (checkout, Mein Konto): first and last name, postcode and
   city side by side with one gap, stacked on phones. Elementor's checkout
   would stack the names up to tablet width and WooCommerce's account form
   never; both are replaced here. Scoped to the address fields, so the login
   and lost-password forms keep their own layout. */
:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) {
  --shop-form-col-gap: 16px;
}
@media (min-width: 768px) {
  .woocommerce form :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) .form-row:is(.form-row-first, .form-row-last) {
    width: calc(50% - var(--shop-form-col-gap) / 2);
  }
  /* The postcode ten characters wide. Keyed on the field ids and their order,
     not on WooCommerce's row classes: its address script re-sorts the fields
     and resets those classes when the country changes. Where the postcode
     does not come right before the city (WooCommerce's default order is city,
     state, postcode; DE, AT, CH and FR put it first) both stay full width. */
  .woocommerce form .form-row:is(#billing_postcode_field, #shipping_postcode_field):has(+ .form-row:is(#billing_city_field, #shipping_city_field)) {
    float: left;
    margin-right: var(--shop-form-col-gap);
  }
  .woocommerce form .form-row:is(#billing_postcode_field, #shipping_postcode_field):has(+ .form-row:is(#billing_city_field, #shipping_city_field)) .input-text {
    box-sizing: content-box; /* ten digits plus whatever padding the form gives its fields */
    width: 10ch;
  }
  .woocommerce form .form-row:is(#billing_postcode_field, #shipping_postcode_field):has(+ .form-row:is(#billing_city_field, #shipping_city_field)) + .form-row {
    clear: none;
    display: flow-root; /* the rest of the row beside the postcode, without clipping the focus ring */
  }
}
@media (max-width: 767px) {
  .woocommerce form :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) .form-row:is(.form-row-first, .form-row-last) {
    float: none;
    width: 100%;
  }
}