/* ==========================================================================
   TechBridge overrides
   Loaded AFTER style.css (the template stylesheet, untouched). Everything
   in this file is additive: brand tokens re-declared for clarity/ownership,
   plus the small set of new classes and fixes this build needed that the
   template didn't already provide. Do not edit style.css directly — see
   CLAUDE.md "Brand tokens" section for the rule.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand tokens
   Same values as the template's :root (assets/css/style.css ~line 40-90).
   Re-declared here, not changed, so this file is the single place a future
   rebrand touches. If you change a colour, change it ONLY here.
   -------------------------------------------------------------------------- */
:root {
  --rts-para: #6B7280;
  --rts-heading: #111827;
  --rts-black: #000000;
  --rts-white: #ffffff;
  --rts-neon: #7EEA57;
  --btn-color: #7EEA57;
  --heading-color: #002524;
  --heading-color-2: #DFFF03;
  --heading-color-3: #FAFFD7;
  --heading-color-4: #34A853;
  --heading-color-5: #EBFFF1;
  --rts-border: rgba(0, 37, 36, 0.1);
}

/* --------------------------------------------------------------------------
   2. Accessibility — skip link, focus states
   -------------------------------------------------------------------------- */
.skip-to-content {
  position: absolute;
  top: -60px;
  left: 0;
  background: var(--heading-color);
  color: var(--rts-white);
  padding: 12px 24px;
  z-index: 10000;
  transition: top 0.2s ease;
  border-radius: 0 0 6px 0;
}

.skip-to-content:focus {
  top: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--heading-color-4);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Hero dual-CTA layout
   -------------------------------------------------------------------------- */
.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   4. Outline button variant (new — template only shipped btn-primary)
   -------------------------------------------------------------------------- */
.rts-btn.btn-outline {
  background: transparent;
  color: var(--heading-color);
  border: 2px solid var(--heading-color);
  padding: 14px 32px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: var(--font-primary);
  font-weight: var(--f-semi-bold);
  font-size: 16px;
  transition: var(--transition);
}

.rts-btn.btn-outline:hover {
  background: var(--heading-color);
  color: var(--rts-white);
}

.rts__main__header .main__right__btn .rts-btn.btn-outline {
  padding: 9px 30px;
}

/* The template's header only ever shipped one button in .main__right__btn,
   so it never needed a layout rule for multiple buttons. This build added
   a second (dual "Hire Talent" / "Find a Job" CTA), which fell back to
   default block stacking without this. */
.rts__main__header .main__right__btn {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   5. Responsiveness fixes for the merged single page
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta-group .rts-btn {
    justify-content: center;
    max-width: 100%;
  }
}

/* Header on mobile/tablet (below the 992px point where the hamburger
   appears, per Bootstrap's d-lg-none on .offcanvas-toggle): show just
   logo + hamburger, no CTA buttons crammed into the header bar. Both
   "Hire Talent" and "Find a Job" move into the offcanvas menu instead
   (see .offcanvas-cta-group below) — full nav + both CTAs are still one
   tap away via the hamburger. */
@media (max-width: 991px) {
  .rts__main__header .main__right__btn {
    display: none;
  }
}

/* Offcanvas mobile menu — CTA buttons, placed under the nav links.
   Mirrors the header's dual-CTA (Hire Talent / Find a Job), which the
   rule above hides from the mobile header bar itself. */
.offcanvas-cta-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}

.offcanvas-cta-group .rts-btn {
  justify-content: center;
  max-width: 100%;
}

/* Hero on mobile: shown as a discrete 16:9 image block above the text
   content, instead of desktop/tablet's full-bleed background-image with
   text overlaid on top. Hidden by default (desktop/tablet keep the
   original full-bleed style, untouched); switched on only below 768px. */
.hero-mobile-image {
  display: none;
}

@media (max-width: 767px) {
  .rts__banner__area {
    background-image: none !important;
  }

  .hero-mobile-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .rts-banner-wrapper-two {
    padding-top: 40px;
    padding-bottom: 60px;
  }
}

/* --------------------------------------------------------------------------
   6. Layout fixes — About section
   -------------------------------------------------------------------------- */

/* The template's heading in this slot has a 150px bottom margin, clearly
   meant for a layout where more content/whitespace sits between the
   heading and what follows. This build's About heading is immediately
   followed by its description paragraph, so that margin left a large,
   awkward empty gap. Collapse it back down to the section-title's own
   35px spacing (matches every other section-title on the page). */
.rts__about__area .about__content.style-2 .section-title .heading-title-two {
  margin-bottom: 20px;
}

