/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

/* 
 * NOTE: As of 2026-01-23, component styles have been split into separate files:
 * - base.css       → Design tokens (CSS variables)
 * - sidebar.css    → Sidebar navigation styles
 * - training-card.css → Lesson hero card & dashboard training card
 * - dashboard-widgets.css → Events & news widgets
 * - header.css     → Page header redesign
 *
 * These files are enqueued in functions.php with proper dependencies.
 * This file (custom.css) loads last and can be used for:
 * - Quick overrides during development
 * - Page-specific tweaks that don't fit elsewhere
 * - Temporary fixes before proper categorization
 */

/* Remove sticky hover on touch devices */
@media (hover: none) and (pointer: coarse) {
    .frm_display_format_buttons input[type=radio]:not([disabled]) + .frm_label_button_container:hover,
    .frm_display_format_buttons .frm_image_option_container:hover,
    .frm_nps__button:hover {
        border-color: initial !important;
        box-shadow: none !important;
    }


      /* Remove iOS tap highlight + native outlines on the actual focus targets */
  .frm_display_format_buttons input,
  .frm_display_format_buttons label,
  .frm_display_format_buttons .frm_label_button_container,
  .frm_display_format_buttons .frm_image_option_container,
  .frm_nps__button,
  .frm_nps__button * {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Remove any hover/focus-driven rings on the visible containers */
  .frm_display_format_buttons input[type="radio"]:not([disabled]) + .frm_label_button_container,
  .frm_display_format_buttons input[type="radio"]:not([disabled]) + .frm_label_button_container:hover,
  .frm_display_format_buttons .frm_radio input[type="radio"]:focus + .frm_label_button_container,
  .frm_display_format_buttons .frm_radio input[type="radio"]:focus-visible + .frm_label_button_container,

  .frm_display_format_buttons .frm_image_option_container,
  .frm_display_format_buttons .frm_image_option_container:hover,
  .frm_display_format_buttons .frm_radio input[type="radio"]:focus + .frm_image_option_container,
  .frm_display_format_buttons .frm_radio input[type="radio"]:focus-visible + .frm_image_option_container,

  .frm_display_format_buttons .frm_checkbox input[type="checkbox"]:focus + .frm_label_button_container,
  .frm_display_format_buttons .frm_checkbox input[type="checkbox"]:focus-visible + .frm_label_button_container,
  .frm_display_format_buttons .frm_checkbox input[type="checkbox"]:focus + .frm_image_option_container,
  .frm_display_format_buttons .frm_checkbox input[type="checkbox"]:focus-visible + .frm_image_option_container,

  .frm_display_format_buttons .frm_scale input[type="radio"]:focus + .frm_label_button_container,
  .frm_display_format_buttons .frm_scale input[type="radio"]:focus-visible + .frm_label_button_container,
  .frm_display_format_buttons .frm_scale input[type="radio"]:focus + .frm_image_option_container,
  .frm_display_format_buttons .frm_scale input[type="radio"]:focus-visible + .frm_image_option_container,

  .frm_nps__button:hover,
  .frm_nps__button:focus,
  .frm_nps__button:focus-visible {
    outline: none !important;
    border-color: inherit !important;
    box-shadow: none !important;
  }

  /* Optional: if Safari is still drawing something via filter/highlight, this can help */
  .frm_display_format_buttons *:focus,
  .frm_display_format_buttons *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
}


/* =============================================================================
   Counseling Network - Feedback Popup (#5325)
   Applies amfm card styling to the Elementor popup dialog.
   @since 2026-02-12
   ============================================================================= */

/* Outer card: rounded corners + shadow */
#elementor-popup-modal-5325 .dialog-widget-content {
  border-radius: var(--amfm-radius-xl, 16px);
  box-shadow: var(--amfm-shadow-card,
    0px 12px 16px -4px rgba(10, 13, 18, 0.08),
    0px 4px 6px -2px rgba(10, 13, 18, 0.03),
    0px 2px 2px -1px rgba(10, 13, 18, 0.04));
  overflow: hidden;
  padding: var(--amfm-spacing-md, 8px);
  background: var(--amfm-bg-primary, #ffffff);
}

/* Inner content: inset gray border */
#elementor-popup-modal-5325 .dialog-message {
  border: 1px solid var(--amfm-border-primary, rgba(0, 0, 0, 0.08));
  border-radius: var(--amfm-radius-md, 8px);
  padding: var(--amfm-spacing-3xl, 24px);
  box-sizing: border-box;
  overflow: hidden;
  max-width: 100%;
}

/* Close button: match our modal close style */
#elementor-popup-modal-5325 .dialog-close-button {
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--amfm-radius-md, 8px);
  transition: background-color 0.15s ease;
  z-index: 2;
}

#elementor-popup-modal-5325 .dialog-close-button:hover {
  background: var(--amfm-neutral-50, #f5f5f5);
}


/* =============================================================================
   Hidden Popup Opener
   
   Utility class for Elementor sections that contain a popup-triggering button
   but shouldn't be visible. Add "amfm-popup-hidden-opener" to the section's
   CSS Classes field in Elementor > Advanced > Layout.
   
   The Elementor button widget tells Elementor to load the popup template,
   so it must exist on the page — we just hide the container.
   
   @since 2026-02-13
   ============================================================================= */
