/* Dr. Jacquie: component styles. Design tokens come from theme.json;
   this file styles bespoke sections keyed off .dj-* classNames. */

:root{
  --dj-ink:var(--wp--preset--color--contrast);
  --dj-body:var(--wp--preset--color--body);
  --dj-muted:var(--wp--preset--color--muted);
  --dj-accent:var(--wp--preset--color--accent);
  --dj-soft:var(--wp--preset--color--soft);
  --dj-line:var(--wp--preset--color--line);
  --dj-tint:var(--wp--preset--color--tint);
  --dj-serif:var(--wp--preset--font-family--serif);
  --dj-sans:var(--wp--preset--font-family--sans);
  --dj-shadow:0 14px 34px -18px rgba(35,54,72,.42);
}

/* self-hosted Montserrat (brand logo) */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('../fonts/montserrat.woff2') format('woff2')}

/* two-tone brand logo (header + footer) */
.dj-logo{display:inline-flex;flex-direction:column;line-height:1.08;gap:.34rem;text-decoration:none!important}
.dj-logo__name{font-family:'Montserrat',var(--dj-sans);font-weight:600;font-size:1.25rem;
  color:var(--dj-ink);letter-spacing:.005em;white-space:nowrap}
.dj-logo__name b{color:var(--dj-accent);font-weight:700}
.dj-logo__tag{font-family:'Montserrat',var(--dj-sans);font-weight:600;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dj-soft)}
.dj-footer .dj-logo__name{color:#fff}
.dj-footer .dj-logo__name b{color:var(--dj-soft)}
.dj-footer .dj-logo__tag{color:#8fb6dd}

body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{text-wrap:balance}
:where(a):focus-visible,:where(button):focus-visible,:where(input):focus-visible,
:where(textarea):focus-visible,:where(select):focus-visible{
  outline:2.5px solid var(--dj-accent);outline-offset:3px;border-radius:4px}

/* vertical rhythm for sections */
.dj-section{padding-block:clamp(3.4rem,6.4vw,4.75rem)}

/* keep specific headings on one line on desktop (wrap on small screens) */
.dj-nowrap{white-space:nowrap}
@media(max-width:640px){.dj-nowrap{white-space:normal}}

/* eyebrow label */
.dj-eyebrow{font-family:var(--dj-sans)!important;font-size:.8rem!important;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dj-accent)!important;font-weight:700;margin-bottom:.55rem}

/* lead paragraph */
.dj-lead{font-size:1.1875rem;color:var(--dj-body)}

/* thin accent rule */
.dj-rule{width:56px;height:3px;background:var(--dj-soft);border-radius:2px;border:0;margin:1.1rem auto 0 0!important}
.dj-rule.is-style-wide{max-width:56px}

/* full-width hairline divider (mockup: between Welcome and the Forensic section) */
.dj-divider{border:0;border-top:1px solid var(--dj-line);opacity:1;margin-block:0}

/* buttons: soft glow + subtle hover lift (matches mockup .btn-primary) */
.wp-block-button:not(.dj-btn-ghost) .wp-block-button__link{
  box-shadow:0 8px 20px -10px rgba(74,144,226,.7);
  transition:background .16s,transform .16s,box-shadow .16s}
.wp-block-button .wp-block-button__link:hover{transform:translateY(-1px)}
.dj-btn-ghost .wp-block-button__link{box-shadow:none!important}

/* ---- HERO ---- */
.dj-hero{min-height:clamp(460px,66vh,600px);color:#fff}
/* replicate the mockup's diagonal overlay (dark left where the text sits, clearing to the right over the scales) */
.dj-hero .wp-block-cover__background{
  background:linear-gradient(100deg,rgba(20,32,48,.82) 0%,rgba(30,52,80,.60) 46%,rgba(42,62,85,.30) 100%)!important;
  opacity:1!important}
.dj-hero .wp-block-cover__inner-container{max-width:1280px;margin-inline:auto;width:100%;padding-inline:24px}
.dj-hero h1,.dj-hero p{color:#fff}
.dj-hero h1{max-width:22ch;letter-spacing:-.01em}
.dj-hero .dj-eyebrow{color:#bcd6f2!important}
.dj-hero .dj-hero-sub{font-family:var(--dj-serif);font-style:italic;font-size:clamp(1.125rem,2.2vw,1.4rem);
  color:#e4eefb;max-width:40ch;margin-top:.35rem;line-height:1.4}
/* ghost button (second hero CTA) */
.dj-btn-ghost .wp-block-button__link{background:transparent!important;color:#fff!important;
  border:1.5px solid rgba(255,255,255,.7)!important}
.dj-btn-ghost .wp-block-button__link:hover{background:rgba(255,255,255,.14)!important}

/* ---- WELCOME PORTRAIT ---- */
.dj-portrait img{border-radius:14px;box-shadow:var(--dj-shadow);border:1px solid var(--dj-line)}
.dj-portrait figcaption{font-size:.8125rem;color:var(--dj-muted);text-align:center;font-style:italic;margin-top:.7rem}
/* soft tint panel behind the headshot: fills the column height so the section never reads thin */
.dj-photo-frame{background:var(--dj-tint);border:1px solid var(--dj-line);border-radius:16px;
  padding:.7rem!important;width:-moz-fit-content;width:fit-content;max-width:100%;margin-inline:auto}
.dj-photo-frame .wp-block-image{margin:0}
.dj-photo-frame .dj-portrait{max-width:380px;width:100%;margin-inline:auto}
.dj-photo-frame .dj-portrait img{width:100%}
@media(max-width:781px){.dj-photo-col{padding:1.25rem!important}}

/* ---- PILLS ---- */
.dj-pills{gap:.6rem!important}
.dj-pill{background:var(--dj-tint);color:var(--dj-ink)!important;border:1px solid var(--dj-line);
  border-radius:22px;padding:.5rem 1rem!important;font-size:.9rem;font-weight:600;margin:0!important;line-height:1.2}

/* ---- CHECK LIST ---- */
ul.dj-checks{list-style:none!important;padding-left:0!important;margin:0;display:grid;gap:.7rem}
ul.dj-checks li{position:relative;padding-left:30px;color:var(--dj-body);list-style:none}
ul.dj-checks li::marker{content:""}
ul.dj-checks li::before{content:"";position:absolute;left:0;top:.5em;width:16px;height:16px;border-radius:50%;
  background:var(--dj-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat}

/* ---- PROCESS STEPS ---- */
.dj-steps{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-flow:column;grid-template-rows:repeat(3,auto);
  gap:2.2rem 3rem;margin-top:2rem;margin-bottom:.75rem}
.dj-step{display:flex;gap:1.1rem;align-items:flex-start;position:relative}
/* connecting timeline line down each column (hidden on the last step of a column) */
.dj-step::before{content:"";position:absolute;left:20px;top:46px;bottom:-2.2rem;width:2px;
  background:linear-gradient(var(--dj-soft),var(--dj-line));z-index:0}
.dj-step:nth-child(3n)::before{display:none}
.dj-step .dj-num{flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:linear-gradient(145deg,#4f97e6,#2d6ec0);color:#fff;
  display:grid;place-items:center;font-family:var(--dj-serif);font-size:1.125rem;font-weight:600;margin:0;
  position:relative;z-index:1;box-shadow:0 0 0 6px var(--wp--preset--color--wash),0 6px 14px -6px rgba(45,110,192,.55)}
.dj-step h4{font-size:1.0625rem;margin:0 0 .1rem}
.dj-step p{font-size:.9375rem;color:var(--dj-muted);margin:0}

/* ---- CARDS ---- */
.dj-grid{display:grid;gap:1.4rem}
.dj-grid-2{grid-template-columns:repeat(2,1fr)}
.dj-grid-3{grid-template-columns:repeat(3,1fr)}
.dj-card{background:#fff;border:1px solid var(--dj-line);border-radius:14px;padding:1.75rem!important;
  box-shadow:var(--dj-shadow)}
.dj-card h3{margin-bottom:.55rem}
.dj-card p{color:var(--dj-body);font-size:.97rem}
.dj-card .dj-tag{font-family:var(--dj-sans)!important;font-size:.72rem!important;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dj-soft)!important;font-weight:700;margin-bottom:.4rem}
.dj-span-2{grid-column:1 / -1}
@media(max-width:781px){.dj-grid-2,.dj-grid-3{grid-template-columns:1fr}}

/* card hover lift */
.dj-card{transition:transform .18s ease, box-shadow .18s ease}
.dj-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px -22px rgba(42,62,85,.5)}

/* icon badge (line icons in a soft-tint tile) */
.dj-ibadge{width:56px;height:56px;border-radius:14px;background:var(--dj-tint);border:1px solid var(--dj-line);
  display:flex;align-items:center;justify-content:center;color:var(--dj-accent);
  margin-left:0!important;margin-right:auto!important;margin-bottom:1.05rem}
.dj-ibadge svg{width:30px;height:30px}

/* scroll-reveal (only active once JS adds .dj-anim; respects reduced-motion) */
.dj-anim .dj-reveal{opacity:0;transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1)}
.dj-anim .dj-reveal.is-in{opacity:1;transform:none}
.dj-anim .dj-grid .dj-reveal.is-in,.dj-anim .dj-steps .dj-reveal.is-in{transition-delay:var(--dj-d,0ms)}
@media (prefers-reduced-motion:reduce){.dj-anim .dj-reveal{opacity:1!important;transform:none!important;transition:none}}

/* two-column content split (label left / body right) */
.dj-split .wp-block-column{min-width:0}
ul.dj-checks-2{display:block;column-count:2;column-gap:2rem}
ul.dj-checks-2 li{break-inside:avoid;margin:0 0 .8rem}
@media(max-width:781px){ul.dj-checks-2{column-count:1}}

/* ---- CALLOUT ---- */
.dj-callout{background:var(--dj-tint);border:1px solid var(--dj-line);border-left:4px solid var(--dj-soft);
  border-radius:12px;padding:1.7rem 1.9rem!important}

/* ---- QUOTE ---- */
.dj-quote{text-align:center}
.dj-quote::before{content:"";display:block;width:70px;height:1px;background:var(--dj-line);margin:0 auto 1.6rem}
.dj-quote p{font-family:var(--dj-serif);font-style:italic;font-size:clamp(1.375rem,3vw,1.875rem);color:var(--dj-ink)}

/* closing statement (home): bold deep-slate band that flows into the footer */
.dj-statement{text-align:center;background:linear-gradient(150deg,#274158 0%,#1d2b3c 100%);
  padding-block:clamp(4rem,6.5vw,5.5rem)!important}
.dj-statement__inner{max-width:820px;margin-inline:auto}
.dj-statement__rule{display:block;width:54px;height:3px;background:var(--dj-accent);border-radius:2px;margin:0 auto 1.6rem;
  box-shadow:0 0 18px -2px rgba(63,134,221,.7)}
.dj-statement__text{font-family:var(--dj-serif);font-size:clamp(1.65rem,3.8vw,2.7rem);line-height:1.24;
  letter-spacing:-.01em;color:#fff;margin:0;text-wrap:balance}
.dj-statement__accent{color:#7fb2f0}
.dj-br{display:none}
@media(min-width:640px){.dj-br{display:inline}}

/* ---- HEADER / NAV ---- */
.dj-header{border-bottom:1px solid var(--dj-line);background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:50}
.dj-header .wp-block-navigation{font-family:var(--dj-sans);font-size:.9rem}
.dj-header .wp-block-navigation .wp-block-navigation-item__content{
  color:var(--dj-body);padding:9px 14px;border-radius:8px;transition:background .15s,color .15s}
.dj-header .wp-block-navigation a:hover,
.dj-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.dj-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content{
  background:var(--dj-tint);color:var(--dj-ink)}
.dj-brand-sub{font-size:.66rem!important;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dj-soft)!important;margin:0}

/* ---- FOOTER ---- */
.dj-footer{background:var(--dj-ink);color:#cddcec}
.dj-footer :where(h1,h2,h3,h4,.wp-block-site-title,.wp-block-site-title a){color:#fff}
.dj-footer p,.dj-footer li,.dj-footer a{color:#cddcec}
.dj-footer a:hover{color:#fff}
.dj-foot-brand{color:#fff!important;margin:0}
.dj-footer-menu{list-style:none!important;padding-left:0!important;margin:0}
.dj-footer-menu li{margin:0}
.dj-footer .dj-eyebrow{color:#8fb6dd!important}
.dj-foot-legal{font-size:.78rem;color:#8ba3bd;border-top:1px solid rgba(255,255,255,.12);padding-top:1.3rem}

/* ---- CONTACT FORM (CF7 wrapper) ---- */
.dj-form .wpcf7-form input,.dj-form .wpcf7-form select,.dj-form .wpcf7-form textarea{
  width:100%;font-family:var(--dj-sans);font-size:.97rem;color:var(--dj-ink);background:#fff;
  border:1px solid var(--dj-line);border-radius:10px;padding:.72rem .85rem;margin-top:.3rem}
.dj-form .wpcf7-form label{font-size:.85rem;font-weight:600;color:var(--dj-ink);display:block}
.dj-form .wpcf7-submit{width:auto;background:var(--dj-accent);color:#fff;border:0;border-radius:30px;
  padding:.8rem 1.7rem;font-weight:600;cursor:pointer}
.dj-form .wpcf7-submit:hover{background:var(--wp--preset--color--accent-hover)}

@media (max-width:781px){
  .dj-steps{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}
  .dj-step:nth-child(3n)::before{display:block}
  .dj-step:last-child::before{display:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* ---- FOOTER CONTACT BLOCK ---- */
.dj-footer-contact{list-style:none;padding-left:0;margin:0;font-size:.9rem;line-height:1.55}
.dj-footer-contact li{margin:0 0 .55rem}
.dj-footer-contact li:last-child{margin-bottom:0}
.dj-fc__label{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#8fb6dd}
.dj-footer-contact a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}
.dj-footer-contact a:hover{border-bottom-color:#fff}

/* ---- WHERE I'M LOCATED (contact page) ---- */
.dj-map{border-radius:14px;overflow:hidden;border:1px solid var(--dj-line);box-shadow:0 10px 30px rgba(15,40,70,.08);line-height:0}
.dj-map iframe{display:block;width:100%;height:420px;border:0}
.dj-locate-list{list-style:none;padding-left:0;margin:0}
.dj-locate-list li{margin:0 0 1.15rem;padding-bottom:1.15rem;border-bottom:1px solid var(--dj-line)}
.dj-locate-list li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.dj-locate-list .dj-fc__label{color:var(--dj-accent);margin-bottom:.2rem}
.dj-locate-list a{color:var(--dj-ink)}
@media(max-width:781px){.dj-map iframe{height:300px}}