/**
 * SuperSquare Storefront — Core Design System, Typography & Utilities
 *
 * Provides universal layout containers, button components, section primitives,
 * and responsive resets.
 *
 * @package SuperSquare_Storefront
 */

/* Global elements, screen-reader utilities and containers are defined once in
   style.css. Core owns reusable components and merchant-content resilience. */

.skip-link:focus {
  display:block;
  position:fixed;
  z-index:100000;
  top:var(--ssq-space-4);
  left:var(--ssq-space-4);
  width:auto;
  height:auto;
  padding:var(--ssq-space-3) var(--ssq-space-4);
  clip:auto !important;
  clip-path:none;
  color:var(--ssq-ivory);
  background:var(--ssq-espresso);
  border-radius:var(--ssq-radius-control);
  box-shadow:var(--ssq-shadow-lg);
}

.ssq-shell {
  width:100%;
  max-width:var(--ssq-max-width);
  margin-inline:auto;
  padding-inline:var(--ssq-container-gutter);
}

.ssq-site-main {
  min-height: 60vh;
}

/* ==========================================================================
   Button System
   ========================================================================== */
.ssq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  min-height: 44px;
  font-size: var(--ssq-font-size-button);
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1;
  padding: 0.6875rem 1.25rem;
  border-radius: var(--ssq-btn-radius, 8px);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--ssq-transition-fast), background-color var(--ssq-transition-fast), border-color var(--ssq-transition-fast), box-shadow var(--ssq-transition-fast), transform var(--ssq-transition-fast);
  white-space: nowrap;
}

.ssq-btn svg,.ssq-icon-action svg,.ssq-header-action svg { flex-shrink: 0; }

.ssq-btn-primary {
  background-color: var(--ssq-terracotta);
  color: var(--ssq-ivory) !important;
  border-color: var(--ssq-terracotta);
}

.ssq-btn-primary:hover {
  background-color: var(--ssq-terracotta-dark);
  border-color: var(--ssq-terracotta-dark);
  box-shadow: var(--ssq-shadow-sm);
  transform: translateY(-1px);
}

.ssq-btn-secondary {
  background-color: var(--ssq-cream);
  color: var(--ssq-espresso) !important;
  border-color: var(--ssq-border);
}

.ssq-btn-secondary:hover {
  background-color: var(--ssq-beige);
  border-color: var(--ssq-border-strong);
  color: var(--ssq-terracotta-dark) !important;
  transform: translateY(-1px);
}

.ssq-btn-dark {
  background-color: var(--ssq-espresso);
  color: var(--ssq-ivory) !important;
  border-color: var(--ssq-espresso);
}

.ssq-btn-dark:hover {
  background-color: #17100e;
  border-color: #17100e;
}

.ssq-btn-outline { color:var(--ssq-espresso)!important; background:transparent; border-color:var(--ssq-espresso); }
.ssq-btn-outline:hover { color:var(--ssq-ivory)!important; background:var(--ssq-espresso); }
.ssq-btn-ghost { color:var(--ssq-text-main)!important; background:transparent; border-color:transparent; }
.ssq-btn-ghost:hover { color:var(--ssq-terracotta-dark)!important; background:var(--ssq-cream); }
.ssq-btn-secure { color:var(--ssq-ivory)!important; background:var(--ssq-success); border-color:var(--ssq-success); box-shadow:var(--ssq-shadow-sm); }
.ssq-btn-secure:hover { filter:brightness(.92); transform:translateY(-1px); }
.ssq-btn-floating { color:var(--ssq-espresso)!important; background:#fff; border-color:var(--ssq-border); box-shadow:var(--ssq-shadow-floating); }
.ssq-btn-editorial,.ssq-link-arrow { min-height:0; padding:.2rem 0; color:var(--ssq-espresso)!important; background:transparent; border:0; border-radius:0; }
.ssq-btn-editorial::after,.ssq-link-arrow::after { content:'→'; margin-inline-start:.55em; transition:transform var(--ssq-transition-fast); }
.ssq-btn-editorial:hover::after,.ssq-link-arrow:hover::after { transform:translateX(4px); }
.ssq-link-underline { position:relative; color:inherit; }
.ssq-link-underline::after { content:''; position:absolute; right:0; bottom:-.18em; left:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform var(--ssq-transition-normal); }
.ssq-link-underline:hover::after,.ssq-link-underline:focus-visible::after { transform:scaleX(1); transform-origin:left; }
.ssq-icon-action { display:inline-grid; width:44px; height:44px; padding:0; place-items:center; color:var(--ssq-text-main); background:transparent; border:1px solid transparent; border-radius:var(--ssq-radius-control); transition:all var(--ssq-transition-fast); }
.ssq-icon-action:hover { color:var(--ssq-terracotta-dark); background:var(--ssq-blush); border-color:var(--ssq-border); }
.ssq-icon-action svg { width:20px; height:20px; }
.ssq-icon-action--round { border-radius:var(--ssq-radius-full); }
.ssq-icon-action--floating { background:#fff; border-color:var(--ssq-border); box-shadow:var(--ssq-shadow-md); }

.ssq-btn:active,.ssq-icon-action:active { transform:translateY(1px); }
.ssq-btn:disabled,.ssq-icon-action:disabled,.ssq-btn.is-disabled,.ssq-icon-action.is-disabled { opacity:.48; cursor:not-allowed; transform:none; box-shadow:none; }
.ssq-btn.is-loading,.ssq-icon-action.is-loading { opacity:.7; pointer-events:none; }

.ssq-btn-lg {
  font-size: 0.9375rem;
  padding: 0.875rem 1.75rem;
}

.ssq-btn-sm {
  font-size: 0.75rem;
  padding: 0.4375rem 0.875rem;
}

.ssq-btn-block {
  display: flex;
  width: 100%;
}

/* ==========================================================================
   Section Headers & Primitives
   ========================================================================== */
.ssq-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ssq-border, #E9DED2);
}

.ssq-section-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ssq-section-eyebrow, .ssq-kicker {
  font-size: var(--ssq-font-size-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ssq-terracotta);
}

.ssq-section-title {
  font-size: var(--ssq-font-size-h2);
  font-weight: 600;
  color: var(--ssq-text-main);
  margin-bottom: 0;
  letter-spacing: -0.02em;
}

.ssq-section-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ssq-terracotta);
  white-space: nowrap;
}

