/*hide the top bar on Homepage  */
.page-id-17 #site-header-sticky-wrapper{
        display:none !important;
}

.diagnostic-slogan {
  font-size: 14px;
  font-weight: normal;
  color: #777;
  font-style: italic;
  direction: ltr;
  unicode-bidi: isolate;
  margin-left: 10px;
}

/* ----- mobile tweaks ----- */
/* ---------- MOBILE (< 768 px) ---------- */
@media (max-width: 768px){

  /* hide the slogan */
  .page-slogan{ display:none!important; }

  /* push the welcome block to the RIGHT edge */
  .topbar-header{ justify-content:flex-end !important; }   /* override space-between */

  /* remove the left-auto trick — just keep a tiny gap from the edge */
  .welcome-message{
    margin:0;
    padding-left:0;
    padding-right:4px;   /* tweak as you like */
    padding-top:5px;
    padding-bottom:4px;
  }
}



.topbar-header{
  display:flex;
  justify-content:space-between;
  align-items:center;     /* vertical centring on one line */
  padding:2px 10px;       /* slimmer top/bottom */
  background:#fff;
  border-bottom:1px solid #ddd;
  direction:ltr;
}

/* kill the default <p> margins inside the bar */
.topbar-header p{
  margin:0;
  line-height:1.2;        /* same rhythm as the slogan */
}

.page-slogan{
  font-size:14px;
  color:#666;
  font-style:italic;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  flex:1 1 auto;          /* share the row */
  min-width:0;            /* allow it to shrink */
}


/* desktop + mobile */
.welcome-message{
  font-weight:bold;
  font-size:14px;
  white-space:nowrap;

  margin-left:auto;   /* ⬅️ push element all the way to the right */
  padding-left:12px;  /* keeps a small gap when the slogan is visible */
}



.welcome-message a{
  color:#0073aa;
  text-decoration:none;
  margin:0 5px;
}
.welcome-message a:hover{ text-decoration:underline; }


/*Diagnostic page*/

/*this is right above the "one question a day part*/
body.page-id-90 #content-wrap.container.clr {
  padding-top: 10px !important;
}

/*Diagnostic Page*/
/* Make the container for Field 6 a flex container aligned to the bottom */  
/* Layout: container for the textarea */
#gform_wrapper_9 #field_9_6 .ginput_container {
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0px !important;
}


/* Style the text inside the readonly question box */
#input_9_6[readonly] {
  font-weight: bold !important;
  font-size: 1.5em !important;
  color: #222 !important;
  text-align: center !important;
}

/* Style the textarea in Field 6 */
#gform_wrapper_9 #field_9_6 .ginput_container textarea {
  font-size: 1.5em;
  color: #333333;
  font-weight: normal;
  line-height: 1.5 !important;
  background-color: #fff;
  border: none;
  box-shadow: none;
  height: 70px;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 0 !important;  /* No bottom space */
}

/* Style the textarea in Field 1 */
#gform_wrapper_9 #field_9_1 .ginput_container textarea {
  font-size: 1em;
  color: #333333;
  font-weight: normal;
  line-height: 1.4 !important;
  background-color: #fff;
  border: .5;
  box-shadow: none;
  height: 100px;
  padding: 8px 12px;
  border-radius: 15px;
  margin: 0 !important;  /* No bottom space */
}



/* Mobile improvements */
@media (max-width: 600px) {
  #gform_wrapper_9 #field_9_6 .ginput_container textarea {
    font-size: 24px;
    height: 80px;
    padding: 8px 10px;
  }
}
@media (max-width: 600px) {
  .mic-controls-row {
    margin: 0.8em 0;
  }
  #mic-toggle-button {
    width: 90px;
    height: 90px;
    font-size: 2.2rem;
  }
	/*this is right above the "one question a day part*/
body.page-id-90 #content-wrap.container.clr {
  padding-top: 20px !important;
}
}

@media (max-width: 600px) {
  .mic-controls-row .mic-status,
  #recording-message {
    display: block !important;
    width: 100%    !important;
    margin-top: 0.5em !important;
    text-align: center;
  }
}
/* Fix spacing above the submit button (Form 9 footer) */
#gform_wrapper_9 .gform_footer {
  margin-top: 1em !important;
}


