/*
Theme Name: Field Command
Theme URI: https://tshirtsopedia.com
Author: Tshirtsopedia
Author URI: https://tshirtsopedia.com
Description: A premium quartermaster-ledger themed WooCommerce theme for military-inspired apparel and accessories. Built for a dark, disciplined, catalog-like retail experience.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: field-command
Tags: e-commerce, woocommerce, dark, custom-menu, custom-logo, one-column

WooCommerce is not required to activate this theme, but it is required
for the shop, product and cart templates to render correctly.
*/

/* ==========================================================================
   0. Design tokens
   ========================================================================== */
:root {
  --fc-bg: #1C1B18;
  --fc-bg-alt: #242219;
  --fc-bg-raised: #2A281F;
  --fc-canvas: #A9906F;
  --fc-canvas-dim: #7D6C52;
  --fc-paper: #EDE7DA;
  --fc-paper-dim: #C9C2AF;
  --fc-ink: #1C1B18;
  --fc-stamp: #C1440E;
  --fc-stamp-dim: #8C3009;
  --fc-line: #3A382F;
  --fc-line-light: rgba(237, 231, 218, 0.14);
  --fc-gunmetal: #4B4E46;
  --fc-success: #6B8A5A;

  --fc-font-display: 'Big Shoulders Stencil', 'Arial Narrow', sans-serif;
  --fc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fc-font-mono: 'Space Mono', 'Courier New', monospace;

  --fc-radius: 2px;
  --fc-max-width: 1240px;
}

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fc-bg);
  color: var(--fc-paper);
  font-family: var(--fc-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--fc-font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  line-height: 1.05;
  color: var(--fc-paper);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: 1.3rem; }

.fc-eyebrow {
  font-family: var(--fc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fc-canvas);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fc-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--fc-canvas);
  display: inline-block;
}

.fc-container {
  max-width: var(--fc-max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.fc-section { padding: 80px 0; }
.fc-section-tight { padding: 48px 0; }

/* WooCommerce's own archive/shop pages (Shop, category archives) are wrapped
   in #primary.content-area by WooCommerce itself — not by our front-page.php
   or page.php templates — so they never got the .fc-container treatment.
   Applying it here directly gets Shop/category pages the same margins,
   max-width, and vertical rhythm as every hand-built template. */
#primary.content-area {
  max-width: var(--fc-max-width);
  margin: 0 auto;
  padding: 48px 24px 80px;
}

@media (max-width: 782px) {
  .fc-section { padding: 52px 0; }
  #primary.content-area { padding: 32px 20px 52px; }
}

/* ==========================================================================
   2. Buttons
   ========================================================================== */
.fc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fc-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1px solid var(--fc-paper);
  background: transparent;
  color: var(--fc-paper);
  border-radius: var(--fc-radius);
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.fc-btn:hover { background: var(--fc-paper); color: var(--fc-ink); }
.fc-btn--solid {
  background: var(--fc-stamp);
  border-color: var(--fc-stamp);
  color: var(--fc-paper);
}
.fc-btn--solid:hover { background: var(--fc-stamp-dim); border-color: var(--fc-stamp-dim); color: var(--fc-paper); }

/* WooCommerce buttons inherit the same language */
a.button, button.button, .woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce input.button {
  font-family: var(--fc-font-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: var(--fc-stamp) !important;
  color: var(--fc-paper) !important;
  border: 1px solid var(--fc-stamp) !important;
  border-radius: var(--fc-radius) !important;
  padding: 12px 22px !important;
  transition: background 0.2s ease !important;
}
a.button:hover, button.button:hover, .woocommerce a.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce input.button:hover {
  background: var(--fc-stamp-dim) !important;
  border-color: var(--fc-stamp-dim) !important;
}

/* ==========================================================================
   3. Header
   ========================================================================== */
.fc-topbar {
  background: var(--fc-bg-alt);
  border-bottom: 1px solid var(--fc-line);
  font-family: var(--fc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fc-canvas);
  text-align: center;
  padding: 8px 12px;
}

.fc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(28, 27, 24, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--fc-line);
}
.fc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  max-width: var(--fc-max-width);
  margin: 0 auto;
}
.fc-logo {
  font-family: var(--fc-font-display);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fc-paper);
}
.fc-logo img { max-height: 42px; }
.fc-nav ul { display: flex; gap: 32px; }
.fc-nav a {
  font-family: var(--fc-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fc-paper-dim);
  position: relative;
  padding-bottom: 4px;
}
.fc-nav a:hover, .fc-nav .current-menu-item a { color: var(--fc-canvas); }
.fc-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--fc-stamp);
  transition: width 0.25s ease;
}
.fc-nav a:hover::after { width: 100%; }

