/* =====================================================================
   Sweet James — Attorney Bio Components
   Scoped to hero + main content. No nav, footer, topbar, or sticky CTA.
   ===================================================================== */

:root {
   --sj-black: #0a0a0a;
   --sj-dark: #111111;
   --sj-navy: #0a1254;
   --sj-gold: #f9e800;
   --sj-gold-lt: #fff045;
   --sj-white: #ffffff;
   --sj-gray: #f5f5f5;
   --sj-gray-md: #999999;
   --sj-border: #e0e0e0;
   --sj-radius: 6px;
   --sj-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ── Typography within bio sections ── */
.bio-hero h1,
.sj-bio-section h2,
.sj-bio-section h3 {
   font-family: var(--sj-font);
}

.bio-hero h1 {
   font-size: clamp(1.8rem, 5vw, 2.6rem);
   font-weight: 800;
   letter-spacing: -.5px;
   line-height: 1.1;
   color: var(--sj-white);
}

.sj-bio-section h2 {
   font-size: clamp(1.3rem, 3.5vw, 1.9rem);
   font-weight: 700;
   margin-bottom: .75rem;
}

.sj-bio-section h3 {
   font-size: 1.1rem;
   font-weight: 700;
}

.sj-bio-section p {
   margin-bottom: 1rem;
   color: #333;
   line-height: 1.6;
}

/* Section wrapper used by every shortcode */
.sj-bio-section {
   margin-bottom: 28px !important;
   font-family: var(--sj-font);
}

.sj-bio-section:last-child {
   margin-bottom: 0;
}

/* Divider line above each section heading */
.sj-bio-section .divider,
.bio-hero .divider {
   width: 56px;
   height: 4px;
   background: var(--sj-navy);
   margin: 0 0 1.25rem;
   border-radius: 2px;
}

/* Buttons (used in hero CTAs) */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 14px 24px;
   border-radius: var(--sj-radius);
   font-weight: 800;
   font-size: .95rem;
   cursor: pointer;
   transition: all .2s;
   border: none;
   text-align: center;
   font-family: var(--sj-font);
   text-decoration: none;
}

.btn-primary {
   background: var(--sj-gold);
   color: var(--sj-black);
}

.btn-primary:hover {
   background: var(--sj-gold-lt);
   color: var(--sj-black);
}

.btn-outline {
   background: transparent;
   color: var(--sj-white) !important;
   border: 2px solid rgba(255, 255, 255, .3);
}

.btn-outline:hover {
   border-color: var(--sj-gold);
   color: var(--sj-gold);
}

/* =====================================================================
   HERO
   ===================================================================== */
.bio-hero {
   background: var(--sj-navy);
   color: var(--sj-white);
   padding: 0;
}

.bio-hero .container {
   max-width: 1140px;
   margin: 0 auto;
   padding: 0 20px;
   display: grid;
   grid-template-columns: 1fr;
   gap: 32px;
}

.bio-hero__img-wrap {
   position: relative;
   max-width: 340px;
   margin: 0 auto;
}

@media (max-width: 572px) {
   .bio-hero__img-wrap {
      max-width: 100%;
   }
}

.bio-hero__img {
   width: 100%;
   aspect-ratio: 1/1;
   object-fit: contain;
   object-position: bottom center;
   display: block;
}

.bio-hero__info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-bottom: 40px;
}

.bio-hero__label {
   font-size: .78rem;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--sj-gold);
   margin-bottom: 10px;
}

.bio-hero__title {
   font-size: 1rem;
   color: #aaa;
   margin: 6px 0 20px;
   font-weight: 400;
}

.bio-hero__meta {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 28px;
}

.bio-hero__meta-item {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: .92rem;
   color: #ccc;
}

.bio-hero__meta-item svg {
   flex-shrink: 0;
}

.bio-hero__meta-item strong {
   color: var(--sj-white);
}

