/* ============================================
   ATT — Enquiry Form Block
   ============================================ */

.att-enquiry {
  --att-navy: #00053e;
  --att-orange: #f57f29;
  --att-cream: #f5f0eb;
  --att-body: #444444;

  padding: clamp(64px, 7vw, 96px) 0;
}

.att-enquiry--bg-white {
  background-color: #ffffff;
}
.att-enquiry--bg-cream {
  background-color: var(--att-cream);
}
.att-enquiry--bg-navy {
  background-color: var(--att-navy);
}

.att-enquiry__container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: 15px;
}

@media (min-width: 992px) {
  .att-enquiry__container {
    padding-inline: 30px;
  }
}

/* --- Intro ---------------------------------- */
.att-enquiry__eyebrow {
  color: var(--att-orange);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.att-enquiry__heading {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 20px;
}

.att-enquiry--bg-white .att-enquiry__heading,
.att-enquiry--bg-cream .att-enquiry__heading {
  color: var(--att-navy);
}

.att-enquiry--bg-navy .att-enquiry__heading {
  color: #ffffff;
}

.att-enquiry__rule {
  width: 64px;
  height: 3px;
  background: var(--att-orange);
  border-radius: 2px;
  margin-bottom: 0;
}

.att-enquiry__intro {
  margin-bottom: clamp(32px, 5vw, 48px);
}

/* --- Grid ----------------------------------- */
.att-enquiry__grid {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

/* Centered (no aside) — form constrained + centred */
.att-enquiry--centered .att-enquiry__grid {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0 auto;
}

/* Two-column (with aside) */
@media (min-width: 992px) {
  .att-enquiry--has-aside .att-enquiry__grid {
    grid-template-columns: 1.35fr 0.85fr;
  }
}

/* --- Aside card ----------------------------- */
.att-enquiry__aside-card {
  background: var(--att-cream);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 32px);
  border: 1px solid rgba(0, 5, 62, 0.08);
  box-shadow: 0 10px 32px rgba(0, 5, 62, 0.06);
}

.att-enquiry--bg-cream .att-enquiry__aside-card {
  background: #ffffff;
}

.att-enquiry--bg-navy .att-enquiry__aside-card {
  background: #ffffff;
  border-color: transparent;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

.att-enquiry__aside-heading {
  color: var(--att-navy);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0 0 10px;
}

.att-enquiry--bg-navy .att-enquiry__aside-heading {
  color: var(--att-navy);
}

.att-enquiry__aside-text {
  color: var(--att-body);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 18px;
}

.att-enquiry--bg-navy .att-enquiry__aside-text {
  color: var(--att-body);
}

.att-enquiry__aside-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--att-orange);
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.att-enquiry__aside-link:hover,
.att-enquiry__aside-link:focus-visible {
  color: var(--att-navy);
  transform: translateY(-1px);
}

.att-enquiry--bg-navy .att-enquiry__aside-link {
  color: var(--att-orange);
}

.att-enquiry--bg-navy .att-enquiry__aside-link:hover,
.att-enquiry--bg-navy .att-enquiry__aside-link:focus-visible {
  color: var(--att-navy);
}

.att-enquiry__aside-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.att-enquiry__aside-link:hover .att-enquiry__aside-arrow {
  transform: translateX(4px);
}

/* --- Placeholder (editor) ------------------- */
.att-enquiry__placeholder {
  padding: 40px;
  text-align: center;
  color: #888;
  border: 2px dashed rgba(0, 5, 62, 0.15);
  border-radius: 12px;
}

/* ============================================
   CF7 Form Styling (scoped to this block)
   ============================================ */

.att-enquiry__form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.att-enquiry__form p {
  margin: 0;
}

.att-enquiry__form label {
  display: block;
  color: var(--att-navy);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.att-enquiry--bg-navy .att-enquiry__form label {
  color: #ffffff;
}

.att-enquiry__form input[type="text"],
.att-enquiry__form input[type="email"],
.att-enquiry__form input[type="tel"],
.att-enquiry__form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid rgba(0, 5, 62, 0.12);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--att-navy);
  background: #ffffff;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.att-enquiry__form input:focus,
.att-enquiry__form textarea:focus {
  outline: none;
  border-color: var(--att-orange);
}

.att-enquiry__form textarea {
  resize: vertical;
  min-height: 120px;
}

/* Submit button */
.att-enquiry__form input[type="submit"],
.att-enquiry__form .wpcf7-submit {
  width: fit-content;
  background: var(--att-orange);
  color: #ffffff;
  border: 0;
  border-radius: 10px;
  padding: 16px 32px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(245, 127, 41, 0.3);
  transition:
    background-color 0.22s ease,
    transform 0.18s ease,
    box-shadow 0.22s ease;
}

.att-enquiry__form input[type="submit"]:hover,
.att-enquiry__form .wpcf7-submit:hover {
  background: var(--att-navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 5, 62, 0.25);
}

/* CF7 response messages */
.att-enquiry__form .wpcf7-response-output {
  border-radius: 8px;
  padding: 12px 16px !important;
  margin: 8px 0 0 !important;
  font-size: 0.9rem;
}

.att-enquiry__form .wpcf7-not-valid-tip {
  color: #d63638;
  font-size: 0.82rem;
  margin-top: 4px;
}

/* --- Responsive ----------------------------- */
@media (max-width: 991px) {
  .att-enquiry--has-aside .att-enquiry__grid {
    grid-template-columns: 1fr;
  }

  /* On mobile, aside sits above the form for context */
  .att-enquiry__aside {
    order: -1;
  }
}

@media (max-width: 767px) {
  .att-enquiry {
    padding: 56px 0;
  }

  .att-enquiry__form input[type="submit"],
  .att-enquiry__form .wpcf7-submit {
    width: 100%;
  }
}

.att-enquiry__form .att-form-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 575px) {
  .att-enquiry__form .att-form-two {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   jQuery UI Selectmenu — styled to match inputs
   ============================================ */

/* The visible button (what replaces the native select) */
.att-enquiry__form .ui-selectmenu-button {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
  padding: 12px 16px;
  border: 2px solid rgba(0, 5, 62, 0.12);
  border-radius: 8px;
  background: #ffffff;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--att-navy);
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
}

/* Focus + open states */
.att-enquiry__form .ui-selectmenu-button:focus,
.att-enquiry__form .ui-selectmenu-button.ui-selectmenu-button-open {
  border-color: #f57f29;
}

/* The selected text */
.att-enquiry__form .ui-selectmenu-text {
  color: var(--att-navy);
  line-height: 1.4;
  display: block !important;
  order: 1;
  flex: 1;
  text-align: left;
}

/* Replace the jQuery UI triangle with your chevron */
.att-enquiry__form .ui-selectmenu-icon.ui-icon {
  order: 2;
  flex-shrink: 0;
  width: 12px;
  height: 8px;
  margin: 0;
  padding: 0;
  background: none;
  text-indent: 0;
  position: static;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2300053e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ============================================
   The dropdown menu (appended to <body>)
   Note: NOT scoped to .att-enquiry__form because
   jQuery UI moves the menu outside the form
   ============================================ */

.lqd-select-dropdown .ui-selectmenu-menu,
.ui-selectmenu-menu.ui-front {
  z-index: 9999;
}

.lqd-select-dropdown .ui-menu,
.ui-selectmenu-menu .ui-menu {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid rgba(0, 5, 62, 0.12);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 5, 62, 0.12);
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
  box-sizing: border-box;
  list-style: none;
  margin: 4px 0 0;
}

/* Individual options */
.lqd-select-dropdown .ui-menu-item-wrapper,
.ui-selectmenu-menu .ui-menu-item-wrapper {
  padding: 10px 14px;
  border-radius: 6px;
  color: #00053e;
  font-size: 0.95rem;
  cursor: pointer;
  line-height: 1.4;
}

/* Hover + active option */
.lqd-select-dropdown .ui-menu-item-wrapper:hover,
.lqd-select-dropdown .ui-menu-item-wrapper.ui-state-active,
.ui-selectmenu-menu .ui-menu-item-wrapper:hover,
.ui-selectmenu-menu .ui-menu-item-wrapper.ui-state-active {
  background: rgba(245, 127, 41, 0.12);
  color: #00053e;
}

.att-enquiry__form ~ .lqd-select-dropdown .ui-menu,
.lqd-select-dropdown .ui-menu {
  max-width: 340px !important;
}