/*
Theme Name: America 2026
Template: storefront
Version: 1.0.0
Description: Child theme of Storefront for america2026.shop. Heritage-Americana design system for the 250th anniversary collection. All custom design lives here.
*/

/* ============================================================================
   AMERICA 2026 — Heritage Outfitter design system
   Built on WooCommerce Storefront 4.6.2. Drop-in replacement for the child
   theme style.css. Targets Storefront's real DOM (see rendered reference HTML).
   Pairs with the HTML design reference: "America 2026 Storefront.dc.html".
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:ital,wght@0,400;0,600;0,700&display=swap');

:root {
  /* ---- color layers (light -> deep) ---- */
  --a26-paper:   #FDFBF6;  /* L0 page ground            */
  --a26-cream:   #FBF7EE;  /* L1 cards / panels / tables */
  --a26-banner:  #F8F2E6;  /* page-title banner          */
  --a26-band:    #F3ECDD;  /* L2 header + table headers  */
  --a26-tint:    #E7DCC6;  /* image placeholders         */

  --a26-ink:     #1E2A44;  /* primary navy text          */
  --a26-ink-soft:#4B5571;  /* secondary text             */
  --a26-muted:   #9A8A6A;  /* monospace / meta           */

  --a26-red:     #A4332A;  /* primary CTA / price / sale */
  --a26-red-deep:#802A22;
  --a26-blue:    #33446A;
  --a26-gold:    #B5852F;  /* accents / stars / seal     */

  --a26-line:    rgba(30,42,68,.12);
  --a26-line-2:  rgba(30,42,68,.20);

  --a26-radius:  10px;
  --a26-ease:    .13s ease;

  --a26-head: 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --a26-serif:'Libre Caslon Text', Georgia, serif;
  --a26-body: 'Source Sans 3', -apple-system, system-ui, sans-serif;
}

/* ---------------------------------------------------------------- base ---- */
body {
  background: var(--a26-paper);
  color: var(--a26-ink-soft);
  font-family: var(--a26-body);
}
h1, h2, h3, h4, h5, h6,
.wc-block-grid__product-title,
.woocommerce-loop-product__title,
.section-title,
.entry-title,
.product_title {
  font-family: var(--a26-head);
  font-weight: 400;
  color: var(--a26-ink);
  letter-spacing: -.005em;
}
a { color: var(--a26-red); transition: color var(--a26-ease); }
a:hover { color: var(--a26-red-deep); }

/* ---- decorative 5-point star (use <span class="a26-star"></span>) ---- */
.a26-star {
  display: inline-block; width: 1em; height: 1em; background: currentColor;
  clip-path: polygon(50% 2%,61% 35%,96% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,4% 35%,39% 35%);
}

/* -------------------------------------------------------------- header ---- */
.site-header {
  background-color: var(--a26-band) !important;
  border-bottom: 1px solid var(--a26-line);
  color: var(--a26-ink-soft);
}
.site-branding .site-title,
.beta.site-title { font-family: var(--a26-head); }
.site-title a,
.site-branding h1 a { color: var(--a26-ink) !important; font-weight: 400; }

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  color: var(--a26-ink-soft) !important;
  font-weight: 600;
}
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.site-header ul.menu li.current-menu-item > a { color: var(--a26-ink) !important; }
.site-header ul.menu li.current-menu-item > a { box-shadow: inset 0 -2px 0 var(--a26-red); }

/* search field pill */
.site-search .widget_product_search input[type="search"] {
  background: #fff; border: 1px solid var(--a26-line-2); border-radius: 999px;
}

/* cart contents */
a.cart-contents,
.site-header-cart .widget_shopping_cart a { color: var(--a26-ink) !important; }

/* ------------------------------------------------------------- buttons ---- */
button, input[type="button"], input[type="reset"], input[type="submit"],
.button, .added_to_cart, .widget a.button {
  background-color: var(--a26-ink);
  border-color: var(--a26-ink);
  color: var(--a26-band);
  border-radius: 8px;
  font-family: var(--a26-body);
  font-weight: 700;
  transition: transform var(--a26-ease), box-shadow var(--a26-ease), background-color var(--a26-ease);
}
button:hover, .button:hover, .added_to_cart:hover {
  background-color: #16203a; border-color: #16203a; color: var(--a26-band);
  transform: translateY(-2px); box-shadow: 0 5px 11px -7px rgba(30,42,68,.38);
}
button:active, .button:active { transform: translateY(-1px); box-shadow: 0 2px 6px -5px rgba(30,42,68,.35); }

