/* ==========================================================================
   Killian Community Management — add-on stylesheet
   Loaded AFTER assets/styles.css. Everything here supports the new
   Resources page, the Blog, and the social links in the footer.
   Nothing in the original styles.css needs to be changed.
   ========================================================================== */

/* ---------- Nav breathing room ----------
   The menu gained two items (Resources, Blog): seven links plus two buttons
   where there were five plus two. Measured at 950px with the original rules,
   "Homeowner Login" wrapped to a second line and the "Get a Quote" button
   overlapped it, and the brand wrapped to two lines.

   Two changes fix it. First the links tighten below 1150px. Second, the
   hamburger takes over at 1060px instead of 860px — the band from 861 to
   1060px cannot fit this menu at any readable size, and collapsing earlier is
   better than shrinking the text until it is hard to read. The block below
   repeats styles.css's own 860px collapse rules at the wider breakpoint; the
   original rules still apply underneath and do no harm. */
@media (max-width: 1150px) {
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 0.9rem; }
}

/* Stops the two pill buttons breaking across lines while they are still shown. */
.nav-cta, .nav-login { white-space: nowrap; }

@media (max-width: 1060px) {
  .nav-toggle-btn { display: flex; }
  .nav-links {
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: var(--shadow-md);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 24px;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
  }
  .nav-links a { display: block; padding: 12px 2px; border-bottom: 1px solid var(--green-200); font-size: 0.95rem; }
  .nav-login {
    border: 0;
    padding: 12px 2px;
    border-radius: 0;
    color: var(--green-700) !important;
    border-bottom: 1px solid var(--green-200) !important;
  }
  .nav-login:hover { background: transparent; color: var(--forest-800) !important; }
  .nav-toggle-checkbox:checked ~ .nav-links {
    max-height: 460px;
    opacity: 1;
    padding: 12px 24px 20px;
  }
}

/* ---------- Resource cards ----------
   Built on .card so they inherit the same radius, border and lift on hover.
   The whole card is the link, which gives a much bigger tap target on a
   phone than an underlined phrase would. */
.resource-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  padding: 26px 24px;
  height: 100%;
}
.resource-card:hover { color: inherit; }

.resource-card .res-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.resource-card .res-mark {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--green-400), var(--forest-700));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.resource-card .res-mark svg { width: 21px; height: 21px; stroke: #fff; fill: none; }

.resource-card h3 {
  font-size: 1.02rem;
  line-height: 1.35;
  margin: 0;
}

.resource-card p {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0 0 18px;
}

/* Pushes the "Open" row to the bottom so cards of differing text length
   still line their footers up across a row. */
.res-go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--forest-700);
}
.resource-card:hover .res-go,
.post-card:hover .res-go { color: var(--green-600); }

/* Sized and stroked globally rather than under .resource-card — the blog cards
   reuse .res-go, and when this rule was scoped their arrow rendered as an
   unsized, black-filled triangle several hundred pixels across. */
.res-go svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
}

/* Small grey label for the source of a link — "Code of Virginia", "DPOR", etc. */
.res-source {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--green-700);
  background: var(--green-200);
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 12px;
}

/* A quieter heading for the groups within the Resources page. */
.group-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 26px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--green-200);
}
.group-heading h2 { font-size: 1.45rem; margin: 0; }
.group-heading span {
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ---------- Disclaimer note ---------- */
.disclaimer {
  background: var(--green-100);
  border: 1px solid var(--green-300);
  border-left: 4px solid var(--green-600);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.disclaimer strong { color: var(--forest-800); }
.disclaimer p:last-child { margin-bottom: 0; }

/* ---------- Blog ---------- */
/* auto-fill with a maximum, not auto-fit with 1fr: while there are only one or
   two posts, auto-fit stretched a single card across the full 1180px container,
   which made one short post look like a broken hero panel. Columns now cap at
   380px and the row centres itself until there are enough posts to fill it. */
.post-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
  justify-content: center;
}

.post-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  padding: 0;
  overflow: hidden;
}
.post-card:hover { color: inherit; }

