/**
 * Template: Contact Page (tmpl-contact) Styles
 * ===============================================
 *
 * Layout and responsive styles for the contact page:
 * - Compact hero section with concise intro
 * - Two-column layout: form (left) + contact info (right)
 * - Privacy notice styling
 * - Contact info card with email and response time
 *
 * Dependencies: custom-tokens.css, global-classes.css
 * Requirements: 22.1, 22.2, 22.3, 22.4, 22.5, 25.5, 28.3
 *
 * @package Xenopz
 */

/* =========================================================================
   COMPACT HERO SECTION
   ========================================================================= */

/**
 * .x-contact-hero
 * Reduced vertical padding compared to full illustrated hero.
 * Text-only hero for a focused, professional contact page.
 */
.x-contact-hero {
    padding: var(--x-space-xl) 0 var(--x-space-lg) 0;
}

.x-contact-hero__inner {
    max-width: 640px;
}

.x-contact-hero__inner h1 {
    margin: 0 0 var(--x-space-sm) 0;
}

.x-contact-hero__subline {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--x-ink);
    margin: 0;
}

/* =========================================================================
   TWO-COLUMN GRID LAYOUT
   ========================================================================= */

/**
 * .x-contact-grid
 * Two-column layout: form column (larger) and info column (smaller).
 * Stacks on mobile with form first.
 */
.x-contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--x-space-xl);
    align-items: start;
}

/* =========================================================================
   FORM COLUMN (LEFT)
   ========================================================================= */

.x-contact-form-heading {
    margin: 0 0 var(--x-space-md) 0;
}

/**
 * .x-contact-form-wrapper
 * Container for WPForms output. Applies design system styling
 * to form elements generated by WPForms shortcode.
 */
.x-contact-form-wrapper {
    margin-bottom: var(--x-space-lg);
}

/* WPForms form styling overrides to match Xenopz design system */
.x-contact-form-wrapper .wpforms-container .wpforms-form .wpforms-field {
    margin-bottom: var(--x-space-md);
}

.x-contact-form-wrapper .wpforms-container .wpforms-form .wpforms-field-label {
    font-family: var(--x-font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--x-ink);
    margin-bottom: 0.375rem;
}

.x-contact-form-wrapper .wpforms-container .wpforms-form input[type="text"],
.x-contact-form-wrapper .wpforms-container .wpforms-form input[type="email"],
.x-contact-form-wrapper .wpforms-container .wpforms-form textarea {
    font-family: var(--x-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--x-ink);
    background: var(--x-white);
    border: 2px solid var(--x-border);
    border-radius: var(--x-radius-sm);
    padding: 0.75rem 1rem;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.x-contact-form-wrapper .wpforms-container .wpforms-form input[type="text"]:focus,
.x-contact-form-wrapper .wpforms-container .wpforms-form input[type="email"]:focus,
.x-contact-form-wrapper .wpforms-container .wpforms-form textarea:focus {
    border-color: var(--x-teal-700);
    box-shadow: 0 0 0 3px rgba(14, 89, 99, 0.12);
    outline: none;
}

.x-contact-form-wrapper .wpforms-container .wpforms-form textarea {
    min-height: 150px;
    resize: vertical;
}

/* Submit button: match .x-btn-primary styling */
.x-contact-form-wrapper .wpforms-container .wpforms-form .wpforms-submit-container button[type="submit"],
.x-contact-form-wrapper .wpforms-container .wpforms-form button.wpforms-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--x-teal-900);
    color: var(--x-white);
    font-family: var(--x-font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.x-contact-form-wrapper .wpforms-container .wpforms-form .wpforms-submit-container button[type="submit"]:hover,
.x-contact-form-wrapper .wpforms-container .wpforms-form button.wpforms-submit:hover,
.x-contact-form-wrapper .wpforms-container .wpforms-form .wpforms-submit-container button[type="submit"]:focus-visible,
.x-contact-form-wrapper .wpforms-container .wpforms-form button.wpforms-submit:focus-visible {
    box-shadow: 0 0 0 3px var(--x-orange-500);
    transform: translateY(-1px);
}

/* Form validation error styling */
.x-contact-form-wrapper .wpforms-container .wpforms-form .wpforms-field-required .wpforms-error {
    color: var(--x-orange-700);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.x-contact-form-wrapper .wpforms-container .wpforms-form .wpforms-field.wpforms-has-error input,
.x-contact-form-wrapper .wpforms-container .wpforms-form .wpforms-field.wpforms-has-error textarea {
    border-color: var(--x-orange-700);
}

/**
 * .x-contact-form-fallback
 * Shown when WPForms is not active.
 */
.x-contact-form-fallback {
    padding: var(--x-space-md);
    background: var(--x-bg-card);
    border: 2px solid var(--x-border);
    border-radius: var(--x-radius-md);
}

.x-contact-form-fallback p {
    margin: 0;
    color: var(--x-ink);
}

/* =========================================================================
   PRIVACY NOTICE
   ========================================================================= */

/**
 * .x-contact-privacy-notice
 * Subtle privacy text below the form. Uses muted color and smaller font.
 * Requirement 22.4, 28.3
 */
.x-contact-privacy-notice {
    padding: var(--x-space-sm) 0;
    border-top: 1px solid var(--x-border);
}

.x-contact-privacy-notice p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--x-muted);
    margin: 0;
}

