/* ============================================================
   WaleedMJ Law — page components
   Layered on top of main.css (design system).
   ============================================================ */

/* ---------- page heads ---------- */
.wmj-pagehead{
  background:var(--obsidian);color:var(--ivory);
  padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,6vw,4.5rem);
  position:relative;overflow:hidden;
}
.wmj-pagehead::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(to right,
    var(--rule-dark) 0 1px, transparent 1px calc(100% / 12));
  opacity:.4;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 40%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 40%, transparent);
  pointer-events:none;
}
.wmj-pagehead .wmj-shell{position:relative}
.wmj-pagehead h1{
  font-size:clamp(2.1rem,1.2rem + 2.9vw,3.5rem);
  letter-spacing:-.025em;font-weight:400;
  margin-top:1rem;max-width:20ch;
}
.wmj-pagehead__lede{margin-top:1.4rem;color:var(--mist);max-width:60ch}

/* ---------- shared blocks ---------- */
.wmj-h-tight{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.4rem);letter-spacing:-.02em;max-width:20ch}
.wmj-split{display:grid;gap:2rem}
@media(min-width:900px){
  .wmj-split{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2.5rem,5vw,5rem)}
}
.wmj-grid-2,.wmj-grid-3{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:760px){
  .wmj-grid-2{grid-template-columns:1fr 1fr}
  .wmj-grid-3{grid-template-columns:repeat(3,1fr)}
}
.wmj-band--dark .wmj-grid-2,
.wmj-band--dark .wmj-grid-3{background:var(--rule-dark);border-color:var(--rule-dark)}

.wmj-card{background:var(--ivory);padding:clamp(1.5rem,2.6vw,2.2rem);display:flex;flex-direction:column;gap:.7rem}
.wmj-band--paper .wmj-card{background:var(--paper)}
.wmj-card h3{font-size:1.18rem}
.wmj-card p{font-size:.95rem;color:var(--slate);line-height:1.6}
.wmj-card--dark{background:var(--obsidian)}
.wmj-card--dark p{color:var(--mist)}
.wmj-card--office .wmj-address{font-size:1rem;color:var(--obsidian);line-height:1.7}
.wmj-card__meta{font-size:.85rem;color:var(--slate);font-style:italic}

.wmj-prose{max-width:var(--measure)}
.wmj-prose p{margin-bottom:1.1rem}
.wmj-prose p:last-child{margin-bottom:0}
.wmj-prose h3{font-size:1.22rem;margin-bottom:.7rem}

.wmj-credential{
  font-family:var(--sans);font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:.7rem;
}
.wmj-creds{
  list-style:none;margin:1.5rem 0 0;padding:1.4rem 0 0;
  display:flex;flex-direction:column;gap:.6rem;border-top:1px solid var(--rule);
}
.wmj-creds li{font-size:.95rem;color:var(--slate);display:flex;gap:.7rem;align-items:baseline}
.wmj-creds li::before{content:"";flex:0 0 auto;width:12px;height:1px;background:var(--accent);transform:translateY(-4px)}

.wmj-callout{border-left:2px solid var(--accent);padding:.4rem 0 .4rem 1.6rem;max-width:70ch}
.wmj-callout__text{font-size:1.05rem;line-height:1.65;color:var(--obsidian);margin-top:.8rem}

