/*
Theme Name: Benchmark Talent Advisory
Theme URI: https://benchmarktalentadvisory.com.au
Author: Benchmark Business Group
Author URI: https://benchmarkbusinessadvisory.com.au
Description: Advisory-led people and leadership site for Benchmark Talent Advisory. Converted from the Benchmark Talent Advisory design system: Poppins typography, rounded card sections, and a green advisory palette. Includes a Recruitment / Leadership / HR service quiz, case studies, and insights.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: benchmark-talent-advisory
Tags: business, portfolio, one-column, two-columns, custom-logo, custom-colors, featured-images, threaded-comments, translation-ready
*/

/* -------------------------------------------------------------------------
 * The page markup carries its own inline styles (converted 1:1 from the
 * design). This stylesheet holds only the global base, the brand tokens, and
 * the responsive rules that the static design could not express.
 * Hover states live in assets/css/hover.css (generated).
 * ---------------------------------------------------------------------- */

:root {
  --bta-green:      #009473;
  --bta-green-dark: #007059;
  --bta-deep:       #005E4B;
  --bta-deepest:    #0A3B32;
  --bta-ink:        #101A17;
  --bta-body:       #55635E;
  --bta-muted:      #45534F;
  --bta-bg:         #EFF7F4;
  --bta-surface:    #FFFFFF;
  --bta-tint:       #F1F8F6;
  --bta-tint-2:     #D8EFE8;
  --bta-line:       #D3E4DF;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--bta-bg);
  color: var(--bta-ink);
  font-family: Poppins, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--bta-deep);
  text-decoration: none;
  transition: color 120ms ease, opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
