/* ---------------------------------------------------------------------------
 * HATARAKITAI marketing-site overrides.
 *
 * Layered after the vendored Work Zone style.css/resposive.css, which stay
 * pristine for future template upgrades. Each rule fixes a concrete issue
 * found in the design/i18n audit.
 * ------------------------------------------------------------------------- */

/* WCAG contrast: lime (#22be0d) behind white text is ~2.5:1. Dark text on the
 * lime actions reaches ~7:1 while keeping the brand accent. */
.w-btn-secondary-lg,
.w-btn-secondary-xl,
.cta-btn-link,
.footer-newsletter-btn,
.header-btn {
  color: var(--dark-300);
}
/* The hero search button keeps white text (its icon strokes are light), so it
 * moves to the dark-green brand color instead; hover swaps to lime + dark. */
.hero-form-btn {
  background-color: var(--green-300);
}
.hero-form-btn:hover {
  background-color: var(--lime-300);
  color: var(--dark-300);
}
.w-btn-secondary-lg:hover,
.w-btn-secondary-xl:hover,
.header-btn:hover {
  /* Hover swaps to the dark-green brand color, where white text passes AA. */
  color: var(--white);
}

/* Visible keyboard focus: style.css only defines hover states and the forms
 * use shadow-none, which removes Bootstrap's focus ring. */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.navbar-toggler:focus-visible {
  outline: 2px solid var(--lime-300);
  outline-offset: 2px;
}

/* Logo uploaded via the CMS renders at intrinsic size; cap it to the header. */
.logo-img {
  max-height: 44px;
  width: auto;
}

/* Language switcher (no styles ship with the template). */
.lang-switcher {
  gap: 2px;
}
.lang-switcher a,
.lang-switcher span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 4px 6px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-200);
  text-decoration: none;
}
.lang-switcher a:hover {
  color: var(--green-300);
  background: var(--off-white);
}
.lang-switcher .active {
  color: var(--white);
  background: var(--green-300);
}

/* Category card names: .feature-category-link a is nowrap in style.css, which
 * overflows with long Japanese/Portuguese names. */
.feature-category-link a {
  white-space: normal;
}

/* Hero title highlight (was an inline <style> in the hero block). */
.hero-one-title b,
.hero-one-title strong {
  color: var(--lime-300);
  font-weight: inherit;
}

/* Featured pricing tier. */
.plan-table-featured {
  border: 2px solid var(--green-300);
}

/* Plan feature lists come from the CMS as plain richtext <ul>. */
.plan-body ul {
  list-style: none;
  padding-left: 0;
}
.plan-body ul li {
  padding: 4px 0;
  color: var(--dark-200);
}
.plan-body ul li::before {
  content: "\2713";
  color: var(--lime-300);
  font-weight: 700;
  margin-right: 12px;
}

/* Contact form fields are rendered by Django's form.as_p. */
.contact-form-wrapper p {
  margin-bottom: 16px;
}
.contact-form-wrapper label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}
.contact-form-wrapper input,
.contact-form-wrapper textarea,
.contact-form-wrapper select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--dark-100);
  border-radius: 8px;
}

/* category_nav_strip: this block shipped with NO styling (style.css only has
 * the unrelated `.category-nav ul li a`), so the pills render as bare links. */
.category-nav-strip .category-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--dark-100);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-200);
  background: var(--white);
  text-decoration: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}
.category-nav-strip .category-nav-pill:hover {
  color: var(--green-300);
  border-color: var(--green-300);
  background: var(--off-white);
}
.category-nav-strip .category-nav-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* ===========================================================================
 * MOBILE-RESPONSIVENESS PASS (audit 2026-06-13).
 *
 * The vendored resposive.css only trims a handful of paddings/fonts; it leaves
 * large `pb-150/pt-150/pb-110` voids, lets `.row.g-5` overflow the viewport,
 * and never tightens the CTA/feature/stats blocks for phones. Everything below
 * is scoped to <=991.98px / <=575.98px so the desktop Work Zone layout is
 * untouched, and lives here so the vendored CSS stays pristine.
 * ======================================================================== */

