/* ================================================================
   AllJobsPH — Design System foundation (v4)
   Re-based on Quixly's design mechanics (audited from
   quixly/public/assets/css/style.css):

   - Single rounded, friendly sans-serif (Nunito) for both headings
     and body copy, at bold/black weights for headings — no separate
     display face.
   - A warm violet brand palette (Quixly's --purple family) in place
     of the previous blue system, plus Quixly's neutral gray-50..900
     ramp.
   - Full "pill" radius on buttons, nav chrome, and badges instead of
     a squircle scale; cards use a fixed, generous rounded-rectangle
     radius with no radius-morph on hover (Quixly cards only lift +
     deepen shadow on hover, they don't change radius).
   - Simple single-pass shadows (Quixly's --shadow-sm/md/lg) plus a
     colored "glow" shadow for primary buttons, replacing the
     multi-layer ambient shadow system.

   Classes remain AllJobsPH's own ajp- prefixed names; no Quixly
   markup/class names are reused — only the underlying design
   mechanics (palette, type, radius, shadow, easing).
   ================================================================ */

/* ── Variables ──
   Same mechanics as Quixly's palette (a primary/dark/light trio one
   Tailwind shade-step apart, feeding gradients, glows, and hover
   states) but re-hued to AllJobsPH's own blue instead of Quixly's
   violet — chosen at the 700/800/600 shade steps (rather than a
   lighter 500/600/400) specifically so it stays rich enough to blend
   into the hero's dark photo scrim and the dark footer, the same way
   Quixly's deeper violet-700 reads against its own dark surfaces. */
:root {
  --ajp-primary:       #1d4ed8;
  --ajp-primary-dark:  #1e40af;
  --ajp-primary-light: #2563eb;
  --ajp-primary-50:    #eff6ff;
  --ajp-primary-100:   #dbeafe;
  --ajp-secondary:     #2563eb;
  --ajp-success:       #10b981;
  --ajp-warning:       #f59e0b;
  --ajp-danger:        #ef4444;
  --ajp-accent:        #4ade80;

  /* Quixly's neutral surface system — plain white cards on a very
     light gray page background, near-black text. */
  --ajp-bg:            #f9fafb;
  --ajp-card:          #ffffff;
  --ajp-text:          #1a1a1a;
  --ajp-text-muted:    #6b7280;
  --ajp-border:        #e5e7eb;
  --ajp-footer-bg:     #111827;

  --ajp-gray-50:       #f9fafb;
  --ajp-gray-100:      #f3f4f6;
  --ajp-gray-400:      #9ca3af;

  --ajp-font-heading:  'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --ajp-font-body:     'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Quixly leans on two radius idioms: full pills (buttons, nav,
     badges, chips) and a fixed generous rounded-rectangle for cards
     (16-20px) that does NOT grow on hover — only shadow/lift change.
     Scale calibrated directly off Quixly's own values: small icon
     boxes/dropdown items ~7-10px, feature icons/tags ~12-16px, cards
     16-20px, hero/profile panels 20-24px. */
  --ajp-radius-xs:         0.5rem;
  --ajp-radius-sm:         0.75rem;
  --ajp-radius-md:         1rem;
  --ajp-radius-lg:         1.25rem;
  --ajp-radius-xl:         1.5rem;
  --ajp-radius-pill:       999px;

  --ajp-radius-btn:        var(--ajp-radius-pill);
  --ajp-radius-btn-hover:  var(--ajp-radius-pill);
  --ajp-radius-input:      var(--ajp-radius-pill);
  --ajp-radius-card:       1.25rem;
  --ajp-radius-card-hover: 1.25rem;

  /* Quixly's single-pass shadow scale, plus a colored glow used on
     primary CTAs. */
  --ajp-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.07);
  --ajp-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.10);
  --ajp-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.14);
  --ajp-shadow-glow: 0 8px 30px rgba(29, 78, 216, 0.3);

  --ajp-ease:          ease;
  --ajp-transition:    0.3s var(--ajp-ease);
  --ajp-transition-fast: 0.15s var(--ajp-ease);

  /* Quixly runs its nav and every content container (including its
     sidebar+content library layout) off the same single width — 900px.
     AllJobsPH mirrors that here: the floating nav below reads off this
     same variable instead of its own hardcoded number, so header, page
     content, and footer can never drift out of alignment again. */
  --ajp-container-max: 960px;
}

/* ── Fluid root scale ──
   Mirrors Tiptap's :root font-size step-down (20px → 19px @992 →
   18px @568), but expressed in % (not fixed px) so it still respects
   the visitor's browser zoom/text-size preference, and aligned to
   AllJobsPH's own tablet/mobile-portrait breakpoints. Every rem-based
   value in this design system (type, spacing, radius) shrinks with it. */
