/*
AndrewCrook.ca
style.css v1.2.1

Purpose:
Mobile-first campaign gateway.
Calm civic signal. Low clutter. Soft-premium polish.
*/

/* =========================
DESIGN TOKENS
========================= */

:root {
--navy: #01122E;
--navy-2: #00142F;
--gold: #D8A242;
--gold-2: #C49138;
--ivory: #F9F9F9;
--white: #FFFFFF;
--text-dark: #101828;
--muted: #475467;
--line-soft: rgba(216, 162, 66, 0.35);
--shadow-soft: 0 20px 60px rgba(1, 18, 46, 0.18);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--max-width: 1120px;
}

/* =========================
BASE
========================= */

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

html {
scroll-behavior: smooth;
}

body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: var(--ivory);
color: var(--navy);
line-height: 1.6;
text-rendering: optimizeLegibility;
}

img,
iframe,
video {
max-width: 100%;
}

img {
height: auto;
display: block;
}

a {
color: var(--gold);
text-decoration: none;
text-underline-offset: 0.18em;
}

a:hover {
color: var(--gold-2);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 3px;
}

h1,
h2,
h3,
p {
margin-top: 0;
}

h1,
h2,
h3 {
line-height: 1.12;
letter-spacing: -0.02em;
}

h1 {
font-size: clamp(2.4rem, 12vw, 5rem);
margin-bottom: 18px;
}

h2 {
font-size: clamp(2rem, 8vw, 3.25rem);
margin-bottom: 18px;
}

h3 {
font-size: clamp(1.2rem, 4vw, 1.45rem);
margin-bottom: 10px;
}

p {
font-size: 1.05rem;
margin-bottom: 18px;
}

strong,
b {
font-weight: 750;
}

section {
padding: 56px 0;
}

.wrap {
width: min(var(--max-width), calc(100% - 32px));
margin: 0 auto;
}

/* =========================
SMALL REUSABLE ELEMENTS
========================= */

.kicker {
display: inline-block;
margin-bottom: 12px;
color: var(--gold);
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.lede {
font-size: clamp(1.1rem, 4vw, 1.35rem);
line-height: 1.5;
}

.muted {
color: var(--muted);
}

.gold-line {
width: 72px;
height: 3px;
margin: 22px 0;
background: var(--gold);
border-radius: 999px;
}

/* =========================
BUTTONS
========================= */

.button-row {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 24px;
}

.btn,
button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
width: 100%;
border: 0;
border-radius: var(--radius-sm);
padding: 14px 18px;
background: var(--gold);
color: var(--navy);
font: inherit;
font-weight: 850;
line-height: 1.1;
text-align: center;
cursor: pointer;
box-shadow: 0 10px 24px rgba(196, 145, 56, 0.2);
transition:
transform 160ms ease,
background-color 160ms ease,
box-shadow 160ms ease;
}

.btn:hover,
button:hover {
background: var(--gold-2);
color: var(--navy);
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(196, 145, 56, 0.28);
}

.btn-secondary {
background: transparent;
color: var(--ivory);
border: 1px solid var(--line-soft);
box-shadow: none;
}

.btn-secondary:hover {
background: rgba(249, 249, 249, 0.08);
color: var(--ivory);
}

/* =========================
HERO
========================= */

.hero {
background:
radial-gradient(circle at top center, rgba(216, 162, 66, 0.12), transparent 34%),
linear-gradient(180deg, var(--navy-2), var(--navy));
color: var(--ivory);
padding: 24px 0 56px;
}

.hero-card {
border: 0;
background: transparent;
padding: 16px;
text-align: center;
box-shadow: none;
}

.brand-img {
width: 100%;
max-width: 900px;
margin: 0 auto 22px;
}

.video-wrap {
position: relative;
width: 100%;
max-width: 900px;
aspect-ratio: 16 / 9;
margin: 0 auto 20px;
border: 1px solid var(--gold);
border-radius: var(--radius-md);
background: #000;
overflow: hidden;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.video-wrap iframe {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
border: 0;
}

.tagline {
max-width: 760px;
margin: 0 auto;
color: var(--ivory);
font-size: clamp(1.08rem, 4vw, 1.45rem);
font-weight: 650;
line-height: 1.4;
}

/* =========================
CONTENT SECTIONS
========================= */

.participate,
#about,
#ward13 {
background: var(--ivory);
color: var(--navy);
}

#listening {
background:
radial-gradient(circle at top left, rgba(216, 162, 66, 0.11), transparent 34%),
linear-gradient(180deg, var(--navy), var(--navy-2));
color: var(--ivory);
}

#listening h2,
#listening h3,
#listening p {
color: var(--ivory);
}

#listening .panel {
color: var(--navy);
}

#listening .panel h3,
#listening .panel p {
color: var(--navy);
}

/* =========================
PANELS / CARDS
========================= */

.panel {
background: var(--white);
border-left: 5px solid var(--gold);
border-radius: var(--radius-md);
padding: 24px;
box-shadow: var(--shadow-soft);
}

.panel p:last-child {
margin-bottom: 0;
}

.card {
background: var(--white);
border: 1px solid rgba(1, 18, 46, 0.08);
border-radius: var(--radius-md);
padding: 22px;
box-shadow: 0 14px 36px rgba(1, 18, 46, 0.08);
}

