/*
Theme Name: Defender Sightings
Theme URI: https://defendersightings.com
Author: Defender Sightings
Description: Custom theme for Defender Sightings - a Land Rover Defender enthusiast community.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: defender-sightings
*/

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --brg: #223628;
  --brg-light: #2d4a38;
  --cream: #EEE5D2;
  --cream-dark: #DED2BA;
  --ink: #1C1E1A;
  --tan: #785438;
  --tan-light: #9a7a5c;
  --rust: #8E442A;
  --white: #FDFBF7;
  --navy: #1B2A4A;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

/* ---- Typography ---- */
h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; line-height: 1.15; }
h1 { font-size: clamp(2.8rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); }

/* ---- Navigation ---- */
nav#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(34, 54, 40, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(238, 229, 210, 0.12);
  transition: all 0.3s ease;
}
nav#navbar.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.15); }
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; height: 72px;
}
.nav-logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--cream);
}
.nav-logo img { height: 32px; width: auto; }
.nav-logo span {
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: 1.15rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  color: var(--cream); text-decoration: none;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.8;
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 1; }
/* Cart link sits in the nav like any other item; the count only appears once
   there is something to count, so an empty shop shows a plain word. */
/* The shop archive's intro text sits in .page-description, which nothing had
   styled — its links were still browser blue. Shop archive intro links. */
.woocommerce .woocommerce-products-header .page-description a {
  color: var(--brg);
  text-decoration: none;
  border-bottom: 1px solid rgba(34,54,40,0.25);
}
.woocommerce .woocommerce-products-header .page-description a:hover {
  color: var(--tan);
  border-bottom-color: var(--tan);
}

/* ---- Comparison tables in articles ----
   Gutenberg's table block ships unstyled here; comparison tables are the whole
   point of the vs-articles, so give them borders, breathing room and a
   horizontal scroll instead of a squashed grid on a phone. */
.wp-block-table {
  margin: 2rem 0;
  overflow-x: auto;
}
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.5;
}
.wp-block-table th,
.wp-block-table td {
  padding: .7rem .9rem;
  border: 1px solid rgba(120,84,48,0.18);
  text-align: left;
  vertical-align: top;
}
.wp-block-table thead th {
  background: rgba(34,54,40,0.06);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brg);
}
.wp-block-table tbody td:first-child {
  font-weight: 600;
  color: var(--brg);
  white-space: nowrap;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: rgba(238,229,210,0.35);
}
.wp-block-table figcaption {
  margin-top: .7rem;
  font-size: .82rem;
  color: #6f6a60;
}

/* ---- Shop archive layout ----
   Lead paragraph, then the products, then the long-form copy in a quieter
   register at the bottom of the page. */
.woocommerce .woocommerce-products-header {
  max-width: 780px;
  margin-bottom: 2.5rem;
}
.woocommerce .woocommerce-products-header .page-title {
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  margin-bottom: 1.2rem;
}
.shop-lead p {
  font-size: 1.02rem;
  line-height: 1.8;
  color: #4a4a44;
  margin: 0 0 1.1rem;
}
.shop-longform {
  max-width: 780px;
  margin: 4.5rem 0 0;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(120,84,48,0.15);
  font-size: 0.94rem;
  color: #5f5a52;
}
.shop-longform h2 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--brg);
  font-size: 1.45rem;
  line-height: 1.3;
  margin: 2.2rem 0 .8rem;
}
.shop-longform h2:first-child { margin-top: 0; }
.shop-longform h3 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--brg);
  font-size: 1.15rem;
  margin: 1.8rem 0 .6rem;
}
.shop-longform p { margin: 0 0 1rem; line-height: 1.75; }
.shop-longform ul { margin: 0 0 1.2rem; padding-left: 1.15rem; list-style: disc; }
.shop-longform li { margin-bottom: .4rem; line-height: 1.7; }

/* Product cards: one calm grid, image on its own ground. */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
  width: 100%;
  float: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.woocommerce ul.products li.product a img {
  margin: 0 0 1rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(120,84,48,0.12);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0;
  margin: 0 0 .4rem;
  line-height: 1.35;
}
.woocommerce ul.products li.product .price {
  display: block;
  margin: 0 0 1rem;
  font-size: 1rem;
}
.woocommerce ul.products li.product .button {
  display: inline-block;
  margin: 0;
}

