/*
Theme Name: Hero Scroll
Theme URI: https://example.com/hero-scroll
Author: Alan Bird
Author URI: https://example.com
Description: Single-page medieval landing theme for The King's Will. Fixed hero background with sticky top bar (logo + MailerLite email capture, gold rule waxed by the seal). Intro text scrolls over the hero with a translucent-to-opaque gradient backdrop.
Version: 1.2.2
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hero-scroll
*/

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.65;
  color: #1b1108;
  background: #f5ead3;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #2a1a0a;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
}
h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}
h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: #7a1e1e;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ---------- Fixed background image ---------- */
.tkw-bg {
  position: fixed;
  inset: 0;
  background-image: url("assets/hero.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;
}

/* ---------- Hero zone + sticky top bar ----------
 * The topbar is position: sticky inside a 100vh-tall hero-zone wrapper, so it
 * pins to the top of the viewport while the hero is on screen, then gets
 * released when the parent's bottom edge crosses the viewport top — at that
 * point it scrolls naturally with the page (i.e., the intro section pushes it
 * up off-screen). Scrolling back up reverses the same motion: the topbar
 * smoothly re-enters and re-pins.
 */
.tkw-hero-zone {
  position: relative;
  /* Mobile note: 100vh on iOS Safari / Android Chrome is the LARGE viewport
   * (calculated as if the URL bar were collapsed). When the user first lands
   * on the page with the URL bar visible, that makes 100vh taller than the
   * visible area, which causes the sticky topbar to release almost
   * immediately on scroll. 100dvh is the dynamic viewport height — it
   * matches what the user actually sees and resizes as the URL bar collapses,
   * so the topbar sticks for the full visible hero before being released.
   * 100vh is kept as a fallback for browsers without dvh support (pre-2022).
   */
  height: 100vh;
  height: 100dvh;
}

.tkw-topbar {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 2.75rem 1.5rem 1.5rem;
  background: transparent;
  z-index: 50;
  /* The wax-seal gold rule (.tkw-topbar__logo::before) is positioned with
   * left: -100vw / right: -100vw so it visually extends across the full
   * screen. While the topbar was position: fixed, that overflow didn't
   * count toward document width (fixed elements are out of flow). With
   * sticky positioning the topbar is back in flow, so the rule's extent
   * was creating a horizontal scrollbar on mobile. Clipping at the topbar
   * itself contains the overflow without putting `overflow: hidden` on
   * body/html (which would break sticky entirely). */
  overflow: hidden;
}

/* Gold rule locked at 2/3 down the logo — wax-seal effect */
.tkw-topbar__logo::before {
  content: "";
  position: absolute;
  left: -100vw;
  right: -100vw;
  top: 66.6667%;
  height: 6px;
  background: #d4a94a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  transform: translateY(-50%);
  z-index: -1;
  pointer-events: none;
}

.tkw-topbar__form {
  position: relative;
  z-index: 2;
  flex: 0 1 420px;
  color: #fff8e1;
  text-align: left;
  padding: 0.75rem 1rem;
  background: rgba(20, 12, 6, 0.6);
  border: 1px solid rgba(255, 230, 170, 0.3);
  border-radius: 6px;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  transition:
    background-color 300ms ease,
    border-color 300ms ease;
}

.tkw-topbar__form.is-valid {
  background: rgba(20, 12, 6, 0.82);
  border-color: rgba(255, 230, 170, 0.65);
}

.tkw-topbar__form .ml-form-embedContainer,
.tkw-topbar__form .ml-form-embedWrapper,
.tkw-topbar__form .ml-form-embedBody,
.tkw-topbar__form .ml-form-formContent,
.tkw-topbar__form .ml-form-fieldRow,
.tkw-topbar__form .ml-form-embedSubmit {
  text-align: left;
}

.tkw-topbar__logo {
  position: relative;
  flex: 0 0 auto;
}

.tkw-topbar__logo img {
  height: clamp(64px, 8vw, 100px);
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

/* MailerLite markup inside topbar — strip its outer chrome */
body .tkw-topbar__form .ml-form-embedContainer,
body .tkw-topbar__form .ml-form-align-center,
body .tkw-topbar__form .ml-form-embedWrapper,
body .tkw-topbar__form .ml-form-embedBody,
body .tkw-topbar__form .ml-block-form,
body .tkw-topbar__form [class*="ml-form-embed"],
body .tkw-topbar__form [class*="ml-block"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Restore visibility for MailerLite header/description text and theme it */
body .tkw-topbar__form .ml-form-embedContent,
body .tkw-topbar__form .ml-form-embedHeader,
body .tkw-topbar__form .ml-form-embedContent *,
body .tkw-topbar__form .ml-form-embedHeader * {
  display: revert !important;
  color: #fff8e1 !important;
  background: transparent !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65) !important;
}

body .tkw-topbar__form .ml-form-embedContent,
body .tkw-topbar__form .ml-form-embedHeader {
  margin: 0 0 0.4rem !important;
  padding: 0 !important;
  font-size: 0.85rem !important;
  line-height: 1.35 !important;
}

body .tkw-topbar__form .ml-form-embedContent h1,
body .tkw-topbar__form .ml-form-embedContent h2,
body .tkw-topbar__form .ml-form-embedContent h3,
body .tkw-topbar__form .ml-form-embedContent h4,
body .tkw-topbar__form .ml-form-embedHeader h1,
body .tkw-topbar__form .ml-form-embedHeader h2,
body .tkw-topbar__form .ml-form-embedHeader h3,
body .tkw-topbar__form .ml-form-embedHeader h4 {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  margin: 0 0 0.25rem !important;
}

body .tkw-topbar__form .ml-form-embedContent p {
  font-family: inherit !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
}

/* Force horizontal layout regardless of which wrapper MailerLite uses */
body .tkw-topbar__form form,
body .tkw-topbar__form .ml-form-formContent,
body .tkw-topbar__form .ml-form-embedBody > div {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
}

body .tkw-topbar__form .ml-form-fieldRow,
body .tkw-topbar__form .ml-field-group {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

body .tkw-topbar__form .ml-form-embedSubmit {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Element-type fallback — catch any input/button MailerLite renders, regardless of wrapper class */
body .tkw-topbar__form input[type="email"],
body .tkw-topbar__form input[type="text"],
body .tkw-topbar__form input.form-control,
body .tkw-topbar__form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  width: 100% !important;
  height: auto !important;
  padding: 0.55rem 0.85rem !important;
  background: rgba(255, 248, 225, 0.92) !important;
  border: 1px solid rgba(255, 230, 170, 0.6) !important;
  border-radius: 4px !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  color: #1b1108 !important;
  box-shadow: none !important;
}

body .tkw-topbar__form input[type="email"]:focus,
body .tkw-topbar__form input.form-control:focus,
body .tkw-topbar__form input:focus {
  outline: 2px solid #d4a94a !important;
  outline-offset: 1px;
}

body .tkw-topbar__form button,
body .tkw-topbar__form button[type="submit"],
body .tkw-topbar__form input[type="submit"],
body .tkw-topbar__form .ml-form-embedSubmit button,
body .tkw-topbar__form .ml-form-embedSubmit button.primary {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.55rem 1rem !important;
  background: #e6cc85 !important;
  color: #7a6a3a !important;
  border: 1px solid #c9a94a !important;
  border-radius: 4px !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: not-allowed !important;
  opacity: 0.85 !important;
  box-shadow: none !important;
  transition:
    background-color 250ms ease,
    color 250ms ease,
    border-color 250ms ease,
    opacity 250ms ease;
}

/* Hide MailerLite's loading-state button so we don't double up next to submit */
body .tkw-topbar__form .ml-form-embedSubmit button.loading,
body .tkw-topbar__form button.loading {
  display: none !important;
}

body .tkw-topbar__form.is-valid button,
body .tkw-topbar__form.is-valid button[type="submit"],
body .tkw-topbar__form.is-valid input[type="submit"],
body .tkw-topbar__form.is-valid .ml-form-embedSubmit button,
body .tkw-topbar__form.is-valid .ml-form-embedSubmit button.primary {
  background: #1b1108 !important;
  color: #f5d98a !important;
  border-color: #d4a94a !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

body .tkw-topbar__form.is-valid button:hover,
body .tkw-topbar__form.is-valid .ml-form-embedSubmit button:hover {
  background: #2a1a0a !important;
  border-color: #f5d98a !important;
}

/* Style MailerLite's post-submit success / error messages to match the topbar */
body .tkw-topbar__form .ml-form-successBody,
body .tkw-topbar__form .ml-form-successContent,
body .tkw-topbar__form .ml-form-successContent *,
body .tkw-topbar__form .ml-error-form,
body .tkw-topbar__form .ml-error-message,
body .tkw-topbar__form .ml-form-recaptcha {
  color: #fff8e1 !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  background: transparent !important;
}

/* ---------- Intro: scrolls over fixed bg with gradient ----------
 * The 100vh of hero space is provided by .tkw-hero-zone above, so this
 * section starts immediately below it (no margin-top needed).
 */
.tkw-intro {
  position: relative;
  background: linear-gradient(
    to bottom,
    rgba(12, 7, 3, 0) 0%,
    rgba(12, 7, 3, 0.55) 12%,
    rgba(12, 7, 3, 0.85) 28%,
    rgba(12, 7, 3, 0.96) 50%,
    rgba(12, 7, 3, 0.98) 100%
  );
  color: #fff8e1;
  z-index: 5;
}

.tkw-intro__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1.5rem 8rem;
}

.tkw-intro__seals {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 4vw, 2.75rem);
  margin-bottom: 2.5rem;
}

.tkw-intro__seals img {
  width: clamp(70px, 11vw, 120px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.65));
}

/* Verify contrast: #fff8e1 on rgba(12,7,3,0.96) ≈ #100a05 → ~16:1 (WCAG AAA) */
.tkw-intro__hook {
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.4;
  color: #f5d98a;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  margin-bottom: 2rem;
}

.tkw-intro p {
  font-size: 1.1rem;
  color: #fff8e1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

/* ---------- Page sections below hero ---------- */
.tkw-section {
  max-width: 820px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.tkw-section--wide {
  max-width: 1040px;
}

.tkw-section__lead {
  font-size: 1.05rem;
  color: #3a2712;
}

.tkw-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 1rem;
  text-align: center;
}

.tkw-pillar img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin: 0 auto 0.75rem;
}

.tkw-pillar h3 {
  margin-bottom: 0.25rem;
}

.tkw-pillars__note {
  text-align: center;
  font-style: italic;
  color: #5a4020;
  margin-top: 0.5rem;
}

.tkw-cta-banner {
  background: #2a1a0a;
  color: #fff8e1;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border-top: 2px solid #d4a94a;
  border-bottom: 2px solid #d4a94a;
}

.tkw-cta-banner h2 {
  color: #fff8e1;
}

.tkw-cta-banner .ml-form-fieldRow input[type="email"],
.tkw-cta-banner input.form-control {
  padding: 0.7rem 1rem !important;
  border-radius: 4px !important;
  border: 1px solid #d4a94a !important;
  min-width: 280px !important;
  font-family: inherit !important;
}

.tkw-cta-banner .ml-form-embedSubmit button,
.tkw-cta-banner .ml-form-embedSubmit button[type="submit"] {
  background: #d4a94a !important;
  color: #2a1a0a !important;
  border: 0 !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 4px !important;
  font-family: "Cinzel", Georgia, serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  margin-left: 0.5rem !important;
}

/* Pillar sections (Halls of Power, Gold, Army, Secrets, Inquisition) */
.tkw-pillar-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  border-bottom: 1px solid rgba(42, 26, 10, 0.15);
}

