/*
Theme Name:   GCVDC — Hello Elementor Child
Theme URI:    https://goldcoastviadecristo.com
Description:  Gold Coast Via de Cristo child theme for Hello Elementor. Brand design system (navy/gold, Georgia, De Colores accents), Fluent Forms styling to match the approved 2026 prototype, and the Event Tickets cost.php template port.
Author:       Vero Web Consulting LLC
Author URI:   https://maryleeweir.com
Template:     hello-elementor
Version:      1.0.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  gcvdc-child
*/

/* =========================================================
   GCVDC Design System — tokens
   Mirror these in Elementor Site Settings > Global Colors/Fonts:
     Primary   #1a3a5c (navy)   Secondary #d4af6e (gold)
     Text      #2b3440 (ink)    Accent    #b8934f (gold-dark)
   ========================================================= */
:root {
  --gcvdc-navy: #1a3a5c;
  --gcvdc-navy-dark: #12293f;
  --gcvdc-gold: #d4af6e;
  --gcvdc-gold-dark: #b8934f;
  --gcvdc-ink: #2b3440;
  --gcvdc-muted: #5b6a7a;
  --gcvdc-paper: #ffffff;
  --gcvdc-mist: #f4f6f8;
  --gcvdc-line: #dfe5ea;
  --gcvdc-err: #b23c3c;
  --gcvdc-ok: #2e7d4f;
  /* De Colores accent palette */
  --dc-red: #c9534f;
  --dc-orange: #dd8a3d;
  --dc-yellow: #dfb84f;
  --dc-green: #579a5d;
  --dc-blue: #4a80b8;
  --dc-purple: #8767ad;
  --dc-ribbon: linear-gradient(90deg,
    var(--dc-red) 0 16.66%, var(--dc-orange) 16.66% 33.33%,
    var(--dc-yellow) 33.33% 50%, var(--dc-green) 50% 66.66%,
    var(--dc-blue) 66.66% 83.33%, var(--dc-purple) 83.33% 100%);
  --gcvdc-serif: Georgia, 'Times New Roman', serif;
  --gcvdc-sans: Verdana, Geneva, sans-serif;
}

/* =========================================================
   Base typography (Hello Elementor is intentionally bare)
   ========================================================= */
body {
  font-family: var(--gcvdc-serif);
  color: var(--gcvdc-ink);
  line-height: 1.65;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--gcvdc-serif);
  color: var(--gcvdc-navy);
  line-height: 1.25;
}
a { color: var(--gcvdc-navy); }
a:hover { color: var(--gcvdc-gold-dark); }

/* =========================================================
   Utility classes for Elementor sections
   (add via Advanced > CSS Classes)
   ========================================================= */
.gcvdc-kicker {
  color: var(--gcvdc-gold-dark);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12.5px;
  font-family: var(--gcvdc-sans);
}
.gcvdc-ribbon { /* thin De Colores stripe — use on a divider/spacer */
  background: var(--dc-ribbon);
  height: 6px;
}
.gcvdc-callout {
  background: #fdf8ef;
  border: 1.5px solid var(--gcvdc-gold);
  border-radius: 8px;
  padding: 18px 22px;
  font-size: 15.5px;
}
.gcvdc-notice {
  background: #f5f9ff;
  border-left: 4px solid var(--gcvdc-navy);
  padding: 14px 16px;
  border-radius: 0 6px 6px 0;
  font-size: 14px;
}
.gcvdc-verse {
  text-align: center;
  color: var(--gcvdc-muted);
  font-style: italic;
}
blockquote, .gcvdc-quote {
  border-left: 4px solid var(--gcvdc-gold);
  background: var(--gcvdc-mist);
  padding: 16px 22px;
  font-style: italic;
  border-radius: 0 6px 6px 0;
}

/* Card pattern — apply .gcvdc-card to an Elementor column/container */
.gcvdc-card {
  background: #fff;
  border: 1px solid var(--gcvdc-line);
  border-top: 4px solid var(--gcvdc-gold);
  border-radius: 6px;
  box-shadow: 0 3px 14px rgba(18, 41, 63, .06);
}
/* De Colores: sibling cards rotate through the palette (scrambled order) */
.gcvdc-cardgrid > .gcvdc-card:nth-child(6n+1),
.gcvdc-cardgrid > * > .gcvdc-card:nth-child(6n+1) { border-top-color: var(--dc-red); }
.gcvdc-cardgrid > .gcvdc-card:nth-child(6n+2),
.gcvdc-cardgrid > * > .gcvdc-card:nth-child(6n+2) { border-top-color: var(--dc-blue); }
.gcvdc-cardgrid > .gcvdc-card:nth-child(6n+3),
.gcvdc-cardgrid > * > .gcvdc-card:nth-child(6n+3) { border-top-color: var(--gcvdc-gold); }
.gcvdc-cardgrid > .gcvdc-card:nth-child(6n+4),
.gcvdc-cardgrid > * > .gcvdc-card:nth-child(6n+4) { border-top-color: var(--dc-green); }
.gcvdc-cardgrid > .gcvdc-card:nth-child(6n+5),
.gcvdc-cardgrid > * > .gcvdc-card:nth-child(6n+5) { border-top-color: var(--dc-purple); }
.gcvdc-cardgrid > .gcvdc-card:nth-child(6n+6),
.gcvdc-cardgrid > * > .gcvdc-card:nth-child(6n+6) { border-top-color: var(--dc-orange); }

