/*
Theme Name: UniGlobal Careers
Theme URI: https://uniglobalcareers.com/
Description: Bespoke standalone theme for UniGlobal Careers. A lean, fast, accessible, mobile-first classic theme for a blog and a WP Job Manager job board, brand accurate (Roboto headings, Lato body, orange, magenta and navy). Solid sticky header (no backdrop-blur), accessible focus states, and a branded navy footer. Self-contained, no parent theme.
Author: UniGlobal Technologies
Author URI: https://uniglobalcareers.com/
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: uniglobal
Tags: blog, job-board, wp-job-manager, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, two-columns, full-width-template
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  /* Brand */
  --ug-primary: #fd6b00;      /* orange, buttons and accents */
  --ug-primary-600: #e35f00;  /* hover / active orange */
  --ug-primary-700: #c25200;  /* deep orange text, passes AA on white */
  --ug-accent: #d90368;       /* link magenta (5.0:1 on white) */
  --ug-accent-600: #b80257;   /* hover magenta */
  --ug-text: #080a47;         /* navy, headings and strong text */
  --ug-bg: #ffffff;

  /* Neutrals derived from navy */
  --ug-text-soft: #33355f;    /* body copy */
  --ug-muted: #5b5d80;        /* meta, captions (6.3:1 on white) */
  --ug-surface: #ffffff;
  --ug-surface-2: #f6f7fb;    /* subtle section / card fill */
  --ug-surface-3: #eef0f7;
  --ug-border: #e6e8f0;
  --ug-border-strong: #d4d7e6;

  /* Feedback / archived-job amber */
  --ug-amber-bg: #fff3d6;
  --ug-amber-border: #f5a623;
  --ug-amber-text: #6b4a00;

  /* Type */
  --ug-font-heading: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ug-font-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Shape */
  --ug-radius: 14px;
  --ug-radius-sm: 10px;
  --ug-radius-pill: 999px;

  /* Elevation */
  --ug-shadow-sm: 0 1px 2px rgba(8, 10, 71, .06), 0 1px 3px rgba(8, 10, 71, .08);
  --ug-shadow-md: 0 10px 28px rgba(8, 10, 71, .10);
  --ug-shadow-lg: 0 18px 46px rgba(8, 10, 71, .14);

  /* Layout */
  --ug-content: 1120px;   /* outer content width */
  --ug-measure: 72ch;     /* comfortable reading measure */
  --ug-gutter: 20px;
  --ug-focus: var(--ug-accent);

  /* Motion */
  --ug-ease: cubic-bezier(.2, .7, .3, 1);
  --ug-t: .18s;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ug-font-body);
  color: var(--ug-text-soft);
  background-color: var(--ug-bg);
  font-size: 1.0625rem;      /* 17px base for readability */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { max-width: 100%; height: auto; }
img { border: 0; }

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .page-title,
.wp-block-heading {
  font-family: var(--ug-font-heading);
  color: var(--ug-text);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}
h1, .entry-title, .page-title { font-weight: 900; }

/* Fluid heading scale */
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 2vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.6rem); }
h4 { font-size: clamp(1.12rem, 1rem + 0.6vw, 1.3rem); }
h5 { font-size: 1.05rem; }
h6 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ug-muted); }

p { margin: 0 0 1.15em; }
strong, b { color: var(--ug-text); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--ug-border); margin: 2em 0; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; }

::selection { background: var(--ug-primary); color: #fff; }

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */
.ug-container {
  width: 100%;
  max-width: var(--ug-content);
  margin-inline: auto;
  padding-inline: var(--ug-gutter);
}
.ug-container--narrow { max-width: 780px; }
.ug-container--job { max-width: 920px; }
.ug-container--full { max-width: none; }
.page-full-width .entry-content > * { max-width: none; }

.site-main { display: block; padding: 2.25rem 0 3rem; outline: none; }

.page-header { margin-bottom: 1.75rem; }
.page-title { margin: 0 0 .35rem; }
.page-header .archive-description { color: var(--ug-muted); }

/* ==========================================================================
   4. Links and buttons
   ========================================================================== */
a {
  color: var(--ug-accent);
  text-decoration-color: color-mix(in srgb, var(--ug-accent) 40%, transparent);
  text-underline-offset: .16em;
  transition: color var(--ug-t) var(--ug-ease);
}
a:hover, a:focus { color: var(--ug-accent-600); }

/* In flowing prose keep links underlined for scannability */
.entry-content a:not(.button):not(.wp-block-button__link):not(.wp-element-button) {
  text-decoration: underline;
}

.button,
button.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
.wp-element-button,
.application_button,
.job-manager-form input[type="submit"],
.single_job_listing .application_button,
.menu-item.button > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--ug-font-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: .72em 1.5em;
  border-radius: var(--ug-radius-pill);
  border: 2px solid transparent;
  background-color: var(--ug-primary);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ug-t) var(--ug-ease),
              border-color var(--ug-t) var(--ug-ease),
              transform var(--ug-t) var(--ug-ease),
              box-shadow var(--ug-t) var(--ug-ease);
}
.button:hover,
button.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.application_button:hover,
.menu-item.button > a:hover {
  background-color: var(--ug-primary-600);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--ug-shadow-md);
}
.button:active,
.wp-block-button__link:active,
.application_button:active { transform: translateY(0); }

