/*
Theme Name:        Hediyesahibi Child
Description:       Hediyesahibi child theme for Kadence. The parent theme is never edited; all customization lives here and in the hediyesahibi-core plugin.
Author:            Hediyesahibi
Template:          kadence
Version:           0.0.0
Requires at least: 7.0
Requires PHP:      8.3
License:           GPL-3.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:       hediyesahibi-child
*/

/*
 * Design tokens (start of the design system, docs/MASTER_PROMPT.md §7 phase 2).
 * Contrast ratios (WCAG 2.x) are noted where a pair is used for text or icons;
 * AA wins over the mockup where they conflict.
 */
:root {
  /* Brand (logo) */
  --hs-orange: #f09820; /* logo orange; decorative / large areas only (white on it 2.28:1) */
  --hs-orange-600: #e06c00; /* filled orange UI with a white icon: 3.33:1 (non-text ≥ 3:1) */
  --hs-orange-700: #c2410c; /* white text on orange (badge): 5.18:1; orange text on white: 5.18:1 */
  --hs-blue: #3688c8; /* logo blue; icons on white 3.81:1; white text on it only 3.81:1 */
  --hs-blue-600: #0070e0; /* mockup button blue; white text on it 4.78:1, as text on white 4.78:1, on #f7fafc 4.56:1 */
  --hs-blue-700: #185c9f; /* hover of blue-600: 6.84:1 with white */
  --hs-plum: #310e31; /* logo outline */

  /* Text and surfaces */
  --hs-ink: #1f2547; /* text: 14.85:1 on white, 6.52:1 on --hs-orange */
  --hs-muted: #5b6180; /* secondary text: 6.06:1 on white */
  --hs-placeholder: #646a87; /* placeholder on --hs-surface-2: 4.91:1 */
  --hs-surface: #fff;
  --hs-surface-2: #f4f6f9; /* search field */
  --hs-product-backdrop: #ece6df; /* backdrop of the catalog photos (DESIGN.md §4.11); image tiles show it while loading */
  --hs-line: #e6e9f0; /* dividers, borders (decorative, no contrast requirement) */
  --hs-border-strong: #8a90ab; /* boundary of form controls: 3.15:1 on white (WCAG 1.4.11 ≥ 3:1) */

  /* Accent colours for icons (≥ 3:1 on white) */
  --hs-pink: #d6336c; /* 4.62:1 */
  --hs-red: #e11d48; /* 4.70:1 */
  --hs-purple: #7c3aed; /* 5.70:1 */
  --hs-green: #2b7a3d; /* 5.31:1 */

  /*
   * Order states (DESIGN.md §3.3, the owner's choice), apart from the site's blue links
   * and orange buttons. Each has its text colour and a bright tone: a chip is the text
   * on 12 % of the tone (see-through) with a 28 % ring. Ratios are for that on the
   * account's rows.
   */
  --hs-state-waiting: #8a5a00; /* amber: awaiting payment, 5.1:1 */
  --hs-state-waiting-tone: #f59e0b;
  --hs-state-preparing: #0d6b63; /* teal: being prepared, 5.3:1 */
  --hs-state-preparing-tone: #14b8a6;
  --hs-state-shipped: #4338ca; /* indigo: on its way, 6.3:1 */
  --hs-state-shipped-tone: #6366f1;
  --hs-state-delivered: #226b35; /* green: delivered, 5.5:1 */
  --hs-state-delivered-tone: #22c55e;
  --hs-state-failed: #be123c; /* red: payment failed, 5.0:1 */
  --hs-state-failed-tone: #f43f5e;
  --hs-state-stopped: #5b6180; /* grey: cancelled, refunded, 4.9:1 */
  --hs-state-stopped-tone: #64748b;

  /* Top bar (the mockup uses white text: 2.28:1 on orange fails AA, so ink by default) */
  --hs-topbar-bg: linear-gradient(90deg, #f7901f 0%, #fc8a1a 50%, #f7851c 100%); /* mockup's warmer orange */
  --hs-topbar-fg: var(--hs-ink); /* 6.34:1 / 6.22:1 / 5.89:1 at the three gradient stops */

  /*
   * Shape (docs/DESIGN.md "Tasarım sistemi"). Design radii are the nominal
   * (Figma) values; components never use them directly but the --hs-r-* tokens below,
   * which include the corner smoothing scale. Every rounded component rule is:
   *
   *   border-radius: var(--hs-r-md);
   *   corner-shape: var(--hs-corner-shape);
   *
   * Pills and circles use --hs-r-pill / 50% and no corner-shape: they stay round.
   */
  --hs-radius-xs: 6px; /* small chips, notices */
  --hs-radius-sm: 10px; /* icon buttons, menu items */
  --hs-radius-md: 14px; /* fields, buttons, the category strip */
  --hs-radius-lg: 20px; /* panels, drawers, cards */
  --hs-radius-xl: 28px; /* large cards (gift finder), dialogs, the cookie banner */
  --hs-radius-min: 4px; /* floor of a concentric inner radius */

  /*
   * Corner smoothing: plain round corners by default (Safari, Firefox, older Chromium).
   * Where CSS corner-shape works, a superellipse at a larger radius draws the same
   * visual corner as the round one (same diagonal inset) with a smooth, continuous
   * curve, like Figma's 60 % corner smoothing (calibrated in DESIGN.md).
   */
  --hs-corner-shape: round;
  --hs-corner-scale: 1;

  --hs-r-xs: calc(var(--hs-radius-xs) * var(--hs-corner-scale));
  --hs-r-sm: calc(var(--hs-radius-sm) * var(--hs-corner-scale));
  --hs-r-md: calc(var(--hs-radius-md) * var(--hs-corner-scale));
  --hs-r-lg: calc(var(--hs-radius-lg) * var(--hs-corner-scale));
  --hs-r-xl: calc(var(--hs-radius-xl) * var(--hs-corner-scale));
  --hs-r-min: calc(var(--hs-radius-min) * var(--hs-corner-scale));
  --hs-r-pill: 999px;

  /*
   * Concentric corners: a rounded container publishes its design radius and the inset
   * of the element in its corner; that element then uses
   *
   *   --hs-parent-r: var(--hs-radius-lg);  --hs-parent-p: 12px;   (on the container)
   *   border-radius: max(calc((var(--hs-parent-r) - var(--hs-parent-p)) * var(--hs-corner-scale)), var(--hs-r-min));
   *   corner-shape: var(--hs-corner-shape);                        (on the inner element)
   *
   * (R − p) is in design pixels and then scaled, so the curves stay parallel both
   * with round corners and with the superellipse.
   */

  /* Depth */
  --hs-shadow-sm: 0 1px 2px rgb(31 37 71 / 6%), 0 2px 8px rgb(31 37 71 / 5%);
  --hs-shadow: 0 8px 28px rgb(31 37 71 / 10%);
  --hs-focus: var(--hs-ink);

  /* Checkbox, ticked (see "Checkbox" below): white tick 4.78:1. */
  --hs-check-on: var(--hs-blue-600);

  /*
   * Typography. Nunito (assets/fonts/fonts.css, self-hosted) is the interim brand font;
   * "Nunito Fallback" is Arial with Nunito's metrics, so the swap does not move text.
   * To change the brand font: replace the files and @font-face rules in fonts.css and
   * the first two names here.
   */
  --hs-font: 'Nunito', 'Nunito Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Kadence's global typography follows the brand font. */
  --global-body-font-family: var(--hs-font);
  --global-heading-font-family: var(--hs-font);

  /* Layout */
  --hs-container: 1240px;
  --hs-gutter: 24px;
}

/*
 * Wide screens (2K, and 4K with the usual 150–200 % scaling): the content area widens
 * in steps and stops at 1760 px (DESIGN.md "Geniş ekranlar"). Kadence's content width
 * (the hero's inner container, shop and product pages) follows, so all edges line up.
 */
@media (min-width: 1600px) {
  :root {
    --hs-container: 1440px;
    --global-content-width: calc(var(--hs-container) + 2 * var(--hs-gutter));
  }
}

@media (min-width: 1920px) {
  :root {
    --hs-container: 1600px;
  }
}

@media (min-width: 2400px) {
  :root {
    --hs-container: 1760px;
  }
}

/*
 * Kadence's product grids (product lists outside the catalogue pages, and the shop
 * itself while the plugin's catalogue module is off): five products in a row from
 * 1600 px (Kadence's large-screen grid has four), as the catalogue does. A page holds
 * 20 products (StoreDefaults: 4 columns × 5 rows): full pages fill every row at 2, 4 and
 * 5 columns. Related products on a product page keep four in a row (there are four).
 */
@media (min-width: 1600px) {
  body:not(.single-product) ul.products.grid-lg-col-4 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@supports (corner-shape: superellipse(2)) {
  :root {
    /* K = 1.6, radius × 1.4: see DESIGN.md "Köşe yumuşatma" for the calibration. */
    --hs-corner-shape: superellipse(1.6);
    --hs-corner-scale: 1.4;
  }
}

body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--hs-font);
}