/* 🟢 Style for the intro sentence */
#todays-question-header {
    direction: rtl;
  font-family: "Arial", sans-serif;
	text-align: center;
  font-size: 1.2em;
  font-weight: 700;
  color: #333;
  margin-bottom: .5em;
}

/* 🔊 Center and space the mic button */
/* pulse animation (if you chose approach #3) */
@keyframes mic-pulse {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1);    }
}





/* override & expand your existing #mic-toggle-button */
#mic-toggle-button {
  display: block !important;
  margin: 0 auto 0.6em !important;

  /* ← add your new size here: */
  width: 220px     !important;
  height: 220px    !important;
  font-size: 4rem  !important;

  /* ← optional pulse: */
  animation: mic-pulse 2s ease-in-out infinite;
}

.gfield.mic-controls-row-listitem,
.mic-controls-row-listitem {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}
.mic-controls-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 1em 0 !important;
  text-align: center;
}



/*hidden submit button for form 9*/

/* 2) Style the specific button by its ID.
   Change the background/color to your liking. */
.page-id-90 #gform_submit_button_9.gform_button.button {
  background-color: white;
  color: #1a1a1a;
  border: 2px solid #006666; /* dark teal to match your mic circle */
  border-radius: 50px; /* makes it pill-like */
  padding: 6px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.2s ease;
	display: block;
  margin: 20px auto; /* centers it horizontally and adds space above */
}

/* 3) Optional hover effect */
.page-id-90 #gform_submit_button_9.gform_button.button:hover {
  background-color: #006666;
  color: white;
}

/* hide the “click stop to continue” blurb by default */
#recording-message {
  display: none !important;
}






/* =========================================================
   DIAGNOSTIC PAGE –submit button Form 10 - a
   small pill button and keep Form 9’s pill matching.
   ========================================================= */
#gform_wrapper_10 { display: none; }


/* ✨ Confirmation Message Box – Modern, Branded, with Flair */
/* Confirmation box base */
#gform_confirmation_message_9 {
  position: relative;
  background: rgba(0, 124, 137, 0.05);
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 80px 20px 40px;
  margin: 3rem auto;
  max-width: 800px;
  font-family: 'Inter', sans-serif;
  text-align: center;
  overflow: hidden;

  /* fade-in */
  animation: fadeInUp 0.6s ease-out both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Background mic icon */
#gform_confirmation_message_9::before {
  content: "🎤";
  position: absolute;
  top: 40%;
  left: 50%;
  font-size: 180px;
  opacity: 0.08;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* Headline */
#gform_confirmation_message_9 h4 {
  position: relative;
  z-index: 1;
  font-size: 2.2rem;
  font-weight: 700;
  color: #007c89;
  margin-bottom: 0.5em;
}

/* Body text */
#gform_confirmation_message_9 p {
  position: relative;
  z-index: 1;
  font-size: 1.3rem;
  font-weight: 400;
  color: #333;
  margin: 0 auto;
  max-width: 600px;
}



body.page-id-90 #gform_submit_button_9,
body.page-id-90 #gform_submit_button_10{
  /* shared pill look */
  background:#fff            !important;
  color:#1a1a1a              !important;
  border:2px solid #006666   !important;
  border-radius:50px         !important;
  padding:6px 18px           !important;
  font-weight:600            !important;
  font-size:14px             !important;
  line-height:1.3            !important;
  width:auto                 !important;
  height:auto                !important;
  cursor:pointer             !important;
  box-shadow:none            !important;
  animation:none             !important;   /* kill the pulse */
  transition:all .2s ease;
	margin: 20px auto
}

/* hover state */
body.page-id-90 #gform_submit_button_9:hover,
body.page-id-90 #gform_submit_button_10:hover{
  background:#006666 !important;
  color:#fff         !important;
}

/******************/
/*daily read page*/
/******************/

/*this is right above the "one question a day part*/
body.page-id-413 #content-wrap.container.clr {
  padding-top: 10px !important;
}


#practiceSessionWrapper {
  max-width: 700px;
  margin: 0 auto;
}

/* Tidy up radio button lists */
.gfield_radio li {
  margin-bottom: 8px;
}

