/* ==========================================================================
   Maya's Kitchen – WordPress & Elementor integration styles
   (brand styles live in styles.css, layout comes from Tailwind CDN)
   ========================================================================== */

/* Elementor: our widgets render full sections, so remove default spacing. */

.elementor img {
   
    height: 100% !important;
    
}
.elementor-widget[data-widget_type^="maya-"],
.elementor-element[data-widget_type^="maya-"] {
  margin-block-end: 0;
}

.elementor-widget[data-widget_type^="maya-"] > .elementor-widget-container {
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Mobile menu (accordion drawer)
   The !important flags override the older #mobile-nav rules in styles.css.
   -------------------------------------------------------------------------- */
.maya-burger {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}
.maya-burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}
.maya-burger span:nth-child(1) { top: 0; }
.maya-burger span:nth-child(2) { top: 7px; }
.maya-burger span:nth-child(3) { top: 14px; }
#nav-toggle[aria-expanded="true"] { color: #FFF7B3; }
#nav-toggle[aria-expanded="true"] .maya-burger span:nth-child(1) { top: 7px; transform: rotate(45deg); }
#nav-toggle[aria-expanded="true"] .maya-burger span:nth-child(2) { opacity: 0; }
#nav-toggle[aria-expanded="true"] .maya-burger span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* The floating WhatsApp button would cover the menu's own button. */
.maya-menu-open .maya-float-wa {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.8);
}

#mobile-nav {
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.35);
}
#mobile-nav a:hover,
#mobile-nav a:focus,
#mobile-nav a:active {
  opacity: 1;
}
#mobile-nav .maya-m-link {
  color: #ffffff !important;
}
#mobile-nav .maya-m-link.is-active,
#mobile-nav .maya-m-link:hover {
  color: #FFF7B3 !important;
}
#mobile-nav .maya-m-sublink {
  color: rgba(255, 255, 255, 0.72) !important;
}
#mobile-nav .maya-m-sublink:hover,
#mobile-nav .maya-m-sublink.is-active {
  color: #FFF7B3 !important;
}
#mobile-nav .maya-m-sublink.is-active {
  font-weight: 700;
}

.maya-m-toggle {
  background: #ffffff;
  color: #5B6634;
}
.maya-m-toggle:hover {
  background: #FFF7B3;
}
.maya-m-toggle.is-open {
  background: #9B391A;
  color: #ffffff;
}
.maya-m-toggle.is-open svg {
  transform: rotate(180deg);
}
.maya-m-toggle:focus-visible,
#mobile-nav a:focus-visible {
  outline: 2px solid #FFF7B3;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #mobile-nav,
  #mobile-nav [data-role="submenu"],
  .maya-burger span,
  .maya-m-toggle,
  .maya-m-toggle svg {
    transition: none !important;
  }
}


/* Offset anchor jumps for the sticky header. */
section[id] {
  scroll-margin-top: 6rem;
}

/* Rich text inside the Story widget. */
.maya-story-text p + p {
  margin-top: 1.25rem;
}
.maya-story-text strong {
  font-weight: 700;
  color: #20241A;
}
.maya-story-text.maya-on-dark strong {
  color: #ffffff;
  font-weight: 600;
}
.maya-story-text a {
  text-decoration: underline;
}