/* Global horizontal-overflow guard. `clip` clips overflow WITHOUT making the
 * element a scroll container (unlike `hidden`), so position:sticky and AOS
 * animations keep working. This is the site-wide safety net behind the
 * targeted root-cause fixes below. */
html {
  overflow-x: clip;
}

/* Embedded media (CMS map embeds / rich-text iframes) must never exceed the
 * viewport — a frequent mobile horizontal-overflow source. */
.contact-map iframe,
.contact-form-wrapper iframe,
.map-embed-wrapper iframe,
.marketing-richtext iframe {
  max-width: 100%;
  width: 100%;
  border: 0;
}

/* Oversized vertical paddings -> tall empty voids on phones.
 * resposive.css trims py-110/pt-110 only; pb-150/pt-150/pb-110/pb-80 leak. */
@media (max-width: 991.98px) {
  .pt-150 {
    padding-top: 90px;
  }
  .pb-150 {
    padding-bottom: 90px;
  }
  .pb-110 {
    padding-bottom: 70px;
  }
}
@media (max-width: 575.98px) {
  .pt-150 {
    padding-top: 60px;
  }
  .pb-150 {
    padding-bottom: 60px;
  }
  .pb-110 {
    padding-bottom: 48px;
  }
  .pb-80 {
    padding-bottom: 40px;
  }
}

/* About page 12px horizontal scroll: `.row.g-5` (-24px gutters) overshoots the
 * container's 12px padding once columns stack. Shrink the gutter on mobile —
 * root-cause fix, scoped so no other `.row.g-5` is affected. */
@media (max-width: 991.98px) {
  .about-company .row.g-5 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
  }
}

/* Inner-page breadcrumb hero (`.w-breadcrumb-area`) renders a ~150px empty band
 * on every inner page (about/pricing/faq/contact/legal) on mobile. */
@media (max-width: 767.98px) {
  .w-breadcrumb-area {
    padding: 90px 0 50px;
  }
}
@media (max-width: 575.98px) {
  .w-breadcrumb-area {
    padding: 80px 0 40px;
  }
}

/* feature_grid "Built for trust": ~1024px tall void on phones from fixed card
 * min-heights stacking. Let cards size to content. */
@media (max-width: 991.98px) {
  .feature-card {
    min-height: 0;
    padding: 24px;
  }
}
@media (max-width: 575.98px) {
  .feature-card-title {
    margin-top: 16px;
  }
}

