/*
Theme Name: KVPDagen
Template: twentytwentyfive
Version: 1.0.6
*/

/* Global Button Hover Styles */
.wp-block-button__link,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  transition: filter 0.3s ease;
}

.wp-block-button__link:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  filter: brightness(1.15);
}

/* Fix for Parent Theme (Twenty Twenty-Five) hover transparency issue */
/* Enforce background colors on hover so brightness filter works */

/* Default button (Accent) */
.wp-block-button__link:not(.has-background):hover,
.wp-element-button:not(.has-background):hover {
  background-color: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--white) !important;
}

/* Accent Background */
.has-accent-background-color:hover {
  background-color: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--white) !important;
}

/* Secondary Accent Background */
.has-secondary-accent-background-color:hover {
  background-color: var(--wp--preset--color--secondary-accent) !important;
  color: var(--wp--preset--color--white) !important;
}

/* Black Background */
.has-black-background-color:hover {
  background-color: var(--wp--preset--color--black) !important;
  color: var(--wp--preset--color--white) !important;
}

/* White Background */
.has-white-background-color:hover {
  background-color: var(--wp--preset--color--white) !important;
  color: var(--wp--preset--color--black) !important;
}

/* INFINITE MARQUEE STYLES */
.infinite-marquee-container {
  overflow: hidden;
}

.marquee-wrapper {
  overflow: hidden;
  user-select: none;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10px,
    black calc(100% - 10px),
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10px,
    black calc(100% - 10px),
    transparent
  );
}

/* The track contains all content and clones, and is what we animate */
.marquee-track {
  display: flex;
  width: max-content; /* Allow track to grow as wide as needed */
  gap: 0 !important; /* Ensure no gap between content sets */
  margin: 0 !important;
  padding: 0 !important;
  animation: scroll-left var(--marquee-duration, 30s) linear infinite;
}

.marquee-content {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-start;
  width: max-content !important; /* Force content to shrink to fit logos */
  max-width: none !important; /* Prevent constraints */
  margin: 0 !important; /* Remove any external margins */
  gap: 60px; /* Fixed gap between logos */
  padding-right: 60px !important; /* Gap after each content block - must match for seamless loop */
  flex-wrap: nowrap !important; /* Ensure logos never wrap */
  box-sizing: border-box !important; /* Ensure padding is included in width */
}

/* Consistent logo sizing in marquee */
.marquee-content .wp-block-image {
  flex-shrink: 0;
  width: 180px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important; /* Remove margins from images */
}

.marquee-content .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 180px;
  max-height: 100px;
}

.marquee-content figure {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive marquee logos */
@media (max-width: 768px) {
  .marquee-content {
    gap: 40px;
    padding-right: 40px !important;
  }

  .marquee-content .wp-block-image {
    width: 140px;
    height: 70px;
  }

  .marquee-content .wp-block-image img {
    max-width: 140px;
    max-height: 70px;
  }
}

@media (max-width: 480px) {
  .marquee-content {
    gap: 30px;
    padding-right: 30px !important;
  }

  .marquee-content .wp-block-image {
    width: 100px;
    height: 50px;
  }

  .marquee-content .wp-block-image img {
    max-width: 100px;
    max-height: 50px;
  }
}

/* Pause on hover */
.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--marquee-scroll-distance, -50%));
  }
}

/* Allow countdown to overflow cover block (but not image tiles) */
.wp-block-cover:has(.kvpdagen-countdown-wrapper) {
  overflow: visible !important;
}

/* Hero heading should be white */
.wp-block-cover h1,
.wp-block-cover h2 {
  color: var(--wp--preset--color--white) !important;
}

/* COUNTDOWN TIMER STYLES */
.kvpdagen-countdown {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  background-color: var(--wp--preset--color--secondary-accent);
  color: var(--wp--preset--color--white);
  padding: 32px;
  font-family: var(--wp--preset--font-family--mona-sans);
  line-height: 1;
  border-radius: 20px;
}

