/* =====================================================================
   jobaaj-ui.css — shared UI layer for interview.jobaaj.com
   Loaded once from pin/header.php, AFTER theme.min.css so it can override.

   Three layers, ordered by how much they can affect an existing page:

     LAYER 1  tokens        — custom properties on :root. Inert until used.
     LAYER 2  guardrails    — the only rules that apply site-wide without
                              opt-in. Safety nets for mobile, not restyling.
     LAYER 3  components    — the design system from the homepage, re-exported
                              un-scoped. A page adopts these by changing its
                              markup; nothing changes until it does.

   Namespace is --ui-* / .ui-*. Deliberately NOT --jb-*: pin/navbarAll.php
   already defines its own --jb-ink / --jb-accent set scoped to #header, and
   reusing that name invites confusion even though the scoping would hold.

   NOTE: never add overflow-x:hidden to html/body here. It would break the
   position:sticky sidebar in pin/sidebar.php. Fix overflow at its source.
===================================================================== */


/* =====================================================================
   LAYER 1 — TOKENS
   Same palette as the .jb-prep block in index.php, promoted to :root so
   every page can reach it. Defining a custom property has no effect until
   something references it, so this section cannot change any rendering.
===================================================================== */
:root {
  /* brand blues */
  --ui-blue-700: #1E40C4;
  --ui-blue-600: #2954E0;
  --ui-blue-500: #3E68F0;
  --ui-blue-100: #DCE6FF;
  --ui-blue-50:  #EEF3FF;

  /* neutrals */
  --ui-ink:      #0F172A;
  --ui-grey-600: #52607A;
  --ui-grey-400: #8896AC;
  --ui-grey-200: #E4E8F0;
  --ui-grey-100: #F1F4F9;

  /* surfaces */
  --ui-bg:       #FFFFFF;
  --ui-bg-soft:  #F7F9FC;

  /* accents */
  --ui-green:    #16A369;
  --ui-green-50: #E9FAF3;

  /* geometry */
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 20px;

  /* elevation */
  --ui-shadow-sm: 0 6px 18px -10px rgba(15, 23, 42, .10);
  --ui-shadow-md: 0 20px 40px -20px rgba(15, 23, 42, .16);
  --ui-shadow-lg: 0 30px 60px -24px rgba(15, 23, 42, .22);

  /* card treatment shared by every .ui-card-ish surface */
  --ui-card-border: 1px solid rgba(99, 102, 241, .08);
  --ui-card-shadow: 0 1px 3px rgba(99, 102, 241, .08);
  --ui-card-shadow-hover: 0 16px 48px rgba(99, 102, 241, .16);

  /* clears the show/hide site header (~76px) plus a breathing gap.
     pin/sidebar.php hardcodes 96px today; kept in sync here. */
  --ui-header-offset: 96px;
}


/* =====================================================================
   LAYER 2 — GLOBAL GUARDRAILS
   Applies everywhere. Every rule here is deliberately at the lowest
   possible specificity (bare element selectors, no classes) so ANY
   existing theme or page rule wins over it. These only reach elements
   that had no rule at all — which is exactly the broken ones.
===================================================================== */

/* Images and embedded media must never force a page wider than the
   viewport. Specificity 0,0,1 — theme.min.css sizes .avatar-img and
   friends with class selectors, which still win. */
