/* =========================================================================
   Professional Behavior Analysis — theme layer

   pba.css is the site's design, unchanged from the plugin. This file is
   what a theme needs on top of it: the reading column for posts and legal
   pages, post cards, pagination, search, 404, comments, Elementor pages —
   and a little polish. Same tokens, same rounded cream language; nothing
   here is a second design.
   ========================================================================= */

/* ---------- the sticky header clears WordPress's admin bar ---------- */

.admin-bar.pba-site .head{top:32px}
@media(max-width:782px){.admin-bar.pba-site .head{top:46px}}
@media(max-width:600px){.admin-bar.pba-site .head{top:0}}   /* the bar scrolls away here */

/* ---------- Elementor: full-width pages inside the theme frame ---------- */

.pba-site .site-main{display:block;min-height:40vh}
.pba-site .elementor-widget-pba-section,
.pba-site .elementor-widget-pba-page,
.pba-site .elementor-widget-pba-header,
.pba-site .elementor-widget-pba-footer{width:100%}
.pba-site .elementor-widget-pba-section>.elementor-widget-container,
.pba-site .elementor-widget-pba-page>.elementor-widget-container{margin:0;padding:0}
.pba-site .elementor-page-title{width:min(1240px,100% - 48px);margin-inline:auto}

/* ---------- the page band ---------- */

.pba-site .phead{position:relative;overflow:hidden;background:var(--cream)}
/* the soft colour fields of the home hero, carried onto every page band */
.pba-site .phead::before{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-240px;
  border-radius:50%;pointer-events:none;background:radial-gradient(circle,var(--sky) 0%,rgba(234,241,252,0) 70%)}
.pba-site .phead .wrap{position:relative;z-index:1}

/* ---------- the reading column ---------- */

.pba-site .pba-entry{padding-top:var(--s5)}
.pba-site .pba-prose{font-size:var(--t-base);line-height:1.78;color:var(--body)}
.pba-site .pba-prose>*+*{margin-top:1.15em}
.pba-site .pba-prose p{margin:0}
.pba-site .pba-prose h2{font-size:var(--t-xl);margin-top:1.8em}
.pba-site .pba-prose h3{font-size:var(--t-lg);margin-top:1.6em}
.pba-site .pba-prose h4{font:600 var(--t-md)/1.3 var(--sans);color:var(--ink);margin:1.4em 0 0}
.pba-site .pba-prose h2+*,.pba-site .pba-prose h3+*{margin-top:.6em}
.pba-site .pba-prose ul,.pba-site .pba-prose ol{padding-left:1.3em}
.pba-site .pba-prose li+li{margin-top:.4em}
.pba-site .pba-prose li::marker{color:var(--p-cta)}
.pba-site .pba-prose a{color:var(--blue);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px;transition:color .2s,text-decoration-color .2s}
.pba-site .pba-prose a:hover{text-decoration-thickness:2px}
.pba-site .pba-prose strong{color:var(--ink)}
.pba-site .pba-prose blockquote{margin-inline:0;padding:20px 26px;background:var(--mint);
  border-left:4px solid var(--p-green);border-radius:var(--r-md);color:var(--ink);font:500 var(--t-md)/1.6 var(--serif)}
.pba-site .pba-prose img,.pba-site .pba-prose figure img{border-radius:var(--r-md);height:auto}
.pba-site .pba-prose figure{margin-inline:0}
.pba-site .pba-prose figcaption{font-size:var(--t-sm);color:var(--mute);margin-top:8px}
.pba-site .pba-prose hr{border:0;height:1px;background:var(--line);margin:2em 0}
.pba-site .pba-prose table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.pba-site .pba-prose th,.pba-site .pba-prose td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.pba-site .pba-prose code{background:var(--panel);padding:2px 6px;border-radius:6px;font-size:.92em}
.pba-site .pba-prose .alignwide{width:min(1100px,100vw - 48px);margin-inline:calc(50% - min(550px,50vw - 24px))}
.pba-site .pba-prose .alignfull{width:100vw;margin-inline:calc(50% - 50vw);border-radius:0}

.pba-site .pba-feature{margin:0 auto var(--s4);max-width:1000px}
.pba-site .pba-feature img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-xl);
  box-shadow:0 18px 44px rgba(14,23,38,.10)}

.pba-site .pba-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--s4)}
.pba-site .pba-tags .chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;
  background:var(--sky);color:var(--blue);font:600 13px/1 var(--sans);text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease)}
