/*
Theme Name: Techseek Jobs
Theme URI: https://techseekiq.co.uk
Author: ChatGPT
Version: 1.0
Description: A custom AMP‑first WordPress theme designed for the Techseek Jobs website.  The layout and
functionality mirror the Remotive.com job board, with a focus on fully remote tech, AI, crypto
and UK‑centric roles.  The theme includes accessible navigation, category and tag archives,
custom job listings and filters, and is built with performance and accessibility in mind.  It
supports PHP 8.3 and utilises WordPress’s Customizer for easy editing of hero text, colours and
logos.  All CSS in this file is kept lightweight to stay well within AMP’s 75 KB limit.  For
detailed control of colours and layout you can adjust the CSS variables below.
Requires PHP: 8.3
License: GPLv2 or later
*/

/*
 * Base variables.  Adjust these values in the Customizer to update the theme’s appearance.
 */
:root {
  --ts-primary: #4b3621; /* dark brown reminiscent of remotive’s palette */
  --ts-accent:  #1f6e43; /* green accent used for interactive elements */
  --ts-background: #f5efe4; /* warm beige background for the whole site */
  --ts-font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Global styles */
html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--ts-font-stack);
  background: var(--ts-background);
  color: var(--ts-primary);
  line-height: 1.6;
}
a {
  color: var(--ts-accent);
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}

/* Layout wrapper */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
header.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.site-branding {
  display: flex;
  align-items: center;
}
.site-branding img {
  max-height: 48px;
  height: auto;
  width: auto;
  margin-right: .5rem;
}
.site-branding .site-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--ts-primary);
}
.primary-navigation {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}
.primary-navigation li a {
  color: var(--ts-primary);
  padding: .5rem;
  display: block;
}
.primary-navigation li a:focus,
.primary-navigation li a:hover {
  background: rgba(0, 0, 0, 0.05);
  border-radius: .25rem;
}

/* Mobile navigation toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--ts-primary);
  cursor: pointer;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  .primary-navigation {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--ts-background);
    width: 220px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1rem;
    border-radius: .5rem;
  }
  body.nav-open .primary-navigation {
    display: flex;
  }
}

/* Hero section */
.hero {
  background: var(--ts-accent);
  color: #fff;
  padding: 3rem 1rem;
  text-align: center;
  border-radius: .5rem;
  margin: 1rem 0;
}
.hero h1 {
  margin: 0 0 1rem;
  font-size: 2rem;
}
.hero p {
  margin: 0 0 2rem;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.search-form {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.search-form input[type="search"],
.search-form select {
  padding: .5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: .25rem;
  flex: 1 1 250px;
  max-width: 300px;
}
.search-form button {
  background: var(--ts-primary);
  color: #fff;
  border: none;
  padding: .5rem 1rem;
  border-radius: .25rem;
  cursor: pointer;
}

/* Category filter pills */
.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0;
  justify-content: center;
}
.category-filter a {
  padding: .3rem .6rem;
  border: 1px solid var(--ts-accent);
  border-radius: 1rem;
  color: var(--ts-accent);
  font-size: .875rem;
}
.category-filter a:hover,
.category-filter a:focus {
  background: var(--ts-accent);
  color: #fff;
}

/* Job cards */
.job-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.job-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: .5rem;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .2s ease;
}
.job-card:hover,
.job-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.job-card .job-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
.job-card .job-header img {
  width: 40px;
  height: 40px;
  border-radius: .25rem;
  object-fit: contain;
}
.job-card h2 {
  font-size: 1.1rem;
  margin: 0;
  color: var(--ts-primary);
}
.job-card .job-meta {
  font-size: .875rem;
  color: var(--ts-accent);
  margin-bottom: .5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.job-card .job-meta span {
  background: rgba(0,0,0,0.05);
  padding: .2rem .4rem;
  border-radius: .25rem;
}
.job-card .job-excerpt {
  font-size: .875rem;
  color: var(--ts-primary);
  flex-grow: 1;
  margin-bottom: 1rem;
}
.job-card .apply-button {
  background: var(--ts-accent);
  color: #fff;
  border-radius: .25rem;
  padding: .5rem 1rem;
  text-align: center;
  font-weight: bold;
  margin-top: auto;
}
.job-card .apply-button:hover,
.job-card .apply-button:focus {
  background: var(--ts-primary);
}

/* Footer */
footer.site-footer {
  background: var(--ts-primary);
  color: #fff;
  padding: 2rem 1rem;
  margin-top: 2rem;
}
.site-footer a {
  color: #fff;
  text-decoration: underline;
}
.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
.newsletter-form input[type="email"] {
  flex: 1 1 200px;
  padding: .5rem;
  border: none;
  border-radius: .25rem;
}
.newsletter-form button {
  background: var(--ts-accent);
  color: #fff;
  border: none;
  padding: .5rem 1rem;
  border-radius: .25rem;
  cursor: pointer;
}
.newsletter-form button:hover,
.newsletter-form button:focus {
  background: #fff;
  color: var(--ts-primary);
}

/* Accessibility helpers */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}