/* ---- Block cart and checkout ----
   The cart and checkout blocks ship with their own grey buttons and blue links,
   which look nothing like the rest of the site. Repaint them in the brand green. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.wc-block-components-button--link):not(.is-link) {
  background-color: var(--brg);
  color: var(--cream);
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.wc-block-components-button--link):not(.is-link):hover {
  background-color: var(--brg-light);
  color: var(--cream);
}
.wc-block-components-product-name,
.wc-block-components-checkout-policies__policy a,
.wc-block-components-totals-coupon-link,
.wc-block-cart__empty-cart__title + p a,
.woocommerce-privacy-policy-link {
  color: var(--brg);
  text-decoration: none;
  border-bottom: 1px solid rgba(34,54,40,0.25);
}
.wc-block-components-product-name:hover,
.wc-block-components-checkout-policies__policy a:hover,
.wc-block-components-totals-coupon-link:hover,
.woocommerce-privacy-policy-link:hover {
  color: var(--tan);
  border-bottom-color: var(--tan);
}

.nav-cart { display: inline-flex; align-items: center; gap: 8px; }
.nav-cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px;
  background: var(--tan);
  color: var(--brg);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0;
  line-height: 1;
}
.nav-links .nav-cart-item a { opacity: 1; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--cream);
  margin: 5px 0; transition: all 0.3s;
}

/* Nav logo icon */
.nav-logo-icon { height: 22px; width: auto; opacity: 0.85; }

/* ---- Hero ---- */
.hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--brg);
  position: relative; overflow: hidden;
  padding: 6rem 2rem 4rem;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 80%, rgba(34,54,40,0) 40%, rgba(20,32,24,0.6) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  text-align: center; max-width: 780px;
}
.hero-badge {
  display: inline-block;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--cream);
  border: 1px solid rgba(238,229,210,0.3);
  padding: 8px 24px; border-radius: 100px;
  margin-bottom: 2.5rem; opacity: 0.8;
}
.hero-silhouette {
  width: clamp(200px, 40vw, 360px);
  margin: 0 auto 0.6rem; display: block;
  opacity: 0.9;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.2));
}
.hero h1 { color: var(--cream); margin-bottom: 1.2rem; }
.hero h1 em { font-style: italic; color: var(--cream-dark); }
.hero-sub {
  color: var(--cream-dark); font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 300; max-width: 540px; margin: 0 auto 2.5rem;
  line-height: 1.7; opacity: 0.85;
}
.hero-cta {
  display: inline-block;
  background: var(--cream); color: var(--brg);
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 16px 40px; border-radius: 4px;
  text-decoration: none; transition: all 0.3s;
}
.hero-cta:hover { background: var(--cream-dark); transform: translateY(-1px); }
.hero-scroll {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  color: var(--cream-dark); opacity: 0.4;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
}
.hero-scroll::after {
  content: ''; display: block;
  width: 1px; height: 36px; background: var(--cream-dark);
  margin: 8px auto 0; opacity: 0.4;
}

/* ---- Sections ---- */
section { padding: 6rem 2rem; }
.section-inner { max-width: 960px; margin: 0 auto; }
.section-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--tan);
  margin-bottom: 1rem;
}
.section-heading { margin-bottom: 1.5rem; color: var(--brg); }
.section-body { font-size: 1.05rem; color: #4a4a42; line-height: 1.8; max-width: 640px; }

/* ---- About ---- */
.about { background: var(--white); }
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  align-items: start; margin-top: 3rem;
}
.about-card {
  background: var(--cream);
  padding: 2.5rem; border-radius: 8px;
  border: 1px solid rgba(120,84,48,0.12);
}
.about-card h3 { color: var(--brg); margin-bottom: 0.8rem; }
.about-card p { font-size: 0.95rem; color: #5a5a52; line-height: 1.7; }

/* ---- Submit ---- */
.submit { background: var(--cream); }
.submit-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  align-items: start; margin-top: 2rem;
}
.submit-info { padding-top: 1rem; }
.submit-steps { list-style: none; margin-top: 1.5rem; }
.submit-steps li {
  display: flex; gap: 1rem; align-items: flex-start;
  margin-bottom: 1.5rem; font-size: 0.95rem; color: #4a4a42;
}
.step-num {
  flex-shrink: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brg); color: var(--cream);
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: 0.85rem; border-radius: 50%;
}
.submit-form {
  background: var(--white);
  padding: 2.5rem; border-radius: 8px;
  border: 1px solid rgba(120,84,48,0.1);
}
.form-group { margin-bottom: 1.5rem; }
.form-group label {
  display: block; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brg); margin-bottom: 0.5rem;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 12px 16px;
  border: 1px solid var(--cream-dark);
  border-radius: 4px; background: var(--white);
  font-family: 'Inter', sans-serif; font-size: 0.95rem;
  color: var(--ink); transition: border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none; border-color: var(--brg);
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.btn-submit {
  width: 100%; padding: 14px;
  background: var(--brg); color: var(--cream);
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase;
  border: none; border-radius: 4px; cursor: pointer;
  transition: all 0.3s;
}
.btn-submit:hover { background: var(--brg-light); }