.bio-hero__actions {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.single-attorney .elementor-location-single>section:first-child {
   background: var(--sj-navy);
}

/* =====================================================================
   ABOUT
   ===================================================================== */
.sj-bio-about__content p {
   margin-bottom: 1rem;
   color: #333;
}

.sj-bio-about__content a {
   color: var(--sj-navy);
   text-decoration: underline;
}

.sj-bio-about__content blockquote {
   margin: 28px 0;
   padding: 20px 24px;
   border-left: 4px solid var(--sj-navy);
   border-radius: var(--sj-radius);
}

.sj-bio-about__content blockquote p {
   font-style: italic;
   font-size: 1.05rem;
   color: #1a1a1a;
   margin-bottom: 8px;
}

.sj-bio-about__content blockquote footer {
   font-size: .85rem;
   color: #555;
   font-weight: 600;
}

.sj-bio-pullquote {
   margin: 28px 0;
   padding: 20px 24px;
   border-left: 4px solid var(--sj-navy);
   border-radius: var(--sj-radius);
   background: #fafafa;
}

.sj-bio-pullquote p {
   font-style: italic;
   font-size: 1.05rem;
   color: #1a1a1a;
   margin-bottom: 8px;
}

.sj-bio-pullquote footer {
   font-size: .85rem;
   color: #555;
   font-weight: 600;
}

/* =====================================================================
   RECENT RESULTS — wins-table
   ===================================================================== */
.wins-table {
   width: 100%;
   border-collapse: collapse;
   font-size: .88rem;
   font-family: var(--sj-font);
}

.wins-table thead tr {
   background: var(--sj-black);
   color: var(--sj-white);
}

.wins-table th {
   padding: 12px 14px;
   text-align: left;
   font-size: .75rem;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.wins-table td {
   padding: 12px 14px;
   border: 0;
   border-bottom: 1px solid var(--sj-border);
   vertical-align: top;
   background-color: var(--sj-white) !important;
}

.wins-table tbody tr:last-child td {
   border-bottom: none;
}

.wins-table tbody tr:hover td {
   background: #fff8eb;
}

.win-amount {
   font-weight: 800;
   color: var(--sj-black);
   font-size: .95rem;
}

.win-badge {
   background: var(--sj-gold);
   color: var(--sj-black);
   font-size: .68rem;
   font-weight: 700;
   padding: 2px 7px;
   border-radius: 3px;
   white-space: nowrap;
}

.wins-disclaimer {
   font-size: .75rem;
   color: var(--sj-gray-md);
   margin-top: 12px;
   font-style: italic;
}

/* =====================================================================
   PRACTICE AREAS
   ===================================================================== */
.practice-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
}

.practice-card {
   background: #f1f1f1;
   border: none;
   border-radius: var(--sj-radius);
   padding: 14px 16px;
   font-size: .88rem;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 12px;
   transition: all .2s;
   color: inherit;
   text-decoration: none;
   font-family: var(--sj-font);
}

.practice-card:hover {
   background: var(--sj-gold);
   color: var(--sj-black);
}

.practice-card:hover i,
.practice-card:hover svg {
   color: var(--sj-black);
}

.practice-card i {
   flex-shrink: 0;
   color: var(--sj-navy);
   font-size: 1.1rem;
   width: 24px;
   text-align: center;
}

.practice-card svg {
   flex-shrink: 0;
   color: var(--sj-navy);
   width: 22px;
   height: 22px;
   stroke-width: 1.6;
}

@media (min-width: 600px) {
   .practice-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

/* =====================================================================
   VIDEO PLAYER
   ===================================================================== */
.video-player {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.video-player__main {
   position: relative;
   width: 100%;
   padding-bottom: 56.25%;
   background: var(--sj-navy);
   border-radius: var(--sj-radius);
   overflow: hidden;
}

.video-player__main iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
}

.video-thumbs {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
}

.video-thumb {
   display: flex;
   flex-direction: column;
   gap: 8px;
   background: transparent;
   border: 2px solid transparent;
   border-radius: var(--sj-radius);
   padding: 6px;
   cursor: pointer;
   text-align: left;
   font-family: var(--sj-font);
   transition: border-color .2s, background .2s;
}

.video-thumb:hover {
   border-color: var(--sj-border);
   background: #fafafa;
}

.video-thumb.is-active {
   border-color: var(--sj-navy);
   background: #fff;
}

.video-thumb__img {
   position: relative;
   width: 100%;
   aspect-ratio: 16/9;
   background-size: cover;
   background-position: center;
   background-color: var(--sj-navy);
   border-radius: 4px;
   display: block;
   overflow: hidden;
}

.video-thumb__play {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .5);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
   transition: transform .2s, background .2s;
}

.video-thumb:hover .video-thumb__play {
   transform: translate(-50%, -50%) scale(1.08);
   background: rgba(255, 255, 255, .75);
}

.video-thumb__meta {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: 8px;
   padding: 0 2px;
}

.video-thumb__title {
   font-size: .82rem;
   font-weight: 700;
   color: var(--sj-black);
   line-height: 1.25;
}

.video-thumb__dur {
   font-size: .72rem;
   font-weight: 600;
   color: var(--sj-gray-md);
   white-space: nowrap;
}

@media (max-width: 560px) {
   .video-thumbs {
      grid-template-columns: 1fr;
   }
}

/* =====================================================================
   TESTIMONIALS CAROUSEL
   ===================================================================== */
.testimonial-carousel {
   position: relative;
}

.testimonial-track {
   position: relative;
   overflow: hidden;
}

.testimonial-card {
   background: #f1f1f1;
   border: none;
   border-left: 4px solid var(--sj-navy);
   border-radius: var(--sj-radius);
   padding: 28px 26px;
   display: none;
}

.testimonial-card.is-active {
   display: block;
   animation: sjFadeInTestimonial .35s ease;
}

@keyframes sjFadeInTestimonial {
   from {
      opacity: 0;
      transform: translateY(4px);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

.testimonial-text {
   font-size: 1.4rem;
   color: #333;
   font-style: italic;
   margin-bottom: 18px;
   line-height: 1.5;
}

.testimonial-author {
   font-size: .9rem;
   font-weight: 700;
   color: var(--sj-black);
}

.testimonial-case {
   font-size: .82rem;
   color: var(--sj-gray-md);
   margin-top: 2px;
}

.testimonial-disclaimer {
   font-size: .72rem;
   color: var(--sj-gray-md);
   margin-top: 2px;
   font-style: italic;
}

.testimonial-controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   margin-top: 20px;
}

.testimonial-arrow {
   background: #f1f1f1;
   border: none;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--sj-navy);
   cursor: pointer;
   transition: background .2s, color .2s;
}

.testimonial-arrow:hover {
   background: var(--sj-navy);
   color: #fff;
}

.testimonial-dots {
   display: flex;
   gap: 8px;
}

.testimonial-dots button {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   border: none;
   background: #d0d0d0;
   padding: 0;
   cursor: pointer;
   transition: background .2s, width .2s;
}

.testimonial-dots button[aria-selected="true"] {
   background: var(--sj-navy);
   width: 22px;
   border-radius: 4px;
}

/* =====================================================================
   MEDIA SPOTLIGHT
   ===================================================================== */
.media-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 20px;
}