.maya-faq-answer p + p {
  margin-top: 0.75rem;
}
.maya-faq-answer strong {
  color: #20241A;
  font-weight: 600;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* Footer menus (from menu locations or Navigation Menu widgets). */
.maya-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.maya-footer-menu a {
  transition: color 0.15s ease;
}
.maya-footer-menu a:hover,
.maya-footer-menu .current-menu-item > a {
  color: #ffffff;
}
/* Add the CSS class "maya-highlight" to a menu item (Menus → Screen Options → CSS Classes). */
.maya-footer-menu .maya-highlight > a {
  color: #FFF7B3;
  font-weight: 700;
}
.maya-footer-widget + .maya-footer-widget {
  margin-top: 1rem;
}
.maya-footer-widget ul:not(.maya-footer-menu) {
  list-style: none;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Forminator forms inside the "Contact Form & Map" widget.
   The form uses Forminator's "None" design, so all styling comes from here.
   -------------------------------------------------------------------------- */
.maya-shortcode-form .forminator-ui.forminator-custom-form {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
/* Forminator's grid CSS sets 30px row spacing with a very specific selector. */
.maya-shortcode-form .forminator-ui.forminator-custom-form .forminator-row {
  margin-bottom: 1rem !important;
}
.maya-shortcode-form .forminator-ui.forminator-custom-form .forminator-row-last {
  margin-bottom: 0 !important;
  margin-top: 0.25rem;
}
.maya-shortcode-form .forminator-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  color: #20241A;
}
.maya-shortcode-form .forminator-required {
  color: #9B391A;
}
.maya-shortcode-form .forminator-input,
.maya-shortcode-form .forminator-textarea,
.maya-shortcode-form select {
  display: block;
  width: 100%;
  background: #ffffff;
  border: 1px solid #E2EADF;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #20241A;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.maya-shortcode-form .forminator-textarea {
  min-height: var(--forminator-textarea-min-height, 140px);
  resize: vertical;
}
.maya-shortcode-form .forminator-input::placeholder,
.maya-shortcode-form .forminator-textarea::placeholder {
  color: rgba(94, 100, 87, 0.6);
}
.maya-shortcode-form .forminator-input:focus,
.maya-shortcode-form .forminator-textarea:focus,
.maya-shortcode-form select:focus {
  outline: none;
  border-color: #5B6634;
  box-shadow: 0 0 0 2px rgba(91, 102, 52, 0.9);
}

/* Validation. */
.maya-shortcode-form .forminator-has_error .forminator-input,
.maya-shortcode-form .forminator-has_error .forminator-textarea {
  border-color: #dc2626;
}
.maya-shortcode-form .forminator-error-message {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #dc2626;
}

/* Submit button (matches the template's emerald "Send Message" button). */
.maya-shortcode-form .forminator-button-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border: 0;
  border-radius: 0.75rem;
  background: #059669;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.maya-shortcode-form .forminator-button-submit::before {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 19l9 2-9-18-9 18 9-2zm0 0v-8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 19l9 2-9-18-9 18 9-2zm0 0v-8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.maya-shortcode-form .forminator-button-submit:hover {
  background: #047857;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.maya-shortcode-form .forminator-button-submit:active {
  transform: scale(0.97);
}
.maya-shortcode-form .forminator-button-submit:focus-visible {
  outline: 2px solid #5B6634;
  outline-offset: 2px;
}
.maya-shortcode-form .forminator-button-submit:disabled,
.maya-shortcode-form .forminator-button-submit[aria-disabled="true"] {
  opacity: 0.6;
  cursor: wait;
}
@media (max-width: 639px) {
  .maya-shortcode-form .forminator-button-submit {
    width: 100%;
  }
}

/* Success / error message after submitting. */
.maya-shortcode-form .forminator-response-message[aria-hidden="true"],
.maya-shortcode-form .forminator-response-message:empty {
  display: none;
}
.maya-shortcode-form .forminator-response-message {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.maya-shortcode-form .forminator-response-message.forminator-success {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}
.maya-shortcode-form .forminator-response-message.forminator-error {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}
.maya-shortcode-form .forminator-response-message p {
  margin: 0;
}

/* Content of pages not built with Elementor. */
.maya-prose > * + * {
  margin-top: 1.25em;
}
.maya-prose h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: #20241A;
}
.maya-prose h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #20241A;
}
.maya-prose p,
.maya-prose li {
  color: #5E6457;
  line-height: 1.75;
}
.maya-prose ul {
  list-style: disc;
  padding-left: 1.5rem;
}
.maya-prose ol {
  list-style: decimal;
  padding-left: 1.5rem;
}
.maya-prose a {
  color: #9B391A;
  text-decoration: underline;
}
.maya-prose img {
  border-radius: 1rem;
}

.maya-pagination .nav-links {
  display: inline-flex;
  gap: 0.5rem;
}
.maya-pagination .page-numbers {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid #E2EADF;
  font-weight: 700;
  font-size: 0.875rem;
}
.maya-pagination .page-numbers.current {
  background: #5B6634;
  color: #fff;
}

/* Keep the WordPress admin bar from covering the sticky header. */
.admin-bar #site-header.sticky {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar #site-header.sticky {
    top: 46px;
  }
}
@media (max-width: 600px) {
  .admin-bar #site-header.sticky {
    top: 0;
  }
}

