/* =========================================================
   GHS v3.0 — Elementor Forms: Custom WYSIWYG field CSS
   File: /wp-content/plugins/ghs-wysiwyg-elementor-forms/assets/ghs-wysiwyg.css

   Scope:
   - ONLY affects Elementor Form widgets using the custom field type:
       .elementor-field-type-ghs_wysiwyg

   Purpose:
   - Force full-width layout (label above)
   - Make Visual vs Code modes behave consistently
   - Style tabs + toolbar buttons to match GHS palette

   Tokens (optional):
   - Uses CSS variables if present (recommended in theme ghs-core.css):
       --ghs-wys-tab-bg
       --ghs-wys-tab-text
       --ghs-wys-tab-hover-bg
       --ghs-wys-tab-active-bg
       --ghs-wys-icon-text
       --ghs-wys-icon-hover-bg
       --ghs-wys-icon-active-bg
========================================================= */


/* =========================================================
   A) Layout: field 100% width, label above
========================================================= */

.elementor-widget-form .elementor-field-type-ghs_wysiwyg{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
  clear:both !important;
}

.elementor-widget-form .elementor-field-type-ghs_wysiwyg > .elementor-field-label{
  display:block !important;
  width:100% !important;
  margin:0 0 6px 0 !important;
  float:none !important;
}

/* Keep internal wrappers full width */
.elementor-widget-form .elementor-field-type-ghs_wysiwyg .elementor-field,
.elementor-widget-form .elementor-field-type-ghs_wysiwyg .ghs-wysiwyg-wrap,
.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-editor-wrap,
.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-editor-tools,
.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-editor-container{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}


/* =========================================================
   B) Mode control: Visual vs Code
========================================================= */

/* VISUAL MODE: show TinyMCE, hide textarea + quicktags */
.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-editor-wrap.tmce-active .mce-tinymce{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  border:1px solid #818a91 !important;
  border-radius:4px !important;
  overflow:hidden !important;
}

.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-editor-wrap.tmce-active .mce-edit-area iframe{
  width:100% !important;
  min-height:200px !important;
  box-sizing:border-box !important;
}

.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-editor-wrap.tmce-active .quicktags-toolbar,
.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-editor-wrap.tmce-active textarea.ghs-wysiwyg-textarea{
  display:none !important;
}

/* CODE MODE: show textarea + quicktags, hide TinyMCE */
.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-editor-wrap.html-active .mce-tinymce,
.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-editor-wrap.html-active .mce-container,
.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-editor-wrap.html-active .mce-toolbar-grp,
.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-editor-wrap.html-active .mce-edit-area,
.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-editor-wrap.html-active iframe{
  display:none !important;
}

.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-editor-wrap.html-active .quicktags-toolbar{
  display:block !important;
}

.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-editor-wrap.html-active textarea.ghs-wysiwyg-textarea{
  display:block !important;
  width:100% !important;
  min-height:200px !important;
  height:auto !important;
  margin:0 !important;
  box-sizing:border-box !important;
}


/* =========================================================
   C) Tabs styling (Visual / Code)
========================================================= */

.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-editor-tabs{
  display:flex !important;
  justify-content:flex-end !important;
  gap:6px !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-switch-editor{
  background:var(--ghs-wys-tab-bg, #F0F4F8) !important;
  color:var(--ghs-wys-tab-text, #102A43) !important;
  border:1px solid #cbd2d9 !important;
  border-bottom:1px solid #cbd2d9 !important;
  padding:6px 12px !important;
  border-radius:6px 6px 0 0 !important;
  font-weight:600 !important;
  line-height:1 !important;
  box-shadow:none !important;
  outline:none !important;
  text-decoration:none !important;
  background-image:none !important;
}

.elementor-widget-form .elementor-field-type-ghs_wysiwyg .wp-switch-editor:hover{
  background:var(--ghs-wys-tab-hover-bg, #39ACE7) !important;
  color:#ffffff !important;
  box-shadow:none !important;
}

/* Active tab */
.elementor-widget-form .elementor-field-type-ghs_wysiwyg
.wp-editor-wrap.tmce-active .wp-editor-tabs .wp-switch-editor.switch-tmce,
.elementor-widget-form .elementor-field-type-ghs_wysiwyg
.wp-editor-wrap.html-active .wp-editor-tabs .wp-switch-editor.switch-html,
.elementor-widget-form .elementor-field-type-ghs_wysiwyg
.wp-editor-tabs .wp-switch-editor[aria-pressed="true"]{
  background:var(--ghs-wys-tab-active-bg, #39ACE7) !important;
  color:#ffffff !important;
  border-bottom:0 !important;
  margin-bottom:-1px !important;
  box-shadow:none !important;
}


/* =========================================================
   D) TinyMCE toolbar buttons
========================================================= */

.elementor-widget-form .elementor-field-type-ghs_wysiwyg .mce-toolbar .mce-btn button{
  color:var(--ghs-wys-icon-text, #102A43) !important;
}

.elementor-widget-form .elementor-field-type-ghs_wysiwyg .mce-toolbar .mce-btn button:hover{
  background:var(--ghs-wys-icon-hover-bg, #F0F4F8) !important;
  color:var(--ghs-wys-icon-text, #102A43) !important;
}

.elementor-widget-form .elementor-field-type-ghs_wysiwyg .mce-btn.mce-active button{
  background:var(--ghs-wys-icon-active-bg, #39ACE7) !important;
  color:var(--ghs-wys-icon-text, #102A43) !important;
}


/* =========================================================
   E) Quicktags buttons (Code mode)
========================================================= */

.elementor-widget-form .elementor-field-type-ghs_wysiwyg .quicktags-toolbar input.ed_button{
  background:transparent !important;
  color:var(--ghs-wys-icon-text, #102A43) !important;
  border:1px solid #cbd2d9 !important;
  border-radius:4px !important;
  padding:4px 8px !important;
  margin:0 4px 4px 0 !important;
  box-shadow:none !important;
  outline:none !important;
}

.elementor-widget-form .elementor-field-type-ghs_wysiwyg .quicktags-toolbar input.ed_button:hover,
.elementor-widget-form .elementor-field-type-ghs_wysiwyg .quicktags-toolbar input.ed_button:active{
  background:var(--ghs-wys-icon-active-bg, #39ACE7) !important;
  color:#ffffff !important;
}