:root {
  --color-light-green: #d9dbca;
  --color-green: #888c75;
  --color-beige: #f6f5f1;
  --color-beige-trans: rgba(246, 245, 241, 0.85);
  --color-dark: #232323;

  /* Typography */
  --font-header: "Source Serif 4", serif;
  --font-body: "Red Hat Display", sans-serif;
}

body {
    font-family: var(--font-body);
}
h1, h2, h3, h4 {
    font-family: var(--font-header);
    font-weight:400;
    color: var(--color-green);
}
h2, h3, h4 {
    margin-bottom:1rem;
}
p, li, td {
    color: var(--color-dark);
}
a, a:link, a:hover, a:visited {
    color: var(--color-dark);
    text-decoration:none;
}
a:hover {
   color: var(--color-dark);
   text-decoration:underline; 
}

.navbar-brand {
    width:50%;
}
.navbar-brand img {
    height:auto;
}
.navbar-toggler {
    border-radius:30px;
    border-color:var(--color-green);
}
.btn-primary, a.btn-primary {
    background-color:var(--color-green);
    border-color:var(--color-green);
    color:#ffffff;
}
.btn-primary:hover, a.btn-primary:hover {
    background-color:var(--color-light-green);
    border-color:var(--color-light-green);
    color:var(--color-dark);
    text-decoration:none;
}

.header-bar {
    background-color: var(--color-beige);
}

.job-search-bar {
    background-color:var(--color-green);
}
.job-search-bar p, .job-search-bar a {
    color:#ffffff;
}
.job-search-bar h2.job-search-title {
    font-family:var(--font-body);
    font-size:18px;
    font-weight:400;
    color:#ffffff;
}
.job-search-dropdown a {
    color:var(--color-dark);
}
.job-search-dropdown > .btn {
    border-radius: 999px;      /* pill shape */
    border: 1px solid #ccc;    /* tweak colour */
    background-color: #fff;
}

/* make dropdown match the “panel” look */
.job-search-dropdown .dropdown-menu {
    border-radius: 20px;
}

.job-search-dropdown .job-search-title {
    color:var(--color-green);
    font-size:20px;
}
@media (max-width: 767px) {
    .job-search-title {
        display:none !important;
    }
}

.small-banner {
    background-color: var(--color-light-green); /* placeholder background */
}

.small-banner__text {
    font-size: 0.9rem;       /* adjust to suit */
    letter-spacing: 0.05em;  /* for that “banner” feel */
    text-transform: uppercase;
}


.hero-banner {
    position: relative;
    min-height: 320px;                /* adjust height as needed */
    display: flex;
    align-items: center;              /* vertical center */
    justify-content: center;          /* horizontal center */
    overflow: hidden;

    /* Background image */
    background-image: url('https://picsum.photos/1600/400');
    background-size: cover;
    background-position: center center;
}

/* Gradient overlay on top of the image */
.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    /* top transparent → bottom solid (adjust colours/opacity) */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.35) 40%,
        rgba(0, 0, 0, 0.7) 100%
    );
    pointer-events: none;
}

/* Ensure content sits above the gradient */
.hero-banner__content {
    position: relative;
    z-index: 1;
}

/* Full-width hero with image background */
.hero-text-banner {
    position: relative;
    min-height: 70vh;                     /* adjust height as needed */
    padding: 2rem 1rem;                   /* creates the small gap on mobile */
    display: flex;
    align-items: center;                  /* vertical centre */
    justify-content: center;              /* horizontal centre */

    background-image: url('https://picsum.photos/1600/600');
    background-size: cover;
    background-position: center center;
}

/* Central translucent panel */
.hero-text-banner__panel {
    background-color: var(--color-beige-trans);  /* semi-transparent white */
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 1100px;                    /* controls width on larger screens */
    margin: 0 auto;
}

/* Tweak spacing on larger screens */
@media (min-width: 768px) {
    .hero-text-banner {
        padding: 4rem 2rem;               /* a bit more breathing room */
    }

    .hero-text-banner__panel {
        padding: 3rem 3rem;
    }
}

/* Breadcrumb bar */
.breadcrumb-bar {
    background-color: #f8f8f8; /* placeholder – match your header bg */
}

/* Center breadcrumbs, remove default background */
.breadcrumb {
    background-color: transparent;
    margin-bottom: 0;
}

/* Use a pipe as the separator instead of Bootstrap's slash */
.breadcrumb-item + .breadcrumb-item::before {
    content: "|";
}

