/*
Theme Name: JobArmy - Job Board Theme
Theme URI: https://job.army/
Author: JobArmy
Author URI: https://job.army/
Description: A clean, professional theme for job board websites. Deep-green and gold palette, sticky header, multi-column footer, employer slider, testimonials, FAQ, and full Elementor Theme Builder support. Pairs with the bundled USAJOBS Board plugin to display live, daily-updated job listings, search, filters and individual job pages.
Version: 1.4.5
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jobt-theme
Tags: blog, news, custom-logo, custom-menu, featured-images, two-columns, right-sidebar, translation-ready, elementor
*/

/* ============================================================
   1. Design tokens  (names with --jobt-color-* are inherited by the plugin)
   ============================================================ */
:root {
	--jobt-color-navy: #1a4b2e;
	--jobt-color-navy-deep: #0a2016;
	--jobt-color-navy-soft: #225c3a;
	--jobt-color-gold: #c8a84b;
	--jobt-color-gold-deep: #b8902f;
	--jobt-color-ink: #15233f;
	--jobt-color-muted: #65728c;
	--jobt-color-line: #e6ebf3;
	--jobt-color-bg-soft: #f4f7fc;
	--jobt-color-sell: #d23048;
	--jobt-color-buy: #1f9d57;
	--jobt-radius-card: 16px;
	--jobt-radius-lg: 20px;
	--jobt-shadow-card: 0 10px 30px rgba(18, 38, 71, 0.08);
	--jobt-shadow-lg: 0 18px 50px rgba(14, 35, 71, 0.12);

	--jobt-container: 1180px;
	--jobt-font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
	--jobt-font-body: "Mulish", "Segoe UI", system-ui, sans-serif;
}

/* ============================================================
   2. Base / reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--jobt-font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--jobt-color-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--jobt-font-display);
	color: var(--jobt-color-navy);
	line-height: 1.15;
	margin: 0 0 0.5em;
	letter-spacing: -0.015em;
	font-weight: 700;
}

a { color: var(--jobt-color-navy); text-decoration: none; }
a:hover { color: var(--jobt-color-gold-deep); }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }

.container { max-width: var(--jobt-container); margin: 0 auto; padding: 0 24px; }
.accent { color: var(--jobt-color-gold-deep); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%); height: 1px; width: 1px;
	margin: -1px; overflow: hidden; padding: 0; position: absolute;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	background: var(--jobt-color-gold); color: var(--jobt-color-navy-deep);
	padding: 12px 20px; font-weight: 700; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ============================================================
   3. Buttons
   ============================================================ */
.btn {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--jobt-font-display); font-weight: 600; font-size: 0.95rem;
	padding: 13px 26px; border-radius: 999px; border: 2px solid transparent;
	cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
	line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--jobt-color-gold); color: var(--jobt-color-navy-deep); box-shadow: 0 8px 20px rgba(232,169,0,.32); }
.btn-primary:hover { background: var(--jobt-color-gold-deep); color: var(--jobt-color-navy-deep); box-shadow: 0 10px 26px rgba(232,169,0,.4); }
.btn-outline { border-color: rgba(255,255,255,.4); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn-ghost { border-color: var(--jobt-color-line); color: var(--jobt-color-navy); }
.btn-ghost:hover { background: var(--jobt-color-bg-soft); }

/* ============================================================
   4. Ticker (rendered above the header)
   ============================================================ */
.site-ticker { background: var(--jobt-color-navy-deep); color: #fff; overflow: hidden; }

/* ============================================================
   5. Header
   ============================================================ */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255,255,255,.92);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--jobt-color-line);
	transition: box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(14,35,71,.10); }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 74px; }

.site-branding { display: flex; align-items: center; gap: 10px; }
.site-title { font-family: var(--jobt-font-display); font-weight: 800; font-size: 1.32rem; margin: 0; letter-spacing: -0.01em; }
.site-title a { color: var(--jobt-color-navy); }
.site-description { display: none; }
.custom-logo-link { display: inline-flex; }
.custom-logo { max-height: 48px; width: auto; }

