/*
Theme Name:   TxSTEMed Store
Theme URI:    https://store.txstemed.org
Description:  Dark, technical child theme of Storefront for Texas STEM Ed. Groups the shop page into event registrations up top and swag below.
Author:       Texas STEM Ed, Inc.
Author URI:   https://txstemed.org
Template:     storefront
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  txstemed-store
*/

/* ============================================================
   Tokens
   ============================================================ */
:root {
  --tx-bg:      #0a1929;
  --tx-surface: #0f2436;
  --tx-raised:  #14304a;
  --tx-line:    #23415c;
  --tx-text:    #dde8f2;
  --tx-muted:   #8fa6bb;
  --tx-head:    #ffffff;
  --tx-signal:  #e8501f;
  --tx-signal2: #ff6a3d;
  --tx-beacon:  #ffc24a;
  --tx-good:    #3fbf8f;

  --tx-fdisplay: "Barlow Condensed", "Arial Narrow", sans-serif;
  --tx-fbody:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tx-fmono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --tx-r: 3px;
}

/* ============================================================
   Base
   ============================================================ */
body,
body.woocommerce,
body.woocommerce-page {
  background-color: var(--tx-bg) !important;
  color: var(--tx-text);
  font-family: var(--tx-fbody);
  font-size: 16px;
  line-height: 1.65;
}

body::before { display: none; }

h1, h2, h3, h4, h5, h6,
.site-title, .page-title, .entry-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--tx-fdisplay) !important;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.1;
  color: var(--tx-head);
}

p, li, td, th, dd, dt, label { color: var(--tx-text); }

a { color: var(--tx-signal2); }
a:hover, a:focus { color: var(--tx-beacon); }

:focus-visible { outline: 3px solid var(--tx-signal); outline-offset: 2px; }

hr, .storefront-breadcrumb { border-color: var(--tx-line); }

/* ============================================================
   Header / footer
   ============================================================ */
.site-header {
  background-color: var(--tx-surface) !important;
  border-bottom: 1px solid var(--tx-line);
  padding-top: 1.2em;
  padding-bottom: 1.2em;
}
.site-header .site-title a,
.site-header .site-description,
.site-header a:not(.button) { color: var(--tx-head) !important; }
.site-header .site-title a:hover { color: var(--tx-beacon) !important; }

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a { color: var(--tx-text) !important; }
.main-navigation ul.menu > li > a:hover { color: var(--tx-beacon) !important; }
.main-navigation ul.menu ul,
.main-navigation ul.nav-menu ul {
  background-color: var(--tx-raised);
  border: 1px solid var(--tx-line);
}

.site-header-cart .cart-contents { color: var(--tx-text) !important; }
.site-header-cart .widget_shopping_cart {
  background-color: var(--tx-raised);
  border: 1px solid var(--tx-line);
}

.site-footer {
  background-color: var(--tx-surface) !important;
  color: var(--tx-muted);
  border-top: 1px solid var(--tx-line);
}
.site-footer a { color: var(--tx-text); }
.site-footer h1, .site-footer h2, .site-footer h3 { color: var(--tx-head); }

.storefront-handheld-footer-bar {
  background-color: var(--tx-surface);
  border-top: 1px solid var(--tx-line);
}
.storefront-handheld-footer-bar ul li > a { color: var(--tx-text); }

/* ============================================================
   Buttons
   ============================================================ */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--tx-signal) !important;
  color: #fff !important;
  border: 0;
  border-radius: var(--tx-r);
  font-family: var(--tx-fbody);
  font-weight: 600;
  text-shadow: none;
  padding: .75em 1.4em;
}
.button:hover,
button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--tx-signal2) !important;
  color: #fff !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--tx-signal) !important;
  color: #fff !important;
}

.added_to_cart { color: var(--tx-beacon); }

/* ============================================================
   Forms
   ============================================================ */
input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="number"], textarea, select,
.select2-container .select2-selection--single {
  background-color: var(--tx-bg);
  border: 1px solid var(--tx-line);
  color: var(--tx-text);
  border-radius: var(--tx-r);
  box-shadow: none;
}
input::placeholder, textarea::placeholder { color: var(--tx-muted); }

