/**
 * YK Override — site-wide client styles for shopattack.ch
 *
 * Scoped additions layered on top of the base theme. Do not restyle a frost_ or
 * yk-theme base class here — set the custom property the component exposes, or
 * add the property to the theme. New selectors are fine.
 *
 * Typography, colour and fonts are NOT here. They are the style variation,
 * yk-theme/styles/sha.json; see yk_overrides/README.md for why, and for the
 * steps that make a change to that file take effect.
 *
 * Stylesheets are registered in yk_overrides/inc/enqueue.php, which owns load
 * order and cache-busting. This file does not @import its siblings.
 */

/* =========================================================================
   Header colour tokens

   Client values for the mega menu's dark panel. The component reads these from
   settings.custom.megaMenu in theme.json, and this site wants a darker,
   cooler set than the theme ships: #111214 against the theme's #212121, and
   so on down the list.

   They are declared as CSS rather than in the variation because
   settings.custom.megaMenu is one of the few groups sha.json does not
   override — worth moving there the next time that file is opened, which
   would delete this block.
   ========================================================================= */
.yk-ecommerce-mega-menu,
body.yk-slideout-lock {
  --yk-em-dark-bg: #111214;
  --yk-em-dark-surface: #1d1f22;
  --yk-em-dark-raised: #26282c;
  --yk-em-dark-muted: rgba(255, 255, 255, 0.5);
  --yk-em-fg: #18191b;
  --yk-em-muted: #6b6f76;
  --yk-em-hover: #f4f4f5;
}

.home main,
.page-template-default main {
  padding-top: 0px !important;
}

.entry-content {
  margin-block-start: 0px;
}

/* =========================================================================
   Header — client values for the theme's mega menu component

   Every line here used to be a copy of a base-theme rule with the one value
   this site wanted changed, plus an !important to win. The theme exposes those
   values as custom properties now, so this is the value and nothing else.
   ========================================================================= */

:root {
  /*
   * The header's inline inset. Two things line up on it: the mega panel's
   * padding, and the desktop search dropdown's right anchor over in
   * components/search.css. That dropdown is appended to <body> by the plugin,
   * outside the header, so the shared number lives on :root where both can
   * reach it.
   */
  --yk-client-header-inset: 5.25rem;
}

.yk-ecommerce-mega-menu {
  --yk-em-logo-height: 60px;

  --yk-em-panel-inline-padding: var(--yk-client-header-inset);

  /*
   * The mega panel's height, set as a floor under the categories rather than as
   * a height on the panel. 65vh used to be here and was the wrong shape of
   * answer twice over: a different number on every screen, and with no overflow
   * on the panel a taller list simply ran out of the white background and over
   * the products below it.
   *
   * 470px is the tallest this site's twelve categories measure across the
   * desktop range at the theme's six columns. Re-measure it when categories are
   * added or removed, and after a translation change — DE, FR and IT do not
   * wrap identically.
   */
  --yk-pcm-min-height: 470px;

  /*
   * Mega panel typography, carried over from the menu the JS distributor used
   * to build. The theme's own defaults are the body/heading faces at
   * 0.875rem, which is the right answer for a site that has not chosen
   * otherwise -- this one had, and the values below are what it was rendering
   * before the block replaced that markup:
   *
   *   headings   JetBrains Mono, unhyphenated
   *   links      0.975rem (the face is already the body one, so it is not set)
   *
   * `manual` rather than `none` for the headings. Both switch automatic
   * hyphenation off, which is what this site wants -- but `none` also throws
   * away the soft hyphens an editor typed into the category name, leaving
   * word-break to split the word wherever it happens to run out of column
   * (VERANSTALTUNGSTECH / NIK). `manual` keeps the editor's break point and
   * adds none of its own, which is what "unhyphenated" meant here all along.
   */
  --yk-pcm-heading-font-family: var(
    --wp--preset--font-family--mono,
    "JetBrains Mono",
    ui-monospace,
    monospace
  );
  --yk-pcm-heading-hyphens: manual;
  --yk-pcm-link-font-size: 0.975rem;

  /* The variation's own mono slug when it is active, with the stack spelled
     out so the header still reads correctly if it is not. */
  --yk-em-nav-font-family: var(
    --wp--preset--font-family--mono,
    "JetBrains Mono",
    ui-monospace,
    monospace
  );
  --yk-em-nav-font-weight: 400;
}