.pba-site .pba-tags .chip:hover{background:var(--blue);color:#fff}

.pba-site .pba-postnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:var(--s4)}
.pba-site .pba-postnav a{display:block;height:100%;padding:18px 20px;background:#fff;border:1px solid #EFEAE0;
  border-radius:var(--r-lg);text-decoration:none;color:var(--ink);font:500 16px/1.35 var(--serif);
  box-shadow:0 6px 18px rgba(14,23,38,.05);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pba-site .pba-postnav a:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(14,23,38,.12)}
.pba-site .pba-postnav small{display:block;font:600 11px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.pba-site .pba-postnav span:last-child a{text-align:right}

/* ---------- post cards, pagination, search ---------- */

.pba-site .pba-cards{margin-bottom:var(--s4)}
.pba-site .svc-body .pba-card-date{font:600 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--p-cta-deep);margin:0;flex:0 0 auto}
.pba-site .pba-card .svc-body .btn{background:#fff;border-color:var(--rule);color:var(--ink);font-weight:600}
.pba-site .pba-card .svc-body .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}

.pba-site .pba-pages ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pba-site .pba-pages a,.pba-site .pba-pages span.page-numbers,.pba-site .pba-pages .post-page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:46px;padding:0 16px;
  border-radius:999px;background:#fff;border:1px solid #EFEAE0;color:var(--ink);text-decoration:none;font-weight:600;
  transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.pba-site .pba-pages a:hover{background:var(--mint);border-color:var(--mint);transform:translateY(-2px)}
.pba-site .pba-pages .current{background:var(--p-cta);border-color:var(--p-cta);color:#fff}

.pba-site .pba-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #EFEAE0;
  border-radius:999px;padding:6px 6px 6px 20px;box-shadow:0 8px 22px rgba(14,23,38,.06);max-width:620px;margin:0 auto var(--s5)}
.pba-site .pba-search .ico{color:var(--mute);width:20px;height:20px}
.pba-site .pba-search input{flex:1 1 auto;border:0;background:transparent;font:400 16px/1.4 var(--sans);
  color:var(--ink);padding:12px 4px;min-width:0}
.pba-site .pba-search input:focus{outline:none}
.pba-site .pba-search:focus-within{box-shadow:0 0 0 3px rgba(46,158,79,.28),0 8px 22px rgba(14,23,38,.06)}
.pba-site .pba-search .btn{min-height:46px;padding:12px 24px;background:var(--p-cta);border-color:var(--p-cta)}
.pba-site .pba-search .btn:hover{background:var(--p-cta-deep);border-color:var(--p-cta-deep)}

.pba-site .pba-empty{text-align:center;max-width:640px;margin:0 auto}
.pba-site .pba-empty .lede{margin:14px auto var(--s4)}
.pba-site .pba-empty .pba-search{margin-bottom:var(--s3)}

.pba-site .pba-404{text-align:center}
.pba-site .pba-404-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:var(--s5)}

.pba-site .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- comments ---------- */

