/*
Theme Name: TanksALot Launch
Theme URI: https://tanksalot.co.uk
Author: TanksALot
Description: A rugged, accessible pre-launch WordPress theme for TanksALot.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: tanksalot
*/

:root {
  --tal-ink: #111513;
  --tal-charcoal: #1d2421;
  --tal-green: #34443a;
  --tal-sand: #d2b98d;
  --tal-cream: #f6f0e4;
  --tal-orange: #ff6508;
  --tal-orange-dark: #c94700;
  --tal-muted: #b6bcb7;
  --tal-line: rgba(246,240,228,.14);
  --tal-shadow: 0 18px 50px rgba(0,0,0,.32);
  --tal-radius: 20px;
  --tal-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--tal-ink);
  color: var(--tal-cream);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .045;
  background-image: url("assets/images/ta-monogram.png");
  background-repeat: no-repeat;
  background-position: -15vw 58vh;
  background-size: min(760px, 85vw);
  z-index: -1;
}
a { color: #ff944f; text-underline-offset: .18em; }
a:hover { color: var(--tal-cream); }
img { max-width: 100%; height: auto; }
.screen-reader-text {
  position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed!important; top: 12px; left: 12px; width: auto; height: auto;
  clip: auto; padding: 12px 16px; background: var(--tal-cream); color: var(--tal-ink);
  z-index: 9999; border-radius: 8px;
}
:focus-visible { outline: 3px solid var(--tal-orange); outline-offset: 4px; }
.wrap { width: min(calc(100% - 40px), var(--tal-width)); margin-inline: auto; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(17,21,19,.88); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tal-line);
}
.header-inner { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--tal-cream); text-decoration: none; }
.brand img, .custom-logo { display: block; width: auto; max-height: 68px; }
.brand-title { font-weight: 900; font-size: 1.2rem; letter-spacing: -.03em; }
.site-nav ul { display: flex; align-items: center; gap: 28px; list-style: none; padding: 0; margin: 0; }
.site-nav a { color: var(--tal-cream); text-decoration: none; font-weight: 800; font-size: .92rem; }
.site-nav a:hover, .site-nav .current-menu-item > a { color: var(--tal-orange); }
.menu-toggle { display: none; border: 1px solid var(--tal-line); border-radius: 10px; padding: 10px 12px; background: transparent; color: white; font-weight: 800; }

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 690px; display: grid; align-items: center;
  background:
    radial-gradient(circle at 82% 45%, rgba(255,101,8,.22), transparent 24%),
    linear-gradient(115deg, #0d100f 0%, #1c2621 58%, #352011 100%);
  border-bottom: 1px solid var(--tal-line);
}
.hero::before {
  content: ""; position: absolute; inset: -20%; z-index: -2; opacity: .18;
  background: repeating-linear-gradient(132deg, transparent 0 55px, rgba(246,240,228,.12) 56px 72px, transparent 73px 108px);
  transform: rotate(-7deg); mask-image: linear-gradient(90deg, transparent, #000 35%, #000 85%, transparent);
}
.hero::after {
  content: ""; position: absolute; width: 620px; height: 620px; right: -150px; bottom: -330px;
  border: 44px dashed rgba(255,101,8,.13); border-radius: 50%; transform: rotate(18deg); z-index: -1;
}
.hero-grid { display: grid; grid-template-columns: minmax(0,1.28fr) minmax(280px,.72fr); gap: clamp(40px,7vw,100px); align-items: center; padding-block: 94px; }
.eyebrow { color: var(--tal-orange); text-transform: uppercase; letter-spacing: .18em; font-weight: 900; font-size: .78rem; }
.hero h1 { max-width: 850px; margin: 14px 0 22px; font-size: clamp(3rem,7vw,6.6rem); line-height: .96; letter-spacing: -.065em; }
.hero h1 span { color: var(--tal-orange); }
.hero-copy { max-width: 700px; font-size: clamp(1.05rem,2vw,1.3rem); color: #d6dbd7; }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button, .wp-block-button__link, input[type="submit"], button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 12px 22px; border: 2px solid var(--tal-orange); border-radius: 999px;
  background: var(--tal-orange); color: #111; font: inherit; font-weight: 900; text-decoration: none;
  box-shadow: 0 10px 24px rgba(255,101,8,.18); cursor: pointer;
}
.button:hover, .wp-block-button__link:hover, input[type="submit"]:hover, button[type="submit"]:hover { background: #ff7c2c; color: #111; transform: translateY(-1px); }
.button.secondary { background: transparent; color: var(--tal-cream); box-shadow: none; }
.button.secondary:hover { background: var(--tal-orange); color: #111; }
.hero-badge { justify-self: end; width: min(100%, 410px); filter: drop-shadow(0 28px 55px rgba(0,0,0,.48)); animation: tal-float 7s ease-in-out infinite; }
@keyframes tal-float { 50% { transform: translateY(-10px) rotate(.5deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto!important; animation: none!important; transition: none!important; } }

.section { padding-block: clamp(70px,9vw,120px); }
.section-kicker { color: var(--tal-orange); font-weight: 900; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; }
.section h2, .entry-title { margin: 8px 0 18px; font-size: clamp(2.2rem,5vw,4.1rem); line-height: 1.03; letter-spacing: -.05em; }
.section-intro { max-width: 800px; color: #c8ceca; font-size: 1.15rem; }
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 42px; }
.card { padding: 30px; border: 1px solid var(--tal-line); border-radius: var(--tal-radius); background: linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); box-shadow: var(--tal-shadow); }
.card-number { color: var(--tal-orange); font-size: 2.3rem; font-weight: 900; line-height: 1; }
.card h3 { margin: 18px 0 8px; font-size: 1.35rem; }
.card p { margin: 0; color: #c5cbc7; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,7vw,90px); align-items: center; }
.panel { padding: clamp(28px,5vw,58px); border-radius: 28px; border: 1px solid var(--tal-line); background: #18201c; box-shadow: var(--tal-shadow); }
.guess-box { background: linear-gradient(145deg, #f4ead9, #d6bc8d); color: #151916; }
.guess-box .section-kicker { color: var(--tal-orange-dark); }
.guess-box h2 { color: #111; }
.guess-box p { color: #2e352f; }
.cta-band { padding-block: 70px; background: var(--tal-orange); color: #161816; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.cta-band h2 { margin: 0; font-size: clamp(2rem,4vw,3.5rem); line-height: 1; letter-spacing: -.04em; }
.cta-band .button { border-color: #111; background: #111; color: var(--tal-cream); box-shadow: none; }

.content-area { padding-block: 70px 110px; }
.content-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 50px; }
.entry-content, .post-card { background: rgba(255,255,255,.035); border: 1px solid var(--tal-line); border-radius: var(--tal-radius); padding: clamp(24px,5vw,54px); }
.entry-content h2, .entry-content h3, .entry-content h4 { line-height: 1.15; margin-top: 1.8em; }
.entry-content h2 { color: var(--tal-orange); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.entry-content th, .entry-content td { border: 1px solid var(--tal-line); padding: 12px; text-align: left; vertical-align: top; }
.entry-content th { background: rgba(255,101,8,.13); }
.post-list { display: grid; gap: 24px; }
.post-card h2 { margin-top: 0; }
.post-meta { color: var(--tal-muted); font-size: .9rem; }
.widget { padding: 22px; border: 1px solid var(--tal-line); border-radius: 16px; background: rgba(255,255,255,.03); margin-bottom: 22px; }

input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #687269; border-radius: 10px;
  background: #f7f2e8; color: #151816; font: inherit;
}
textarea { min-height: 140px; resize: vertical; }
label { font-weight: 800; }
.wpcf7-form p { margin-bottom: 1.25rem; }
.wpcf7-not-valid-tip { color: #ffb391; }

.site-footer { padding-block: 56px 28px; border-top: 1px solid var(--tal-line); background: #0c0f0e; }
.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; }
.footer-brand { max-width: 130px; }
.footer-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 22px; }
.footer-menu a { color: var(--tal-cream); }
.copyright { padding-top: 28px; margin-top: 38px; border-top: 1px solid var(--tal-line); color: var(--tal-muted); font-size: .86rem; }

@media (max-width: 860px) {
  .menu-toggle { display: block; }
  .site-nav { display: none; position: absolute; inset: 84px 0 auto; background: #111513; border-bottom: 1px solid var(--tal-line); padding: 22px; }
  .site-nav.is-open { display: block; }
  .site-nav ul { display: grid; gap: 16px; }
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; padding-block: 72px; }
  .hero-copy { margin-inline: auto; }
  .button-row { justify-content: center; }
  .hero-badge { justify-self: center; width: min(260px,70vw); order: -1; }
  .cards, .split, .content-grid, .footer-grid { grid-template-columns: 1fr; }
  .cta-inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 540px) {
  body { font-size: 16px; }
  .wrap { width: min(calc(100% - 28px), var(--tal-width)); }
  .header-inner { min-height: 72px; }
  .site-nav { top: 72px; }
  .brand img, .custom-logo { max-height: 55px; }
  .hero h1 { font-size: clamp(2.65rem,15vw,4.3rem); }
  .button-row .button { width: 100%; }
  .card, .entry-content, .post-card { padding: 22px; }
  .entry-content table { display: block; overflow-x: auto; }
}