/* ---- File upload ---- */
.file-upload-area {
  position: relative;
  border: 2px dashed var(--cream-dark);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background: rgba(238,229,210,0.15);
}
.file-upload-area:hover, .file-upload-area.dragover {
  border-color: var(--brg);
  background: rgba(34,54,40,0.04);
}
.file-upload-area input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.file-upload-icon { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.4; }
.file-upload-text { font-size: 0.85rem; color: var(--tan); line-height: 1.5; }
.file-upload-text strong { color: var(--brg); }
.file-preview { margin-top: 1rem; display: none; }
.file-preview img {
  max-width: 100%; max-height: 200px;
  border-radius: 6px; border: 1px solid var(--cream-dark);
}
.file-preview .file-name { font-size: 0.78rem; color: var(--tan); margin-top: 0.5rem; }
.file-preview .remove-file {
  font-size: 0.75rem; color: var(--rust); cursor: pointer;
  text-decoration: underline; margin-top: 0.3rem;
  display: inline-block; background: none; border: none;
  font-family: 'Inter', sans-serif;
}

/* ---- Instagram Feed ---- */
.feed { background: var(--cream); }
.feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px; margin-top: 2rem;
  border-radius: 8px; overflow: hidden;
}
.feed-item {
  aspect-ratio: 1; background: var(--cream-dark);
  position: relative; overflow: hidden; cursor: pointer;
}
.feed-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.feed-item:hover img { transform: scale(1.05); }
.feed-item .feed-overlay {
  position: absolute; inset: 0;
  background: rgba(34,54,40,0.6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s;
  color: var(--cream); font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.05em;
}
.feed-item:hover .feed-overlay { opacity: 1; }
.feed-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--tan-light); font-size: 0.8rem; gap: 0.5rem;
}
.feed-placeholder-icon { font-size: 1.5rem; opacity: 0.5; }
.feed-cta { text-align: center; margin-top: 2rem; }
.feed-cta a {
  display: inline-block;
  color: var(--brg); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  padding: 12px 32px;
  border: 2px solid var(--brg);
  border-radius: 4px; transition: all 0.3s;
}
.feed-cta a:hover { background: var(--brg); color: var(--cream); }

/* ---- Map ---- */
.map-section { background: var(--white); padding-bottom: 4rem; }
/* ---- Map tiles ----
   CARTO started stamping "API key required" over its keyless basemap in September 2026.
   OpenStreetMap's own tiles need no key, but they are far more colourful, so bring them
   back to the pale grey the section was designed around. */
#world-map .leaflet-tile-pane {
  filter: grayscale(0.85) brightness(1.06) contrast(0.92);
}

#world-map {
  width: 100%; height: 520px;
  border-radius: 8px; margin-top: 2rem;
  border: 1px solid rgba(120,84,48,0.12);
  z-index: 1;
}
.map-stats {
  display: flex; gap: 3rem; margin-top: 2rem;
  justify-content: center;
}
.stat { text-align: center; }
.stat-num {
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: 2.2rem; color: var(--brg);
}
.stat-label {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tan); margin-top: 4px;
}