/* Secondary / outline button */
.is-style-outline > .wp-block-button__link,
.button.is-secondary,
.button.secondary {
  background-color: transparent;
  color: var(--ug-text);
  border-color: var(--ug-border-strong);
}
.is-style-outline > .wp-block-button__link:hover,
.button.is-secondary:hover {
  background-color: var(--ug-primary);
  border-color: var(--ug-primary);
  color: #fff;
}

/* ==========================================================================
   5. Accessible focus states + skip link
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.button:focus-visible,
.wp-block-button__link:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ug-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  width: auto;
  height: auto;
  background: var(--ug-text);
  color: #fff;
  padding: .75em 1.25em;
  border-radius: var(--ug-radius-sm);
  font-family: var(--ug-font-heading);
  font-weight: 700;
  text-decoration: none;
}

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto; clip-path: none; height: auto; width: auto; margin: 0;
  display: inline-block; background: var(--ug-text); color: #fff;
  padding: .6em 1em; border-radius: var(--ug-radius-sm); z-index: 1000;
}

/* ==========================================================================
   6. Site header + primary navigation (solid, sticky, NO backdrop-blur)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--ug-surface);   /* solid, opaque, no blur */
  border-bottom: 1px solid var(--ug-border);
  box-shadow: var(--ug-shadow-sm);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  max-width: var(--ug-content);
  margin-inline: auto;
  padding: .7rem var(--ug-gutter);
}

.site-branding { display: flex; align-items: center; min-width: 0; gap: .75rem; }
.custom-logo-link { display: inline-flex; line-height: 0; }
.custom-logo { max-height: 56px; width: auto; height: auto; display: block; }
.site-title { font-family: var(--ug-font-heading); font-weight: 900; font-size: 1.35rem; margin: 0; line-height: 1.05; }
.site-title a { color: var(--ug-text); text-decoration: none; }
.site-title a:hover { color: var(--ug-primary); }
.site-description { margin: 0; font-size: .82rem; color: var(--ug-muted); }

/* Desktop menu */
.main-nav { display: flex; align-items: center; }
.main-nav .nav-menu { list-style: none; display: flex; align-items: center; gap: .1rem; margin: 0; padding: 0; }
.main-nav .nav-menu li { position: relative; }
.main-nav .nav-menu a {
  display: inline-block;
  font-family: var(--ug-font-heading);
  font-weight: 500;
  color: var(--ug-text);
  text-decoration: none;
  padding: .6rem .85rem;
  border-radius: var(--ug-radius-sm);
  transition: color var(--ug-t) var(--ug-ease);
}
.main-nav .nav-menu a:hover { color: var(--ug-primary); }
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a {
  color: var(--ug-primary);
  box-shadow: inset 0 -2px 0 0 var(--ug-primary);
}

/* Dropdown submenus, solid background */
.main-nav .sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: .4rem;
  background-color: var(--ug-surface);
  border: 1px solid var(--ug-border);
  border-radius: var(--ug-radius-sm);
  box-shadow: var(--ug-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--ug-t) var(--ug-ease), transform var(--ug-t) var(--ug-ease), visibility var(--ug-t);
  z-index: 30;
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: none;
}
.main-nav .sub-menu a { display: block; padding: .5rem .7rem; }
.main-nav .sub-menu a:hover { background: var(--ug-surface-2); color: var(--ug-primary); }
.main-nav .sub-menu .sub-menu { top: -.4rem; left: 100%; }

