/*
Theme Name: Legion Patches
Theme URI: https://legionpatches.com
Author: Legion Patches
Description: A warm, photo-forward design system for Legion Patches — real uploadable gallery photos, WooCommerce styling, and a Guides post type, ready out of the box.
Version: 2.2.0
Requires PHP: 7.4
Text Domain: legion-patches
*/

/* ============================================================
   Design tokens — soft, warm, rounded
   ============================================================ */
:root{
  --ink: #17130F;
  --panel: #201A14;
  --panel-2: #2A231B;
  --line: #3A3126;
  --line-soft: rgba(255,255,255,.08);
  --text: #F3EDE2;
  --dim: #ACA192;
  --dim-2: #7C7266;
  --cream: #FBF6EC;
  --cream-2: #F3EAD9;
  --text-dark: #241E16;
  --dim-dark: #857A69;
  --accent: #E0954E;
  --accent-strong: #C97A34;
  --accent-hover: #EDA968;

  --font: Arial, Helvetica, sans-serif;
  --wrap: 1320px;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.22,.68,.32,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--font);
  font-weight: 700;
  margin:0;
  letter-spacing: -0.01em;
}
p{ margin:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior:auto !important; }
}
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap{ width:100%; max-width: var(--wrap); margin:0 auto; padding: 0 32px; }
.accent{ color: var(--accent); }
section{ padding: 84px 0; position:relative; z-index:1; }

/* ============================================================
   Buttons — rounded, soft
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height: 50px;
  padding: 14px 28px; border-radius: var(--radius-sm);
  font-family: var(--font); font-weight:700; font-size:.95rem;
  border:1px solid transparent;
  cursor:pointer; transition: transform .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.btn-primary{ background: var(--accent-strong); color:#fff; box-shadow: 0 6px 18px rgba(201,122,52,.35); }
.btn-primary:hover{ background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(201,122,52,.4); }
.btn-primary:active{ transform: translateY(0); box-shadow: 0 4px 12px rgba(201,122,52,.3); }
.btn-ghost{ background: var(--panel-2); border-color: var(--line); color: var(--text); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn-ghost:active{ transform: translateY(0); }
.btn-small{ padding:11px 20px; font-size:.85rem; min-height:44px; }
.btn-block{ width:100%; }

/* ============================================================
   Promo bar + header
   ============================================================ */
.promo-bar{ background: var(--panel); color: var(--dim); text-align:center; font-size:.82rem; padding:10px 16px; border-bottom:1px solid var(--line); }
.promo-bar strong{ color: var(--accent); }

.site-header{ position:sticky; top:0; z-index:50; background: rgba(23,19,15,.92); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ color: var(--accent); display:flex; }
.brand-name{ font-family: var(--font); font-weight:700; font-size:1.2rem; letter-spacing:-0.01em; }

.main-nav ul{ display:flex; gap:28px; }
.main-nav a{ font-size:.92rem; font-weight:500; color: var(--dim); position:relative; padding:4px 0; transition: color .18s var(--ease); }
.main-nav a:hover, .main-nav .current-menu-item > a{ color: var(--text); }
.main-nav .current-menu-item > a{ color: var(--accent); }

.header-actions{ display:flex; align-items:center; gap:16px; }
.nav-toggle{ display:none; width:34px; height:34px; background:none; border:none; flex-direction:column; justify-content:center; gap:5px; cursor:pointer; }
.nav-toggle span{ height:2px; background: var(--text); border-radius:1px; }

/* ============================================================
   Kicker + section heads — the ONLY place we still use caps
   ============================================================ */
.kicker{ font-size:.76rem; color: var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.12em; margin-bottom:14px; display:block; }
.section-head{ max-width:600px; margin-bottom:40px; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.5rem); line-height:1.1; margin-bottom:12px; }
.section-sub{ color: var(--dim); font-size:1rem; }

/* ============================================================
   Hero — short copy, real photo, compact quote card
   ============================================================ */
.hero{ padding-top:150px; padding-bottom:70px; }
.hero-inner{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.hero-copy h1{ font-size: clamp(2.1rem, 4vw, 3.2rem); line-height:1.08; margin-bottom:18px; max-width:560px; }
.hero-sub{ color: var(--dim); font-size:1.05rem; max-width:480px; margin-bottom:24px; }
.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.hero-badges li{
  border:1px solid var(--line); border-radius: var(--radius-pill);
  padding:7px 15px; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color: var(--accent);
}
.hero-cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-quote{ display:flex; justify-content:center; }
.hero-quote .lqb-calculator{ width:100%; }

/* ============================================================
   Photo system — the theme's main visual language now
   ============================================================ */
.photo-frame{
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--panel-2);
  position:relative;
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.placeholder-photo{
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, var(--panel-2) 0 18px, var(--panel) 18px 36px);
  display:flex; align-items:center; justify-content:center;
  color: var(--dim-2); font-size:.8rem; text-align:center; padding:20px;
}
.placeholder-photo svg{ width:34px; height:34px; opacity:.6; }