.two-col {
display: grid;
gap: 24px;
}

/* =========================
FORMS
========================= */

form {
display: grid;
gap: 14px;
width: 100%;
margin-top: 24px;
}

input,
textarea {
width: 100%;
border: 1px solid rgba(1, 18, 46, 0.18);
border-radius: var(--radius-sm);
padding: 14px 16px;
background: var(--white);
color: var(--text-dark);
font: inherit;
}

input::placeholder,
textarea::placeholder {
color: rgba(16, 24, 40, 0.58);
}

textarea {
min-height: 132px;
resize: vertical;
}

.checks {
display: grid;
gap: 10px;
text-align: left;
border: 1px solid rgba(216, 162, 66, 0.55);
border-radius: var(--radius-md);
padding: 16px;
background: var(--white);
}

.checks label {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 1rem;
line-height: 1.4;
}

.checks input {
width: auto;
min-width: 18px;
margin-top: 3px;
accent-color: var(--gold);
}


/* =========================
TRUST HELPERS / FIELD INFO
========================= */

.form-trust-note {
max-width: 760px;
margin: 18px 0 0;
padding: 14px 16px;
border-left: 4px solid var(--gold);
border-radius: var(--radius-sm);
background: rgba(216, 162, 66, 0.10);
color: var(--navy);
font-size: 0.98rem;
line-height: 1.45;
}

.field-with-info {
position: relative;
display: grid;
}

.field-with-info input {
padding-right: 52px;
}

.field-info {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
z-index: 2;
}

.field-info summary {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid rgba(216, 162, 66, 0.70);
border-radius: 999px;
background: var(--white);
color: var(--gold-2);
font-size: 0.88rem;
font-weight: 850;
line-height: 1;
list-style: none;
cursor: pointer;
box-shadow: 0 6px 16px rgba(1, 18, 46, 0.10);
}

.field-info summary::-webkit-details-marker {
display: none;
}

.field-info summary:hover {
background: rgba(216, 162, 66, 0.12);
color: var(--navy);
}

.field-info[open] summary {
background: var(--gold);
color: var(--navy);
}

.field-info p {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: min(280px, calc(100vw - 56px));
margin: 0;
padding: 12px 14px;
border: 1px solid rgba(1, 18, 46, 0.12);
border-left: 4px solid var(--gold);
border-radius: var(--radius-sm);
background: var(--white);
color: var(--text-dark);
font-size: 0.92rem;
line-height: 1.4;
box-shadow: var(--shadow-soft);
}

.field-info p::before {
content: "";
position: absolute;
top: -7px;
right: 10px;
width: 12px;
height: 12px;
background: var(--white);
border-top: 1px solid rgba(1, 18, 46, 0.12);
border-left: 1px solid rgba(1, 18, 46, 0.12);
transform: rotate(45deg);
}

#campaign-finances {
background: var(--ivory);
color: var(--navy);
}

.footer-social {
margin-top: 10px;
}

.footer-social a {
font-weight: 750;
}

/* =========================
MAP / MEDIA
========================= */

.map-img {
width: 100%;
margin-top: 22px;
border: 2px solid var(--gold);
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
}

/* =========================
THANK YOU PAGE
========================= */

.thank-you-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 0;
background:
radial-gradient(circle at top center, rgba(216, 162, 66, 0.12), transparent 34%),
linear-gradient(180deg, var(--navy-2), var(--navy));
color: var(--ivory);
text-align: center;
}

.thank-you-card {
width: min(760px, calc(100% - 32px));
border: 2px solid var(--gold);
border-radius: var(--radius-md);
padding: 28px 18px;
background:
radial-gradient(circle at center, rgba(0, 20, 47, 0.96) 0%, rgba(1, 18, 46, 1) 74%);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.thank-you-card img {
width: 100%;
max-width: 420px;
margin: 0 auto 26px;
border-radius: var(--radius-md);
}

.thank-you-card h1 {
color: var(--ivory);
font-size: clamp(2.4rem, 12vw, 4.5rem);
}

.thank-you-card p {
color: var(--ivory);
max-width: 560px;
margin-left: auto;
margin-right: auto;
}

/* =========================
FOOTER
========================= */

footer {
background: var(--navy);
color: var(--ivory);
text-align: center;
padding: 28px 16px;
font-size: 0.95rem;
}

footer p {
margin: 0;
font-size: 0.95rem;
}

/* =========================
DESKTOP REFINEMENTS
========================= */

@media (min-width: 760px) {
section {
padding: 76px 0;
}

.hero {
padding: 32px 0 76px;
}

.hero-card {
padding: 36px;
}

.button-row {
flex-direction: row;
justify-content: center;
}

.btn,
button {
width: auto;
min-width: 180px;
}

form {
max-width: 760px;
}

.form-trust-note {
max-width: 760px;
}

.two-col {
grid-template-columns: 1fr 1fr;
align-items: start;
}

.panel {
padding: 30px;
}

.thank-you-card {
padding: 42px;
}
}

/* =========================
LARGER SCREENS
========================= */

@media (min-width: 1100px) {
.hero-card {
padding: 44px;
}
}