/* ==========================================================================
   Woodlock Construction Law Firm, P.A.
   Shared stylesheet — accessible rebuild (WCAG 2.1 Level AA)

   Layout is Flexbox and Grid only. No absolute positioning for content, no
   layout tables, no images of text. Type is sized in rem so it scales with
   the user's font-size setting and browser zoom.

   Offsets marked "measured" reproduce the geometry of the original site,
   taken from its rendered pages rather than estimated by eye.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Sampled from the original and verified for contrast:
   black on --bg 13.65:1 · white on --nav-bg 6.30:1 · --link on --bg 7.29:1
   -------------------------------------------------------------------------- */
:root {
  --bg: #ccccff; /* page background — light periwinkle */
  --ink: #000000; /* body text */
  --nav-bg: #4850d0; /* navigation button bar */
  --nav-text: #ffffff; /* navigation button label */
  --link: #0000cc; /* in-content links */
  --link-hover: #000088;
  --focus: #0b1a8f; /* focus ring */

  --col-width: 758px; /* content column */
  --sidebar-w: 141px; /* blueprint sidebar / nav column */
  --header-h: 104px; /* blueprint header band */
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%; /* 16px — never lock this, users may change it */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: rgb(213, 216, 245);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75rem; /* measured: 12px */
  line-height: 1.25; /* measured: 15px leading on 12px type */
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Accessibility utilities
   -------------------------------------------------------------------------- */

/* Visible only to assistive technology. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* First focusable element on every page (WCAG 2.4.1). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--nav-bg);
  color: var(--nav-text);
  font-weight: bold;
  text-decoration: underline;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* Visible focus indicator on every interactive element (WCAG 2.4.7).
   Two-tone: a white inner ring fills the 2px offset, so the dark outline
   always has a light neighbour to contrast against. It therefore reads
   clearly over the periwinkle page and over the blue nav bars alike (1.4.11). */
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ffffff;
}

/* Fallback for browsers without :focus-visible support. */
a:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ffffff;
}

a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   4. Page shell
   -------------------------------------------------------------------------- */

/* Left-aligned against the viewport edge, matching the original site. */
.page {
  max-width: var(--col-width);
  margin: 0;
  background-color: var(--bg);
}

/* Header band — the blueprint graphic is purely decorative, so it is a CSS
   background and is never exposed to assistive technology. */
.masthead {
  display: flex;
  align-items: flex-start;
  min-height: var(--header-h);
  padding: 27px 0 0 186px; /* measured: inner-page title at 186, 27 */
  background-color: var(--bg);
  background-image: url("assets/blueprint-header.gif");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
}

/* Home: the two title lines are centred inside a 439px box at x=222. */
.masthead--home {
  padding: 37px 0 0 222px;
}

.page-title {
  margin: 0;
  font-size: 1.5rem; /* measured: 24px */
  font-weight: bold;
  line-height: 1.2; /* measured: 29px */
  color: var(--ink);
}

.masthead--home .page-title {
  max-width: 439px;
  text-align: center;
}

/* The measured 439px box is the exact width of the firm name on one line, so
   any rendering difference would wrap it. Held on one line at desktop and
   released below, where the title reflows freely. */
.masthead--home .firm-name {
  white-space: nowrap;
}

.page-title .firm-name,
.page-title .principal {
  display: block;
}

/* Body row: blueprint sidebar + main content. */
.layout {
  display: flex;
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   5. Navigation — real text links, never images of text
   Measured: bars 140x15 at x=1, first at y=136, 44px pitch.
   -------------------------------------------------------------------------- */
.sidebar {
  flex: 0 0 var(--sidebar-w);
  /* Measured: bars start at x=1. That 1px is also exactly enough to keep the
     focus ring on screen at the left edge of the viewport. */
  padding: 32px 0 1rem 1px;
  background-color: var(--bg);
  background-image: url("assets/blueprint-sidebar.gif");
  background-repeat: no-repeat;
  background-position: left top;
}

.nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each item is the blue bar plus a vertical tick at either end, separated
   from the bar by a hairline of background — as on the original. */
.nav-list li {
  display: flex;
  align-items: stretch;
  gap: 1px;
  margin-bottom: 29px; /* 15px bar + 29px gap = measured 44px pitch */
}

.nav-list li::before,
.nav-list li::after {
  content: "";
  flex: 0 0 3px;
  background-color: var(--nav-bg);
}

.nav-list a {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  background-color: var(--nav-bg);
  color: var(--nav-text);
  font-size: 0.75rem; /* 12px */
  font-weight: bold;
  line-height: 15px; /* measured bar height */
  text-align: center;
  text-decoration: none;
}

.nav-list a:hover,
.nav-list a:focus-visible {
  text-decoration: underline; /* affordance that does not rely on colour */
}

/* Current page: arrows AND aria-current, so the state is never conveyed by
   colour alone (WCAG 1.4.1). */
.nav-list a.current::before {
  content: "\25BA\00A0";
}
.nav-list a.current::after {
  content: "\00A0\25C4";
}

/* --------------------------------------------------------------------------
   6. Main content
   The original positions each page's text block at a slightly different
   offset; the per-page values below reproduce the measured left edges.
   -------------------------------------------------------------------------- */
.content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 30px 26px;
}

