/* Kite Club Makadi — premium UI: spacing, touch targets, soft depth, brand teal + orange */

:root {
  --kcm-teal: #38b6b6;
  --kcm-teal-dark: #1f6a6a;
  --kcm-teal-mid: #2a9d9c;
  --kcm-orange: #f9a134;
  --kcm-orange-hover: #e89420;
  --kcm-radius: 6px;
  --kcm-radius-pill: 999px;
  --kcm-shadow-soft: 0 8px 32px rgba(19, 64, 64, 0.08);
  --kcm-shadow-btn: 0 4px 24px rgba(31, 106, 106, 0.18);
  --kcm-shadow-btn-hover: 0 8px 36px rgba(31, 106, 106, 0.28);
  --kcm-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Legacy Elementor kit-320 (exported CSS) still defines blue/green — map to brand */
.elementor-page,
.elementor-kit-320 {
  --e-global-color-primary: var(--kcm-teal) !important;
  --e-global-color-secondary: var(--kcm-teal-dark) !important;
  --e-global-color-accent: var(--kcm-orange) !important;
  --e-global-color-text: #4b4f58 !important;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  text-rendering: optimizeLegibility;
}

#page {
  background: linear-gradient(180deg, #fafcfb 0%, #fff 12%);
}

::selection {
  background-color: rgba(56, 182, 182, 0.28);
  color: inherit;
}

/* —— Header: clean resort-style bar (logo + nav + CTA) —— */
.site-header#masthead {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
}

.main-header-bar-wrap {
  background: #fff;
}

.main-header-bar {
  border-bottom: none !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(31, 106, 106, 0.07), 0 4px 20px rgba(19, 64, 64, 0.035) !important;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
}

@media (min-width: 921px) {
  .main-header-bar .ast-container {
    max-width: 1280px;
  }

  .main-header-container.ast-flex {
    align-items: center !important;
    gap: 0.6rem 1rem;
  }

  .site-branding {
    padding-right: 0.25rem;
  }
}

.site-branding .custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.site-branding .custom-logo-link img,
header .site-logo-img .custom-logo {
  max-height: 96px !important;
  width: auto !important;
  max-width: min(92vw, 320px) !important;
  height: auto !important;
  object-fit: contain;
}

/* Nav: editorial style — no heavy uppercase */
@media (min-width: 921px) {
  #primary-menu.main-header-menu {
    gap: 0.1rem 0.25rem;
    flex-wrap: wrap;
    justify-content: center !important;
  }

  .main-header-menu .menu-link {
    padding: 0.35rem 0.55rem !important;
    font-weight: 500 !important;
    font-size: 0.9375rem !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    color: #3d4f4f !important;
    border-radius: 6px;
    transition:
      color 0.2s ease,
      background 0.2s ease !important;
  }

  .main-header-menu .menu-link:hover,
  .main-header-menu .menu-item:hover > .menu-link {
    color: var(--kcm-teal-dark) !important;
    background: rgba(56, 182, 182, 0.08) !important;
  }

  .main-header-menu .current-menu-item > .menu-link,
  .main-header-menu .current-menu-ancestor > .menu-link {
    color: var(--kcm-teal-dark) !important;
    background: rgba(56, 182, 182, 0.12) !important;
    font-weight: 600 !important;
  }
}

/* Mobile menu button — softer */
@media (max-width: 920px) {
  .ast-mobile-menu-buttons .menu-toggle {
    border-radius: 8px !important;
    padding: 0.5rem !important;
  }
}

/* —— WhatsApp (luxury pill, 48px+ desktop / 44px mobile) —— */
.starsurf-wa-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 12px 26px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: var(--kcm-radius-pill) !important;
  border: 0 !important;
  background: linear-gradient(
    165deg,
    #5ec9c4 0%,
    var(--kcm-teal) 42%,
    var(--kcm-teal-dark) 100%
  ) !important;
  color: #fff !important;
  box-shadow: var(--kcm-shadow-btn) !important;
  transition:
    transform 0.28s var(--kcm-ease),
    box-shadow 0.28s var(--kcm-ease),
    filter 0.28s ease !important;
}

.starsurf-wa-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.03) !important;
  background: linear-gradient(
    165deg,
    #6fd4cf 0%,
    var(--kcm-teal) 45%,
    #2a9d9c 100%
  ) !important;
  box-shadow: var(--kcm-shadow-btn-hover) !important;
  color: #fff !important;
}

.starsurf-wa-btn:focus-visible {
  outline: 2px solid var(--kcm-orange) !important;
  outline-offset: 3px !important;
}

@media (max-width: 920px) {
  .starsurf-wa-btn {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  .starsurf-wa-icon svg {
    width: 1.4rem !important;
    height: 1.4rem !important;
  }
}

/* —— Elementor: all buttons — comfortable min sizes —— */
.elementor-button,
.elementor-widget-button .elementor-button {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--kcm-radius) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  transition:
    background-color 0.25s var(--kcm-ease),
    box-shadow 0.25s var(--kcm-ease),
    transform 0.25s var(--kcm-ease) !important;
}

.elementor-button.elementor-size-sm {
  min-height: 44px !important;
  padding: 12px 22px !important;
  font-size: 0.75rem !important;
}

.elementor-button.elementor-size-md,
.elementor-button:not([class*="elementor-size-"]) {
  min-height: 48px !important;
  padding: 14px 28px !important;
  font-size: 0.8125rem !important;
}

.elementor-button.elementor-size-lg {
  min-height: 52px !important;
  padding: 16px 36px !important;
  font-size: 0.875rem !important;
}