/* Hamburger toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  background: transparent;
  border: 1px solid var(--ug-border-strong);
  border-radius: var(--ug-radius-sm);
  color: var(--ug-text);
  font-family: var(--ug-font-heading);
  font-weight: 700;
  font-size: .95rem;
  padding: .5rem .8rem;
  cursor: pointer;
}
.nav-toggle:hover { color: var(--ug-primary); border-color: var(--ug-primary); }
.nav-toggle__bars { position: relative; width: 20px; height: 14px; display: inline-block; }
.nav-toggle__bars span,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 6px; }
.nav-toggle__bars::after { bottom: 0; }

/* ==========================================================================
   7. Mobile off-canvas drawer
   ========================================================================== */
.ug-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.ug-drawer.is-open { visibility: visible; pointer-events: auto; }
.ug-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 71, .5);
  opacity: 0;
  transition: opacity .25s var(--ug-ease);
}
.ug-drawer.is-open .ug-drawer__backdrop { opacity: 1; }
.ug-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(86vw, 340px);
  background: var(--ug-surface);
  box-shadow: var(--ug-shadow-lg);
  transform: translateX(100%);
  transition: transform .28s var(--ug-ease);
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.15rem 1.5rem;
  overflow-y: auto;
}
.ug-drawer.is-open .ug-drawer__panel { transform: none; }
.ug-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.ug-drawer__title { font-family: var(--ug-font-heading); font-weight: 900; font-size: 1rem; color: var(--ug-text); margin: 0; }
.ug-drawer__close {
  background: transparent; border: 0; cursor: pointer;
  color: var(--ug-text); font-size: 1.6rem; line-height: 1;
  width: 40px; height: 40px; border-radius: var(--ug-radius-sm);
}
.ug-drawer__close:hover { color: var(--ug-primary); background: var(--ug-surface-2); }
.ug-drawer .nav-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ug-drawer .nav-menu a {
  display: block;
  font-family: var(--ug-font-heading);
  font-weight: 500;
  color: var(--ug-text);
  text-decoration: none;
  padding: .85rem .25rem;
  border-bottom: 1px solid var(--ug-border);
}
.ug-drawer .nav-menu a:hover,
.ug-drawer .current-menu-item > a { color: var(--ug-primary); }
.ug-drawer .sub-menu { list-style: none; margin: 0; padding: 0 0 0 1rem; }
body.ug-drawer-open { overflow: hidden; }

/* ==========================================================================
   8. Blog / archive card grid
   ========================================================================== */
.ug-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 0 0 2.5rem;
}

.loop-entry {
  display: flex;
  flex-direction: column;
  background-color: var(--ug-surface);
  border: 1px solid var(--ug-border);
  border-radius: var(--ug-radius);
  overflow: hidden;
  box-shadow: var(--ug-shadow-sm);
  transition: transform var(--ug-t) var(--ug-ease),
              box-shadow var(--ug-t) var(--ug-ease),
              border-color var(--ug-t) var(--ug-ease);
}
.loop-entry:hover {
  transform: translateY(-3px);
  box-shadow: var(--ug-shadow-md);
  border-color: var(--ug-border-strong);
}
.loop-entry .post-thumbnail { display: block; margin: 0; overflow: hidden; }
.loop-entry .post-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  transition: transform .4s var(--ug-ease);
}
.loop-entry:hover .post-thumbnail img { transform: scale(1.04); }

.loop-entry .entry-content-wrap { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1 1 auto; }

.loop-entry .entry-category a {
  display: inline-block;
  font-family: var(--ug-font-heading);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ug-accent);
  text-decoration: none;
  margin-bottom: .5rem;
}
.loop-entry .entry-title { font-size: 1.32rem; line-height: 1.25; margin: 0 0 .55rem; }
.loop-entry .entry-title a { color: var(--ug-text); text-decoration: none; }
.loop-entry .entry-title a:hover { color: var(--ug-primary); }

.loop-entry .entry-meta,
.loop-entry .entry-meta a { font-size: .85rem; color: var(--ug-muted); }
.loop-entry .entry-meta { margin-bottom: .5rem; }
.loop-entry .entry-summary { color: var(--ug-text-soft); margin-top: .1rem; }
.loop-entry .entry-summary p:last-child { margin-bottom: 0; }