.x-contact-privacy-notice strong {
    color: var(--x-ink);
    font-weight: 600;
}

.x-contact-privacy-notice a {
    color: var(--x-teal-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.x-contact-privacy-notice a:hover,
.x-contact-privacy-notice a:focus-visible {
    color: var(--x-orange-500);
}

/* =========================================================================
   INFO COLUMN (RIGHT)
   ========================================================================= */

/**
 * .x-contact-info-card
 * Card with direct contact methods and response time.
 */
.x-contact-info-card {
    display: flex;
    flex-direction: column;
    gap: var(--x-space-md);
}

.x-contact-info-card__heading {
    font-family: var(--x-font-heading);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--x-teal-900);
    margin: 0;
}

/**
 * Contact info items — icon + label/value pairs.
 */
.x-contact-info-item,
.x-contact-info-response {
    display: flex;
    align-items: flex-start;
    gap: var(--x-space-sm);
}

.x-contact-info-item__icon,
.x-contact-info-response__icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    flex-shrink: 0;
}

.x-contact-info-item__icon svg,
.x-contact-info-response__icon svg {
    width: 24px;
    height: 24px;
}

.x-contact-info-item__content,
.x-contact-info-response__content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.x-contact-info-item__label,
.x-contact-info-response__label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--x-muted);
}

.x-contact-info-item__value {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--x-teal-900);
    text-decoration: none;
    transition: color 0.2s ease;
}

.x-contact-info-item__value:hover,
.x-contact-info-item__value:focus-visible {
    color: var(--x-orange-500);
}

.x-contact-info-response__value {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--x-teal-900);
}

/**
 * .x-contact-context-card
 * Secondary card listing what Xenopz can help with.
 */
.x-contact-context-card {
    margin-top: var(--x-space-md);
}

.x-contact-context-card__heading {
    font-family: var(--x-font-heading);
    font-weight: 800;
    font-size: 1.125rem;
    color: var(--x-teal-900);
    margin: 0 0 var(--x-space-sm) 0;
}

.x-contact-context-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.x-contact-context-list li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--x-ink);
}

.x-contact-context-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background: var(--x-orange-500);
    border-radius: 50%;
}

/* =========================================================================
   RESPONSIVE: TABLET (768px – 991px)
   ========================================================================= */

@media (max-width: 991px) {
    .x-contact-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: var(--x-space-lg);
    }
}

/* =========================================================================
   RESPONSIVE: MOBILE (< 768px)
   ========================================================================= */

