/*
Theme Name: KSA Jobs Alert
Theme URI: https://ksajobsalert.com
Author: Antigravity & KSA Jobs Team
Author URI: https://ksajobsalert.com
Description: Official WordPress theme for KSA Jobs Alert, mirroring the modern, high-performance Flutter mobile application design. Features native AI CV Writer integration, automated blog filtering, post disclaimer notices, dark mode, multilingual translation tabs, and sleek Middle Eastern UI.
Version: 1.0.0
Requires at least: 5.8
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: ksajobs
Tags: jobs, recruitment, responsive-layout, dark-mode, custom-header, translation-ready, rtl-language-support
*/

:root {
  --primary-color: #023047;
  --accent-color: #045075;
  --highlight-blue: #2196f3;
  --highlight-hover: #1976d2;
  --bg-scaffold: #f5f7fa;
  --card-bg: #ffffff;
  --text-main: #1f2937;
  --text-muted: #6b7280;
  --border-color: #e5e7eb;
  --badge-bg: rgba(33, 150, 243, 0.12);
  --badge-text: #0284c7;
  --header-curve: 30px;
  --card-radius: 14px;
  --transition-speed: 0.25s;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(2, 48, 71, 0.08);
  --shadow-lg: 0 10px 25px rgba(2, 48, 71, 0.12);
}

[data-theme="dark"] {
  --primary-color: #023047;
  --accent-color: #045075;
  --highlight-blue: #38bdf8;
  --highlight-hover: #0284c7;
  --bg-scaffold: #121212;
  --card-bg: #1e1e1e;
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --border-color: #2d3748;
  --badge-bg: rgba(56, 189, 248, 0.15);
  --badge-text: #7dd3fc;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.7);
}

/* Base resets & typography */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: var(--bg-scaffold);
  color: var(--text-main);
  line-height: 1.6;
  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--highlight-blue);
  text-decoration: none;
  transition: color var(--transition-speed);
}

a:hover {
  color: var(--highlight-hover);
}

/* ==========================================================================
   Header Brand Alignment (Logo on left, Title on top, Tagline below)
   Note: main.css handles the primary styling. These are fallback/override rules.
   ========================================================================== */
.header-brand {
  display: flex;
  align-items: center;
}

.header-brand-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #ffffff;
}

.header-brand-logo {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: block;
  flex-shrink: 0;
}

.header-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  line-height: 1.2;
}

.header-site-title {
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: 0.5px;
  margin: 0;
  display: block;
  font-family: 'Cairo', sans-serif;
}

.header-site-tagline {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.2;
  margin-top: 2px;
  display: block;
  font-family: 'Cairo', sans-serif;
}

/* ==========================================================================
   Strict Single Column Job Cards (1 post per row across all screens)
   ========================================================================== */
.jobs-list-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}

/* Job Card Action Divider & Apply Now Button */
.job-card-action-divider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 12px 0 10px !important;
  width: 100% !important;
}

.job-card-action-divider .divider-line {
  flex: 1 1 auto !important;
  height: 1px !important;
  background: var(--border-color) !important;
  display: block !important;
}

.btn-card-apply {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #023047 !important;
  color: #ffffff !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(2, 48, 71, 0.2) !important;
  flex-shrink: 0 !important;
}

.btn-card-apply:hover {
  background: #2196f3 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.35) !important;
}

.btn-card-apply i {
  font-size: 11px !important;
  transition: transform 0.2s ease !important;
}

.btn-card-apply:hover i {
  transform: translateX(3px) !important;
}

/* Unhighlighted City Meta & Multiple Cities */
.meta-cell-value.meta-cities-wrap {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  gap: 2px 4px !important;
}

.meta-city .meta-city-link {
  color: var(--text-main) !important;
  text-decoration: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

.meta-city .meta-city-link:hover {
  color: var(--highlight-blue) !important;
  text-decoration: underline !important;
}

.meta-city-sep {
  color: var(--text-muted) !important;
  font-weight: 400 !important;
}

.search-modal-close {
  cursor: pointer !important;
}

/* Single Post: City Category Links & Multiple Cities */
.single-info-box .info-value.info-cities-wrap {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  white-space: normal !important;
  gap: 2px 4px !important;
  line-height: 1.4 !important;
}

.single-city-link {
  color: var(--text-main) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  transition: color 0.2s ease !important;
}

.single-city-link:hover {
  color: var(--highlight-blue) !important;
  text-decoration: underline !important;
}

.single-meta-actions-only {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 16px !important;
}

/* Bookmark Icon States (Single icon at a time, fixes double icon bug) */
.btn-bookmark-toggle .icon-saved {
  display: none !important;
}

.btn-bookmark-toggle .icon-unsaved {
  display: inline-block !important;
}

.btn-bookmark-toggle.is-saved .icon-saved {
  display: inline-block !important;
  color: #eab308 !important;
}

.btn-bookmark-toggle.is-saved .icon-unsaved {
  display: none !important;
}

/* Suppress unstyled plugin desktop disclaimer (the one without heading) */
.iaam-desktop-disclaimer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Similar Job Openings: 2-Column Grid View on Desktop, 1-Column on Mobile */
.related-jobs-section {
  margin-top: 40px !important;
}

.related-header {
  margin-bottom: 20px !important;
}

.related-header h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}

.related-header h3 i {
  color: var(--highlight-blue) !important;
}

.related-jobs-section .jobs-list-grid,
.related-jobs-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {

  .related-jobs-section .jobs-list-grid,
  .related-jobs-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Header, Footer, AI CV & Feed Alignment (Synchronized to 860px max-width)
   Aligns Logo on left & Menu on right with Latest Jobs Opportunities & Job Cards
   ========================================================================== */
.header-container,
.footer-container,
.ai-cv-app-container .feed-container,
.auth-page-container .feed-container,
.account-page-container .feed-container,
.user-posts-page-container .feed-container,
.submit-post-page-container .feed-container,
.feed-container,
.single-job-wrapper,
.hero-inner-container {
  width: 100% !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

@media (min-width: 892px) {

  .header-container,
  .footer-container,
  .ai-cv-app-container .feed-container,
  .auth-page-container .feed-container,
  .account-page-container .feed-container,
  .user-posts-page-container .feed-container,
  .submit-post-page-container .feed-container,
  .feed-container,
  .single-job-wrapper,
  .hero-inner-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .desktop-nav {
    display: block !important;
  }

  .mobile-menu-trigger {
    display: none !important;
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
    gap: 20px !important;
  }
}