.page--home .content {
  padding: 20px 26px 30px 26px;
} /* text at 167 */
.page--about .content {
  padding: 24px 26px 30px 32px;
  background-color: rgb(213, 216, 245);
} /* text at 173, 128 */
.page--services .content {
  padding: 24px 26px 30px 46px;
  background-color: rgb(213, 216, 245);
} /* text at 187, 128 */
.page--contact .content {
  padding-left: 51px;
  background-color: rgb(213, 216, 245);
} /* text at 192 */

.content p,
.content li,
.content dd,
.content dt,
.content address {
  font-weight: bold; /* the original sets nearly all copy bold */
}

.content p {
  margin: 0 0 15px;
}

.content a {
  color: var(--link);
  text-decoration: underline;
}

.content a:hover {
  color: var(--link-hover);
}

.content address {
  font-style: normal; /* the original address is upright, not italic */
  margin: 0;
}

.content img {
  display: block;
}

/* Measured wrap widths of the original text blocks. Figures are exempt —
   they are sized by the photograph, not by the measure. */
.page--about .content p:not(.photo) {
  max-width: 512px;
}
.page--services .content p:not(.photo) {
  max-width: 467px;
}
.page--services .content > p:not(.photo) {
  margin-bottom: 15px;
}
.page--services .content > p:not(.photo):last-of-type {
  margin-bottom: 0;
}

/* Practice / services lists ------------------------------------------------
   The original steps every line of these lists by a uniform 30px: a 15px line
   followed by 15px of space, so each line sits at the top of its band. Built
   from real margins rather than fixed heights, so the text still reflows and
   tolerates user spacing overrides. */
.practice-list,
.practice-list ul,
.practice-list li {
  margin: 0;
  line-height: 15px;
}

.practice-list {
  padding-left: 41px;
  list-style: disc;
} /* term at 208 */

.practice-list ul {
  padding-left: 10px;
  list-style: none;
} /* sub at 218 */

.practice-list > li {
  margin-bottom: 15px;
}

.practice-list > li:last-child {
  margin-bottom: 0;
}

.practice-list ul {
  margin-top: 15px;
}

.practice-list ul li + li {
  margin-top: 15px;
}

/* The original hard-breaks this line, leaving "a" alone on its own line.
   Reproduced at desktop and dropped below, where the text reflows freely. */
.orig-break {
  display: inline;
}

/* Services "AREAS OF PRACTICE" -------------------------------------------
   Measured: one flat column of 15px rows starting at 742. The bullet sits at
   261 and the text column at 272; term rows indent their ">" to 285 and their
   label to 299, sub-rows indent to 322. The "Payment" and "Representing" rows
   carry no bullet and sit 13px further left — that is how the original renders,
   and it is reproduced here. */
.areas-of-practice {
  margin: 17px 0 0;
  padding-left: 85px;
} /* heading at 272, 697 */

.areas-of-practice__heading {
  margin: 0;
  font-size: 1em;
  font-weight: bold;
  line-height: 15px;
}

.areas-of-practice > p {
  margin: 0 0 15px;
  line-height: 15px;
} /* list starts at 742 */

.aop-list {
  margin: 0;
  padding: 0;
  list-style: circle; /* the browser's own marker, as on the original */
}

.aop-list li {
  margin: 0;
  line-height: 15px;
  font-weight: bold;
}

/* Empty spacer rows still need a line box so they occupy their 15px. */
.aop-list .aop-gap::before {
  content: "";
  display: inline-block;
}

