/*
Theme Name: Avoiding Insolvency Checklist
Theme URI: https://example.com/
Author: Mark Smillie
Author URI: https://example.com/
Description: A single-purpose, time-sensitive landing page for The Avoiding Insolvency Checklist. Every piece of copy is editable in Appearance to Customize to Checklist Page, colours included. Drop your quiz or form plugin shortcode into the styled form box.
Version: 1.0.0
Requires at least: 6.0
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: avoiding-insolvency-checklist
*/

/* ============================================================
   Design tokens (overridable in the Customizer -> Colours)
   ============================================================ */
:root {
  --ai-bg:        #f4f0e7;
  --ai-ink:       #1b2a5c;
  --ai-accent:    #cf3a2b;
  --ai-accent-2:  #c0392b;
  --ai-body:      #46507a;
  --ai-muted:     #6b7395;
  --ai-subhead:   #5b6488;
  --ai-surface:   #ffffff;
  --ai-option:    #f4f0e7;
  --ai-radius:    16px;
  --ai-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ai-font);
  background: var(--ai-bg);
  color: var(--ai-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--ai-accent); }
a:hover { color: var(--ai-ink); }

@keyframes ai-pulse {
  0%   { opacity: 1;   transform: scale(1); }
  50%  { opacity: .35; transform: scale(.62); }
  100% { opacity: 1;   transform: scale(1); }
}
@keyframes ai-ring {
  0%   { box-shadow: 0 0 0 0   rgba(207,58,43,0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(207,58,43,0); }
  100% { box-shadow: 0 0 0 0   rgba(207,58,43,0); }
}

/* ============================================================
   Page
   ============================================================ */
.ai-page { min-height: 100vh; background: var(--ai-bg); }

/* Emergency alert bar */
.ai-alert {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  background: var(--ai-accent-2); color: #fff;
  padding: 12px 24px; text-align: center;
  box-shadow: 0 6px 22px rgba(120,25,15,0.28);
}
.ai-alert-text { font: 600 14px/1.4 var(--ai-font); letter-spacing: .01em; }

.ai-dot {
  width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto;
  background: #ffd7cf; animation: ai-pulse 1.4s ease-in-out infinite;
}
.ai-dot--accent { width: 8px; height: 8px; background: var(--ai-accent); }

/* Main column */
.ai-main { max-width: 760px; margin: 0 auto; padding: 72px 26px 96px; }

/* Time-sensitive kicker */
.ai-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; border-radius: 999px;
  background: color-mix(in srgb, var(--ai-accent) 12%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--ai-accent) 30%, transparent);
  margin-bottom: 28px;
}
.ai-kicker span:last-child {
  text-transform: uppercase; letter-spacing: .16em;
  font: 700 12px/1 var(--ai-font); color: var(--ai-accent-2);
}

.ai-h1 {
  font: 800 clamp(40px, 7vw, 62px)/1.03 var(--ai-font);
  letter-spacing: -0.028em; color: var(--ai-ink); margin: 0 0 14px;
}
.ai-subhead { font: 600 24px/1.2 var(--ai-font); color: var(--ai-subhead); margin: 0 0 40px; }

.ai-lead { font: 600 24px/1.48 var(--ai-font); color: var(--ai-ink); margin: 0 0 30px; max-width: 54ch; }
.ai-body { font: 400 17px/1.74 var(--ai-font); color: var(--ai-body); margin: 0 0 22px; max-width: 62ch; }
.ai-body:last-of-type { margin-bottom: 34px; }