.more-link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--ug-font-heading);
  font-weight: 700;
  color: var(--ug-accent);
  text-decoration: none;
  margin-top: auto;
  padding-top: .95rem;
}
.more-link:hover { color: var(--ug-primary); }
.more-link::after { content: "\2192"; transition: transform var(--ug-t) var(--ug-ease); }
.more-link:hover::after { transform: translateX(3px); }

/* Pagination */
.ug-pagination { margin: 1rem 0 0; }
.ug-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; }
.ug-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4em;
  height: 2.4em;
  padding: 0 .5em;
  border-radius: var(--ug-radius-sm);
  border: 1px solid var(--ug-border);
  color: var(--ug-text);
  text-decoration: none;
  font-family: var(--ug-font-heading);
  font-weight: 700;
}
.ug-pagination .page-numbers.current { background: var(--ug-primary); border-color: var(--ug-primary); color: #fff; }
.ug-pagination a.page-numbers:hover { border-color: var(--ug-primary); color: var(--ug-primary); }
.ug-pagination .page-numbers.dots { border-color: transparent; }

/* Post-to-post navigation */
.post-navigation { margin: 2.5rem 0 0; border-top: 1px solid var(--ug-border); padding-top: 1.5rem; }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.post-navigation .nav-links > div { max-width: 48%; }
.post-navigation .nav-subtitle {
  display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ug-muted); font-family: var(--ug-font-heading); font-weight: 700; margin-bottom: .2rem;
}
.post-navigation .nav-next { text-align: right; margin-left: auto; }
.post-navigation a { font-family: var(--ug-font-heading); font-weight: 700; text-decoration: none; color: var(--ug-text); }
.post-navigation a:hover { color: var(--ug-primary); }

/* ==========================================================================
   9. Single post / page typography
   ========================================================================== */
.entry-header { margin-bottom: 1.5rem; }
.single .entry-header .entry-title { margin-bottom: .35em; }
.entry-meta { color: var(--ug-muted); font-size: .9rem; display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: center; }
.entry-meta a { color: var(--ug-muted); }
.entry-meta a:hover { color: var(--ug-primary); }
.entry-featured { margin: 0 0 1.75rem; }
.entry-featured img { width: 100%; border-radius: var(--ug-radius); display: block; }

.entry-content { font-size: 1.075rem; line-height: 1.72; color: var(--ug-text-soft); }
.entry-content > * { max-width: var(--ug-measure); }
.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > figure,
.entry-content > .wp-block-image,
.entry-content > .wp-block-gallery,
.entry-content > .single_job_listing,
.entry-content > .ug-archived-job,
.entry-content > ul.job_listings,
.entry-content > .job_listings { max-width: none; }

.entry-content > h2 { margin-top: 2em; margin-bottom: .5em; }
.entry-content > h3 { margin-top: 1.6em; margin-bottom: .45em; }
.entry-content > h4 { margin-top: 1.3em; margin-bottom: .4em; }

.entry-content ul, .entry-content ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.entry-content li { margin-bottom: .5em; }
.entry-content li::marker { color: var(--ug-primary); }

.entry-content a { color: var(--ug-accent); }
.entry-content a:hover { color: var(--ug-accent-600); }

.entry-content blockquote, .wp-block-quote {
  margin: 1.6em 0;
  padding: .4em 0 .4em 1.25em;
  border-left: 4px solid var(--ug-primary);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ug-text);
}
.entry-content blockquote cite { display: block; margin-top: .5em; font-size: .85rem; font-style: normal; color: var(--ug-muted); }

.wp-block-pullquote { border-top: 3px solid var(--ug-accent); border-bottom: 3px solid var(--ug-accent); color: var(--ug-text); }

.entry-content img, .entry-content .wp-block-image img { border-radius: var(--ug-radius-sm); height: auto; }
.entry-content figcaption, .wp-element-caption { color: var(--ug-muted); font-size: .85rem; text-align: center; margin-top: .5em; }

.entry-content :where(code, kbd, samp) {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: .9em;
  background: var(--ug-surface-2);
  padding: .12em .4em;
  border-radius: 6px;
  color: var(--ug-primary-700);
}
.entry-content pre {
  background: var(--ug-text);
  color: #eef0f7;
  padding: 1.1em 1.25em;
  border-radius: var(--ug-radius-sm);
  overflow-x: auto;
  font-size: .92rem;
  line-height: 1.55;
  max-width: none;
}
.entry-content pre code { background: none; color: inherit; padding: 0; }