/* The two rows the original leaves unbulleted. */
.aop-list .aop-flush {
  list-style: none;
}

.aop-list .mk {
  display: inline-block;
  width: 27px; /* ">" at 285, label at 299 */
  text-indent: 13px;
}

.aop-list .aop-flush .mk {
  width: 14px;
  text-indent: 0;
} /* ">" at 272, label at 286 */

.aop-list .aop-sub .mk {
  width: 50px;
  text-indent: 0;
} /* text at 322 */

/* Home: practice list beside the portrait --------------------------------- */
.home-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 24px;
}

.home-columns__text {
  flex: 1 1 260px;
  min-width: 0;
}
.home-columns__photo {
  flex: 0 0 auto;
  margin-right: 40px;
} /* photo at 454 */

.page--home .practice-list {
  margin-top: 11px;
} /* list at 135 */

/* Shared content pieces ---------------------------------------------------- */
.content .photo {
  margin: 0 0 15px;
}

/* Measured photo offsets relative to each page's text block. */
.page--about .photo {
  margin: 0 0 37px 15px;
} /* photo at 188 */
.page--services .photo {
  margin: 37px 0 41px -11px;
} /* photo at 176, 202 */
.page--contact .photo {
  margin: -1px 0 39px -4px;
} /* photo at 188, 133 */

/* Measured: a 266px block at x=278, 16px type on a 19px line, with the quote
   set left and the attribution set right beneath it. */
.page--about .content p.pull-quote,
.page--about .content p.pull-quote-attribution {
  max-width: 266px;
  margin-left: 105px;
  font-size: 1rem;
  line-height: 19px;
  font-weight: bold;
}

.page--about .content p.pull-quote {
  margin-top: 0;
  margin-bottom: 0;
  text-align: left;
}

.page--about .content p.pull-quote-attribution {
  margin-top: 0;
  margin-bottom: 31px; /* photograph at 197 */
  text-align: right;
}

/* Services intro sits a size larger than the body copy on the original. */
.page--services .content > p:first-of-type {
  font-size: 1rem; /* measured: 16px */
  line-height: 19px; /* measured */
  max-width: 520px;
  margin-top: -1px; /* measured: first line at 128 */
  margin-left: -1px; /* measured: intro sits at 186, body at 187 */
}

/* Home address block and licence line ------------------------------------- */
.content .home-address {
  padding-left: 172px;
} /* measured: 339 */ /* measured: address at 338 */

.content .license-line {
  max-width: 371px; /* wraps "1983" as the original does */
  margin: 25px 0 22px; /* licence at 527, disclaimer at 579 */
  padding-left: 126px; /* measured: 293, 527 */
}

.content .disclaimer {
  margin: 0;
  max-width: 513px;
} /* measured: 167, 579 */

/* Contact details ---------------------------------------------------------
   Label and value share a line, as on the original, at a larger size. */
.contact-details {
  display: grid;
  grid-template-columns: minmax(5rem, max-content) 1fr;
  column-gap: 3px;
  margin: 0;
  font-size: 1rem; /* measured: 16px */
  line-height: 19px; /* measured */
}

.contact-details dt,
.contact-details dd {
  margin: 0;
  padding: 0;
}

/* One blank line before the Phone group and before Directions. */
.contact-details dt:nth-of-type(2),
.contact-details dd:nth-of-type(2),
.contact-details dt:nth-of-type(5),
.contact-details dd:nth-of-type(5) {
  margin-top: 19px;
}

/* Measured per-line offsets. The original pads these values with literal
   spaces, so no two lines start at quite the same place; each figure below is
   read off the original's rendered pixels. All of it is reset under 640px. */
.contact-details .ind-2 {
  margin-left: -2px;
} /* 277 */
.contact-details .ind-3 {
  margin-left: 3px;
} /* 281 */

.contact-details dd:nth-of-type(2) {
  margin-left: -6px;
} /* phone at 273 */

/* The original indents the e-mail value less than the others. */
.contact-details dd:nth-of-type(4) {
  margin-left: -24px;
}

/* Directions is set on a 38px line, where every other value uses 19px. */
.contact-details dd:nth-of-type(5) {
  margin-top: 8px; /* first line at 706 */
  margin-left: -1px; /* 278 */
  line-height: 38px;
}