/* CTA */
.ai-cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ai-accent); color: #fff; text-decoration: none;
  padding: 18px 30px; border-radius: 999px;
  font: 700 17px/1 var(--ai-font);
  box-shadow: 0 16px 34px rgba(207,58,43,0.32);
  animation: ai-ring 2.2s ease-out infinite;
}
.ai-cta:hover { color: #fff; filter: brightness(1.05); }
.ai-cta-arrow { font-weight: 800; }

/* Disclaimer */
.ai-disclaimer {
  font: italic 400 15px/1.64 var(--ai-font); color: var(--ai-muted);
  margin: 46px 0 40px; max-width: 64ch;
  padding-left: 18px;
  border-left: 2px solid color-mix(in srgb, var(--ai-accent) 35%, transparent);
}

/* ============================================================
   Form card (holds your plugin shortcode)
   ============================================================ */
.ai-form-anchor { scroll-margin-top: 80px; }
.ai-form-card {
  background: var(--ai-surface);
  border: 1px solid color-mix(in srgb, var(--ai-ink) 12%, transparent);
  border-radius: calc(var(--ai-radius) + 6px);
  box-shadow: 0 30px 80px rgba(20,32,74,0.14);
  padding: 34px 34px 30px;
}
.ai-form-eyebrow {
  display: flex; align-items: center; gap: 10px;
  text-transform: uppercase; letter-spacing: .15em;
  font: 700 12px/1 var(--ai-font); color: var(--ai-accent); margin-bottom: 22px;
}
.ai-bar { width: 22px; height: 3px; background: var(--ai-accent); border-radius: 2px; }

/* Empty-state placeholder shown until a shortcode is added */
.ai-form-placeholder {
  border: 2px dashed color-mix(in srgb, var(--ai-ink) 22%, transparent);
  border-radius: var(--ai-radius);
  padding: 44px 28px; text-align: center; background: var(--ai-option);
}
.ai-form-placeholder p { font: 600 17px/1.5 var(--ai-font); color: var(--ai-ink); margin: 0 0 14px; }
.ai-form-placeholder code {
  display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px; color: var(--ai-accent-2);
  background: #fff; border: 1px solid color-mix(in srgb, var(--ai-ink) 14%, transparent);
  border-radius: 8px; padding: 8px 12px;
}
.ai-form-placeholder-hint { font: 400 13px/1.5 var(--ai-font); color: var(--ai-muted); margin: 16px 0 0; }

/* ------------------------------------------------------------
   Generic styling for whatever form plugin you drop in.
   Targets common inputs so most quiz/form plugins inherit the look.
   ------------------------------------------------------------ */
.ai-form-card input[type="text"],
.ai-form-card input[type="email"],
.ai-form-card input[type="tel"],
.ai-form-card input[type="number"],
.ai-form-card input[type="url"],
.ai-form-card textarea,
.ai-form-card select {
  width: 100%; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--ai-ink) 16%, transparent);
  border-radius: var(--ai-radius);
  font: 500 16px/1.4 var(--ai-font); color: var(--ai-ink);
  background: var(--ai-option); transition: border-color .16s ease, box-shadow .16s ease;
}
.ai-form-card input:focus,
.ai-form-card textarea:focus,
.ai-form-card select:focus {
  outline: none; border-color: var(--ai-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ai-accent) 16%, transparent);
}
.ai-form-card label { font: 600 15px/1.5 var(--ai-font); color: var(--ai-ink); }

.ai-form-card button,
.ai-form-card input[type="submit"],
.ai-form-card input[type="button"],
.ai-form-card .button {
  background: var(--ai-accent); color: #fff; border: none;
  border-radius: 999px; padding: 14px 28px;
  font: 700 15px/1 var(--ai-font); cursor: pointer;
  transition: filter .16s ease;
}
.ai-form-card button:hover,
.ai-form-card input[type="submit"]:hover,
.ai-form-card .button:hover { filter: brightness(1.06); }

/* ============================================================
   About Mark (static text, intentionally not a link)
   ============================================================ */
.ai-about {
  margin-top: 60px; padding-top: 34px;
  border-top: 1px solid color-mix(in srgb, var(--ai-ink) 14%, transparent);
}
.ai-about-label {
  text-transform: uppercase; letter-spacing: .15em;
  font: 700 12px/1 var(--ai-font); color: var(--ai-accent-2); margin: 0 0 13px;
}
.ai-about-text { font: 400 15px/1.7 var(--ai-font); color: var(--ai-muted); max-width: 66ch; margin: 0; }

/* ============================================================
   Small screens
   ============================================================ */
@media (max-width: 600px) {
  .ai-main { padding: 52px 20px 72px; }
  .ai-alert-text { font-size: 13px; }
  .ai-form-card { padding: 26px 22px 24px; }
}