/*--------------------------------------------------------------
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
--------------------------------------------------------------*/

/*
 * Custom Modal Styles for External Links
 * Developer: John D. Jarvis, Founder of Jarvis Media Group
 * Date: 2025-05-21 (Last Updated)
 */
.jm-modal {
  border: 1px solid #A9A9A9; /* 1px border with specified color */
  padding: 20px;
  border-radius: 5px; /* 5px rounded corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  max-width: 450px; /* Maximum width of 400px */
  width: 90%; /* Still responsive, up to 400px */
  margin: auto;
  text-align: center;
  background-color: #F6EFE8; /* Light beige background color */
  box-sizing: border-box; /* Include padding in width/height */
}

/* Backdrop for Modal */
.jm-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6); /* Dark, semi-transparent overlay */
}

.jm-modal-title {
  font-size: 1.5em;
  color: #444;
  margin-bottom: 15px;
}

.jm-modal-message {
  font-size: 1.0em;
  color: #848484;
  line-height: 1.5;
  margin-bottom: 20px;
}

.jm-modal-link-display {
  font-size: 0.95em;
  color: #444;
  margin-bottom: 25px;
  word-break: break-all; /* Ensures long URLs wrap */
}

.jm-modal-link-display strong {
  color: #007bff; /* A prominent color for the URL, typically blue */
  font-size: 0.95em;
}

.jm-modal-actions {
  display: flex;
  flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
  justify-content: center;
  gap: 15px; /* Space between buttons */
}

.jm-button {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, filter 0.3s ease; /* Added filter to transition */
  text-decoration: none; /* Ensure no underline on buttons */
  display: inline-flex; /* Better button layout */
  align-items: center;
  justify-content: center;
}

.jm-button-primary {
  background-color: #444; /* Dark grey button color as requested */
  color: #fff; /* White text for contrast on dark background */
  border: 1px solid #444;
}

.jm-button-primary:hover,
.jm-button-primary:focus {
  background-color: #444; /* Keep background color same, use filter for dimming */
  filter: brightness(85%); /* Dims the color on hover/focus */
  color: #fff; /* Ensure text stays white */
  border-color: #444; /* Keep border color consistent */
}

.jm-button-secondary {
  background-color: #f8f9fa; /* Light grey background */
  color: #444; /* Dark grey text as requested */
  border: 1px solid #ced4da;
}

.jm-button-secondary:hover,
.jm-button-secondary:focus {
  background-color: #e2e6ea; /* Slightly darker grey on hover/focus */
  color: #444; /* Ensure text stays dark grey */
  border-color: #dae0e5;
}

/* Basic responsiveness for smaller screens - ADJUSTED BREAKPOINT */
@media (max-width: 400px) { /* Adjusted from 600px to 400px as per modal's max-width */
  .jm-modal {
    width: 95%; /* Make it slightly smaller than 400px to give some margin on very small screens */
    padding: 15px;
  }
  .jm-modal-actions {
    flex-direction: column; /* Stack buttons vertically */
    gap: 10px;
  }
  .jm-button {
    width: 100%; /* Full width buttons when stacked */
  }
}