/* ============================================================================
   Block: pranav-contact-hero  —  Contact Us Hero Section

   CSS port of kovaion-landing-page/assets/css/contact.css (.contact-hero and
   .contact-form elements), adapted to ACF block BEM class names and scoped
   to avoid conflicts with other CF7 forms on the page.

   Class mapping (HTML ref → ACF block):
     .contact-hero               → .pranav-contact-hero
     .contact-hero__card         → .pranav-contact-hero__card
     .contact-hero__bg           → .pranav-contact-hero__bg
     .contact-hero__overlay      → .pranav-contact-hero__overlay
     .contact-hero__text         → .pranav-contact-hero__text
     .contact-hero__content      → .pranav-contact-hero__content
     .contact-hero__title        → .pranav-contact-hero__title
     .contact-hero__subtitle     → .pranav-contact-hero__subtitle
     .hero__cta (contact variant) → .pranav-contact-hero__cta
     .contact-form               → .pranav-contact-hero__form-card
     .contact-form__inner        → .pranav-contact-hero__form-inner
     .contact-form__header       → .pranav-contact-hero__form-header
     .contact-form__heading      → .pranav-contact-hero__form-heading
     .contact-form__subheading   → .pranav-contact-hero__form-subheading
     .form-fields / .form-field  → scoped to .pranav-contact-hero (unchanged)
     .form-row / .form-input     → scoped to .pranav-contact-hero (unchanged)
     .form-submit / .form-btn    → scoped to .pranav-contact-hero (unchanged)

   New elements (not in source HTML):
     .pranav-contact-hero__bg-video       — <video> background element
     .pranav-contact-hero__bg-placeholder — editor placeholder (no media uploaded)
     .pranav-contact-hero__cta--preview   — editor-only (label set but no URL)
     .pranav-contact-hero__form-placeholder — editor placeholder (no CF7 shortcode)

   Key layout measurements (HTML / contact.css reference):
     Section    : bg #fff5f0, padding-top 52px, padding-bottom 100px
     Card       : margin 0 80px, min-height 750px, border-radius 25px, overflow hidden
     Background : absolute, inset 0, object-fit cover, object-position center top
     Overlay    : absolute, inset 0, rgba(0,0,0,0.6)
     Text block : absolute, left 80px, top 245px, width 488px, z-index 3
     Title      : 64px / 74px, Clash Display 400, white
     Subtitle   : 18px / 1.6, Clash Grotesk 400, white
     CTA        : coral pill, height 58px, border-radius 42px
     Form card  : absolute, left 660px, top 147px, width 540px, bg white, radius 20px

   CF7 integration notes:
     CF7 wraps every field in <span class="wpcf7-form-control-wrap">.
     This block forces those spans to display:block so they participate
     correctly in flex column layouts.
     The submit tag produces <button type="submit"> in CF7 5+.
     CF7 response output (.wpcf7-response-output) is styled to match the
     form card design.
   ============================================================================ */


/* ── 0. Full-width breakout ─────────────────────────────────────────────────
   Mirrors the same rule used by other full-bleed blocks in this theme.
   ────────────────────────────────────────────────────────────────────────── */
.entry-content .pranav-contact-hero,
.entry-content .pranav-contact-hero.alignfull {
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
    box-sizing: border-box;
}