.amfm-popup-hidden-opener {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}


/* =============================================================================
   Hidden Entry Title

   Prevents the page title from being displayed twice.
   It is already displayed in the top navigation bar.
   @since 2026-02-19
   ============================================================================= */

h1.entry-title {
  display: none !important;
}


/* =============================================================================
   Field 95 (Gender) – Image-only radio buttons
   Renders Stick/Twig character images as large horizontal tap targets,
   hiding the native radio circles and text labels.
   @since 2026-02-24
   ============================================================================= */

/* Row layout – stays horizontal even on mobile */
#frm_field_95_container .frm_opt_container {
  display: flex !important;
  flex-direction: row !important;
  gap: 24px !important;
  justify-content: center;
  align-items: flex-end;
}

/* Each radio option: equal sizing */
#frm_field_95_container .frm_radio {
  flex: 0 1 auto;
  width: auto !important;
  margin: 0 !important;
}

/* Hide the native radio circle */
#frm_field_95_container input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none;
}

/* Card-style tappable containers (matches WeDo app style) */
#frm_field_95_container .frm_image_option_container {
  border: 2px solid transparent !important;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.05) !important;
  box-shadow: none !important;
  padding: 20px 16px !important;
  overflow: hidden !important;
  transition: background 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  width: 180px;
  height: 280px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Prevent ancestors from clipping */
#frm_field_95_container .frm_opt_container,
#frm_field_95_container .frm_radio,
#frm_field_95_container .frm_radio label {
  overflow: visible !important;
}

/* Images scale to match container height, variable width, centered */
#frm_field_95_container .frm_image_option_container img {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: contain;
}

/* Visually hide text labels (sr-only pattern for accessibility) */
#frm_field_95_container .frm_text_label_for_image {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Hover state */
#frm_field_95_container .frm_image_option_container:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Selected state */
#frm_field_95_container input[type="radio"]:checked + .frm_image_option_container {
  border-color: var(--amfm-primary, #8B4513) !important;
  background: rgba(0, 0, 0, 0.08) !important;
}

/* =============================================================================
   "Other" text input for checkbox/radio fields
   Tames Formidable's oversized defaults (pill shape, huge font).
   @since 2026-02-24
   ============================================================================= */
#frm_field_157_container .frm_other_input {
  border-radius: 8px !important;
  font-size: 16px !important;
  padding: 8px 12px !important;
  width: calc(100% - 8px) !important;
  margin-top: 10px;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  background: #fff !important;
  box-sizing: border-box;
}

#frm_field_157_container .frm_other_input:focus {
  border-color: var(--amfm-primary, #8B4513) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.15) !important;
}

/* Mobile: smaller containers but still side-by-side */
@media (max-width: 920px) {
  #frm_field_95_container .frm_image_option_container {
    width: 120px;
    height: 180px;
  }

  #frm_field_95_container .frm_opt_container {
    gap: 12px;
  }
}


/* =============================================================================
   Formidable Chat Nav – Back / Next buttons
   Back button: compact square, muted. Next button: dominant, fills remaining width.
   Overrides the GUI-CSS `display:none` on `.frm_chat_prev_arrow`.
   @since 2026-02-24
   ============================================================================= */

/* Prevent flash on page load: arrows start invisible, fade in after
   Formidable's JS has had time to add .frm_hidden on the start page. */
@keyframes revealChatArrows {
  to { opacity: 1; }
}

/* Container: flex row (respect Formidable's .frm_hidden on start page) */
.frm_chat_arrows:not(.frm_hidden) {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 8px;
  text-align: center;
  opacity: 0;
  animation: revealChatArrows 0s ease 1s forwards;
}

/* Shared arrow reset */
.frm_chat_arrows .frm_chat_arrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: none !important;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
  text-decoration: none !important;
  box-sizing: border-box;
}

/* Back button: compact square, muted warm gray */
.frm_chat_arrows .frm_chat_prev_arrow {
  flex: 0 0 auto;
  width: 56px;
  background: rgba(0, 0, 0, 0.06) !important;
  color: #666 !important;
}

.frm_chat_arrows .frm_chat_prev_arrow svg {
  width: 30px;
  height: 32px;
  max-height: 100%;
}

.frm_chat_arrows .frm_chat_prev_arrow:hover {
  background: rgba(0, 0, 0, 0.10) !important;
}

.frm_chat_arrows .frm_chat_prev_arrow:active {
  transform: scale(0.96);
}

/* Next button: dominant, fills remaining space */
.frm_chat_arrows .frm_chat_next_arrow {
  flex: 1 1 0%;
}

/* Hide the checkmark SVG that Formidable injects on the next button */
.frm_chat_arrows .frm_chat_next_arrow .frm_next_checkmark {
  display: none !important;
}

/* Prevent orphaned words on last line of HeartChart result paragraphs */
.result-text-container p {
  text-wrap: pretty;
}