/*
Theme Name: Legal Window Blog
Theme URI: https://www.legalwindow.in/blog/
Author: Legal Window
Description: The blog half of legalwindow.in. It wears the main site's header, footer and stylesheets rather than copies of them, so the two cannot drift apart: change the menu on the site and it changes here. What this file adds is only what a blog needs and a service page never did, which is mostly the shape of an article.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: legalwindow
Tags: blog, one-column, custom-menu, featured-images, translation-ready
*/

/* The site's own palette, named again here so this file can be read on its
   own. These are the values from assets/css/style.css. */
:root {
  --lw-ink: #0f172a;
  --lw-body: #475569;
  --lw-muted: #94a3b8;
  --lw-line: #eaeef4;
  --lw-tint: #f8fafc;
  --lw-accent: #ff9c00;
}

/* ---- hero ---------------------------------------------------------------- */

/* The site's plain hero, given the room a title and a breadcrumb need. */
.lw-hero {
  text-align: center;
}

.lw-hero-lede {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .76);
}

.lw-hero .breadcrumb {
  justify-content: center;
}

.lw-hero-post h1 {
  max-width: 860px;
  margin-inline: auto;
}

.lw-post-meta,
.lw-card-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: .88rem;
  color: rgba(255, 255, 255, .62);
}

/* Three facts on a card barely 290px wide. Left to itself the row squeezes
   each one until names break across lines, so the items are kept whole and
   the row is allowed to wrap between them instead. */
.lw-card-meta {
  flex-wrap: wrap;
  row-gap: 2px;
  justify-content: flex-start;
  font-size: .82rem;
  color: var(--lw-muted);
}

.lw-card-meta > * {
  white-space: nowrap;
}

.lw-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}

/* ---- the chip a category or tag wears ------------------------------------ */

.lw-chip {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9a5b00;
  text-decoration: none;
  background: #fff5e6;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}

.lw-chip:hover,
.lw-chip:focus-visible {
  color: #fff;
  background: var(--lw-accent);
}

.lw-chip-light {
  color: #fff;
  background: rgba(255, 156, 0, .2);
}

/* ---- a post in a list ---------------------------------------------------- */

.lw-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--lw-line);
  border-radius: 18px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.lw-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(15, 23, 42, .10);
}

/*
 * The cover art is shown whole, never cropped.
 *
 * These covers are designed pictures with words in them, and most are square
 * while some are wide. Filling a fixed frame with `cover` cut the wording off
 * the square ones, so the frame is a fixed 4:3 and the picture is fitted
 * inside it: every card is the same height, and no cover loses its heading.
 * 4:3 rather than 16:9 because the art is mostly square, and that leaves the
 * least empty space either side.
 */
.lw-card-shot {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
}

.lw-card-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .4s ease;
}

.lw-card:hover .lw-card-shot img {
  transform: scale(1.03);
}

/* A post with no picture of its own gets a mark rather than a blank space. */
.lw-card-shot-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  color: #cbd5e1;
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
}

.lw-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 22px 24px 24px;
}

/* The card body is a flex column, which would otherwise stretch the chip the
   full width of the card: a label has to be the width of its own words. */
.lw-card-body .lw-chip {
  align-self: flex-start;
}

.lw-card-title {
  margin: 0 0 10px;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.45;
}

.lw-card-title a {
  color: var(--lw-ink);
  text-decoration: none;
}

.lw-card-title a:hover,
.lw-card-title a:focus-visible {
  color: #b36d00;
}

/* The excerpt takes the slack, so every card's meta line sits at the same
   height however long the titles are. */
.lw-card-excerpt {
  flex: 1 1 auto;
  margin: 0 0 16px;
  font-size: .93rem;
  line-height: 1.75;
  color: var(--lw-body);
}

/* ---- the article --------------------------------------------------------- */

.lw-sec-article {
  padding-top: 48px;
}

/*
 * The post body.
 *
 * Everything in here is written by whoever wrote the post, so the rules are
 * on bare elements rather than on classes: there is no markup to add to a
 * thousand posts brought over from the old site.
 */
.lw-prose {
  font-size: 1.04rem;
  line-height: 1.85;
  color: var(--lw-body);
}

.lw-prose > * + * {
  margin-top: 1.25em;
}

.lw-prose h2,
.lw-prose h3,
.lw-prose h4 {
  margin-top: 2em;
  margin-bottom: .6em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--lw-ink);
}

.lw-prose h2 { font-size: 1.6rem; }
.lw-prose h3 { font-size: 1.3rem; }
.lw-prose h4 { font-size: 1.1rem; }

