/* =========================================================
   TASISO CAREERS — Public stylesheet
   Palette: #FF8C00 orange · #262626 text · Open Sans
   Loads in addition to the main style.css
   ========================================================= */

:root {
  --tas-orange:      rgb(255, 140, 0);
  --tas-orange-600:  rgb(230, 120, 0);
  --tas-orange-700:  rgb(200, 100, 0);
  --tas-orange-050:  rgba(255, 140, 0, 0.08);
  --tas-orange-100:  rgba(255, 140, 0, 0.18);

  --tas-text:        rgb(38, 38, 38);
  --tas-text-soft:   rgba(38, 38, 38, 0.65);
  --tas-text-muted:  rgba(38, 38, 38, 0.45);
  --tas-border:      #e8eaef;
  --tas-surface:     #ffffff;
  --tas-bg:          #fbfbfd;

  --bs-primary:         rgb(255, 140, 0);
  --bs-primary-rgb:     255, 140, 0;
  --bs-link-color:      rgb(230, 120, 0);
  --bs-link-hover-color:rgb(200, 100, 0);
}

/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */
body {
  font-family: "Open Sans", system-ui, sans-serif;
  color: var(--tas-text);
  background: var(--tas-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", "Open Sans", sans-serif;
  color: var(--tas-text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------
   Fixed-header spacer
   The layout wraps in <main class="mt-5 pt-5">, but the hero
   on the homepage is exception. This guarantees inner pages
   start below the nav.
   --------------------------------------------------------- */
#main { scroll-margin-top: 90px; }

/* ---------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------- */
.breadcrumbs {
  padding: 1.25rem 0 0.75rem;
  background: transparent;
}
.breadcrumbs .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.breadcrumbs h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  color: var(--tas-text);
}
.breadcrumbs ol {
  display: flex;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .85rem;
  color: var(--tas-text-muted);
}
.breadcrumbs ol li + li::before {
  content: "/";
  margin-right: .5rem;
  color: var(--tas-text-muted);
}
.breadcrumbs ol a {
  color: var(--tas-orange-700);
  text-decoration: none;
}
.breadcrumbs ol a:hover { text-decoration: underline; }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn-primary,
.btn-tasiso {
  --bs-btn-bg: var(--tas-orange);
  --bs-btn-border-color: var(--tas-orange);
  --bs-btn-hover-bg: var(--tas-orange-600);
  --bs-btn-hover-border-color: var(--tas-orange-600);
  --bs-btn-active-bg: var(--tas-orange-700);
  --bs-btn-active-border-color: var(--tas-orange-700);
  --bs-btn-color: #1c1c1c;
  --bs-btn-hover-color: #1c1c1c;
  --bs-btn-active-color: #1c1c1c;
  font-weight: 600;
  border-radius: .55rem;
}

.btn-outline-primary {
  --bs-btn-color: var(--tas-orange-700);
  --bs-btn-border-color: var(--tas-orange);
  --bs-btn-hover-bg: var(--tas-orange);
  --bs-btn-hover-border-color: var(--tas-orange);
  --bs-btn-hover-color: #1c1c1c;
  --bs-btn-active-bg: var(--tas-orange-600);
  --bs-btn-active-border-color: var(--tas-orange-600);
  --bs-btn-active-color: #1c1c1c;
  font-weight: 600;
  border-radius: .55rem;
}

.btn-success {
  background: var(--tas-orange);
  border-color: var(--tas-orange);
  color: #1c1c1c;
  font-weight: 600;
}
.btn-success:hover,
.btn-success:focus {
  background: var(--tas-orange-600);
  border-color: var(--tas-orange-600);
  color: #1c1c1c;
}

/* ---------------------------------------------------------
   Job cards (list page)
   --------------------------------------------------------- */
#main .card {
  border: 1px solid var(--tas-border);
  border-radius: 1rem;
  background: var(--tas-surface);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#main .card.shadow-sm {
  box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
}
#main .card.shadow-sm:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
  border-color: var(--tas-orange-100);
}

/* Job title links inside cards */
#main .card h3 a,
#main .card h5 a {
  color: var(--tas-text);
  text-decoration: none;
  transition: color .15s ease;
}
#main .card h3 a:hover,
#main .card h5 a:hover {
  color: var(--tas-orange-700);
}

/* ---------------------------------------------------------
   Badges
   --------------------------------------------------------- */
.badge.bg-warning {
  background: var(--tas-orange) !important;
  color: #1c1c1c !important;
  font-weight: 600;
  border-radius: .45rem;
  padding: .35em .6em;
}
.badge.bg-primary {
  background: var(--tas-orange-600) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------
   Form controls
   --------------------------------------------------------- */
.form-control,
.form-select {
  border-color: #dfe3ea;
  border-radius: .55rem;
  padding: .55rem .85rem;
  font-size: .95rem;
  color: var(--tas-text);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--tas-orange);
  box-shadow: 0 0 0 .2rem var(--tas-orange-100);
  outline: none;
}
.form-label {
  font-weight: 600;
  font-size: .88rem;
  margin-bottom: .35rem;
  color: var(--tas-text);
}
.form-text { color: var(--tas-text-muted); }

/* ---------------------------------------------------------
   Alerts
   --------------------------------------------------------- */
