/* members login in panel css menu etc */
/* used on index.html auto landing page */
.topmenu{
    display:block;
    background-color: rgb(241, 192, 128);
    margin-left:20%;
    width:60%;
    height:36px;
    padding-top:8px;
    text-align:center;
    border-radius:8px;
    /* display a white empty block between menu items inline*/
    color: rgb(233, 233, 238);
    list-style-position: inside;
    position:static;
    nav-left: auto;
    font-size: 18px;
    font-family: 'Courier New', Courier, monospace;
    font:caption;
}

/*  the CTA text on menu item */
.topmenu.public-submission {
  display: block;
  background: rgba(173, 216, 230, 0.85); !important /* Light blue with transparency */
  color: #0D0706;  !important /* Dark  text for contrast */
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
  padding: 10px 15px;
  border-radius: 8px;
  margin: 15px 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  animation: pulse 2s infinite;
  border: 2px solid #a8d8ff;
}

/* Subscribe CTA animation above button */

.subscribe-submission {
  display: block;
  background: rgba(247, 5, 20, 0.85); !important /* red to match subscribe button*/
  color: #170B09;  !important /* Dark coloured text for contrast */
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
  padding: 10px 15px;
  border-radius: 8px;
  margin: 15px 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  animation: pulse 1s infinite;
  border: 2px solid #a8d8ff;
}


/* Add subtle pulsating animation */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
/* end  cta  */

.radiocheck {
    background-color:#0E9CEB; /* lighter blue */
    color:#F0E2CC; /*.pale yellowy white */
    width:120px;
    height:40px;
    
}

.radioclick {
    background-color:red; 
    color:white; 
    width:120px;
    height:40px;
    
}
/* footer out links */

.out-links {
  background-color: #0a0a23; /* deep navy */
  padding: 0.8rem 1rem;
  text-align: center;
}

.out-links a {
  color: #ffffff !important; /* stay white always */
  text-decoration: none;
  margin: 0 12px;
  font-size: 0.9rem;
}

.out-links a:visited {
  color: #ffffff !important; /* avoid purple/blue clour clash */
}

.out-links a:hover {
  text-decoration: underline;
  color: #cccccc;
}


/*  end outlinks for footer */

 .welcome{
    background-color: rgb(237, 233, 226);
    color:blue ;
 }

 .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color:rgb(233,177,109);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
.fancyp{

background-color: rgb(249, 241, 245);
color:gray;
text-align: center;
text-shadow: darkgray;
font-size: medium;

}

.menupara{

background-color: rgb(87, 133, 225);
color: rgb(250, 253, 253);
text-align: justify;
text-shadow: rgb(234, 168, 168);
font-size: 18px;
box-shadow: 0px 8px 16px 0px rgba(151, 164, 170, 0.2);
padding: 12px 16px;
z-index: 1;

} 

/* new contribute to dictionary */

.contributions {
    background-color: blue;
    color: white;
    text-align: center;
    font-size: medium;
    display: inline-block;      /* Ensures margins and padding apply correctly */
    padding: 12px 24px;         /* Gives the text room to breathe inside the box */
    margin-top: 20px;           /* Breathing space above */
    margin-bottom: 20px;        /* Breathing space below */
    border-radius: 8px;         /* Optional: softens the "narrow box" look */
    text-decoration: none;      /* Removes underline if it's an <a> tag */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* More visible than #f9f9f9 */
    transition: transform 0.2s;  /* Smooth hover effect */
}

.contributions:hover {
    transform: translateY(-2px); /* Slight lift on hover */
    background-color: darkblue;
}

/* end  contributions */ 

/* submit button and clicks */


