/*
Theme Name: Immigrant Jobs
Theme URI: https://foreign.sincereprayers.com
Description: Child theme of HitMag. Reproduces the clean, single-column editorial layout of apply.recruitmenttrust.com (a Neve build): light background, blue accent, horizontal post cards with the thumbnail on the left, and dark uppercase category badges. Written against HitMag's own markup.
Author: Bright Cycle
Template: hitmag
Version: 2.0.0
Text Domain: immigrant-jobs
*/

/* ==========================================================================
   Design tokens — read from the reference site's own Neve CSS variables.
   ========================================================================== */
:root {
  --ij-accent:      #2f5aae;   /* --nv-primary-accent */
  --ij-accent-dark: #24478a;
  --ij-site-bg:     #fbfbff;   /* --nv-site-bg */
  --ij-light-bg:    #f4f5f7;   /* --nv-light-bg */
  --ij-badge:       #1c1f24;   /* dark category pill */

  --ij-ink:         #272626;   /* --nv-text-color */
  --ij-body:        #5b5b66;
  --ij-muted:       #8a8a95;

  --ij-card:        #ffffff;
  --ij-line:        #e6e7ec;

  --ij-container:   1170px;    /* --container */
  /* Measured off the reference render: the card column is ~1030px and the
     thumbnail ~300px, not the 860/250 used before. */
  --ij-measure:     1030px;
  --ij-thumb:       300px;

  /* The reference sets --bodyfontfamily: "Ubuntu Sans". */
  --ij-font: "Ubuntu Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Arial, Helvetica, sans-serif;
  --ij-radius:      6px;
  --ij-shadow:      0 1px 2px rgba(23, 25, 35, .04), 0 2px 10px rgba(23, 25, 35, .04);
  --ij-shadow-h:    0 2px 6px rgba(23, 25, 35, .07), 0 10px 24px rgba(23, 25, 35, .07);
}

/* ==========================================================================
   Page frame — flat and light. The previous boxed layout on a saturated field
   is gone; this design sits directly on an almost-white page.
   ========================================================================== */
body {
  background: var(--ij-site-bg);
  color: var(--ij-body);
}

/* HitMag sets its own families on body and headings, so the override has to
   name those elements explicitly rather than relying on inheritance. */