/* ---- Shop ---- */
.shop { background: var(--brg); color: var(--cream); text-align: center; }
.shop .section-label { color: var(--cream-dark); }
.shop .section-heading { color: var(--cream); margin-bottom: 0.3rem; }
.shop-date {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--cream-dark);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}
.shop-desc {
  font-size: 1.05rem; color: var(--cream-dark); line-height: 1.8;
  max-width: 540px; margin: 0 auto 2.5rem; opacity: 0.85;
}
.shop-silhouette {
  width: clamp(160px, 30vw, 280px);
  margin: 0 auto 2.5rem; display: block; opacity: 0.6;
}
.waitlist-form {
  display: flex; gap: 0; max-width: 440px; margin: 0 auto;
}
.waitlist-form input {
  flex: 1; padding: 14px 18px;
  border: 1px solid rgba(238,229,210,0.25);
  border-right: none; border-radius: 4px 0 0 4px;
  background: rgba(238,229,210,0.08);
  font-family: 'Inter', sans-serif; font-size: 0.9rem;
  color: var(--cream);
}
.waitlist-form input::placeholder { color: rgba(238,229,210,0.4); }
.waitlist-form input:focus { outline: none; border-color: rgba(238,229,210,0.5); }
.waitlist-form button {
  padding: 14px 24px;
  background: var(--cream); color: var(--brg);
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  border: none; border-radius: 0 4px 4px 0; cursor: pointer;
  transition: background 0.2s; white-space: nowrap;
}
.waitlist-form button:hover { background: var(--cream-dark); }

/* ---- Footer ---- */
footer#site-footer {
  background: var(--ink); color: var(--cream-dark);
  padding: 3rem 2rem; text-align: center;
}
.footer-inner { max-width: 960px; margin: 0 auto; }
.footer-logo {
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cream); margin-bottom: 0.8rem;
}
.footer-tagline { font-size: 0.85rem; opacity: 0.6; margin-bottom: 1.5rem; }
.footer-links { display: flex; gap: 2rem; justify-content: center; margin-bottom: 1.5rem; }
.footer-links a {
  color: var(--cream-dark); text-decoration: none;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0.5; transition: opacity 0.2s;
}
.footer-links a:hover { opacity: 1; }
.footer-copy { font-size: 0.75rem; opacity: 0.35; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--brg); padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(238,229,210,0.1);
    gap: 1.2rem;
  }
  .nav-toggle { display: block; }
  .about-grid, .submit-layout { grid-template-columns: 1fr; gap: 2rem; }
  .map-stats { flex-wrap: wrap; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }
  section { padding: 4rem 1.5rem; }

  .stories { padding: 3rem 1.5rem; }
  .stories-grid { grid-template-columns: 1fr; }
  .feed .section-inner { overflow: hidden; }
  .feed .sbi { max-width: 100% !important; width: 100% !important; }
}

