/*
Theme Name: verremotesjob
Theme URI: https://remotesjob.com
Author: Remotesjob team
Author URI: https://remotesjob.com
Description: The verremotesjob theme brings the RemotesJob design up to date with modern requirements: a mobile‑first layout, AMP‑compatible markup and improved navigation. The menu toggle is moved to the top right, login and sign‑up links are tucked into the navigation panel, and responsive styles ensure the layout scales gracefully on phones, tablets and desktops. The theme registers custom post types for jobs and categories, supports custom logos and favicons via the WordPress Customizer, and optimises for fast page loads and search visibility on Google and Bing.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: remotesjob
*/

/*
 * Core Styles
 *
 * The CSS below establishes a minimal reset and a small design system.
 * Colours and spacing are defined using CSS variables so that adjustments
 * can be made in one place.  The palette is intentionally kept simple
 * (shades of dark blue and golden accents) to evoke the look of the
 * inspiration site while remaining lightweight and customisable.
 */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  color: var(--color-text, #1e293b);
  background-color: var(--color-bg, #f9fafb);
}

/*
 * Layout for the header container. Ensure the branding, navigation and
 * toggle button are aligned horizontally and spaced appropriately. When
 * mobile navigation is activated the flex layout still stacks elements
 * vertically via media queries defined later.
 */
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Primary navigation styles */
.primary-navigation {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* Unordered lists for menu and auth links */
.primary-navigation .menu,
.primary-navigation .auth-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Styling for the login and sign‑up links to match the previous buttons */
.primary-navigation .auth-menu .sign-up a,
.primary-navigation .auth-menu .login a {
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-primary);
  font-weight: 500;
  display: inline-block;
}
.primary-navigation .auth-menu .sign-up a {
  background-color: var(--color-primary);
  color: var(--color-light);
}
.primary-navigation .auth-menu .login a {
  background-color: transparent;
  color: var(--color-primary);
}

/* Menu toggle button (hamburger) */
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  margin-left: 1rem;
  display: none; /* Hidden on larger screens */
}

/* Responsive behaviour */
@media (max-width: 768px) {
  /* Display toggle on small screens */
  .menu-toggle {
    display: block;
  }
  /* Hide the menu lists by default on small screens */
  .primary-navigation .menu,
  .primary-navigation .auth-menu {
    display: none;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    width: 100%;
  }
  /* Show lists when toggled class is present */
  .primary-navigation .menu.toggled,
  .primary-navigation .auth-menu.toggled {
    display: flex;
  }
}

/* Job filter responsiveness */
@media (max-width: 768px) {
  .job-filters > div {
    flex: 1 1 100%;
  }
  .job-filters select,
  .job-filters button {
    width: 100%;
  }
}

/* Ensure media elements do not overflow their containers */
img,
video {
  max-width: 100%;
  height: auto;
}

/* Prevent long content from overflowing horizontally */
.site-main {
  word-wrap: break-word;
}

/* Colour palette */
:root {
  --color-primary: #0061ff; /* bright blue used for call‑to‑action buttons */
  --color-secondary: #001c43; /* dark blue used for headers and footers */
  --color-accent: #c89c22; /* golden accent inspired by the logo */
  --color-text: #1e293b; /* dark slate for body text */
  --color-light: #ffffff; /* white */
  --color-muted: #64748b; /* grey used for secondary text */
  --border-radius: 6px;
  --spacing: 1rem;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: underline;
}

/* Global containers */
.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Header */
header.site-header {
  background-color: var(--color-light);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: var(--spacing) 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

header .site-branding {
  display: flex;
  align-items: center;
}
header .site-branding img {
  max-height: 42px;
  margin-right: 0.5rem;
}
header nav {
  display: flex;
  gap: 1rem;
  align-items: center;
}
header nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
header nav .menu li {
  margin: 0;
}
header nav .menu li a {
  color: var(--color-text);
  font-weight: 500;
}
header .header-actions {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}
header .btn {
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
header .btn.sign-up {
  background-color: var(--color-primary);
  color: var(--color-light);
}
header .btn.sign-up:hover {
  background-color: darken(var(--color-primary), 10%);
}
header .btn.login {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
header .btn.login:hover {
  background-color: var(--color-primary);
  color: var(--color-light);
}

/* Hero section */
.hero {
  /* Use both a gradient and a custom image for the hero background.  
     The first image (hero-bg.png) is bundled with the theme and depicts an  
     abstract, cartoon‑style remote working scene.  The gradient provides a  
     fallback if the image fails to load. */
  background:
    linear-gradient(to right, #f9fafb, #eef2f7);
  background-image: url('assets/hero-bg.png'), linear-gradient(to right, #f9fafb, #eef2f7);
  background-size: cover;
  background-position: center;
  padding: 4rem 0;
  text-align: center;
  color: var(--color-text);
}
.hero h1 {
  font-size: 2.5rem;
  margin: 0 0 1rem;
  font-weight: 700;
}
.hero p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: var(--color-muted);
}
.hero .hero-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero .btn {
  background-color: var(--color-primary);
  color: var(--color-light);
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  font-size: 1rem;
}

/* Section headings */
section.category-section {
  padding: 3rem 0;
}
section.category-section h2 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}

/* Job cards */
.job-cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.job-card {
  background-color: var(--color-light);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--border-radius);
  padding: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.job-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.job-card .job-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0.5rem 0;
}
.job-card .company-name {
  font-size: 0.95rem;
  color: var(--color-muted);
}
.job-card .meta {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 0.25rem;
}
.job-card .apply-button {
  margin-top: 0.75rem;
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-light);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  font-size: 0.9rem;
}

/* Footer */
footer.site-footer {
  background-color: var(--color-secondary);
  color: var(--color-light);
  padding: 2rem 0;
  font-size: 0.9rem;
}
footer .footer-sections {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  margin-bottom: 2rem;
}
footer .footer-section h3 {
  margin-top: 0;
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #ffffff;
}
footer .footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer .footer-section ul li a {
  color: #cbd5e1;
  display: block;
  padding: 0.25rem 0;
}
footer .footer-section ul li a:hover {
  color: #ffffff;
}
footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem;
}
footer .social-links {
  display: flex;
  gap: 0.75rem;
}
footer .social-links a {
  color: #cbd5e1;
  font-size: 1.25rem;
}
footer .social-links a:hover {
  color: #ffffff;
}

/* Responsive helpers */
@media (max-width: 768px) {
  header nav .menu {
    display: none;
  }
  header nav .menu.toggled {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: var(--color-light);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: var(--spacing);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  header .menu-toggle {
    display: inline-block;
    cursor: pointer;
  }
}