/*
Theme Name: Hexanets Coming Soon
Theme URI: https://hexanets.co.uk
Author: Hexanets Ltd
Author URI: https://hexanets.co.uk
Description: Single-page coming soon theme for Hexanets — a world-class indoor cricket bowling machine. Captures email and mobile signups, emails them to your inbox and stores them in the WordPress admin.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hexanets-coming-soon
Tags: one-column, custom-colors, full-width-template
*/

/* ============================================================
   Hexanets brand tokens
   ============================================================ */
:root {
  --hx-navy: #1b1d4d;
  --hx-navy-600: #2a2d6b;
  --hx-red: #e0050d;
  --hx-canvas: #f6f7fb;
  --hx-white: #ffffff;
  --hx-text: #1b1d4d;
  --hx-text-muted: #4d5372;
  --hx-text-subtle: #6b7191;
  --hx-border: rgba(16, 17, 58, 0.12);
  --hx-border-strong: rgba(16, 17, 58, 0.22);
  --hx-shadow-sm: 0 4px 14px rgba(16, 17, 58, 0.07);
  --hx-shadow-focus: 0 0 0 4px rgba(224, 5, 13, 0.18);
  --hx-glow-accent: 0 6px 20px rgba(224, 5, 13, 0.32);
  --hx-radius-md: 12px;
  --hx-radius-lg: 16px;
  --hx-radius-pill: 999px;
  --hx-font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hx-font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hx-font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --hx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--hx-canvas);
  color: var(--hx-text);
  font-family: var(--hx-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--hx-red); text-decoration: none; }
a:hover { color: var(--hx-navy); text-decoration: underline; }

/* Hide the WordPress admin bar offset on this single-page theme */
html { margin-top: 0 !important; }
* html body { margin-top: 0 !important; }

.hx-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Page shell
   ============================================================ */
.hx-page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4.5vw, 56px);
}

/* Faint hex watermark, bottom right */
.hx-watermark {
  position: absolute;
  right: -150px;
  bottom: -130px;
  width: min(540px, 68vw);
  opacity: 0.06;
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   Animated delivery arc
   ============================================================ */
.hx-arc {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 600px;
  pointer-events: none;
  transform-origin: center top;
}

.hx-arc svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hx-arc__path {
  fill: none;
  stroke: var(--hx-navy);
  stroke-width: 2;
  stroke-dasharray: 2 12;
  stroke-linecap: round;
  opacity: 0.22;
  animation: hx-dash 1.4s linear infinite;
}

.hx-arc__ball {
  position: absolute;
  top: -9px;
  left: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hx-red);
  box-shadow: 0 6px 20px rgba(224, 5, 13, 0.45);
  offset-path: path('M 60 300 Q 600 60 1140 380');
  animation: hx-deliver 3.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes hx-dash {
  to { stroke-dashoffset: -28; }
}

@keyframes hx-deliver {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-arc__ball { animation: none; opacity: 0; }
  .hx-arc__path { animation: none; }
}

/* ============================================================
   Header
   ============================================================ */
.hx-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hx-logo {
  height: clamp(34px, 4vw, 46px);
  width: auto;
  display: block;
}

.hx-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  background: var(--hx-red);
  color: var(--hx-white);
  font-family: var(--hx-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: var(--hx-radius-pill);
  white-space: nowrap;
}

/* ============================================================
   Hero
   ============================================================ */
.hx-hero {
  position: relative;
  margin-top: auto;
  max-width: 860px;
}

.hx-hero__title {
  font-family: var(--hx-font-display);
  font-weight: 800;
  font-size: clamp(56px, 11vw, 112px);
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--hx-navy);
  margin: 0 0 clamp(18px, 2.6vw, 28px);
}

.hx-hero__title .hx-dot { color: var(--hx-red); }

.hx-hero__lede {
  font-family: var(--hx-font-body);
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.55;
  color: var(--hx-text-muted);
  margin: 0;
  max-width: 580px;
  text-wrap: pretty;
}

.hx-hero__lede strong {
  color: var(--hx-navy);
  font-weight: 700;
}

/* ============================================================
   Signup form
   ============================================================ */
.hx-signup {
  position: relative;
  margin-top: clamp(30px, 4vw, 44px);
  max-width: 620px;
}

.hx-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hx-form__heading {
  font-family: var(--hx-font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--hx-navy);
}

.hx-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hx-field {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hx-field--tel { flex: 1 1 200px; }

.hx-label {
  font-family: var(--hx-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--hx-text);
}

.hx-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-family: var(--hx-font-body);
  font-size: 16px;
  color: var(--hx-text);
  background: var(--hx-white);
  border: 2px solid var(--hx-border-strong);
  border-radius: var(--hx-radius-md);
  outline: none;
  transition: border-color 160ms var(--hx-ease-out), box-shadow 160ms var(--hx-ease-out);
}

.hx-input:focus {
  border-color: var(--hx-navy-600);
  box-shadow: var(--hx-shadow-focus);
}

.hx-input::placeholder { color: var(--hx-text-subtle); opacity: 1; }

.hx-helper {
  font-family: var(--hx-font-body);
  font-size: 12px;
  color: var(--hx-text-subtle);
}

/* Consent checkbox */
.hx-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: var(--hx-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--hx-text-muted);
}

.hx-consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--hx-red);
  cursor: pointer;
}

/* Actions */
.hx-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.hx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  font-family: var(--hx-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hx-white);
  background: var(--hx-red);
  border: 0;
  border-radius: var(--hx-radius-pill);
  box-shadow: var(--hx-glow-accent);
  cursor: pointer;
  transition: filter 160ms var(--hx-ease-out), transform 160ms var(--hx-ease-out);
  min-height: 44px;
}

.hx-btn:hover { filter: brightness(1.06); }
.hx-btn:active { transform: scale(0.97); }
.hx-btn:focus-visible { outline: none; box-shadow: var(--hx-glow-accent), var(--hx-shadow-focus); }
.hx-btn[disabled] { opacity: 0.6; cursor: default; }

.hx-note {
  font-family: var(--hx-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--hx-text-subtle);
  max-width: 260px;
}

.hx-error {
  font-family: var(--hx-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--hx-red);
  margin: 0;
}

/* Success card */
.hx-success {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px;
  background: var(--hx-white);
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius-lg);
  box-shadow: var(--hx-shadow-sm);
  max-width: 520px;
}

.hx-success__tick {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--hx-red);
  color: var(--hx-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.hx-success__title {
  font-family: var(--hx-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--hx-navy);
  margin: 0 0 5px;
}

.hx-success__body {
  font-family: var(--hx-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--hx-text-muted);
  margin: 0;
}

/* ============================================================
   Footer
   ============================================================ */
.hx-footer {
  position: relative;
  margin-top: clamp(28px, 4vw, 52px);
  font-family: var(--hx-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hx-text-subtle);
}

.hx-footer a { color: inherit; }
.hx-footer a:hover { color: var(--hx-red); text-decoration: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1240px) {
  .hx-arc { transform: translateX(-50%) scale(0.82); }
}

@media (max-width: 820px) {
  .hx-arc { transform: translateX(-50%) scale(0.6); top: -40px; }
}

@media (max-width: 560px) {
  .hx-arc { opacity: 0.5; }
  .hx-actions { gap: 12px; }
  .hx-btn { width: 100%; }
  .hx-note { max-width: none; }
}