.fc-header-actions { display: flex; align-items: center; gap: 20px; }
.fc-cart-link {
  font-family: var(--fc-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--fc-line);
  padding: 8px 14px;
  border-radius: var(--fc-radius);
}
.fc-cart-count {
  background: var(--fc-stamp);
  color: var(--fc-paper);
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 10px;
}
.fc-menu-toggle { display: none; background: none; border: none; color: var(--fc-paper); font-size: 1.4rem; }

@media (max-width: 900px) {
  .fc-nav { display: none; }
  .fc-nav.fc-nav--open {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--fc-bg);
    border-bottom: 1px solid var(--fc-line);
    padding: 20px 24px;
  }
  .fc-nav.fc-nav--open ul { flex-direction: column; gap: 18px; }
  .fc-menu-toggle { display: block; }
}

/* ==========================================================================
   4. Hero — the "manifest ticket"
   ========================================================================== */
.fc-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--fc-line);
  padding: 100px 0 90px;
}
.fc-hero-texture {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(115deg, rgba(169,144,111,0.05) 0px, rgba(169,144,111,0.05) 2px, transparent 2px, transparent 60px);
  pointer-events: none;
  will-change: transform;
}
.fc-manifest {
  position: relative;
  max-width: 760px;
  border: 1px solid var(--fc-line-light);
  padding: 40px 44px;
  background: linear-gradient(180deg, rgba(42,40,31,0.6), rgba(28,27,24,0.2));
}
.fc-manifest::before {
  content: "";
  position: absolute;
  left: -1px; top: 24px; bottom: 24px;
  width: 0;
  border-left: 2px dashed var(--fc-line);
}
.fc-manifest-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--fc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc-canvas);
  border-bottom: 1px solid var(--fc-line);
  padding-bottom: 14px;
  margin-bottom: 24px;
}
.fc-hero h1 { margin-bottom: 18px; }
.fc-hero p {
  color: var(--fc-paper-dim);
  max-width: 46ch;
  font-size: 1.05rem;
  margin-bottom: 32px;
}
.fc-stamp-mark {
  position: absolute;
  top: 30px; right: 34px;
  border: 2px solid var(--fc-stamp);
  color: var(--fc-stamp);
  font-family: var(--fc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  transform: rotate(-6deg);
  opacity: 0.85;
}
.fc-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

@media (max-width: 600px) {
  .fc-manifest { padding: 28px 22px; }
  .fc-stamp-mark { display: none; }
}

/* ==========================================================================
   5. Category strip
   ========================================================================== */
.fc-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--fc-line);
  border: 1px solid var(--fc-line);
}
.fc-category-card {
  position: relative;
  background: var(--fc-bg-alt);
  padding: 36px 24px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  transition: background 0.25s ease;
}
.fc-category-card:hover { background: var(--fc-bg-raised); }
.fc-category-card .fc-cat-index {
  position: absolute;
  top: 20px; left: 24px;
  font-family: var(--fc-font-mono);
  font-size: 0.72rem;
  color: var(--fc-canvas-dim);
}
.fc-category-card h3 { margin: 0; }
.fc-category-card span {
  font-family: var(--fc-font-mono);
  font-size: 0.72rem;
  color: var(--fc-paper-dim);
  letter-spacing: 0.06em;
}

/* ==========================================================================
   6. Product grid + the "requisition stamp" signature
   ========================================================================== */