/* primary / alt buttons -> heritage red */
.button.alt, button.alt, input[type="submit"].alt,
.single_add_to_cart_button, .checkout-button, .wc-proceed-to-checkout .button,
#place_order, .woocommerce-Button--next {
  background-color: var(--a26-red) !important;
  border-color: var(--a26-red) !important;
  color: #F8F2E6 !important;
}
.button.alt:hover, .single_add_to_cart_button:hover,
.checkout-button:hover, #place_order:hover {
  background-color: var(--a26-red-deep) !important; border-color: var(--a26-red-deep) !important;
  transform: translateY(-2px);
}

/* focus ring on inputs */
input:focus, textarea:focus, select:focus,
.woocommerce form .form-row input:focus {
  outline: none; border-color: var(--a26-red);
  box-shadow: 0 0 0 3px rgba(164,51,42,.14);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container .select2-selection {
  background: #fff; border: 1px solid var(--a26-line-2); border-radius: 8px;
  transition: border-color var(--a26-ease), box-shadow var(--a26-ease);
}

/* -------------------------------------------------- product sections ------ */
.storefront-product-section { background: var(--a26-banner); padding: 3.2em 0 3.5em; }
.storefront-product-section .section-title {
  text-align: center; font-size: 2.1em; margin-bottom: 1.2em;
}

/* product loop cards */
ul.products li.product {
  background: var(--a26-cream);
  border: 1px solid var(--a26-line);
  border-radius: var(--a26-radius);
  overflow: hidden;
  padding: 0 0 1.1em;
  transition: transform .15s ease, box-shadow .15s ease;
}
ul.products li.product:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -12px rgba(30,42,68,.3);
}
ul.products li.product a img { margin: 0 0 .9em; border-radius: 0; }
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--a26-serif);
  font-size: 1.05em; line-height: 1.28; padding: 0 1em; color: var(--a26-ink);
}
ul.products li.product .price {
  color: var(--a26-red) !important; font-weight: 700; padding: 0 1em;
  font-family: var(--a26-body);
}
ul.products li.product .button { margin: .6em 1em 0; }

/* sale / badges */
.onsale, .wc-block-grid__product-onsale {
  background: var(--a26-ink); color: var(--a26-band) !important;
  border-color: var(--a26-ink); border-radius: 5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}

/* ----------------------------------------------------- single product ----- */
.single-product div.product .price,
.single-product div.product .price .amount { color: var(--a26-red); font-weight: 700; }
.single-product .product_title { font-size: 2.1em; line-height: 1.2; }
/* reviews are intentionally hidden for launch (volatile) — re-enable later */
.single-product .woocommerce-product-rating,
.single-product .woocommerce-tabs li.reviews_tab { display: none; }

/* quantity stepper */
.quantity input.qty {
  background: #fff; border: 1.5px solid var(--a26-line-2); border-radius: 8px;
}

/* -------------------------------------------------- cart / checkout ------- */
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--a26-cream); border: 1px solid var(--a26-line);
  border-radius: 12px; padding: 1.4em;
}
table.cart, .shop_table { background: var(--a26-cream); border-radius: 12px; overflow: hidden; }
table.cart thead th, .shop_table thead th { background: var(--a26-band); color: var(--a26-muted); }
.cart_totals h2, #order_review_heading, .cart-collaterals h2 { font-family: var(--a26-head); }
.order-total .amount, .cart_totals .order-total .amount { color: var(--a26-red); }

/* my account nav */
.woocommerce-MyAccount-navigation ul {
  background: var(--a26-cream); border: 1px solid var(--a26-line);
  border-radius: 12px; padding: .5em; list-style: none; margin: 0;
}
.woocommerce-MyAccount-navigation li a {
  display: block; padding: .7em 1em; border-radius: 8px; color: var(--a26-ink);
  transition: background-color var(--a26-ease);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  background: var(--a26-ink); color: var(--a26-band);
}

/* status pills (order status) */
.woocommerce-orders-table__cell-order-status { font-weight: 700; }