/* Make field labels clean and consistent */
.gfield_label {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.gform_wrapper .gfield.gfield--width-33 {
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
}
.gform_wrapper .gfield_label {
  margin-bottom: 6px;
  font-weight: 600;
}

/* Style the button color */
#generateTextBtn.gform_button {
background-color: white;
  color: #1a1a1a;
  border: 2px solid #006666;
  border-radius: 50px;
  padding: 6px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.2s ease;
  display: block;
  margin: 20px auto;
}

#generateTextBtn.gform_button:hover {
  background-color: #006666;
  color: white;
}

/* Style the button color */
#confirmCustom.button.button-primary {
background-color: white;
  color: #1a1a1a;
  border: 2px solid #006666;
  border-radius: 50px;
  padding: 6px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.2s ease;
  display: block;
  margin: 20px auto;
}

#confirmCustom.button.button-primary:hover {
  background-color: #006666;
  color: white;
}

/* Change button color & hover effect for the #generatedMicBtn */
#generatedMicBtn {
  background-color: white;
  color: #006666;
  border: 2px solid #006666;
  border-radius: 50px;
  padding: 8px 18px;
  min-width: 60px;
  max-width: 200px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: block;
  margin: 20px auto;
  white-space: nowrap;
}

/* Hover state */
#generatedMicBtn:hover {
 background-color: #006666;
  color: white;
}

#gform_wrapper_21 .gform_footer {
  display: none;
}

_button_21.gform_button.button {
  display: none;
}



/* Done! message */

/* ─── CTA Message Container ───────────────────────────── */
.dashboard-cta {
	display: none;
  text-align: center;
/* top | right/left | bottom */
margin: 1.5em 0 3em;
  padding: 1em;
  background-color: #f0fdf4;       /* light green tint */
  border-radius: 0.5em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}


/* ─── “Done!” Text Styling ────────────────────────────── */
.dashboard-cta .cta-text {
  font-size: 1.6rem;
  font-weight: 600;
  color: #166534;                  /* darker green */
  margin: 0;                       /* no extra space; the button below has its own margin */
}



/******************/
/******************/
/******************/




/******************/
/******************/
/******************/


/******************/
/***the following
 * are fixes***/

#field_9_6,
#input_9_6,
label[for="input_9_6"] {
  display: none !important;
}

.tmouth-question {
	direction: ltr;
  font-family: "Arial", sans-serif;
	text-align: center;
  font-size: 1.6em;
  font-weight: bold;
  color: #222;
  margin: 1.5em 0 1.2em 0; /* vertical spacing */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
	line-height: 1.5;
}


@media (max-width: 600px) {
  .tmouth-question {
    font-size: 1.5em;
    padding: 0.9em 0.4em;
    margin-bottom: 1em;
  }
}

.q-body-heb {
  direction: rtl;
	 unicode-bidi: isolate-override;
  font-family: "Arial", sans-serif;
	text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  color: #222;
  margin: 1.5em 0 1.2em 0; /* vertical spacing */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
	line-height: 1.2;
}

.q-instruct {
  direction: rtl !important;
	 unicode-bidi: isolate-override;
  font-family: "Arial", sans-serif;
	text-align: center;
  font-size: .8em;
	font-weight: 300; 
  color: #222;
  margin: 1.5em 0 1.2em 0; /* vertical spacing */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
	line-height: 1.5;
}

#help-icon {
  position: fixed;
  top: 80px;
  right: 20px;
  background-color: #f1f1f1;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 9999;
}

#help-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

#help-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  direction: rtl;
  text-align: right;
  font-family: Arial, sans-serif;
}

#help-close {
  float: left;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}


/* Make spans un-selectable & give us a place to mount the tooltip */
.speakable {
  /* existing layout */
  white-space: nowrap;
  word-break: normal;
  position: relative;          /* anchor for the tooltip bubble */
  display: inline-block;

  /* block iOS “Copy / Look-Up” + any text selection */
  -webkit-touch-callout: none !important; /* iOS pop-up menu             */
  touch-action: manipulation;  /* Android long-press menu     */
  -webkit-user-select: none !important;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none !important;
}

.mob-tip{
  position:absolute;
  transform:translate(-50%, -110%); /* centre & lift */
  background:#333;
  color:#fff;
  padding:4px 6px;
  border-radius:4px;
  font-size:14px;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
  z-index:9999;
}
.mob-tip.visible{opacity:1;}