/*
 * Ashby Custom Job Board CSS
 * Version 1.5
 * Description: A clean, modern theme for your Ashby job board using the Inter font.
 * NOTE: The @import rule has been removed. The font MUST be loaded in your website's main HTML file.
 */

/* --- FONT & COLOR DEFINITIONS --- */
:root {
    --primary-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --primary-color: #4f46e5; /* A modern indigo */
    --primary-color-hover: #4338ca;
    --text-color: #111827; /* Dark gray for high contrast */
    --subtle-text-color: #6b7280;
    --border-color: #e5e7eb;
    --card-background: #ffffff;
    --page-background: #f9fafb;
  }
  
  /* --- GENERAL BODY STYLES (ALLOWED) --- */
  body {
    font-family: var(--primary-font);
    background-color: var(--page-background);
    color: var(--text-color);
    line-height: 1.6;
  }
  
  /* --- TYPOGRAPHY (ALLOWED) --- */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--primary-font);
    font-weight: 600;
    margin-bottom: 0.75em;
  }
  
  a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  a:hover {
    text-decoration: underline;
    color: var(--primary-color-hover);
  }
  
  
  /* --- JOB LISTING & BUTTON STYLES (ACTION REQUIRED) --- */
  /*
    [IMPORTANT] The styles below have been commented out to fix the upload error.
    The error "only specified classes and at-rules allowed" confirms that class names like '._container_1c2vr_1'
    are NOT on Ashby's list of stylable classes. These are dynamic and cannot be used here.
  
    HOW TO PROCEED:
    To style the job listings and buttons, you MUST use the official, stable class names provided by Ashby.
    Please search Ashby's help documentation for "Job Board Theme" or "Custom CSS" to find the list of approved classes.
    Once you find the correct class names, you can replace the commented-out ones below and uncomment the styles.
  */
  
  /*
  .ashby-job-posting-container {
    display: block;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    text-decoration: none !important;
  }
  
  .ashby-job-posting-container:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-3px);
  }
  
  .ashby-job-posting-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
  }
  
  .ashby-job-posting-details {
    color: var(--subtle-text-color);
    font-size: 0.9rem;
    margin-top: 8px;
  }
  
  .ashby-button-primary,
  input[type="submit"] {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    font-family: var(--primary-font);
    font-weight: 500;
    font-size: 1rem;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    transition: background-color 0.2s ease-in-out;
  }
  
  .ashby-button-primary:hover,
  input[type="submit"]:hover {
    background-color: var(--primary-color-hover) !important;
    color: #ffffff !important;
  }
  */
  
  
  /* --- FORM INPUT STYLES (ALLOWED) --- */
  input[type="text"],
  input[type="email"],
  textarea,
  select,
  button,
  input[type="submit"] {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-family: var(--primary-font);
      font-size: 1rem;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  
  input[type="text"]:focus,
  input[type="email"]:focus,
  textarea:focus,
  select:focus,
  button:focus,
  input[type="submit"]:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
  }
  
  
  /* --- RESPONSIVE DESIGN (ALLOWED & ACTION REQUIRED) --- */
  @media (max-width: 768px) {
    h1 {
      font-size: 1.75rem;
    }
    
    /*
    .ashby-job-posting-container {
      padding: 16px;
    }
    
    .ashby-job-posting-title {
      font-size: 1.1rem;
    }
    */
  }