.kvpdagen-countdown .countdown-label {
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.kvpdagen-countdown .countdown-timer {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 800;
  font-size: 2.5rem;
}

.kvpdagen-countdown .countdown-segment {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.kvpdagen-countdown .countdown-value {
  font-variant-numeric: tabular-nums;
}

.kvpdagen-countdown .countdown-unit {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.8;
}

.kvpdagen-countdown .countdown-separator {
  opacity: 0.6;
  font-weight: 400;
  margin: 0 2px;
}

/* Position countdown in bottom corner when inside cover block */
.wp-block-cover .kvpdagen-countdown-wrapper {
  position: absolute;
  bottom: -80px;
  right: var(--wp--preset--spacing--50, 24px);
  z-index: 10;
}

/* Responsive adjustments */
@media (max-width: 890px) {
  .wp-block-cover .kvpdagen-countdown-wrapper {
    bottom: -60px;
  }
  .kvpdagen-countdown {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .kvpdagen-countdown .countdown-timer {
    font-size: 1.75rem;
  }

  .kvpdagen-countdown .countdown-label {
    font-size: 0.8rem;
  }

  .kvpdagen-countdown .countdown-unit {
    font-size: 0.75rem;
  }
}

@media (max-width: 600px) {
  .kvpdagen-countdown {
    padding: 16px 20px;
  }

  /* Reset countdown position on mobile */
  .wp-block-cover .kvpdagen-countdown-wrapper {
    position: relative;
    bottom: 0;
    right: auto;
  }
}

/* ========================================
   KVP REUSABLE COMPONENT STYLES
   Change these to update all patterns globally
   ======================================== */

/* Section padding - standard vertical spacing for full-width sections */
.kvp-section-padding {
  padding-top: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--50);
  margin-top: 0;
  margin-bottom: 0;
}

/* Feature image - rounded corners with cover fit */
.kvp-feature-image img {
  border-radius: 25px;
  aspect-ratio: 1;
  object-fit: cover;
}

.kvp-feature-image {
  margin-top: 0;
  margin-bottom: 0;
}

/* Column gap - standard spacing between columns */
.kvp-column-gap {
  gap: var(--wp--preset--spacing--50);
}

/* Text column gap - tighter spacing for text content */
.kvp-text-column-gap {
  gap: var(--wp--preset--spacing--40);
}

/* CARD STYLES */
/* Flex card container to push button to bottom */
.kvp-flex-card .wp-block-group {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--wp--preset--spacing--30);
}

.kvp-flex-card .wp-block-group > p {
  flex-grow: 1;
  margin-bottom: 0 !important; /* Ensure margin doesn't fight with gap */
}

.kvp-flex-card .wp-block-buttons {
  margin-top: auto;
}

/* Image tile hover */
.kvp-image-tile {
  overflow: hidden !important; /* Ensure rounded corners clip the image */
  position: relative; /* Anchor for the link */
  border-radius: 25px !important; /* Ensure main container has rounded corners */
}

/* Ensure all child elements respect the container's border-radius */
.kvp-image-tile img,
.kvp-image-tile .wp-block-cover__image-background {
  border-radius: inherit !important;
}

/* The overlay span needs explicit rounding since it's absolutely positioned */
.kvp-image-tile .wp-block-cover__background {
  border-radius: 25px !important;
}

.kvp-image-tile .wp-block-cover__inner-container {
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
  transform: translateY(0);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: relative;
  pointer-events: none; /* Let clicks pass through to the link */
}

.kvp-image-tile:hover .wp-block-cover__inner-container {
  transform: translateY(10px);
  opacity: 0.7;
}

.kvp-image-tile-heading {
  margin: 0;
  text-align: center;
  width: 100%;
}

.kvp-image-tile-link {
  color: var(--wp--preset--color--white);
  text-decoration: none;
  pointer-events: auto; /* Re-enable clicks on the link itself */
}

/* Stretched link to cover the whole tile */
.kvp-image-tile-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.kvp-image-tile-link:hover {
  text-decoration: none;
  color: var(--wp--preset--color--white);
}

/* LOGO WALL STYLES */
.logo-wall-image a {
  display: block;
  transition: opacity 0.3s ease;
}

.logo-wall-image a:hover {
  opacity: 0.7;
}

/* ========================================
   GRAVITY FORMS STYLING
   ======================================== */

/* Wrapper & General Text */
.gform_wrapper {
  margin-bottom: var(--wp--preset--spacing--50);
}

.gform_wrapper,
.gform_wrapper * {
  font-family: var(--wp--preset--font-family--mona-sans) !important;
}

.gform_wrapper .gform_heading {
  margin-bottom: var(--wp--preset--spacing--40);
}

.gform_wrapper .gform_title {
  color: var(--wp--preset--color--white) !important;
  font-weight: 900 !important;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.gform_wrapper .gform_description {
  color: var(--wp--preset--color--off-white);
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.gform_wrapper .gfield_label {
  color: var(--wp--preset--color--white) !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem;
  font-size: 1rem !important;
}

.gform_wrapper .gfield_required {
  color: rgba(255, 255, 255, 0.8) !important;
  margin-left: -1px;
  font-weight: 400;
  font-size: 1rem !important;
}

/* Inputs & Textareas */
.gform_wrapper
  input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not(
    [type="button"]
  ):not([type="image"]):not([type="file"]),
.gform_wrapper textarea,
.gform_wrapper select {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  color: var(--wp--preset--color--white) !important;
  padding: 16px !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  transition: all 0.3s ease;
  width: 100%;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  border-color: var(--wp--preset--color--accent) !important;
  outline: none;
  background-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 0 2px rgba(127, 77, 184, 0.2);
}

/* Placeholders */
.gform_wrapper ::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Complex Fields (Name, Address) */
.gform_wrapper .ginput_complex label {
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  opacity: 0.8;
  margin-top: 4px;
  color: var(--wp--preset--color--off-white) !important;
}

/* Checkboxes & Radios */
.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.gform_wrapper .gfield_checkbox input[type="checkbox"],
.gform_wrapper .gfield_radio input[type="radio"] {
  margin-top: 0 !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  accent-color: var(--wp--preset--color--accent);
}

.gform_wrapper .gfield_radio input[type="radio"] {
  border-radius: 50% !important;
}

.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label {
  color: var(--wp--preset--color--white) !important;
  margin-left: 10px;
  font-weight: 400 !important;
  font-size: 1rem !important;
}

/* Section Breaks */
.gform_wrapper .gsection_title {
  color: var(--wp--preset--color--white) !important;
  font-weight: 900 !important;
  margin-top: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}

/* Submit Button */
.gform_wrapper .gform_footer {
  margin-top: 2rem;
  padding-top: 0;
}

.gform_wrapper .gform_footer input[type="submit"] {
  background-color: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--white) !important;
  border: none;
  border-radius: 50px !important; /* Pill shape */
  padding: 16px 48px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  width: 100%; /* Full width on mobile default */
  max-width: 100%;
  transition:
    filter 0.3s ease,
    transform 0.2s ease;
}

@media (min-width: 600px) {
  .gform_wrapper .gform_footer input[type="submit"] {
    width: auto;
  }
}

.gform_wrapper .gform_footer input[type="submit"]:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

/* Validation Errors */
.gform_wrapper .gform_validation_errors {
  background-color: var(--wp--preset--color--off-white) !important;
}

.gform_wrapper .gfield_error .gfield_label {
  color: var(--wp--preset--color--secondary-accent) !important;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: var(--wp--preset--color--secondary-accent) !important;
  background-color: rgba(184, 109, 77, 0.05) !important;
}

.gform_wrapper .validation_message {
  color: var(--wp--preset--color--secondary-accent) !important;
  font-weight: 500;
  margin-top: 6px;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.9rem;
}

/* Description */
.gform_wrapper .gfield_description {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.9rem;
  margin-top: 6px;
}

/* Consent field specifically */
.gform_wrapper .gfield_consent_description {
  color: var(--wp--preset--color--off-white);
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 15px;
  font-size: 0.9em;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Fix spacing between fields */
.gform_wrapper .gfield {
  margin-bottom: 24px;
}

/* Consent Field Label */
.gform_wrapper .gfield_consent_label {
  color: var(--wp--preset--color--white) !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  margin-left: 8px; /* Spacing from checkbox */
  cursor: pointer;
}

/* Consent Field Checkbox - ensure it matches other checkboxes */
.gform_wrapper .ginput_container_consent input[type="checkbox"] {
  margin-top: 0 !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  accent-color: var(--wp--preset--color--accent);
}

/* Flex container for consent checkbox and label alignment */
.gform_wrapper .ginput_container_consent {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

/* Error Color Variable Definition */
:root {
  --wp--preset--color--error: #ff6b6b; /* Visible red against dark background */
}

/* Updated Validation Errors using new Error Color */
.gform_wrapper .gform_validation_errors {
  background-color: rgba(255, 107, 107, 0.1) !important;
  border: 1px solid var(--wp--preset--color--error) !important;
}

.gform_wrapper .gform_validation_errors h2 {
  color: var(--wp--preset--color--error) !important;
}

.gform_wrapper .gfield_error .gfield_label {
  color: var(--wp--preset--color--error) !important;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: var(--wp--preset--color--error) !important;
  background-color: rgba(255, 107, 107, 0.05) !important;
}

.gform_wrapper .validation_message {
  color: var(--wp--preset--color--error) !important;
}

/* Error Links */
.gform_wrapper .gform_validation_errors ol a,
.gform-theme--framework .gform_validation_errors ol a {
  color: var(--wp--preset--color--error) !important;
  text-decoration: underline;
}

.gform_wrapper .gform_validation_errors ol a:hover,
.gform-theme--framework .gform_validation_errors ol a:hover {
  color: var(--wp--preset--color--white) !important;
  text-decoration: none;
}

/* Force focus state for all text inputs to use purple accent */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper input[type="search"]:focus,
.gform_wrapper
  input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not(
    [type="button"]
  ):not([type="image"]):not([type="file"]):focus {
  border-color: var(--wp--preset--color--accent) !important;
  outline: none !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 0 2px rgba(127, 77, 184, 0.2) !important;
}

/* Override Gravity Forms gap variable */
.gform-theme--api,
.gform-theme--foundation,
.gform_wrapper {
  --gf-form-gap-y: 10px !important;
}

/* Complex field labels should have margin */
.gform_wrapper .gfield_label.gfield_label_before_complex,
.gform_wrapper .gfield_label.gform-field-label.gfield_label_before_complex {
  margin-bottom: 8px !important;
}

/* Focus state for checkboxes and radios */
.gform_wrapper .gfield_checkbox input[type="checkbox"]:focus,
.gform_wrapper .gfield_radio input[type="radio"]:focus {
  border-color: var(--wp--preset--color--accent) !important;
  box-shadow: 0 0 0 2px rgba(127, 77, 184, 0.2) !important;
  outline: none !important;
}

/* Checked state border override (to match accent color if not handled by accent-color) */
.gform_wrapper .gfield_checkbox input[type="checkbox"]:checked,
.gform_wrapper .gfield_radio input[type="radio"]:checked {
  border-color: var(--wp--preset--color--accent) !important;
  background-color: var(--wp--preset--color--accent) !important;
}

/* Footer Styling */
footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================
   NAVIGATION & MOBILE MENU
   Only apply styles when menu overlay is open
   ======================================== */

/* Header buttons - hide on mobile when hamburger is shown */
@media (max-width: 600px) {
  /* Hide the buttons group next to navigation on mobile */
  header .wp-block-group .wp-block-buttons,
  .has-black-background-color
    > .wp-block-group
    > .wp-block-group
    > .wp-block-group
    .wp-block-buttons {
    display: none !important;
  }

  /* Make site logo smaller on mobile */
  header .wp-block-site-logo img,
  .has-black-background-color .wp-block-site-logo img {
    max-width: 160px !important;
    height: auto !important;
  }
}

/* Show header buttons inside mobile menu overlay */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-button {
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Mobile menu overlay container */
.wp-block-navigation__responsive-container.is-menu-open {
  padding-top: var(--wp--preset--spacing--30) !important;
  padding-bottom: var(--wp--preset--spacing--30) !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  padding-left: var(--wp--preset--spacing--30) !important;
  padding-right: var(--wp--preset--spacing--30) !important;
  gap: 8px !important;
  align-items: flex-start !important;
}

/* Reset default list styles in mobile menu */
.wp-block-navigation__responsive-container.is-menu-open
  ul.wp-block-navigation__container {
  padding-left: 0 !important;
  margin-left: 0 !important;
  gap: 16px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Mobile menu items */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  text-align: left !important;
  padding-left: 0 !important;
  font-size: 1rem !important;
}

/* Main Menu Items (Top Level) - bold */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  font-weight: 700 !important;
}

/* Sub Menu Items - regular weight */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu
  .wp-block-navigation-item__content {
  font-weight: 400 !important;
  opacity: 0.9;
}

/* Submenu container spacing */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  padding-left: 16px !important;
  gap: 4px !important;
  margin-top: 2px !important;
}

/* Close button positioning */
.wp-block-navigation__responsive-container-close {
  top: var(--wp--preset--spacing--30) !important;
  right: var(--wp--preset--spacing--30) !important;
}

/* Remove focus/active borders on mobile menu items */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:focus,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:focus-within,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:active,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:focus,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu:focus,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu:focus-within {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}