.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--tx-text); }
.select2-dropdown { background-color: var(--tx-raised); border-color: var(--tx-line); color: var(--tx-text); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--tx-signal); }

/* ============================================================
   Shop sections — the grouped layout
   ============================================================ */
.tx-section { margin: 0 0 3.5em; }

.tx-section__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: .6rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--tx-line);
}
.tx-section__head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.tx-section__head .tx-kicker {
  font-family: var(--tx-fmono);
  font-size: .74rem;
  color: var(--tx-beacon);
  margin: 0;
  flex: none;
}
.tx-section__head p.tx-note {
  margin: 0 0 0 auto;
  color: var(--tx-muted);
  font-size: .9rem;
}

.tx-empty {
  border: 1px dashed var(--tx-line);
  background: var(--tx-surface);
  color: var(--tx-muted);
  padding: 2rem;
  text-align: center;
  border-radius: var(--tx-r);
}

/* ---- shared product card ---- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--tx-surface);
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-r);
  padding: 0;
  overflow: hidden;
  margin-bottom: 2.2em;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.woocommerce ul.products li.product a img {
  margin: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--tx-line);
  width: 100%;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--tx-head);
  padding: 1rem 1.1rem 0;
  margin: 0 0 .3rem;
}

.woocommerce ul.products li.product .price {
  display: block;
  color: var(--tx-beacon) !important;
  font-family: var(--tx-fmono);
  font-weight: 500;
  padding: 0 1.1rem;
  margin: 0 0 .9rem;
}
.woocommerce ul.products li.product .price del { color: var(--tx-muted); opacity: .7; }
.woocommerce ul.products li.product .price ins { color: var(--tx-beacon); text-decoration: none; }

.woocommerce ul.products li.product .button {
  margin: auto 1.1rem 1.2rem;
  align-self: flex-start;
}

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background-color: var(--tx-signal);
  color: #fff;
  border-radius: var(--tx-r);
  top: .7rem; right: .7rem; left: auto;
  margin: 0;
  min-height: 0; min-width: 0;
  padding: .2rem .6rem;
  line-height: 1.5;
  font-family: var(--tx-fmono);
  font-size: .72rem;
}

.woocommerce ul.products li.product .star-rating { margin: 0 1.1rem .5rem; color: var(--tx-beacon); }

/* ---- REGISTRATION: large, prominent ---- */
.tx-registration ul.products li.product {
  border-top: 3px solid var(--tx-signal);
}
.tx-registration ul.products li.product .woocommerce-loop-product__title {
  font-size: clamp(1.4rem, 2.3vw, 1.9rem);
  padding-top: 1.2rem;
}
.tx-registration ul.products li.product .price {
  font-size: 1.15rem;
  margin-bottom: 1.1rem;
}
.tx-registration ul.products li.product .button { font-size: 1rem; }

/* Stock messaging reads as capacity on registration items */
.tx-registration .stock {
  font-family: var(--tx-fmono);
  font-size: .8rem;
  padding: 0 1.1rem;
  margin: -.4rem 0 .9rem;
}
.tx-registration .stock.in-stock { color: var(--tx-good); }
.tx-registration .stock.out-of-stock { color: var(--tx-signal2); }

/* ---- SWAG: compact boxes ---- */
.tx-swag ul.products li.product {
  border-top: 3px solid var(--tx-line);
  margin-bottom: 1.6em;
}
.tx-swag ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--tx-fbody) !important;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  padding: .8rem .85rem 0;
}
.tx-swag ul.products li.product .price {
  font-size: .9rem;
  padding: 0 .85rem;
  margin-bottom: .7rem;
}
.tx-swag ul.products li.product .button {
  font-size: .82rem;
  padding: .5em .95em;
  margin: auto .85rem 1rem;
}
.tx-swag ul.products li.product .star-rating { margin: 0 .85rem .4rem; font-size: .8em; }

/* ============================================================
   Single product
   ============================================================ */
.woocommerce div.product .product_title { font-size: clamp(2rem, 4vw, 3rem); }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--tx-beacon);
  font-family: var(--tx-fmono);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--tx-surface);
  border-color: var(--tx-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--tx-raised);
  border-bottom-color: var(--tx-raised);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--tx-text); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--tx-line); }
