/* ==========================================================================
   Base layer - brand palette + overrides of the Hello Elementor reset.

   Hello Elementor (parent theme) ships a pink/navy default look in reset.css:
     a {color:#c36}  a:hover {color:#336}
     button, [type=button], [type=submit] {border:1px solid #c36; color:#c36}
     button:hover/:focus {background:#c36; color:#fff}
   None of that belongs to the Rajskie Pasieka palette. This file replaces it
   with the brand colors. Loaded after Hello's styles (see functions.php).
   Palette + decisions: docs/colors.md in the control repo.
   ========================================================================== */

:root {
  /* Text & lines */
  --sffr-ink: #2a170d;
  --sffr-muted: #54433d;
  --sffr-outline: #7b665f;
  --sffr-line: #dac1ba;

  /* Surfaces */
  --sffr-surface: #ffffff;
  --sffr-surface-low: #fff8ea;
  --sffr-surface-mid: #f9efd7;
  --sffr-surface-high: #f3e6c4;

  /* Brand (brown) */
  --sffr-brand: #6d2a12;
  --sffr-brand-dark: #501501;
  --sffr-on-brand: #ffede6;

  /* Accent (honey) */
  --sffr-accent: #fdb742;
  --sffr-accent-hover: #ffcb6b;
  --sffr-on-accent: #6e4900;
  --sffr-deep: #815600;

  /* Feedback */
  --sffr-error: #ba1a1a;
}

/* ---- Links ----------------------------------------------------------------
   Brown by default, deep honey on hover. Text links inside page content are
   underlined so they stay distinguishable from the (also dark) body text. */

a {
  color: var(--sffr-brand);
}

a:active,
a:hover {
  color: var(--sffr-deep);
}

.page-content a:not(.button, .wp-block-button__link, .page-numbers, [class*="sffr-"], .sffr-product-card a, .elementor a),
.entry-content a:not(.button, .wp-block-button__link, .page-numbers, [class*="sffr-"], .sffr-product-card a, .elementor a),
.product_meta a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---- Buttons (the reset layer) ---------------------------------------------
   Outline style: brand border + text. Hover and keyboard focus fill with the
   light blush surface - never a solid color, and a mouse click no longer
   leaves the button painted (Hello used :focus). Components with their own
   class rules (catalog, carousel, header, dock ...) keep winning over this. */

[type="button"],
[type="submit"],
button {
  border-color: var(--sffr-brand);
  color: var(--sffr-brand);
}

[type="button"]:focus,
[type="submit"]:focus,
button:focus {
  background-color: transparent;
  color: var(--sffr-brand);
}

[type="button"]:hover,
[type="submit"]:hover,
button:hover,
[type="button"]:focus-visible,
[type="submit"]:focus-visible,
button:focus-visible {
  background-color: var(--sffr-surface-low);
  color: var(--sffr-brand);
  text-decoration: none;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--sffr-brand);
  outline-offset: 2px;
}

/* ---- Primary buttons from third parties ---------------------------------------
   Same look as the product-card call to action: honey, brown-ink text,
   lighter honey on hover (same as the hero button). */

body .forminator-button.forminator-button-submit,
body .wp-block-button__link {
  border: 0;
  border-radius: 50px;
  background-color: var(--sffr-accent);
  color: var(--sffr-on-accent);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

body .forminator-button.forminator-button-submit:hover,
body .forminator-button.forminator-button-submit:focus-visible,
body .wp-block-button__link:hover,
body .wp-block-button__link:focus-visible {
  background-color: var(--sffr-accent-hover);
  color: var(--sffr-on-accent);
  text-decoration: none;
}

/* ---- Link-style buttons ("Czytaj więcej", "Pokaż więcej") ------------------
   They are <button>s but behave as links: no background change on hover/focus,
   keep their own color. */

button.sffr-desc-toggle:hover,
button.sffr-desc-toggle:focus,
button.sffr-desc-toggle:focus-visible,
button.sffr-facet__more:hover,
button.sffr-facet__more:focus,
button.sffr-facet__more:focus-visible {
  background-color: transparent;
}

button.sffr-desc-toggle:hover,
button.sffr-desc-toggle:focus-visible {
  color: var(--sffr-brand);
}

/* Required fields: red asterisk after the label (optional ones say "(opcjonalnie)"). Contact form + checkout blocks. */
:root {
  --sffr-required: #c62828;
}

.sffr-contact__field:has(:is(input, textarea)[required]) > .sffr-contact__label::after,
.sffr-contact__checkbox[required] + .sffr-contact__consent::after,
.wc-block-components-text-input:has(input[required]) > label::after,
.wc-block-components-combobox:has(input[required]) label::after,
.wc-block-components-checkbox:has(input[required]) .wc-block-components-checkbox__label::after {
  content: " *";
  content: " *" / "";
  color: var(--sffr-required);
  font-weight: 700;
}