.pba-site .pba-comments{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.pba-site .pba-comment-list{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:14px}
.pba-site .pba-comment-list .comment-body{background:#fff;border:1px solid #EFEAE0;border-radius:var(--r-lg);
  padding:18px 20px;box-shadow:0 6px 18px rgba(14,23,38,.05)}
.pba-site .pba-comment-list .children{list-style:none;margin:12px 0 0 24px;padding:0;display:grid;gap:12px}
.pba-site .comment-author{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink)}
.pba-site .comment-author img{border-radius:50%;display:inline-block}
.pba-site .comment-metadata{font-size:13px;color:var(--mute);margin:4px 0 10px}
.pba-site .comment-metadata a{color:inherit;text-decoration:none}
.pba-site .comment-respond{margin-top:var(--s3)}
.pba-site .comment-form p{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.pba-site .comment-form label{font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.pba-site .comment-form input:not([type=checkbox]):not([type=submit]),.pba-site .comment-form textarea{
  font:400 16px/1.55 var(--sans);color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 14px;width:100%}
.pba-site .comment-form input:focus,.pba-site .comment-form textarea:focus{outline:none;border-color:var(--blue)}
.pba-site .comment-form-cookies-consent{flex-direction:row!important;align-items:center}

/* ---------- fixes carried over from the plugin's stylesheet ---------- */

/* The sticky header carried a backdrop-filter. Besides costing scroll frames
   (pba-motion.css measured it), a backdrop-filter makes the header the
   containing block for fixed descendants — so on phones the menu drawer,
   which lives inside the header, was cut to the header's 84px height instead
   of filling the screen. A near-opaque background reads the same. */
.pba-site .head{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(252,251,249,.97)}

/* Between tablet and wide desktop the header's call to action wrapped onto
   two lines; it stays on one, losing its arrow where space is tight. */
.pba-site .head .btn-fill{white-space:nowrap}
@media(min-width:901px) and (max-width:1180px){
  .pba-site .head .btn-fill{padding-inline:20px}
  .pba-site .head .btn-fill .ico{display:none}
  .pba-site .brand-t b{font-size:15.5px}
}
/* Where the row is tightest the name keeps two lines and the town line goes;
   the utility bar above and the footer still give the address. */
@media(min-width:901px) and (max-width:1060px){
  .pba-site .brand-t span{display:none}
  .pba-site .brand-t b{max-width:11em}
}

/* The footer note is a .wrap, but its own margin:0 cancelled the centring,
   so the line sat flush against the left edge of the window. */
.pba-site .foot-note.wrap{margin-inline:auto}

/* ---------- polish ---------- */

/* Selection and the scrollbar in the practice's own colours. */
.pba-site ::selection{background:var(--p-lemon);color:var(--ink)}
html:has(body.pba-site){scrollbar-color:var(--blue) var(--panel)}

/* The mega menu's services arrive one after another rather than all at once. */
.pba-site .has-mega .mega-item{opacity:0;transform:translateY(8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),background .25s var(--ease)}
.pba-site .has-mega.is-open .mega-item{opacity:1;transform:none}
.pba-site .has-mega.is-open .mega-item:nth-child(2){transition-delay:.03s}
.pba-site .has-mega.is-open .mega-item:nth-child(3){transition-delay:.06s}
.pba-site .has-mega.is-open .mega-item:nth-child(4){transition-delay:.09s}
.pba-site .has-mega.is-open .mega-item:nth-child(5){transition-delay:.12s}
.pba-site .has-mega.is-open .mega-item:nth-child(6){transition-delay:.15s}
.pba-site .has-mega.is-open .mega-item:nth-child(n+7){transition-delay:.18s}
/* the mega menu's panel and items, rounded like the rest of the site */
.pba-site .mega-item{border-radius:var(--r-sm)}
.pba-site .mega-ico{border-radius:50%}
.pba-site .mega-side{border-radius:var(--r-lg)}
.pba-site .mega-side img{border-radius:var(--r-md)}
@media(max-width:900px){
  .pba-site .has-mega .mega-item{opacity:1;transform:none}
}

/* A focus ring that meets contrast on every ground: ink outline, lemon halo. */
.pba-site .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px rgba(252,227,138,.7)}

/* Form fields lift gently when focused. */
.pba-site .field input:focus,.pba-site .field textarea:focus{box-shadow:0 10px 24px -18px rgba(43,86,114,.6)}

/* ---------- back to top ---------- */

.pba-top{position:fixed;right:14px;bottom:14px;z-index:9995;width:46px;height:46px;border-radius:50%;
  border:0;display:grid;place-items:center;cursor:pointer;
  background:#2B5672;color:#fff;box-shadow:0 14px 30px -16px rgba(14,23,38,.7);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
  transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1),visibility .3s,background .25s}
.pba-top.is-on{opacity:1;visibility:visible;transform:none}
.pba-top:hover{background:#0E1726}
.pba-top:focus-visible{outline:3px solid #F0A800;outline-offset:3px}
.pba-top svg{width:20px;height:20px}
/* Right-hand corner; the accessibility bubble has the left. Without the bubble
   the "Reduce motion" pill takes this corner, so the button steps up above it. */
body:not(.pba-a11y) .pba-top{bottom:66px}

@media(max-width:700px){
  .pba-site .pba-postnav{grid-template-columns:1fr}
  .pba-site .pba-postnav span:last-child a{text-align:left}
  .pba-site .pba-search{flex-wrap:wrap;border-radius:var(--r-lg);padding:10px}
  .pba-site .pba-search .btn{flex:1 1 100%}
}

@media(prefers-reduced-motion:reduce){
  .pba-site .has-mega .mega-item{opacity:1;transform:none;transition:none}
  .pba-top{transition:none}
}

@media print{
  .pba-top{display:none!important}
}