.photo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.photo-card{ border-radius: var(--radius); overflow:hidden; background: var(--panel-2); box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.photo-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.32); }
.photo-card .photo-frame{ aspect-ratio:1/1; border-radius:0; }
.photo-caption{ padding:14px 16px 16px; }
.photo-caption h3{ font-size:.92rem; font-weight:700; }
.photo-caption p{ font-size:.78rem; color: var(--dim); margin-top:2px; }

/* Patch-type cards: image-forward, minimal text */
.type-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.type-card{ display:block; border-radius: var(--radius); overflow:hidden; background: var(--panel-2); box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.type-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.32); }
.type-card .photo-frame, .type-card .placeholder-photo{ aspect-ratio:5/4; border-radius:0; }
.type-card-body{ padding:18px 20px 22px; }
.type-card-body h3{ font-size:1.1rem; margin-bottom:4px; }
.type-card-body p{ font-size:.85rem; color: var(--dim); }
.type-card-body .price{ color: var(--accent); font-weight:700; font-size:.85rem; margin-top:8px; display:block; }

/* ============================================================
   Calculator wrapper spacing on non-home pages
   ============================================================ */
.quote-panel{ display:flex; justify-content:center; }

/* ============================================================
   Guarantee strip — one short line, not a wall of text
   ============================================================ */
.guarantee-strip{
  background: var(--panel);
  border-radius: var(--radius);
  padding: 40px 44px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.guarantee-strip h2{ font-size:1.5rem; max-width:520px; }
.guarantee-strip p{ color: var(--dim); font-size:.95rem; max-width:420px; }

/* ============================================================
   Tiles (industries etc.)
   ============================================================ */
.tile-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tile-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.tile{ background: var(--panel-2); border-radius: var(--radius-sm); padding:24px 22px; box-shadow: 0 6px 18px rgba(0,0,0,.2); transition: background-color .2s var(--ease), transform .2s var(--ease); }
.tile:hover{ transform: translateY(-3px); }
.tile:hover{ background: var(--panel); }
.tile h3{ font-size:.98rem; margin-bottom:6px; }
.tile p{ font-size:.82rem; color: var(--dim); }

/* ============================================================
   Guides
   ============================================================ */
.guide-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.guide-card{ display:block; background: var(--panel-2); border-radius: var(--radius-sm); padding:24px 22px; box-shadow: 0 6px 18px rgba(0,0,0,.2); transition: background-color .2s var(--ease), transform .2s var(--ease); }
.guide-card:hover{ background: var(--panel); transform: translateY(-3px); }
.guide-tag{ font-size:.7rem; color: var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; }
.guide-card h3{ font-size:1rem; margin-bottom:10px; line-height:1.3; }
.guide-card p{ font-size:.85rem; color: var(--dim); }

.article-wrap{ max-width:700px; }
.article-wrap h1{ font-size: clamp(1.8rem,3.6vw,2.6rem); line-height:1.1; margin-bottom:18px; }
.article-wrap h2{ font-size:1.35rem; margin:36px 0 14px; }
.article-wrap p, .article-wrap li{ color: var(--dim); font-size:1rem; margin-bottom:15px; }
.article-wrap ul{ margin:0 0 20px; }
.article-wrap ul li{ padding-left:22px; position:relative; }
.article-wrap ul li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background: var(--accent); }

/* ============================================================
   Page hero (non-front pages)
   ============================================================ */
.page-hero{ padding:140px 0 40px; }
.page-hero h1{ font-size: clamp(1.9rem, 3.8vw, 3rem); line-height:1.08; max-width:720px; margin-bottom:16px; }
.page-hero .section-sub{ max-width:600px; }
.breadcrumb{ font-size:.78rem; font-weight:600; color: var(--dim-2); margin-bottom:20px; }
.breadcrumb a{ color: var(--accent); }

/* ============================================================
   Spec grid + use list (patch type pages) — soft tiles now
   ============================================================ */