/* ---- Animations ---- */
.fade-up {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Leaflet overrides */
.leaflet-popup-content-wrapper {
  font-family: 'Inter', sans-serif;
  border-radius: 6px;
}
.leaflet-popup-content { font-size: 0.85rem; line-height: 1.5; }
.sighting-popup b { color: var(--brg); }

/* WordPress overrides */
.wp-admin-bar-fix { margin-top: 32px; }
body.admin-bar nav#navbar { top: 32px; }


/* Contact Form 7 - Match theme styling */
.submit-layout .wpcf7 {
  width: 100%;
}
.submit-layout .wpcf7-form {
  background: var(--brg);
  border-radius: 18px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.submit-layout .wpcf7-form label {
  display: block;
  color: var(--cream);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.submit-layout .wpcf7-form input[type="text"],
.submit-layout .wpcf7-form input[type="email"],
.submit-layout .wpcf7-form textarea,
.submit-layout .wpcf7-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid rgba(238,229,210,0.13);
  border-radius: 10px;
  background: rgba(238,229,210,0.07);
  color: var(--cream);
  font-size: 0.97rem;
  font-family: 'Inter', sans-serif;
  transition: border 0.2s;
  box-sizing: border-box;
}
.submit-layout .wpcf7-form input[type="text"]:focus,
.submit-layout .wpcf7-form input[type="email"]:focus,
.submit-layout .wpcf7-form textarea:focus,
.submit-layout .wpcf7-form select:focus {
  border-color: var(--cream);
  outline: none;
}
.submit-layout .wpcf7-form input[type="text"]::placeholder,
.submit-layout .wpcf7-form input[type="email"]::placeholder,
.submit-layout .wpcf7-form textarea::placeholder {
  color: rgba(238,229,210,0.35);
}
.submit-layout .wpcf7-form input[type="file"] {
  color: var(--cream);
  font-size: 0.9rem;
}
.submit-layout .wpcf7-form input[type="file"]::file-selector-button {
  background: rgba(238,229,210,0.13);
  color: var(--cream);
  border: 1.5px solid rgba(238,229,210,0.2);
  border-radius: 8px;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  margin-right: 0.8rem;
  transition: background 0.2s;
}
.submit-layout .wpcf7-form input[type="file"]::file-selector-button:hover {
  background: rgba(238,229,210,0.22);
}
.submit-layout .wpcf7-form input[type="submit"] {
  width: 100%;
  padding: 1rem;
  background: var(--cream);
  color: var(--brg);
  border: none;
  border-radius: 10px;
  font-size: 1.08rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.2s, transform 0.15s;
  margin-top: 0.5rem;
}
.submit-layout .wpcf7-form input[type="submit"]:hover {
  background: var(--cream-dark);
  transform: translateY(-1px);
}
.submit-layout .wpcf7-form .wpcf7-response-output {
  border-color: var(--cream) !important;
  color: var(--cream);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
}
.submit-layout .wpcf7-form .wpcf7-not-valid-tip {
  color: #e8a87c;
  font-size: 0.8rem;
}
.submit-layout .wpcf7-form p {
  margin: 0;
}
@media (max-width: 600px) {
  .submit-layout .wpcf7-form {
    padding: 1.5rem 1.2rem;
  }
}
/* Hide Smash Balloon load more and follow buttons */
#sbi_load .sbi_load_btn,
#sb_instagram .sbi_follow_btn,
.sbi_follow_btn,
.sbi_load_btn {
  display: none !important;
}
/* Hide Smash Balloon feed header */
.sb_instagram_header {
  display: none !important;
}

/* Recolor Defender silhouettes to cream */
.hero-silhouette,
.shop-silhouette,
.nav-logo-icon {
  filter: brightness(0) invert(93%) sepia(10%) saturate(400%) hue-rotate(15deg) brightness(1.02);
}


/* ============================================
   DEFENDER STORIES - Blog Section
   ============================================ */
.stories {
  padding: 5rem 2rem;
  background: var(--cream);
}
.stories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
.story-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}
.story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.10);
}
.story-card-img {
  height: 220px;
  background-size: cover;
  background-position: center;
  background-color: var(--brg-light);
  position: relative;
}
.story-card-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--brg);
  color: var(--cream);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
}
.story-card-body {
  padding: 1.4rem 1.5rem;
}
.story-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--brg);
}
.story-card-body p {
  font-size: 0.88rem;
  color: #555;
  line-height: 1.5;
  margin-bottom: 0.8rem;
}
.story-card-date {
  font-size: 0.75rem;
  color: var(--tan);
  font-weight: 500;
}
.stories-cta {
  text-align: center;
  margin-top: 2.5rem;
}
.stories-readmore {
  display: inline-block;
  color: var(--brg);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--brg);
  padding-bottom: 4px;
  transition: color 0.3s, border-color 0.3s;
}
.stories-readmore:hover {
  color: var(--tan);
  border-color: var(--tan);
}
@media (max-width: 700px) {
  .stories-grid {
    grid-template-columns: 1fr;
  }
  .story-card-img {
    height: 180px;
  }
}

/* Blog Archive Page */
.blog-archive {
  padding: 6rem 2rem 4rem;
  background: var(--cream);
  min-height: 60vh;
}
.blog-archive .section-inner {
  max-width: 960px;
  margin: 0 auto;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .blog-archive {
    padding: 3rem 1.5rem 2rem;
  }
}

/* Single Post */
.single-post-content {
  padding: 6rem 0 4rem;
  background: var(--cream);
}
.single-post-inner {
  max-width: 740px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.single-post-inner h1 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--brg);
  margin-bottom: 0.5rem;
}
.single-post-meta {
  color: var(--tan);
  font-size: 0.85rem;
  margin-bottom: 2rem;
}
.single-post-featured {
  width: 100%;
  border-radius: 14px;
  margin-bottom: 2rem;
}
.single-post-inner .entry-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink);
}
.single-post-inner .entry-content p {
  margin-bottom: 1.5rem;
}
.single-post-inner .entry-content h2 {
  font-family: var(--font-display);
  color: var(--brg);
  margin: 2rem 0 1rem;
}

