/* Custom overrides for landing form button alignment */
/* Ensures the submit button's wrapper spans two columns and centers the button on large screens, even if runtime classes differ */
/* OTP desktop full-width & vertical stack override (scoped to employment section) */
@media (min-width:1024px) {
  /* Employment OTP step: stack buttons & unify width (both primary + back) */
  .max-w-\[750px\].mx-auto [opt-count="5"] ~ div .flex.items-center,
  .max-w-\[750px\].mx-auto [opt-count="5"] ~ div .flex.items-center.gap-y-s,
  .max-w-\[750px\].mx-auto [opt-count="5"] ~ div .flex.flex-col.items-center.gap-y-s {
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    max-width: var(--otp-buttons-max-width, 360px);
    margin-left: auto;
    margin-right: auto;
  }
  /* Any button inside OTP action container (covers both submit & back, even if second lacks w-full) */
  .max-w-\[750px\].mx-auto [opt-count="5"] ~ div .flex.items-center button,
  .max-w-\[750px\].mx-auto [opt-count="5"] ~ div .flex.items-center.gap-y-s button,
  .max-w-\[750px\].mx-auto [opt-count="5"] ~ div .flex.flex-col.items-center.gap-y-s button {
    width: 100% !important;
    max-width: var(--otp-buttons-max-width, 360px) !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box;
  }
  /* Vertical spacing between the two OTP buttons */
  .max-w-\[750px\].mx-auto [opt-count="5"] ~ div .flex.items-center button + button,
  .max-w-\[750px\].mx-auto [opt-count="5"] ~ div .flex.items-center.gap-y-s button + button,
  .max-w-\[750px\].mx-auto [opt-count="5"] ~ div .flex.flex-col.items-center.gap-y-s button + button {
    margin-top: var(--otp-employment-button-gap, .5rem) !important;
  }
}

/* Employment form (Hiring) submit button: consistent width & centered */
@media (min-width:1024px) {
  /* Center & constrain employment (hiring) form submit button irrespective of width utility classes */
  .max-w-\[750px\].mx-auto form button[type=submit] {
    width: 100% !important;
    max-width: var(--employment-submit-max-width, 360px) !important; /* switched to dedicated variable */
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
  }
  /* Scoped (employment only): wrapper spans all columns & centers */
  .bg-neutral-white\/90.border-action-border form > div:has(> div > button[type=submit]) {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
  }
}

/* Main form: ensure only the first submit button shows (hide accidental duplicate) */
@media (min-width:1024px) {
  #cta form button[type=submit]:not(:first-of-type) { display: none !important; }
}

/* Footer alignment fixes */
:root {
  --footer-section-max: 450px; /* existing constraint */
  --footer-gutter-mobile: 1.25rem; /* 20px approximate */
  --footer-gutter-tablet: 2rem; /* 32px */
  --footer-gap-large: 350px; /* existing mt-[350px] */
  --footer-gap-small: 420px; /* increased gap for <400px to clear submit button */
  --footer-card-bottom-large: calc(50% - 15px); /* original lg bottom value */
  --footer-card-bottom-small: calc(92% - 15px); /* moved further up per latest request */
  --otp-buttons-max-width: 360px; /* refined width for OTP step buttons */
  --form-button-max-width: 420px; /* unified target width for employment submit button */
  --otp-employment-button-gap: .5rem; /* reduced vertical gap between OTP buttons */
  --otp-main-buttons-max-width: 350px; /* width cap for main OTP buttons (spec requires 350px) */
  --employment-submit-max-width: 360px; /* dedicated width for employment submit button */
}

footer .right, footer .left {
  width: 100%;
  max-width: var(--footer-section-max);
}

/* Remove asymmetric left padding that pushes right section horizontally on large screens */
@media (min-width:1024px) {
  footer .right.lg\:pl-16 { /* neutralize Tailwind-generated class effect */
    padding-left: 0 !important;
  }

  /* Use flex-basis 50% so both columns start from same horizontal origin within container */
  footer .right, footer .left {
    flex: 1 1 50%;
  }

  /* Ensure both headings align vertically with consistent margin */
  footer .right h4, footer .left h4 {
    margin-top: 0;
  }
}

/* Laptop/Desktop Option C: center both sections with generous internal gap instead of pushing to far edges */
@media (min-width:1024px) {
  footer.footer-shadow > div.desktop\:container {
    justify-content: center !important;
    column-gap: var(--footer-desktop-gap, 8rem); /* adjustable gap */
    row-gap: var(--footer-desktop-row-gap, 4rem);
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
  footer .right, footer .left {
    flex: 0 0 auto; /* shrink to content */
    max-width: 430px; /* keep readability */
  }
  /* Restore original internal paddings if previously neutralized */
  footer .right.lg\:pl-16 { padding-left: 0rem !important; }
  footer .left.lg\:pr-16 { padding-right: 15rem !important; }
}

/* Employment submit wrapper centering (separate, after other blocks) */
@media (min-width:1024px) {
  .max-w-\[750px\].mx-auto form .flex.items-center:has(> button[type=submit]) {
    width: 100% !important;
    justify-content: center !important;
    grid-column: 1 / -1 !important; /* ensure spans full grid to allow centering */
    display: flex !important;
  }
}

/* Main form OTP buttons (scoped only inside #cta to avoid affecting employment form) */
@media (min-width:1024px) {
  #cta [opt-count="5"] ~ div .gap-y-s.flex.flex-col.items-center.justify-center > * {
    width: 350px !important;
    max-width: 350px !important;
    min-width: 350px !important;
    flex: 0 0 350px !important;
    align-self: center;
  }
  #cta [opt-count="5"] ~ div .gap-y-s.flex.flex-col.items-center.justify-center > button {
    height: 64px !important;
    min-height: 64px !important;
  }
  #cta [opt-count="5"] ~ div .gap-y-s.flex.flex-col.items-center.justify-center div > button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
}

