/* ==================================================
   COMPAT.CSS — Golden Coins design inside WordPress + Hello Elementor + Elementor
   Only fixes what WordPress / the theme / Elementor change. The design itself stays in
   variables / global / components / pages/*.css (ported from the demo by a script).
   ================================================== */

/* ---------- Layer order (Hello's reset.css is loaded into tfi-theme-reset by the plugin) ----------
   Same layer names as the Thai Flour plugin. Layered CSS always loses to normal CSS. */
@layer tfi-theme-reset, tfi-button-reset;

/* Hello's reset paints every <button> pink (#c36) on hover / focus, adds a border, 16px font,
   padding and "white-space: nowrap". Our buttons go back to the browser default — exactly what the
   demo starts from; the design CSS (and every Style-tab value) then styles them. */
@layer tfi-button-reset {
  :where([class*="elementor-widget-gc-"], .cookie-consent, .gc-modal) :is(button, [type="button"], [type="submit"], [type="reset"]) {
    all: revert;
  }

  /* Form fields too (Hello sets width / border / padding / margin on them): back to the browser
     default the demo form is designed on, e.g. the consent checkbox keeps its small side margins. */
  :where([class*="elementor-widget-gc-"]) :is(input, select, textarea) {
    all: revert;
  }
}

/* ---------- Hello Elementor uses the same class names (.site-header / .site-footer) ----------
   and squeezes them to 500–1140px with its own padding / flex. #id wins over the theme. */
#site-header.site-header {
  display: block;
  position: fixed;
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  padding-block: 20px 0;
}

#site-footer.site-footer {
  display: block;
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* ---------- Elementor containers holding our widgets: no extra gap / padding / boxed width ----------
   All spacing of the design is inside each section already. */
.elementor .e-con.e-con:has(> [class*="elementor-widget-gc-"]),
.elementor .e-con.e-con:has(> .e-con-inner > [class*="elementor-widget-gc-"]) {
  --gap: 0px 0px !important;
  --row-gap: 0px !important;
  --column-gap: 0px !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  --content-width: 100% !important;
  --container-max-width: 100% !important;
  --flex-wrap: nowrap !important;
  --flex-wrap-mobile: nowrap !important;
  flex-wrap: nowrap !important;
}

/* The pinned hero needs normal overflow on its parents (position: sticky). */
.elementor .e-con:has(> .elementor-widget-gc-hero),
.elementor-widget-gc-hero {
  overflow: visible;
}

/* ---------- **two stars** in a text = red words ---------- */
.gc-hl {
  color: var(--color-deep-red);
}

.gc-hero .gc-hl,
.gc-oem .gc-hl,
.gc-contact__intro .gc-hl {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

/* ---------- Contact Form 7 inside GC Contact & Form ----------
   The CF7 form (Tools → Golden Coins Setup → "Create the contact form") uses the demo's own blocks
   (.form-field, .contact-form__row, .form-check); these rules only tidy what CF7 adds around them. */
.gc-cf7 .wpcf7-form-control-wrap {
  display: block;
}

.gc-cf7 .form-field textarea {
  display: block;
}

.gc-cf7 .form-field .wpcf7-form-control-wrap {
  padding-bottom: var(--space-4);
}

.gc-cf7 .form-check .wpcf7-form-control-wrap,
.gc-cf7 .form-check .wpcf7-list-item {
  display: block;
  margin: 0;
}

.gc-cf7 .form-check .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.gc-cf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-deep-red);
}

.gc-cf7 .form-field .wpcf7-not-valid {
  border-color: var(--color-deep-red);
}

.gc-cf7 .wpcf7-spinner {
  display: none;
}

.gc-cf7 .wpcf7-form.submitting .wpcf7-submit {
  opacity: 0.6;
  pointer-events: none;
}

.gc-cf7 .wpcf7-submit {
  width: 100%;
  cursor: pointer;
}

.gc-cf7 .wpcf7-form .wpcf7-response-output {
  margin: var(--space-12) 0 0;
  padding: var(--space-12) var(--space-16);
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  background-color: rgba(228, 0, 50, 0.08);
  color: var(--color-deep-red);
}

.gc-cf7 .wpcf7-form.init .wpcf7-response-output,
.gc-cf7 .wpcf7-form.resetting .wpcf7-response-output,
.gc-cf7 .wpcf7-form.submitting .wpcf7-response-output {
  display: none;
}

.gc-cf7 .wpcf7-form.sent .wpcf7-response-output {
  background-color: var(--color-surface-green, #EEF4E0);
  color: var(--color-mahogany);
}

/* CF7 screen-reader summary must stay invisible */
.gc-cf7 .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Large screens: the message box stretches so the Send button lines up with the bottom of the red panel
   (demo: .form-field:has(textarea) textarea { flex: 1 }). CF7 puts the textarea inside a <span>. */
@media (min-width: 1024px) {
  .gc-cf7,
  .gc-cf7 .wpcf7 {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .gc-contact .contact-card .gc-cf7 .form-field:has(textarea) {
    display: flex;
    flex-direction: column;
  }

  .gc-cf7 .form-field .wpcf7-form-control-wrap:has(textarea) {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
}