/*
Theme Name: Stack Ships
Theme URI: https://stackships.com
Author: Stack Ships
Description: Custom theme for Stack Ships — a sandbox tabletop wargame of modular ship building, salvage, and stacking. Shares its visual language (dark salvage-tech palette, amber HUD accents, monospace data typography) with the Stack Ships Interface plugin, so the site and the tool feel like one product.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: stack-ships-theme
*/

/* ============================================================
   DESIGN TOKENS — identical to the interface plugin's palette,
   on purpose. Same brand everywhere a player looks.
   ============================================================ */
:root{
  --ss-bg:#0d1014;
  --ss-bg-2:#12161b;
  --ss-panel:#1b2129;
  --ss-panel-2:#212934;
  --ss-line:#323d4a;
  --ss-text:#e7e3d8;
  --ss-muted:#8b93a1;
  --ss-amber:#e8a33d;
  --ss-amber-dim:#8a6423;
  --ss-green:#5fbf7a;
  --ss-red:#d9534f;
  --ss-blue:#5b9bd5;
  --ss-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --ss-sans: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ss-radius: 6px;
}

*{ box-sizing:border-box; }

body{
  background:var(--ss-bg);
  color:var(--ss-text);
  font-family:var(--ss-sans);
  line-height:1.6;
  margin:0;
}

a{ color:var(--ss-amber); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--ss-mono);
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--ss-amber);
  line-height:1.3;
}
h1{ font-size:32px; letter-spacing:2.5px; }
h2{ font-size:24px; }
h3{ font-size:18px; color:var(--ss-text); }

.entry-content, .site-content p, .site-content li{ color:var(--ss-text); }
.site-content{ max-width:1200px; margin:0 auto; padding:0 24px 60px; }

/* ============================================================
   HEADER / NAV — a HUD-style bar, angular border instead of a
   soft rounded card, to read as "cockpit instrument" not "blog".
   ============================================================ */
.ss-header{
  background:var(--ss-bg-2);
  border-bottom:1px solid var(--ss-line);
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.ss-logo{
  font-family:var(--ss-mono);
  font-size:22px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--ss-amber);
}
.ss-logo span{ color:var(--ss-muted); font-size:12px; letter-spacing:2px; display:block; font-weight:400; }

.ss-nav ul{ list-style:none; display:flex; gap:6px; margin:0; padding:0; flex-wrap:wrap; }
.ss-nav a{
  display:block;
  font-family:var(--ss-mono);
  font-size:12.5px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--ss-muted);
  padding:9px 14px;
  border:1px solid transparent;
  border-radius:5px;
}
.ss-nav a:hover, .ss-nav .current-menu-item a{
  color:var(--ss-amber);
  border-color:var(--ss-amber-dim);
  background:rgba(232,163,61,0.08);
  text-decoration:none;
}

.ss-cart-link{
  font-family:var(--ss-mono); font-size:12px; letter-spacing:0.5px;
  color:var(--ss-text); border:1px solid var(--ss-line); border-radius:5px;
  padding:8px 14px; background:var(--ss-panel-2);
}
.ss-cart-link:hover{ border-color:var(--ss-amber-dim); text-decoration:none; }

/* ============================================================
   HERO / PAGE HEADER
   ============================================================ */
.ss-hero{
  padding:70px 24px;
  text-align:center;
  border-bottom:1px solid var(--ss-line);
  background:
    linear-gradient(180deg, rgba(232,163,61,0.05), transparent 60%),
    var(--ss-bg-2);
}
.ss-hero h1{ margin-bottom:14px; }
.ss-hero p{
  color:var(--ss-muted); font-size:16px; max-width:640px; margin:0 auto;
}

.page-header{ padding:40px 0 10px; border-bottom:1px solid var(--ss-line); margin-bottom:30px; }

/* ============================================================
   BUTTONS — reused everywhere, including WooCommerce overrides
   below, so "buy" and "learn more" always look like the same
   product family.
   ============================================================ */
