/*
 * Cookie consent card, Matica.
 *
 * Restyles the Cookie Notice plugin (cookie-notice/css/front.css) from its
 * default full width grey bar into a floating rounded card in the Matica
 * palette: maroon #953132 for the primary action, navy #133447 for text.
 *
 * The bar and text colours are also set in wp-admin under Cookie Notice >
 * Design (bar #ffffff, text #133447) so the inline styles the plugin prints
 * on the markup match this card.
 *
 * Loaded on the front end and on the Password Protected login screen, since
 * the consent card renders on both. Selectors are prefixed with html so they
 * win over the plugin stylesheet whatever the enqueue order is.
 */

html #cookie-notice {
  --cn-red: #953132;
  --cn-red-dark: #7b2728;
  --cn-navy: #133447;
  --cn-line: rgba(19, 52, 71, 0.22);

  min-width: 0;
  width: auto;
  max-width: 460px;
  left: 24px;
  right: auto;
  background: #fff !important;
  color: var(--cn-navy);
  border-radius: 14px;
  box-shadow: 0 20px 48px -14px rgba(19, 52, 71, 0.38),
    0 2px 6px rgba(19, 52, 71, 0.06);
  overflow: hidden;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0;
}
html #cookie-notice.cn-position-bottom {
  bottom: 24px;
}
html #cookie-notice.cn-position-top {
  top: 24px;
}
/* brand strip across the top of the card */
html #cookie-notice:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cn-red) 0%, var(--cn-navy) 100%);
}
html #cookie-notice .cookie-notice-container,
html #cookie-notice .cookie-revoke-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  padding: 22px 24px 20px;
  text-align: left;
  color: var(--cn-navy) !important;
}
/* message text with cookie mark */
html #cookie-notice #cn-notice-text {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0;
  padding-right: 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cn-navy);
}
html #cookie-notice #cn-notice-text:before {
  content: "";
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgba(149, 49, 50, 0.09);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23953132' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='9' cy='9.4' r='1.15' fill='%23953132' stroke='none'/%3E%3Ccircle cx='15.3' cy='10.5' r='1.15' fill='%23953132' stroke='none'/%3E%3Ccircle cx='10.3' cy='15.3' r='1.15' fill='%23953132' stroke='none'/%3E%3Ccircle cx='14.8' cy='15' r='1' fill='%23953132' stroke='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px 19px;
}
/* buttons row */
html #cookie-notice #cn-notice-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 12px;
  margin: 0;
}
html #cookie-notice #cn-notice-buttons .cn-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1px;
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
html #cookie-notice #cn-notice-buttons #cn-accept-cookie {
  background: var(--cn-red);
  border-color: var(--cn-red);
  color: #fff;
  box-shadow: 0 2px 8px rgba(149, 49, 50, 0.26);
}
html #cookie-notice #cn-notice-buttons #cn-accept-cookie:hover,
html #cookie-notice #cn-notice-buttons #cn-accept-cookie:focus-visible {
  background: var(--cn-red-dark);
  border-color: var(--cn-red-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(149, 49, 50, 0.3);
}
html #cookie-notice #cn-notice-buttons #cn-refuse-cookie {
  background: transparent;
  border-color: var(--cn-line);
  color: var(--cn-navy);
}
html #cookie-notice #cn-notice-buttons #cn-refuse-cookie:hover,
html #cookie-notice #cn-notice-buttons #cn-refuse-cookie:focus-visible {
  background: rgba(19, 52, 71, 0.06);
  border-color: rgba(19, 52, 71, 0.28);
  color: var(--cn-navy);
}
/* the policy link reads as part of the message, so the final row is
   just the two consent actions */
html #cookie-notice #cn-notice-buttons #cn-more-info {
  order: -1;
  flex: 1 1 100%;
  justify-content: flex-start;
  margin: -8px 0 0 47px;
  padding: 0;
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--cn-red);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(149, 49, 50, 0.35);
  text-underline-offset: 3px;
}
html #cookie-notice #cn-notice-buttons #cn-more-info:hover,
html #cookie-notice #cn-notice-buttons #cn-more-info:focus-visible {
  background: none;
  color: var(--cn-red-dark);
  text-decoration-color: currentColor;
  transform: none;
}
html #cookie-notice #cn-notice-buttons .cn-button:focus-visible {
  outline: 2px solid var(--cn-navy);
  outline-offset: 2px;
}
/* close (x) control */
html #cookie-notice .cn-close-icon {
  top: 18px;
  right: 15px;
  margin: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  opacity: 1;
  transition: background-color 0.18s ease;
}
html #cookie-notice .cn-close-icon:hover {
  background: rgba(19, 52, 71, 0.07);
}
html #cookie-notice .cn-close-icon:before,
html #cookie-notice .cn-close-icon:after {
  top: 7px;
  left: 12.2px;
  width: 1.6px;
  height: 12px;
  border-radius: 1px;
  background-color: rgba(19, 52, 71, 0.5);
}
html #cookie-notice .cn-close-icon:hover:before,
html #cookie-notice .cn-close-icon:hover:after {
  background-color: var(--cn-red);
}
html #cookie-notice .cn-close-icon:focus-visible {
  outline: 2px solid var(--cn-navy);
  outline-offset: 1px;
}
@media only screen and (max-width: 640px) {
  html #cookie-notice {
    left: 12px;
    right: 12px;
    max-width: none;
    border-radius: 12px;
  }
  html #cookie-notice.cn-position-bottom {
    bottom: 12px;
  }
  html #cookie-notice.cn-position-top {
    top: 12px;
  }
  html #cookie-notice .cookie-notice-container,
  html #cookie-notice .cookie-revoke-container {
    gap: 14px;
    padding: 20px 18px 18px;
  }
  html #cookie-notice #cn-notice-text {
    font-size: 13.5px;
  }
  html #cookie-notice #cn-notice-buttons {
    gap: 8px;
  }
  html #cookie-notice #cn-notice-buttons #cn-accept-cookie,
  html #cookie-notice #cn-notice-buttons #cn-refuse-cookie {
    flex: 1 1 auto;
  }
  html #cookie-notice #cn-notice-buttons #cn-more-info {
    margin-left: 47px;
  }
}