/* ── 1. Section shell ────────────────────────────────────────────────────────
   Warm peach background shows above and below the hero card.
   HTML ref: .contact-hero { background:var(--c-bg); padding-top:52px; padding-bottom:100px }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero {
    background-color: var(--color-bg, #fff5f0);
    padding-top: 52px;
    padding-bottom: 100px;
    box-sizing: border-box;
}


/* ── 2. Hero card ────────────────────────────────────────────────────────────
   Rounded rectangle that clips both the background media and the form card.
   min-height is increased to 950px (from the original 750px) to ensure the
   absolutely-positioned form card is fully visible when CF7 forms contain
   more fields. The background image scales to 100% to fill the taller card.
   HTML ref: .contact-hero__card { margin:0 80px; height:750px; border-radius:25px;
              background:var(--c-primary-peach); overflow:hidden }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero__card {
    position: relative;
    margin: 0 var(--container-padding, 80px);
    min-height: 950px;
    border-radius: var(--radius-25, 25px);
    background-color: var(--color-peach, #feb7a0);
    overflow: hidden;
}


/* ── 3. Background container ─────────────────────────────────────────────────
   Fills the entire card. Not blurred (unlike about-hero).
   HTML ref: .contact-hero__bg { position:absolute; inset:0; z-index:0 }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}


/* ── 3a. Background image ────────────────────────────────────────────────────
   Deliberately taller than the card (815px vs 750px card height) — this is
   intentional in the design to allow object-position:center top to show the
   full upper portion of the photo.
   HTML ref: .contact-hero__bg img { width:100%; height:815px; object-fit:cover;
              object-position:center top }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero__bg-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 815px;
    object-fit: cover;
    object-position: center top;
}


/* ── 3b. Background video ────────────────────────────────────────────────────
   Mirrors the image sizing. The <video> element is absolutely positioned to
   fill the .pranav-contact-hero__bg container exactly like the image does.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero__bg-video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 815px;
    object-fit: cover;
    object-position: center top;
}


/* Editor placeholder — shown in the block editor when no media is uploaded */
.pranav-contact-hero__bg-placeholder {
    position: absolute;
    inset: 0;
    background-color: #1e252f;
}


/* ── 4. Dark overlay ─────────────────────────────────────────────────────────
   Semi-transparent tint over the photo/video for text contrast.
   HTML ref: .contact-hero__overlay { position:absolute; inset:0; background:rgba(0,0,0,0.6) }
   When overlay_opacity ACF field is non-default, an inline style overrides this.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 1;
}


/* ── 5. Left text block ──────────────────────────────────────────────────────
   Absolutely positioned at left:80px, top:245px, width:488px within the card.
   Flex column with 30px gap between content block and CTA button.
   HTML ref: .contact-hero__text { position:absolute; left:80px; top:245px;
              width:488px; z-index:3; display:flex; flex-direction:column; gap:30px }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero__text {
    position: absolute;
    left: 80px;
    top: 245px;
    width: 488px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 30px;
}


/* ── 6. Content sub-block (title + subtitle) ─────────────────────────────────
   HTML ref: .contact-hero__content { display:flex; flex-direction:column; gap:15px }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero__content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


/* ── 7. Hero title ───────────────────────────────────────────────────────────
   HTML ref: .contact-hero__title { font-size:64px; line-height:74px;
              font-family:Clash Display; font-weight:400; color:#fff }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero__title {
    font-family: var(--font-heading, 'Clash Display Variable', 'Clash Display', sans-serif);
    font-weight: var(--fw-regular, 400);
    font-size: 64px;
    line-height: 74px;
    color: var(--color-white, #ffffff);
    margin: 0;
    word-break: break-word;
}


/* ── 8. Hero subtitle ────────────────────────────────────────────────────────
   HTML ref: .contact-hero__subtitle { font-size:18px; line-height:1.6; color:#fff }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero__subtitle {
    font-family: var(--font-body, 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif);
    font-weight: var(--fw-regular, 400);
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-white, #ffffff);
    margin: 0;
}


/* ── 9. CTA button — coral pill ──────────────────────────────────────────────
   HTML ref: <a class="hero__cta">Book a consultation</a>
   Matches the global .hero__cta pattern used across hero sections.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    padding: 0 32px;
    background-color: var(--color-primary, #ff5a3c);
    color: var(--color-white, #ffffff);
    font-family: var(--font-heading, 'Clash Display Variable', 'Clash Display', sans-serif);
    font-weight: var(--fw-medium, 500);
    font-size: 18px;
    line-height: 1;
    border-radius: var(--radius-42, 42px);
    text-decoration: none;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    align-self: flex-start;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pranav-contact-hero__cta:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    color: var(--color-white, #ffffff);
    text-decoration: none;
}

.pranav-contact-hero__cta:active {
    transform: translateY(0);
}

/* Preview-only state: label set but no URL configured in the editor */
.pranav-contact-hero__cta--preview {
    opacity: 0.9;
    cursor: default;
}


