/*
Theme Name: Pukka Chips
Theme URI: https://example.com/pukka-chips
Author: Pukka
Description: Bold, single-page "coming soon" landing theme for Pukka Chips with a built-in email capture form. Subscribers are stored in WordPress and viewable under "Subscribers" in the admin.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.5
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: pukka-chips
*/

:root {
  --red: #b03535;
  --red-dark: #8f2929;
  --ink: #1c1a19;
  --paper: #f2ece2;
}

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

html, body { height: 100%; }

body {
  font-family: "Oswald", system-ui, sans-serif;
  color: var(--ink);
  min-height: 100dvh;
  display: flex;
  overflow-y: auto;
  padding: 20px;

  background-image:
    linear-gradient(rgba(242,236,226,0.55), rgba(242,236,226,0.35)),
    url("assets/background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.hero {
  width: 100%;
  max-width: 760px;
  margin: auto;
  text-align: center;
}

/* Crown divider */
.crown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: clamp(6px, 1.5vw, 14px);
}
.crown .line { height: 3px; width: clamp(50px, 12vw, 120px); background: var(--ink); }
.crown svg { width: clamp(34px, 5vw, 46px); height: auto; fill: var(--ink); }

/* Title */
.title {
  font-family: "Anton", "Oswald", sans-serif;
  line-height: 0.86;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.title .pukka { display: block; font-size: clamp(64px, 15vw, 160px); color: var(--ink); }
.title .chips { display: block; font-size: clamp(64px, 15vw, 160px); color: var(--red); }

/* Tagline */
.tagline {
  margin-top: clamp(14px, 2.5vw, 26px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.35;
}
.tagline .l1 { color: var(--ink); font-size: clamp(15px, 2.4vw, 26px); }
.tagline .l2 { color: var(--red); font-size: clamp(15px, 2.4vw, 26px); }

.rule {
  width: 70px; height: 3px; margin: clamp(14px, 2.2vw, 22px) auto 0;
  background: var(--red);
}

/* Form section */
.cta-label {
  margin-top: clamp(22px, 3.5vw, 40px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--ink);
  font-size: clamp(13px, 1.7vw, 18px);
}

.signup-form {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  background: rgba(255,255,255,0.25);
  padding: 8px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
}

.email {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: #fff;
  padding: 16px 20px;
  font-family: "Oswald", sans-serif;
  font-size: clamp(15px, 2vw, 18px);
  color: #333;
  border-radius: 3px;
  outline: none;
}
.email::placeholder { color: #8a8a8a; }
.email:focus { box-shadow: 0 0 0 3px rgba(176,53,53,0.35); }

.submit {
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  background: var(--red);
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: clamp(14px, 1.8vw, 17px);
  padding: 0 clamp(18px, 3vw, 34px);
  border-radius: 3px;
  transition: background 0.15s ease, transform 0.05s ease;
}
.submit:hover { background: var(--red-dark); }
.submit:active { transform: translateY(1px); }
.submit[disabled] { opacity: 0.6; cursor: default; }

.reassure {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(13px, 1.6vw, 16px);
}
.reassure svg { width: 16px; height: 16px; fill: var(--red); flex: 0 0 auto; }

.msg { margin-top: 12px; font-weight: 600; min-height: 1.2em; }
.msg.ok { color: var(--red-dark); }
.msg.err { color: #a11; }

/* Mobile: stack the form */
@media (max-width: 560px) {
  body { background-attachment: scroll; }
  .signup-form { flex-direction: column; }
  .submit { padding: 15px; }
}