/*
 * Checkbox (DESIGN.md "Onay kutusu"): one look on the whole site, WooCommerce's forms
 * included. The browser's box is drawn again (appearance: none). Components that draw
 * their own box beside a hidden input (the cart's rows, the catalogue's filters) give
 * that box the class `hs-checkbox` and put it right after the input.
 *
 * Size: --hs-check-size (20 px; set on the box or a parent: the cart 28 / 24 px, the
 * filters 18 px). The corner is 30 % of the size, with the site's corner smoothing, so
 * every size has the same shape; the focus ring follows the corner 2 px out
 * (concentric). Off: white, 2 px --hs-border-strong (3.15:1, WCAG 1.4.11); hover: the
 * border turns blue; on: --hs-check-on with a white tick; invalid (WooCommerce's
 * .woocommerce-invalid): red border; disabled: faded. In forced colours (Windows high
 * contrast) the browser's own box comes back.
 */
input[type='checkbox']:where(:not(.hs-cart__check, .hs-check__input, .hs-switch__input)),
.hs-checkbox {
  display: inline-grid;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  width: var(--hs-check-size, 20px);
  height: var(--hs-check-size, 20px);
  margin: 0;
  padding: 0;
  border: 2px solid var(--hs-border-strong);
  border-radius: calc(var(--hs-check-size, 20px) * 0.3 * var(--hs-corner-scale, 1));
  corner-shape: var(--hs-corner-shape, round);
  background: var(--hs-surface) no-repeat center / 72%;
  color: transparent;
  vertical-align: middle;
  appearance: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

/* The components' own tick icons give way to the shared tick. */
.hs-checkbox > svg {
  display: none;
}

input[type='checkbox']:where(:not(.hs-cart__check, .hs-check__input, .hs-switch__input)):not(:checked, :disabled):hover,
label:hover
  > input[type='checkbox']:where(:not(.hs-cart__check, .hs-check__input, .hs-switch__input)):not(:checked, :disabled),
input:not(:checked, :disabled):hover + .hs-checkbox,
label:hover input:not(:checked, :disabled) + .hs-checkbox,
label:hover > .hs-checkbox:not(.is-checked) {
  border-color: var(--hs-check-on);
}

input[type='checkbox']:where(:not(.hs-cart__check, .hs-check__input, .hs-switch__input)):checked,
input:checked + .hs-checkbox,
.hs-checkbox.is-checked {
  border-color: var(--hs-check-on);
  background-color: var(--hs-check-on);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

input[type='checkbox']:where(:not(.hs-cart__check, .hs-check__input, .hs-switch__input)):indeterminate {
  border-color: var(--hs-check-on);
  background-color: var(--hs-check-on);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

input[type='checkbox']:where(:not(.hs-cart__check, .hs-check__input, .hs-switch__input)):focus-visible,
input:focus-visible + .hs-checkbox {
  outline: 2px solid var(--hs-focus);
  outline-offset: 2px;
}

.woocommerce-invalid
  input[type='checkbox']:where(:not(.hs-cart__check, .hs-check__input, .hs-switch__input)):not(:checked) {
  border-color: var(--hs-red);
}

input[type='checkbox']:where(:not(.hs-cart__check, .hs-check__input, .hs-switch__input)):disabled,
input:disabled + .hs-checkbox {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  input[type='checkbox'],
  .hs-checkbox {
    transition: none;
  }
}

@media (forced-colors: active) {
  input[type='checkbox']:where(:not(.hs-cart__check, .hs-check__input, .hs-switch__input)) {
    appearance: auto;
  }

  input:checked + .hs-checkbox > svg,
  .hs-checkbox.is-checked > svg {
    display: block;
  }
}

/*
 * Waiting for the server (D-140): a button that sent something (aria-busy="true", set by
 * the scripts) keeps its colour and words; its icon turns into a turning ring in the same
 * place, and a button without one gets the ring after its words. Switches keep their look.
 * WooCommerce's order button while it sends the order (the form's "processing") too.
 */
@keyframes hs-busy-turn {
  to {
    rotate: 360deg;
  }
}

:is(button, .button):not([role='switch'])[aria-busy='true'] {
  cursor: progress;
}

/* The icon: the button's own SVG, or one in the header's icon box (.hs-ico). */
:is(button, .button):not([role='switch'])[aria-busy='true'] > svg,
:is(button, .button):not([role='switch'])[aria-busy='true'] > .hs-ico > svg {
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: hs-busy-turn 0.7s linear infinite;
}

:is(button, .button):not([role='switch'])[aria-busy='true'] > svg > *,
:is(button, .button):not([role='switch'])[aria-busy='true'] > .hs-ico > svg > * {
  display: none;
}

:is(button, .button):not([role='switch'])[aria-busy='true']:not(:has(> svg, > .hs-ico))::after,
form.checkout.processing #place_order::after {
  content: '';
  display: inline-block;
  box-sizing: border-box;
  width: 1em;
  height: 1em;
  margin-inline-start: 0.5em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  vertical-align: -0.125em;
  animation: hs-busy-turn 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  :is(button, .button):not([role='switch'])[aria-busy='true'] > svg,
  :is(button, .button):not([role='switch'])[aria-busy='true'] > .hs-ico > svg,
  :is(button, .button):not([role='switch'])[aria-busy='true']::after,
  form.checkout.processing #place_order::after {
    animation-duration: 1.8s;
  }
}