/* ── 10. Form card ───────────────────────────────────────────────────────────
   White card that floats over the right side of the hero.
   HTML ref: .contact-form { position:absolute; left:660px; top:147px;
              width:540px; height:491px; background:#fff; border-radius:20px;
              box-shadow:0 4px 8px rgba(0,0,0,0.15) }
   height:auto instead of fixed 491px so CF7 response messages and validation
   errors don't get clipped.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero__form-card {
    position: absolute;
    left: 660px;
    top: 147px;
    width: 540px;
    height: auto;
    min-height: 491px;
    background-color: var(--color-white, #ffffff);
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}


/* ── 11. Form inner wrapper ──────────────────────────────────────────────────
   HTML ref: .contact-form__inner { width:480px; display:flex; flex-direction:column; gap:25px }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero__form-inner {
    width: 480px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 30px 0;
}


/* ── 12. Form header (heading + subheading) ──────────────────────────────────
   HTML ref: .contact-form__header { display:flex; flex-direction:column; gap:5px;
              text-align:center }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero__form-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
}

.pranav-contact-hero__form-heading {
    font-family: var(--font-heading, 'Clash Display Variable', 'Clash Display', sans-serif);
    font-weight: var(--fw-medium, 500);
    font-size: 24px;
    line-height: 1.3;
    color: #2e2e2e;
    margin: 0;
}

.pranav-contact-hero__form-subheading {
    font-family: var(--font-body, 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif);
    font-weight: var(--fw-regular, 400);
    font-size: 14px;
    line-height: 1.5;
    color: #2e2e2e;
    margin: 0;
}


/* ── 13. CF7 wpcf7 wrapper fixes ─────────────────────────────────────────────
   CF7 wraps its <form> in <div class="wpcf7"> and wraps each field in
   <span class="wpcf7-form-control-wrap">. Force these to display as block
   so they participate correctly inside flex-column form-field containers.

   <p> reset — the theme's global `p { margin-bottom: var(--space-16) }` (16px)
   bleeds into the form, inflating gaps between fields and collapsing the card.
   Zero out all <p> margins inside the form card; intentional spacing is
   handled exclusively through the flex gap on .form-fields / .form-field.

   <br> reset — CF7's default form template inserts <br> between labels and
   inputs inside <p> tags. Even in our custom template, wpautop may inject
   stray <br>s. Hide them so they don't add unwanted line height.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero .wpcf7 {
    width: 100%;
}

.pranav-contact-hero .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pranav-contact-hero .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* Reset theme's global p margin inside every CF7 form element */
.pranav-contact-hero .wpcf7-form p,
.pranav-contact-hero .pranav-contact-hero__form-inner p {
    margin-top: 0;
    margin-bottom: 0;
}

/* CF7 default template wraps each field in a <p>; convert it to a block
   with no margin so the flex gap on .form-fields handles spacing instead */
.pranav-contact-hero .wpcf7-form > p {
    display: block;
    margin: 0;
    padding: 0;
}

/* Hide stray <br> tags CF7 or wpautop may inject between label and input */
.pranav-contact-hero .wpcf7-form br {
    display: none;
}