/* --------------------------------------------------------------- footer --- */
.site-footer {
  background: #16203A !important;
  color: #C7CCDA !important;
}
.site-footer a:not(.button) { color: #C7CCDA !important; }
.site-footer a:not(.button):hover { color: #fff !important; }
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer .widget-title { color: var(--a26-band) !important; font-family: var(--a26-head); }

/* ----------------------------------------------------------- responsive --- */
@media screen and (max-width: 768px) {
  .storefront-product-section .section-title { font-size: 1.7em; }
  .single-product .product_title { font-size: 1.6em; }

  /* Storefront's handheld menu-toggle -> heritage styling */
  button.menu-toggle, button.menu-toggle:hover {
    background-color: var(--a26-band); color: var(--a26-ink); border-color: var(--a26-line-2);
  }
  /* slide-out handheld navigation panel */
  .main-navigation ul.menu { background: var(--a26-banner); }
}

/* handheld footer bar (sticky mobile nav Storefront adds) */
.storefront-handheld-footer-bar {
  background-color: var(--a26-band); border-top: 1px solid var(--a26-line);
}
.storefront-handheld-footer-bar ul li > a { color: var(--a26-ink); }
.storefront-handheld-footer-bar ul li.cart .count {
  background-color: var(--a26-red); color: #F8F2E6; border-color: var(--a26-band);
}

/* ====================================================================
   Hero, announcement bar & trust strip (markup added in functions.php,
   structure from the design reference HTML)
   ==================================================================== */
.a26-announce {
  background: var(--a26-ink); color: var(--a26-band); text-align: center;
  font-size: 13px; letter-spacing: .02em; padding: 9px 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.a26-announce .a26-star { width: 9px; height: 9px; color: var(--a26-gold); }

.a26-hero { background: var(--a26-band); position: relative; overflow: hidden; }
.a26-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent 38px,
    rgba(30,42,68,.04) 38px, rgba(30,42,68,.04) 39px);
}
.a26-hero-inner {
  max-width: 1080px; margin: 0 auto; padding: 64px 28px 70px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px;
  align-items: center; position: relative;
}
.a26-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 20px;
  font-family: var(--a26-body); font-weight: 700; font-size: 12.5px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--a26-red);
}
.a26-eyebrow .a26-star { width: 12px; height: 12px; color: var(--a26-gold); }
.a26-hero h1 { font-size: 62px; line-height: 1.02; letter-spacing: -.01em; margin: 0 0 20px; }
.a26-sub { font-size: 17px; line-height: 1.6; color: var(--a26-ink-soft); margin: 0 0 30px; max-width: 430px; }
.a26-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0; }
.a26-btn {
  display: inline-block; font-weight: 700; font-size: 15px;
  padding: 15px 30px; border-radius: 8px; text-decoration: none;
  transition: transform var(--a26-ease), box-shadow var(--a26-ease), background-color var(--a26-ease);
}
.a26-btn:hover  { transform: translateY(-2px); }
.a26-btn:active { transform: translateY(-1px); }
.a26-btn-red {
  background: var(--a26-red); color: #F8F2E6 !important;
  box-shadow: 0 12px 22px -12px rgba(164,51,42,.7);
}
.a26-btn-red:hover { background: var(--a26-red-deep); }
.a26-btn-ghost {
  background: transparent; color: var(--a26-ink) !important;
  padding: 15px 26px; border: 1.5px solid rgba(30,42,68,.3);
}
.a26-hero-art { position: relative; }
.a26-hero-art::before { content: ""; position: absolute; inset: -12px; border: 1px solid rgba(30,42,68,.22); border-radius: 22px; }
.a26-hero-art::after  { content: ""; position: absolute; inset: -5px;  border: 1px solid rgba(30,42,68,.22); border-radius: 15px; }
.a26-hero-art img {
  aspect-ratio: 1/1; width: 100%; object-fit: cover; display: block;
  border-radius: 10px; background: var(--a26-tint); margin: 0;
}
.a26-seal {
  position: absolute; right: -22px; bottom: -22px; width: 96px; height: 96px;
  border-radius: 50%; background: var(--a26-ink); color: var(--a26-band);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5);
  border: 2px solid var(--a26-gold); z-index: 1;
}
.a26-seal-num { font-family: var(--a26-head); font-size: 26px; line-height: 1; }
.a26-seal-sub { font-size: 9px; letter-spacing: .18em; color: var(--a26-gold); margin-top: 2px; }

.a26-trust {
  background: var(--a26-ink); color: var(--a26-tint);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px;
  padding: 14px 28px; font-size: 13.5px; letter-spacing: .02em;
}
.a26-trust > span { display: flex; align-items: center; gap: 9px; }
.a26-trust .a26-star { width: 8px; height: 8px; color: var(--a26-gold); }

@media screen and (max-width: 768px) {
  .a26-hero-inner { grid-template-columns: 1fr; gap: 34px; padding: 40px 22px 56px; }
  .a26-hero h1 { font-size: 40px; line-height: 1.04; }
  .a26-seal { right: 6px; bottom: -16px; width: 84px; height: 84px; }
  .a26-announce { font-size: 12px; }
}