.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--tx-raised);
  border: 1px solid var(--tx-line);
  border-top: 0;
  padding: 1.5rem;
}
.woocommerce div.product form.cart .variations label { color: var(--tx-text); }
.woocommerce .quantity .qty {
  background: var(--tx-bg);
  border: 1px solid var(--tx-line);
  color: var(--tx-text);
}

/* ============================================================
   Cart / checkout / account
   ============================================================ */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  background: var(--tx-surface);
  border-color: var(--tx-line);
  color: var(--tx-text);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: var(--tx-line); }
.woocommerce table.shop_table thead th { color: var(--tx-head); }
.woocommerce-cart table.cart td.actions .coupon .input-text { background: var(--tx-bg); }

.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading + #order_review {
  background: var(--tx-surface);
}

.woocommerce-checkout #payment {
  background: var(--tx-surface);
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-r);
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom-color: var(--tx-line);
}
.woocommerce-checkout #payment ul.payment_methods li {
  border-bottom: 1px solid var(--tx-line);
  padding: 1rem;
}
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: 0; }
.woocommerce-checkout #payment ul.payment_methods label { font-weight: 600; color: var(--tx-head); }
.woocommerce-checkout #payment div.payment_box {
  background: var(--tx-raised);
  color: var(--tx-text);
  border-radius: var(--tx-r);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--tx-raised); }
.woocommerce-checkout #payment div.form-row { padding: 1rem; }

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  background-color: var(--tx-raised);
  color: var(--tx-text);
  border-top: 3px solid var(--tx-beacon);
  border-radius: var(--tx-r);
}
.woocommerce-message { border-top-color: var(--tx-good); }
.woocommerce-error { border-top-color: var(--tx-signal); }
.woocommerce-info a, .woocommerce-message a { color: var(--tx-beacon); }

.woocommerce-MyAccount-navigation ul li a { color: var(--tx-text); }
.woocommerce-MyAccount-navigation ul li.is-active a { color: var(--tx-beacon); }

.woocommerce-breadcrumb, .woocommerce-breadcrumb a { color: var(--tx-muted); }

/* ============================================================
   Misc
   ============================================================ */
.widget { color: var(--tx-text); }
.widget h2.widget-title { color: var(--tx-head); }

.storefront-sorting select,
.woocommerce-ordering select { background-color: var(--tx-bg); }

.woocommerce-result-count { color: var(--tx-muted); }

::selection { background: var(--tx-signal); color: #fff; }

/* Narrow screens: keep swag at two across rather than one */
@media (max-width: 767px) {
  .tx-swag ul.products li.product {
    width: 48% !important;
    float: left !important;
    clear: none !important;
    margin-right: 4% !important;
  }
  .tx-swag ul.products li.product:nth-of-type(2n) { margin-right: 0 !important; }
  .tx-swag ul.products li.product:nth-of-type(2n+1) { clear: both !important; }
}

/* ============================================================
   "Shipping to you" badge — non-virtual products only
   ============================================================ */
.tx-ships {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-family: var(--tx-fmono);
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--tx-beacon);
  background: rgba(255, 194, 74, .10);
  border: 1px solid rgba(255, 194, 74, .38);
  border-radius: 999px;
  padding: .3rem .62rem .3rem .5rem;
  margin: 0 0 .7rem;
}
.tx-ships__icon { flex: none; opacity: .9; }

/* position inside the grid cards */
.woocommerce ul.products li.product .tx-ships { margin-left: 1.1rem; }
.tx-swag ul.products li.product .tx-ships {
  margin-left: .85rem;
  font-size: .67rem;
  padding: .26rem .55rem .26rem .44rem;
}

/* single product page sits under the price, so give it room above */
.woocommerce div.product .summary .tx-ships {
  margin: .25rem 0 1.1rem;
  font-size: .78rem;
  padding: .38rem .75rem .38rem .6rem;
}

@media (forced-colors: active) {
  .tx-ships { border-color: CanvasText; color: CanvasText; }
}