/* Sitewide styling enhancements for Kadence theme. */

:root {
  /* Shared brand palette – driven by Kadence global palette settings. */
  --kdv-primary: var(--global-palette1, #48a888);
  --kdv-secondary: var(--global-palette2, #684088);
  --kdv-primary-light: color-mix(in srgb, var(--kdv-primary) 70%, white);
  --kdv-primary-dark: color-mix(in srgb, var(--kdv-primary) 70%, black);
  --kdv-secondary-light: color-mix(in srgb, var(--kdv-secondary) 70%, white);
  --kdv-secondary-dark: color-mix(in srgb, var(--kdv-secondary) 70%, black);
  --kdv-cta-gradient: linear-gradient(135deg, var(--kdv-primary-light), var(--kdv-primary-dark));
  --kdv-secondary-gradient: linear-gradient(135deg, var(--kdv-secondary-light), var(--kdv-secondary-dark));
  --kdv-surface-gradient: linear-gradient(
    135deg,
    color-mix(in srgb, var(--kdv-primary) 10%, transparent),
    color-mix(in srgb, var(--kdv-primary) 8%, transparent)
  );
  --kdv-surface-gradient-alt: linear-gradient(
    135deg,
    color-mix(in srgb, var(--kdv-secondary) 10%, transparent),
    color-mix(in srgb, var(--kdv-secondary) 8%, transparent)
  );
  --kdv-border: color-mix(in srgb, var(--kdv-secondary) 22%, transparent);
  --kdv-border-strong: color-mix(in srgb, var(--kdv-primary) 55%, transparent);

  /* Gutenberg preset alignment (used by content blocks). */
  --wp--preset--color--light-green-cyan: var(--global-palette7);
}

body {
  background:
    radial-gradient(1000px 700px at 12% -10%, color-mix(in srgb, var(--kdv-secondary) 16%, transparent), transparent 55%),
    radial-gradient(900px 650px at 88% 0%, color-mix(in srgb, var(--kdv-primary) 12%, transparent), transparent 55%),
    var(--global-palette8);
}

/* Mobile: reduce overly-wide side gutters (Kadence containers + Gutenberg group padding). */
@media (max-width: 782px) {
  :root {
    --global-content-edge-padding: 8px;
  }

  .content-container,
  .site-container,
  .entry-content-wrap,
  .wp-site-blocks {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Override inline padding on all Gutenberg group blocks. */
  .entry-content-wrap .wp-block-group[style*="padding-left"],
  .entry-content-wrap .wp-block-group[style*="padding-right"],
  .wp-site-blocks .wp-block-group[style*="padding-left"],
  .wp-site-blocks .wp-block-group[style*="padding-right"],
  .single-content .wp-block-group[style*="padding-left"],
  .single-content .wp-block-group[style*="padding-right"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Nested inner containers also need reduced padding. */
  .entry-content-wrap .wp-block-group .wp-block-group[style*="padding-left"],
  .entry-content-wrap .wp-block-group .wp-block-group[style*="padding-right"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Cards inside columns: keep some internal padding. */
  .wp-block-column .wp-block-group[style*="padding"] {
    padding: 14px !important;
  }
}

/* Homepage: hide redundant Kadence entry title/hero section. */
body.home .entry-hero.page-hero-section {
  display: none !important;
}

body.home .content-area {
  margin-top: 2.5rem;
}

/* Force hamburger navigation on all screen sizes (use Kadence mobile drawer). */
/* Kadence renders separate desktop + mobile header wrappers; show mobile header everywhere. */
#main-header.site-header-wrap {
  display: none !important;
}

#mobile-header.site-mobile-header-wrap {
  display: block !important;
}

.site-header-item-main-navigation {
  display: none !important;
}

/* Floating hamburger menu button - fixed position so it's always accessible. */
.site-header-item-navgation-popup-toggle {
  position: fixed !important;
  top: 20px;
  right: 20px;
  z-index: 999;
  display: flex !important;
  align-items: center;
}

.site-header-item-navgation-popup-toggle .menu-toggle-open {
  display: inline-flex !important;
}

/* Header toggle button: visually align with the rest of the UI. */
.site-header-item-navgation-popup-toggle .menu-toggle-open,
.site-header-item-navgation-popup-toggle .menu-toggle-close {
  border-radius: 999px !important;
  border: 1px solid var(--kdv-border) !important;
  background: color-mix(in srgb, var(--global-palette9, #ffffff) 92%, transparent) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--global-palette4) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.site-header-item-navgation-popup-toggle .menu-toggle-open:hover,
.site-header-item-navgation-popup-toggle .menu-toggle-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.16), 0 2px 4px rgba(15, 23, 42, 0.08);
}

.site-header-item-navgation-popup-toggle .menu-toggle-open:focus-visible,
.site-header-item-navgation-popup-toggle .menu-toggle-close:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--kdv-primary) 16%, transparent),
    0 4px 20px rgba(15, 23, 42, 0.12);
}

/* Logo in top-left: size it and hide the text title visually. */
.site-branding .custom-logo,
.site-branding.mobile-site-branding .custom-logo {
  filter: none !important;
  width: auto !important;
  height: 52px !important;
  max-height: 52px !important;
  max-width: none !important;
}

.site-branding .site-title,
.site-branding .site-title a {
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--kdv-primary-light), var(--kdv-secondary-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.site-branding .site-title-wrap,
.site-branding.mobile-site-branding .site-title-wrap {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 1025px) {
  .site-branding .custom-logo {
    height: 76px !important;
    max-height: 76px !important;
  }
}

/* "Green" callout blocks: map to our light surface gradient. */
.has-light-green-cyan-background-color {
  background: var(--kdv-surface-gradient) !important;
}

.wp-block-group.has-light-green-cyan-background-color {
  border: 1px solid color-mix(in srgb, var(--kdv-primary) 18%, transparent);
}

/* Contact Form 7 (Kadence-friendly). */
.wpcf7 {
  margin-top: 10px;
}

.wpcf7 form.wpcf7-form {
  display: grid;
  gap: 12px;
  max-width: 720px;
}

.wpcf7 form.wpcf7-form label {
  display: grid;
  gap: 6px;
  font-weight: 650;
  color: var(--global-palette4);
}

.wpcf7 form.wpcf7-form input[type="text"],
.wpcf7 form.wpcf7-form input[type="email"],
.wpcf7 form.wpcf7-form textarea {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--kdv-border);
  background: color-mix(in srgb, var(--global-palette9, #ffffff) 92%, transparent);
  color: var(--global-palette4);
  outline: none;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.wpcf7 form.wpcf7-form textarea {
  min-height: 150px;
  resize: vertical;
}

.wpcf7 form.wpcf7-form input:focus,
.wpcf7 form.wpcf7-form textarea:focus {
  border-color: var(--kdv-border-strong);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kdv-primary) 14%, transparent);
}

.wpcf7 form.wpcf7-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
  color: #b91c1c;
}

.wpcf7 form.wpcf7-form .wpcf7-response-output {
  margin: 8px 0 0;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--kdv-border);
  background: color-mix(in srgb, var(--global-palette9, #ffffff) 82%, transparent);
  color: var(--global-palette4);
}

/* =========================================================================
   POPUP DRAWER / MOBILE NAVIGATION
   Light theme colors only - let Kadence handle layout/animation.
   ========================================================================= */

/* Drawer inner - white background, constrained width */
#mobile-drawer .drawer-inner {
  background: #ffffff !important;
  max-width: 320px !important;
}

/* Drawer header */
#mobile-drawer .drawer-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--kdv-border) !important;
}

/* Close button */
#mobile-drawer .menu-toggle-close {
  color: var(--global-palette4) !important;
}

/* Drawer content */
#mobile-drawer .drawer-content {
  background: #ffffff !important;
}

/* Overlay backdrop */
#mobile-drawer .drawer-overlay {
  background: rgba(15, 23, 42, 0.3) !important;
}

/* Menu links - DARK text on light background */
#mobile-drawer .mobile-navigation ul li > a,
#mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
  color: var(--global-palette4) !important;
  border-bottom: 1px solid var(--kdv-border) !important;
}

#mobile-drawer .mobile-navigation ul li > a:hover {
  color: var(--kdv-primary) !important;
}

/* Current page */
#mobile-drawer .mobile-navigation ul li.current-menu-item > a {
  color: var(--kdv-primary) !important;
}

/* Dropdown toggle button */
#mobile-drawer .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap button {
  color: var(--global-palette5) !important;
  border-left: 1px solid var(--kdv-border) !important;
}

/* Language switcher spacing */
#mobile-drawer .menu-item.kdv-lang-switcher {
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--kdv-border) !important;
}