/**
 * Must Have Cookie Consent – Theme Overrides
 *
 * Custom styles for the "Must Have Cookie Consent" plugin,
 * integrating the cookie banner and preferences modal with
 * the Tecology FSE theme's design tokens (colours, spacing,
 * border-radius, etc.).
 *
 * This stylesheet is enqueued with the plugin's own CSS as a
 * dependency, so it always loads afterwards and our rules win
 * by cascade order (plus specificity / !important where needed).
 *
 * Sections:
 *   1. Preferences Modal
 *   2. Cookie Banner
 *   3. Cookie Preferences Toggle Widget
 */

/* =========================================================================
   1. PREFERENCES MODAL
   ========================================================================= */

/* Prevent background content from scrolling while the modal is open */
html.mhcookie-scroll-lock,
body.mhcookie-scroll-lock {
  overflow: hidden !important;
  touch-action: none;
  position: fixed;
  inset: 0;
  width: 100%;
}

/* Fix WordPress-inherited label width interfering with checkbox layout */
label {
  width: auto !important;
}

.mhcookie-preferences-toggle {
  z-index: 10 !important;
}

/* --- Modal Container ---------------------------------------------------- */

.mhcookie-box {
  border: 1px solid var(--wp--preset--color--borderline) !important;
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}

/* On small screens the modal fills the viewport */
@media (max-width: 425px) {
  .mhcookie-box {
    height: 98vh;
    border-radius: 0px;
    border-width: 0px !important;
  }

  .mhcookie-details-wrapper {
    height: 430px !important;
    max-height: 58vh !important;
  }
}

/* --- Modal Title -------------------------------------------------------- */

#mhcookie-dialog-title {
  color: var(--wp--preset--color--contrast);
}

/* --- Scrollable Details Area -------------------------------------------- */

.mhcookie-details-wrapper {
  height: 320px;
  max-height: 50vh;
  overflow-y: scroll;
  padding-bottom: 0px;
  overflow-x: clip;
}

/* Remove extra top margin from the button row */
.mhcookie-buttons {
  margin-top: 0px;
}

/* Fade-out gradient at the bottom of the scrollable area */
.mhcookie-details-after {
  background: linear-gradient(
    0deg,
    var(--wp--preset--color--base) 0%,
    transparent 100%
  );
}

/* --- Links & Details Toggle --------------------------------------------- */

.mhcookie-group-show-details,
.mhcookie-privacy-policy-wrapper a {
  color: var(--wp--preset--color--accent) !important;
}

/* --- Checkboxes --------------------------------------------------------- */

/* Dim the checkbox when the toggle is disabled / locked */
[disabled] + .mhcookie-pseudo-checkbox {
  filter: opacity(0.5);
  opacity: 1;
}

/* Checked state uses the theme accent colour */
:checked + .mhcookie-pseudo-checkbox {
  background: var(--wp--preset--color--accent) !important;
  border-color: var(--wp--preset--color--accent) !important;
}

/* --- Close Button ------------------------------------------------------- */

.mhcookie-close {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 20px;
  right: 20px;
  width: 24px;
  height: 24px;
  padding: 3px;
  border-radius: 100%;
  cursor: pointer;
  background: var(--wp--preset--color--base-2);
  border: none;
  color: var(--wp--preset--color--contrast);
  font-size: 0; /* hides default × text but keeps it clickable */
  line-height: 1;
  transition: transform 0.3s ease;
}

.mhcookie-close:hover {
  transform: rotate(90deg);
  border-radius: 100%;
  color: var(--wp--preset--color--accent);
}

/* Replace the default × with an inline SVG mask icon */
.mhcookie-close::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.2218 13.6066L20 21.3848L21.4142 19.9706L13.636 12.1924L21.3848 4.44366L19.9706 3.02945L12.2218 10.7782L4.44365 3L3.02944 4.41421L10.8076 12.1924L3 20L4.41421 21.4142L12.2218 13.6066Z'/%3E%3C/svg%3E")
    no-repeat center / contain;
  background-color: var(--wp--preset--color--contrast);
}

/* --- Group Details Divider ---------------------------------------------- */

.mhcookie-group-show-details {
  border-top: solid 1px var(--wp--preset--color--borderline);
  padding: 5px;
  margin-top: 10px;
  width: 100%;
  text-align: center;
  border-bottom: solid 1px var(--wp--preset--color--borderline);
}

/* --- Backdrop ----------------------------------------------------------- */

.mhcookie-dialog-wrapper {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
}

/* Keep primary button text white on all interactive states */
.mhcookie-btn-primary:hover,
.mhcookie-btn-primary:active,
.mhcookie-btn-primary:focus {
  color: #fff;
  opacity: 1;
}

/* =========================================================================
   2. COOKIE BANNER
   ========================================================================= */

/* --- Banner Container --------------------------------------------------- */

.mhcookie-banner {
  background-color: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--borderline) !important;
  color: var(--wp--preset--color--contrast);
  border-radius: 10px;
  width: 300px;
  min-width: 0px !important;
  padding: 20px;
  margin: var(--wp--preset--spacing--10);
  bottom: 0 !important;
  gap: 14px;
  z-index: 1 !important;
}

