/* ============================================================
   HyaPak — wp-extras.css
   Plugin compatibility skin. Loaded only when CF7 or Elementor
   is active. Keeps default plugin markup blending in.
============================================================ */

/* ---------- Contact Form 7 ---------- */
.hyapak-cf7 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hyapak-cf7 p { margin: 0; }
.hyapak-cf7 label {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 6px;
}
.hyapak-cf7 input[type="text"],
.hyapak-cf7 input[type="email"],
.hyapak-cf7 input[type="tel"],
.hyapak-cf7 input[type="url"],
.hyapak-cf7 select,
.hyapak-cf7 textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line);
  background: var(--bg);
  color: var(--fg);
  transition: border-color .2s, background .2s;
}
.hyapak-cf7 textarea { min-height: 140px; resize: vertical; }
.hyapak-cf7 input:focus,
.hyapak-cf7 select:focus,
.hyapak-cf7 textarea:focus {
  outline: 0;
  border-color: var(--c-violet-deep);
  background: color-mix(in srgb, var(--bg) 90%, var(--c-violet) 10%);
}
.hyapak-cf7 input[type="submit"],
.hyapak-cf7 .wpcf7-submit {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--c-ink); color: var(--c-cream);
  border: 0; font-size: 15px; font-weight: 500;
  transition: background .25s, transform .25s;
  margin-top: 8px;
  cursor: pointer;
}
.hyapak-cf7 input[type="submit"]:hover,
.hyapak-cf7 .wpcf7-submit:hover { background: var(--c-violet-deep); transform: translateY(-1px); }
.hyapak-cf7 .wpcf7-response-output {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .03em;
  border-width: 1px !important;
}
.hyapak-cf7 .wpcf7-mail-sent-ok {
  border-color: var(--c-sage-deep) !important;
  background: color-mix(in srgb, var(--c-sage) 12%, var(--bg));
  color: var(--c-sage-deep);
}
.hyapak-cf7 .wpcf7-validation-errors,
.hyapak-cf7 .wpcf7-mail-sent-ng {
  border-color: var(--c-clay) !important;
  background: color-mix(in srgb, var(--c-clay) 10%, var(--bg));
  color: var(--c-clay);
}
.hyapak-cf7 .wpcf7-not-valid-tip {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--c-clay);
  margin-top: 4px;
}

/* ---------- Elementor compatibility ---------- */
/* Inherit theme fonts & colours inside Elementor sections */
.elementor *, .elementor-widget, .elementor-section {
  font-family: var(--f-body);
}
.elementor-heading-title {
  font-family: var(--f-display);
  letter-spacing: -.015em;
  font-weight: 400;
}
.elementor-button {
  font-family: var(--f-body) !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
}
.elementor-element-edit-mode .wp-block-html {
  outline: 1px dashed var(--c-line);
  padding: 8px;
}

/* WP block editor — keep editor visuals readable */
.wp-block-quote, blockquote.wp-block-quote {
  margin: 28px 0;
  padding: 22px 26px;
  border-left: 2px solid var(--c-clay);
  background: color-mix(in srgb, var(--c-clay) 6%, var(--bg));
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
}
.wp-block-cover, .wp-block-image img { border-radius: var(--radius-sm); }

/* Skip-link visibility */
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; z-index: 9999;
  width: auto; height: auto; clip: auto;
  padding: 10px 16px;
  background: var(--c-ink); color: var(--c-cream);
  border-radius: 999px;
  font-family: var(--f-mono); font-size: 12px;
}

/* Wider align support */
.alignwide { max-width: var(--maxw); margin-inline: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* ============================================================
   DEFENSIVE RESETS — stop WP core / plugins / page builders from
   restyling our custom buttons. WordPress' classic-theme-styles and
   some plugins set a global `button{}` background (often the theme
   accent), which turned the FAQ rows into green buttons. These rules
   re-assert the design's flat, transparent look with high specificity.
   ============================================================ */
.faq .faq-q,
.faq button.faq-q,
.faq-list .faq-q {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--fg) !important;
  width: 100% !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  cursor: pointer;
}
.faq .faq-q:hover { color: var(--c-violet-deep) !important; }
[data-theme="dark"] .faq .faq-q:hover { color: var(--c-clay) !important; }
.faq .faq-q .faq-text { background: transparent !important; color: inherit !important; }
/* The expand/collapse circle keeps its own styling from design.css */
.faq .faq-q .faq-icon { background: transparent; }
.faq .faq-q[aria-expanded="true"] .faq-icon { background: var(--c-ink) !important; }