/* ---------- practice areas ---------- */
.wmj-arealist{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:640px){.wmj-arealist{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.wmj-arealist{grid-template-columns:repeat(4,1fr)}}
.wmj-area{background:var(--ivory);padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:.5rem}
.wmj-band--paper .wmj-area{background:var(--paper)}
.wmj-area h3{font-size:1.02rem;letter-spacing:-.005em}
.wmj-area p{font-size:.87rem;color:var(--slate);line-height:1.55}

/* ---------- problem finder ---------- */
.wmj-problems{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:700px){.wmj-problems{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.wmj-problems{grid-template-columns:repeat(3,1fr)}}
.wmj-problem{
  background:var(--ivory);padding:1.5rem 1.4rem;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:.5rem;position:relative;
  transition:background var(--dur) var(--ease);
}
.wmj-problem:hover{background:var(--paper)}
.wmj-problem h3{font-size:1.05rem;padding-right:1.8rem}
.wmj-problem p{font-size:.88rem;color:var(--slate);line-height:1.55}
.wmj-problem__go{position:absolute;top:1.5rem;right:1.3rem;color:var(--accent);transition:transform var(--dur) var(--ease)}
.wmj-problem:hover .wmj-problem__go{transform:translateX(4px)}

/* ---------- urgent strip ---------- */
.wmj-urgent{background:var(--charcoal);color:var(--ivory);padding-block:1.6rem}
.wmj-urgent__inner{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between}
.wmj-urgent__text{color:var(--mist);margin-top:.5rem;max-width:62ch;font-size:.96rem}

/* ---------- contact ---------- */
.wmj-contact-grid{display:grid;gap:3rem}
@media(min-width:960px){
  .wmj-contact-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem)}
}
.wmj-contact-aside{display:flex;flex-direction:column;gap:2rem}
.wmj-aside-block{border-top:1px solid var(--rule);padding-top:1.2rem}
.wmj-aside-block h3{
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1rem;
}
.wmj-plainlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.wmj-plainlist a{color:var(--obsidian);text-decoration:none;border-bottom:1px solid var(--rule)}
.wmj-plainlist a:hover{border-color:var(--accent);color:var(--accent)}
.wmj-office-card{display:flex;flex-direction:column;gap:.15rem;margin-bottom:1.2rem;font-size:.93rem;color:var(--slate)}
.wmj-office-card strong{color:var(--obsidian);font-size:.95rem}
.wmj-office-card em{font-size:.85rem;margin-top:.25rem}
.wmj-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.wmj-ticks li{font-size:.92rem;color:var(--slate);display:flex;gap:.7rem;align-items:baseline;line-height:1.55}
.wmj-ticks li::before{content:"";flex:0 0 auto;width:10px;height:1px;background:var(--accent);transform:translateY(-5px)}

/* ---------- forms ---------- */
.wmj-form-wrap{max-width:44rem}
.wmj-field-row{display:grid;gap:1.1rem}
@media(min-width:620px){.wmj-field-row{grid-template-columns:1fr 1fr}}
.wmj-field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem}
.wmj-field label{
  font-family:var(--sans);font-size:.76rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate);
}
.wmj-field label span{color:var(--accent)}
.wmj-field input,.wmj-field select,.wmj-field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--obsidian);
  background:var(--paper);border:1px solid var(--rule);
  padding:.85rem .9rem;width:100%;border-radius:0;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wmj-field textarea{resize:vertical;min-height:8rem;line-height:1.6}
.wmj-field input:focus,.wmj-field select:focus,.wmj-field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(217,119,87,.16);
}
.wmj-help{font-size:.83rem;color:var(--slate)}
.wmj-hp{position:absolute !important;left:-9999px;height:1px;overflow:hidden}
.wmj-form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;margin-top:.6rem}
.wmj-whatsapp{font-size:.9rem;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}
.wmj-whatsapp:hover{border-color:var(--accent)}
.wmj-intake-note{
  margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--rule);
  font-size:.83rem;line-height:1.6;color:var(--slate);max-width:60ch;
}

/* ---------- notices ---------- */
.wmj-notice{
  padding:1.1rem 1.3rem;font-size:.94rem;line-height:1.6;max-width:70ch;
  border-left:2px solid var(--accent);background:var(--paper);color:var(--slate);
}
.wmj-notice strong{display:block;color:var(--obsidian);margin-bottom:.25rem}
.wmj-notice--ok{border-left-color:#3F6B52}
.wmj-notice--warn{border-left-color:#9A7B4F}
.wmj-notice--info{border-left-color:var(--accent)}

/* ---------- engagement overlay ---------- */
.wmj-overlay{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  padding:var(--gutter);
  background:rgba(8,10,13,.82);
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease);
}
.wmj-overlay[data-open="true"]{opacity:1;pointer-events:auto}
.wmj-overlay__panel{
  background:var(--obsidian);border:1px solid var(--rule-dark);
  color:var(--ivory);max-width:56rem;width:100%;
  max-height:86vh;overflow-y:auto;
  padding:clamp(1.8rem,4vw,3rem);
  transform:translateY(10px);
  transition:transform .4s var(--ease);
}
.wmj-overlay[data-open="true"] .wmj-overlay__panel{transform:none}
.wmj-overlay__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;margin-bottom:1.8rem}
.wmj-overlay h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem);letter-spacing:-.02em}
.wmj-overlay__close{
  flex:0 0 auto;width:40px;height:40px;background:none;border:1px solid var(--rule-dark);
  color:var(--mist);font-size:1.1rem;cursor:pointer;line-height:1;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.wmj-overlay__close:hover{border-color:var(--accent-lt);color:var(--accent-lt)}
.wmj-overlay__routes{display:grid;gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark)}
@media(min-width:640px){.wmj-overlay__routes{grid-template-columns:1fr 1fr}}
.wmj-route{
  background:var(--obsidian);padding:1.1rem 1.2rem;text-decoration:none;color:var(--ivory);
  font-size:.98rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  transition:background var(--dur) var(--ease);
}
.wmj-route:hover{background:var(--charcoal);color:var(--accent-lt)}
.wmj-route span{color:var(--accent-lt);transition:transform var(--dur) var(--ease)}
.wmj-route:hover span{transform:translateX(4px)}