.submit {
    background-color: #0044cc;   /* A slightly different shade of blue than .contributions */
    color: white; 
    text-align: center;
    font-size: 0.9rem;          /* Slightly smaller to show hierarchy */
    
    /* Spacing & Breathing Room */
    display: inline-block;
    padding: 8px 20px;          /* Thicker than before, but slimmer than .contributions */
    margin-top: 15px;           /* Top margin to separate from content above */
    margin-bottom: 15px;        /* Bottom margin to separate from footer edge */
    
    /* Style differentiation */
    border: 1px solid white;    /* Adds a defined "footer" look */
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit:hover {
    background-color: white;
    color: #0044cc;             
    text-align: center;         
    font-size: 0.9rem;         
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
}
/* */
a{
  color: #1501f5c8;
  }

 .h1{
  margin-top:6px;
  margin-bottom:6px;
  color: blue;
  font-size:16px;
  position: relative;
  top: 20px;
  left:24px;
 }

 .h2{
  margin-top:4px;
  margin-bottom:4px;
  color: rgb(70, 11, 132);
  font-size:14px;
  position: relative;
  top: 20px;
  left:24px;
 }

 .h3{
  margin-top:4px;
  margin-bottom:4px;
  color: rgb(238, 13, 181);
  font-size:12px;
  position: relative;
  top: 20px;
  left:24px;
 }

 .h4{
 margin-top:4px;
 margin-bottom:4px;  
  color: rgb(24, 51, 133);
  position: relative;
  font-size:12px;
  top: 20px;
  left:24px;
 }
 
 .h5{
  margin-top:4px;
  margin-bottom:4px;  
  color: rgb(13, 76, 95);
  position: relative;
  top: 20px;
  font-size:12px;
  left:24px;
 }
.maintext{
  display: inline-block;
  width:100%;
  background-color: azure;
  color:rgb(15, 15, 1);
  text-align: justify;
  font-size: 18px;
  font-style: italic;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
   margin-top: 4px;
   margin-bottom:4px;
}

/*  smaller screens */
@media screen and (max-width: 1200px) {
    .maintext {
        width: 45vw; 
        max-width: 400px;
    }
}

@media screen and (max-width: 768px) {
    .maintext {
        position: relative; 
        width: 100%; 
        max-width: none;
        margin-top: 20px; 
    }
}

.list-instructions{
  display: inline-block;
  width:100%; 
  background-color: rgb(209,241,255);
  color:rgb(15, 15, 1);
  text-align: justify;
  font-size: 12px; /* smaller text for mobiles */
  font-style: italic;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-top: 2px;
}

/*  smaller screens */
@media screen and (max-width: 1200px) {
    .list-instructions {
        width: 45vw; 
        max-width: 400px;
    }
}

@media screen and (max-width: 768px) {
    .list-instructions {
        position: relative; 
        width: 100%; 
        max-width: none;
        margin-top: 20px; 
    }
}


.tooltip-text{
  display: inline-block;
  background-color: rgb(255,255,255);
  color:rgb(250, 101, 71);
  text-align: justify;
  font-size: 18px;
  font-style: italic;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-top: 2px;
}


.articles{
  display: block;
  background-color: rgb(236,251,252);
  color:rgb(7,9,9);
  text-align: Left;
  font-size: 18px;
  font-style: normal;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
   margin-top: 2px;
}
.headpara{
  color: rgb(0, 0, 0);
  position: relative;
  top: 20px;
  left:24px;
  width:100%;
  font-size: 18px;
  font-style: normal;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.inside{
  margin-left:2px;
  width:98%;
}
.pageadvert{
  color: rgb(0, 0, 0);
  position: relative;
  top: -320px;
  left:60%;
  width:50%;
  font-size: 18px;
  font-style: normal;
  font-family: Verdana, Geneva, Tahoma, sans-serif;

}

/* new required and optional inputs on mobiles */

/* Fix for required/optional form inputs on mobile */
.required, .optional {
  font-weight: bold;
  font-size: 16px; /* Minimum readable size for mobile */
}

/* Ensure good contrast on mobile devices */
@media screen and (max-width: 768px) {
  .required {
    color: #d1000a !important; /* Slightly darker red for better mobile visibility */
    background-color: rgba(255, 200, 200, 0.1); /* Light red background */
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* Improve readability */
  }
  
  .optional {
    color: #026413 !important; /* Slightly darker green for better mobile visibility */
    background-color: rgba(200, 255, 200, 0.1); /* Light green background */
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* Improve readability */
  }
  
  /* Fix textarea styles for mobile */
  textarea:required {
    border: 2px solid #d1000a !important;
    background-color: #fff8f8; /* Very light red background */
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
  
  textarea:not(:required) {
    border: 1px dashed #026413 !important;
    background-color: #f8fff8; /* Very light green background */
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
  
  textarea:required::placeholder {
    color: #d1000a !important;
    opacity: 0.8;
    font-size: 14px;
  }
  
  textarea:not(:required)::placeholder {
    color: #026413 !important;
    opacity: 0.8;
    font-size: 14px;
  }
}

/* Additional mobile fixes for better form readability */
@media screen and (max-width: 480px) {
  .required, .optional {
    font-size: 18px !important; /* Larger text on very small screens */
    display: block;
    margin: 8px 0;
    padding: 8px 12px;
  }
  
  /* Ensure form inputs are touch-friendly */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    min-height: 44px !important; /* Minimum touch target size */
    font-size: 16px !important; /* Prevent zoom on iOS */
    padding: 12px !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .required {
    color: #000000 !important;
    background-color: #ffcccc !important;
    border: 2px solid #000000 !important;
  }
  
  .optional {
    color: #000000 !important;
    background-color: #ccffcc !important;
    border: 2px solid #000000 !important;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .required {
    color: #ff6b6b !important;
    background-color: rgba(255, 0, 0, 0.1) !important;
  }
  
  .optional {
    color: #51cf66 !important;
    background-color: rgba(0, 255, 0, 0.1) !important;
  }
}

/* end mobile inputs clear text */

textarea:required::placeholder {
  color: red;
  opacity: 1.0
}


textarea:required {
  border: 2px solid red;
}


textarea:not(:required)::placeholder {
  color: blue;
  opacity: 1.0;
}


textarea:not(:required) {
  border: 1px dashed green;
}

/*.optional{
  color: rgb(3, 163, 17);
} */
.prefered{
  color: #2556fa;

}
.feedback{
  color: rgb(250, 2, 2);
  position: relative;
  top: 2px;
  left:24px;
  width:80%;
  font-size: 18px;
  font-style:oblique;
  font-family:'Times New Roman', Times, serif;
}

.reportselection{
  color: rgb(8, 5, 174);
  position: relative;
  top: 2px;
  left:240px;
  font-size: 18px;
  font-style:normal;
  font-family:Arial, Helvetica, sans-serif;
}

.instruction{
  color: rgb(0, 0, 0);
  position: relative;
  top: 60px;
  left:240px;
  width: 76%;
  height: 220px;
  font-size: 18px;
  font-style: normal;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.mediaform{
  color: rgb(0, 0, 0);
  position:fixed;
  top: 760px;
  left:840px;
  width: 76%;
  height: 220px;
  font-size: 18px;
  font-style: normal;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.error{
  color: rgb(219, 14, 14);
  position:fixed;
  top: 360px;
  left:1200px;
  width: 76%;
  height: 320px;
  font-size: 18px;
  font-style: normal;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}


.submiterror{
  color: rgb(219, 14, 14);
  position:fixed;
  top: 240px;
  left:1160px;
  width: 76%;
  height: 320px;
  font-size: 18px;
  font-style: normal;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.errorline{
/* red error inline as per program flow  */
  color: rgb(219, 14, 14);
}
.good{
/* blue input good  as per program flow  */
color: rgb(2, 14, 249);
}
.uploaderr{
  color: rgb(219, 14, 14);
  position:fixed;
  top: 860px;
  left:200px;
  width: 86%;
  height: 420px;
  font-size: 18px;
  font-style: normal;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.bad{
  color: rgb(249, 4, 4);
  position:fixed;
  top: 600px;
  left:236px;
  width: 86%;
  height: 420px;
  font-size: 18px;
  font-style:italic;
  font-family:'Times New Roman', Times, serif;
}

.badsubmission{
  color: rgb(216, 21, 21);
  position:relative;
  top:-120px;
  left:600px;
  width: 70%;
  height: 220px;
  font-size: 18px;
  font-style:normal;
  font-family:'Courier New', Courier, monospace;
}
.insidebox{
 color:rgb(7, 1, 15);
 width: 98%;
 overflow: scroll;
 font-size: 48px;
  font-style:normal;
  font-family:Georgia, 'Times New Roman', Times, serif
}

.inputbox{
  background-color: #FAFBCC; /* Light YELLOW*/
  border-radius: 4px;
  color: #1C1E1E;
  padding: 2px 2px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  transition-duration: 0.6s;
   box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.19);
  font-size: 18px;
}
.dictionary-entry{
    width:70%;
}
.dictionary-picture{
    float:right;
    width:24%;
    margin:2px;
}
.totheleft{
 position:relative;
 top: -130px;
 left:460px;
  background-color: #fcfcf9; /* Pale grey/yellowy*/
  border-radius: 2px;
  color: #04010c;
  padding: 4px 4px;
  text-align: left;
  text-decoration:solid;
  display: inline-block;
  transition-duration: 0.2s;
   box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.19);
  font-size: 18px;
}
/*  show language hints over text */
  .tooltip {
     position: relative;
    display: inline-block;
    cursor: pointer;
        }

 .tooltip .tooltip-text {
    visibility: hidden;
     width: 120px;
     background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0;
     position: absolute;
     z-index: 1;
    bottom: 125%; /* Position above the word */
    left: 50%;
     margin-left: -60px;
    opacity: 0;
     transition: opacity 0.3s;
        }

 .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
        }
       
 .inputlogo{
background-image: url("/Images/Form-images/search.jpg");
background-color: #FFFFFF;
width:66%;
height:84px;
text-align:left;
color:#000407;
            }
            
      /*  smaller screens */
@media screen and (max-width: 1200px) {
    .input {
        width: 45vw; 
        max-width: 400px;
    }
}

@media screen and (max-width: 768px) {
    .input {
        position: relative; 
        width: 100%; 
        max-width: none;
        margin-top: 20px; 
    }
}      
            

/* new container errors */

.error-container {
  position: fixed;
  top: 80px; 
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
 overflow-y:auto;
 overflow-y:auto;
  pointer-events: none;
  display: flex;
  flex-direction: column; /* Stacks children vertically */
  align-items: center;    /* Centers them if they aren't 100% width */
  gap: 10px;              
}

.inputerror {

 /* position: fixed; */
 /* top:40px; */
  width: 100%; 
  padding: 12px 15px; 
  border-radius: 8px;
  border: thin solid #A569F7;
  background-color: #F6F0F1;
  color: #FA0416;
  font-size: 1rem;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
  overflow-y:auto;
  overflow-x:auto;
}


/* end errors container */

.summissionserror {
  width: 96%;
  max-width: 800px;
  border-radius: 12px;
  border: thin solid #3C4BBD;
  padding: 12px 15px;
  background-color: #EFF0B1;
  color: #3C4BBD;
  font-size: 1.25rem;
  box-sizing: border-box;
  margin: 4px auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  pointer-events: auto; /* Make the error message itself clickable */
}


            
 .pdf{
    position: absolute;
    border: 2px solid blue;
    border-radius: 12px;
    padding: 10px;
    width: 68%; /* 3/4 width aprox*/
    height:60px;
    max-width: 82vw; /* Prevent it from being too wide */
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    background-color: #FFFFFF;
    text-align: center;
    color: #000407;
    box-sizing: border-box;
    
    /* Dynamically to left  */
    left: 20px; /* slide in to right past right columnn */
    left: auto; /* Reset left positioning */
}

/*  smaller screens */
@media screen and (max-width: 1200px) {
    .pdf {
        width: 45vw; 
        max-width: 400px;
    }
}

@media screen and (max-width: 768px) {
    .pdf {
        position: relative; 
        width: 100%; 
        max-width: none;
        margin-top: 20px; 
    }
}
       
.column{
 position:relative;
 border:solid;
left:1820px;
width:920px;
overflow-y:auto;
overflow-x:auto;
white-space: nowrap; /* Prevents text from wrapping */
background-color: #FFFFFF;
text-align:left;
color:#000407;
    }
 
/* mobile responsive sub menu below the main menu */
  
 .submenu{
    position: relative;
    top:20px;
    border: 2px solid blue;
    border-radius: 12px;
    padding: 10px;
    width: 98%; 
    height:120px;
    max-width: 100vw; 
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    background-color: #FFFFFF;
    text-align: center;
    color: #000407;
    box-sizing: border-box;
    left: 2px; 
    left: auto; 
}

/*  smaller screens */
 @media screen and (max-width: 1200px) {
    .submenu {
        width: 45vw; 
        max-width: 400px;
    }
}

@media screen and (max-width: 768px) {
    .submenu {
        position: relative; 
        width: 100%; 
        max-width: none;
        margin-top: 20px; 
    }
} 


#newsTicker {
    background-color: #E2F2FE;
    padding: 4px;
    border-radius: 5px;
    font-weight: lighter;
    color: #1F52F1;
}

/* for subscribe search button different colors */
.buttonclick{
    border: 2px solid blue;
    border-radius: 4px;
    padding: 2px;
    width:320px;
    height:60px;
    background-color:red;
    color:white;
    }
    
    
    .searchclick{
    border: 2px solid white;
    border-radius: 4px;
    padding: 2px;
    width:320px;
    height:60px;
    background-color: green;
    color:white;
    font-size:medium;
    }
    
    /* flash red hover on problem words */
    
        .danger-word {
      color: red;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .danger-word:hover {
      background-color: #ffdddd;
    }

    /* Modal styles */
    .modal {
      display: none;
      position: fixed;
      z-index: 100;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.6);
    }

    .modal-content {
      background-color: #fff;
      margin: 10% auto;
      padding: 20px;
      border-radius: 10px;
      width: 80%;
      max-width: 500px;
    }

    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover {
      color: black;
      cursor: pointer;
    }

    
   /* for fontawesome icons */
    
    
 #myfontawesome {
  position: relative;
  border: 2px solid blue;
  border-radius: 4px;
  padding: 2px;
  left: 20px; /* Move the icon slightly to the left */
  width: 40px;
  height: 40px;
  background-color: #0536F9; /*match menu colour */
  padding: 4px;
  border-radius: 5px;
  font-size:18px;
  font-weight: bold;
  color: rgb(255, 255, 255); 
}


 #mybigfontawesome {
  position: relative;
  border: 2px solid blue;
  border-radius: 6px;
  padding: 2px;
  left: 20px; /* Move the icon slightly to the left */
  width: 80px;
  height: 80px;
  background-color: #0536F9; /*match menu colour */
  padding: 4px;
  border-radius: 5px;
  font-size:22px;
  font-weight: bold;
  color: rgb(255, 255, 255); 
}

/* word of the day wrapper div */
.wotd-container {
    width: 300px;
    margin: 20px auto;
    border: 3px solid #4a6fa5;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
}

.wotd-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(90deg, #4a6fa5 0%, #63a4ff 100%);
}

.wotd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid #e1e1e1;
}

.wotd-language {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.wotd-flag {
    font-size: 2em;
}

.wotd-main {
    padding: 15px;
    background-color: #fff;
}

.wotd-word {
    font-size: 2em;
    font-weight: bold;
    color: #4a6fa5;
    margin-bottom: 10px;
    text-align: center;
    padding: 10px 0;
    border-bottom: 2px dashed #e1e1e1;
}

.wotd-used {
    font-style: italic;
    color: #666;
    margin-bottom: 15px;
    text-align: center;
}

.wotd-example, .wotd-translate {
    margin-bottom: 10px;
    line-height: 1.4;
    color: #444;
}

.wotd-example strong, .wotd-translate strong {
    color: #4a6fa5;
}

.wotd-footer {
    padding: 10px 15px;
    background-color: #f5f7fa;
    text-align: right;
    font-size: 0.8em;
    color: #666;
    border-top: 1px solid #e1e1e1;
}

/* For Turkish version */
.wotd-container[title*="Turkish"] .wotd-word {
    color: #c8102e; /* Turkish red */
}

.wotd-container[title*="Turkish"] .wotd-example strong, 
.wotd-container[title*="Turkish"] .wotd-translate strong {
    color: #c8102e;
}

.wotd-container[title*="Turkish"]::before {
    background: linear-gradient(90deg, #c8102e 0%, #e6483c 100%);
}

/* three images user engagement */

/* Engagement section above search form also top of other pages*/
.engagement-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  padding: 20px 10px;
  background-color: #f9f9f9;
  box-sizing: border-box;
}

.engagement-block {
  flex: 1 1 30%;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

.engagement-block img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto 10px auto;
}

.engagement-text {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
}

/* Responsive stacking on smaller screens */
@media screen and (max-width: 768px) {
  .engagement-block {
    flex: 1 1 100%;
  }
}

/* footers */
.cultural-page-footer{
    background-color:#CDF7F5;
    color:#0C0459;
    width:80%;
    padding-top:12px;
    padding-bottom:8px;
    border-radius:36px;
    border-style:solid;
    border-color:blue;
    margin-left:120px;
    text-align:center;
    text-size:26px;
    font-family: Verdana, sans-serif,Tahoma,Geneva,Segoe UI;
}

 .footer-social{
    background-color: black;
    color:white; /* black & white footer */
    
}

.footer-stripe{
  background-color:white;
  color:blue; /* footer separation bar */
  font-family: 'Verdana' 'Georgia', 'Times New Roman', Times, serif;
  text-align:center;
} /* separate social media and business contacts */
  

 /* new flex  business footer */

.footer-business {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping to next line on smaller screens */
    gap: 15px; /* Space between items */
    font-family: 'Georgia', 'Times New Roman', Times, serif;
    color: white;
    background-color: black;
    padding: 20px;
    justify-content: center; /* Center items horizontally */
}

.footer-business span {
    white-space: nowrap; /* Prevent awkward text breaks within each item */
}

.footer-business, .footer-stripe, {
    font-family: 'Georgia', 'Times New Roman', Times, serif;
    color: white;
    background-color: black;
    padding: 20px;
}

/* English Turkish listening game div p styling*/
/* Style main intro block */
#intros {
  background-color: #f5faff;
  border: 1px solid #cce0f5;
  padding: 1em;
  margin: 1em 0;
  border-radius: 8px;
  font-size: 1.1em;
  line-height: 1.6;
}

/* Audio intro section */
#audio-intros {
  background-color: #fff8f0;
  border: 1px solid #ffd9b3;
  padding: 1em;
  margin-top: 1em;
  border-radius: 8px;
}