/* =========================================================================
   Button variants

   The shared look — mono, 11px, medium, uppercase, 0.18em tracking,
   0.85rem/1.5rem padding, pill radius — is styles.elements.button in
   styles/sha.json. Only what differs per variant is here.

   Colour stays in CSS. Fill and outline want opposite text colours on the same
   element, and .solid has to beat core's own background — neither is
   expressible as one elements.button entry.
   ========================================================================= */

/* Outline: light text, sits on a dark background. */
.wp-block-button .wp-block-button__link {
  display: inline-block;
  color: var(--wp--preset--color--base);
}

/* Fill: dark text on the primary fill. */
.wp-block-button.is-style-fill .wp-block-button__link {
  color: var(--wp--preset--color--contrast);
}

/* .solid — a text link wearing a button: no fill, no border, no side padding. */
.wp-block-button.solid .wp-block-button__link {
  padding-inline: 0;
  color: var(--wp--preset--color--contrast) !important;
  border: none !important;
  background-color: transparent !important;
}

.wp-block-button.solid.yellow .wp-block-button__link {
  padding-inline: 0;
  color: var(--wp--preset--color--primary) !important;
  border: none !important;
  background-color: transparent !important;
}

/* =========================================================================
   Legacy utility classes — superseded by theme block styles

   .arrow, .yellow-underline, .yellow-line-before, .zoom-on-hover and
   .divided-columns further down all ship with the base theme now, as block
   styles an editor picks from the Styles panel:

     .arrow              -> Button    > Arrow
     .yellow-underline   -> Heading / Paragraph > Accent Underline
     .yellow-line-before -> Heading   > Accent Line
     .zoom-on-hover      -> Cover     > Zoom on Hover
     .divided-columns    -> Columns   > Divided

   The colour word is out of the new names — the line is the primary preset,
   which is not yellow on most sites.

   These rules stay because existing pages carry the bare class typed into
   "Additional CSS class(es)", and a block style adds `is-style-<name>`, not the
   class an editor typed. Re-save a block with the style picked from the panel
   and it stops needing what is below; when no page uses a class any more,
   delete its rules from here rather than copying them to the next client.
   ========================================================================= */

.wp-block-button.arrow .wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
}

.wp-block-button.arrow .wp-block-button__link::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  /* A mask rather than an image, so background-color: currentColor paints the
     glyph and one rule covers a button of any colour. */
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: transform 0.2s ease;
  margin-left: 0.5rem;
}

.wp-block-button.arrow .wp-block-button__link:hover::after {
  transform: translate(2px, -2px);
}

/* skip-ink is off deliberately: at this thickness and offset the line is a
   graphic element, and a descender interrupting it reads as a printing fault. */
.yellow-underline {
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--primary) !important;
  text-decoration-thickness: 3.5px;
  text-underline-offset: 7.5px;
  text-decoration-skip-ink: none;
}

/* A short primary rule in front of the text, for eyebrow headings. */
.yellow-line-before {
  display: flex;
  align-items: center;
  gap: 12px;
}

.yellow-line-before::before {
  content: "";
  display: inline-block;
  width: 35px;
  height: 1.2px;
  background-color: var(--wp--preset--color--primary);
  flex-shrink: 0;
}

.wp-block-cover.zoom-on-hover {
  overflow: hidden;
}

.wp-block-cover.zoom-on-hover .wp-block-cover__image-background,
.wp-block-cover.zoom-on-hover img.wp-block-cover__image-background {
  transition: transform 0.6s ease-in-out !important;
  transform: scale(1);
}

.wp-block-cover.zoom-on-hover:hover .wp-block-cover__image-background,
.wp-block-cover.zoom-on-hover:hover img.wp-block-cover__image-background {
  transform: scale(1.05) !important;
}