.ssq-section-link:hover {
  color: var(--ssq-terracotta-dark);
  transform: translateX(2px);
}

/* Contextual heading variants — not every homepage section uses the same eyebrow/divider block. */
.ssq-section-header--center { flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.4rem; border-bottom:0; padding-bottom:0; }
.ssq-section-header--center .ssq-section-title-wrap { align-items:center; }
.ssq-section-header--nodivider { border-bottom:0; padding-bottom:0; }
.ssq-section-header--compact { margin-bottom:1rem; padding-bottom:.5rem; }
.ssq-section-header--inverse .ssq-section-eyebrow { color:var(--ssq-gold-soft); }
.ssq-section-header--inverse .ssq-section-title { color:var(--ssq-ivory); }
.ssq-section-header--inverse { border-bottom-color:rgba(255,252,247,.16); }
.ssq-section-header--inverse .ssq-section-link { color:var(--ssq-gold-soft); }
.ssq-section-header--inverse .ssq-section-link:hover { color:var(--ssq-ivory); }

/* ==========================================================================
   Star Rating Primitive
   ========================================================================== */
.ssq-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--ssq-border-strong);
  font-size: 0.875rem;
  line-height: 1;
}

.ssq-star.is-filled {
  color: var(--ssq-gold);
}

.ssq-display { font:600 var(--ssq-font-size-display)/.98 var(--ssq-font-heading); letter-spacing:-.025em; }
.ssq-eyebrow { color:var(--ssq-terracotta); font:700 var(--ssq-font-size-eyebrow)/1.4 var(--ssq-font-sans); letter-spacing:.14em; text-transform:uppercase; }
.ssq-meta,.ssq-caption { color:var(--ssq-text-muted); font-size:var(--ssq-font-size-caption); letter-spacing:.055em; text-transform:uppercase; }
.ssq-price { color:var(--ssq-espresso); font:700 var(--ssq-font-size-price)/1.2 var(--ssq-font-sans); }
.ssq-price-old { color:var(--ssq-text-muted); font-weight:500; text-decoration:line-through; }
.ssq-price-sale { color:var(--ssq-terracotta-dark); }
.ssq-label,.ssq-fashion-badge { display:inline-flex; align-items:center; min-height:22px; padding:3px 7px; color:var(--ssq-espresso); font:700 var(--ssq-font-size-eyebrow)/1 var(--ssq-font-sans); letter-spacing:.08em; text-transform:uppercase; background:var(--ssq-cream); border:1px solid var(--ssq-border); border-radius:var(--ssq-radius-badge); }

/* ==========================================================================
   Empty Notice & Form Resets
   ========================================================================== */
.ssq-empty-notice {
  padding: 3rem 1.5rem;
  text-align: center;
  background-color: #ffffff;
  border: 1px dashed var(--ssq-border, #E9DED2);
  border-radius: var(--ssq-radius-lg, 12px);
  color: var(--ssq-text-muted, #9B908A);
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select {
  font-family: inherit;
  min-height: 42px;
  font-size: var(--ssq-font-size-body);
  color: var(--ssq-text-main);
  background-color: #ffffff;
  border: 1px solid var(--ssq-border-strong);
  border-radius: var(--ssq-radius-control);
  padding: .6rem .8rem;
  outline: none;
  transition: border-color var(--ssq-transition-fast, 0.15s ease), box-shadow var(--ssq-transition-fast, 0.15s ease);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ssq-terracotta);
  box-shadow: 0 0 0 3px rgba(138,75,58,.12);
}

textarea { min-height:96px; resize:vertical; }
input:disabled,select:disabled,textarea:disabled { color:var(--ssq-text-muted); background:var(--ssq-cream); cursor:not-allowed; opacity:.72; }
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"],.woocommerce-invalid input { border-color:var(--ssq-danger); box-shadow:0 0 0 3px rgba(166,62,70,.1); }
input[type="checkbox"],input[type="radio"] { width:18px; height:18px; min-height:0; margin:0 .45rem 0 0; accent-color:var(--ssq-terracotta); }
input[type="radio"] { border-radius:50%; }
.quantity,.ssq-quantity-control { border-color:var(--ssq-border-strong); border-radius:var(--ssq-radius-control); }

/* ==========================================================================
   Prose Reading Container (for CMS Content & Policies)
   ========================================================================== */
.ssq-prose {
  line-height: 1.75;
  color: var(--ssq-text-secondary, #756A64);
}

.ssq-prose h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--ssq-text-main, #292321);
}

.ssq-prose h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--ssq-text-main, #292321);
}

.ssq-prose p {
  margin-bottom: 1.25rem;
}

.ssq-prose ul, .ssq-prose ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.ssq-prose li {
  margin-bottom: 0.5rem;
}

/* Global resilience for merchant content, responsive media, and keyboard users. */
img, video, iframe { max-width: 100%; }
img { height: auto; }
.ssq-site, main, .site-main { min-width: 0; overflow-wrap: break-word; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ssq-terracotta) 78%, white);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}
@media (max-width: 430px) {
  input, select, textarea, button { font-size: max(1rem, 16px); }
}