.alert-success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
  border-radius: .65rem;
}
.alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
  border-radius: .65rem;
}
.alert-info {
  background: var(--tas-orange-050);
  border-color: var(--tas-orange-100);
  color: var(--tas-orange-700);
  border-radius: .65rem;
}
.alert-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
  border-radius: .65rem;
}

/* ---------------------------------------------------------
   Apply / Edit forms — section cards
   --------------------------------------------------------- */
#main .card.p-4 > h5,
#main .card.p-4 > h6 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
#main .card.p-4 > h5 i,
#main .card.p-4 > h6 i {
  color: var(--tas-orange);
}

/* ---------------------------------------------------------
   Repeatable rows (experience, education, skills…)
   --------------------------------------------------------- */
.repeat-row {
  background: #fcfcfe;
  border: 1px dashed var(--tas-border);
  border-radius: .75rem;
  padding: 1rem;
  margin-bottom: .75rem;
  position: relative;
  transition: border-color .15s ease;
}
.repeat-row:hover { border-color: var(--tas-orange-100); }

.repeat-row .btn-close {
  opacity: .55;
  transition: opacity .15s ease;
}
.repeat-row .btn-close:hover { opacity: 1; }

.repeat-row .btn-outline-danger {
  --bs-btn-color: #dc2626;
  --bs-btn-border-color: #fca5a5;
  --bs-btn-hover-bg: #dc2626;
  --bs-btn-hover-border-color: #dc2626;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #b91c1c;
  --bs-btn-active-border-color: #b91c1c;
  --bs-btn-active-color: #fff;
  font-weight: 600;
}

/* "+ Add" buttons */
.btn-outline-primary[data-add-row] {
  font-size: .82rem;
  padding: .3rem .75rem;
}

/* ---------------------------------------------------------
   Job detail page
   --------------------------------------------------------- */
#main h1 {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
#main h2.h5 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 1.5rem;
  color: var(--tas-text);
}

/* Detail page sidebar card */
#main .col-lg-4 .card {
  position: sticky;
  top: 90px;
}
#main .col-lg-4 .card .btn-primary {
  padding: .7rem 1rem;
  font-size: 1rem;
}

/* ---------------------------------------------------------
   Thanks page
   --------------------------------------------------------- */
#main section.text-center h1 {
  font-size: 2.2rem;
  font-weight: 800;
}
#main section.text-center .alert-warning {
  background: var(--tas-orange-050);
  border: 1px dashed var(--tas-orange-100);
  color: var(--tas-orange-700);
  word-break: break-all;
}
#main section.text-center .alert-warning a {
  color: var(--tas-orange-700);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .85rem;
  word-break: break-all;
}

/* ---------------------------------------------------------
   Pagination
   --------------------------------------------------------- */
.pagination .page-link {
  color: var(--tas-text);
  border-color: var(--tas-border);
  border-radius: .45rem;
  margin: 0 2px;
}
.pagination .page-item.active .page-link {
  background: var(--tas-orange);
  border-color: var(--tas-orange);
  color: #1c1c1c;
  font-weight: 600;
}
.pagination .page-link:hover {
  color: var(--tas-orange-700);
  background: var(--tas-orange-050);
  border-color: var(--tas-orange-100);
}

/* ---------------------------------------------------------
   Small helpers
   --------------------------------------------------------- */
.text-tasiso { color: var(--tas-orange) !important; }
.bg-tasiso   { background: var(--tas-orange) !important; color: #1c1c1c !important; }

/* ---------------------------------------------------------
   Rich job content (WYSIWYG output)
   --------------------------------------------------------- */
.job-content {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(38, 38, 38, 0.82);
}
.job-content > *:first-child { margin-top: 0; }
.job-content > *:last-child  { margin-bottom: 0; }

.job-content p {
  margin: 0 0 1rem;
}
.job-content ul,
.job-content ol {
  padding-left: 1.4rem;
  margin: 0 0 1rem;
}
.job-content li {
  margin-bottom: .35rem;
}
.job-content strong,
.job-content b {
  color: rgb(38, 38, 38);
  font-weight: 700;
}
.job-content h1,
.job-content h2,
.job-content h3,
.job-content h4 {
  font-family: "Montserrat", "Open Sans", sans-serif;
  color: rgb(38, 38, 38);
  margin: 1.5rem 0 .75rem;
  letter-spacing: -0.01em;
}
.job-content h3 { font-size: 1.15rem; }
.job-content h4 { font-size: 1.05rem; }
.job-content a {
  color: rgb(200, 100, 0);
  text-decoration: underline;
}
.job-content a:hover { color: rgb(255, 140, 0); }
.job-content blockquote {
  border-left: 4px solid rgb(255, 140, 0);
  background: rgba(255, 140, 0, 0.05);
  padding: .75rem 1rem;
  margin: 1rem 0;
  border-radius: .35rem;
  color: rgba(38, 38, 38, 0.75);
  font-style: italic;
}
.job-content img {
  max-width: 100%;
  height: auto;
  border-radius: .5rem;
  margin: .5rem 0;
}
.job-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.job-content table th,
.job-content table td {
  border: 1px solid #e8eaef;
  padding: .6rem .75rem;
  text-align: left;
}
.job-content table th {
  background: #fbfbfd;
  font-weight: 600;
}