img,
video,
svg,
canvas {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* An <iframe> with a width attribute is the single most common cause of
   horizontal scroll on phones. */
iframe {
  max-width: 100%;
}

/* Long unbroken strings — URLs, email addresses, company slugs — are the
   other common cause. Break them rather than widen the page. */
p,
li,
dd,
td,
th,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* iOS Safari auto-zooms when a focused input's font-size is under 16px,
   and does not zoom back out afterwards. Only applied at phone widths so
   desktop keeps its intended type scale. */
@media (max-width: 575.98px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  select,
  textarea,
  .form-control,
  .form-select {
    font-size: 16px;
  }
}

/* Comfortable tap targets for the primary navigation. Scoped to nav links
   only — forcing a min-height on every .btn would distort icon buttons
   inside tables and card footers. */
@media (max-width: 991.98px) {
  .navbar-nav .nav-link,
  .offcanvas .nav-link,
  .navbar-nav .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Opt-in escape hatch for anything genuinely too wide to reflow — wide
   tables, code blocks, diagrams. Scrolls itself instead of the page.
   Bootstrap's .table-responsive already does this for tables; use this
   for everything else. */
.ui-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}


/* =====================================================================
   LAYER 3 — COMPONENTS (opt-in)
   The homepage design system, available to any page that asks for it by
   class. Nothing below matches existing markup, so adding this file
   changes no current page.
===================================================================== */

/* ---------- section shell ---------- */
.ui-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
}

.ui-section--soft {
  background: var(--ui-bg-soft);
}

.ui-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- section heading ---------- */
.ui-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 60px;
}

.ui-section-head--left {
  text-align: left;
  margin: 0 0 44px;
  max-width: 620px;
}

.ui-section-head h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ui-ink);
  margin: 0 0 14px;
}

.ui-section-head p {
  color: var(--ui-grey-600);
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0;
}

/* ---------- eyebrow pill ---------- */
.ui-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-blue-600);
  background: var(--ui-blue-50);
  border: 1px solid var(--ui-blue-100);
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.ui-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ui-blue-600);
}

/* ---------- card ---------- */
.ui-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ui-bg);
  border: var(--ui-card-border);
  border-radius: 16px;
  box-shadow: var(--ui-card-shadow);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1),
              box-shadow .3s ease,
              border-color .3s ease;
}

.ui-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ui-card-shadow-hover);
  border-color: rgba(99, 102, 241, .2);
}

.ui-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ui-card__body h3,
.ui-card__body h4 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ui-ink);
  margin: 0 0 8px;
}

.ui-card__body p {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--ui-grey-600);
  flex: 1;
  margin: 0 0 16px;
}

/* ---------- buttons ---------- */
.ui-btn-primary,
.ui-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15.5px;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
}

.ui-btn-primary {
  background: var(--ui-blue-600);
  color: #fff;
  padding: 15px 26px;
  border: none;
  box-shadow: 0 14px 28px -10px rgba(41, 84, 224, .45);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.ui-btn-primary:hover {
  transform: translateY(-2px);
  background: var(--ui-blue-700);
  box-shadow: 0 18px 32px -8px rgba(41, 84, 224, .5);
  color: #fff;
}

.ui-btn-secondary {
  background: #fff;
  color: var(--ui-ink);
  padding: 15px 24px;
  border: 1.5px solid var(--ui-grey-200);
  transition: border-color .18s ease, background .18s ease;
}

.ui-btn-secondary:hover {
  border-color: var(--ui-blue-500);
  background: var(--ui-blue-50);
  color: var(--ui-ink);
}

/* ---------- responsive grid ---------- */
/* auto-fit means this needs no breakpoints of its own — it reflows from
   4-up to 1-up on its own as the container narrows. This is the default
   any page should reach for instead of hand-written column rules. */
.ui-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.ui-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.ui-grid--tight {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}


/* =====================================================================
   COMPONENT RESPONSIVE BEHAVIOUR
===================================================================== */
@media (max-width: 991.98px) {
  .ui-section {
    padding: 76px 0;
  }
}

@media (max-width: 575.98px) {
  .ui-section {
    padding: 56px 0;
  }

  .ui-wrap {
    padding: 0 20px;
  }

  .ui-section-head {
    margin-bottom: 36px;
  }

  /* full-width CTAs read better than a stranded pill on a phone */
  .ui-btn-primary,
  .ui-btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-card,
  .ui-btn-primary,
  .ui-btn-secondary {
    transition: none;
  }

  .ui-card:hover,
  .ui-btn-primary:hover {
    transform: none;
  }
}