/* Narrow hero with background image */
.hero-narrow {
    position: relative;
    min-height: 180px; /* adjust to suit */
    padding: 2.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;

    background-size: cover;
    background-position: center center;
}

/* Inner translucent strip */
.hero-narrow__inner {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 2rem 3rem;
    width: 100%;
    max-width: 1200px;
}

/* Title styling (adjust fonts/size to match brand) */
h1.hero-narrow__title {
    font-size:32px;
}

/* Tweak padding on smaller screens */
@media (max-width: 767.98px) {
    .hero-narrow {
        padding: 2rem 0.75rem;
    }

    .hero-narrow__inner {
        padding: 1.5rem 1.25rem;
    }

    .hero-narrow__title {
        font-size: 1.1rem;
    }
}

/* Background colour placeholder */
.testimonial-section {
    background-color: var(--color-green); /* replace with your brand colour */
    color: #ffffff;
}

.testimonial-section h2, 
.testimonial-section p, 
.testimonial-section a {
    color:#ffffff;
}

.testimonial-section .carousel-item {
    padding-left:60px;
    padding-right:60px;
}

/* Custom circular prev/next buttons */
.testimonial-control {
    width: auto;
    opacity: 1;
    top: 50%;
    transform: translateY(-50%);
}
.carousel-control-prev .testimonial-control-icon {
    transform: scaleX(-1);
}
/*
.testimonial-control-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #dde1c2;          
    color: #666;          
    font-size: 1.5rem;
}
*/
/* Position controls slightly in from the edges */
.carousel-control-prev.testimonial-control {
    left: 0;
}

.carousel-control-next.testimonial-control {
    right: 0;
}

.card-testimonial {
    background-color:var(--color-light-green);
    border:none;
}

/* Outer wrapper: controls spacing and lets the icon hang off the bottom */
.staff-card-outer {
    position: relative;
    padding-bottom: 0;
}

/* Inner card: rounded & clipped, background image fills it */
.staff-card {
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 3 / 4;           /* consistent card shape */
    cursor: pointer;
}

/* Keyboard focus for accessibility */
.staff-card:focus {
    outline: none;
}

.staff-card h3 {
    font-size:24px;
    margin-bottom:20px;
}
/* Base overlay styles */
.staff-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    color: #333;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Default bottom bar – made deeper per your request */
.staff-card__overlay--bar {
    bottom: 0;
    padding: 2rem 2rem 3.4rem;  /* bigger height for name/role area */
    background-color: rgba(255, 255, 255, 0.9);
    text-align: center;
    border-radius:40px;
    height:160px;
    align-items: center;
}

