/* ============================================================================
   DIGITAL CHURCH CONTACT CARD  —  STYLESHEET

   Colors are NOT hard-coded here. form.php injects your five config.php
   colors as CSS variables (--color1 ... --color5) before this file loads:

     --color1  primary brand      (header band, buttons, focus rings)
     --color2  secondary / dark   (footer, headings, legends)
     --color3  accent             (top rule, required marks, badges)
     --color4  soft background    (page background, input fills)
     --color5  ink                (body text)

   Change colors in config.php. Change layout and spacing here.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   FALLBACK COLORS — DO NOT EDIT THESE TO RECOLOR THE FORM.

   Set your colors in config.php instead. form.php links this file first and
   then injects the config colors after it, so config always wins. These values
   only apply if the injected block is missing (e.g. you open style.css on its
   own, or strip the inline <style> out of form.php).

   Editing them here works only until config.php is read again — you'd be
   fighting the config file rather than using it.
   --------------------------------------------------------------------------- */
:root {
  --color1: #1f4e79;
  --color2: #0e2f4b;
  --color3: #c9a227;
  --color4: #f4f7fa;
  --color5: #22262b;

  /* Derived tokens */
  --radius:       12px;
  --radius-sm:    8px;
  --border:       #dfe5ec;
  --border-focus: var(--color1);
  --error:        #b42318;
  --error-bg:     #fef3f2;
  --success:      #067647;
  --success-bg:   #ecfdf3;
  --muted:        #6b7480;
  --shadow:       0 1px 2px rgba(16, 24, 40, .05);
  --shadow-lg:    0 12px 32px rgba(16, 24, 40, .10);
  --maxw:         800px;
  --font:         system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 24px 16px 48px;
  background: var(--color4);
  color: var(--color5);
  font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--color1); }
a:hover { color: var(--color2); }

/* ============================================================================
   CARD SHELL
   ========================================================================= */
.cc-card {
  max-width: var(--maxw);
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border-top: 5px solid var(--color3);
}

/* ---------- Header ---------- */
.cc-header {
  background: var(--color1);
  background-image: linear-gradient(135deg, var(--color1) 0%, var(--color2) 100%);
  color: #fff;
  padding: 34px 28px 30px;
  text-align: center;
}

.cc-logo {
  max-height: 300px;
  width: auto;
  margin: 0 auto 16px;
  display: block;
}

.cc-header h1 {
  margin: 0;
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.01em;
}

.cc-tagline {
  margin: 8px 0 0;
  font-size: .975rem;
  color: rgba(255, 255, 255, .85);
}

/* ---------- Body ---------- */
.cc-body { padding: 28px; }

.cc-note {
  margin: 0 0 20px;
  font-size: .85rem;
  color: var(--muted);
}

/* ============================================================================
   SECTIONS
   ========================================================================= */
.cc-section {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0 0 4px;
  padding: 22px 0 8px;
}

.cc-section:first-of-type { border-top: 0; padding-top: 0; }

.cc-section legend {
  padding: 0 10px 0 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color2);
}

.cc-section legend::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 7px;
  border-radius: 2px;
  background: var(--color3);
}

.cc-section--consent { border-top: 1px solid var(--border); padding-top: 20px; }

/* ============================================================================
   GRID  —  responsive field widths
   ========================================================================= */
.cc-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.cc-full    { grid-column: span 12; }
.cc-half    { grid-column: span 6;  }
.cc-third   { grid-column: span 4;  }
.cc-quarter { grid-column: span 3;  }

@media (max-width: 640px) {
  .cc-half, .cc-third, .cc-quarter { grid-column: span 12; }
  .cc-body   { padding: 20px 16px; }
  .cc-header { padding: 26px 18px 24px; }
  body       { padding: 0 0 32px; }
  .cc-card   { border-radius: 0; }
}

/* ============================================================================
   FIELDS
   ========================================================================= */
.cc-field { display: flex; flex-direction: column; min-width: 0; }

.cc-field > label,
.cc-group-label {
  margin-bottom: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--color2);
}

.cc-req { color: var(--color3); font-weight: 700; }

.cc-field input[type="text"],
.cc-field input[type="email"],
.cc-field input[type="tel"],
.cc-field input[type="date"],
.cc-field select,
.cc-field textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: .95rem;
  color: var(--color5);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none;
  appearance: none;
}

.cc-field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

.cc-field input:hover,
.cc-field select:hover,
.cc-field textarea:hover { border-color: #c3ccd8; }

.cc-field input:focus,
.cc-field select:focus,
.cc-field textarea:focus {
  outline: 0;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--color1) 18%, transparent);
}

.cc-field input::placeholder,
.cc-field textarea::placeholder { color: #a4adba; }

/* Custom select arrow, tinted with the primary color */
.cc-field select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}

/* Error state */
.cc-field--error input,
.cc-field--error select,
.cc-field--error textarea {
  border-color: var(--error);
  background: var(--error-bg);
}

.cc-error-text {
  margin-top: 5px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--error);
}

/* ============================================================================
   CHECKBOXES
   ========================================================================= */
.cc-checkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.cc-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  font-size: .9rem;
  font-weight: 400;
  color: var(--color5);
  background: var(--color4);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.cc-check:hover { border-color: color-mix(in srgb, var(--color1) 35%, transparent); }

.cc-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--color1);
  cursor: pointer;
}