body,
button, input, select, optgroup, textarea,
h1, h2, h3, h4, h5, h6,
.entry-title, .widget-title, .hm-site-title,
.main-navigation a, .entry-content, .entry-summary {
  font-family: var(--ij-font);
}
.hitmag-wrapper {
  max-width: none;
  margin: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.hm-container {
  max-width: var(--ij-container);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* The reference header carries no utility bar above the logo. */
.hm-top-bar { display: none; }

/* ==========================================================================
   Masthead — plain wordmark left, menu right, hairline rule beneath
   ========================================================================== */
/* HitMag renders the wordmark and the menu in separate containers, so they sit
   on two rows where the reference keeps them on one. Padding is tightened so
   the pair still reads as a single compact masthead. */
.header-main-area {
  background: var(--ij-card);
  padding: 14px 0 10px;
  border-bottom: 0;
}
.main-navigation .hm-container { padding-top: 0; padding-bottom: 0; }
.hm-site-title { margin: 0; }
.hm-site-title a {
  display: inline;
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  color: var(--ij-ink) !important;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.hm-site-title a:hover { color: var(--ij-accent) !important; background: none; }
.site-description { color: var(--ij-muted); }

/* ==========================================================================
   Navigation — quiet by default, accent on hover/active. No filled pills.
   ========================================================================== */
.main-navigation,
.hm-nav-container {
  background: var(--ij-card);
  border-top: 0;
  border-bottom: 1px solid var(--ij-line);
}
.main-navigation .menu > li > a,
.main-navigation ul li a {
  color: var(--ij-ink);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
}
.main-navigation .menu > li > a { border-radius: 0; }
.main-navigation .menu > li:hover > a,
.main-navigation .menu > li.current-menu-item > a,
.main-navigation .menu > li.current_page_item > a {
  background: transparent;
  color: var(--ij-accent);
}
.main-navigation ul ul {
  background: var(--ij-card);
  border: 1px solid var(--ij-line);
  border-radius: var(--ij-radius);
  box-shadow: var(--ij-shadow-h);
  overflow: hidden;
}
.main-navigation ul ul li a { color: var(--ij-ink); }
.main-navigation ul ul li:hover > a { background: var(--ij-light-bg); color: var(--ij-accent); }

.hm-search-button-icon, .hm-topnavbutton, .navbutton { color: var(--ij-ink); }

/* ==========================================================================
   Single centred column. The reference runs no sidebar; HitMag's default
   right rail is retired so the article list gets the full measure.
   ========================================================================== */
.content-area {
  width: 100% !important;
  max-width: var(--ij-measure);
  margin: 0 auto;
  float: none !important;
}
.widget-area { display: none; }
.site-content, .hm-content-wrap { padding-top: 34px; }

/* ==========================================================================
   Post cards — thumbnail left, text right (Neve's "alternative" list layout)
   ========================================================================== */
.posts-wrap.th-grid-2,
.posts-wrap {
  display: block;      /* undo HitMag's two-column grid */
  margin: 0;
}
.posts-wrap .hitmag-post {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  float: none;
  margin: 0 0 20px;
  background: var(--ij-card);
  border: 1px solid var(--ij-line);
  border-radius: var(--ij-radius);
  box-shadow: var(--ij-shadow);
  overflow: hidden;
  transition: box-shadow .18s ease;
}
.posts-wrap .hitmag-post:hover { box-shadow: var(--ij-shadow-h); transform: none; }

/* Thumbnail column.
   HitMag's real markup is:  article > a > div.archive-thumb > img
   so the flex ITEM is the anchor, not .archive-thumb. Sizing .archive-thumb
   does nothing to the column — the anchor collapses to its content instead.
   Every level from the anchor down is given a flex context so height:100% on
   the image resolves against a definite box rather than falling back to auto. */
.posts-wrap .hitmag-post > a {
  flex: 0 0 var(--ij-thumb);
  max-width: var(--ij-thumb);
  align-self: stretch;
  display: flex;
  overflow: hidden;
}
.posts-wrap .hitmag-post > a .archive-thumb {
  margin: 0;
  width: 100%;
  display: flex;
}
.posts-wrap .hitmag-post > a img {
  width: 100%;
  height: 100%;          /* definite: ancestors above are stretched flex boxes */
  object-fit: cover;     /* uniform crop regardless of source ratio */
  display: block;
  border-radius: 0;
}

.posts-wrap .hitmag-post .archive-content {
  flex: 1 1 auto;
  padding: 22px 24px;
  min-width: 0;           /* let long titles wrap instead of stretching the row */
}

/* Posts with no featured image keep a tinted panel so the row still aligns. */
.posts-wrap .hitmag-post:not(.has-post-thumbnail) .archive-content::before { content: none; }
.posts-wrap .hitmag-post:not(.has-post-thumbnail)::before {
  content: "";
  flex: 0 0 var(--ij-thumb);
  max-width: var(--ij-thumb);
  background: linear-gradient(135deg, var(--ij-light-bg), #e8eaf1);
}

/* ==========================================================================
   Card typography
   ========================================================================== */
.entry-title { margin: 0 0 10px; line-height: 1.3; }
.entry-title,
.entry-title a { font-size: 21px; font-weight: 600; color: var(--ij-ink); text-decoration: none; }
.entry-title a:hover { color: var(--ij-accent); }

/* Category badge — solid dark chip, as on the reference */
.cat-links { margin: 0 0 12px; order: 2; }
.cat-links a {
  display: inline-block;
  background: var(--ij-badge);
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  text-decoration: none;
  line-height: 1.7;
}
.cat-links a:hover { background: var(--ij-accent); }

/* The reference puts the badge under the title; HitMag prints it above. */
.entry-header { display: flex; flex-direction: column; }
.entry-header .entry-title { order: 1; }
.entry-header .entry-meta { order: 3; }

.entry-meta, .entry-meta a { color: var(--ij-muted); font-size: 13px; }
.entry-meta a:hover { color: var(--ij-accent); }

.entry-summary { color: var(--ij-body); font-size: 15px; line-height: 1.65; margin-top: 4px; }

/* The reference cards carry no read-more control — the title and thumbnail are
   both links, and the excerpt already ends in an ellipsis. Hiding it also
   sidesteps a trap: HitMag's Customizer prints an inline <style> that sets a
   background on .th-readmore, and inline CSS outranks this stylesheet. Colouring
   the label to match the design produced blue text on a blue fill, i.e. an
   apparently empty button. */
.posts-wrap .th-readmore { display: none; }

/* Real buttons and inputs keep the accent fill */
input[type="submit"], button, .wp-block-button__link, .hm-search-submit {
  background: var(--ij-accent);
  color: #fff !important;
  border: 0;
  border-radius: var(--ij-radius);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
input[type="submit"]:hover, button:hover, .wp-block-button__link:hover { background: var(--ij-accent-dark); }

input[type="text"], input[type="email"], input[type="search"], textarea {
  border: 1px solid var(--ij-line);
  border-radius: var(--ij-radius);
  padding: 10px 12px;
  background: #fff;
  color: var(--ij-ink);
}
input:focus, textarea:focus {
  outline: 0;
  border-color: var(--ij-accent);
  box-shadow: 0 0 0 3px rgba(47, 90, 174, .14);
}

/* ==========================================================================
   Single post / page
   ========================================================================== */
/* HitMag tags the single article `hitmag-single`, not `hitmag-post` — matching
   only the latter left single posts and pages with no card at all. */
.single .content-area .hitmag-post,
.page .content-area .hitmag-post,
.hitmag-single {
  display: block;
  background: var(--ij-card);
  border: 1px solid var(--ij-line);
  border-radius: var(--ij-radius);
  box-shadow: var(--ij-shadow);
  padding: 34px 38px 40px;
}

/* HitMag wraps the featured image in <a class="image-link"> that links to the
   full-size file. Suppressing the image via post_thumbnail_html empties the
   anchor but leaves it in the markup — an invisible link straight to the raw
   JPEG. Remove it so single posts carry no orphan link. */
.hitmag-single > .image-link { display: none; }
.single .entry-title,
.page .entry-title,
.hitmag-single .entry-title { font-size: 32px; font-weight: 700; line-height: 1.25; color: var(--ij-ink); }
.single .entry-content,
.page .entry-content,
.hitmag-single .entry-content { color: var(--ij-body); font-size: 16.5px; line-height: 1.75; }
.entry-content a { color: var(--ij-accent); text-decoration: underline; }
.entry-content a:hover { color: var(--ij-accent-dark); }
.entry-content h2, .entry-content h3, .entry-content h4 { color: var(--ij-ink); }
.entry-content blockquote {
  border-left: 3px solid var(--ij-accent);
  background: var(--ij-light-bg);
  padding: 14px 18px;
  border-radius: 0 var(--ij-radius) var(--ij-radius) 0;
}

/* hitmag_posted_datetime() now returns nothing, which leaves the widget and
   related-post markup with empty <p class="hms-meta"> elements still taking up
   vertical space. */
.hms-meta:empty { display: none; }

/* ==========================================================================
   Job listing cards (visa-sponsorship round-up posts)
   ========================================================================== */
.ij-job {
  border: 1px solid var(--ij-line);
  border-radius: var(--ij-radius);
  background: var(--ij-card);
  padding: 18px 20px;
  margin: 0 0 14px;
}
.ij-job-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ij-ink);
}
.ij-job-meta { margin: 0 0 8px; font-size: 14px; color: var(--ij-body); }
.ij-job-cat {
  display: inline-block;
  background: var(--ij-light-bg);
  border-radius: 3px;
  padding: 2px 8px;
  margin-left: 6px;
  font-size: 12px;
  color: var(--ij-body);
  white-space: nowrap;
}
.ij-job-salary { margin: 0 0 12px; font-size: 15px; color: var(--ij-ink); }
.ij-job-apply { margin: 0; }
.ij-apply-btn {
  display: inline-block;
  background: var(--ij-accent);
  color: #fff !important;
  text-decoration: none !important;
  padding: 10px 20px;
  border-radius: var(--ij-radius);
  font-weight: 600;
  font-size: 15px;
}
.ij-apply-btn:hover { background: var(--ij-accent-dark); color: #fff !important; }
.ij-internal { margin: 0 0 18px; padding-left: 20px; }
.ij-internal li { margin-bottom: 6px; }

@media (max-width: 767px) {
  .ij-job { padding: 15px 15px; }
  .ij-apply-btn { display: block; text-align: center; }
}

/* ==========================================================================
   "More opportunities" — internal link buttons inside single posts.
   Deliberately styled to read as a distinct module rather than as body copy or
   as an ad unit: tinted panel, its own label, and link styling that does not
   imitate the accent-filled Apply button (the primary action must stay
   visually unambiguous).
   ========================================================================== */
.ij-more {
  margin: 30px 0;
  padding: 18px 18px 8px;
  background: var(--ij-light-bg);
  border: 1px solid var(--ij-line);
  border-left: 3px solid var(--ij-accent);
  border-radius: var(--ij-radius);
}
.ij-more-label {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ij-muted);
}
.ij-more-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 10px;
  padding: 13px 16px;
  background: var(--ij-card);
  border: 1px solid var(--ij-line);
  border-radius: var(--ij-radius);
  color: var(--ij-ink) !important;
  text-decoration: none !important;
  font-weight: 600;
  line-height: 1.4;
  transition: border-color .15s ease, transform .15s ease;
}
.ij-more-btn:hover {
  border-color: var(--ij-accent);
  color: var(--ij-accent) !important;
  transform: translateX(2px);
}
.ij-more-text { flex: 1 1 auto; }
.ij-more-arrow { flex: 0 0 auto; color: var(--ij-accent); font-weight: 700; }

@media (max-width: 767px) {
  .ij-more { padding: 15px 14px 6px; }
  .ij-more-btn { padding: 12px 13px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ij-more-btn { transition: none; }
  .ij-more-btn:hover { transform: none; }
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.navigation.pagination .page-numbers {
  display: inline-block;
  min-width: 38px;
  text-align: center;
  padding: 8px 12px;
  margin-right: 6px;
  background: var(--ij-card);
  border: 1px solid var(--ij-line);
  border-radius: var(--ij-radius);
  color: var(--ij-ink);
  text-decoration: none;
}
.navigation.pagination .page-numbers:hover,
.navigation.pagination .page-numbers.current {
  background: var(--ij-accent);
  border-color: var(--ij-accent);
  color: #fff;
}

/* ==========================================================================
   Footer — light, not the previous near-black slab
   ========================================================================== */
.site-footer, .footer-widget-area { background: var(--ij-light-bg); }
.site-footer, .site-footer a { color: var(--ij-body); }
.site-footer a:hover { color: var(--ij-accent); }
.footer-widget-area .widget {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 24px;
}
.footer-widget-area .widget-title { color: var(--ij-ink); font-size: 15px; font-weight: 700; }
.footer-widget-area .widget-title::before,
.footer-widget-area .widget-title::after { content: none; }
.footer-widget-area .widget ul li { border-bottom: 1px solid var(--ij-line); }
.footer-widget-area .widget ul li a { color: var(--ij-body); }
.site-info { background: var(--ij-light-bg); color: var(--ij-muted); border-top: 1px solid var(--ij-line); }

/* ==========================================================================
   Responsive — cards stack below the tablet breakpoint
   ========================================================================== */
@media (max-width: 767px) {
  .posts-wrap .hitmag-post { display: block; }
  .posts-wrap .hitmag-post > a { max-width: none; flex: none; display: block; }
  .posts-wrap .hitmag-post > a img { height: 190px; }
  .posts-wrap .hitmag-post:not(.has-post-thumbnail)::before { display: block; height: 150px; max-width: none; }
  .posts-wrap .hitmag-post .archive-content { padding: 18px 18px 22px; }
  .single .content-area .hitmag-post,
  .page .content-area .hitmag-post,
  .hitmag-single { padding: 22px 20px 26px; }
  .single .entry-title, .page .entry-title { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .posts-wrap .hitmag-post { transition: none; }
}