/* ── 14. Form fields wrapper ─────────────────────────────────────────────────
   HTML ref: .form-fields { display:flex; flex-direction:column; gap:15px }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero .form-fields {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


/* ── 15. Individual field (label + input pair) ───────────────────────────────
   HTML ref: .form-field { display:flex; flex-direction:column; gap:8px }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero .form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* ── 16. Form label ──────────────────────────────────────────────────────────
   HTML ref: .form-label { font-size:14px; color:#2e2e2e }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero .form-label {
    font-family: var(--font-body, 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif);
    font-size: 14px;
    line-height: 1;
    color: #2e2e2e;
    display: block;
}

.pranav-contact-hero .form-label .req {
    color: var(--color-primary, #ff5a3c);
}


/* ── 17. Base input / select style ──────────────────────────────────────────
   Applied via class:form-input on each CF7 tag.
   HTML ref: .form-input { height:45px; background:#f5f5f5; border:1px solid #c0c0c0;
              border-radius:8px; padding:11px 15px; font-size:14px }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero .form-input {
    height: 45px;
    width: 100%;
    background-color: #f5f5f5;
    border: 1px solid #c0c0c0;
    border-radius: 8px;
    padding: 11px 15px;
    font-family: var(--font-body, 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif);
    font-size: 14px;
    color: var(--color-dark, #1e252f);
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.pranav-contact-hero .form-input::placeholder {
    color: #c0c0c0;
}

.pranav-contact-hero .form-input:focus {
    border-color: var(--color-primary, #ff5a3c);
    background-color: #ffffff;
}

/* CF7 invalid state */
.pranav-contact-hero .form-input.wpcf7-not-valid {
    border-color: #e04040;
}


/* ── 18. Side-by-side field row ──────────────────────────────────────────────
   HTML ref: .form-row { display:flex; gap:10px }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero .form-row {
    display: flex;
    gap: 10px;
}

.pranav-contact-hero .form-row .form-field {
    flex: 1;
    min-width: 0;
}


/* ── 19. Select dropdown with chevron ────────────────────────────────────────
   HTML ref: .form-select { background-image: chevron SVG; padding-right:36px }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c0c0c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
    cursor: pointer;
}

.pranav-contact-hero select.form-input:focus {
    border-color: var(--color-primary, #ff5a3c);
}


/* ── 20. Form submit area ────────────────────────────────────────────────────
   HTML ref: .form-submit { display:flex; flex-direction:column; gap:15px }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero .form-submit {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}


/* ── 21. "No credit card required" note ──────────────────────────────────────
   HTML ref: .form-note { font-size:12px; color:#ababab; text-align:center }
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero .form-note {
    font-family: var(--font-body, 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif);
    font-weight: var(--fw-medium, 500);
    font-size: 12px;
    line-height: 1.4;
    color: #ababab;
    text-align: center;
    margin: 0;
}


/* ── 22. Submit button — coral pill ──────────────────────────────────────────
   Applied via class:form-btn on the CF7 [submit] tag.
   position:relative is needed for the ::after spinner to be positioned
   inside the button. overflow must NOT be hidden — it clips the ::after
   pseudo-element in browsers that resolve absolute children against the
   containing block before applying overflow clipping.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero .form-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 58px;
    background-color: var(--color-primary, #ff5a3c);
    color: var(--color-white, #ffffff);
    font-family: var(--font-heading, 'Clash Display Variable', 'Clash Display', sans-serif);
    font-weight: var(--fw-medium, 500);
    font-size: 18px;
    line-height: 1;
    border-radius: var(--radius-42, 42px);
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.15s ease;
    letter-spacing: 0.01em;
    box-sizing: border-box;
}

.pranav-contact-hero .form-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.pranav-contact-hero .form-btn:active {
    transform: translateY(0);
}


/* ── 22a. In-button loading overlay ─────────────────────────────────────────
   CF7's [submit] tag on this site renders as <input type="submit"> — a void /
   replaced element that does NOT support ::before / ::after pseudo-elements.
   A CSS-only spinner therefore cannot work here.

   Instead, an inline script in template.php wraps the <input> in a block
   <span class="pranav-ch-wrap"> and appends a <span class="pranav-ch-overlay">
   sibling. When the form is submitted the script adds .pranav-ch-loading to
   the wrapper; the overlay (coral pill matching the button) becomes visible
   and shows a CSS spinner ring + "Loading..." text on top of the input.

   The CF7-native signals (.submitting / [disabled]) are kept only to disable
   pointer events — they no longer affect color so button text stays visible
   if the overlay somehow fails to mount.
   ────────────────────────────────────────────────────────────────────────── */