/* Full overlay takes entire card on hover/tap */
.staff-card__overlay--full {
    inset: 0;
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Inner content for full overlay */
.staff-card__overlay-content {
    padding: 2rem 2.5rem;
}

/* Typography */
.staff-card__name {
    margin-bottom: 0.35rem;
    font-size: 1.5rem;
    font-style: italic;          /* swap for your script font */
}

.staff-card__role {
    font-size: 0.9rem;
}

/* LinkedIn icon now hangs off the bottom edge */
.staff-card__linkedin {
    position: absolute;
    left: 50%;
    bottom: 0;                      /* bottom of outer wrapper */
    transform: translate(-50%, 50%);/* half outside */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff;      /* placeholder colour */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
    z-index: 3;                      /* above overlays & card */
}

/* Hover / focus behaviour:
   show full overlay, hide bar */
.staff-card:hover .staff-card__overlay--bar,
.staff-card:focus-within .staff-card__overlay--bar,
.staff-card:focus .staff-card__overlay--bar {
    opacity: 0;
    transform: translateY(10px);
}

.staff-card:hover .staff-card__overlay--full,
.staff-card:focus-within .staff-card__overlay--full,
.staff-card:focus .staff-card__overlay--full {
    opacity: 1;
}

/* Slight tweak for very narrow screens */
@media (max-width: 575.98px) {
    .staff-card__overlay-content {
        padding: 1.5rem 1.5rem;
    }
}

/* Background (adjust to match your palette) */
.job-listing-section {
    background-color: var(--color-light-green);
}

/* Header row: title + ref with underline */
.job-header {
    border-bottom: 1px solid var(--color-green);
}

.job-title {
    font-family:var(--font-body);
    color:var(--text-dark);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.job-ref {
    font-size: 0.85rem;
    white-space: nowrap; /* keeps "Ref: 8265" on one line */
}

/* Icons (swap emojis for SVGs later if you like) */
.job-icon {
    font-size: 1.1rem;
}

/* Divider between job rows */
.job-divider {
    border: 0;
    border-top: 1px solid #ded9cc;
    margin: 0;
}

/* Pagination arrows – rounded rectangle buttons */
.job-page-arrow {
    border-radius: 50%;
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.job-page-arrow-prev {
    transform: scaleX(-1);
}
/* Remove default pagination borders */
.job-page-arrow.page-link {
    border: none;
}

/* Page numbers */
.job-page-numbers {
    font-size: 0.9rem;
}

/* Mobile tweaks */
@media (max-width: 767.98px) {
    .job-view-btn {
        width: 100%; /* full width on mobile */
    }
}


/* --- HERO (job detail) --- */

.hero-job-banner {
    position: relative;
    min-height: 200px;
    padding: 2.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;

    background-image: url('/wp-content/uploads/2023/07/Blenheim-1.jpg'); /* swap in your image */
    background-size: cover;
    background-position: center;
}

.hero-job-banner__inner {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 2rem 2.5rem;
    width: 100%;
    max-width: 1200px;
}

.hero-job-banner__title {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.hero-job-banner__icon {
    font-size: 1.1rem;
}

/* --- JOB DETAIL BODY --- */

.job-detail-section {
    background-color: #faf8f3; /* match your site background */
}

.job-detail-section h2 {
    color:var(--color-dark);
    font-size:24px;
}

/* Right column callout */
.job-basket {
    background-color: #f2f1ea; /* subtle panel */
}

.job-basket__btn {
    background-color: #dde1c2;  /* placeholder button colour */
    border: none;
}

/* Divider between description block and responsibilities */
hr {
    border: 0;
    border-top: 1px solid var(--color-green);
    margin-top:1.5rem;
    margin-bottom:1.5rem;
}

/* Bullet list with custom icons instead of default bullets */
.job-detail-section ul,
.text-block ul {
  list-style: none;           /* remove default bullets */
  margin: 0;
  padding: 0;
  margin-bottom:1rem;
  text-align:left !important;
}

.job-detail-section ul li,
.text-block ul li {
  position: relative;
  padding-left: 1.8rem;       /* space for the icon */
  padding-bottom:1rem;
}

.job-detail-section ul li::before,
.text-block ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;                /* tweak vertically to align */
  width: 1rem;
  height: 1rem;
  background-image: url('/wp-content/themes/sue-ross-recruitment-2026/assets/images/BulletPoint_Icon.png'); /* 👈 your image */
  background-size: contain;
  background-repeat: no-repeat;
}

/* --- Responsive tweaks --- */

@media (max-width: 767.98px) {
    .hero-job-banner {
        padding: 2rem 0.75rem;
    }

    .hero-job-banner__inner {
        padding: 1.5rem 1.25rem;
    }

    .hero-job-banner__title {
        font-size: 1.1rem;
    }

    .job-basket {
        text-align: center;
    }
}

/* Contact page map section */
.contact-map-section {
    /* no special styles needed here; overlap is done on the wrapper */
}

.contact-map-wrapper {
    border-radius: 40px;
    overflow: hidden;               /* clip map to rounded corners */
    background-color: #ffffff;      /* optional background */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* subtle lift */
    max-width:600px;
    margin: -3rem auto 3rem auto;
}

/* Make the map responsive and fill the card */
.contact-map-embed {
    position: relative;
    width: 100%;
    padding-top: 45%;               /* aspect ratio (approx 16:9); adjust as needed */
}

.contact-map-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Tidy on smaller screens */
@media (max-width: 767.98px) {
    .contact-map-wrapper {
        margin-top: -2rem;          /* slightly less overlap on mobile */
        border-radius: 20px;
    }
}

/* Section background (match your design) */
.contact-form-section {
    background-color: #dde1d0; /* placeholder */
}

/* Pill-shaped text inputs */
.contact-form-control {
    border-radius: 999px;
    border: 1px solid #c0c6b6;
    background-color: #fafaf5;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-shadow: none;
}

/* Large rounded textarea */
.contact-form-textarea {
    border-radius: 24px;
    border: 1px solid #c0c6b6;
    background-color: #fafaf5;
    resize: vertical;
    padding: 1rem 1.25rem;
    box-shadow: none;
}

/* Button styling (pill) */
.contact-form-btn {
    background-color: #8f9474;   /* placeholder */
    color: #fff;
    border: none;
}

/* On mobile, textarea shouldn’t be too tall */
@media (max-width: 767.98px) {
    .contact-form-textarea {
        min-height: 180px;
    }
}

footer {
    background-color: var(--color-beige);
}