/*
Theme Name:   BTCGC Storefront
Theme URI:    https://bitcoingiftcards.com.au/
Description:  Bitcoin Gift Cards child theme for Storefront. Reproduces the
              2026 BTCGC refresh (Bitcoin-orange accent, slate ink, card-style
              product grid) on top of the maintained Storefront parent theme.
Author:       Bitcoin Gift Cards
Template:     storefront
Version:      1.3.1
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  btcgc-storefront
*/

/* ================================================================
   BITCOIN GIFT CARDS — Storefront reskin
   ----------------------------------------------------------------
   Storefront loads this stylesheet AFTER its own compiled style.css
   and woocommerce.css, so these rules override the parent. Colours
   Storefront exposes through the Customizer (header bg, accent,
   footer) are ALSO set here in CSS so the theme looks right on a
   fresh install with no Customizer clicks — see README for the
   equivalent Customizer values if you prefer to set them there.
   ================================================================ */

:root {
  --btc-orange: #f7931a;
  --btc-orange-dark: #dd7d05;
  --btc-teal: #35707e;
  --btc-ink: #1f2a37;
  --btc-ink-soft: #2b3947;
  --btc-text: #3b4656;
  --btc-muted: #6b7684;
  --btc-border: #e5e9f0;
  --btc-bg: #f7f8fa;
  --btc-card: #ffffff;
  --btc-radius: 12px;
  --btc-shadow: 0 1px 2px rgba(31, 42, 55, 0.06);
  --btc-shadow-lift: 0 10px 24px -8px rgba(31, 42, 55, 0.18);
}


/* ----------------------------------------------------------------
   1. TYPOGRAPHY & BASE
---------------------------------------------------------------- */

body {
  background-color: var(--btc-bg);
  color: var(--btc-text);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.site-title, .site-branding h1 a {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--btc-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}

a {
  color: var(--btc-teal);
}
a:hover {
  color: var(--btc-orange);
}

.page-template-template-homepage-php .site-content,
.site-content {
  background-color: var(--btc-bg);
}

::selection { background: rgba(247, 147, 26, 0.25); }


/* ----------------------------------------------------------------
   2. HEADER — white band, logo at natural size, matching the
      Mystile refresh (Customizer: Header background = #ffffff)

      Locked with !important on purpose: this always wins over the
      Customizer's own header-background output, so that control is
      effectively disabled (the field still shows, it just won't do
      anything). This is intentional — the white header + orange top
      accent is core to the design, not a per-site tweak. To change
      it, edit the hex value here, not the Customizer.
---------------------------------------------------------------- */

.site-header {
  background-color: #ffffff !important;
  border-top: 3px solid var(--btc-orange);
  border-bottom: 1px solid var(--btc-border);
  padding-top: 0.9em;
  padding-bottom: 0;
}

.site-branding {
  margin-bottom: 0.9em;
}

/* The BTCGC logo is drawn for a light background — keep it modest */
.site-branding img,
.custom-logo,
.site-branding .custom-logo-link img {
  max-width: 260px;
  height: auto;
}

.site-branding .site-title a,
.site-branding .site-title a:hover,
.site-header .site-branding h1 a {
  color: var(--btc-ink);
}

.site-header .secondary-navigation a,
.site-header .site-branding .site-description {
  color: var(--btc-muted);
}
.site-header .secondary-navigation a:hover {
  color: var(--btc-orange);
}

/* Product search box: quiet grey pill on white */
.site-search {
  margin-top: 0.5em;
}
.site-search .widget_product_search input[type="search"],
.site-header .storefront-product-search-field {
  border-radius: 999px;
  border: 1px solid #d4dbe4;
  background: #f1f3f7;
  color: var(--btc-ink);
}
.site-header .storefront-product-search-field::placeholder {
  color: var(--btc-muted);
}


/* ----------------------------------------------------------------
   3. PRIMARY NAVIGATION — slate links on white, orange accent
      (Customizer: accent = #f7931a)
---------------------------------------------------------------- */

.storefront-primary-navigation,
.main-navigation {
  background-color: transparent;
}

.main-navigation ul li a {
  color: var(--btc-ink);
  font-weight: 500;
}
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a {
  color: var(--btc-orange);
}
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
  color: var(--btc-orange);
  font-weight: 700;
}

