/*
 * options.css
 *
 * Use this file to override Tailwind CSS classes or add your own custom CSS.
 * Because this stylesheet is linked AFTER the Tailwind CSS CDN script in the HTML,
 * styles defined here will have higher specificity and will override Tailwind's defaults.
 */

/* 
 * Brand Button - A specific, robust class for the site's primary button style.
 * This replicates the skewed design from the reference file.
 * - Secondary (blue) background with a skewed primary (orange) element.
 * - Hover state changes the background to primary (orange).
 */
.btn-brand {
  position: relative;
  display: inline-flex; /* Changed to flex for icon alignment */
  align-items: center; /* Vertically center content (text and icon) */
  justify-content: center; /* Center content within the min-width */
  gap: 0.5rem; /* Add space between text and icon */
  font-weight: 700; /* bold */
  color: white;
  text-decoration: none;
  z-index: 10;
  /* Adjusted right padding to account for the thinner skewed element */
  padding: 0.75rem 2.25rem 0.75rem 1.5rem; /* py-3 pl-6 pr-9 */
  min-width: 180px; /* Set a minimum width */
}

/* The main background color of the button (secondary/blue) */
.btn-brand::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: #1C4F8C; /* bg-secondary */
  z-index: -20;
  transition: background-color 300ms ease-in-out;
}

/* The skewed orange element on the right */
.btn-brand::before {
  content: '';
  position: absolute;
  background-color: #F2662C; /* bg-primary */
  z-index: -10; /* Sits ON TOP of the background, but behind the text */
  top: 0; height: 100%;
  right: -10px; width: 20px; /* Made the border 50% thinner */
  transform: skewX(-15deg);
}

/* On hover, change the main background color to primary */
.btn-brand:hover::after {
  background-color: #F2662C; /* bg-primary */
}

/* 
 * Alternate Brand Button - For use on lighter backgrounds (like secondary blue).
 * - Tertiary (navy) background with a skewed primary (orange) element.
 * - Hover state changes the background to primary (orange).
 */
.btn-brand-alt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
  z-index: 10;
  padding: 0.75rem 2.25rem 0.75rem 1.5rem;
  min-width: 180px;
}

.btn-brand-alt::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: #202E54; /* bg-tertiary */
  z-index: -20;
  transition: background-color 300ms ease-in-out;
}

.btn-brand-alt::before {
  content: '';
  position: absolute;
  background-color: #F2662C; /* bg-primary */
  z-index: -10;
  top: 0; height: 100%;
  right: -10px; width: 20px;
  transform: skewX(-15deg);
  transition: background-color 300ms ease-in-out;
}

.btn-brand-alt:hover::after {
  background-color: #F2662C; /* bg-primary */
}

/*
 * Service Card Hover Effect
 * - Adds a slanted background wash on hover, keeping content visible.
 */
.service-card {
  position: relative; /* Needed for the pseudo-element positioning */
}

/* The slanted wash element */
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 140%; /* Wider than the card to cover it when skewed */
  height: 100%;
  background-color: #F2662C; /* primary color */
  z-index: 0; /* Sits behind the content (which needs z-10) */
  transform: skewX(-15deg) translateX(-110%); /* Start off-screen to the left */
  transition: transform 500ms ease-in-out;
}

.service-card:hover::before {
  transform: skewX(-15deg) translateX(-10%); /* Slide in to cover the card */
}

/* When the service card is hovered, change the button's orange accent to white for contrast */
.service-card:hover .btn-brand-alt::before {
    background-color: #ffffff; /* white */
}

/* On hover, the button itself should use the secondary color for its background */
.service-card .btn-brand-alt:hover::after {
    background-color: #1C4F8C; /* secondary */
}

/* 
 * Custom Splide.js Pagination Styles
 * - Makes the pagination dots fit the site's color scheme.
 */
.splide__pagination__page {
  background: #1C4F8C; /* secondary */
  opacity: 0.5;
  transition: all 300ms ease;
}

.splide__pagination__page.is-active {
  background: #F2662C; /* primary */
  transform: scale(1.2);
  opacity: 1;
}

/*
 * Custom Search Highlight Styles
 */
mark.search-highlight {
  background-color: #F2662C; /* primary */
  color: white;
  padding: 0.1em 0.2em;
  border-radius: 3px;
}