html {
  font-size: 100%; /* 16px */
}
@media screen and (max-width: 991px) {
  html { font-size: 93.75%; } /* ~15px */
}
@media screen and (max-width: 479px) {
  html { font-size: 87.5%; } /* ~14px */
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Belt-and-suspenders against horizontal scroll: `vw`-based widths (used
   by the nav/mega-menu below) measure the viewport including the
   scrollbar gutter in some browsers, and any stray fixed-width child
   deep in page content only needs to slip past its container once to
   force the whole document sideways. Clipping the axis at the document
   root catches both cases without touching normal vertical scrolling. */
html, body { overflow-x: hidden; }
body {
  font-family: var(--ajp-font-body);
  color: var(--ajp-text);
  background: var(--ajp-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: var(--ajp-font-body); cursor: pointer; }
input, select, textarea { font-family: var(--ajp-font-body); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ajp-font-heading); font-weight: 800; line-height: 1.15;
  letter-spacing: -0.01em; word-break: break-word;
}

/* ── Layout utilities ──
   width: min(100% - gutter, cap) instead of max-width + fixed padding:
   at desktop widths the box lands on exactly --ajp-container-max with
   NO extra inset — matching Quixly's own content grids, which use a
   bare `max-width: 900px` with no side padding of their own (their
   section wrapper supplies the mobile gutter instead). This is also
   what keeps this container's edges flush with .ajp-nav below, which
   caps at the same variable — a fixed padding here would leave the
   nav pill's edge sitting outside the container content's edge. */
.ajp-container {
  width: min(100% - 3rem, var(--ajp-container-max)); margin: 0 auto;
}
@media screen and (max-width: 991px) { .ajp-container { width: min(100% - 2.5rem, var(--ajp-container-max)); } }
@media screen and (max-width: 479px) { .ajp-container { width: min(100% - 2rem, var(--ajp-container-max)); } }

.ajp-section { padding: 5.5rem 0; }
.ajp-section-alt {
  background: var(--ajp-card);
  border-radius: 2.5rem 2.5rem 0 0;
}
@media screen and (max-width: 991px) {
  .ajp-section { padding: 4.5rem 0; }
  .ajp-section-alt { border-radius: 2rem 2rem 0 0; }
}
@media screen and (max-width: 767px) {
  .ajp-section { padding: 3.5rem 0; }
  .ajp-section-alt { border-radius: 1.75rem 1.75rem 0 0; }
}
@media screen and (max-width: 479px) {
  .ajp-section { padding: 2.75rem 0; }
  .ajp-section-alt { border-radius: 1.5rem 1.5rem 0 0; }
}

.ajp-page-wrap { padding-top: 7rem; min-height: 70vh; min-height: 70dvh; }
.ajp-page-wrap.ajp-page-wrap-flush { padding-top: 0; }

.ajp-section-header { text-align: center; max-width: 40rem; margin: 0 auto 2.75rem; }
@media screen and (max-width: 767px) { .ajp-section-header { margin: 0 auto 2rem; } }
.ajp-section-title {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 900; margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}
.ajp-section-sub { font-size: 1rem; color: var(--ajp-text-muted); line-height: 1.7; }
.ajp-eyebrow {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ajp-primary);
  background: var(--ajp-primary-50); border: 1px solid var(--ajp-primary-100);
  padding: 0.25rem 0.75rem; border-radius: var(--ajp-radius-pill); margin-bottom: 0.875rem;
}

/* ── Responsive grid utilities ──
   Overflow-safe auto-fit grids (minmax(min(Npx, 100%), 1fr)) so a
   column's minimum width can never force horizontal scroll on narrow
   phones, while still packing as many columns as the viewport allows
   on larger screens — used across the homepage, articles, companies,
   and how-it-works listings instead of ad-hoc inline grid styles. */
.ajp-grid { display: grid; gap: 1rem; }
.ajp-grid-sm { grid-template-columns: repeat(auto-fit, minmax(min(11.25rem, 100%), 1fr)); gap: 0.875rem; }
.ajp-grid-md { grid-template-columns: repeat(auto-fit, minmax(min(13.75rem, 100%), 1fr)); gap: 1rem; }
.ajp-grid-lg { grid-template-columns: repeat(auto-fit, minmax(min(16.25rem, 100%), 1fr)); gap: 1.25rem; }
.ajp-grid-xl { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1rem; }
@media screen and (max-width: 767px) {
  .ajp-grid-lg { gap: 1rem; }
  .ajp-grid-xl { gap: 0.875rem; }
}

/* ── Buttons ──
   Quixly's button anatomy: a full pill at rest and on hover (no radius
   morph), bold weight, and a lift + deepened/colored shadow on hover
   instead of a hard color swap alone. */