/* ---------- FAQ accordion (native <details>, no JS) ---------- */
.wmj-faqlist{display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule);max-width:74ch}
.wmj-faq{background:var(--paper);padding:0}
.wmj-faq summary{
  padding:1.1rem 1.3rem;cursor:pointer;list-style:none;
  font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--obsidian);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.wmj-faq summary::-webkit-details-marker{display:none}
.wmj-faq summary::after{
  content:"+";flex:0 0 auto;font-family:var(--serif);font-size:1.3rem;color:var(--accent);
  transition:transform var(--dur) var(--ease);
}
.wmj-faq[open] summary::after{transform:rotate(45deg)}
.wmj-faq p{padding:0 1.3rem 1.3rem;font-size:.96rem;line-height:1.65;color:var(--slate);max-width:66ch}

/* ---------- practice-area cards that link to LawBytes ---------- */
a.wmj-area.wmj-area--linked{
  text-decoration:none;color:inherit;cursor:pointer;
  transition:background var(--dur) var(--ease);
}
a.wmj-area.wmj-area--linked:hover{background:var(--paper)}
.wmj-band--paper a.wmj-area.wmj-area--linked:hover{background:var(--ivory)}
.wmj-area__go{
  margin-top:auto;padding-top:.4rem;
  font-family:var(--sans);font-size:.72rem;font-weight:650;
  letter-spacing:.05em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:.4rem;
}
a.wmj-area.wmj-area--linked:hover .wmj-area__go{color:var(--obsidian)}
.wmj-area{display:flex;flex-direction:column}

/* ---------- linked area cards: make clickability unmistakable ---------- */
a.wmj-area.wmj-area--linked{
  position:relative;
  border-left:3px solid var(--accent);
  padding-left:calc(1.3rem - 3px);
}
a.wmj-area.wmj-area--linked h3{color:var(--obsidian)}
a.wmj-area.wmj-area--linked:hover{border-left-color:var(--obsidian)}
.wmj-area__go{
  opacity:1;
  color:var(--accent) !important;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ---------- newsletter / lead-gen form ---------- */
.wmj-leadform-wrap{max-width:32rem}
.wmj-leadform__row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem}
.wmj-leadform__row--single{grid-template-columns:1fr}
.wmj-leadform input[type="text"],
.wmj-leadform input[type="tel"],
.wmj-leadform input[type="email"]{
  font-family:var(--sans);font-size:.95rem;
  padding:.75rem .85rem;width:100%;
  border:1px solid var(--rule-dark);background:var(--charcoal);color:var(--ivory);
}
.wmj-band--light .wmj-leadform input,
.wmj-band--paper .wmj-leadform input{
  background:var(--paper);border-color:var(--rule);color:var(--obsidian);
}
.wmj-leadform input::placeholder{color:var(--mist)}
.wmj-band--light .wmj-leadform input::placeholder,
.wmj-band--paper .wmj-leadform input::placeholder{color:var(--slate)}
.wmj-leadform input:focus{outline:none;border-color:var(--accent-lt)}
.wmj-leadform__note{font-size:.8rem;color:var(--mist);margin-top:.7rem}
.wmj-band--light .wmj-leadform__note,
.wmj-band--paper .wmj-leadform__note{color:var(--slate)}

/* ---------- country / topic selector ---------- */
.wmj-country-selector{
  background:var(--charcoal);border:1px solid var(--rule-dark);
  padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;gap:1.2rem;
}
.wmj-country-selector__row{display:grid;gap:1rem}
@media(min-width:640px){.wmj-country-selector__row{grid-template-columns:1fr 1fr auto}}
.wmj-country-selector select{
  font-family:var(--sans);font-size:.95rem;color:var(--ivory);
  background:var(--obsidian);border:1px solid var(--rule-dark);
  padding:.85rem .9rem;width:100%;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E2A186' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;
}
.wmj-country-selector select:focus{outline:none;border-color:var(--accent-lt)}
.wmj-country-selector__go{white-space:nowrap}
.wmj-country-selector__hint{font-size:.85rem;color:var(--mist)}