.margin-zero {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================================
   Home page cover grid

   One page's layout, and deliberately not promoted: hardcoded viewport
   heights, hardcoded grid coordinates, and an !important on every declaration
   to beat the inline styles the cover blocks were saved with.
   ========================================================================= */

/* Let the cover's inner wrapper fill the block's full height. */
.responsive-grid .wp-block-cover__inner-container {
  height: 100% !important;
}

/* And the stack inside it, over the inline min-height the block was saved
   with (82vh on the tall one, 35vh on the rest). */
.responsive-grid
  .wp-block-cover__inner-container
  > .wp-block-group.is-layout-flex {
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Push the last child — the buttons — onto the bottom edge. */
.responsive-grid
  .wp-block-cover__inner-container
  > .wp-block-group.is-layout-flex
  > :last-child {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

@media (min-width: 1025px) {
  .responsive-grid > .wp-block-cover.double-row-cover {
    min-height: calc(70vh + 30px) !important;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .wp-block-group.responsive-grid.is-layout-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Clear the saved grid coordinates so the boxes flow, and give them all one
     height so the rows stay even. */
  .responsive-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 35vh !important;
  }

  /* The tall cover spans both columns instead. */
  .responsive-grid > .wp-block-cover.double-row-cover {
    grid-column: span 2 !important;
    min-height: 35vh !important;
  }
}

@media (max-width: 768px) {
  .wp-block-group.responsive-grid.is-layout-grid {
    grid-template-columns: 1fr !important;
  }

  .responsive-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 35vh !important;
  }
}

/* =========================================================================
   Divided columns

   A rule between the columns, drawn on every column but the last so it never
   appears outside the block, and centred in the 30px block gap rather than
   pinned to a column edge.
   ========================================================================= */

@media (min-width: 769px) {
  .divided-columns > * {
    position: relative;
  }

  .divided-columns > *:not(:last-child)::after {
    content: "";
    position: absolute;

    /* Centred in the gap: half of 30px past the column's right edge. */
    right: -15px;
    left: auto;

    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;

    background-color: var(--wp--preset--color--neutral, #e7e7e7);
    pointer-events: none;
  }
}

@media (max-width: 768px) {
  .divided-columns > * {
    position: relative;
  }

  /* Stacked: the rule goes under each column, across its full width. */
  .divided-columns > *:not(:last-child)::after {
    content: "";
    position: absolute;

    bottom: -15px;
    top: auto;

    left: 0;
    right: 0;

    height: 1px;
    width: 100%;

    background-color: var(--wp--preset--color--neutral, #e7e7e7);
    pointer-events: none;
  }
}

/* =========================================================================
   Footer
   ========================================================================= */

/*
 * The newsletter field, pill-shaped. patterns/yk-footer.php used to set this
 * as a style="" attribute on the input, which no stylesheet can beat without
 * !important; it is a --yk-newsletter-* custom property now.
 */
:root {
  --yk-newsletter-radius: 9999px;
}

.wp-block-social-links .wp-social-link svg {
  padding: 2.5px !important;
}

/* =========================================================================
   Search field
   ========================================================================= */

.aws-container .aws-search-field {
  border-radius: 9999px !important;
}

.aws-container .aws-show-clear .aws-search-field {
  padding-right: 40px;
  padding-left: 15px;
  /* Was a bare "JetBrains Mono" with no fallback, so a failed font load
     dropped the field to the browser default rather than to a monospace. */
  font-family: var(
    --wp--preset--font-family--mono,
    "JetBrains Mono",
    ui-monospace,
    monospace
  );
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Button hover — has to work on a black hero and on a white section

   The hover state is an opaque yellow with ink-coloured text either way.
   Yellow reads against black and against white, so it does not depend on what
   is behind the button; inverting to black instead made the button disappear
   on the dark hero.

   .solid and .solid.yellow are excluded with :not(.solid). They clear their
   background with !important, so a background hover leaves nothing but an odd
   little transform — they get an underline instead, further down.
   ------------------------------------------------------------------------- */

.wp-block-button:not(.is-style-outline):not(.solid) > .wp-block-button__link {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--contrast);
  border: 1px solid transparent;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.wp-block-button:not(.is-style-outline):not(.solid)
  > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline):not(.solid)
  > .wp-block-button__link:focus-visible {
  /* One step darker. 1.27:1 against primary (#fdd506) — enough that the state
     change reads, not so much that it jumps. A computed value no preset
     expresses, so it stays a literal. */
  background-color: #e3bd00;
  color: var(--wp--preset--color--contrast); /* 11.1:1 on that background */
  transform: translateY(-1px);
}

/* Outline: fills with yellow on hover. The border and text follow
   currentColor, which the is-style-outline--N variants already set to white or
   black to suit the section behind them. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background-color: transparent;
  border: 1px solid currentColor;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--contrast);
  transform: translateY(-1px);
}

/* The text-link variants answer with an underline and nothing else. */
.wp-block-button.solid > .wp-block-button__link:hover,
.wp-block-button.solid > .wp-block-button__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* =========================================================================
   Mobile — general
   ========================================================================= */

@media (max-width: 767px) {
  /* One 20px inset instead of the desktop 30px nesting inside another 30px,
     which left the content column far too narrow. */
  .wp-site-blocks > main .has-global-padding {
    padding-left: 20px;
    padding-right: 20px;
  }

  .wp-site-blocks > main .has-global-padding > .has-global-padding {
    padding-left: 0;
    padding-right: 0;
  }

  /* Button touch targets. The outline rule above sets display: inline-block at
     (0,2,0), so this has to match that specificity — hence the child
     combinator — and come after it. */
  .wp-block-buttons {
    gap: 12px;
  }

  .wp-block-button > .wp-block-button__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/*
 * Divider colour. The rules above ask for neutral, which is #f1f5f9 here — all
 * but invisible on the white these columns sit on — and the #e7e7e7 fallback
 * never runs, because neutral is defined.
 *
 * Mixing from currentColor instead: both palette colours that would suit
 * (neutral, base) are near-white, and a mix also holds up on a dark section.
 * It is what the theme's own Columns > Divided block style uses, so the legacy
 * class and the block style draw the same line.
 */
.divided-columns > *:not(:last-child)::after {
  /* Fallback first for engines without color-mix(). */
  background-color: rgba(0, 0, 0, 0.12);
  background-color: color-mix(in srgb, currentColor 12%, transparent);
}

/* =========================================================================
   Mobile — hero section

   .entry-content has a 20px inline padding on mobile while the alignfull rule
   keeps its desktop margin of -30px, so the hero hung 10px off each edge of
   the screen and its text was clipped. The inner group has no inline padding
   of its own, which put the words against the screen edge on top of that.
   ========================================================================= */

@media (max-width: 781px) {
  /* Exactly the viewport width, whatever the parent's padding is. */
  .entry-content > .wp-block-cover.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /* Releases the saved inline min-height of 740px so the cover is as tall as
       its content. For a fixed height, put one here instead of auto. */
    min-height: auto !important;
  }

  /* Restore the inline padding inside the hero — 20px, the site's mobile
     inset. */
  .entry-content
    > .wp-block-cover.alignfull
    > .wp-block-cover__inner-container
    > .wp-block-group {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Space below the header, and none at the foot of the text block. */
  .entry-content
    > .wp-block-cover.alignfull
    > .wp-block-cover__inner-container
    > .wp-block-group:first-child {
    padding-top: 40px !important;
    padding-bottom: 0 !important;
  }

  /* The figures bar at the bottom (30+ / 6'000+ / 20+ / 24h). */
  .entry-content
    > .wp-block-cover.alignfull
    > .wp-block-cover__inner-container
    > .wp-block-group:last-child {
    margin-top: 32px !important;
    padding-top: 24px !important;
    padding-bottom: 32px !important;
  }

  /* The hero heading, one step down. h1 is 48px on a phone, and a short line
     over a full-bleed cover breaks badly at that size. No !important needed:
     this is (0,4,1) and the size it overrides is styles.elements.h1 at
     :root :where(h1), which is (0,0,1). */
  .entry-content > .wp-block-cover.alignfull h1.wp-block-heading {
    font-size: 40px;
    line-height: 1.08;
  }

  /* Heading to body spacing, and drop the body's oversized right padding. */
  .entry-content > .wp-block-cover.alignfull h1.wp-block-heading + * {
    margin-top: 20px !important;
    padding-right: 0 !important;
  }

  /* Body to buttons. */
  .entry-content > .wp-block-cover.alignfull .wp-block-buttons {
    margin-top: 28px !important;
    gap: 10px !important;
  }
}