/*
 Theme Name:   PCS-theme
 Theme URI:    https://personalcyberservice.co.uk/wp-content/themes/PCS-theme/
 Description:  Cyber Made Easy Theme
 Author:       Neil H
 Author URI:   https://personalcyberservice.co.uk/wp-content/themes/PCS-theme/
 Template:     generatepress
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  PCS-theme
*/

/* ** HIBP Email and Domain Breach Lookup Form and Response Table stying START ** */

/* Lookup Box Container */
#hibp-container {
  max-width: 450px;
  margin: 30px auto;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  font-family: 'Mulish', sans-serif;
  text-align: center;
}

/* Heading */
#hibp-container h2 {
  color: #24405A;
  font-size: 22px;
  margin-bottom: 10px;
}

/* Description */
#hibp-container p {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

/* Email Input & Button Wrapper */
.hibp-form {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Email Input */
#hibp-email, #hibp-password, #hibp-domain {
  width: 70%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}

/* Button */
#hibp-check-btn, #hibp-check-password-btn, #hibp-check-domain-btn {
  width: 30%;
  padding: 10px;
  font-size: 16px;
  background-color: #417E90;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#hibp-check-btn:hover, #hibp-check-password-btn:hover, #hibp-check-domain-btn:hover {
  background-color: #24405A;
}

/* Hide the inline results */
#hibp-result {
  display: none;
}

/* Full-Width Results Container */
#hibp-results-container, #hibp-domain-results-container {
  max-width: 100%;
  overflow-x: auto; /* Allows scrolling if content exceeds container */
  padding: 20px;
}

/* Table Styling */
#hibp-table, #hibp-domain-table {
  width: 100%;
  max-width: 100%; /* Prevents table from overflowing */
  /*table-layout: fixed; /* Ensures columns distribute evenly */
  word-wrap: break-word;
  font-family: 'Mulish', sans-serif;
  font-size: 0.8em;
  border-collapse: collapse;
}

#hibp-table th, #hibp-table td, #hibp-domain-table th, #hibp-domain-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
  white-space: nowrap;
}

#hibp-table th, #hibp-domain-table th {
  background-color: #417E90;
  color: white;
}

#hibp-table th, #hibp-table td,
#hibp-domain-table th, #hibp-domain-table td {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

/* ✅ MOBILE-FRIENDLY STYLING (FOR SCREENS BELOW 768px) */
@media (max-width: 768px) {

    /* 🟢 Stack input field and button vertically */
    .hibp-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    /* 🟢 Make input field full-width with proper height */
    .hibp-form input {
        width: 90% !important;
        padding: 10px;
        font-size: 14px;
        height: auto; /* Ensures it doesn’t get too tall */
        border-radius: 5px;
    }

    /* 🟢 Fix the button height and shape */
    .hibp-form button {
        width: 80% !important;
        padding: 14px; /* Ensures comfortable tap area */
        font-size: 16px;
        height: auto;
        border-radius: 8px; /* Makes it more rounded for better UI */
        background-color: #417E90;
        color: white;
        border: none;
        cursor: pointer;
        transition: background 0.3s ease, transform 0.1s ease-in-out;
        box-sizing: border-box; /* Ensures padding doesn't shrink button */
      }

      /* 🟢 Button hover and tap effect */
      .hibp-form button:hover {
        background-color: #24405A;
      }

      .hibp-form button:active {
        transform: scale(0.98); /* Slight press effect */
      }


      /* 🟢 Adjust lookup container to fit screen width */
      #hibp-container {
        width: 90% !important;
        margin: 20px auto;
        padding: 15px;
      }

      /* 🟢 Stack table fields vertically */
      #hibp-table, #hibp-domain-table {
        width: 100%;
        border-collapse: collapse;
      }

      /* 🟢 Hide table headers on mobile */
      #hibp-table thead, #hibp-domain-table thead {
        display: none;
      }

      /* 🟢 Make each row behave like a separate block */
      #hibp-table tbody tr, 
      #hibp-domain-table tbody tr {
          display: block;
          margin-bottom: 15px;
          border: 1px solid #ddd;
          padding: 10px;
          background-color: #f9f9f9;
          border-radius: 5px;
      }

      /* 🟢 Display table cells in block format */
      #hibp-table td, 
      #hibp-domain-table td {
          display: block;
          text-align: left;
          padding: 5px;
          word-wrap: break-word;
          white-space: normal; /* Allows text to wrap naturally */
      }

      /* 🟢 Make the first cell (which was previously the column header) bold */
      #hibp-table td::before, 
      #hibp-domain-table td::before {
          font-weight: bold;
          display: block;
          color: #333;
      }

      /* 🟢 Assign custom column names as pseudo-elements */
      #hibp-table td:nth-child(1)::before, #hibp-domain-table td:nth-child(1)::before {
          content: "Breach Name:";
      }

      #hibp-table td:nth-child(2)::before, #hibp-domain-table td:nth-child(2)::before {
          content: "Domain:";
      }

      #hibp-table td:nth-child(3)::before, #hibp-domain-table td:nth-child(3)::before {
          content: "Breach Date:";
      }

      #hibp-table td:nth-child(4)::before, #hibp-domain-table td:nth-child(4)::before {
          content: "Affected Accounts:";
      }

      #hibp-table td:nth-child(5)::before, #hibp-domain-table td:nth-child(5)::before {
          content: "Data Compromised:";
      }

      /* 🟢 Fix text overflow issues */
      #hibp-table td, #hibp-domain-table td {
          overflow-wrap: break-word;
          word-wrap: break-word;
          white-space: normal;
      }
}

/* ** HIBP Email and Domain Breach Lookup Form and Response table stying END ** */

/* ** HIBP Password Breach Lookup Form and Response table stying START ** */

/* ✅ Center the response container */
#hibp-password-results-container {
  max-width: 450px; /* Matches lookup form width */
  margin: 20px auto; /* Centers it horizontally */
  padding: 15px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  font-family: 'Mulish', sans-serif;
  display: none; /* Hidden by default, shown when response is received */
}

/* ✅ Styling for the response message */
#hibp-password-results-container h2 {
  font-size: 20px;
  color: #417E90;
  margin-bottom: 10px;
}

/* ✅ Styling for the response text */
#hibp-password-results-container p {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

/* ✅ If the password is found in breaches, highlight it in red */
#hibp-password-results-container .breached {
  color: #d9534f;
  font-weight: bold;
}

/* ✅ If the password is NOT found, highlight in green */
#hibp-password-results-container .safe {
  color: #28a745;
  font-weight: bold;
}

/* ✅ Improve responsiveness */
@media (max-width: 600px) {
  #hibp-password-results-container {
      max-width: 90%;
      padding: 10px;
  }
}

/* ** HIBP Password Breach Lookup Form and Response table stying END ** */