/* Hero slides — orange accent, slightly larger */
.elementor-slide-button.elementor-button,
.elementor-widget-slides .elementor-button {
  min-height: 50px !important;
  padding: 15px 34px !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background-color: var(--kcm-orange) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 28px rgba(249, 161, 52, 0.35) !important;
}

.elementor-slide-button.elementor-button:hover,
.elementor-widget-slides .elementor-button:hover {
  background-color: var(--kcm-orange-hover) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(249, 161, 52, 0.42) !important;
}

/* All primary CTAs: links + <button> (forms), every widget — teal */
a.elementor-button:not(.elementor-slide-button),
button.elementor-button:not(.elementor-slide-button) {
  background-color: var(--kcm-teal) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 24px rgba(56, 182, 182, 0.28) !important;
}

a.elementor-button:not(.elementor-slide-button) .elementor-button-text,
button.elementor-button:not(.elementor-slide-button) .elementor-button-text {
  color: #fff !important;
}

a.elementor-button:not(.elementor-slide-button):hover,
button.elementor-button:not(.elementor-slide-button):hover {
  background-color: var(--kcm-teal-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--kcm-shadow-btn-hover) !important;
}

/* Elementor Pro forms: WhatsApp submit — orange accent */
.elementor-widget-form button.elementor-button[type="submit"] {
  background-color: var(--kcm-orange) !important;
  box-shadow: 0 6px 28px rgba(249, 161, 52, 0.35) !important;
}

.elementor-widget-form button.elementor-button[type="submit"]:hover {
  background-color: var(--kcm-orange-hover) !important;
  box-shadow: 0 10px 36px rgba(249, 161, 52, 0.42) !important;
}

/* Outline / bordered Elementor buttons (higher specificity than fill rules above) */
a.elementor-button.elementor-button-outline:not(.elementor-slide-button),
button.elementor-button.elementor-button-outline:not(.elementor-slide-button),
a.elementor-button.elementor-button-border-only:not(.elementor-slide-button),
button.elementor-button.elementor-button-border-only:not(.elementor-slide-button) {
  background-color: transparent !important;
  color: var(--kcm-teal-dark) !important;
  border: 2px solid var(--kcm-teal) !important;
  box-shadow: none !important;
}

a.elementor-button.elementor-button-outline:not(.elementor-slide-button):hover,
button.elementor-button.elementor-button-outline:not(.elementor-slide-button):hover,
a.elementor-button.elementor-button-border-only:not(.elementor-slide-button):hover,
button.elementor-button.elementor-button-border-only:not(.elementor-slide-button):hover {
  background-color: rgba(56, 182, 182, 0.12) !important;
  color: var(--kcm-teal-dark) !important;
}

/* Envato block accent text — was #f4511e */
.envato-kit-66-orangetext {
  color: var(--kcm-orange) !important;
}

/* WordPress core block buttons (if present) */
:root :where(.wp-element-button, .wp-block-button__link) {
  background-color: var(--kcm-teal) !important;
  color: #fff !important;
  border-radius: var(--kcm-radius) !important;
}

:root :where(.wp-element-button, .wp-block-button__link):hover {
  background-color: var(--kcm-teal-dark) !important;
  color: #fff !important;
}

/* Contact Form 7 */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
  background-color: var(--kcm-teal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--kcm-radius) !important;
  min-height: 48px;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  transition:
    background-color 0.25s var(--kcm-ease),
    box-shadow 0.25s var(--kcm-ease);
  box-shadow: 0 6px 24px rgba(56, 182, 182, 0.28) !important;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover {
  background-color: var(--kcm-teal-dark) !important;
}

/* In-content text links (not buttons) */
.entry-content a:not(.elementor-button):not(.wp-block-button__link):not(.starsurf-wa-btn),
.elementor-widget-text-editor a:not(.elementor-button):not(.wp-block-button__link) {
  color: var(--kcm-teal-dark);
  text-decoration-color: rgba(56, 182, 182, 0.45);
  text-underline-offset: 0.15em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.entry-content a:not(.elementor-button):not(.wp-block-button__link):not(.starsurf-wa-btn):hover,
.elementor-widget-text-editor a:not(.elementor-button):not(.wp-block-button__link):hover {
  color: var(--kcm-teal);
  text-decoration-color: rgba(56, 182, 182, 0.75);
}

/* Elementor form fields — calmer focus */
.elementor-field-group .elementor-field-textual:focus,
.elementor-field-group textarea:focus,
.elementor-field-group select:focus {
  border-color: var(--kcm-teal) !important;
  box-shadow: 0 0 0 1px rgba(56, 182, 182, 0.25) !important;
  outline: none !important;
}

/* Carousel arrows — subtle brand tint on hover */
.envato-kit-66-featured-slider .elementor-slides .slick-prev:hover,
.envato-kit-66-featured-slider .elementor-slides .slick-next:hover {
  box-shadow: 0 2px 12px rgba(56, 182, 182, 0.25) !important;
}

/* —— Copy: calmer line length & rhythm —— */
.entry-content,
.elementor-widget-text-editor {
  line-height: 1.75;
}

.elementor-heading-title {
  letter-spacing: -0.02em;
}

/* —— Footer —— */
.site-footer {
  border-top: 1px solid rgba(31, 106, 106, 0.1);
}

.site-footer a {
  color: var(--kcm-teal-dark);
  text-decoration-color: rgba(56, 182, 182, 0.35);
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: var(--kcm-teal);
}