/* ==========================================================================
   IDRIS UMZUG — CONTACT PAGE STYLES
   --------------------------------------------------------------------------
   Built on the design tokens in assets/css/theme.css.

   Contents:
     1. Hero
     2. Get in touch (info + form)
     3. Map
     4. Responsive
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */
.cn-info-item:hover{
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	transition:0.4s;
}
.cn-hero {
  text-align: center;
  color: var(--color-white);
  padding-top: 12.5rem;
  padding-bottom: var(--space-10);
  background-color: var(--color-dark);
  background-image: url("../images/home-ban.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cn-hero h1 { color: var(--color-white); max-width: 760px; margin: 0 auto var(--space-5); }
.cn-hero p { color: rgba(255, 255, 255, 0.82); max-width: 640px; margin: 0 auto var(--space-6); }
.cn-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.cn-hero .btn--outline { color: var(--color-white); border-color: rgba(255, 255, 255, 0.5); }
.cn-hero .btn--outline:hover { background: var(--color-white); color: var(--color-dark); }

/* ==========================================================================
   2. GET IN TOUCH
   ========================================================================== */
.cn-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-8);
  align-items: start;
}
.cn-intro h2 { margin-bottom: var(--space-3); }
.cn-intro > p { color: var(--color-body); margin-bottom: var(--space-6); max-width: 460px; }

.cn-info { display: grid; gap: var(--space-4); }
.cn-info-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-light);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
}
.cn-info-item__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--radius-circle);
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: 1.1rem;
}
.cn-info-item__icon--wa { background: #25d366; }
.cn-info-item strong { display: block; color: var(--color-dark); }
.cn-info-item span { color: var(--color-body); font-size: var(--fs-sm); }
.cn-info-item span i{color: #fff !important;}
.wpforms-container-full textarea{padding-top: 10px !important;}
/* Form card */
.cn-form {
  background: var(--color-cream);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.cn-form h3 { margin-bottom: var(--space-6); }
.cn-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.cn-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); position: relative; }
.cn-field label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-dark); }
.cn-field input,
.cn-field select,
.cn-field textarea {
  width: 100%;
  padding: var(--space-4);
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--color-dark);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cn-field textarea { resize: vertical; min-height: 110px; }
.cn-field input::placeholder,
.cn-field textarea::placeholder { color: var(--color-muted); }
.cn-field input:focus,
.cn-field select:focus,
.cn-field textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(246, 166, 9, 0.15);
}
.cn-field--select select { appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.cn-field--select::after {
  content: "\f078";                       /* chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  pointer-events: none;
  font-size: 0.75rem;
  color: var(--color-muted);
}
.cn-form__submit { width: 100%; margin-top: var(--space-2); }

/* ==========================================================================
   3. MAP
   ========================================================================== */
.cn-map { padding-bottom: var(--section-padding-y); }
.cn-map iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  border-radius: var(--radius-lg);
}
#wpforms-463-field_1-container .wpforms-layout-row{display: flex !important;gap: 20px !important;}
#wpforms-463-field_1-container .wpforms-layout-column .wpforms-field,
#wpforms-463-field_1-container .wpforms-layout-column input {
    width: 100% !important;
    max-width: 100% !important;
     -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
#wpforms-463-field_1-container .wpforms-layout-column {
    width: 100% !important;
    max-width: 100% !important;
}
/* ==========================================================================
   4. RESPONSIVE
   ========================================================================== */
   @media (max-width: 1023px) {
    #wpforms-463-field_1-container .wpforms-layout-row{display: block !important;}
   }
@media (max-width: 767px) {
  .cn-hero { padding-top: 10rem; }
  .cn-contact__grid { grid-template-columns: 1fr; }
  .cn-form__row { grid-template-columns: 1fr; }
  .cn-form { padding: var(--space-6); }
}