.lw-prose a {
  color: #b36d00;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lw-prose a:hover,
.lw-prose a:focus-visible {
  color: var(--lw-accent);
}

.lw-prose ul,
.lw-prose ol {
  padding-left: 1.3em;
}

.lw-prose li + li {
  margin-top: .5em;
}

.lw-prose img {
  height: auto;
  max-width: 100%;
  border-radius: 14px;
}

.lw-prose figure {
  margin-inline: 0;
}

.lw-prose figcaption {
  margin-top: .6em;
  font-size: .86rem;
  color: var(--lw-muted);
  text-align: center;
}

.lw-prose blockquote {
  margin-inline: 0;
  padding: 2px 0 2px 22px;
  font-size: 1.06rem;
  color: var(--lw-ink);
  border-left: 3px solid var(--lw-accent);
}

.lw-prose code {
  padding: 2px 6px;
  font-size: .9em;
  color: #9f1239;
  background: #fff1f2;
  border-radius: 6px;
}

.lw-prose pre {
  padding: 18px 20px;
  overflow-x: auto;
  color: #e2e8f0;
  background: var(--lw-ink);
  border-radius: 14px;
}

.lw-prose pre code {
  color: inherit;
  background: none;
}

/* Tables in old posts carry no classes and are often wider than the column,
   so the wrapper scrolls rather than letting the page scroll sideways. */
.lw-prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.lw-prose th,
.lw-prose td {
  min-width: 140px;
  padding: 12px 16px;
  text-align: left;
  border: 1px solid var(--lw-line);
}

.lw-prose th {
  font-weight: 700;
  color: var(--lw-ink);
  background: var(--lw-tint);
}

.lw-prose iframe,
.lw-prose video {
  max-width: 100%;
  border-radius: 14px;
}

.lw-by {
  font-weight: 600;
  color: inherit;
}

/* ---- the column beside a post -------------------------------------------- */

/*
 * The column follows the article down the page until the article runs out,
 * and then stays where it is. position: sticky needs a top offset, and the
 * site's header is fixed over the page, so the offset clears it.
 */
.lw-aside {
  position: sticky;
  top: 104px;
}

.lw-aside-box {
  padding: 22px 22px 24px;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid var(--lw-line);
  border-radius: 16px;
}

.lw-aside-title {
  margin: 0 0 16px;
  padding-bottom: 12px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lw-ink);
  border-bottom: 1px solid var(--lw-line);
}

.lw-recent,
.lw-cats,
.lw-years {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lw-recent li + li {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

.lw-recent a {
  display: flex;
  gap: 12px;
  text-decoration: none;
}

.lw-recent-shot {
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  color: #cbd5e1;
  background: var(--lw-tint);
  border-radius: 10px;
}

.lw-recent-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lw-recent-title {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--lw-ink);
}

.lw-recent a:hover .lw-recent-title,
.lw-recent a:focus-visible .lw-recent-title {
  color: #b36d00;
}

.lw-recent-date {
  display: block;
  margin-top: 4px;
  font-size: .78rem;
  color: var(--lw-muted);
}

.lw-cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  font-size: .92rem;
  color: var(--lw-body);
  text-decoration: none;
  border-bottom: 1px solid #f1f5f9;
  transition: color .2s ease;
}

.lw-cats li:last-child a {
  border-bottom: 0;
}

/* wp_get_archives puts the count outside the link, as a bare "(8)" after it.
   The row is the list item, not the anchor, or the count drops to a line of
   its own underneath the year. */
.lw-years li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  font-size: .92rem;
  color: var(--lw-muted);
  border-bottom: 1px solid #f1f5f9;
}

.lw-years li:last-child {
  border-bottom: 0;
}

.lw-years a {
  color: var(--lw-body);
  text-decoration: none;
  transition: color .2s ease;
}

.lw-cats a:hover,
.lw-cats a:focus-visible,
.lw-years a:hover,
.lw-years a:focus-visible {
  color: #b36d00;
}

.lw-count {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 2px 8px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--lw-muted);
  text-align: center;
  background: var(--lw-tint);
  border-radius: 999px;
}

.lw-aside-cta {
  color: #fff;
  background: linear-gradient(140deg, #0f172a, #1e3a8a 70%, #0b1220);
  border-color: transparent;
}

.lw-aside-cta .lw-aside-title {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .18);
}

.lw-aside-cta p {
  margin-bottom: 18px;
  font-size: .92rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
}

/* ---- tags, neighbours, pagination ---------------------------------------- */

.lw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--lw-line);
}

.lw-tags .lw-chip {
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0;
}

.lw-adjacent {
  display: grid;
  gap: 16px;
  margin-top: 36px;
}

@media (min-width: 768px) {
  .lw-adjacent {
    grid-template-columns: 1fr 1fr;
  }
}