/*
 * Override the plugin's data-position rules at matching specificity.
 * The plugin uses [data-position] attribute selectors (specificity 0,2,0)
 * which beat our plain .mhcookie-banner (0,1,0). By repeating the same
 * selectors here we match specificity and win by cascade order.
 */
.mhcookie-banner[data-position='bottom-left'],
.mhcookie-banner[data-position='bottom-right'] {
  width: 300px;
  min-width: 0px !important;
  bottom: 0 !important;
  margin: var(--wp--preset--spacing--10);
  border-radius: 10px;
}

.mhcookie-banner[data-position='bottom-left'] {
  left: 0px !important;
}

.mhcookie-banner[data-position='bottom-right'] {
  right: 0px !important;
}

/* Ensure text spans the full width of the compact banner */
.mhcookie-banner .mhcookie-text {
  min-width: 100% !important;
}

/* Bold text acts as the banner heading */
.mhcookie-text b {
  display: block;
  margin-bottom: 10px !important;
  font-size: 16px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--wp--preset--color--borderline) !important;
}

/* Constrain the logo width inside the dialog */
.mhcookie-dialog-logo-wrapper img {
  max-width: 200px;
}

/* --- Banner Responsive Sizing ------------------------------------------- */

@media (min-width: 992px) {
  .mhcookie-banner,
  .mhcookie-banner[data-position='bottom-left'],
  .mhcookie-banner[data-position='bottom-right'] {
    width: 300px;
    min-width: 0px !important;
  }
}

@media (max-width: 768px) {
  .mhcookie-banner {
    width: 300px;
  }
}

/* Full-width bottom sheet on the smallest screens */
@media (max-width: 425px) {
  .mhcookie-banner {
    width: unset !important;
    margin: 0px !important;
    border-radius: 20px 20px 0px 0px !important;
  }
}

/* Full-width buttons on tablet and above */
@media (min-width: 768px) {
  .mhcookie-banner .mhcookie-btn {
    width: 100%;
  }
}

/* --- Button Base Styles ------------------------------------------------- */

.mhcookie-banner .mhcookie-btn,
.mhcookie-btn {
  border-radius: var(--button-border-radius) !important;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: var(--button-padding-y);
  padding-bottom: var(--button-padding-y);
}

/* --- Accept All — Primary, solid accent --------------------------------- */

.mhcookie-btn.mhcookie-accept-all {
  background-color: var(--wp--preset--color--accent) !important;
  color: white !important;
  border-color: var(--wp--preset--color--accent) !important;
  transition: all 0.3s ease;
}

.mhcookie-banner .mhcookie-btn.mhcookie-accept-all {
  width: 100% !important;
}

.mhcookie-btn.mhcookie-accept-all:hover {
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 90%,
    white
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 90%,
    white
  ) !important;
}

/* --- Essential Only — Secondary, solid muted background ----------------- */

.mhcookie-btn.mhcookie-accept-required {
  background-color: var(--wp--preset--color--base-2) !important;
  color: var(--wp--preset--color--contrast) !important;
  border-color: var(--wp--preset--color--borderline) !important;
  transition: all 0.3s ease;
}

.mhcookie-banner .mhcookie-btn.mhcookie-accept-required {
  width: 100% !important;
}

.mhcookie-btn.mhcookie-accept-required:hover {
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 90%,
    white
  ) !important;
  color: white !important;
  border-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 90%,
    white
  ) !important;
}

/* --- Save Preferences — Tertiary, outline only -------------------------- */

.mhcookie-btn.mhcookie-save {
  background-color: transparent !important;
  color: var(--wp--preset--color--contrast) !important;
  border-color: var(--wp--preset--color--borderline) !important;
  transition: all 0.3s ease;
}

.mhcookie-btn.mhcookie-save:hover {
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 90%,
    white
  ) !important;
  color: white !important;
  border-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 90%,
    white
  ) !important;
}

/* --- "Show Dialog" (Preferences) Button --------------------------------- */

.mhcookie-banner .mhcookie-show-dialog {
  color: var(--wp--preset--color--contrast);
  transition: all 0.3s ease;
  border-color: var(--wp--preset--color--borderline);
}

.mhcookie-banner .mhcookie-show-dialog {
  width: 100% !important;
}

.mhcookie-banner .mhcookie-show-dialog:hover {
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 90%,
    white
  ) !important;
  color: white;
  transition: all 0.3s ease;
  border-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 90%,
    white
  ) !important;
}

/* Prevent opacity flash on interactive states */
.mhcookie-banner .mhcookie-btn:hover,
.mhcookie-banner .mhcookie-btn:active,
.mhcookie-banner .mhcookie-btn:focus {
  opacity: 1 !important;
}

/* =========================================================================
   3. COOKIE PREFERENCES TOGGLE WIDGET
   ========================================================================= */

.mhcookie-preferences-toggle {
  color: var(--wp--preset--color--accent);
}

/* Hide the floating toggle on mobile to avoid overlapping content */
@media (max-width: 425px) {
  .mhcookie-preferences-toggle {
    display: none !important;
    visibility: hidden !important;
  }
}