.ajp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--ajp-font-body); font-size: 0.9rem; font-weight: 700;
  padding: 0.75rem 1.5rem; border-radius: var(--ajp-radius-btn);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--ajp-transition), border-color var(--ajp-transition),
    color var(--ajp-transition), transform var(--ajp-transition), box-shadow var(--ajp-transition);
  white-space: nowrap;
}
.ajp-btn:hover { transform: translateY(-2px); }
.ajp-btn:active { transition: all var(--ajp-transition-fast); transform: translateY(0); }
.ajp-btn-primary { background: var(--ajp-primary); color: #fff; box-shadow: var(--ajp-shadow-sm); }
.ajp-btn-primary:hover { background: var(--ajp-primary-dark); color: #fff; box-shadow: var(--ajp-shadow-glow); }
.ajp-btn-secondary { background: var(--ajp-secondary); color: #fff; box-shadow: var(--ajp-shadow-sm); }
.ajp-btn-secondary:hover { background: var(--ajp-primary-dark); color: #fff; box-shadow: var(--ajp-shadow-glow); }
.ajp-btn-outline { background: var(--ajp-card); color: var(--ajp-primary); border-color: var(--ajp-border); }
.ajp-btn-outline:hover { background: var(--ajp-primary-50); border-color: var(--ajp-primary-100); }
.ajp-btn-ghost { background: transparent; color: var(--ajp-text-muted); }
.ajp-btn-ghost:hover { background: var(--ajp-gray-100); color: var(--ajp-text); }
.ajp-btn-danger { background: var(--ajp-danger); color: #fff; box-shadow: var(--ajp-shadow-sm); }
.ajp-btn-danger:hover { background: #dc2626; color: #fff; box-shadow: var(--ajp-shadow-md); }
.ajp-btn-sm { padding: 0.5rem 1.125rem; font-size: 0.82rem; }
.ajp-btn-lg { padding: 0.9375rem 2rem; font-size: 1rem; }
.ajp-btn-block { display: flex; width: 100%; }
.ajp-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── Forms ── */
.ajp-form-group { margin-bottom: 1.125rem; }
.ajp-label {
  display: block; font-size: 0.85rem; font-weight: 600; color: var(--ajp-text);
  margin-bottom: 0.375rem;
}
.ajp-input, .ajp-select, .ajp-textarea {
  width: 100%; padding: 0.6875rem 1.125rem; font-size: 0.92rem;
  border: 2px solid var(--ajp-border); border-radius: var(--ajp-radius-input);
  background: var(--ajp-card); color: var(--ajp-text);
  transition: border-color var(--ajp-transition), box-shadow var(--ajp-transition);
}
/* Multi-line text reads better as a larger rounded rectangle. */
.ajp-textarea { border-radius: var(--ajp-radius-md); }
.ajp-input:focus, .ajp-select:focus, .ajp-textarea:focus {
  outline: none; border-color: var(--ajp-primary);
  box-shadow: 0 0 0 3px var(--ajp-primary-50);
}
.ajp-textarea { min-height: 7.5rem; resize: vertical; }

/* Selects strip the native OS control (arrow, inset styling, platform
   font) via appearance:none, then draw the site's own chevron as a
   background image instead of a real element, since a fake ::after
   arrow can't sit *inside* a <select> box. Extra right padding makes
   room for it so long option text never runs under the icon. Color is
   baked into the SVG (data-URI backgrounds can't read CSS variables
   reliably across browsers) — kept in sync with --ajp-text-muted /
   --ajp-primary by hand if either token changes. */
.ajp-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.7rem;
}
.ajp-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%231d4ed8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ajp-select:disabled { cursor: not-allowed; opacity: 0.6; }
/* Compact variant for inline table/row selects (status changers etc.)
   that previously reset padding via an ad-hoc inline style — same
   chevron, scaled down instead of losing it. */
.ajp-select-sm {
  padding: 0.375rem 1.75rem 0.375rem 0.625rem; font-size: 0.82rem;
  background-size: 0.6rem; background-position: right 0.625rem center;
}
.ajp-input-hint { font-size: 0.78rem; color: var(--ajp-text-muted); margin-top: 0.3125rem; }
.ajp-input-error { font-size: 0.78rem; color: var(--ajp-danger); margin-top: 0.3125rem; }
.ajp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ajp-checkbox-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--ajp-text-muted); }
@media screen and (max-width: 479px) {
  .ajp-form-row { grid-template-columns: 1fr; }
}

/* ── Tag input ──
   Multi-value text input (job-form skills field): a bordered box
   shaped like .ajp-input, holding removable chips plus a plain text
   field for typing more. Free text is always accepted alongside
   suggestions — the field never blocks on a match. Generic enough to
   reuse anywhere a multi-value list needs both suggestions and free
   text (kept in ajp-base.css rather than ajp-components.css for that
   reason). */
.ajp-tag-input {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
  width: 100%; min-height: 2.875rem; padding: 0.4375rem 0.625rem;
  border: 2px solid var(--ajp-border); border-radius: var(--ajp-radius-input);
  background: var(--ajp-card); position: relative;
  transition: border-color var(--ajp-transition), box-shadow var(--ajp-transition);
}
.ajp-tag-input:focus-within {
  border-color: var(--ajp-primary); box-shadow: 0 0 0 3px var(--ajp-primary-50);
}
.ajp-tag-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: var(--ajp-primary-50); color: var(--ajp-primary);
  font-size: 0.84rem; font-weight: 600;
  padding: 0.25rem 0.375rem 0.25rem 0.75rem; border-radius: var(--ajp-radius-pill);
}
.ajp-tag-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 0.9rem; line-height: 1; opacity: 0.7;
  transition: background var(--ajp-transition), opacity var(--ajp-transition);
}
.ajp-tag-chip-remove:hover { background: var(--ajp-primary-100); opacity: 1; }
.ajp-tag-input-field {
  flex: 1; min-width: 8rem; border: none; outline: none; background: transparent;
  font-family: var(--ajp-font-body); font-size: 0.92rem; color: var(--ajp-text);
  padding: 0.3125rem 0.25rem;
}
.ajp-tag-input-field::placeholder { color: var(--ajp-text-muted); }

/* ── Dual-range slider ──
   Two overlapping native <input type="range"> — the standard
   lightweight technique for a dual-handle slider without a JS library:
   both inputs share the same track box, pointer-events are disabled on
   the input body so clicks pass through to whichever is on top, then
   re-enabled on each browser's thumb pseudo-element so only the actual
   handles are draggable. JS keeps them from crossing and mirrors their
   values into paired number inputs. Generic primitive — reusable for
   e.g. a future salary range filter on the jobs listing sidebar. */
.ajp-range-slider {
  position: relative; height: 1.75rem; margin: 0.5rem 0;
}
.ajp-range-slider-track {
  position: absolute; top: 50%; left: 0; right: 0; height: 0.375rem;
  transform: translateY(-50%); background: var(--ajp-gray-100); border-radius: var(--ajp-radius-pill);
}
.ajp-range-slider-fill {
  position: absolute; top: 50%; height: 0.375rem;
  transform: translateY(-50%); background: var(--ajp-primary); border-radius: var(--ajp-radius-pill);
}
.ajp-range-slider-input {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.ajp-range-slider-input::-webkit-slider-runnable-track { background: transparent; }
.ajp-range-slider-input::-moz-range-track { background: transparent; }
.ajp-range-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto;
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: var(--ajp-primary); border: 2px solid #fff; box-shadow: var(--ajp-shadow-sm);
  cursor: pointer; margin-top: 0;
}
.ajp-range-slider-input::-moz-range-thumb {
  pointer-events: auto; width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: var(--ajp-primary); border: 2px solid #fff; box-shadow: var(--ajp-shadow-sm); cursor: pointer;
}

/* ── Alerts / flash messages ── */
.ajp-alert {
  display: flex; align-items: flex-start; gap: 0.625rem;
  padding: 0.8125rem 1rem; border-radius: var(--ajp-radius-md);
  font-size: 0.88rem; margin-bottom: 1.25rem; border: 1px solid transparent;
}
.ajp-alert-success { background: #f0fbf5; color: #0f6b3d; border-color: #c8ecda; }
.ajp-alert-error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.ajp-alert-warning { background: #fef8ee; color: #92400e; border-color: #fbe4bd; }
.ajp-alert-info    { background: var(--ajp-primary-50); color: var(--ajp-primary-dark); border-color: var(--ajp-primary-100); }

/* ── Card ──
   Resting shadow is barely-there (Quixly's --shadow-sm); hover deepens
   the shadow and lifts the card. Radius stays fixed, matching Quixly's
   feature/step cards (which only change shadow + transform on hover). */
.ajp-card {
  background: var(--ajp-card); border: 1px solid var(--ajp-border);
  border-radius: var(--ajp-radius-card); box-shadow: var(--ajp-shadow-sm);
  transition: box-shadow var(--ajp-transition), border-color var(--ajp-transition);
}

/* ── Badges ── */
.ajp-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.1875rem 0.625rem; border-radius: var(--ajp-radius-pill);
}
.ajp-badge-primary { background: var(--ajp-primary-50); color: var(--ajp-primary); }
.ajp-badge-success { background: #d1fae5; color: #065f46; }
.ajp-badge-warning { background: #fef3c7; color: #92400e; }
.ajp-badge-danger  { background: #fee2e2; color: #991b1b; }
.ajp-badge-neutral { background: var(--ajp-gray-100); color: var(--ajp-text-muted); }