.post-card .post-thumb {
  height: 140px;
  background: linear-gradient(120deg, var(--forest-900), var(--forest-700) 55%, var(--green-600));
  display: flex; align-items: center; justify-content: center;
}
.post-card .post-thumb img { width: 58px; height: 58px; opacity: 0.92; }

.post-card .post-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: 1.1rem; line-height: 1.4; margin: 0 0 10px; }
.post-card p { font-size: 0.92rem; color: var(--text-muted); margin: 0 0 18px; }
.post-card .res-go { margin-top: auto; }

.post-meta {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 10px;
}

/* Empty-state panel shown on the blog index before there are many posts. */
.blog-empty {
  border: 2px dashed var(--green-300);
  border-radius: var(--radius);
  padding: 40px 30px;
  text-align: center;
  color: var(--text-muted);
  background: var(--white);
}

/* ---------- Article body ----------
   Measured column for reading. 68ch keeps lines at roughly 10-14 words,
   which is the range that stops the eye losing its place between lines. */
.article {
  max-width: 68ch;
  margin: 0 auto;
}
.article h2 { font-size: 1.4rem; margin-top: 2em; }
.article h3 { font-size: 1.1rem; margin-top: 1.6em; }
.article p, .article li { font-size: 1.02rem; line-height: 1.75; }
.article ul, .article ol { padding-left: 1.25em; margin-bottom: 1.4em; }
.article li { margin-bottom: 0.6em; }
.article blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 4px solid var(--green-500);
  color: var(--text-muted);
  font-style: italic;
}
.article a { text-decoration: underline; text-underline-offset: 3px; }

.article-meta {
  text-align: center;
  color: var(--green-100);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 30px;
}
.back-link svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }

/* ---------- Footer: fourth column + social icons ---------- */
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

.social-row {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.social-link {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(216, 243, 220, 0.25);
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.social-link svg { width: 18px; height: 18px; fill: var(--green-200); }
.social-link:hover {
  background: var(--green-600);
  border-color: var(--green-600);
  transform: translateY(-2px);
}
.social-link:hover svg { fill: #fff; }

/* Repeat of the original responsive rules, because this file loads after
   styles.css and would otherwise keep four columns on a phone. */
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .group-heading { flex-direction: column; gap: 4px; }
}

/* ---------- Signpost strip (top of Resources) ----------
   Owners and agents arriving for a resale packet need one obvious next step,
   not a category to browse. A light panel rather than a .cta-band, which is
   dark and would out-shout the page it is introducing. */
.signpost {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--green-300);
  border-left: 4px solid var(--green-600);
  border-radius: var(--radius);
  padding: 26px 30px;
  box-shadow: var(--shadow-sm);
}
.signpost-text { flex: 1 1 320px; }
.signpost-text h3 { font-size: 1.15rem; margin: 0 0 6px; }
.signpost-text p { margin: 0; color: var(--text-muted); font-size: 0.94rem; }
.signpost-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.signpost .btn { padding: 12px 22px; font-size: 0.92rem; }

/* A light-background counterpart to .btn-outline, which is bordered in white
   for use on the dark hero and disappears on a pale panel. */
.btn-quiet {
  background: var(--white);
  border-color: var(--green-600);
  color: var(--forest-800);
}
.btn-quiet:hover { background: var(--green-100); color: var(--forest-900); }

@media (max-width: 560px) {
  .signpost { padding: 22px; }
  .signpost-actions { width: 100%; }
  .signpost-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* The header is position:sticky, so an anchor jump (#virginia-law, #resale)
   lands with the target tucked underneath it. Offset the scroll stop by a
   little more than the header's height. */
section[id], .service-row[id] { scroll-margin-top: 96px; }