.cc-check:has(input:checked) {
  border-color: var(--color1);
  background: color-mix(in srgb, var(--color1) 8%, #fff);
}

.cc-check--consent {
  background: color-mix(in srgb, var(--color3) 9%, #fff);
  border-color: color-mix(in srgb, var(--color3) 40%, transparent);
  font-size: .87rem;
  line-height: 1.5;
}

/* ============================================================================
   CHILDREN ROWS
   ========================================================================= */
.cc-child-row {
  position: relative;
  margin-top: 14px;
  padding: 16px;
  background: var(--color4);
  border: 1px solid var(--border);
  border-left: 4px solid var(--color3);
  border-radius: var(--radius-sm);
}

.cc-child-row .cc-grid { margin-top: 10px; }

.cc-child-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cc-child-num {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color2);
}

.cc-child-remove {
  padding: 4px 10px;
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  color: var(--error);
  background: #fff;
  border: 1px solid #f0c4c0;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.cc-child-remove:hover:not(:disabled) { background: var(--error-bg); }
.cc-child-remove:disabled { opacity: .35; cursor: not-allowed; }

/* ============================================================================
   BUTTONS
   ========================================================================= */
.cc-actions { margin-top: 26px; text-align: center; }

.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 220px;
  padding: 14px 30px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: var(--color1);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--color1) 30%, transparent);
  transition: transform .12s, background .15s, box-shadow .15s;
}

.cc-btn:hover:not(:disabled) {
  background: var(--color2);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color1) 34%, transparent);
}

.cc-btn:active:not(:disabled) { transform: translateY(0); }

.cc-btn:focus-visible {
  outline: 3px solid var(--color3);
  outline-offset: 2px;
}

.cc-btn:disabled { opacity: .7; cursor: progress; }

.cc-btn--ghost {
  min-width: 0;
  color: var(--color1);
  background: transparent;
  border: 1.5px solid var(--color1);
  box-shadow: none;
}

.cc-btn--ghost:hover:not(:disabled) {
  color: #fff;
  background: var(--color1);
  box-shadow: none;
}

.cc-btn--ghost:disabled { opacity: .4; cursor: not-allowed; }

.cc-btn--sm {
  margin-top: 14px;
  padding: 8px 18px;
  font-size: .85rem;
  border-radius: var(--radius-sm);
}

/* Spinner shown while submitting */
.cc-spinner {
  width: 15px;
  height: 15px;
  border: 2.5px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cc-spin .7s linear infinite;
}

@keyframes cc-spin { to { transform: rotate(360deg); } }

.cc-recaptcha-note {
  margin: 14px 0 0;
  font-size: .72rem;
  color: var(--muted);
}

.cc-recaptcha-note a { color: var(--muted); text-decoration: underline; }

/* ============================================================================
   ALERTS
   ========================================================================= */
.cc-alert {
  margin: 0 0 22px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  border-left: 4px solid;
}

.cc-alert h2 { margin: 0 0 6px; font-size: 1.05rem; }
.cc-alert p  { margin: 0 0 8px; font-size: .93rem; }
.cc-alert p:last-child { margin-bottom: 0; }
.cc-alert ul { margin: 10px 0 0; padding-left: 20px; font-size: .88rem; }
.cc-alert li { margin-bottom: 4px; }

.cc-alert--error {
  background: var(--error-bg);
  border-left-color: var(--error);
  color: #7a2118;
}

.cc-alert--error h2 { color: var(--error); }
.cc-alert--error a  { color: var(--error); }

.cc-alert--success {
  background: var(--success-bg);
  border-left-color: var(--success);
  color: #1b4d35;
  text-align: center;
  border-left: 0;
  border-top: 4px solid var(--success);
  padding: 34px 24px;
}

.cc-alert--success h2 { color: var(--success); font-size: 1.5rem; }

/* ============================================================================
   DEMO MODE  —  only appears when demo_mode is true in config.php
   ========================================================================= */
.cc-demo-banner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 22px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color3) 12%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--color3) 45%, transparent);
  font-size: .88rem;
  line-height: 1.5;
}

.cc-demo-banner strong {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 5px;
  background: var(--color3);
  color: #1a1a1a;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.cc-demo-banner span { color: var(--color5); }

.cc-demo-note {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
  font-size: .87rem;
  color: #1b4d35;
}

/* ============================================================================
   HONEYPOT  —  visually gone, still submitted by bots
   ========================================================================= */
.cc-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================================
   FOOTER
   ========================================================================= */
.cc-footer {
  background: var(--color2);
  color: rgba(255, 255, 255, .82);
  padding: 30px 28px;
  text-align: center;
  font-size: .87rem;
  line-height: 1.65;
}

.cc-footer-logo {
  max-height: 100px;
  width: auto;
  margin: 0 auto 14px;
  display: block;
  opacity: .9;
}

.cc-footer-name {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.cc-footer address { font-style: normal; margin: 0 0 10px; }

.cc-footer a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.cc-footer a:hover { border-bottom-color: var(--color3); color: var(--color3); }

.cc-services {
  margin: 12px auto 0;
  padding-top: 12px;
  max-width: 420px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .82rem;
  color: var(--color3);
}

.cc-footer-link { font-size: .85rem; }

.cc-copy {
  margin: 14px 0 0;
  font-size: .72rem;
  color: rgba(255, 255, 255, .5);
}

/* ============================================================================
   PRINT  —  so staff can print a submitted card cleanly
   ========================================================================= */
@media print {
  body { background: #fff; padding: 0; }
  .cc-card { box-shadow: none; max-width: 100%; }
  .cc-actions, .cc-child-remove, #cc-add-child, .cc-recaptcha-note { display: none !important; }
  .cc-header, .cc-footer { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================================
   ACCESSIBILITY
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .cc-btn { border: 2px solid currentColor; }
}