/* English instruction */
#english-words {
  font-weight: bold;
  color: #003366;
}

/* Turkish translation */
#turkish-translation {
  font-style: italic;
  color: #990000;
}

/* Hint block styling */
#hint {
  background-color: #fef6e4;
  border: 1px dashed #d4aa00;
  padding: 1em;
  margin: 2em 0;
  border-radius: 8px;
}

#hint h2 {
  color: #884400;
  font-size: 1.2em;
}

#hint p {
  color: #555;
}

/* Style buttons (guess and hint) */
form button {
  background-color: #0077cc;
  color: #fff;
  padding: 0.6em 1.2em;
  margin: 0.5em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1em;
}

form button:hover {
  background-color: #005fa3;
}

/* Feedback after guessing */
.correct {
  color: green;
  font-weight: bold;
}

.incorrect {
  color: red;
  font-weight: bold;
}
/* tooltip data info show for listening games */

.turkish-info {
  color: #b30000;
  cursor: pointer;
  position: relative;
  border-bottom: 1px dotted #b30000;
}

/* Tooltip box */
.tooltip-bubble {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffe0;
  color: #333;
  padding: 0.5em 0.8em;
  border: 1px solid #ccc;
  border-radius: 6px;
  white-space: normal;
  font-size: 0.85em;
  max-width: 220px;
  z-index: 99;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: none;
}