/* The template's 3-stat-column layout (rts__about__items) was designed for
   number / IMAGE / number — the middle slot (:nth-child(2)) has image-only
   styling (padding: 0, no background). This build uses three real stat
   cards instead of an image in the middle, so that slot rendered with no
   background/padding, leaving a visible empty gap next to the about photo.
   Give the middle card the same dark-card styling as the first. */
.rts__about__items .item:nth-child(2) {
  background: var(--heading-color);
  padding: 30px 0 30px 30px;
  border-radius: 20px 20px 20px 0;
}

/* --------------------------------------------------------------------------
   7. Layout fix — Hiring Models cards
   The template's pricing cards showed title → price ($X/month, 80px font +
   40px margin) → button/desc → list. This build repurposes the section as
   a hiring-model comparison with no price, so that ~120px+ block is simply
   missing — the card's own generous 80px top/bottom padding assumed it was
   there, leaving a large empty gap below the list. Trim bottom padding
   only (keeps top spacing/title position untouched) so the card height
   matches what it actually contains.
   -------------------------------------------------------------------------- */
.rts__price__area .price__item__wrapper .price__single__item .price__content {
  padding-bottom: 40px;
}

.rts__price__area .price__item__wrapper .price__single__item .price__content .title {
  margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   8. Accessibility — contrast fixes (measured, see PROJECT-LOG.md Phase 3)
   -------------------------------------------------------------------------- */

/* Template's hero .banner-title/.desc/.count-title are all white or light
   grey, sized for a dark photo overlay behind data-bg-src. The template's
   own placeholder banner image (assets/images/banner/2.webp) is a plain
   light-grey "1920 x 930" placeholder graphic, not a photo — so until the
   client supplies a real (and reliably dark-enough) hero image, white text
   here measures under WCAG AA against it (title 1:1, desc 1.52:1, stat
   1:1). Rather than depend on an unverified future photo for contrast,
   these three are set to the template's own dark/body tokens — already
   used everywhere else on the page — so the hero passes AA regardless of
   what background image ends up here. Revisit if the client's hero photo
   is dark enough to safely go back to white text. */
.rts-banner-wrapper-two .banner-content .banner-title,
.rts-banner-wrapper-two .banner-content .desc {
  color: var(--heading-color);
}

.rts-banner-wrapper-two .banner-reivew .banner-client-count .client-count .count-title,
.rts-banner-wrapper-two .banner-reivew .banner-client-count .client-count .desc {
  color: var(--heading-color);
}

/* Footer "Location & Contact" widget: the address lines are plain text (not
   links), so they fell through to --rts-para (3.37:1 on the dark footer —
   fails AA) instead of the widget-list link colour the design intends
   (#CCD3D3, 10.72:1). Match the sibling links explicitly. */
.footer-address-line {
  color: #CCD3D3;
}

/* --------------------------------------------------------------------------
   9. Contact form — "I'm looking to" select field
   The template's contact form only ever had text/email/password inputs
   and a textarea — no <select> — so the "I'm looking to" dropdown this
   build added had no matching CSS and fell back to the browser's tiny
   native select sizing. Match the same full-width/padding/border pattern
   as the other fields, plus a custom dropdown arrow (native select arrows
   don't reliably match custom styling cross-browser).
   -------------------------------------------------------------------------- */
.rts__contact__form .form__input select {
  width: 100%;
  padding: 20px;
  border: 1px solid var(--rts-border);
  border-radius: 10px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--rts-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  color: var(--rts-heading);
  font-family: var(--font-primary);
  font-size: 16px;
  cursor: pointer;
}

.rts__contact__form .form__input select:focus {
  border-color: var(--rts-heading);
}

/* --------------------------------------------------------------------------
   10. Contact form — error message styling
   Empty by default. Phase 4 (form backend wiring) populates these with
   validation text via JS; the aria-describedby wiring on each field is
   already in place in index.html so this needs no further markup changes.
   -------------------------------------------------------------------------- */
.field-error {
  display: block;
  color: var(--color-danger, #ff0003);
  font-size: 13px;
  margin-top: 6px;
  min-height: 1em;
}

.field-error:empty {
  margin-top: 0;
}

/* Honeypot spam-trap field — hidden from sighted users and screen readers,
   but present in the DOM for bots that fill in every field indiscriminately. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#form-messages {
  font-weight: 600;
}

#form-messages.is-success {
  color: var(--color-success, #26cf4b);
}

#form-messages.is-error {
  color: var(--color-danger, #ff0003);
}

button[aria-busy="true"] {
  opacity: 0.7;
  cursor: wait;
}

/* --------------------------------------------------------------------------
   10a. Contact form — success popup
   Shown by techbridge.js after a successful submission. Hidden by default;
   .is-visible toggles both the overlay and a simple fade/scale-in on the
   modal itself.
   -------------------------------------------------------------------------- */
.form-success-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 37, 36, 0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.form-success-overlay.is-visible {
  display: flex;
}

.form-success-modal {
  background: var(--rts-white);
  border-radius: 20px;
  padding: 48px 40px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  position: relative;
  animation: form-success-in 0.25s ease-out;
}

@keyframes form-success-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.form-success-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: 0;
  font-size: 20px;
  color: var(--rts-para);
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}

.form-success-close:hover {
  color: var(--heading-color);
}

.form-success-icon {
  font-size: 56px;
  color: var(--heading-color-4);
  margin-bottom: 20px;
}

.form-success-modal h2 {
  font-size: 24px;
  font-weight: var(--f-semi-bold);
  color: var(--heading-color);
  margin-bottom: 10px;
}

.form-success-modal p {
  color: var(--rts-para);
  margin-bottom: 28px;
}

.form-success-modal .form-success-ok {
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   11. Motion — respect prefers-reduced-motion
   Template animates via GSAP/WOW/odometer with no reduced-motion guard.
   JS-side handling in techbridge.js short-circuits the animation libraries;
   this covers the pure-CSS transitions/animations.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   12. WhatsApp floating button
   Replaces the template's back-to-top button (same fixed position/size,
   different purpose). Always visible — WhatsApp buttons are conventionally
   a persistent contact affordance, not scroll-triggered like the button it
   replaces. Slow breathing scale animation to draw the eye without being
   distracting; effectively disabled under prefers-reduced-motion by the
   global animation-duration/iteration-count !important rule above (runs
   once, near-instantly, rather than looping).
   -------------------------------------------------------------------------- */
.whatsapp-float {
  background: #25d366;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 999;
  right: 20px;
  bottom: 30px;
  color: #fff;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: var(--transition);
  animation: whatsapp-breathe 2.5s ease-in-out infinite;
}

.whatsapp-float:hover {
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

@keyframes whatsapp-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

/* --------------------------------------------------------------------------
   13. Footer — "Powered by" credit link
   Template's .copyright p is styled white with no rule for a nested <a>,
   so it fell back to browser-default blue/underline. Match the surrounding
   footer text colour, with underline + neon hover so it still reads as a
   link.
   -------------------------------------------------------------------------- */
.rts__footer__area__two .footer__copyright__wrapper .footer__copyright .copyright p a {
  color: var(--rts-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rts__footer__area__two .footer__copyright__wrapper .footer__copyright .copyright p a:hover {
  color: var(--rts-neon);
}

/* --------------------------------------------------------------------------
   14. Reduced vertical spacing between sections
   Client asked to tighten the gap between sections: 84px desktop/tablet
   (was 140px/120px via the template's rts-section-gap / -gap2 / -gapTop2 /
   -gapBottom classes, used across every major section on the page), 64px
   mobile (was 60px). Overriding the shared classes here — not style.css —
   applies the new spacing everywhere at once, consistent with how every
   other spacing/colour override in this project works.
   -------------------------------------------------------------------------- */
.rts-section-gap,
.rts-section-gap2 {
  padding: 84px 0;
}

.rts-section-gapTop,
.rts-section-gapTop2 {
  padding-top: 84px;
}

.rts-section-gapBottom {
  padding-bottom: 84px;
}

@media screen and (max-width: 767px) {
  .rts-section-gap,
  .rts-section-gap2 {
    padding: 64px 0;
  }

  .rts-section-gapTop,
  .rts-section-gapTop2 {
    padding-top: 64px;
  }

  .rts-section-gapBottom {
    padding-bottom: 64px;
  }
}

/* --------------------------------------------------------------------------
   15. Hero eyebrow
   "Connecting Talent, Building Futures" — from the client's logo asset
   pack's tagline variants. Small uppercase label with a short green rule
   on either side, sitting above the H1. A distinct visual pattern from
   the template's existing pill-badge .sub-title (used for section labels
   like "Hiring Models"), so built as its own class rather than reusing
   that one.
   -------------------------------------------------------------------------- */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  font-weight: var(--f-semi-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rts-para);
  margin-bottom: 16px;
}

.hero-eyebrow::before,
.hero-eyebrow::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--rts-neon);
  flex-shrink: 0;
}

/* Keep the eyebrow on one line at narrow widths — at the default font
   size/gap the phrase wraps to two lines on small phones, which throws
   off the closing rule's position (it ends up centered against the whole
   wrapped block instead of sitting at the visual end of the text).
   Shrinking font size and gap keeps it fitting on one line instead. */
@media (max-width: 400px) {
  .hero-eyebrow {
    font-size: 11px;
    gap: 10px;
    white-space: nowrap;
  }

  .hero-eyebrow::before,
  .hero-eyebrow::after {
    width: 18px;
  }
}