a:hover { color: #004A3C; }
/* Pill buttons keep full opacity; everything else dims slightly on hover. */
a:not([style*="border-radius:999px"]):not([style*="border-radius: 999px"]):hover { opacity: 0.78; }

button, input, select, textarea {
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
button:hover { opacity: 0.92; }

::selection { background: #C9EDE2; color: var(--bta-ink); }

img { max-width: 100%; height: auto; }
svg { flex: none; }

:focus-visible {
  outline: 2px solid var(--bta-green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Screen-reader text ------------------------------------------------------ */
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; overflow: hidden;
  position: absolute !important; width: 1px; white-space: nowrap;
}
.screen-reader-text:focus {
  background: #fff; clip-path: none; color: var(--bta-deep); display: block;
  height: auto; left: 16px; padding: 14px 22px; top: 16px; width: auto;
  z-index: 100000; border-radius: 999px; box-shadow: 0 10px 30px rgba(6,34,28,.16);
}

/* Image slots ------------------------------------------------------------- */
.bta-slot { position: absolute; inset: 0; overflow: hidden; }
.bta-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bta-slot--rounded { border-radius: var(--bta-slot-radius, 14px); }
.bta-slot--circle  { border-radius: 999px; }
.bta-slot--empty {
  background: linear-gradient(135deg, #DCE9E5 0%, #C9DED8 100%);
  display: flex; align-items: center; justify-content: center;
  color: #6B7D78; font-size: 12px; text-align: center; padding: 16px;
}

/* Editor content inside articles ------------------------------------------ */
.bta-article h2 {
  font-size: 27px; font-weight: 500; line-height: 1.28; letter-spacing: -0.02em;
  margin: 44px 0 16px; color: var(--bta-ink); text-wrap: balance;
}
.bta-article h3 {
  font-size: 19px; font-weight: 500; line-height: 1.35;
  margin: 30px 0 12px; color: var(--bta-ink);
}
.bta-article p {
  font-size: 15px; line-height: 1.8; color: var(--bta-muted);
  margin: 0 0 20px; text-wrap: pretty;
}
.bta-article ul, .bta-article ol { margin: 0 0 22px; padding-left: 20px; }
.bta-article li { font-size: 15px; line-height: 1.8; color: var(--bta-muted); margin-bottom: 8px; }
.bta-article blockquote {
  margin: 30px 0; padding: 22px 26px; background: var(--bta-tint);
  border-left: 3px solid var(--bta-green); border-radius: 0 12px 12px 0;
}
.bta-article blockquote p { margin: 0; color: var(--bta-ink); font-size: 16px; }
.bta-article img { border-radius: 14px; margin: 10px 0 26px; }
.bta-article figcaption { font-size: 12px; color: var(--bta-body); margin-top: -18px; margin-bottom: 26px; }

/* Comments ---------------------------------------------------------------- */
.bta-comments { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--bta-line); }
.bta-comments ol { list-style: none; margin: 0; padding: 0; }
.bta-comments .comment-body { padding: 18px 0; border-bottom: 1px solid #E6EFEC; font-size: 14px; }
.bta-comments input[type="text"], .bta-comments input[type="email"],
.bta-comments input[type="url"], .bta-comments textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #A8D8CA; border-radius: 10px;
  font-family: inherit; font-size: 13px; background: #fff; color: var(--bta-ink);
}
.bta-comments .submit {
  padding: 12px 22px; border: none; border-radius: 999px;
  background: var(--bta-green); color: #fff; font-family: inherit;
  font-size: 13px; font-weight: 500; cursor: pointer;
}

/* Pagination -------------------------------------------------------------- */
.bta-pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 32px; }
.bta-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--bta-line); background: #fff;
  font-size: 13px; color: var(--bta-muted);
}
.bta-pagination .page-numbers.current,
.bta-pagination .page-numbers:hover { background: var(--bta-tint-2); color: var(--bta-deep); opacity: 1; }

/* --------------------------------------------------------------------------
 * Responsive. The design is authored at desktop width with fixed grid
 * templates in inline styles; these rules collapse them on smaller screens.
 * Inline styles need !important to be overridden.
 * ----------------------------------------------------------------------- */

@media (max-width: 1080px) {
  [style*="grid-template-columns:180px"] { grid-template-columns: 1fr !important; gap: 18px !important; }
  [style*="grid-template-columns:230px"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  aside[style*="position:sticky"] { position: static !important; }
}

@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:minmax(0,1.05fr)"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  [style*="grid-template-columns:1fr minmax(0,1fr)"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  [style*="grid-template-columns:1.05fr"] { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  section[style*="padding:76px 34px"] { padding: 48px 22px !important; }
  section[style*="padding:72px 34px"],
  section[style*="padding:64px 34px"],
  section[style*="padding:60px 34px"] { padding: 44px 22px !important; }
  h1[style] { font-size: clamp(32px, 7.5vw, 46px) !important; }
  h2[style] { font-size: clamp(26px, 5.5vw, 34px) !important; }
}

@media (max-width: 720px) {
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.05fr"] { grid-template-columns: 1fr !important; }
  /* The "problem we solve" collage: absolute cards stack into flow on mobile. */
  .bta-collage > [style*="position:absolute"]:not(.bta-slot) {
    position: static !important; max-width: none !important; margin-top: 12px !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  }
  .bta-collage { min-height: 0 !important; }
  .bta-collage > .bta-slot { opacity: .35; }
}

@media (max-width: 560px) {
  section[style], div[style*="padding:56px 34px"] { }
  [style*="padding:16px"][style*="overflow-x:hidden"] { padding: 8px !important; }
  nav[style*="gap:4px 26px"] { gap: 2px 14px !important; font-size: 12px !important; }
  [style*="grid-template-columns:1.05fr 0.85fr 0.85fr 1.75fr"] { grid-template-columns: 1fr !important; gap: 26px !important; }
}

@media (max-width: 1000px) {
  [style*="grid-template-columns:1.05fr 0.85fr 0.85fr 1.75fr"] { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}

/* Sticky header is disabled on touch/small screens - the design's fixed
   positioning assumes a wide viewport. */
@media (max-width: 720px) {
  [data-site-header] { position: relative !important; top: auto !important; left: auto !important; right: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}