/* Reinforce employment submit centering with higher specificity */
@media (min-width:1024px) {
  .max-w-\[750px\].mx-auto form.w-full.grid.grid-cols-1.lg\:grid-cols-2 .flex.items-center:has(> button[type=submit]) button[type=submit] {
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
  }
}

/* Mobile & small tablet: center both sections to avoid slight left drift caused by justify-center only on first row */
@media (max-width:1023.98px) {
  footer .right, footer .left {
    align-items: center !important; /* override items-start */
    text-align: center;
  }
  footer .right > div, footer .left > div {
    justify-content: center !important;
  }
  footer .right a, footer .left a { text-align: center; }
}

/* Tablet mid-range width adjustments: sometimes visual shift occurs when custom card overlays; push columns down evenly */
@media (min-width:640px) and (max-width:1023.98px) {
  footer .right, footer .left { padding-left: var(--footer-gutter-mobile); padding-right: var(--footer-gutter-mobile); }
}

/* Fine-tune icon/text spacing to maintain consistent baseline */
footer .right svg.text-primary-icon, footer .left svg.text-primary-icon { flex-shrink: 0; }
footer .right .text-body-md, footer .left .text-body-md { display:inline-block; }

/* Maintain original top gap using variable so we can tweak for narrow sizes */
footer.footer-shadow > div.desktop\:container.mt-\[350px\] {
  margin-top: var(--footer-gap-large);
}

/* Narrow phones: increase gap so floating custom-card starts lower and doesn't overlap CTA submit button */
@media (max-width:399.98px) {
  footer.footer-shadow > div.desktop\:container.mt-\[350px\] {
    margin-top: var(--footer-gap-small) !important;
  }
  /* Also nudge the absolute custom-card slightly further down relative to its original bottom calculation */
  footer .custom-card {
    bottom: var(--footer-card-bottom-small) !important; /* variable-driven for easy tuning */
  }
}

/* Footer structural fixes: ensure full-bleed background even when inner container centers narrower content */
footer.footer-shadow {
  background: #fff; /* explicit to avoid transparency over body gradient */
  width: 100%;
  position: relative;
  isolation: isolate; /* keep shadow effects contained */
}

/* On very narrow devices the container padding may visually expose body background; enforce min-width and neutralize side gaps */
@media (max-width:399.98px) {
  footer.footer-shadow > div.desktop\:container, /* inner main flex wrapper */
  footer.footer-shadow > div.w-full { /* generic fallback */
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin: 0 auto !important;
  }
  /* Avoid accidental horizontal scroll caused by translations of the floating custom-card */
  footer.footer-shadow { overflow-x: clip; }
}

/* Email anchor: allow wrapping on narrow widths; treat as LTR to break gracefully */
footer .right a[href^="mailto:"], footer .left a[href^="mailto:"] {
  direction: ltr; /* ensures natural wrap points for email */
  unicode-bidi: plaintext; /* keeps surrounding RTL unaffected */
  overflow-wrap: anywhere; /* allow breaking long segments */
  word-break: break-word; /* older browser fallback */
}

/* Footer contact rows unified alignment */
footer .right .w-full.flex.items-start, footer .left .w-full.flex.items-start {
  justify-content: flex-start !important; /* remove mixed center/start states */
}

/* Create consistent horizontal alignment line by reserving icon space */
footer .right .w-full.flex.items-start svg.text-primary-icon,
footer .left .w-full.flex.items-start svg.text-primary-icon {
  width: 32px; /* reserve space */
  height: 32px; /* uniform visual box */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure text aligns to same baseline and doesn't wrap awkwardly under icon */
footer .right .w-full.flex.items-start a,
footer .left .w-full.flex.items-start a {
  line-height: 1.4;
}

/* Optional: tighten vertical rhythm between the four rows on large screens */
@media (min-width:1024px) {
  footer .right .w-full.flex.items-start + .w-full.flex.items-start,
  footer .left .w-full.flex.items-start + .w-full.flex.items-start { margin-top: .75rem; }
}

/* Ultra-narrow devices (<360px): keep headers centered but align info rows to the natural RTL start (right) */
@media (max-width:359.98px) {
  /* Center section headings (they were fine; ensure no override from earlier rules) */
  footer .right h4, footer .left h4 { text-align: center !important; }

  /* Container: center overall block, do NOT push everything flush against the edge */
  footer .right, footer .left {
    align-items: center !important; /* earlier broader rule already centers; reaffirm */
    text-align: right; /* inner text rows remain RTL-right */
    padding-left: 1rem; /* gentle horizontal breathing room */
    padding-right: 1rem;
  }

  /* Each info row: align contents to RTL start (right) instead of flex-end flush */
  footer .right .w-full.flex.items-start, footer .left .w-full.flex.items-start {
    justify-content: flex-start !important; /* in RTL, flex-start = right */
  }

  /* Icon box slightly smaller for narrow screens */
  footer .right .w-full.flex.items-start svg.text-primary-icon,
  footer .left .w-full.flex.items-start svg.text-primary-icon {
    width: 28px;
    height: 28px;
  }

  /* Maintain tightened vertical spacing */
  footer .right .w-full.flex.items-start + .w-full.flex.items-start,
  footer .left .w-full.flex.items-start + .w-full.flex.items-start { margin-top: .55rem; }
}