.sr-only:focus {
  position: fixed;
}

/* --------------------------------------------------------------------------
   Forminator 2-step form inside the "Multi-step Enquiry Form" widget.
   The form uses Forminator's "Basic" design (layout only); builds on the
   .maya-shortcode-form rules above.
   -------------------------------------------------------------------------- */
.maya-enquiry-forminator .forminator-pagination-progress {
  display: block !important;
  margin-bottom: 1.5rem !important;
}
.maya-enquiry-forminator .forminator-progress-label {
  width: auto !important;
  margin: 0 0 0.5rem !important;
  font-size: 0.875rem;
  font-weight: 600;
  color: #20241A;
}
.maya-enquiry-forminator .forminator-progress-bar {
  width: 100% !important;
  height: 1.25rem !important;
  border-radius: 9999px !important;
  background: #F3F4F6 !important;
  overflow: hidden;
}
.maya-enquiry-forminator .forminator-progress-bar span {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 100% !important;
  border-radius: 0 !important;
  background: #6B7F67 !important;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  transition: width 0.3s ease;
}
/* Percentage inside the bar (Forminator only sets the width). */
.maya-enquiry-forminator .forminator-progress-bar span[style*="50%"]::after { content: '50%'; }
.maya-enquiry-forminator .forminator-progress-bar span[style*="100%"]::after { content: '100%'; }

/* Two-column checkbox list. */
.maya-enquiry-forminator .forminator-field:has(.forminator-checkbox) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
}
.maya-enquiry-forminator .forminator-field:has(.forminator-checkbox) > :not(.forminator-checkbox) {
  grid-column: 1 / -1;
}
@media (min-width: 640px) {
  .maya-enquiry-forminator .forminator-field:has(.forminator-checkbox) {
    grid-template-columns: 1fr 1fr;
  }
}
.maya-enquiry-forminator .forminator-checkbox {
  display: flex !important;
  align-items: center;
  gap: 0.625rem;
  margin: 0 !important;
  font-size: 0.875rem;
  color: #20241A;
  cursor: pointer;
}
.maya-enquiry-forminator .forminator-checkbox:hover {
  color: #5B6634;
}
.maya-enquiry-forminator .forminator-checkbox-box {
  flex-shrink: 0;
  border-radius: 0.25rem;
  border-color: #D1D5DB !important;
}
.maya-enquiry-forminator .forminator-checkbox input:checked + .forminator-checkbox-box {
  background-color: #6B7F67 !important;
  border-color: #6B7F67 !important;
  color: #ffffff !important;
}
.maya-enquiry-forminator .forminator-checkbox-label {
  margin: 0 !important;
  padding: 0 !important;
}

/* Phone (country flag picker) and date picker inputs. */
.maya-enquiry-forminator .iti {
  display: block;
  width: 100%;
}
.maya-enquiry-forminator .forminator-input-with-icon .forminator-input {
  padding-left: 2.5rem;
}

/* Back / Next / Send Enquiry buttons. */
.maya-enquiry-forminator .forminator-pagination-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}
.maya-enquiry-forminator .forminator-pagination-footer .forminator-button {
  margin: 0 !important;
  padding: 0.75rem 2rem;
  border: 0;
  border-radius: 0.5rem;
  background: #6B7F67;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.maya-enquiry-forminator .forminator-pagination-footer .forminator-button:hover {
  background: #576853;
}
.maya-enquiry-forminator .forminator-pagination-footer .forminator-button-back {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  background: #7B8F86;
}
.maya-enquiry-forminator .forminator-pagination-footer .forminator-button-back:hover {
  background: #687a72;
}
.maya-enquiry-forminator .forminator-pagination-footer .forminator-button:not(.forminator-button-back) {
  margin-left: auto !important;
}
.maya-enquiry-forminator .forminator-pagination-footer .forminator-button-submit::before {
  display: none;
}
@media (max-width: 639px) {
  .maya-enquiry-forminator .forminator-pagination-footer .forminator-button-submit {
    width: auto;
  }
}