.ss-btn, .button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.wp-block-button__link{
  font-family:var(--ss-mono) !important;
  font-size:12.5px !important;
  letter-spacing:0.6px;
  text-transform:uppercase;
  background:var(--ss-panel-2) !important;
  color:var(--ss-text) !important;
  border:1px solid var(--ss-line) !important;
  border-radius:5px !important;
  padding:11px 20px !important;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.ss-btn:hover, .button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .wp-block-button__link:hover{
  border-color:var(--ss-amber-dim) !important;
  background:rgba(232,163,61,0.1) !important;
  color:var(--ss-amber) !important;
  text-decoration:none;
}
.ss-btn-primary, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt,
.wp-block-button.is-style-fill .wp-block-button__link{
  background:var(--ss-amber) !important;
  color:#1b1503 !important;
  border-color:var(--ss-amber) !important;
  font-weight:700;
}
.ss-btn-primary:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{
  filter:brightness(1.08);
  color:#1b1503 !important;
}

/* ============================================================
   CARDS — used for feature blocks, and the same shape WooCommerce
   product cards get styled into below.
   ============================================================ */
.ss-card, .ss-panel{
  background:var(--ss-panel);
  border:1px solid var(--ss-line);
  border-radius:var(--ss-radius);
  padding:22px;
}
.ss-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:20px;
  margin:30px 0;
}

/* ============================================================
   WOOCOMMERCE — product cards read like a collectible sitting
   in a display case: dark panel, amber price tag, glow on hover.
   No template overrides needed, just styling WooCommerce's own
   predictable markup/classes.
   ============================================================ */
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
  list-style:none;
  margin:30px 0 !important;
  padding:0 !important;
}
.woocommerce ul.products li.product{
  background:var(--ss-panel);
  border:1px solid var(--ss-line);
  border-radius:var(--ss-radius);
  padding:16px;
  transition:border-color .15s, transform .15s;
}
.woocommerce ul.products li.product:hover{
  border-color:var(--ss-amber-dim);
  transform:translateY(-2px);
}
.woocommerce ul.products li.product img{ border-radius:4px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--ss-mono); font-size:14px; color:var(--ss-text);
  text-transform:none; letter-spacing:0; margin:12px 0 4px;
}
.woocommerce ul.products li.product .price{
  font-family:var(--ss-mono); color:var(--ss-amber) !important; font-weight:700;
}
.woocommerce ul.products li.product .price ins{ color:var(--ss-amber); text-decoration:none; }
.woocommerce ul.products li.product .price del{ color:var(--ss-muted); }
.woocommerce span.onsale{
  background:var(--ss-red) !important; font-family:var(--ss-mono); font-size:10px;
  letter-spacing:1px; border-radius:3px;
}

.woocommerce div.product div.summary{ color:var(--ss-text); }
.woocommerce div.product p.price, .woocommerce div.product span.price{
  color:var(--ss-amber) !important; font-family:var(--ss-mono); font-size:20px;
}
.woocommerce table.shop_table{
  border-color:var(--ss-line) !important; background:var(--ss-panel);
}
.woocommerce table.shop_table th{ font-family:var(--ss-mono); color:var(--ss-muted); text-transform:uppercase; font-size:11px; }
.woocommerce table.shop_table td{ border-color:var(--ss-line) !important; color:var(--ss-text); }

.woocommerce-message, .woocommerce-info{
  background:var(--ss-panel) !important; border-left-color:var(--ss-blue) !important; color:var(--ss-text) !important;
}
.woocommerce-error{ background:var(--ss-panel) !important; border-left-color:var(--ss-red) !important; color:var(--ss-text) !important; }

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce select{
  background:var(--ss-panel-2) !important; border:1px solid var(--ss-line) !important;
  color:var(--ss-text) !important; border-radius:5px !important; font-family:var(--ss-sans) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.ss-footer{
  border-top:1px solid var(--ss-line);
  background:var(--ss-bg-2);
  padding:30px 24px;
  text-align:center;
  color:var(--ss-muted);
  font-family:var(--ss-mono);
  font-size:12px;
  letter-spacing:0.5px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:720px){
  .ss-header{ flex-direction:column; align-items:flex-start; }
  .ss-hero{ padding:50px 20px; }
  .ss-hero h1{ font-size:24px; }
}