.lw-adjacent-link {
  display: block;
  padding: 18px 20px;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--lw-line);
  border-radius: 14px;
  transition: border-color .2s ease, transform .2s ease;
}

.lw-adjacent-link:hover,
.lw-adjacent-link:focus-visible {
  border-color: var(--lw-accent);
  transform: translateY(-2px);
}

.lw-adjacent-next {
  text-align: right;
}

.lw-adjacent-label {
  display: block;
  margin-bottom: 4px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lw-muted);
}

.lw-adjacent-title {
  display: block;
  font-weight: 600;
  line-height: 1.45;
  color: var(--lw-ink);
}

.lw-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 48px;
}

.lw-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  font-weight: 600;
  color: var(--lw-ink);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--lw-line);
  border-radius: 11px;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.lw-pager .page-numbers:hover,
.lw-pager .page-numbers:focus-visible {
  border-color: var(--lw-accent);
}

.lw-pager .page-numbers.current {
  color: var(--lw-ink);
  background: var(--lw-accent);
  border-color: var(--lw-accent);
}

.lw-pager .page-numbers.dots {
  background: none;
  border-color: transparent;
}

.lw-pager-inline {
  margin-top: 28px;
}

/* ---- search, empty states, the closing call ------------------------------ */

.lw-search {
  display: flex;
  gap: 10px;
  max-width: 560px;
  margin: 24px auto 0;
}

.lw-search .form-control {
  flex: 1 1 auto;
}

.lw-search .btn {
  white-space: nowrap;
}

.lw-empty {
  max-width: 520px;
  margin: 0 auto;
  padding: 56px 24px;
  text-align: center;
  color: var(--lw-body);
}

.lw-empty i {
  display: block;
  margin-bottom: 16px;
  font-size: 2.4rem;
  color: #cbd5e1;
}

.lw-cta {
  padding-top: 0;
}

.lw-cta-box {
  padding: 48px 32px;
  color: #fff;
  text-align: center;
  background: linear-gradient(140deg, #0f172a, #1e3a8a 60%, #0b1220);
  border-radius: 22px;
}

.lw-cta-box h2 {
  color: #fff;
}

.lw-cta-box p {
  color: rgba(255, 255, 255, .78);
}

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

.lw-comments {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--lw-line);
}

.lw-comments-title {
  margin-bottom: 24px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--lw-ink);
}

.lw-comment-list,
.lw-comment-list .children {
  padding-left: 0;
  list-style: none;
}

.lw-comment-list .children {
  margin-top: 18px;
  padding-left: 22px;
  border-left: 2px solid var(--lw-line);
}

.lw-comment-list li {
  margin-bottom: 18px;
}

.lw-comment-list .comment-body {
  padding: 18px 20px;
  background: var(--lw-tint);
  border-radius: 14px;
}

.lw-comment-list .comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--lw-ink);
}

.lw-comment-list .comment-author img {
  border-radius: 50%;
}

.lw-comment-list .comment-meta,
.lw-comment-list .comment-metadata {
  margin-bottom: 10px;
  font-size: .82rem;
  color: var(--lw-muted);
}

.lw-comment-list .comment-meta a,
.lw-comment-list .comment-metadata a {
  color: inherit;
}

.lw-comment-list .reply a {
  font-size: .84rem;
  font-weight: 600;
  color: #b36d00;
  text-decoration: none;
}

.lw-field {
  margin-bottom: 16px;
}

.lw-field label {
  display: block;
  margin-bottom: 6px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--lw-body);
}

.lw-comment-form .form-submit {
  margin-top: 8px;
}

.lw-comments-closed {
  color: var(--lw-muted);
}

/* ---- the fallback, for when the main site cannot be found ---------------- */

.lw-fallback-header {
  background: #fff;
  border-bottom: 1px solid var(--lw-line);
}

.lw-fallback-footer {
  color: #cbd5e1;
  background: var(--lw-ink);
}

.lw-fallback-footer a {
  color: #fff;
  text-decoration: none;
}

/* ---- phones -------------------------------------------------------------- */

/* Below the wide breakpoint the column drops under the article, where it has
   no reason to stick to anything. */
@media (max-width: 991.98px) {
  .lw-aside {
    position: static;
    margin-top: 40px;
  }
}

@media (max-width: 767.98px) {
  .lw-prose {
    font-size: 1rem;
  }

  .lw-prose h2 { font-size: 1.36rem; }
  .lw-prose h3 { font-size: 1.16rem; }

  .lw-cta-box {
    padding: 36px 22px;
  }

  .lw-search {
    flex-direction: column;
  }

  .lw-adjacent-next {
    text-align: left;
  }
}