/* Dropdowns (Forminator replaces <select> with Select2). */
.maya-enquiry-forminator .select2-container {
  width: 100% !important;
}
.maya-enquiry-forminator .select2-container .select2-selection--single {
  position: relative;
  display: block !important;
  height: 2.875rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #E2EADF !important;
  border-radius: 0.75rem !important;
  background: #ffffff !important;
}
.maya-enquiry-forminator .select2-container .select2-selection__rendered {
  display: block !important;
  margin: 0 !important;
  padding: 0 2.5rem 0 1rem !important;
  font-size: 0.875rem !important;
  line-height: calc(2.875rem - 2px) !important;
  color: #20241A !important;
}
.maya-enquiry-forminator .select2-container .select2-selection__arrow {
  position: absolute !important;
  top: 0 !important;
  right: 0.875rem !important;
  display: flex !important;
  align-items: center;
  height: 100% !important;
  margin: 0 !important;
}
.maya-enquiry-forminator .select2-container--open .select2-selection--single,
.maya-enquiry-forminator .select2-container--focus .select2-selection--single {
  border-color: #5B6634 !important;
  box-shadow: 0 0 0 2px rgba(91, 102, 52, 0.9);
}
.maya-enquiry-forminator .forminator-has_error .select2-selection--single {
  border-color: #dc2626 !important;
}
.forminator-select-dropdown-container--open .select2-dropdown {
  border-color: #E2EADF !important;
  border-radius: 0.75rem !important;
  overflow: hidden;
}
.forminator-select-dropdown-container--open .select2-results__option--highlighted {
  background: #6B7F67 !important;
  color: #ffffff !important;
}

/* Progress bar is full width; errors are plain red text. */
.maya-enquiry-forminator .forminator-progress-bar {
  margin: 0 !important;
}
.maya-enquiry-forminator .forminator-error-message {
  margin-top: 0.25rem !important;
  padding: 0 !important;
  background: none !important;
  font-size: 0.75rem !important;
  color: #dc2626 !important;
}
.maya-enquiry-forminator .forminator-error-message::before {
  display: none !important;
}

/* Brand bold + links inside native Elementor Text Editor widgets. */
.maya-rich-text strong {
  font-weight: 700;
  color: #20241A;
}
.maya-rich-text a {
  text-decoration: underline;
}

/* Rich text on dark (olive) sections. */
.maya-rich-text.maya-on-dark strong {
  font-weight: 600;
  color: #ffffff;
}

/* Olive section with the brand spice dot pattern, for native Elementor containers.
   The dot alpha is pre-multiplied by the 0.2 overlay opacity of .spice-pattern. */
.maya-spice-bg {
  background-image: radial-gradient(rgba(255, 255, 255, 0.016) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* 4:5 portrait crop for native Elementor Image widgets. */
.maya-img-4-5 img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
}

/* Glossy gradient pill for native Elementor Button widgets. */
.maya-pill-btn {
  /* kill the inline-block baseline gap under the pill */
  line-height: 0;
}
.maya-pill-btn .elementor-button {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(to right, #9B391A, #B34522, #883015);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 8px 25px rgba(155, 57, 26, 0.38);
  transition: all 0.3s;
}
.maya-pill-btn .elementor-button:hover {
  background-image: linear-gradient(to right, #852F14, #9B391A, #73270F);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 12px 32px rgba(155, 57, 26, 0.5);
  transform: translateY(-4px);
}
.maya-pill-btn .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1), transparent);
  pointer-events: none;
}
.maya-pill-btn .elementor-button::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: transform 1s ease-out;
  pointer-events: none;
}
.maya-pill-btn .elementor-button:hover::after {
  transform: translateX(100%);
}
.maya-pill-btn .elementor-button-content-wrapper {
  position: relative;
  z-index: 1;
  align-items: center;
}
.maya-pill-btn .elementor-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: all 0.3s;
}
.maya-pill-btn .elementor-button-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.maya-pill-btn .elementor-button:hover .elementor-button-icon {
  background-color: #ffffff;
  color: #9B391A;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
}

/* Elementor's Paragraph Spacing also margins the last paragraph; drop it so the
   spacing behaves like p + p and the block height matches its content. */
.maya-rich-text p:last-child {
  margin-block-end: 0 !important;
}

/* Elementor's frontend resets `.elementor a { box-shadow: none }`, which outranks
   Tailwind's .shadow-[...] utility (0,1,1 vs 0,1,0) and strips the glossy pill's
   shadow from every maya_button() rendered inside Elementor content. Re-assert
   Tailwind's own shadow chain so the hover variant keeps working too. */
.elementor a.maya-btn {
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}