/* Show on hover (desktop only) */
.turkish-info:hover .tooltip-bubble {
  display: block;
}

/* a div for top of page below menus listening games */

.top-pictures{
  width: 96%;
  height: 460px; /* enough to allow popups to fully show */
  background-color: #FBFAFC;
  color: #03000B;
  
}

/* tooltip near search button(s) */

.tooltip-container {
  position: relative;
  display: inline-block;
  margin-left: 8px; /* space between button and icon */
  cursor: pointer;
}

.info-icon {
  background-color: #007BFF;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  line-height: 1;
}

.tooltip-text {
    /*width:520px;
    height:370px; */
  visibility: hidden;
  background-color: #F2E99B;
  color: #00000;
  text-align: left;
  border-radius: 5px;
  padding: 8px;
  font-size: 13px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* above the icon */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  /*width: max-content; */
  max-width: 420px;
  max-height:510px;
  overflow-x: scroll;
  overflow-y:scroll;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/*  form in an image */
.bg-img {
  background-image: url("/Images/Form-images/news-blogs.png");
  min-height: 480px;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;

  position: relative;
}

/* styles for form container */

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  max-width: 300px;
  padding: 16px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* optional for visibility */
}

/* Full width input field */
input[type=text] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* big green  */
.btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}  


/*. call to action image text */