/* 1 — Suppress the default CF7 spinner element */
.pranav-contact-hero .wpcf7-spinner,
.pranav-contact-hero .ajax-loader {
    display: none !important;
}

/* 2 — Disable interaction on CF7's native signals (no color change needed) */
.pranav-contact-hero .wpcf7-form.submitting .form-btn,
.pranav-contact-hero .wpcf7-form .form-btn[disabled] {
    pointer-events: none;
    cursor: default;
}

/* 3 — Wrapper injected by JS; establishes the positioning context */
.pranav-contact-hero .pranav-ch-wrap {
    display: block;
    position: relative;
    width: 100%;
}

/* 4 — Loading overlay: hidden until .pranav-ch-loading is added to wrapper */
.pranav-contact-hero .pranav-ch-overlay {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--color-primary, #ff5a3c);
    border-radius: var(--radius-42, 42px);
    color: var(--color-white, #ffffff);
    font-family: var(--font-heading, 'Clash Display Variable', 'Clash Display', sans-serif);
    font-weight: var(--fw-medium, 500);
    font-size: 18px;
    letter-spacing: 0.01em;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}

/* 5 — Show the overlay when JS sets loading state */
.pranav-contact-hero .pranav-ch-wrap.pranav-ch-loading .pranav-ch-overlay {
    display: flex;
}

/* 6 — Spinner ring inside the overlay */
.pranav-contact-hero .pranav-ch-ring {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    animation: pranav-ch-spin 0.65s linear infinite;
}

@keyframes pranav-ch-spin {
    to { transform: rotate(360deg); }
}


/* ── 23. CF7 validation tip ──────────────────────────────────────────────────
   The per-field error message CF7 injects below invalid inputs.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero .wpcf7-not-valid-tip {
    display: block;
    font-family: var(--font-body, 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif);
    font-size: 12px;
    color: #e04040;
    margin-top: 4px;
}


/* ── 24. CF7 form response output ────────────────────────────────────────────
   The success/error banner CF7 renders after submission.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero .wpcf7-response-output {
    font-family: var(--font-body, 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif);
    font-size: 14px;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0;
    border: 1px solid transparent;
}

/* Success */
.pranav-contact-hero .wpcf7-mail-sent-ok {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

/* Error / spam */
.pranav-contact-hero .wpcf7-mail-sent-ng,
.pranav-contact-hero .wpcf7-spam-blocked,
.pranav-contact-hero .wpcf7-acceptance-missing {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* Validation error (missing required fields) */
.pranav-contact-hero .wpcf7-validation-errors {
    background-color: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}


/* ── 25. Form placeholder (editor / no shortcode) ────────────────────────────
   Shown in the block editor and on the front end when no CF7 shortcode is set.
   ────────────────────────────────────────────────────────────────────────── */
.pranav-contact-hero__form-placeholder {
    padding: 24px;
    border: 2px dashed #c0c0c0;
    border-radius: 8px;
    text-align: center;
}

.pranav-contact-hero__form-placeholder p {
    font-family: var(--font-body, 'Clash Grotesk Variable', 'Clash Grotesk', sans-serif);
    font-size: 14px;
    color: #858585;
    margin: 0;
}


/* ── 26. Site header positioning ─────────────────────────────────────────────
   Mirrors the same :has() pattern used by pranav-about-hero and pranav-hero-gcc.
   Card starts at section padding-top 52px + 30px inner = 82px from viewport top.
   ────────────────────────────────────────────────────────────────────────── */
body:has(.pranav-contact-hero) .site-header {
    top: 82px;
}

body:has(.pranav-contact-hero) .nav-overlay {
    top: 82px;
}

body:has(.pranav-contact-hero) .site-main {
    padding-top: 0;
}


/* ── 27. Responsive — Tablet ≤ 1100px ───────────────────────────────────────
   Switch the hero card from absolute-positioned layout to a flex row,
   releasing the absolute positioning on both the text and form card.
   HTML ref (contact.css): card flex-direction row, padding 80px 40px 50px,
   .contact-hero__text flex:1, .contact-form flex:0 0 380px.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {

    .pranav-contact-hero__card {
        min-height: 0;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
        padding: 80px 40px 50px;
        overflow: visible;
    }

    /* Release absolute positioning from both children */
    .pranav-contact-hero__text,
    .pranav-contact-hero__form-card {
        position: static;
    }

    .pranav-contact-hero__text {
        flex: 1;
        top: auto;
        left: auto;
        width: auto;
    }

    .pranav-contact-hero__title {
        font-size: 44px;
        line-height: 54px;
    }

    .pranav-contact-hero__subtitle {
        font-size: 16px;
    }

    .pranav-contact-hero__form-card {
        flex: 0 0 380px;
        width: 380px;
        min-height: 0;
        padding: 30px;
        display: block;
        align-self: flex-start;
    }

    .pranav-contact-hero__form-inner {
        width: 100%;
        padding: 0;
    }
}


/* ── 28. Responsive — Mobile ≤ 768px ─────────────────────────────────────────
   Stack text and form vertically. Form card takes full width.
   HTML ref (contact.css): card flex-direction column, padding 80px 24px 40px.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    .pranav-contact-hero {
        padding-top: 0;
        padding-bottom: 60px;
    }

    .pranav-contact-hero__card {
        flex-direction: column;
        padding: 80px 24px 40px;
        gap: 28px;
    }

    .pranav-contact-hero__title {
        font-size: 32px;
        line-height: 42px;
    }

    .pranav-contact-hero__subtitle {
        font-size: 15px;
    }

    .pranav-contact-hero__cta {
        align-self: stretch;
        text-align: center;
    }

    .pranav-contact-hero__form-card {
        flex: none;
        width: 100%;
        padding: 24px;
    }

    /* Side-by-side rows stack vertically on mobile */
    .pranav-contact-hero .form-row {
        flex-direction: column;
        gap: 15px;
    }

    /* Restore header to mobile position */
    body:has(.pranav-contact-hero) .site-header {
        top: 20px;
    }

    body:has(.pranav-contact-hero) .nav-overlay {
        top: 12px;
    }
}


/* ── 29. Responsive — Small mobile ≤ 480px ───────────────────────────────────
   Slightly reduced typography to fit very narrow screens.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

    .pranav-contact-hero__card {
        padding: 70px 16px 32px;
    }

    .pranav-contact-hero__title {
        font-size: 26px;
        line-height: 36px;
    }

    .pranav-contact-hero__subtitle {
        font-size: 14px;
    }

    .pranav-contact-hero__form-card {
        padding: 20px;
    }

    .pranav-contact-hero__form-heading {
        font-size: 20px;
    }

    .pranav-contact-hero .form-btn {
        font-size: 16px;
        height: 52px;
    }
}


/* ── 30. Block editor preview ────────────────────────────────────────────────
   Cap height in the Gutenberg editor so the block doesn't push the editor
   UI off-screen. Both children are shown regardless of scroll position.
   ────────────────────────────────────────────────────────────────────────── */
.wp-block.acf-pranav-contact-hero .pranav-contact-hero {
    min-height: 200px;
}

.wp-block.acf-pranav-contact-hero .pranav-contact-hero__card {
    min-height: 200px;
}