.main-navigation { margin-left: auto; }
.main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.main-navigation li { position: relative; }
.main-navigation a {
	font-family: var(--jobt-font-display); font-weight: 500; font-size: 0.96rem;
	color: var(--jobt-color-ink); padding: 9px 14px; border-radius: 9px;
	transition: color .15s, background .15s; display: block;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a { color: var(--jobt-color-navy); background: var(--jobt-color-bg-soft); }
.main-navigation .current-menu-item > a { font-weight: 600; }
.main-navigation ul ul {
	position: absolute; top: 100%; left: 0; display: none; flex-direction: column;
	min-width: 200px; background: #fff; border: 1px solid var(--jobt-color-line);
	border-radius: 12px; box-shadow: var(--jobt-shadow-card); padding: 8px; z-index: 60;
}
.main-navigation li:hover > ul { display: flex; }
.main-navigation ul ul a { font-weight: 500; }

.header-cta { margin-left: 6px; }

.menu-toggle {
	display: none; margin-left: auto; background: none;
	border: 1.5px solid var(--jobt-color-line); border-radius: 10px;
	width: 46px; height: 46px; font-size: 1.3rem; color: var(--jobt-color-navy); cursor: pointer;
}

/* ============================================================
   6. Hero
   ============================================================ */
.hero { background: linear-gradient(160deg, var(--jobt-color-navy) 0%, var(--jobt-color-navy-deep) 100%); color: #fff; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(255,198,41,.16), transparent 65%); }
.hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 22px 22px; opacity: .5; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; padding: 78px 24px 86px; }
.hero-copy h1 { color: #fff; font-size: clamp(2.3rem, 4.6vw, 3.5rem); font-weight: 800; margin: 20px 0 0; letter-spacing: -0.02em; }
.hero-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--jobt-font-display); font-weight: 700; font-size: .74rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--jobt-color-gold);
	background: rgba(255,198,41,.12); border: 1px solid rgba(255,198,41,.28);
	padding: 7px 14px; border-radius: 999px;
}
.hero-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--jobt-color-gold); }
.hero-lead { color: #c7d3ec; font-size: 1.08rem; margin: 18px 0 28px; max-width: 34ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Rate card — WHITE surface so the navy figure is always legible (contrast fix) */
.hero-rate-card { background: #fff; color: var(--jobt-color-ink); border-radius: var(--jobt-radius-lg); padding: 26px 28px; box-shadow: var(--jobt-shadow-lg); position: relative; overflow: hidden; }
.hero-rate-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(255,198,41,.28), transparent 70%); }
.hero-rate-card .label { font-family: var(--jobt-font-display); font-size: .82rem; font-weight: 600; color: var(--jobt-color-muted); margin-bottom: 4px; }
.hero-rate-card .pair { font-family: var(--jobt-font-display); font-weight: 700; color: var(--jobt-color-navy); font-size: 1.05rem; margin-bottom: 8px; }
.hero-rate-card .big { font-family: var(--jobt-font-display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 3.4rem); line-height: 1; color: var(--jobt-color-navy); margin: 6px 0 4px; letter-spacing: -0.02em; }
.hero-rate-card .big .jobt-inline-rate { color: var(--jobt-color-navy); }
.hero-rate-card .big .unit { font-size: 1.05rem; color: var(--jobt-color-muted); font-weight: 600; margin-left: 6px; }
.hero-rate-card .sub { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--jobt-color-muted); margin-top: 14px; }

.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--jobt-color-buy); box-shadow: 0 0 0 0 rgba(31,157,87,.55); animation: jobt-pulse 1.8s infinite; flex: none; }
@keyframes jobt-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,157,87,.55);} 70% { box-shadow: 0 0 0 10px rgba(31,157,87,0);} 100% { box-shadow: 0 0 0 0 rgba(31,157,87,0);} }

/* ============================================================
   7. Sections
   ============================================================ */