/* Interior hero band — apply .gcvdc-pagehero to the hero section */
.gcvdc-pagehero {
  border-bottom: 4px solid var(--gcvdc-gold);
  color: #fff;
  text-align: center;
}
.gcvdc-pagehero h1 { color: #fff; }
.gcvdc-pagehero p { color: #dbe3ea; }
.gcvdc-pagehero .gcvdc-kicker { color: var(--gcvdc-gold); }

/* Buttons — Elementor buttons pick up globals; these cover raw links */
.gcvdc-btn-gold,
.gcvdc-btn-gold:visited {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 15px;
  font-family: var(--gcvdc-sans);
  background: var(--gcvdc-gold);
  color: var(--gcvdc-navy-dark);
  font-weight: 700;
  transition: .2s;
}
.gcvdc-btn-gold:hover { background: var(--gcvdc-gold-dark); color: var(--gcvdc-navy-dark); }
.gcvdc-btn-navy,
.gcvdc-btn-navy:visited {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 15px;
  font-family: var(--gcvdc-sans);
  background: var(--gcvdc-navy);
  color: #fff;
  transition: .2s;
}
.gcvdc-btn-navy:hover { background: var(--gcvdc-navy-dark); color: #fff; }

/* =========================================================
   Fluent Forms — match the approved prototype form look
   ========================================================= */
.fluentform label,
.fluentform .ff-el-input--label label {
  font-family: var(--gcvdc-sans);
  font-size: 12.5px;
  color: var(--gcvdc-navy);
  font-weight: bold;
  letter-spacing: .02em;
}
.fluentform .ff-el-form-control,
.fluentform input[type=text],
.fluentform input[type=email],
.fluentform input[type=tel],
.fluentform input[type=date],
.fluentform select,
.fluentform textarea {
  padding: 11px 12px;
  border: 1px solid var(--gcvdc-line);
  border-radius: 6px;
  font-size: 15px;
  font-family: var(--gcvdc-serif);
  background: #fff;
  color: var(--gcvdc-ink);
}
.fluentform .ff-el-form-control:focus,
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
  outline: none;
  border-color: var(--gcvdc-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 110, .25);
}
/* Radios & checkboxes must NOT inherit the text-input skin. */
.fluentform input[type=radio],
.fluentform input[type=checkbox] {
  width: auto;
  padding: 0;
  border-radius: 3px;
  box-shadow: none;
  accent-color: var(--gcvdc-navy);
}
/* Selected choices must be obvious — Deena, testing on a phone, could not tell
   which option she had picked. The whole row highlights, not just the dot. */
.fluentform .ff-el-form-check {
  border: 1px solid var(--gcvdc-line);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  transition: background .15s ease, border-color .15s ease;
  cursor: pointer;
}
.fluentform .ff-el-form-check:hover {
  border-color: var(--gcvdc-gold);
}
.fluentform .ff-el-form-check:has(input:checked) {
  border-color: var(--gcvdc-navy);
  background: rgba(212, 175, 110, .14);
  box-shadow: inset 0 0 0 1px var(--gcvdc-navy);
}
.fluentform .ff-el-form-check:has(input:checked) .ff-el-form-check-label {
  font-weight: bold;
  color: var(--gcvdc-navy);
}
/* Inline lists of Yes/No sit side by side rather than stacking. */
.fluentform .ff_list_inline .ff-el-form-check {
  display: inline-block;
  margin-right: 8px;
}

.fluentform .ff-el-form-check-label {
  font-family: var(--gcvdc-serif);
  font-weight: normal;
  font-size: 15px;
  color: var(--gcvdc-ink);
  letter-spacing: 0;
}
.fluentform .ff-btn-submit {
  background: var(--gcvdc-gold);
  color: var(--gcvdc-navy-dark);
  font-weight: bold;
  font-family: var(--gcvdc-sans);
  border: none;
  border-radius: 6px;
  padding: 13px 30px;
  font-size: 15px;
  letter-spacing: .03em;
}
.fluentform .ff-btn-submit:hover { background: var(--gcvdc-gold-dark); }
.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--gcvdc-err); }
.fluentform .error,
.fluentform .ff-el-is-error .error {
  color: var(--gcvdc-err);
  font-family: var(--gcvdc-sans);
  font-size: 13px;
}

/* Form card wrapper — apply .gcvdc-formcard to the section holding the form */
.gcvdc-formcard {
  background: #fff;
  border: 1px solid var(--gcvdc-line);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(18, 41, 63, .07);
}

/* =========================================================
   Footer helper (Theme Builder footer sections)
   ========================================================= */
.gcvdc-footer { background: var(--gcvdc-navy-dark); color: #aebbc7; }
.gcvdc-footer h4 {
  color: var(--gcvdc-gold);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.gcvdc-footer a { color: #cfd9e2; text-decoration: none; }
.gcvdc-footer a:hover { color: var(--gcvdc-gold); }