/* =========================================================
   TRIVENI LAW — Practice Area (single-practice_area.php)
   Front-end styles, aligned with the site theme.

   NOTE: no :root block here on purpose — the theme already
   defines --navy / --gold / --line etc. globally. Every var()
   below carries a hard-coded fallback so this file still
   renders correctly if it ever loads on its own.

   Layout rules used site-wide:
     content width  : 1200px
     desktop padding: 100px (top/bottom)  40px (left/right)
     tablet + mobile: 60px  (top/bottom)  20px (left/right)
   ========================================================= */

/* ---------- Scope tokens (aliases only, no global :root) ---------- */
.pa-practice{
  --pa-navy:      var(--navy, #1F2839);
  --pa-navy-2:    var(--navy-2, #2C384E);
  --pa-gold:      var(--gold, #B69D74);
  --pa-gold-h:    var(--gold-h, #C6AE87);
  --pa-text:      var(--text, #3A4150);
  --pa-muted:     var(--muted, #6E7583);
  --pa-bone:      var(--bone, #F5F5EF);
  --pa-white:     var(--white, #FFFFFF);
  --pa-line:      var(--line, #D1D6E0);

  --pa-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --pa-sans:  "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pa-sec-y: 100px;
  --pa-gut:   40px;

  font-family: var(--pa-sans);
  color: var(--pa-text);
  -webkit-font-smoothing: antialiased;

  /* ---- Full-bleed breakout ----
     The theme wraps page content in a fixed-width container, which was
     capping every section's background at that width instead of the
     full viewport (visible as cream page-background showing through on
     both sides of the hero, the pathways panel, and the process/expect
     bands). This escapes that wrapper regardless of how wide it is, so
     background colors below run truly edge-to-edge. .pa-container
     inside each section still centers the actual content at 1200px, so
     text alignment stays consistent across every section. */
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: hidden;
}
.pa-practice *{ box-sizing:border-box; }
.pa-practice img{ max-width:100%; display:block; }
.pa-practice p{ line-height:1.72; }
.pa-practice a{ transition:color .22s ease, border-color .22s ease, background .22s ease; }

/* ---------- Layout ---------- */
.pa-container{
  width:100%;
  max-width:calc(1200px + (var(--pa-gut) * 2));
  margin:0 auto;
  padding-left:var(--pa-gut);
  padding-right:var(--pa-gut);
}
.pa-practice > section{ padding:var(--pa-sec-y) 0; }

/* ---------- Type ---------- */
.pa-eyebrow{
  font-family:var(--pa-sans);
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--pa-gold); margin:0 0 18px; display:flex; align-items:center; gap:10px;
}
.pa-eyebrow::before{ content:""; width:26px; height:1px; background:var(--pa-gold); display:inline-block; flex:none; }
.pa-eyebrow--center{ justify-content:center; }

.pa-h1{
  font-family:var(--pa-serif); font-weight:400; letter-spacing:-.01em;
  font-size:clamp(2.4rem,4.6vw,3.6rem); line-height:1.1 !important; margin:0 0 22px; color:var(--pa-navy);
}
.pa-h2{
  font-family:var(--pa-serif); font-weight:400; letter-spacing:-.01em;
  font-size:clamp(1.9rem,3.1vw,2.7rem); line-height:1.18; margin:0; color:var(--pa-navy);
}
.pa-h2--center{ text-align:center; max-width:720px; margin:0 auto 56px; }
.pa-h2--onDark{ color:var(--pa-white); }

/* ---------- Buttons ----------
   Uses the site's Elementor global-kit variables directly (not the
   local --pa- aliases), so these always track whatever Site Settings >
   Global Colors currently has for Primary / Secondary / the custom
   "a2c5912" swatch. Edit the color there, not here. !important is used
   throughout because Elementor's own button/theme CSS otherwise wins
   the specificity fight against these classes. */
.pa-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important;
  padding:18px 34px !important;
  font-family:"Inter", Sans-serif !important;
  font-weight:600 !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  border-radius:2px 2px 2px 2px !important;
  text-decoration:none !important;
  cursor:pointer !important;
  transition:.25s ease !important;
}
.secondary-btn{
        background-color: var(--e-global-color-a2c5912);
    font-family: "Inter", Sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    fill: var(--e-global-color-primary);
    color: var(--e-global-color-primary);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--e-global-color-primary);
    border-radius: 2px 2px 2px 2px;
    padding: 16px 30px;
}
.pa-btn--primary{
  background-color: var(--e-global-color-primary) !important;
  fill: var(--e-global-color-a2c5912) !important;
  color: var(--e-global-color-a2c5912) !important;
  border: none !important;
}
.pa-btn--primary:hover{
  background-color: var(--e-global-color-secondary) !important;
  box-shadow: 0px 0px 10px 1px rgba(30.999999999999996, 40.000000000000014, 57, 0.1) !important;
}
.pa-btn--secondary,
.pa-btn--gold{
  background-color: var(--e-global-color-a2c5912) !important;
  fill: var(--e-global-color-primary) !important;
  color: var(--e-global-color-primary) !important;
  border-style: solid !important;
  border-width: 1px 1px 1px 1px !important;
  border-color: var(--e-global-color-primary) !important;
}
.pa-btn--secondary:hover,
.pa-btn--gold:hover{
  background-color: var(--e-global-color-primary) !important;
  color: var(--e-global-color-a2c5912) !important;
}
.pa-btn--text{
  padding:6px 0 !important; color:var(--pa-navy); background:none !important; border:0 !important;
  border-bottom:1px solid var(--pa-line); border-radius:0 !important; letter-spacing:.1em !important;
  text-transform:none !important; font-weight:600 !important;
}
.pa-btn--text:hover{ color:var(--pa-gold); border-color:var(--pa-gold); }

/* ---------- Hero ---------- */
section.pa-hero{
  padding:40px 0 !important;
  padding-bottom:0 !important;
  background:transparent !important; /* let the page's own background show through instead of a boxed white panel */
}
.pa-hero__grid{
  display:grid; grid-template-columns:1.02fr .98fr; gap:64px; align-items:center;
  padding-bottom:var(--pa-sec-y);
}
.pa-hero__intro{ color:var(--pa-muted); font-size:1.02rem; max-width:500px; margin:0 0 34px; }
.pa-hero__intro p{ margin:0 0 12px; }
.pa-hero__actions{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.pa-hero__media{ position:relative; }
.pa-hero__media img,
.pa-hero__media video{
  position:relative; z-index:1; width:100%; height:630px; object-fit:cover; border-radius:2px;
}
.pa-hero__bullets{
  background:var(--pa-white); border-top:1px solid var(--pa-line); border-bottom:1px solid var(--pa-line);
}
.pa-hero__bullets ul{
  list-style:none; margin:0; padding:22px 0; display:flex; justify-content:center;
  gap:18px 44px; flex-wrap:wrap;
}
.pa-hero__bullets li{
  font-size:.86rem; letter-spacing:.02em; color:var(--pa-muted); position:relative; padding-left:18px;
}
.pa-hero__bullets li::before{
  content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--pa-gold);
}

/* ---------- Strategy Intro ---------- */
.pa-strategy{ background:var(--pa-bone); }
.pa-strategy__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;
}
.pa-strategy__grid > div:first-child{ border-left:2px solid var(--pa-gold); padding-left:36px; }
.pa-strategy__body p{ color:var(--pa-muted); font-size:1.02rem; margin:0 0 14px; }
.pa-strategy__body p:last-child{ margin-bottom:0; }

/* ---------- Pathways ---------- */
.pa-pathways{ background:var(--pa-white); }
.pa-pathways__intro{ color:var(--pa-muted); font-size:1rem; line-height:1.7; max-width:660px; margin:0 0 52px; }
.pa-pathways__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; margin-top:30px;}
.pa-pathways__list{ list-style:none; margin:0; padding:0; }
.pa-pathways__item{
  padding:16px 0 16px 22px; font-size:1rem; font-weight:500; color:var(--pa-muted);
  border-left:2px solid var(--pa-line); cursor:pointer; transition:.22s ease;
}
.pa-pathways__item:hover{ color:var(--pa-navy); border-left-color:var(--pa-gold-h); }
.pa-pathways__item.is-active{
  color:var(--pa-navy); font-weight:600; border-left-color:var(--pa-gold); background:var(--pa-bone);
}
.pa-pathways__panel{ position:relative; }
.pa-pathways__image{ width:100%; height:420px; object-fit:cover; border-radius:2px; }
.pa-pathways__caption{
  background:var(--pa-white); border:1px solid var(--pa-line); border-radius:2px;
  padding:24px 28px;margin-top: 30px; position:relative;
  display:flex; flex-direction:column; gap:6px;
  box-shadow:0 18px 40px rgba(31,40,57,.10);
}
.pa-pathways__caption-title{
  font-family:var(--pa-serif); font-weight:500; color:var(--pa-navy); font-size:1.35rem; line-height:1.2;
}
.pa-pathways__caption-desc{ color:var(--pa-muted); font-size:.92rem; line-height:1.6; }
.pa-pathways__caption-services{
  list-style:none; margin:12px 0 0; padding:14px 0 0; border-top:1px solid var(--pa-line);
  display:grid; grid-template-columns:1fr 1fr; gap:8px 22px;
}
.pa-pathways__caption-services li{
  font-size:.85rem; color:var(--pa-muted); position:relative; padding-left:16px;
}
.pa-pathways__caption-services li::before{
  content:""; position:absolute; left:0; top:.5em; width:5px; height:5px; border-radius:50%; background:var(--pa-gold);
}
.pa-pathways__caption-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px; width:fit-content;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pa-navy); text-decoration:none; border-bottom:1px solid var(--pa-line); padding-bottom:4px;
}
.pa-pathways__caption-link:hover{ color:var(--pa-gold); border-color:var(--pa-gold); }

/* ---------- Attorney ---------- */
.pa-attorney{ background:var(--pa-bone); }
.pa-attorney__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:center; }
.pa-attorney__media{ position:relative; }
.pa-attorney__media img{ position:relative; z-index:1; width:100%; object-fit:cover; border-radius:2px; }
.pa-attorney__body p{ color:var(--pa-muted); font-size:1.02rem; margin:0 0 16px; }
.pa-attorney__tag{
  display:inline-flex; align-items:center; gap:12px; color:var(--pa-navy);
  font-weight:600; font-size:.95rem; margin:8px 0 0;
}
.pa-attorney__tag svg{ width:20px; height:20px; color:var(--pa-gold); flex:none; }
.pa-attorney__cta{ margin-top:30px; }

/* ---------- Life Stage Steps ---------- */
.pa-stages{ background:var(--pa-white); }
.pa-stages__row{ display:grid; grid-template-columns:repeat(5,1fr); gap:28px; position:relative; }
.pa-stages__row::before{
  content:""; position:absolute; top:28px; left:10%; right:10%; height:1px; background:var(--pa-line); z-index:0;
}
.pa-stages__item{ text-align:center; position:relative; z-index:1; }
.pa-stages__icon{
  width:56px; height:56px; border-radius:50%; background:var(--pa-white); border:1px solid var(--pa-gold);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px; color:var(--pa-gold);
  transition:.25s ease;
}
.pa-stages__item:hover .pa-stages__icon{ background:var(--pa-gold); color:var(--pa-navy); }
.pa-stages__icon svg{ width:22px; height:22px; }
.pa-stages__item h3{
  font-family:var(--pa-serif); font-weight:500; font-size:1.25rem; margin:0 0 10px; color:var(--pa-navy);
}
.pa-stages__item p{ font-size:.88rem; color:var(--pa-muted); margin:0; line-height:1.6; }

/* ---------- Insights ---------- */
.pa-insights{ background:var(--pa-bone); }
.pa-insights__head{ text-align:center; max-width:720px; margin:0 auto 56px; }
.pa-insights__head .pa-eyebrow{ justify-content:center; }
.pa-insights__head .pa-h2{ margin:0; }
.pa-insights__track{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.pa-insights__card{
  display:flex; flex-direction:column; background:var(--pa-white); border:1px solid var(--pa-line);
  border-radius:2px; padding:34px 32px; text-decoration:none; color:inherit;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pa-insights__card:hover{
  border-color:var(--pa-gold); transform:translateY(-4px); box-shadow:0 18px 40px rgba(31,40,57,.09);
}
.pa-insights__card h3{
  font-family:var(--pa-serif); font-weight:500; font-size:1.35rem; line-height:1.28;
  color:var(--pa-navy); margin:0 0 14px;
}
.pa-insights__card p{ font-size:.94rem; color:var(--pa-muted); margin:0 0 22px; }
.pa-insights__more{
  margin-top:auto; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pa-gold);
}
.pa-insights__dots{ display:flex; justify-content:center; gap:10px; margin-top:38px; }
.pa-insights__dots button,
.pa-insights__dots span{
  width:8px; height:8px; padding:0; border:0; border-radius:50%; background:var(--pa-line);
  cursor:pointer; transition:.22s ease;
}
.pa-insights__dots .is-active{ background:var(--pa-gold); width:22px; border-radius:4px; }

/* ---------- Process Steps ---------- */
.pa-process{ background:var(--pa-white); border-top:1px solid var(--pa-line); border-bottom:1px solid var(--pa-line); }
.pa-process__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.pa-process__item{ padding:0 34px; border-left:1px solid var(--pa-line); }
.pa-process__item:first-child{ padding-left:0; border-left:0; }
.pa-process__item:last-child{ padding-right:0; }
.pa-process__num{
  display:block; font-family:var(--pa-serif); font-size:2.1rem; line-height:1; color:var(--pa-gold); margin-bottom:14px;
}
.pa-process__item h3{
  font-family:var(--pa-serif); font-weight:500; font-size:1.3rem; color:var(--pa-navy); margin:0 0 10px;
}
.pa-process__item p{ font-size:.9rem; color:var(--pa-muted); margin:0; }

/* ---------- What You Can Expect ---------- */
.pa-expect{ background:var(--pa-navy); }
.pa-expect__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.pa-expect__intro .pa-h2{ margin-bottom:20px; }
.pa-expect__intro p{ color:rgba(245,245,239,.72); font-size:1.02rem; line-height:1.7; margin:0; max-width:460px; }
.pa-expect__items{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.pa-expect__item{
  display:flex; align-items:flex-start; gap:14px; color:var(--pa-white); font-size:.96rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:2px; padding:20px 22px;
  transition:.25s ease;
}
.pa-expect__item:hover{ background:rgba(182,157,116,.14); border-color:var(--pa-gold); }
.pa-expect__icon{ width:24px; height:24px; color:var(--pa-gold); flex:none; margin-top:2px; }
.pa-expect__icon svg{ width:100%; height:100%; }
.pa-expect__text{ display:flex; flex-direction:column; gap:6px; }
.pa-expect__label{ font-weight:600; letter-spacing:.01em; }
.pa-expect__desc{ font-weight:400; font-size:.85rem; color:rgba(245,245,239,.66); line-height:1.6; }

/* ---------- FAQ ---------- */
.pa-faq{ background:var(--pa-bone); }
.pa-faq__narrow{ max-width:calc(880px + (var(--pa-gut) * 2)); }
.pa-faq__list{ border-top:1px solid var(--pa-line); }
.pa-faq__item{ border:1px solid var(--pa-line); margin-bottom:16px;}
.pa-faq__question{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px;
  background:none; border:none; text-align:left; padding:24px 4px;
  font-family:var(--pa-sans); font-size:1.02rem; font-weight:600; color:var(--pa-navy); cursor:pointer;
  transition:color .22s ease;
}
.pa-faq__question:hover{ color:var(--pa-gold); }
.pa-faq__toggle{ font-size:1.4rem; line-height:1; color:var(--pa-gold); transition:transform .25s ease; flex:none; }
.pa-faq__item.is-open .pa-faq__question{ color:var(--pa-gold); }
.pa-faq__item.is-open .pa-faq__toggle{ transform:rotate(45deg); }
.pa-faq__answer{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
.pa-faq__answer p{ margin:10px 19px 22px; color:var(--pa-muted); font-size:.96rem; }

/* ---------- Rating + Testimonial ---------- */
.pa-rating{ background:var(--pa-white); }
.pa-rating__heading{ margin-bottom:56px; }
.pa-rating__grid{ display:grid; grid-template-columns:.65fr 1.35fr; gap:56px; align-items:center; }
.pa-rating__score{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  border-left:2px solid var(--pa-gold); padding-left:28px;
}
.pa-rating__value{ font-family:var(--pa-serif); font-size:3.6rem; line-height:1; color:var(--pa-navy); }
.pa-rating__stars{ color:var(--pa-gold); font-size:1.15rem; letter-spacing:.12em; }
.pa-rating__label{ font-weight:600; font-size:.95rem; color:var(--pa-navy); }
.pa-rating__basis{ font-size:.85rem; color:var(--pa-muted); }
.pa-rating__link{
  display:inline-block; margin-top:14px; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pa-gold); text-decoration:none; border-bottom:1px solid transparent;
}
.pa-rating__link:hover{ border-color:var(--pa-gold); }
.pa-rating__quote{ margin:0; border-left:1px solid var(--pa-line); padding-left:44px; }
.pa-rating__quote p{
  font-family:var(--pa-serif); font-size:1.55rem; font-style:italic; color:var(--pa-navy);
  line-height:1.5; margin:0 0 16px;
}
.pa-rating__quote cite{ font-style:normal; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--pa-muted); }

/* =========================================================
   Responsive — tablet & mobile use 60px / 20px
   ========================================================= */
@media (max-width:1024px){
  .pa-practice{ --pa-sec-y:60px; --pa-gut:20px; }
  .pa-hero__grid,
  .pa-strategy__grid,
  .pa-pathways__grid,
  .pa-attorney__grid,
  .pa-expect__grid,
  .pa-rating__grid{ grid-template-columns:1fr; gap:40px; }
  .pa-hero__media img,
  .pa-hero__media video{ height:360px; object-position:top center;}
  .pa-stages__row{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
  .pa-stages__row::before{ display:none; }
  .pa-insights__track{ grid-template-columns:1fr 1fr; }
  .pa-process__row{ grid-template-columns:1fr 1fr; row-gap:36px; }
  .pa-process__item{ padding:0 24px; }
  .pa-process__item:nth-child(odd){ padding-left:0; border-left:0; }
  .pa-rating__quote{ border-left:0; padding-left:0; }
	.pa-btn--primary{
		font-size:12px !important;
}
@media (max-width:640px){
  .pa-hero__grid{ gap:32px; }
  .pa-hero__media img,
  .pa-hero__media video{ height:260px; }
  .pa-pathways__image{ height:280px; }
  .pa-pathways__caption{  padding:20px; }
  .pa-pathways__caption-services{ grid-template-columns:1fr; }
  .pa-hero__bullets ul{ flex-direction:column; align-items:flex-start; gap:12px; padding:18px 0; }
  .pa-hero__actions{ gap:18px; }
  .pa-btn{ width:100%; }
  .pa-btn--text{ width:auto; }
  .pa-stages__row{ grid-template-columns:1fr; }
  .pa-insights__track{ grid-template-columns:1fr; }
  .pa-process__row{ grid-template-columns:1fr; }
  .pa-process__item{ padding:0 0 0 20px; border-left:2px solid var(--pa-line); }
  .pa-process__item:nth-child(odd){ padding-left:20px; border-left:2px solid var(--pa-line); }
  .pa-expect__items{ grid-template-columns:1fr; }
  .pa-strategy__grid > div:first-child{ padding-left:22px; }
  .pa-rating__quote p{ font-size:1.25rem; }
}