/* ===========================================================================
   Contact Page — page-specific styles
   Depends on css/styles.css for tokens and shared components.
=========================================================================== */

/* ---------- Small button variant (this page only) ---------- */
.btn-sm{ padding:11px 20px; font-size:12px; }

/* ---------- Reusable inline link-with-arrow (this page only) ---------- */
.topic-link{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--teal-ring);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.topic-link svg{ width:14px; height:14px; stroke:currentColor; fill:none; transition:transform .15s ease; }
.topic-link:hover svg{ transform:translateX(3px); }
.on-ivory .topic-link,
.categories .topic-link{ color:var(--teal-deep); }

/* ---------- Hero ---------- */
.contact-hero{ padding:70px 0 76px; text-align:center; }
.contact-hero .container{ max-width:680px; }
.contact-hero-logo{
  width:110px;
  margin:0 auto 24px;
  filter:drop-shadow(0 0 30px rgba(31,154,148,0.22));
}
.contact-hero-title{
  font-size:clamp(32px,4.6vw,50px);
  text-transform:uppercase;
  line-height:1.15;
  margin-bottom:20px;
}
.contact-hero-copy{
  color:var(--text-muted);
  font-size:16.5px;
  max-width:560px;
  margin:0 auto;
}
.contact-hero-copy em{ font-style:italic; color:var(--gold-light); }

/* ---------- Contact Options ---------- */
.contact-options{ background:var(--ivory); color:var(--ink); }
.contact-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:34px;
}
.contact-card{
  background:var(--ivory-card);
  border:1px solid var(--border-ivory);
  border-radius:var(--radius-md);
  padding:30px 28px;
  display:flex;
  flex-direction:column;
}
.contact-card .topic-icon{ border-color:var(--teal-ring); color:var(--teal-ring); margin-bottom:16px; }
.contact-card h3{
  font-size:16px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  margin-bottom:10px;
}
.contact-card p{ font-size:14px; color:var(--ink-soft); margin-bottom:14px; }
.contact-card-note{
  font-size:13px;
  font-style:italic;
  color:var(--ink);
  background:rgba(217,164,65,0.14);
  border-left:2px solid var(--gold);
  padding:10px 14px;
  margin-bottom:18px;
}
.contact-card > *:last-child{ margin-top:auto; margin-bottom:0; }
.contact-card .btn{ align-self:flex-start; }

@media (max-width:900px){ .contact-cards{ grid-template-columns:1fr; } }

/* ---------- Contact Form ---------- */
.contact-form-section{ background:var(--bg-dark); }
.contact-form-section .container{ max-width:760px; }

.contact-form{ margin-top:28px; }

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 24px;
  margin-bottom:28px;
}
.form-field-full{ grid-column:1 / -1; }

.form-field{ display:flex; flex-direction:column; }
.form-field label{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.5px;
  color:var(--text-muted);
  margin-bottom:8px;
}
.form-field .req{ color:var(--gold); }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field select,
.form-field textarea{
  width:100%;
  font-family:inherit;
  font-size:14.5px;
  color:#08262a;
  background:#e9f3f3;
  border:2px solid transparent;
  border-radius:6px;
  padding:13px 14px;
}
.form-field textarea{ resize:vertical; min-height:140px; }
.form-field input::placeholder,
.form-field textarea::placeholder{ color:#4f6f70; }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible{
  outline:3px solid var(--gold-light);
  outline-offset:1px;
}
.form-field select{ cursor:pointer; }

/* .field-invalid / .field-error / .hp-field moved to css/styles.css —
   shared with the newsletter signup component (js/newsletter.js) on
   every page. */

/* Checkbox row */
.form-field-checkbox{
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:10px 10px;
}
.form-field-checkbox input[type="checkbox"]{
  width:20px;
  height:20px;
  margin-top:2px;
  accent-color:var(--gold);
  flex-shrink:0;
}
.form-field-checkbox label{
  margin-bottom:0;
  font-size:14px;
  color:var(--text-muted);
  flex:1;
  min-width:0;
}
.form-field-checkbox label a{ color:var(--gold-light); text-decoration:underline; }
.form-field-checkbox .field-error{ flex-basis:100%; margin-top:0; }

/* Notices (validation summary / setup-required / send error) */
.form-notice{
  margin-bottom:24px;
  padding:16px 20px;
  border-radius:8px;
  font-size:14.5px;
  line-height:1.55;
}
.form-notice--setup{
  background:rgba(217,164,65,0.14);
  border:1px solid var(--gold);
  color:var(--gold-light);
}
.form-notice--error{
  background:rgba(224,133,122,0.14);
  border:1px solid #e0857a;
  color:#f0a99c;
}

/* Success confirmation */
.form-success{
  margin-bottom:24px;
  padding:30px 28px;
  border-radius:var(--radius-md);
  background:var(--bg-dark-2);
  border:1px solid var(--border-dark);
  text-align:center;
}
.form-success h3{
  font-size:22px;
  text-transform:uppercase;
  color:var(--turquoise);
  margin-bottom:10px;
}
.form-success p{ color:var(--text-muted); font-size:15px; max-width:52ch; margin:0 auto; }

.form-caution{
  font-size:12.5px;
  color:var(--text-soft);
  text-align:center;
  margin-top:14px;
}

@media (max-width:640px){
  .form-grid{ grid-template-columns:1fr; }
}

/* ---------- Media Kit ---------- */
.media-kit{ background:var(--ivory); color:var(--ink); text-align:center; }
.media-kit .container{ max-width:640px; }
.media-kit p{ color:var(--ink-soft); font-size:15.5px; margin-bottom:26px; }
.media-kit-status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

/* ---------- Privacy Note (quiet panel) ---------- */
.privacy-note{
  background:var(--bg-dark-2);
  border-top:1px solid var(--border-dark);
  border-bottom:1px solid var(--border-dark);
  padding:44px 0;
  text-align:center;
}
.privacy-note .container{ max-width:600px; display:flex; flex-direction:column; align-items:center; }
.privacy-note h2{
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--white);
  margin-bottom:12px;
}
.privacy-note p{
  font-size:14px;
  color:var(--text-muted);
  margin-bottom:16px;
}