.entry-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; display: block; overflow-x: auto; }
.entry-content th, .entry-content td { padding: .7em .85em; border: 1px solid var(--ug-border); text-align: left; }
.entry-content thead th { background: var(--ug-surface-2); color: var(--ug-text); font-family: var(--ug-font-heading); }
.entry-content tbody tr:nth-child(even) { background: var(--ug-surface-2); }

/* Tags below the post */
.entry-footer { margin-top: 1.75rem; }
.entry-tags a {
  display: inline-block;
  background: var(--ug-surface-2);
  color: var(--ug-text);
  border-radius: var(--ug-radius-pill);
  padding: .25em .8em;
  font-size: .8rem;
  text-decoration: none;
  margin: 0 .35em .5em 0;
}
.entry-tags a:hover { background: var(--ug-primary); color: #fff; }

/* Page: hide title / full-width helpers (used by page.php) */
.page-hide-title .entry-header { display: none; }

/* ==========================================================================
   10. WP Job Manager, listings archive + [jobs] shortcode
   ========================================================================== */
.ug-wpjm .job_listings, ul.job_listings { border: 0; margin: 1.25rem 0; padding: 0; list-style: none; }

ul.job_listings li.job_listing,
ul.job_listings li.no_job_listings_found {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--ug-surface);
  border: 1px solid var(--ug-border);
  border-radius: var(--ug-radius);
  padding: 1rem 1.1rem;
  margin-bottom: .85rem;
  box-shadow: var(--ug-shadow-sm);
  transition: transform var(--ug-t) var(--ug-ease),
              box-shadow var(--ug-t) var(--ug-ease),
              border-color var(--ug-t) var(--ug-ease);
}
ul.job_listings li.job_listing:hover {
  transform: translateY(-2px);
  border-color: var(--ug-border-strong);
  box-shadow: var(--ug-shadow-md);
}
ul.job_listings li.job_listing a { display: flex; gap: 1rem; align-items: center; width: 100%; text-decoration: none; color: inherit; }
ul.job_listings li.job_listing img.company_logo {
  width: 56px; height: 56px;
  border-radius: var(--ug-radius-sm);
  border: 1px solid var(--ug-border);
  object-fit: contain;
  background: #fff;
  padding: 4px;
  flex: 0 0 auto;
}
ul.job_listings li.job_listing .position { flex: 1 1 auto; min-width: 0; }
ul.job_listings li.job_listing .position h3 { font-size: 1.12rem; color: var(--ug-text); margin: 0 0 .2rem; line-height: 1.3; }
ul.job_listings li.job_listing .position .company { color: var(--ug-muted); font-size: .9rem; }
ul.job_listings li.job_listing .position .company .company_name { font-weight: 700; color: var(--ug-text); }
ul.job_listings li.job_listing ul.meta,
.job-manager-details ul.meta { list-style: none; margin: 0; padding: 0; text-align: right; font-size: .82rem; color: var(--ug-muted); flex: 0 0 auto; }
ul.job_listings li.job_listing ul.meta li { margin: 0 0 .25rem; }
ul.job_listings li.job_listing .location,
.single_job_listing .location { color: var(--ug-muted); font-size: .88rem; }