@media (max-width: 767px) {
    .x-contact-hero {
        padding: var(--x-space-lg) 0 var(--x-space-md) 0;
    }

    .x-contact-grid {
        grid-template-columns: 1fr;
        gap: var(--x-space-lg);
    }

    .x-contact-info-column {
        order: -1;
    }

    .x-contact-context-card {
        margin-top: var(--x-space-sm);
    }
}


/* =========================================================================
   WPFORMS FALLBACK — Top-level selectors (no wrapper class required)
   =========================================================================
   These catch WPForms output rendered directly by the shortcode without
   the .x-contact-form-wrapper wrapper class. Ensures design system
   integration regardless of template structure.
   ========================================================================= */

.wpforms-container .wpforms-form .wpforms-field-label {
  color: var(--x-teal-900);
  font-family: var(--x-font-body);
  font-weight: 600;
}

.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form textarea {
  background: var(--x-white);
  border: 2px solid var(--x-border);
  border-radius: var(--x-radius-sm);
  padding: 0.75rem 1rem;
  font-family: var(--x-font-body);
  color: var(--x-ink);
  transition: border-color 0.2s;
}

.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form textarea:focus {
  border-color: var(--x-teal-700);
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 89, 99, 0.12);
}

.wpforms-container .wpforms-form button[type="submit"],
.wpforms-container .wpforms-form .wpforms-submit {
  background: var(--x-teal-900) !important;
  color: var(--x-white) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 0.875rem 1.75rem !important;
  font-family: var(--x-font-body) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
}

.wpforms-container .wpforms-form button[type="submit"]:hover,
.wpforms-container .wpforms-form .wpforms-submit:hover {
  box-shadow: 0 0 0 3px var(--x-orange-500) !important;
  transform: translateY(-1px);
}

.wpforms-field-required {
  color: var(--x-orange-500);
}


/* =========================================================================
   WPFORMS AGGRESSIVE OVERRIDES
   =========================================================================
   WPForms Lite applies its own styles with high specificity. These rules
   use !important to ensure the Xenopz design system wins.
   ========================================================================= */

/* All form inputs */
div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form input[type="email"],
div.wpforms-container-full .wpforms-form input[type="tel"],
div.wpforms-container-full .wpforms-form input[type="url"],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
  background-color: #FFFFFF !important;
  border: 2px solid #D9C6A5 !important;
  border-radius: 10px !important;
  padding: 0.75rem 1rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  color: #102D34 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form textarea:focus,
div.wpforms-container-full .wpforms-form select:focus {
  border-color: #0E5963 !important;
  box-shadow: 0 0 0 3px rgba(14, 89, 99, 0.12) !important;
  outline: none !important;
}

/* Labels */
div.wpforms-container-full .wpforms-form .wpforms-field-label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  color: #073B44 !important;
}

/* Required asterisk */
div.wpforms-container-full .wpforms-form .wpforms-required-label {
  color: #F26A1B !important;
}

/* Submit button — the nuclear option */
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
  text-align: left !important;
  padding: 0 !important;
  margin-top: var(--x-space-md) !important;
}

div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit {
  display: inline-block !important;
  width: auto !important;
  background-color: #073B44 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 0.875rem 1.75rem !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: box-shadow 0.2s ease, transform 0.15s ease !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit:hover,
div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit:focus {
  box-shadow: 0 0 0 3px #F26A1B !important;
  transform: translateY(-1px) !important;
  background-color: #073B44 !important;
}

/* Field spacing */
div.wpforms-container-full .wpforms-form .wpforms-field {
  margin-bottom: 1.5rem !important;
}

/* Textarea height */
div.wpforms-container-full .wpforms-form textarea {
  min-height: 150px !important;
  resize: vertical !important;
}

/* Error messages */
div.wpforms-container-full .wpforms-form .wpforms-error {
  color: #C94E0B !important;
  font-size: 0.875rem !important;
}