/* ---- Shop product cards ---- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin: 2.5rem auto 0;
  text-align: left;
}
.shop-card {
  display: block;
  background: rgba(238,229,210,0.06);
  border: 1px solid rgba(238,229,210,0.18);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--cream);
  transition: transform 0.3s, border-color 0.3s;
}
.shop-card:hover {
  transform: translateY(-4px);
  border-color: rgba(238,229,210,0.45);
}
.shop-card-img {
  aspect-ratio: 1 / 1;
  background: rgba(238,229,210,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.2rem;
  display: block;
}
.shop-card-body {
  padding: 1.2rem 1.4rem 1.5rem;
}
.shop-card-body h3 {
  font-size: 1.1rem;
  color: var(--cream);
  margin-bottom: 0.4rem;
}
.shop-card-price {
  font-size: 0.95rem;
  color: var(--cream-dark);
  margin-bottom: 0.9rem;
}
.shop-card-price del {
  opacity: 0.6;
  margin-right: 6px;
}
.shop-card-cta {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--cream);
  padding-bottom: 3px;
}
.shop-all {
  margin-top: 2.5rem;
}
.shop-all a {
  color: var(--cream);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--cream);
  padding-bottom: 4px;
}
.shop-all a:hover {
  color: var(--cream-dark);
  border-color: var(--cream-dark);
}
@media (max-width: 900px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
}
@media (max-width: 600px) {
  .shop-grid { grid-template-columns: 1fr; max-width: 340px; }
}

/* ---- WooCommerce pages (shop, product, cart, checkout, account) ---- */
.woocommerce #primary,
.woocommerce-page #primary {
  max-width: 1100px;
  margin: 0 auto;
  padding: 7rem 2rem 5rem;
}
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--tan);
  margin-bottom: 1.5rem;
}
.woocommerce .woocommerce-breadcrumb a,
.woocommerce-page .woocommerce-breadcrumb a { color: var(--tan); text-decoration: none; }
.woocommerce .woocommerce-products-header__title,
.woocommerce div.product .product_title,
.woocommerce-page h1.entry-title {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--brg);
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 1.2rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--brg);
  font-size: 1.15rem;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--tan);
  font-weight: 600;
}
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--brg);
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 13px 24px;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--brg-light);
  color: var(--cream);
}
.woocommerce .quantity .qty {
  padding: 9px 6px;
  border: 1px solid rgba(28,30,26,0.2);
  border-radius: 4px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--brg); }
.woocommerce-message,
.woocommerce-info { border-top-color: var(--brg); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--brg); }
.woocommerce div.product .woocommerce-product-details__short-description { margin-bottom: 1.2rem; }
@media (max-width: 700px) {
  .woocommerce #primary,
  .woocommerce-page #primary { padding: 6rem 1.2rem 3rem; }
}

/* ---- 404 ---- */
.error-404 {
  max-width: 960px;
}
.error-404 .section-label {
  color: var(--tan);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.error-404 h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 1rem;
}
.error-404 > p {
  font-size: 1.05rem;
  color: #555;
  max-width: 640px;
  margin-bottom: 2rem;
}
.error-404 h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  color: var(--brg);
  margin: 2.5rem 0 1rem;
}
.error-404 .search-form,
.error-404 form[role="search"] {
  display: flex;
  gap: 0;
  max-width: 440px;
}
.error-404 form[role="search"] label { flex: 1; }
.error-404 form[role="search"] .search-field,
.error-404 form[role="search"] input[type="search"] {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(28,30,26,0.2);
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
}
.error-404 form[role="search"] input[type="submit"] {
  padding: 13px 22px;
  background: var(--brg);
  color: var(--cream);
  border: none;
  border-radius: 0 4px 4px 0;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.error-404 .stories-grid { grid-template-columns: repeat(3, 1fr); }
.error-404 .story-card-img { height: 150px; }
.error-404-home { margin-top: 2.5rem; }
.error-404-home a {
  color: var(--brg);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--brg);
  padding-bottom: 4px;
}
@media (max-width: 700px) {
  .error-404 .stories-grid { grid-template-columns: 1fr; }
}