.contact-details .dir-2 {
  margin-left: 30px;
} /* 307 */
.contact-details .dir-3 {
  margin-left: 25px;
} /* 303 */

/* The e-mail address is set at body size on the original. */
.contact-details a[href^="mailto:"] {
  font-size: 0.75rem;
  font-weight: normal;
}

/* Download link is centred over the photograph above it. */
.content .download-link {
  max-width: 486px;
  margin: 0 0 30px -7px;
  text-align: center;
  font-weight: normal; /* measured: the original sets this link light */
}

.content .download-link a {
  font-weight: normal;
}

/* --------------------------------------------------------------------------
   7. Responsive — reflow to 320px with no horizontal scrolling (WCAG 1.4.10)
   Every measured desktop offset is released here so nothing can overflow.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .masthead,
  .masthead--home {
    align-items: center;
    min-height: 0;
    padding: 1rem;
  }

  .page-title {
    font-size: clamp(1.15rem, 5.5vw, 1.5rem);
  }

  .masthead--home .page-title {
    max-width: none;
  }

  .masthead--home .firm-name {
    white-space: normal;
  }

  /* Single column: the nav becomes a stacked row of the same blue buttons
     above the content, and the tall sidebar graphic is dropped. */
  .layout {
    display: block;
  }

  .sidebar {
    background-image: none;
    padding: 0.25rem 1rem 0.75rem;
  }

  .nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .nav-list li {
    flex: 1 1 8.5rem;
    margin-bottom: 0;
  }

  .nav-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* comfortable tap target on touch screens */
    line-height: 1.2;
    font-size: 0.8125rem;
  }

  .page--home .content,
  .page--about .content,
  .page--services .content,
  .page--contact .content {
    padding: 1.25rem 1rem;
  }

  .content p {
    max-width: none;
  }

  .page--services .content > p:first-of-type {
    max-width: none;
    line-height: 1.35;
  }

  .orig-break {
    display: none;
  }

  /* Two-column sections stack. */
  .home-columns {
    display: block;
  }

  .home-columns__photo {
    margin: 1rem 0 0;
  }

  .home-columns__photo img,
  .photo img {
    margin-inline: auto;
  }

  .page--about .content .photo,
  .page--services .content .photo,
  .page--contact .content .photo {
    margin: 0 0 1rem;
  }

  .content .home-address,
  .content .license-line {
    padding-left: 0;
  }

  .content .license-line {
    margin: 1rem 0;
  }

  .content .disclaimer {
    max-width: none;
  }

  .areas-of-practice {
    margin-top: 1rem;
    padding-left: 0.75rem;
  }

  .practice-list {
    padding-left: 1.15rem;
  }

  /* Services list: drop the original's empty spacer rows and its wide
     desktop indents; keep the hollow bullets and the ">" markers. */
  .aop-list {
    padding-left: 1.15rem;
  }

  .aop-list li {
    margin-bottom: 0.4rem;
  }

  .aop-list .aop-gap {
    display: none;
  }

  .aop-list .aop-flush {
    list-style: circle;
  }

  .aop-list .mk {
    width: auto;
    text-indent: 0;
    margin-right: 0.35em;
  }

  .aop-list .aop-sub .mk {
    width: 1.25rem;
    margin-right: 0;
  }

  /* Contact details stack rather than sitting in two columns. */
  .contact-details {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.35;
  }

  .contact-details dt {
    margin-top: 0.8rem;
  }

  .contact-details dt:nth-of-type(1) {
    margin-top: 0;
  }

  .contact-details dd {
    margin-top: 0.15rem;
  }

  .contact-details dt:nth-of-type(2),
  .contact-details dd:nth-of-type(2),
  .contact-details dt:nth-of-type(5),
  .contact-details dd:nth-of-type(5) {
    margin-top: 0.8rem;
  }

  .contact-details dd:nth-of-type(2),
  .contact-details dd:nth-of-type(5) {
    margin-top: 0.15rem;
  }

  /* Release every measured desktop offset. */
  .contact-details dd,
  .contact-details .ind-2,
  .contact-details .ind-3,
  .contact-details .dir-2,
  .contact-details .dir-3 {
    margin-left: 0;
  }

  .contact-details dd:nth-of-type(5) {
    line-height: 1.35;
  }

  .content .download-link {
    max-width: none;
    margin: 0 0 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   8. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .skip-link,
  .sidebar {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  .masthead {
    background-image: none;
  }
}