.tkw-pillar-section:last-of-type {
  border-bottom: 0;
}

.tkw-pillar-section__seal {
  width: 110px;
  height: 110px;
  margin-bottom: 0.5rem;
}

.tkw-pillar-section__art {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #2a1a0a;
  color: #fff8e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cinzel", Georgia, serif;
  font-style: italic;
  border-radius: 4px;
  margin: 1.25rem 0;
  background-size: cover;
  background-position: center;
}

.tkw-inline-form {
  background: #fff8e1;
  border: 1px solid #d4a94a;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}

.tkw-inline-form .ml-form-fieldRow input[type="email"],
.tkw-inline-form input.form-control {
  padding: 0.65rem 0.9rem !important;
  border: 1px solid #b8884a !important;
  border-radius: 4px !important;
  min-width: 260px !important;
}

.tkw-inline-form .ml-form-embedSubmit button,
.tkw-inline-form .ml-form-embedSubmit button[type="submit"] {
  background: #7a1e1e !important;
  color: #fff8e1 !important;
  border: 0 !important;
  padding: 0.65rem 1.25rem !important;
  border-radius: 4px !important;
  font-family: "Cinzel", Georgia, serif !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin-left: 0.5rem !important;
}

/* ---------- Footer ---------- */
.tkw-footer {
  background: #1b1108;
  color: #d4bfa0;
  padding: 3rem 1.5rem;
  text-align: center;
}

.tkw-footer h2 {
  color: #fff8e1;
}

/* ---------- Utilities ---------- */
.tkw-placeholder-img {
  background: #d8c6a2
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect width='40' height='40' fill='none' stroke='%238a6a2a' stroke-width='1' stroke-dasharray='4 4'/></svg>");
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .tkw-topbar {
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem 0.85rem 1rem;
    gap: 1rem;
  }
  .tkw-topbar__logo {
    align-self: center;
  }
  .tkw-topbar__logo img {
    height: auto;
    width: min(82vw, 360px);
  }
  .tkw-topbar__form {
    flex: 1 1 auto;
    min-width: 0;
  }
  .tkw-topbar__form .ml-form-fieldRow input[type="email"],
  .tkw-topbar__form .ml-form-fieldRow input[type="text"],
  .tkw-topbar__form input.form-control {
    font-size: 0.85rem !important;
    padding: 0.45rem 0.65rem !important;
  }
  .tkw-topbar__form .ml-form-formContent {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .tkw-topbar__form .ml-form-embedSubmit button,
  .tkw-topbar__form .ml-form-embedSubmit button[type="submit"] {
    padding: 0.45rem 0.7rem !important;
    font-size: 0.8rem !important;
    width: 100% !important;
  }
  .tkw-intro__inner {
    padding: 3rem 1.1rem 6rem;
  }
}