/*
Theme Name:   FriendsConnect Storefront
Theme URI:    https://reciprocalinteractive.com/friendsconnect/
Description:  FriendsConnect-branded WooCommerce child theme — applies the brand
              (Inter, orange→purple gradient, slate neutrals) to the shop,
              product, cart, checkout, and account pages. Child of a block theme.
Author:       Reciprocal Interactive
Template:     twentytwentyfive
Version:      1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain:  friendsconnect-storefront
*/

/* ============================================================
   Brand tokens (mirror of the design system) — used by the
   WooCommerce rules below. theme.json maps these into the block
   editor / global styles; this stylesheet uses them directly.
   ============================================================ */
:root {
  --fc-orange: #F47920;
  --fc-orange-dark: #D2641A;
  --fc-orange-light: #FDEBD9;
  --fc-purple: #92278F;
  --fc-magenta: #E0218A;
  --fc-gradient: linear-gradient(135deg, #F47920 0%, #E0218A 52%, #92278F 100%);
  --fc-ink: #0F172A;
  --fc-slate-600: #475569;
  --fc-slate-500: #64748B;
  --fc-slate-200: #E2E8F0;
  --fc-slate-50: #F8FAFC;
  --fc-success: #0A7227;
  --fc-success-bg: #E5F4EA;
  --fc-radius-md: 8px;
  --fc-radius-lg: 12px;
  --fc-radius-xl: 16px;
  --fc-radius-pill: 100px;
  --fc-focus-ring: rgba(244,121,32,0.35);
  --fc-font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fc-font-display: 'Dosis', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body { font-family: var(--fc-font); color: var(--fc-ink); }
.woocommerce, .wc-block-components-product-name, .wp-block-woocommerce-cart { font-family: var(--fc-font); }

/* Headings use the Dosis display face (Nunito is the body/UI font) */
h1, h2, h3,
.single-product div.product .product_title,
.woocommerce-loop-product__title,
.woocommerce h2,
.wp-block-site-title a { font-family: var(--fc-font-display); }

/* ---- Announcement bar (injected via functions.php on wp_body_open) ---- */
.fc-announce { background: var(--fc-purple); color: #fff; text-align: center; padding: 9px 16px; font-size: .85rem; font-weight: 600; }

/* ---- Buttons (block + classic WooCommerce) ---- */
.wp-element-button,
.wc-block-components-button:not(.is-link),
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt {
  background: var(--fc-orange) !important;
  color: #fff !important;
  border: 1px solid var(--fc-orange) !important;
  border-radius: var(--fc-radius-md) !important;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
.wp-element-button:hover,
.wc-block-components-button:not(.is-link):hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover {
  background: var(--fc-orange-dark) !important;
  border-color: var(--fc-orange-dark) !important;
}
/* secondary / outline buttons */
.woocommerce a.button.wc-backward, .woocommerce .button.outline {
  background: transparent !important; color: var(--fc-orange) !important;
  border: 1.5px solid var(--fc-orange) !important;
}

a { color: var(--fc-orange); }
a:hover { color: var(--fc-orange-dark); }

/* ---- Links / prices ---- */
.woocommerce-Price-amount, .wc-block-components-product-price { color: var(--fc-ink); font-weight: 800; }
.woocommerce ul.products li.product .price, .wc-block-grid__product-price { color: var(--fc-ink); }

/* ============================================================
   Catalog grid (Shop) — card style ported from the mock
   ============================================================ */
.woocommerce ul.products li.product,
.wc-block-grid__product, .wp-block-woocommerce-product-template li {
  background: #fff;
  border: 1px solid var(--fc-slate-200);
  border-radius: var(--fc-radius-xl);
  padding: 0 0 20px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
  box-shadow: 0 4px 12px rgba(15,23,42,.08);
  transform: translateY(-2px);
}
/* Per-plan tile images are self-contained designs (on white) — show them on a clean light
   panel, not the brand gradient. */
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-template img {
  background: var(--fc-slate-50);
  padding: 20px;
  border-radius: 0;
  margin-bottom: 16px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.05rem; font-weight: 700; padding: 0 20px;
}
.woocommerce ul.products li.product .price { padding: 0 20px; font-size: 1.3rem; }
.woocommerce ul.products li.product .button { margin: 14px 20px 0; display: inline-flex; }
.woocommerce span.onsale,
.wc-block-grid__product .wc-block-grid__product-onsale {
  background: var(--fc-orange); color: #fff; border-radius: var(--fc-radius-pill);
  font-weight: 700; min-height: auto; padding: 4px 12px; top: 14px; left: 14px; right: auto;
}

/* ============================================================
   Single product
   ============================================================ */
.single-product div.product .product_title { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.single-product div.product p.price, .single-product div.product span.price {
  color: var(--fc-ink); font-size: 2rem; font-weight: 800;
}
.single-product div.product .woocommerce-product-gallery {
  background: var(--fc-slate-50); border-radius: var(--fc-radius-xl); padding: 40px;
}
.single-product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--fc-orange); }
.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--fc-orange); }

/* variation / quantity */
.woocommerce div.product form.cart .variations select {
  border: 1px solid var(--fc-slate-200); border-radius: var(--fc-radius-md); padding: 10px 12px;
}

/* ============================================================
   Cart & checkout (block + classic)
   ============================================================ */
.wc-block-components-totals-item__value,
.cart_totals .order-total .woocommerce-Price-amount { font-weight: 800; }

.woocommerce table.shop_table,
.wp-block-woocommerce-checkout-order-summary-block,
.cart_totals {
  border: 1px solid var(--fc-slate-200);
  border-radius: var(--fc-radius-xl);
  overflow: hidden;
}
.woocommerce .cart-collaterals .cart_totals,
.wc-block-components-sidebar {
  background: var(--fc-slate-50);
  border-radius: var(--fc-radius-xl);
  padding: 8px 4px;
}

/* form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
  border: 1px solid var(--fc-slate-200) !important;
  border-radius: var(--fc-radius-md) !important;
  padding: 10px 12px;
}
.woocommerce form .form-row input.input-text:focus,
.wc-block-components-text-input input:focus {
  outline: none;
  border-color: var(--fc-orange) !important;
  box-shadow: 0 0 0 3px var(--fc-focus-ring) !important;
}

/* notices */
.woocommerce-message, .wc-block-components-notice-banner.is-success {
  border-top-color: var(--fc-success) !important;
}
.woocommerce-message::before { color: var(--fc-success); }

/* ============================================================
   My Account
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--fc-orange); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { color: var(--fc-orange); }
.woocommerce-account table.account-orders-table .button { padding: 6px 14px; }

/* status pills */
.woocommerce-orders-table .order-status { border-radius: var(--fc-radius-pill); padding: 3px 12px; font-weight: 700; font-size: .72rem; }
.woocommerce-orders-table .status-completed { background: var(--fc-success-bg); color: var(--fc-success); }
.woocommerce-orders-table .status-processing { background: var(--fc-orange-light); color: var(--fc-orange-dark); }

/* ============================================================
   Header / footer brand (block theme template parts)
   ============================================================ */
.fc-header { border-bottom: 1px solid var(--fc-slate-200); }
.fc-footer { background: var(--fc-ink); color: var(--fc-slate-500); }
.fc-footer a { color: var(--fc-slate-500); }
.fc-footer a:hover { color: #fff; }