/* dropdown submenus: white card with soft shadow */
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
  background-color: #fff;
  border: 1px solid var(--btc-border);
  border-radius: 10px;
  box-shadow: var(--btc-shadow-lift);
}
.main-navigation ul.menu ul.sub-menu li a,
.main-navigation ul.nav-menu ul.children li a {
  color: var(--btc-ink);
}

/* Header cart button + contents count */
.site-header-cart .cart-contents {
  color: var(--btc-ink);
}
.site-header-cart .cart-contents:hover {
  color: var(--btc-orange);
}
.site-header-cart .cart-contents .count {
  background-color: var(--btc-orange);
  color: #fff;
}
.site-header-cart .widget_shopping_cart {
  background-color: #fff;
  border: 1px solid var(--btc-border);
  box-shadow: var(--btc-shadow-lift);
}


/* ----------------------------------------------------------------
   3b. DENSITY — pull Storefront's airy spacing in to match the
       tighter Mystile-refresh layout
---------------------------------------------------------------- */

.col-full {
  max-width: 1120px;
}

.site-content {
  padding-top: 1.8em;
}

/* No breadcrumbs on the BTCGC design (also removed in functions.php) */
.storefront-breadcrumb {
  display: none;
}

/* No prev/next product thumbnails floating at the screen edges */
.storefront-product-pagination {
  display: none;
}

/* No "Showing all X results" count */
.woocommerce-result-count {
  display: none;
}

.site-main {
  margin-bottom: 2em;
}

.storefront-sorting {
  margin-bottom: 1.2em;
}

.woocommerce-products-header,
.page-header {
  margin-bottom: 1em;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Storefront's full-width template centers page titles with big padding —
   BTCGC titles are left-aligned and tight */
.storefront-full-width-content .woocommerce-products-header,
.storefront-full-width-content .entry-header,
.storefront-full-width-content .page-header {
  text-align: left;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 1em;
}

ul.products,
.woocommerce ul.products {
  margin-bottom: 2em;
}


/* ----------------------------------------------------------------
   4. BUTTONS — flat Bitcoin orange
---------------------------------------------------------------- */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.wp-block-button__link,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--btc-orange);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(221, 125, 5, 0.35);
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover,
.wp-block-button__link:hover,
.wc-block-components-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--btc-orange-dark);
  color: #fff;
  box-shadow: 0 4px 10px -2px rgba(221, 125, 5, 0.45);
  transform: translateY(-1px);
}

/* Secondary / ghost actions (e.g. "View cart" after add) stay quieter */
.woocommerce a.added_to_cart {
  background-color: var(--btc-ink);
}
.woocommerce a.added_to_cart:hover {
  background-color: var(--btc-ink-soft);
}


/* ----------------------------------------------------------------
   5. FORMS
---------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
select,
.select2-container .select2-selection {
  border-radius: 10px;
  border: 1px solid #d4dbe4;
  background-color: #fff;
  color: var(--btc-ink);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--btc-orange);
  box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.18);
  outline: none;
}


/* ----------------------------------------------------------------
   6. PRODUCT GRID — white cards with hover lift
---------------------------------------------------------------- */

/* CSS grid replaces Storefront's float layout: symmetric columns and
   equal-height rows, same as the Mystile refresh */
ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* clearfix pseudo-elements would become phantom grid cells */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
}
@media (min-width: 600px) {
  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
@media (min-width: 900px) {
  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none;
  width: auto !important;
  margin: 0 !important;
  background: var(--btc-card);
  border: 1px solid var(--btc-border);
  border-radius: var(--btc-radius);
  box-shadow: var(--btc-shadow);
  padding: 1.4em 1.2em 1.5em;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  /* equal-height cards: the product link grows, buttons align at the bottom */
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
  flex: 1 1 auto;
  display: block;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  align-self: center;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--btc-shadow-lift);
  border-color: #d8dfe9;
}

