/* =========================================
   GRS Recruitment | Firefish Portal Branding
   Paste into Firefish "Custom CSS"
   ========================================= */

/* Brand tokens */
:root{
  --grs-teal:#003840;
  --grs-teal-2:#0c2e33;
  --grs-orange:#D97A29;
  --grs-peach:#F2E0D9;
  --grs-white:#ffffff;
  --grs-text:#0c2e33;
  --grs-radius:14px;
  --grs-shadow:0 12px 28px rgba(0,0,0,.10);
  --grs-font: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Global base */
html, body{
  font-family: var(--grs-font) !important;
  color: var(--grs-text);
}

body{
  background: #f6f3f1 !important; /* subtle warm background */
}

/* Links */
a{
  color: var(--grs-teal) !important;
  text-decoration: none;
}
a:hover{
  color: var(--grs-orange) !important;
}

/* Headings */
h1,h2,h3,h4{
  font-family: var(--grs-font) !important;
  
  letter-spacing: -0.01em;
}

/* =========================================
   HEADER / NAV
   (targets multiple common Firefish structures)
   ========================================= */
header, .header, .site-header, .navbar, .top-bar, .page-header{
  background: var(--grs-teal) !important;
  color: var(--grs-white) !important;
}

header a, .header a, .site-header a, .navbar a, .top-bar a, .page-header a{
  color: var(--grs-white) !important;
  font-weight: 600;
}

header a:hover, .navbar a:hover, .site-header a:hover{
  color: var(--grs-orange) !important;
}

/* If there’s a logo area that needs breathing room */
header .logo, .site-header .logo, .navbar-brand{
  padding: 10px 0;
}

/* =========================================
   BUTTONS
   ========================================= */

/* Primary buttons (includes "I'm Interested") */
button,
input[type="submit"],
input[type="button"],
a.button, a.btn, .btn, .button,
a[class*="button"], a[class*="btn"]{
  border-radius: 5px !important;
  font-family: var(--grs-font) !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}

/* Orange primary */
.btn-primary, .button-primary,
a.btn-primary, a.button-primary,
a[href*="interest"], a[href*="Interested"],
a:has(span):where(:not([class*="nav"])) {
  /* keep broad selectors safe: true primary below overrides more reliably */
}

/* Reliable primary styling */
.btn-primary, .button-primary,
a.btn-primary, a.button-primary,
button.btn-primary, input.btn-primary{
  background: var(--grs-orange) !important;
  border: 0px solid var(--grs-orange) !important;
  color: var(--grs-teal) !important;
  box-shadow: none;
}

.btn-primary:hover, .button-primary:hover,
a.btn-primary:hover, a.button-primary:hover{
  background: transparent !important;
  color: var(--grs-orange) !important;
}

/* Secondary */
.btn-secondary, .button-secondary,
a.btn-secondary, a.button-secondary{
  background: transparent !important;
  border: 0px solid var(--grs-orange) !important;
  color: var(--grs-orange) !important;
}
.btn-secondary:hover, .button-secondary:hover,
a.btn-secondary:hover, a.button-secondary:hover{
  background: var(--grs-orange) !important;
  color: var(--grs-teal) !important;
}

/* =========================================
   FORMS (search + filters)
   ========================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea{
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  padding: 12px 12px !important;
  font-family: var(--grs-font) !important;
  background: #fff !important;
}

input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: var(--grs-orange) !important;
  box-shadow: 0 0 0 4px rgba(217,122,41,.18) !important;
}

/* Labels */
label{
  font-weight: 700;
  color: var(--grs-teal-2);
}

/* =========================================
   JOB LIST / VACANCIES CARDS
   (covers a few Firefish variants)
   ========================================= */
#content, .content, .main, main{
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 16px;
}

/* Card containers */
.vacancy, .vacancy-item, .vacancies li,
.job, .job-item, .job-listing, .listing,
.search-result, .result, article{
  background: #fff;
  border-radius: var(--grs-radius);
}

/* If Firefish uses list items for jobs */
.vacancies, .job-list, .results, ul.vacancies{
  list-style: none !important;
  padding-left: 0 !important;
}

/* Apply consistent job card styling (safe, only when content is job-like) */
.vacancy, .vacancy-item, .job-item, .job-listing, .search-result, .result{
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: var(--grs-shadow);
  padding: 18px 18px 16px !important;
  margin: 0 0 16px 0 !important;
}

/* Job title links */
.vacancy a, .vacancy-item a, .job-item a, .job-listing a, .search-result a{
  color: var(--grs-teal) !important;
  font-weight: 800 !important;
  font-size: 18px;
}

.vacancy a:hover, .vacancy-item a:hover, .job-item a:hover{
  color: var(--grs-orange) !important;
}

/* Small meta text */
small, .meta, .vacancy-meta, .job-meta, .ref, .posted{
  color: rgba(12,46,51,.72) !important;
  font-weight: 600;
}

/* Pills/tags if present (discipline/location) */
.tag, .pill, .badge, .label{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(217,122,41,.12);
  color: var(--grs-teal);
  border: 1px solid rgba(217,122,41,.30);
  font-weight: 700;
  font-size: 12px;
}

/* =========================================
   PAGINATION
   ========================================= */
.pagination a, .pager a, .paging a, .pagination button{
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  padding: 8px 12px !important;
  margin: 0 4px !important;
  background: #fff !important;
  font-weight: 700 !important;
}

.pagination a:hover, .pager a:hover, .paging a:hover{
  border-color: var(--grs-orange) !important;
  color: var(--grs-orange) !important;
}

.pagination .active, .pager .active, .paging .active{
  background: var(--grs-orange) !important;
  border-color: var(--grs-orange) !important;
  color: var(--grs-teal) !important;
}

/* =========================================
   FOOTER
   ========================================= */
footer, .footer, .site-footer{
  background: var(--grs-teal) !important;
  color: rgba(255,255,255,.92) !important;
  padding: 28px 16px !important;
}

footer a, .footer a, .site-footer a{
  color: rgba(255,255,255,.92) !important;
}
footer a:hover, .footer a:hover, .site-footer a:hover{
  color: var(--grs-orange) !important;
}

/* =========================================
   COOKIE BANNER (Firefish often injects a bar)
   ========================================= */
.cookie, .cookie-banner, .cookie-policy, .cookie-notice,
div[id*="cookie"], section[id*="cookie"]{
  background: var(--grs-teal) !important;
  color: var(--grs-white) !important;
}

.cookie a, .cookie-banner a, .cookie-notice a{
  color: var(--grs-orange) !important;
  font-weight: 800;
}

/* Cookie buttons */
.cookie button, .cookie-banner button, .cookie-notice button,
.cookie input[type="button"], .cookie input[type="submit"]{
  background: var(--grs-orange) !important;
  border: 2px solid var(--grs-orange) !important;
  color: var(--grs-teal) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 800 !important;
}

/* =========================================
   MOBILE TWEAKS
   ========================================= */
@media (max-width: 640px){
  #content, .content, .main, main{
    padding: 18px 12px;
  }

  .vacancy a, .vacancy-item a, .job-item a, .job-listing a{
    font-size: 16px;
  }

  .vacancy, .vacancy-item, .job-item, .job-listing, .search-result, .result{
    padding: 16px !important;
  }
}