@media (min-width: 640px) {
   .media-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

.media-card {
   display: flex;
   flex-direction: column;
   background: var(--sj-white);
   border: 1px solid var(--sj-border);
   border-radius: var(--sj-radius);
   overflow: hidden;
   transition: transform .2s, box-shadow .2s, border-color .2s;
   color: inherit;
   text-decoration: none;
}

.media-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
   border-color: var(--sj-navy);
   color: inherit;
}

.media-card__img {
   position: relative;
   width: 100%;
   aspect-ratio: 16/9;
   background-size: cover;
   background-position: center;
   display: flex;
   align-items: flex-end;
   padding: 14px;
}

.media-card__source {
   display: inline-block;
   background: rgba(255, 255, 255, .95);
   color: var(--sj-navy);
   font-size: .7rem;
   font-weight: 800;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   padding: 5px 10px;
   border-radius: 3px;
}

.media-card__body {
   padding: 18px 20px 20px;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.media-card__title {
   font-size: 1.05rem;
   font-weight: 800;
   color: var(--sj-black);
   line-height: 1.3;
   margin: 0;
}

.media-card__desc {
   font-size: .9rem;
   color: #444;
   line-height: 1.55;
   margin: 0;
}

.media-card__link {
   font-size: .82rem;
   font-weight: 700;
   color: var(--sj-navy);
   letter-spacing: .3px;
   margin-top: 4px;
}

.media-card:hover .media-card__link {
   color: var(--sj-black);
}

/* =====================================================================
   DESKTOP — hero column layout
   ===================================================================== */
@media (min-width: 900px) {
   .bio-hero .container {
      grid-template-columns: 380px 1fr;
      gap: 56px;
      align-items: end;
   }

   .bio-hero__img-wrap {
      max-width: none;
      margin: 0;
   }

   .bio-hero__actions {
      flex-direction: row;
      flex-wrap: wrap;
   }

   .btn {
      width: auto;
   }
}

/* =====================================================================
   ASIDE — GRAVITY FORMS SIDEBAR WIDGET
   ===================================================================== */

/* Fix the overflow:hidden on the Elementor template wrapper to enable the sticky sidebar */
.single-attorney .elementor.elementor-location-single {
   overflow: visible;
}

/* Apply sticky to the elementor-widget that wraps the aside, targeting it via :has() so it works regardless of the element ID */
.single-attorney .elementor-widget:has(> .bio-body__aside) {
   position: sticky !important;
   top: 200px;
   align-self: flex-start;
}

.single-attorney .bio-body__aside {
   background: var(--sj-navy);
   border-radius: var(--sj-radius);
   padding: 28px 24px;
   color: var(--sj-white);
   font-family: var(--sj-font);
}

/* "Available Now" badge */
.single-attorney .bio-body__aside::before {
   content: "● AVAILABLE NOW!";
   display: inline-block;
   background: rgba(46, 204, 113, .15);
   color: #6ee7a4;
   border: 1px solid rgba(46, 204, 113, .4);
   font-size: .72rem;
   font-weight: 700;
   letter-spacing: .4px;
   text-transform: uppercase;
   padding: 5px 14px;
   border-radius: 20px;
   margin-bottom: 16px;
}

/* Reset GF wrapper chrome */
.single-attorney .bio-body__aside .gform_wrapper.gravity-theme {
   background: transparent;
   border: none;
   padding: 0;
   margin: 0;
   box-shadow: none;
}

.single-attorney .bio-body__aside .gform_wrapper .gform-body,
.single-attorney .bio-body__aside .gform_wrapper .gform_body {
   padding: 0;
}

/* Custom heading elements */
.single-attorney .bio-body__aside .bio-body__aside__title {
   display: block;
   font-size: 1.3rem;
   font-weight: 800;
   color: var(--sj-white);
   line-height: 1.6;
   margin: 0 0 6px;
}

.single-attorney .bio-body__aside .bio-body__aside__description {
   color: #aaa;
   font-size: .85rem;
   margin: 0 0 20px;
}

/* Hide GF's built-in title/description */
.single-attorney .bio-body__aside .gform_wrapper .gform_heading {
   display: none;
}

/* All gfields stacked, no GF grid gaps */
.single-attorney .bio-body__aside .gform_wrapper .gform_fields {
   display: flex !important;
   flex-direction: column !important;
   gap: 14px !important;
   grid-template-columns: unset !important;
}

.single-attorney .bio-body__aside .gform_wrapper .gfield {
   margin: 0 !important;
   width: 100% !important;
}

/* Field labels */
.single-attorney .bio-body__aside .gform_wrapper .gfield_label,
.single-attorney .bio-body__aside .gform_wrapper legend.gfield_label {
   display: block;
   font-size: .78rem;
   font-weight: 700;
   line-height: 1.6;
   letter-spacing: .5px;
   text-transform: uppercase;
   color: #bbb;
   margin-bottom: 5px;
   padding: 0;
}

.single-attorney .bio-body__aside .gform_wrapper .gfield_required {
   display: none !important;
}

/* Inputs / select / textarea */
.single-attorney .bio-body__aside .gform_wrapper input[type="text"],
.single-attorney .bio-body__aside .gform_wrapper input[type="tel"],
.single-attorney .bio-body__aside .gform_wrapper input[type="email"],
.single-attorney .bio-body__aside .gform_wrapper select,
.single-attorney .bio-body__aside .gform_wrapper textarea {
   width: 100%;
   background: var(--sj-white);
   border: 1px solid transparent;
   border-radius: var(--sj-radius);
   padding: 12px 14px;
   font-size: .95rem;
   color: #1a1a1a;
   font-family: var(--sj-font);
   box-sizing: border-box;
   outline: none;
   transition: border-color .2s;
   -webkit-appearance: none;
   appearance: none;
}

.single-attorney .bio-body__aside .gform_wrapper input[type="text"]:focus,
.single-attorney .bio-body__aside .gform_wrapper input[type="tel"]:focus,
.single-attorney .bio-body__aside .gform_wrapper input[type="email"]:focus,
.single-attorney .bio-body__aside .gform_wrapper select:focus,
.single-attorney .bio-body__aside .gform_wrapper textarea:focus {
   border-color: var(--sj-gold);
   box-shadow: 0 0 0 2px rgba(249, 232, 0, .2);
}

.single-attorney .bio-body__aside .gform_wrapper input::placeholder,
.single-attorney .bio-body__aside .gform_wrapper textarea::placeholder {
   color: #9ca3af;
}

/* Select custom arrow */
.single-attorney .bio-body__aside .gform_wrapper .ginput_container_select {
   position: relative;
}

.single-attorney .bio-body__aside .gform_wrapper .ginput_container_select::after {
   content: "▾";
   position: absolute;
   right: 14px;
   top: 50%;
   transform: translateY(-50%);
   color: #555;
   pointer-events: none;
   font-size: 1rem;
   line-height: 1;
}

/* Name field — stack first/last, show sub-labels above inputs */
.single-attorney .bio-body__aside .gform_wrapper .ginput_container--name {
   display: flex !important;
   flex-direction: column !important;
   gap: 14px !important;
}

.single-attorney .bio-body__aside .gform_wrapper .ginput_container--name .gform-grid-col {
   display: flex;
   flex-direction: column-reverse;
   flex: 1 1 100%;
   padding-left: 0 !important;
   padding-right: 0 !important;
}

.single-attorney .bio-body__aside .gform_wrapper .gform-field-label--type-sub {
   position: static !important;
   width: auto !important;
   height: 0 !important;
   overflow: visible !important;
   clip: auto !important;
   white-space: normal !important;
   font-size: .68rem !important;
   font-weight: 700 !important;
   letter-spacing: 1.5px !important;
   text-transform: uppercase !important;
   color: rgba(255, 255, 255, .6) !important;
   display: block !important;
   margin: 0 0 !important;
   padding: 0 !important;
}

/* Textarea */
.single-attorney .bio-body__aside .gform_wrapper textarea {
   min-height: 108px;
   resize: vertical;
}

/* Consent checkbox */
.single-attorney .bio-body__aside .gform_wrapper .gfield--type-checkbox legend.gfield_label {
   display: none !important;
}

.single-attorney .bio-body__aside .gform_wrapper .gfield_checkbox .gchoice {
   display: flex;
   align-items: flex-start;
   gap: 10px;
}

.single-attorney .bio-body__aside .gform_wrapper .gfield_checkbox .gchoice input[type="checkbox"] {
   width: 16px;
   height: 16px;
   min-width: 16px;
   flex-shrink: 0;
   margin-top: 2px;
   cursor: pointer;
   accent-color: var(--sj-gold);
}

.single-attorney .bio-body__aside .gform_wrapper .gfield_checkbox .gchoice label,
.single-attorney .bio-body__aside .gform_wrapper .gfield_checkbox .gchoice label div {
   font-size: .72rem;
   color: rgba(255, 255, 255, .55) !important;
   line-height: 1.5;
   text-transform: none;
}

.single-attorney .bio-body__aside .consentLink {
   color: var(--sj-white);
   text-decoration: underline;
}

/* Submit button */
.single-attorney .bio-body__aside .gform_wrapper .gform_footer,
.single-attorney .bio-body__aside .gform_wrapper .gform-footer {
   padding: 0;
   margin-top: 8px;
}

.single-attorney .bio-body__aside .gform_wrapper .gform_button {
   width: 100%;
   background: var(--sj-gold);
   color: var(--sj-black);
   border: none;
   border-radius: var(--sj-radius);
   padding: 16px 24px;
   font-size: 1rem;
   font-weight: 800;
   font-family: var(--sj-font);
   letter-spacing: .3px;
   cursor: pointer;
   transition: background .2s;
   display: block;
   margin-top: 16px;
}

.single-attorney .bio-body__aside .gform_wrapper .gform_button:hover {
   background: var(--sj-gold-lt);
}