/* Job type pills */
li.job_listing .job-type,
.single_job_listing .job-type,
ul.meta .job-type {
  display: inline-block;
  border-radius: var(--ug-radius-pill);
  padding: .18em .7em;
  font-size: .72rem;
  font-family: var(--ug-font-heading);
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
  background: var(--ug-primary);
}
.job-type.full-time { background: var(--ug-primary); }
.job-type.part-time { background: var(--ug-accent); }
.job-type.temporary { background: #7a5cff; }
.job-type.freelance { background: #0f9d8b; }
.job-type.internship { background: #2b6fd6; }

/* Job filters / search */
.job_filters {
  background: var(--ug-surface-2);
  border: 1px solid var(--ug-border);
  border-radius: var(--ug-radius);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.25rem;
}
.job_filters .search_jobs input,
.job_filters .search_jobs select,
.job-manager-form input[type="text"],
.job-manager-form input[type="email"],
.job-manager-form input[type="url"],
.job-manager-form textarea,
.job-manager-form select {
  width: 100%;
  border: 1px solid var(--ug-border-strong);
  border-radius: var(--ug-radius-sm);
  padding: .6em .8em;
  font-family: var(--ug-font-body);
  color: var(--ug-text);
  background: #fff;
}
.job_filters .search_jobs input:focus,
.job-manager-form input:focus,
.job-manager-form textarea:focus,
.job-manager-form select:focus {
  border-color: var(--ug-primary);
  outline: 3px solid color-mix(in srgb, var(--ug-primary) 30%, transparent);
  outline-offset: 1px;
}
.job_filters .job_types { margin-top: .75rem; font-size: .85rem; color: var(--ug-muted); }
.job_filters .showing_jobs { color: var(--ug-muted); font-size: .85rem; }

.load_more_jobs {
  background: var(--ug-primary);
  color: #fff;
  border-radius: var(--ug-radius-pill);
  padding: .7em 1.5em;
  font-family: var(--ug-font-heading);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}
.load_more_jobs:hover { background: var(--ug-primary-600); color: #fff; }

/* ==========================================================================
   11. WP Job Manager, single job (rendered via the_content in single.php)
   ========================================================================== */
.single_job_listing { color: var(--ug-text-soft); }
.single_job_listing .company {
  background: var(--ug-surface-2);
  border: 1px solid var(--ug-border);
  border-radius: var(--ug-radius);
  padding: 1.2rem 1.3rem;
  margin: 1.25rem 0;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.single_job_listing .company img.company_logo {
  width: 72px; height: 72px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--ug-border);
  border-radius: var(--ug-radius-sm);
  padding: 6px;
}
.single_job_listing .company .company_name { font-family: var(--ug-font-heading); color: var(--ug-text); font-size: 1.15rem; margin: 0; }
.single_job_listing .company .company_url { color: var(--ug-accent); font-size: .9rem; }
.single_job_listing .company .tagline { color: var(--ug-muted); font-size: .9rem; }

.single_job_listing .job-manager-details {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: center;
  padding: 1rem 1.2rem;
  background: var(--ug-surface-2);
  border: 1px solid var(--ug-border);
  border-radius: var(--ug-radius);
  margin: 1.25rem 0;
  list-style: none;
}
.single_job_listing .job_description { line-height: 1.72; }
.single_job_listing .job_description h2,
.single_job_listing .job_description h3 { color: var(--ug-text); }

.single_job_listing .application {
  background: var(--ug-surface-2);
  border: 1px solid var(--ug-border);
  border-radius: var(--ug-radius);
  padding: 1.2rem 1.3rem;
  margin-top: 1.5rem;
}
.single_job_listing .application_button { width: auto; }

/* ==========================================================================
   12. Archived job amber banner
   (mu-plugin injects .ug-archived-job / .ug-archived-job-banner markup)
   ========================================================================== */
.ug-archived-job,
.ug-archived-job-banner,
li.job_listing.ug-archived-job,
.single_job_listing.ug-archived-job .job-manager-info {
  background-color: var(--ug-amber-bg);
  border: 1px solid var(--ug-amber-border);
  border-left: 5px solid var(--ug-amber-border);
  color: var(--ug-amber-text);
  border-radius: var(--ug-radius-sm);
  padding: .9rem 1.1rem;
  margin: 0 0 1.4rem;
  line-height: 1.55;
  font-weight: 700;
}
.ug-archived-job a,
.ug-archived-job-banner a { color: var(--ug-primary-700); text-decoration: underline; }
.ug-archived-job .ug-archived-label,
.ug-archived-job-banner .ug-archived-label {
  display: inline-block;
  background: var(--ug-amber-border);
  color: #241a00;
  border-radius: var(--ug-radius-pill);
  padding: .12em .7em;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-right: .5em;
}
/* When the banner wraps a full listing card, keep it readable */
li.job_listing.ug-archived-job .position h3,
li.job_listing.ug-archived-job .position .company .company_name { color: var(--ug-amber-text); }
body.ug-archived-job-page .single_job_listing .application { opacity: .75; }

/* ==========================================================================
   13. Widgets (footer widget area, optional)
   ========================================================================== */
.footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.footer-widgets .widget-title, .widget .widget-title {
  font-family: var(--ug-font-heading);
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 1rem;
  padding-bottom: .3em;
  border-bottom: 2px solid var(--ug-primary);
  display: inline-block;
}
.footer-widgets ul { list-style: none; margin: 0; padding: 0; }
.footer-widgets li { margin-bottom: .5em; }
.footer-widgets a { color: #d6d8ec; text-decoration: none; }
.footer-widgets a:hover { color: var(--ug-primary); }

/* ==========================================================================
   14. Site footer (branded, navy)
   ========================================================================== */
.site-footer { background-color: var(--ug-text); color: #d6d8ec; }
.site-footer__inner { max-width: var(--ug-content); margin-inline: auto; padding: 2.75rem var(--ug-gutter) 2.25rem; }
.site-footer a { color: #eef0f7; }
.site-footer a:hover { color: var(--ug-primary); }

.ug-footer { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; }

.ug-foot-social { display: flex; gap: .6rem; justify-content: center; }
.ug-foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: background-color var(--ug-t) var(--ug-ease), transform var(--ug-t) var(--ug-ease);
}
.ug-foot-social a:hover { background: var(--ug-primary); color: #fff; transform: translateY(-2px); }
.ug-foot-social svg { width: 20px; height: 20px; fill: currentColor; }

.ug-foot-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.ug-foot-links a {
  color: #d6d8ec;
  text-decoration: none;
  font-family: var(--ug-font-heading);
  font-weight: 500;
  font-size: .92rem;
}
.ug-foot-links a:hover { color: var(--ug-primary); }

.ug-foot-copy { color: #9a9dc4; font-size: .85rem; margin: 0; }

/* Footer keyboard focus visibility on the dark background */
.site-footer a:focus-visible,
.ug-foot-social a:focus-visible { outline-color: var(--ug-primary); }

/* ==========================================================================
   15. Search form + 404
   ========================================================================== */
.search-form { display: flex; gap: .5rem; max-width: 520px; }
.search-form .search-field {
  flex: 1 1 auto;
  border: 1px solid var(--ug-border-strong);
  border-radius: var(--ug-radius-sm);
  padding: .65em .9em;
  font-family: var(--ug-font-body);
  color: var(--ug-text);
  background: #fff;
}
.search-form .search-field:focus {
  border-color: var(--ug-primary);
  outline: 3px solid color-mix(in srgb, var(--ug-primary) 30%, transparent);
  outline-offset: 1px;
}
.search-form .search-submit { flex: 0 0 auto; }

.error-404 { text-align: center; padding: 2rem 0 3rem; }
.error-404 .ug-404-code { font-family: var(--ug-font-heading); font-weight: 900; font-size: clamp(4rem, 12vw, 8rem); line-height: 1; color: var(--ug-primary); margin: 0; }
.error-404 .search-form { margin: 1.5rem auto 0; }
.no-results { background: var(--ug-surface-2); border: 1px solid var(--ug-border); border-radius: var(--ug-radius); padding: 1.75rem; }

/* ==========================================================================
   16. Comments (graceful, minimal)
   ========================================================================== */
.comments-area { margin-top: 2.5rem; border-top: 1px solid var(--ug-border); padding-top: 1.5rem; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-body { padding: 1rem 0; border-bottom: 1px solid var(--ug-border); }
.comment-author .fn { font-family: var(--ug-font-heading); color: var(--ug-text); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  border: 1px solid var(--ug-border-strong);
  border-radius: var(--ug-radius-sm);
  padding: .6em .8em;
  font-family: var(--ug-font-body);
}

/* ==========================================================================
   17. Responsive + motion + print
   ========================================================================== */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .entry-content { font-size: 1.02rem; }
  .ug-card-grid { grid-template-columns: 1fr; }

  ul.job_listings li.job_listing,
  ul.job_listings li.job_listing a { flex-direction: column; align-items: flex-start; gap: .55rem; }
  ul.job_listings li.job_listing ul.meta { text-align: left; }
  .single_job_listing .company { flex-direction: column; align-items: flex-start; text-align: left; }

  .post-navigation .nav-links { flex-direction: column; }
  .post-navigation .nav-links > div { max-width: 100%; }
  .post-navigation .nav-next { text-align: left; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .loop-entry:hover, ul.job_listings li.job_listing:hover, .button:hover { transform: none; }
}

@media print {
  .site-header, .site-footer, .job_filters, .application, .nav-toggle, .ug-drawer, .post-navigation { display: none !important; }
  body { color: #000; font-size: 12pt; }
  a { color: #000; text-decoration: underline; }
  .entry-content > * { max-width: none; }
}