.section { padding: 72px 0; }
.section--soft { background: var(--jobt-color-bg-soft); }
.section--navy { background: var(--jobt-color-navy); color: #fff; }
.section--navy h2, .section--navy .section-title { color: #fff; }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 42px; }
.section-eyebrow {
	display: inline-block; font-family: var(--jobt-font-display); font-weight: 700;
	font-size: .76rem; letter-spacing: .15em; text-transform: uppercase;
	color: var(--jobt-color-gold-deep); margin-bottom: 10px;
}
.section--navy .section-eyebrow { color: var(--jobt-color-gold); }
.section-title { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; margin: 0 0 8px; }
.section-desc { color: var(--jobt-color-muted); margin: 0; }
.section--navy .section-desc { color: #c2cee6; }

.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat .num { font-family: var(--jobt-font-display); font-weight: 800; font-size: 2.3rem; color: var(--jobt-color-gold); }
.stat .desc { color: #c2cee6; font-size: .92rem; margin-top: 2px; }

/* ============================================================
   8. Plugin component harmonisation (.jobt-* output)
   ============================================================ */
.jobt-card { box-shadow: var(--jobt-shadow-card); }
.jobt-inline-rate { font-variant-numeric: tabular-nums; }
.jobt-rate-flash { transition: background .1s ease; }
.jobt-rate-flash.jobt-up { background: rgba(31,157,87,.16); }
.jobt-rate-flash.jobt-dn { background: rgba(210,48,72,.16); }

/* ============================================================
   9. Blog / archive
   ============================================================ */
.page-header-band { background: var(--jobt-color-bg-soft); border-bottom: 1px solid var(--jobt-color-line); padding: 48px 0; }
.page-header-band .page-title { margin: 0; font-size: clamp(1.8rem, 3vw, 2.4rem); }

.content-area { padding: 56px 0; }
.content-area.has-sidebar .site-content-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }

.entry-card { background: #fff; border: 1px solid var(--jobt-color-line); border-radius: var(--jobt-radius-card); overflow: hidden; box-shadow: var(--jobt-shadow-card); margin-bottom: 28px; transition: transform .2s ease, box-shadow .2s ease; }
.entry-card:hover { transform: translateY(-3px); box-shadow: var(--jobt-shadow-lg); }
.entry-card .post-thumb img { width: 100%; height: 220px; object-fit: cover; }
.entry-card .entry-header, .entry-card .entry-content { padding: 0 24px; }
.entry-card .entry-header { padding-top: 22px; }
.entry-card .entry-content { padding-bottom: 24px; }
.entry-title { font-size: 1.45rem; margin: 0 0 8px; }
.entry-title a { color: var(--jobt-color-navy); }
.entry-meta { font-size: .85rem; color: var(--jobt-color-muted); margin-bottom: 12px; }
.read-more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--jobt-font-display); font-weight: 600; color: var(--jobt-color-gold-deep); }
.read-more:hover { gap: 10px; }
.page-links { margin-top: 16px; font-weight: 600; }

/* Sidebar / widgets */
.widget-area .widget { background: #fff; border: 1px solid var(--jobt-color-line); border-radius: var(--jobt-radius-card); padding: 22px; margin-bottom: 24px; box-shadow: var(--jobt-shadow-card); }
.widget-title { font-size: 1.1rem; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--jobt-color-gold); display: inline-block; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li { padding: 8px 0; border-bottom: 1px solid var(--jobt-color-line); }
.widget ul li:last-child { border-bottom: none; }

/* Single / page content */
.site-main .entry-content { font-size: 1.05rem; }
.site-main .entry-content h2 { margin-top: 1.6em; }
.site-main .entry-content h3 { margin-top: 1.3em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.entry-content li { margin-bottom: .4em; }
.entry-content blockquote { border-left: 4px solid var(--jobt-color-gold); background: var(--jobt-color-bg-soft); margin: 1.4em 0; padding: 14px 20px; border-radius: 0 10px 10px 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.entry-content th, .entry-content td { border: 1px solid var(--jobt-color-line); padding: 10px 14px; text-align: left; }
.entry-content th { background: var(--jobt-color-bg-soft); font-family: var(--jobt-font-display); }

/* ============================================================
   10. Footer
   ============================================================ */
.site-footer { background: var(--jobt-color-navy-deep); color: #cdd8ee; padding: 58px 0 0; }
.footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; }
.site-footer h4, .footer-widget-title { color: #fff; font-size: 1rem; margin-bottom: 16px; font-weight: 700; font-family: var(--jobt-font-display); }
.footer-logo { color: #fff; font-family: var(--jobt-font-display); font-weight: 800; font-size: 1.3rem; margin-bottom: 14px; }
.footer-about p { font-size: .9rem; color: #9fb0d2; max-width: 32ch; }
.site-footer .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer .footer-col a { font-size: .92rem; color: #b9c6e3; transition: color .15s; }
.site-footer .footer-col a:hover { color: var(--jobt-color-gold); }
.social-links { display: flex; gap: 10px; margin-top: 16px; }
.social-links a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; transition: background .2s, transform .2s; }
.social-links a:hover { background: var(--jobt-color-gold); color: var(--jobt-color-navy-deep); transform: translateY(-2px); }
.social-links svg { width: 18px; height: 18px; fill: currentColor; }
.footer-disclaimer { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; font-size: .82rem; color: #8295bb; line-height: 1.6; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: #8295bb; }
.footer-bottom a { color: #8295bb; }
.footer-bottom a:hover { color: var(--jobt-color-gold); }

/* ============================================================
   11. Elementor compatibility
   ============================================================ */
.elementor-page .site-main,
.elementor-page .content-area { padding: 0; }
.elementor-page .site-content-wrap { display: block; }
.jobt-fullwidth .site-main { padding: 0; }
.jobt-fullwidth .content-area { padding: 0; }
/* Let Elementor full-width/canvas sections span the viewport */
.elementor-section.elementor-section-stretched { max-width: 100%; }

/* ============================================================
   12. Responsive
   ============================================================ */
@media (max-width: 1024px) {
	.content-area.has-sidebar .site-content-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
	.hero-grid { grid-template-columns: 1fr; gap: 40px; padding: 60px 24px; }
	.hero-lead { max-width: none; }
	.grid-2 { grid-template-columns: 1fr; }
	.footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.header-cta { display: none; }
	.main-navigation { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--jobt-color-line); box-shadow: var(--jobt-shadow-card); padding: 12px; }
	.main-navigation.is-open { display: block; }
	.main-navigation ul { flex-direction: column; align-items: stretch; gap: 2px; }
	.main-navigation ul ul { position: static; box-shadow: none; border: none; padding-left: 12px; display: none; }
	.main-navigation li.submenu-open > ul { display: flex; }
	.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
	.section { padding: 54px 0; }
}
@media (max-width: 520px) {
	.footer-cols { grid-template-columns: 1fr; }
	.footer-bottom { justify-content: flex-start; }
	body { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.live-dot, .entry-card { animation: none; transition: none; }
}

/* ============================================================
   13. Partners slider
   ============================================================ */
.jobt-partners { position: relative; overflow: hidden; }
.jobt-partners__track { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: stretch; }
.jobt-partners--scroll { -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.jobt-partners--scroll .jobt-partners__track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: jobt-marquee 30s linear infinite; }
.jobt-partners--scroll:hover .jobt-partners__track { animation-play-state: paused; }
.jobt-partner-card { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 190px; min-height: 92px; padding: 18px 26px; background: #fff; border: 1px solid var(--jobt-color-line); border-radius: 14px; box-shadow: var(--jobt-shadow-card); transition: transform .2s ease, box-shadow .2s ease; }
.jobt-partner-card:hover { transform: translateY(-3px); box-shadow: var(--jobt-shadow-lg); }
.jobt-partner-card__logo { max-height: 52px; max-width: 150px; width: auto; object-fit: contain; }
.jobt-partner-card__name { font-family: var(--jobt-font-display); font-weight: 700; color: var(--jobt-color-navy); font-size: 1.15rem; letter-spacing: -0.01em; }
@keyframes jobt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.jobt-partners--scroll .jobt-partners__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ============================================================
   14. Elementor starter-content helpers
   ============================================================ */
.jobt-hero-card { box-shadow: var(--jobt-shadow-lg); }
.jobt-hero-card .jobt-inline-rate { font-family: var(--jobt-font-display); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--jobt-color-navy); display: inline-block; margin: 4px 0; }
.jobt-el-header .elementor-nav-menu .elementor-item { font-family: var(--jobt-font-display); font-weight: 500; }
.jobt-el-hero .elementor-heading-title { letter-spacing: -0.02em; }
/* Center hero columns vertically so the rate card isn't stretched with empty space. */
.jobt-el-hero > .elementor-container,
.jobt-el-hero > .elementor-container > .elementor-row { align-items: center; }
.jobt-el-hero .elementor-widget-button .elementor-button { box-shadow: 0 8px 20px rgba(232,169,0,.32); }

/* Icon boxes, testimonials, FAQ accordion — on-brand touches */
.elementor-widget-icon-box .elementor-icon-box-title { font-family: var(--jobt-font-display); }
.elementor-widget-icon-box .elementor-icon-box-content { text-align: center; }
.elementor-widget-icon-box .elementor-icon { font-size: 34px; }
.jobt-el-faq .elementor-accordion .elementor-tab-title { font-family: var(--jobt-font-display); font-weight: 600; color: var(--jobt-color-navy); }
.jobt-el-faq .elementor-accordion .elementor-accordion-item { border-radius: 12px; overflow: hidden; margin-bottom: 10px; border: 1px solid var(--jobt-color-line); }
.elementor-widget-testimonial .elementor-testimonial-content { font-family: var(--jobt-font-body); }

/* ============================================================
   15. Robust fixes (no dependency on custom element classes)
   ============================================================ */
/* Hero rate number — target Elementor's guaranteed widget class */
.elementor-widget-jobt_rate .jobt-inline-rate{
  font-family:var(--jobt-font-display)!important;font-weight:800!important;
  font-size:clamp(2.2rem,5vw,3.2rem)!important;line-height:1!important;
  color:var(--jobt-color-navy)!important;display:inline-block;margin:6px 0;
}

/* FAQ accordion — brand it, beating Elementor defaults */
.elementor-widget-accordion .elementor-accordion-item{
  border:1px solid var(--jobt-color-line)!important;border-radius:12px!important;
  margin-bottom:10px;overflow:hidden;background:#fff;
}
.elementor-widget-accordion .elementor-tab-title{
  font-family:var(--jobt-font-display)!important;font-weight:600!important;
  color:var(--jobt-color-navy)!important;background:#fff!important;border:0!important;
  padding:15px 18px!important;font-size:1rem!important;
}
.elementor-widget-accordion .elementor-tab-title.elementor-active{
  color:var(--jobt-color-gold-deep)!important;background:var(--jobt-color-bg-soft)!important;
}
.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon i,
.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon svg{
  color:var(--jobt-color-gold-deep)!important;fill:var(--jobt-color-gold-deep)!important;
}
.elementor-widget-accordion .elementor-tab-content{
  color:var(--jobt-color-ink)!important;border:0!important;background:#fff!important;
  padding:2px 18px 16px!important;line-height:1.7;
}

/* Testimonials carousel (theme-built, works without Elementor Pro) */
.jobt-testimonials{position:relative;overflow:hidden}
.jobt-testimonials__track{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.jobt-testimonials--scroll{-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.jobt-testimonials--scroll .jobt-testimonials__track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;animation:jobt-marquee 40s linear infinite}
.jobt-testimonials--scroll:hover .jobt-testimonials__track{animation-play-state:paused}
.jobt-tst-card{flex:0 0 360px;max-width:360px;background:#fff;border:1px solid var(--jobt-color-line);border-radius:16px;box-shadow:var(--jobt-shadow-card);padding:24px 26px;text-align:left}
.jobt-tst-card .jobt-tst-quote{font-size:1.02rem;color:var(--jobt-color-ink);margin:0 0 16px;line-height:1.6}
.jobt-tst-card .jobt-tst-quote::before{content:"\201C";font-family:var(--jobt-font-display);font-size:2.4rem;color:var(--jobt-color-gold);line-height:0;vertical-align:-.35em;margin-right:4px}
.jobt-tst-card .jobt-tst-name{font-family:var(--jobt-font-display);font-weight:700;color:var(--jobt-color-navy)}
.jobt-tst-card .jobt-tst-role{font-size:.85rem;color:var(--jobt-color-muted)}
@media (prefers-reduced-motion: reduce){.jobt-testimonials--scroll .jobt-testimonials__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}

/* Hero H1 with golden country name (editable HTML in a text widget) */
.jobt-hero-h1{display:block;font-family:var(--jobt-font-display);font-weight:800;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.1;color:#fff;margin:.15em 0 .1em;letter-spacing:-.02em}
.jobt-hero-h1 span{color:var(--jobt-color-gold)}

/* ============================================================
   Bundled job board (USAJOBS Board) — keep its self-contained
   styling intact so the theme's global heading colours never
   make hero text invisible (e.g. green-on-green).
   ============================================================ */
.jab-wrap h1, .jab-wrap h2, .jab-wrap h3, .jab-wrap h4,
.jab-single h1, .jab-single h2, .jab-single h3, .jab-single h4 { color: inherit; }
.jab-hero h1, .jab-sh h1 { color: #fff !important; }
.jab-hero p { color: rgba(255,255,255,.9) !important; }

/* ============================================================
   Front-page default sections (no-Elementor layout)
   ============================================================ */
.jobt-home .jobt-steps { display:flex; flex-wrap:wrap; gap:24px; max-width:1040px; margin:0 auto; }
.jobt-home .jobt-step { flex:1; min-width:240px; background:#fff; border:1px solid var(--jobt-color-line); border-radius:14px; padding:28px; box-shadow:0 10px 30px rgba(18,38,71,.06); }
.jobt-home .jobt-step .ico { width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--jobt-color-navy);color:#fff;font-size:22px;margin-bottom:14px; }
.jobt-home .jobt-step h3 { color:var(--jobt-color-navy); margin:0 0 6px; font-size:1.15rem; }
.jobt-home .jobt-step p { color:var(--jobt-color-muted); margin:0; }
.jobt-home .jobt-band { padding:60px 20px; }
.jobt-home .jobt-band--soft { background:var(--jobt-color-bg-soft); }
.jobt-home .jobt-band h2 { text-align:center; color:var(--jobt-color-navy); font-size:1.9rem; margin:0 0 8px; }
.jobt-home .jobt-band .sub { text-align:center; color:var(--jobt-color-muted); margin:0 0 32px; }
.jobt-home .jobt-inner { max-width:1100px; margin:0 auto; }
.jobt-home .jobt-inner--narrow { max-width:820px; }

/* ============================================================
   Hero restyle (theme-side override of the bundled board hero)
   Replace the background image URL below to use your own photo.
   ============================================================ */
body .jab-hero {
	background-image:
		linear-gradient(135deg, rgba(26,75,46,.90) 0%, rgba(10,32,22,.94) 100%),
		url('https://images.pexels.com/photos/8547344/pexels-photo-8547344.jpeg?auto=compress&cs=tinysrgb&w=1600') !important;
	background-size: cover !important;
	background-position: center !important;
	padding: 72px 24px 64px !important;
	border-radius: 18px !important;
	box-shadow: 0 24px 60px rgba(10,32,22,.28) !important;
}
body .jab-hero h1 { font-size: clamp(28px, 5vw, 52px) !important; letter-spacing: -.02em !important; margin-bottom: 12px !important; }
body .jab-hero p { font-size: 17px !important; }
body .jab-search-row { max-width: 680px !important; gap: 10px !important; margin-top: 26px !important; }
body .jab-search-row input {
	padding: 16px 18px !important;
	font-size: 16px !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}
body .jab-search-row button {
	padding: 16px 30px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	border-radius: 12px !important;
	background: var(--jobt-color-gold) !important;
	color: #0a2016 !important;
	box-shadow: 0 8px 24px rgba(200,168,75,.4) !important;
	transition: transform .15s ease, box-shadow .15s ease !important;
}
body .jab-search-row button:hover { transform: translateY(-1px) !important; box-shadow: 0 12px 30px rgba(200,168,75,.5) !important; }

/* ============================================================
   Content images (pages & posts) — replaceable placeholders
   ============================================================ */
.jobt-page-banner { margin: 0 0 28px; }
.jobt-page-banner img,
.jobt-post-hero img {
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: cover;
	border-radius: 16px;
	display: block;
	box-shadow: 0 16px 40px rgba(18,38,71,.12);
}
.jobt-post-hero { margin: 0 0 24px; }
.post-thumb img { width: 100%; height: 220px; object-fit: cover; border-radius: 14px 14px 0 0; display: block; }

/* Homepage image + text band */
.jobt-imgband { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.jobt-imgband__media { flex: 1 1 340px; }
.jobt-imgband__media img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; border-radius: 16px; box-shadow: 0 16px 40px rgba(18,38,71,.14); }
.jobt-imgband__text { flex: 1 1 340px; }
.jobt-imgband__text h2 { color: var(--jobt-color-navy); font-size: 1.9rem; margin: 0 0 12px; }
.jobt-imgband__text p { color: var(--jobt-color-muted); margin: 0 0 16px; font-size: 1.05rem; }
.jobt-btn, a.jobt-btn {
	display: inline-block; background: var(--jobt-color-navy); color: #fff !important;
	padding: 13px 28px; border-radius: 999px; font-weight: 700; text-decoration: none;
	box-shadow: 0 10px 26px rgba(26,75,46,.28);
}
.jobt-btn:hover { background: var(--jobt-color-navy-deep); }

/* ============================================================
   Single job page — polished, professional layout
   (styles layered over the bundled board's own classes)
   ============================================================ */
.jab-single { padding: 28px 16px 64px !important; }
.jab-single .jab-si { max-width: 1060px !important; }

/* Hero with photo + green overlay (matches the homepage hero) */
.jab-single .jab-sh {
	background-image:
		linear-gradient(135deg, rgba(26,75,46,.92) 0%, rgba(10,32,22,.95) 100%),
		url('https://images.pexels.com/photos/8547344/pexels-photo-8547344.jpeg?auto=compress&cs=tinysrgb&w=1600') !important;
	background-size: cover !important;
	background-position: center !important;
	border-radius: 18px 18px 0 0 !important;
	padding: 46px 46px !important;
	box-shadow: 0 18px 44px rgba(10,32,22,.18) !important;
}
.jab-single .jab-sh h1 { font-size: clamp(24px,3.4vw,40px) !important; letter-spacing: -.01em !important; }
.jab-single .jab-sh-meta span { background: rgba(255,255,255,.16) !important; border: 1px solid rgba(255,255,255,.18) !important; padding: 6px 14px !important; }

/* Body + summary card */
.jab-single .jab-sb { padding: 40px 46px !important; border-radius: 0 0 18px 18px !important; box-shadow: 0 18px 44px rgba(18,38,71,.08) !important; }
.jab-single .jab-two-col { gap: 30px !important; }

/* Sidebar: sticky, soft shadow */
.jab-single .jab-sidebar {
	position: sticky !important;
	top: 24px !important;
	border-radius: 16px !important;
	box-shadow: 0 14px 34px rgba(18,38,71,.10) !important;
	padding: 24px !important;
}
.jab-single .jab-sidebar h3 { font-size: 17px !important; letter-spacing: -.01em !important; }

/* Apply button: gold, high-contrast, matches the hero CTA */
.jab-single .jab-apply-btn {
	background: var(--jobt-color-gold) !important;
	color: #0a2016 !important;
	font-weight: 700 !important;
	border-radius: 12px !important;
	padding: 16px !important;
	box-shadow: 0 12px 28px rgba(200,168,75,.42) !important;
}
.jab-single .jab-apply-btn:hover { color: #0a2016 !important; filter: brightness(1.04) !important; transform: translateY(-1px); }

/* Apply button when used via the [jab_job_details] shortcode (Elementor single) */
.jab-job-details-apply, .entry-content a.jab-apply-btn { color: #0a2016 !important; }

/* Back link */
.jab-single .jab-back-link { font-weight: 600 !important; }
.jab-single .jab-back-link:hover { text-decoration: underline !important; }

@media (max-width: 860px) {
	.jab-single .jab-sh, .jab-single .jab-sb { padding-left: 24px !important; padding-right: 24px !important; }
	.jab-single .jab-sidebar { position: static !important; }
}

/* ============================================================
   Live search — autocomplete suggestions dropdown
   (rendered on <body> with fixed positioning so the hero can
   never clip or cover it)
   ============================================================ */
.jobt-ac {
	background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
	box-shadow: 0 16px 40px rgba(18,38,71,.22); overflow: hidden;
	max-height: 340px; overflow-y: auto;
}
.jobt-ac-item {
	display: block; padding: 11px 16px; color: #15233f; text-decoration: none;
	font-size: 14px; border-bottom: 1px solid #f1f5f9; cursor: pointer; line-height: 1.3;
}
.jobt-ac-item:last-child { border-bottom: 0; }
.jobt-ac-item.is-active, .jobt-ac-item:hover { background: #f4f7fc; color: var(--jobt-color-navy); }
#jab-jobs-container, .jab-no-jobs { transition: opacity .15s ease; }
/* Make sure the hero search row doesn't clip anything either. */
body .jab-hero, body .jab-search-row { overflow: visible !important; }

/* ============================================================
   16. Job board responsive hardening  (mobile + desktop)
   These rules beat the bundled board's inline <style> by using
   higher specificity (body .jab-*) plus !important where needed.
   Root cause fixed: the filter <select> elements grow to fit
   their longest option text, which on narrow screens pushes the
   whole page wider than the viewport and shifts everything off
   centre. We make them shrinkable, and guard every board element
   against horizontal overflow.
   ============================================================ */

/* Nothing inside the board may exceed the screen width. */
body .jab-wrap,
body .jab-single {
	max-width: 100%;
	overflow-x: clip;
}
body .jab-wrap *,
body .jab-single * { max-width: 100%; }

/* Filter dropdowns — the main overflow culprit on the home/listing page. */
body .jab-filters-row { width: 100%; flex-wrap: wrap; }
body .jab-filters-row select {
	min-width: 0;
	max-width: 100%;
	flex: 0 1 auto;
	text-overflow: ellipsis;
}

/* Hero search row — keep it from forcing a wider layout. */
body .jab-search-row { width: 100%; max-width: 680px; }
body .jab-search-row input { min-width: 0; }

/* Single job page — let the two-column grid actually shrink, and stop long
   words, URLs, wide tables or images in the description from overflowing. */
body .jab-two-col,
body .jab-two-col > * { min-width: 0; }
/* The post body card must contain its own content no matter what HTML the
   imported job description holds. */
body .jab-single .jab-sb { min-width: 0; overflow-x: clip; }
body .jab-content,
body .jab-content * { overflow-wrap: anywhere; word-break: break-word; }
body .jab-content table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
body .jab-content pre,
body .jab-content code { overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
body .jab-content img,
body .jab-content iframe,
body .jab-content video,
body .jab-content embed,
body .jab-content object { max-width: 100%; height: auto; }
/* Sidebar values can also carry long unbroken strings (Source ID, location). */
body .jab-srow,
body .jab-sval,
body .jab-slbl { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
body .jab-sh h1,
body .jab-card-title { overflow-wrap: break-word; }

/* --- Phones: stack and equalise everything so sizes match and centre. --- */
@media (max-width: 600px) {
	/* Two filter dropdowns become identical, full-width, never overflow. */
	body .jab-filters-row { flex-direction: column; align-items: stretch; gap: 8px; }
	body .jab-filters-row select { flex: 1 1 auto; width: 100%; }

	/* Search input + button stack full-width and uniform. */
	body .jab-search-row { flex-direction: column; }
	body .jab-search-row input,
	body .jab-search-row button { width: 100%; }

	/* Toolbar (count + Grid/List) centred instead of crammed. */
	body .jab-toolbar { justify-content: center; text-align: center; }
	body .jab-layout-btns { display: flex; justify-content: center; }
	body .jab-layout-btns button { margin: 0 4px; }

	/* Single job hero + body: comfortable, even padding. */
	body .jab-single .jab-sh { padding: 28px 18px !important; }
	body .jab-single .jab-sb { padding: 24px 18px !important; }
	body .jab-single .jab-sh-meta { gap: 6px; }
}

/* Below the desktop sidebar breakpoint the sidebar is no longer sticky, so a
   plain overflow guard here is safe and guarantees the single job page can
   never be dragged left/right, whatever the imported body HTML contains. */
@media (max-width: 860px) {
	body .jab-single,
	body .jab-si,
	body .jab-single .jab-sb,
	body .jab-single .jab-two-col { overflow-x: hidden; max-width: 100%; }
}