.woocommerce ul.products li.product a img {
  border-radius: 10px;
  margin-bottom: 1em;
  /* normalise mixed image sizes/ratios into one consistent box */
  width: 100%;
  height: 160px;
  object-fit: contain;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--btc-ink);
  font-size: 1rem;
  font-weight: 600;
  padding-bottom: 0.4em;
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
  color: var(--btc-orange);
}

.woocommerce ul.products li.product .price {
  color: var(--btc-muted);
  font-weight: 500;
}

/* loop add-to-cart sits centered under the card */
.woocommerce ul.products li.product .button {
  margin-top: 0.3em;
}

.woocommerce ul.products li.product .star-rating {
  margin: 0 auto 0.6em;
}


/* ----------------------------------------------------------------
   7. STAR RATINGS, SALE BADGE, PRICE
---------------------------------------------------------------- */

.star-rating span::before,
.woocommerce .star-rating span::before {
  color: var(--btc-orange);
}

.onsale,
.woocommerce span.onsale {
  background-color: var(--btc-orange);
  color: #fff;
  border-radius: 999px;
  border: 0;
  min-height: auto;
  min-width: auto;
  line-height: 1;
  padding: 0.5em 1em;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--btc-orange);
  font-weight: 700;
}


/* ----------------------------------------------------------------
   8. SINGLE PRODUCT
---------------------------------------------------------------- */

.single-product div.product .woocommerce-product-gallery {
  border-radius: var(--btc-radius);
}
.single-product div.product .woocommerce-product-gallery__image img {
  border-radius: var(--btc-radius);
}

.woocommerce-tabs ul.tabs li {
  background: none;
  border: 0;
  border-radius: 0;
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--btc-ink);
}
.woocommerce-tabs ul.tabs::before {
  border-bottom-color: var(--btc-border);
}

/* No product meta (SKU "N/A", "Category: Uncategorized") — noise on a
   gift-card store */
.single-product div.product .product_meta {
  display: none;
}

/* Pull the tabs/reviews section up closer under the summary */
.single-product div.product .woocommerce-tabs {
  padding-top: 0;
  margin-top: 0;
}
.single-product div.product .summary.entry-summary {
  margin-bottom: 1em;
}


/* ----------------------------------------------------------------
   9. NOTICES / TABLES
---------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  border-top-color: var(--btc-orange);
  background-color: var(--btc-card);
  /* Storefront's notices are light-on-dark; ours are cards, so re-ink
     the text or it renders white-on-white */
  color: var(--btc-text);
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--btc-orange);
}
.woocommerce-error { border-top-color: #d9534f; }

.woocommerce table.shop_table {
  border-radius: var(--btc-radius);
  border-color: var(--btc-border);
}


/* ----------------------------------------------------------------
   10. FOOTER — dark slate (Customizer: Footer background = #1f2a37)

       Also locked with !important — same reasoning as the header
       above: the dark footer is core to the design, so the
       Customizer's footer-background field is intentionally
       overridden. Edit the hex value here to change it.
---------------------------------------------------------------- */

.site-footer {
  background-color: var(--btc-ink) !important;
  color: #97a3b1;
}
.site-footer a {
  color: #cdd5de;
}
.site-footer a:hover {
  color: var(--btc-orange);
}
.site-footer .widget-title,
.site-footer h1, .site-footer h2, .site-footer h3 {
  color: #fff;
}

/* Footer blocks seeded from the Mystile footer custom text */
.btcgc-footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.2em;
}
.btcgc-footer-social img {
  display: block;
}
.btcgc-footer-badge {
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
}
.btcgc-footer-badge p {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0.5em 0 0;
}
.btcgc-footer-legal {
  text-align: right;
  font-size: 13px;
  line-height: 1.7;
}
@media only screen and (max-width: 767px) {
  .btcgc-footer-legal {
    text-align: left;
  }
}


/* ----------------------------------------------------------------
   11. MOBILE — handheld footer bar accent
---------------------------------------------------------------- */

.storefront-handheld-footer-bar {
  background-color: var(--btc-ink);
}
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li.cart > a {
  color: #e7ecf2;
}
.storefront-handheld-footer-bar ul li.cart .count {
  background-color: var(--btc-orange);
  border-color: var(--btc-orange);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .woocommerce ul.products li.product:hover { transform: none; }
}