.woocommerce ul.products,
.fc-product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce ul.products li.product,
.fc-product-grid .product {
  position: relative;
  background: var(--fc-bg-alt);
  border: 1px solid var(--fc-line);
  padding: 0 0 18px;
  list-style: none;
  perspective: 1000px;
}
/* WooCommerce's own stylesheet applies width/float to product cards via a
   .columns-N class it adds automatically, and that selector is more
   specific than the grid rules above — so it still wins even though the
   parent is display:grid. This theme handles layout entirely through
   CSS Grid (see ul.products above), so every trace of WooCommerce's
   float-based column system needs to be neutralized here, regardless of
   which .columns-N class ends up applied. */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce[class*="columns-"] ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.fc-req-tag {
  position: absolute;
  top: 12px; right: -6px;
  font-family: var(--fc-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--fc-stamp);
  border: 1px solid var(--fc-stamp);
  padding: 3px 8px;
  transform: rotate(4deg);
  background: rgba(28,27,24,0.85);
  z-index: 2;
  pointer-events: none;
  display: inline-block;
}
.woocommerce ul.products li.product img {
  transition: transform 0.35s ease;
  width: 100%;
}
[data-tilt] { will-change: transform; transform-style: preserve-3d; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--fc-font-body);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--fc-paper);
  padding: 14px 16px 4px;
}
.woocommerce ul.products li.product .price {
  padding: 0 16px;
  font-family: var(--fc-font-mono);
  font-size: 0.9rem;
  color: var(--fc-canvas);
}
.woocommerce ul.products li.product .price del { color: var(--fc-paper-dim); opacity: 0.6; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--fc-stamp); }
.woocommerce ul.products li.product .button {
  margin: 14px 16px 0 !important;
  display: inline-block;
  width: calc(100% - 32px);
  text-align: center;
}
.woocommerce span.onsale {
  background: var(--fc-stamp) !important;
  font-family: var(--fc-font-mono) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.08em;
  border-radius: var(--fc-radius) !important;
  top: 12px !important;
  left: 12px !important;
}

/* Single product page */
.woocommerce div.product .product_title { font-family: var(--fc-font-display); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--fc-canvas); font-family: var(--fc-font-mono); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--fc-paper-dim); }
.woocommerce table.shop_attributes { border: 1px solid var(--fc-line); }
.woocommerce table.shop_attributes th { background: var(--fc-bg-alt); font-family: var(--fc-font-mono); font-weight: 400; text-transform: uppercase; font-size: 0.75rem; }
.woocommerce table.shop_attributes td { background: transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--fc-font-mono);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

/* Cart, checkout, forms — dark-mode friendly */
.woocommerce table.shop_table, .woocommerce-cart table.cart, .woocommerce-checkout table.shop_table {
  border: 1px solid var(--fc-line);
  color: var(--fc-paper);
}
.woocommerce table.shop_table th { font-family: var(--fc-font-mono); text-transform: uppercase; font-size: 0.72rem; border-bottom: 1px solid var(--fc-line); }
.woocommerce table.shop_table td { border-bottom: 1px solid var(--fc-line); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce-checkout textarea {
  background: var(--fc-bg-alt);
  border: 1px solid var(--fc-line);
  color: var(--fc-paper);
  border-radius: var(--fc-radius);
  padding: 10px 12px;
}
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--fc-bg-alt) !important;
  border-top-color: var(--fc-stamp) !important;
  color: var(--fc-paper) !important;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
.fc-footer {
  background: var(--fc-bg-alt);
  border-top: 1px solid var(--fc-line);
  padding: 64px 0 28px;
  margin-top: 60px;
}
.fc-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.fc-footer h4 {
  font-size: 0.85rem;
  color: var(--fc-canvas);
  margin-bottom: 18px;
}
.fc-footer ul li { margin-bottom: 10px; }
.fc-footer a { color: var(--fc-paper-dim); font-size: 0.9rem; }
.fc-footer a:hover { color: var(--fc-paper); }
.fc-footer-bottom {
  border-top: 1px solid var(--fc-line);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  font-family: var(--fc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--fc-paper-dim);
  text-transform: uppercase;
}
@media (max-width: 782px) {
  .fc-footer-grid { grid-template-columns: 1fr 1fr; }
  .fc-footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

/* ==========================================================================
   8. Motion / reveal (paired with assets/js/reveal-init.js)
   ========================================================================== */
.fc-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fc-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fc-reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}