/* =============================================================================
   Share the Dignity — StoreConnect Brand Override
   Upload to StoreConnect as: theme-supplement.css
   This file applies the Share the Dignity brand identity to the SC store.
   It does not replace SC's layout or utility system — it layers brand styles on top.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. FONTS
   Adobe Typekit kit: hcl5fzh
   Families: halyard-display (body/UI), ivypresto-display (headings/display)
   Note: Also register this kit in SC Theme Settings → Custom Fonts if available.
   ----------------------------------------------------------------------------- */

@import url("https://use.typekit.net/hcl5fzh.css");


/* -----------------------------------------------------------------------------
   2. BRAND TOKENS
   Defines Share the Dignity colour palette as CSS custom properties.
   These override SC's defaults at the root level.
   ----------------------------------------------------------------------------- */

:root {
  --brand-primary:       #df388c;
  --brand-primary-dark:  #ce2d7e;
  --brand-primary-light: #fff6fa;
  --brand-bg-light:      #f8f8f8;
  --brand-bg-dark:       #4b4549;
  --brand-black:         #000000;
  --brand-white:         #ffffff;
  --brand-gradient:      linear-gradient(135deg, #df388c 0%, #ce2d7e 100%);
}


/* -----------------------------------------------------------------------------
   3. BASE TYPOGRAPHY
   Apply brand fonts to body and headings.
   ----------------------------------------------------------------------------- */

body {
  font-family: 'halyard-display', sans-serif;
  color: #000000;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'ivypresto-display', serif;
  font-weight: 400;
}

a {
  color: #df388c;
  text-decoration: none;
}

a:hover {
  color: #ce2d7e;
}


/* -----------------------------------------------------------------------------
   4. BUTTONS
   Pill-shaped, uppercase, brand pink. Matches the WP site button style exactly.
   ----------------------------------------------------------------------------- */

.btn,
.button,
[class*="btn-"],
[class*="button-"] {
  border-radius: 50px;
  font-family: 'halyard-display', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
  cursor: pointer;
}

.btn:hover,
.button:hover {
  transform: translateY(-2px);
}

/* Primary — solid pink */
.btn-primary,
.button-primary {
  background-color: #df388c;
  border: 1px solid #df388c;
  color: #ffffff;
}

.btn-primary:hover,
.button-primary:hover {
  background-color: #ce2d7e;
  border-color: #ce2d7e;
  color: #ffffff;
}

/* Secondary — outline pink */
.btn-secondary,
.button-secondary {
  background-color: transparent;
  border: 1px solid #df388c;
  color: #df388c;
}

.btn-secondary:hover,
.button-secondary:hover {
  background-color: #ce2d7e;
  border-color: #ce2d7e;
  color: #ffffff;
}

/* Dark — black fill */
.btn-dark,
.button-dark {
  background-color: #000000;
  border: 1px solid #000000;
  color: #ffffff;
}

.btn-dark:hover,
.button-dark:hover {
  background-color: #df388c;
  border-color: #df388c;
}

/* Ghost / white — for dark backgrounds */
.btn-white,
.button-white {
  background-color: #ffffff;
  border: 1px solid #ffffff;
  color: #df388c;
}

.btn-white:hover,
.button-white:hover {
  background-color: #df388c;
  border-color: #df388c;
  color: #ffffff;
}


/* -----------------------------------------------------------------------------
   5. FORM ELEMENTS
   Style inputs and submit buttons to match brand.
   ----------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
  font-family: 'halyard-display', sans-serif;
  border: 1px solid #000000;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  color: #000000;
  background-color: #ffffff;
  transition: border-color 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #df388c;
}

input[type="submit"],
button[type="submit"] {
  background-color: #df388c;
  border: 1px solid #df388c;
  color: #ffffff;
  border-radius: 50px;
  font-family: 'halyard-display', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 15px 28px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: #ce2d7e;
  border-color: #ce2d7e;
  transform: translateY(-2px);
}


/* -----------------------------------------------------------------------------
   6. PRODUCT & STORE ELEMENTS
   Brand colour applied to SC's key interactive elements.
   ----------------------------------------------------------------------------- */

/* Price highlight */
.product__price,
.price,
[class*="price"] {
  color: #df388c;
  font-family: 'halyard-display', sans-serif;
  font-weight: 700;
}

/* Sale badge */
.badge--sale,
.product-badge,
[class*="badge"] {
  background-color: #df388c;
  color: #ffffff;
  border-radius: 4px;
  font-family: 'halyard-display', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Quantity selector & cart interactions */
.quantity__button,
.cart__checkout {
  border-color: #df388c;
  color: #df388c;
}

/* Active/selected states — tabs, filters, swatches */
.tab--active,
.filter--active,
[aria-selected="true"] {
  color: #df388c;
  border-color: #df388c;
}


/* -----------------------------------------------------------------------------
   7. NAVIGATION ACCENT
   Apply brand pink to active nav items and hover states.
   ----------------------------------------------------------------------------- */

nav a:hover,
nav a.active,
nav a[aria-current="page"] {
  color: #df388c;
}


/* -----------------------------------------------------------------------------
   8. UTILITY OVERRIDES
   Minimal brand-specific helpers for SC content blocks.
   ----------------------------------------------------------------------------- */

.brand-pink         { color: #df388c; }
.brand-bg-pink      { background-color: #df388c; color: #ffffff; }
.brand-bg-blush     { background-color: #fff6fa; }
.brand-bg-dark      { background-color: #4b4549; color: #ffffff; }
.brand-bg-light     { background-color: #f8f8f8; }