/* ---- Product FAQ ---- */
/* With only the description left, the single remaining tab strip and its
   "Description" heading are labels for nothing — hide both and let the copy run. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: none;
}
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}
.woocommerce div.product .woocommerce-tabs {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(120,84,48,0.15);
}

/* ---- Product page: quieter chrome ----
   WooCommerce ships boxed tabs, blue links and a cramped meta blob. None of it
   belongs on a page this plain, so the tab strip becomes a single underline and
   every link picks up the site's green. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  margin: 0 0 2rem;
  padding: 0 0 0 0;
  border-bottom: 1px solid rgba(120,84,48,0.18);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 2rem 0 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 0 0 .7rem;
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a8578;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--brg);
  border-bottom-color: var(--brg);
}

/* Links inside the product column: brand green, never browser blue. */
.woocommerce div.product .summary a,
.woocommerce div.product .product_meta a,
.woocommerce div.product .woocommerce-tabs .panel a,
.woocommerce .woocommerce-breadcrumb a {
  color: var(--brg);
  text-decoration: none;
  border-bottom: 1px solid rgba(34,54,40,0.25);
}
.woocommerce div.product .summary a:hover,
.woocommerce div.product .product_meta a:hover,
.woocommerce div.product .woocommerce-tabs .panel a:hover,
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--tan);
  border-bottom-color: var(--tan);
}

/* SKU / category / tags: one quiet line each instead of a run-on blob. */
.woocommerce div.product .product_meta {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(120,84,48,0.15);
  font-size: .82rem;
  line-height: 1.9;
  color: #6f6a60;
}
.woocommerce div.product .product_meta > span {
  display: block;
}
.woocommerce div.product .product_meta .sku_wrapper,
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as {
  letter-spacing: .01em;
}

/* ---- Product page: tab content ----
   WooCommerce prints the description into a bare panel, so without this the
   copy runs the full 1000 px width with every margin at zero. Match the
   article measure and the site's heading rhythm instead. */
.woocommerce div.product .woocommerce-tabs {
  max-width: 780px;
  margin-top: 3rem;
}
.woocommerce div.product .woocommerce-tabs .panel {
  max-width: 780px;
  color: #3a3a3a;
}
.woocommerce div.product .woocommerce-tabs .panel > h2 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--brg);
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 1.2rem;
}
.woocommerce div.product .woocommerce-tabs .panel h3 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--brg);
  font-size: 1.25rem;
  margin: 2.2rem 0 .7rem;
}
.woocommerce div.product .woocommerce-tabs .panel p {
  margin: 0 0 1.15rem;
  line-height: 1.75;
}
.woocommerce div.product .woocommerce-tabs .panel ul {
  margin: 0 0 1.4rem;
  padding-left: 1.15rem;
  list-style: disc;
}
.woocommerce div.product .woocommerce-tabs .panel li {
  margin-bottom: .45rem;
  line-height: 1.7;
}
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td {
  padding: .6rem .8rem;
  line-height: 1.6;
}
.woocommerce div.product div.images img {
  border-radius: 6px;
}

.product-faq {
  max-width: 780px;
  /* the FAQ sits in the same column as the description tab — no stray indent */
  margin: 2.5rem 0 0;
  padding-left: 0;
}
.product-faq h2 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--brg);
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
}
.product-faq dt {
  font-weight: 600;
  color: var(--brg);
  margin-top: 1.4rem;
}
.product-faq dd {
  margin: 0.4rem 0 0;
  color: #555;
  line-height: 1.7;
}

/* ---- Sticky mobile CTA ---- */
.sticky-cta { display: none; }
@media (max-width: 767px) {
  .sticky-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 12px 16px;
    background: rgba(34, 54, 40, 0.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(238, 229, 210, 0.15);
  }
  .sticky-cta-lead {
    color: var(--cream);
    font-size: 0.9rem;
    font-weight: 500;
  }
  .sticky-cta-btn {
    flex: 0 0 auto;
    background: var(--cream);
    color: var(--brg);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 11px 16px;
    border-radius: 4px;
  }
  body { padding-bottom: 64px; }
}

/* The sticky bar must not sit on top of the footer's last line. */
@media (max-width: 767px) {
  html body { padding-bottom: 68px; }
}