.spec-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:36px 0; }
.spec-item{ background: var(--panel-2); border-radius: var(--radius-sm); padding:20px; }
.spec-item span{ display:block; font-size:.72rem; color: var(--dim); margin-bottom:8px; text-transform:uppercase; letter-spacing:.04em; }
.spec-item strong{ font-weight:700; font-size:1.3rem; color: var(--accent); }
.use-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }
.use-list li{ background: var(--panel-2); border-radius: var(--radius-sm); padding:14px 18px; font-size:.9rem; color: var(--text); }

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq-list{ max-width:720px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:none; color: var(--text); font-family:var(--font); font-size:.98rem; font-weight:600; text-align:left; padding:22px 4px; cursor:pointer; }
.faq-icon{ width:16px; height:16px; flex:none; position:relative; }
.faq-icon::before,.faq-icon::after{ content:""; position:absolute; left:0; top:50%; width:100%; height:2px; background:var(--accent); transform:translateY(-50%); transition: transform .25s var(--ease); }
.faq-icon::after{ transform: translateY(-50%) rotate(90deg); }
.faq-item.is-open .faq-icon::after{ transform: translateY(-50%) rotate(0deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .3s var(--ease); }
.faq-a p{ color: var(--dim); font-size:.94rem; padding:0 4px 22px; max-width:600px; }
.faq-item.is-open .faq-a{ max-height:220px; }

/* ============================================================
   Contact form
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; }
.contact-info h3{ font-size:.98rem; margin:24px 0 6px; }
.contact-info h3:first-child{ margin-top:0; }
.contact-info p{ color: var(--dim); font-size:.94rem; }
.contact-info a{ color: var(--accent); }
.contact-form{ background: var(--panel-2); border-radius: var(--radius); padding:28px; box-shadow: 0 10px 28px rgba(0,0,0,.25); display:flex; flex-direction:column; gap:16px; }
.contact-form label{ font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--dim); margin-bottom:6px; display:block; }
.contact-form input, .contact-form textarea, .contact-form select{
  width:100%; background: var(--panel); border:1px solid var(--line); color: var(--text);
  padding:12px 14px; border-radius: var(--radius-sm); font-family:var(--font); font-size:.95rem; transition:border-color .16s var(--ease);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{ border-color: var(--accent); outline:none; }
.contact-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-success{ background: var(--panel-2); border:1px solid var(--accent); border-radius: var(--radius-sm); padding:18px; font-size:.9rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background: var(--panel); border-top:1px solid var(--line); padding-top:56px; }
.footer-inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-bottom:36px; }
.footer-brand p{ color: var(--dim); font-size:.85rem; margin:14px 0; max-width:300px; }
.footer-brand a{ color: var(--accent); }
.footer-col h4{ font-size:.72rem; color: var(--dim); margin-bottom:16px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.footer-col{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:.85rem; color: var(--text); transition:color .16s var(--ease); }
.footer-col a:hover{ color: var(--accent); }
.footer-bottom{ border-top:1px solid var(--line); display:flex; justify-content:space-between; padding:20px 32px; font-size:.78rem; color: var(--dim-2); }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ============================================================
   WooCommerce — soft rounded recolor
   ============================================================ */
.woocommerce{ color: var(--text); font-family: var(--font); }
.woocommerce table.shop_table{ border-color: var(--line); border-radius: var(--radius-sm); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td{ border-color: var(--line) !important; color: var(--text); }
.woocommerce ul#shipping_method li, .woocommerce-checkout #payment{ background: var(--panel-2); border-color: var(--line); border-radius: var(--radius-sm); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button,
.woocommerce-page input.button, .woocommerce-page #respond input#submit{
  background: var(--accent-strong) !important; color:#fff !important; border:none !important;
  font-weight:700; border-radius: var(--radius-sm) !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{ background: var(--accent-hover) !important; }
.woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"],
.woocommerce input[type="number"], .woocommerce input[type="password"], .woocommerce textarea, .woocommerce select{
  background: var(--panel-2); border:1px solid var(--line); color: var(--text); border-radius: var(--radius-sm);
}
.woocommerce-info, .woocommerce-message, .woocommerce-noticeGroup{
  background: var(--panel-2); border-top-color: var(--accent); color: var(--text); border-radius: var(--radius-sm);
}
.woocommerce-message::before{ color: var(--accent); }
.woocommerce ::placeholder{ color: var(--dim); }
.woocommerce-cart table.cart img{ display:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; gap:36px; }
  .hero-quote{ order:-1; }
  .photo-grid{ grid-template-columns:repeat(2,1fr); }
  .type-grid{ grid-template-columns:1fr 1fr; }
  .tile-grid{ grid-template-columns:repeat(2,1fr); }
  .guide-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid, .contact-row, .spec-grid, .use-list{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .guarantee-strip{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 700px){
  .main-nav{
    position:absolute; top:70px; left:12px; right:12px;
    background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(0,0,0,.4);
    padding:10px; display:none;
  }
  .main-nav.is-open{ display:block; }
  .main-nav ul{ flex-direction:column; gap:2px; }
  .main-nav a{ display:block; padding:14px 14px; border-radius: var(--radius-sm); font-size:1rem; }
  .main-nav a:active, .main-nav a:hover{ background: var(--panel-2); }
  .nav-toggle{ display:flex; }
  .header-inner{ height:66px; }
  .header-actions .btn-small{ display:none; }
  .wrap{ padding:0 18px; }
  section{ padding:48px 0; }
  .hero{ padding-top:96px; padding-bottom:36px; }
  .hero-copy h1{ font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .hero-badges{ margin-bottom:20px; }
  .hero-cta-row .btn{ width:100%; }
  .page-hero{ padding:106px 0 28px; }
  .photo-grid, .type-grid, .tile-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .guide-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; gap:28px; }
  .footer-bottom{ flex-direction:column; gap:8px; padding:20px; text-align:center; }
  .btn{ min-height:52px; font-size:1rem; }
  .contact-form{ padding:22px; }
}
@media (max-width: 420px){
  .photo-grid, .type-grid, .tile-grid{ grid-template-columns:1fr; }
  .hero-badges li{ font-size:.68rem; padding:6px 12px; }
}