/* stats_cta: ~48px void above the stacked counters + heavy panel padding. */
@media (max-width: 991.98px) {
  .cta-area-bg .row > .col-xl-7.mt-5 {
    margin-top: 1.5rem !important;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .cta-area-bg {
    padding: 40px;
  }
}
@media (max-width: 575.98px) {
  .cta-area-bg {
    padding: 28px;
  }
}

/* core_cta / cta_banner gradient wrappers: tighten padding and make the action
 * a full-width tap target on phones. */
@media (max-width: 991.98px) {
  .cta-wrapper {
    padding: 40px;
  }
}
@media (max-width: 575.98px) {
  .cta-wrapper {
    padding: 28px;
  }
  .cta-wrapper .cta-btn-link {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: 16px;
  }
}

/* recent_jobs card fidelity (matches the Work Zone reference): style.css sets
 * `.job-post-icon{display:inline-block}` and relied on an <img> logo filling
 * the disc. Our inline placeholder <svg stroke="currentColor"> instead sat at
 * the TOP of the circle in the dark body-text colour. Centre it and make it a
 * white glyph; then give the cards equal height with the Apply button pinned
 * to the bottom so varied title lengths don't leave the grid ragged. */
.job-post-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.recentJob .swiper-slide {
  height: auto;
}
.recentJob .job-post {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.recentJob .job-post > .d-flex.flex-column {
  flex: 1 1 auto;
  justify-content: flex-start;
}
.recentJob .job-post .w-btn-primary-xl {
  margin-top: auto;
}

/* recent_jobs: shrink the brand placeholder disc on phones so the card isn't
 * dominated by an oversized empty circle. */
@media (max-width: 575.98px) {
  .job-post-icon {
    width: 84px;
    height: 84px;
    margin-bottom: 20px;
  }
}

/* featured_categories: let cards grow so long JP/PT category names wrap. */
@media (max-width: 991.98px) {
  .feature-category-card {
    height: auto;
    min-height: 230px;
  }
}
@media (max-width: 575.98px) {
  .feature-category-card {
    padding: 32px 24px;
  }
}

/* hero: stop the absolutely-positioned search button overlapping the input on
 * the narrowest phones — stack it full-width beneath the field. */
@media (max-width: 575.98px) {
  .hero-form-wrapper {
    flex-wrap: wrap;
  }
  .hero-form-wrapper .hero-form-btn {
    position: static;
    width: 100%;
    margin: 8px 0 0;
    justify-content: center;
  }
}

/* provider_showcase: CSS backstop so freelancer cards never render cramped
 * 2-up on the narrowest phones (pairs with the row-cols template change). */
@media (max-width: 575.98px) {
  .top-sellers-area .row-cols-2 > * {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* testimonials: relieve edge-cramping on the narrowest phones. */
@media (max-width: 575.98px) {
  .testimonial-content {
    padding: 20px 18px;
  }
  .testimonial-meta {
    padding: 16px 18px;
  }
}

/* faq inner page: branded accordion sizing on phones. */
@media (max-width: 575.98px) {
  .accordion .accordion-button {
    padding: 16px 18px;
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------------------
 * Portrait-only on phones. The PWA manifest locks orientation when installed;
 * this overlay covers the in-browser case. It is shown ONLY on short-landscape
 * viewports (max-height 500px) so phones in landscape get a rotate prompt while
 * tablets and desktops (taller landscape viewports) are never affected.
 * ------------------------------------------------------------------------- */
.rotate-portrait-overlay {
  display: none;
}
@media (orientation: landscape) and (max-height: 500px) {
  .rotate-portrait-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: linear-gradient(99deg, #13544e 0%, #06131c 100%);
    color: var(--white);
  }
  .rotate-portrait-inner {
    max-width: 320px;
  }
  .rotate-portrait-inner svg {
    margin-bottom: 16px;
    animation: rotate-hint 1.8s ease-in-out infinite;
  }
  .rotate-portrait-inner p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
  }
  /* Freeze the page behind the overlay. */
  body {
    overflow: hidden;
  }
}
@keyframes rotate-hint {
  0%,
  60% {
    transform: rotate(0deg);
  }
  80%,
  100% {
    transform: rotate(-90deg);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   SP-1 RESPONSIVE PATCHES (2026-06-13)
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Footer newsletter pill (style.css:3103 is a side-by-side flex pill with no
   mobile rule) stacks to a column on the narrowest phones so the input doesn't
   get cramped and the Subscribe button can't clip. Mirrors the hero-form fix. */
@media (max-width: 575.98px) {
  .footer-newsletter-form {
    flex-direction: column;
    border-radius: 16px;
  }
  .footer-newsletter-form .form-control,
  .footer-newsletter-form .footer-newsletter-btn {
    width: 100%;
  }
}

/* 2. In the 768–1199px tablet band the desktop header is NOT position:absolute
   (vendor switches to absolute only >=1199.5px), yet .hero-one keeps its 170px
   top padding (style.css:1106) and .w-breadcrumb-area its ~150px — leaving a
   tall empty gap below the now in-flow header. Trim for that band only. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .hero-one {
    padding-top: 110px;
  }
  .w-breadcrumb-area {
    padding-top: 110px;
    padding-bottom: 40px;
  }
}