.cta-container {
    display: flex;
    width: 100%;
    min-height: 300px; /* Minimum height for text area */
}

.cta-text {
    flex: 1; /* Takes remaining space */
    background: white;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta-heading {
    color: #466ed9; /* RGB(70,110,217) */
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.cta-byline {
    color: #466ed9;
    line-height: 1.4;
}

.cta-image-container {
    flex: 0 0 50%; /* Fixed 50% width */
    max-width: 50%;
}

.cta-image {
    width: 100%;
    height: 300px;
    object-fit: cover; /* Ensures image fills container */
    border: 3px solid #466ed9; /* Menu color border */
    box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cta-container {
        flex-direction: column;
    }
    
    .cta-image-container {
        flex: 1;
        max-width: 100%;
        order: -1; /* Image above text on mobile */
    }
}  


/* secondary cta button */
.cta-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #ffcc00;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background 0.3s ease;
}

.cta-button:hover {
  background-color: #ff9900;
}  
/* new important red warning for tagging help page */

.tag-warning {
  background-color: #fff6f6;          /* very light red tint */
  border-top: 6px solid #c62828;
  border-bottom: 6px solid #c62828;
  padding: 16px 20px;
  margin-bottom: 20px;
  color: #3a0000;
  font-size: 0.95rem;
  line-height: 1.5;
}

.tag-warning h3 {
  margin-top: 0;
  color: #b71c1c;
}

.tag-warning ul {
  margin-left: 20px;
}

.tag-warning li {
  margin-bottom: 6px;
}

.tag-warning strong {
  color: #8e0000;
}

.tag-warning .admin-note {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed #c62828;
  font-size: 0.9rem;
}  

/* new intro tag warning */ 

/* Intro guidance for Impossible / No-translation tags */
.tag-intro {
  display: block;
  background: linear-gradient(135deg, #fffaf0, #fdf3d7); /* soft parchment tone */
  color: #4a3b00; /* calm, readable brown */
  font-size: 0.95em;
  line-height: 1.5;
  padding: 14px 18px;
  margin: 12px 0 6px 0; /* tight to the warning below */
  border-left: 6px solid #f5b400; /* guidance accent, not danger */
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

/* Optional icon emphasis inside text */
.tag-intro .icon {
  font-weight: bold;
  margin-right: 6px;
}

/* Slightly stronger wording highlight */
.tag-intro strong {
  color: #8a5a00;
}

/* Mobile readability */
@media screen and (max-width: 768px) {
  .tag-intro {
    font-size: 1em;
    padding: 16px;
  }
}   

/* Staff announcements box */
.staff-announcement {
    margin: 16px auto 24px auto;
    padding: 14px 18px;
    max-width: 980px;
    background-color: #e8f3ff;   /* soft light blue */
    border-left: 6px solid #4a90e2;
    color: #1f2d3d;
    font-size: 0.95rem;
    line-height: 1.5;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
/* Similar to staff announcement that sits above it on cultural notes page */
.cultural-note{
    margin: 26px auto 24px auto; /* bigger margin push into the screem*/
    padding: 14px 18px;
    max-width: 980px;

    background-color: #BEDBFF;   /* paler blue than announcement  */
    border-left: 10px solid #4a90e2; /* fatter rounder border */

    color: #65607D; /* bluer grayer than announcement above*/
    font-size: 0.95rem;
    line-height: 1.5;

    border-radius: 12px; /* rounder larger radius */
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Custom Divider styling using <hr> */
.cultural-note hr {
    border: none;
    border-top: 1px dashed #4a90e2; /* Subtle divider line */
    margin: 16px 0;
    overflow: visible;  
    text-align: center;
    height: 0;
}

.cultural-ability{
background-color:white;
color:blue;
}

.cultural-ability{
background-color:white;
color:blue;
}

.cultural-ability::before{
   background-color:#96C7F2; 
    color: #1f2d3d;
    content: "🎓Knowledge & ability level: ";
}

.cultural-effect{
background-color:white;
color:blue;

} 

.cultural-effect::before{
    background-color:#96C7F2;
    color: #1f2d3d;
content: "🧕🏻🧑‍🔧Effectiveness In social graces : ";
}
 .culturally-bold{
     border:2px;
     border-top: 12px dashed #CFCBCA /* greyish*/
     background-color:white;
     color:blue;
     overflow: visible;             
    text-align: left;
    height: 0;    vertical-align: -0.2em;

 }

/* Opening quotation mark */
.staff-announcement::before {
    content: "“";
    color: #4a90e2;             /* Matches  border blue */
    font-size: 1.3em;
    font-weight: bold;
    margin-right: 4px;
    vertical-align: -0.1em;
}

/* Closing quotation mark */
.staff-announcement::after {
    content: "”";
    color: #4a90e2;             /* Matches border blue */
    font-size: 1.3em;
    font-weight: bold;
    margin-left: 4px;
    vertical-align: -0.2em;
}






/* Emphasis for staff label */
.staff-announcement strong {
    color: #1b4f9c;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}  

/* new corrected turkish text here */
/* Visual debug helper for Turkish content (debug + frontend) */
.turkish-text-here::before {
    content: "🇹🇷 📝 [TR]: ";
    font-weight: bold;
    margin-right: 6px;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.2));
}

/* Turkish text highlight */
.turkish-text-here {
    margin: 10px 0;
    border: 2px solid #E30A17; /* Turkish flag red */
    border-radius: 8px;
    padding: 8px 12px;
    background: rgba(227, 10, 23, 0.05); /* subtle red tint */
    display: inline-block;
}

/* show english turkish leakage via script*/ 

.english-leak {
  background: #ffe4b5;
  color: #b30000;
  font-weight: bold;
  border-radius: 3px;
  padding: 0 2px;
}

/*.new Language direction translation table on tagging help page */

 .translation-legend-container {
    font-family: sans-serif;
    margin: 20px 0;
    max-width: 900px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .accuracy-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
  }
  
  .accuracy-table th {
    background-color: #f8f9fa;
    color: #333;
    font-weight: 600;
    padding: 12px 15px;
    border-bottom: 2px solid #dee2e6;
  }
  
  .accuracy-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
  }

  /* Slot 1: The Code */
  .code-cell {
    font-family: monospace;
    font-weight: bold;
    color: #2c3e50;
    white-space: nowrap;
  }

  /* Slot 2: The Meaning */
  .meaning-cell {
    color: #1a73e8;
    font-weight: 500;
  }

  /* Slot 3: The Context/Usage */
  .usage-cell {
    color: #5f6368;
    font-size: 0.9em;
    line-height: 1.4;
  }

  .accuracy-table tr:hover {
    background-color: #f1f3f4;
  }   
  
  
  .toggle-slider{
   position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
  


.toggle-slider input { 
  opacity: 0;
  width: 0;
  height: 0;
}
  
  /*. shit to go   */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
  
      
  }
  
  /* new css for articles */
  .the-article {
  position: fixed;
  top: 660px;
  width: 80%;
  height: 128px;
  overflow: auto;
  background-color: #CBF4F7;
  color: #130996;
  text-align: center;
  font-family: "Courier New", Georgia, serif;
  font-style: italic;
  font-variant: small-caps;
  font-size: 14px;
  line-height: 22px;
}  

.article-header {
  padding: 6px;
  text-align: center;
  font-size: 26px;
  font-family: Verdana, Helvetica, sans-serif;
  /* Ensure default browser margins aren't pushing it out of view */
  margin: 0; 
}

.article-byeline {
  padding: 6px;
  text-align: center;
  font-size: 24px;
  font-family: Verdana, Helvetica, sans-serif;
  margin: 0;
}

.article-separation {
  text-align: center;
  font-size: 22px;
  font-family: Georgia, serif, sans-serif;
}

.article-head {
  background-color: #E6E0DF;
}
  
/*.pop up icons for cultural notes page match blue style and white backgrounf theme of page */  

/* New pop up css*/ 

.cultural-pop-up-item {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin: 5px 10px;
    padding: 5px;
    cursor: pointer;   /* indicate it's clickable */
}

.cultural-icon-nav { /* unchanged */ }

.cultural-text-nav {
    position: absolute;
    z-index: 100;
    top: 110%;
    left: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    width: 280px;
    background: #fff;
    color: #2c3e50;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 12px;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Hover (optional) */
.cultural-pop-up-item:hover .cultural-text-nav {
    visibility: visible;
    opacity: 1;
}

/* Click toggle class */
.cultural-text-nav.show {
    visibility: visible;
    opacity: 1;
}

.custom-icon {
    font-style: normal;
    background-color:#2798F5;
    color: white;
    font-weight: bold;
    margin:12px;
    
  }
  
  /**end new css /