/* ==========================================================================
   R. David McDowell, Attorney at Law
   Design tokens carried over from the original Helix Ultimate / Joomla build.
   ========================================================================== */

:root {
  --blue: #0345bf;
  --blue-dark: #044cd0;
  --ink: #252525;
  --ink-soft: #5b5b5b;
  --footer-bg: #171717;
  --rule: #e6e6e6;
  --white: #fff;

  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  --container: 1140px;
  --header-h: 100px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 .5rem;
  line-height: 1.2;
}

p { margin: 0 0 1rem; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* The header and the interior page bodies ran wider than the home page
   sections on the original site (1240 vs 1140). */
.container--wide { max-width: 1240px; }

.lead { font-size: 1.333rem; line-height: 1.4; }
.text-center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Skip link ---------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: .75rem 1.25rem;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.site-logo { display: block; flex: 0 0 auto; }
.site-logo img { width: 100%; max-width: 383px; height: auto; }

/* Primary nav -------------------------------------------------------------- */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: .5rem;
  cursor: pointer;
  color: var(--blue);
}
.nav-toggle svg { width: 28px; height: 28px; display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.primary-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  font-size: 16px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  padding: .5rem 0;
  display: inline-block;
  border-bottom: 3px solid transparent;
}
.primary-nav a:hover { color: var(--blue-dark); }
.primary-nav a[aria-current="page"] { border-bottom-color: var(--blue); }

/* Dropdown ----------------------------------------------------------------- */
.has-dropdown { position: relative; }

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
  padding: .5rem 0;
  border-bottom: 3px solid transparent;
  font-family: var(--font-body);
}
.dropdown-toggle svg { width: 12px; height: 12px; transition: transform .2s; }
.dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.primary-nav .dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: .5rem 0;
  display: none;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}
.has-dropdown.open .primary-nav .dropdown,
.primary-nav .has-dropdown.open .dropdown { display: flex; }

.dropdown li { width: 100%; }
.dropdown a {
  display: block;
  padding: .6rem 1.25rem;
  border-bottom: 0;
  font-weight: 400;
  white-space: nowrap;
}
.dropdown a:hover { background: #f4f7ff; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  padding: .75rem 1.75rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color .15s ease;
}
.btn:hover { background: var(--blue-dark); color: var(--white); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding: 120px 0;
  background: #1c1c1c url("../images/rdm-hdr-reverse2.jpg") no-repeat 50% 50% / cover;
  color: var(--white);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .1);
}
.hero .container { position: relative; }

.hero h1 {
  font-size: 56px;
  line-height: 60px;
  margin: 0 0 20px;
  color: var(--white);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.hero p {
  font-size: 24px;
  line-height: 30px;
  font-weight: 300;
  max-width: 42ch;
  margin: 0 0 1.75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

/* Interior pages open with a plain heading on white, as the original did. */
.page-title {
  font-size: 36px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 16px;
}

/* ==========================================================================
   Practice-area cards
   ========================================================================== */

.section { padding: 60px 0; }
.section--tight { padding: 30px 0; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.area-card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: var(--white);
  background: #000;
}
/* Cards sit in an equal-height grid row, so the images must fill the cell
   rather than leaving a gap under the shorter one. */
.area-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease, opacity .3s ease;
}
.area-card:hover img { transform: scale(1.05); opacity: .8; }

.area-card .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 50px 20px;
  background: rgba(0, 0, 0, .5);
  transition: background-color .35s ease;
}
.area-card:hover .overlay { background: rgba(0, 0, 0, .35); }

.area-card .overlay h2 {
  color: var(--white);
  font-size: 42px;
  margin: 0 0 8px;
}
.area-card .overlay p {
  margin: 0;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.2;
}

/* ==========================================================================
   About
   ========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2.5rem;
  align-items: center;
}
.about-grid h2 { font-size: 42px; line-height: 1.2; margin-bottom: .5rem; }
.headshot img { width: 100%; }

/* ==========================================================================
   Common Law Live promo
   ========================================================================== */

.common-law {
  display: block;
  text-decoration: none;
  color: var(--white);
  background: var(--blue) url("../images/on-the-air.jpg") no-repeat left center / cover;
  background-blend-mode: multiply;
  padding: 24px;
}
.common-law .inner { max-width: 66%; margin-left: auto; }
.common-law h2 { color: var(--white); font-size: 42px; margin-bottom: .5rem; }
.common-law p { color: var(--white); font-size: 20px; line-height: 30px; }
.common-law p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Interior page content
   ========================================================================== */

.page-body { padding: 60px 0; }

.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: start;
}

.prose h2 { font-size: 30px; margin-top: 2rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.prose li { margin-bottom: .4rem; }
.prose ul ul { margin-top: .4rem; }

.callout {
  border-left: 4px solid var(--blue);
  background: #f4f7ff;
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
}
.callout p { margin: 0; }
.callout strong { font-weight: 700; }

/* Accordion ---------------------------------------------------------------- */
.accordion { border: 1px solid var(--rule); }
.accordion-item + .accordion-item { border-top: 1px solid var(--rule); }

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  background: none;
  border: 0;
  padding: 1rem 1.25rem;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
}
.accordion-trigger:hover { background: #f4f7ff; }
.accordion-trigger svg { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .2s; }
.accordion-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.accordion-panel { padding: 0 1.25rem 1rem; }
.accordion-panel[hidden] { display: none; }
.accordion-panel ul { margin: 0; padding-left: 1.25rem; }
.accordion-panel li { margin-bottom: .3rem; font-size: 16px; }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact {
  background: var(--blue);
  color: var(--white);
  padding: 40px 0 55px;
}
.contact h2 {
  color: var(--white);
  font-size: 42px;
  line-height: 1;
  margin-bottom: 15px;
}
.contact .subheading {
  font-size: 32px;
  line-height: 1.5;
  font-weight: 300;
  margin: 0 0 .5rem;
}
.contact .subheading a { color: var(--white); text-decoration: none; }
.contact .subheading a:hover { text-decoration: underline; }
.contact .lead { margin-bottom: 1.5rem; }

/* The form POSTs straight to the existing JotForm rather than embedding it in
   an iframe, so the fields sit directly on the blue band the way the original
   site had them (and there's no third-party branding bar). Field names and the
   action URL must match the JotForm definition exactly. */
.contact-form {
  max-width: 730px;
  margin-inline: auto;
  text-align: left;
}

.contact-form .field { margin-bottom: 1.25rem; }

.contact-form label,
.contact-form .label-text {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 9px;
}

.contact-form .req { color: #ffc9c9; }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  background: var(--white);
  color: #495057;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.contact-form textarea { min-height: 104px; resize: vertical; display: block; }

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .85);
  outline-offset: 2px;
}

/* Phone splits into area code + number, matching the JotForm field. */
.contact-form .phone-row { display: flex; align-items: flex-start; gap: .75rem; }
.contact-form .phone-part { flex: 1 1 0; min-width: 0; }
.contact-form .phone-dash { color: var(--white); line-height: 40px; flex: 0 0 auto; }

.contact-form .sub-label {
  font-size: 11px;
  font-weight: 400;
  color: var(--white);
  margin: 4px 0 0;
}

/* Honeypot: kept out of view without display:none, which bots skip. */
.contact-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Hidden target iframe the form posts into (created by js/main.js). It is a
   sibling of the form, so it needs its own rule rather than .contact-form .hp. */
.jf-sink {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  border: 0;
  overflow: hidden;
}

.contact-form .btn-submit {
  width: 100%;
  background: #28a745;
  color: var(--white);
  border: 1px solid #28a745;
  border-radius: 4px;
  padding: .5rem .75rem;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color .15s ease;
}
.contact-form .btn-submit:hover { background: #218838; border-color: #1e7e34; }
.contact-form .btn-submit[disabled] { opacity: .7; cursor: default; }

/* Replaces the form once a submission goes through. */
.form-thanks {
  max-width: 730px;
  margin-inline: auto;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 4px;
  background: rgba(255, 255, 255, .1);
}
.form-thanks:focus { outline: 3px solid rgba(255, 255, 255, .85); outline-offset: 2px; }
.form-thanks h3 { color: var(--white); font-size: 28px; margin-bottom: .5rem; }
.form-thanks p { color: var(--white); margin: 0; }
.form-thanks a { color: var(--white); font-weight: 700; }
.contact-form .btn-submit:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .85);
  outline-offset: 2px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--footer-bg);
  color: var(--white);
  padding: 55px 0 30px;
  font-size: 16px;
}
.site-footer h2 {
  color: var(--white);
  font-size: 32px;
  margin-bottom: 1.5rem;
}
.site-footer a { color: var(--white); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.footer-contact p { margin-bottom: 1.25rem; }
.footer-contact .icon { width: 16px; margin-right: .5rem; opacity: .75; }
.footer-contact .lead { font-size: 20px; }
.footer-contact a { text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }

.map-embed {
  width: 100%;
  height: 300px;
  border: 0;
  display: block;
}

.footer-legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: space-between;
}
.footer-legal p { margin: 0; max-width: 70ch; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
  .hero h1 { font-size: 44px; line-height: 1.1; }
  .hero p { font-size: 21px; line-height: 1.35; }
  .about-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .headshot { max-width: 340px; }
  .content-grid { grid-template-columns: 1fr; gap: 2rem; }
  .common-law .inner { max-width: 100%; }
  .area-card .overlay h2 { font-size: 32px; }
  .area-card .overlay p { font-size: 24px; }
}

@media (max-width: 767px) {
  :root { --header-h: 76px; }

  body { font-size: 17px; }

  .nav-toggle { display: block; }

  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--rule);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
    padding: .5rem 0 1rem;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .primary-nav.open { display: block; }

  .site-header .container { position: relative; flex-wrap: wrap; }
  .site-logo img { max-width: 240px; }

  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav > ul > li { border-bottom: 1px solid var(--rule); }
  .primary-nav > ul > li:last-child { border-bottom: 0; }
  .primary-nav a,
  .dropdown-toggle { padding: .9rem 20px; width: 100%; border-bottom: 0; }
  .primary-nav a[aria-current="page"] { border-bottom: 0; background: #f4f7ff; }
  .dropdown-toggle { justify-content: space-between; }

  .dropdown {
    position: static;
    transform: none;
    border: 0;
    box-shadow: none;
    background: #fafafa;
    padding: 0;
    min-width: 0;
  }
  .dropdown a { padding-left: 36px; }

  .hero { padding: 70px 0; }
  .hero h1 { font-size: 36px; }
  .hero p { font-size: 19px; max-width: none; }
  .hero--page { padding: 45px 0; }
  .hero--page h1 { font-size: 32px; }

  .btn { font-size: 18px; padding: .7rem 1.4rem; }

  .section { padding: 40px 0; }
  .card-grid { grid-template-columns: 1fr; }
  .area-card .overlay { padding: 30px 20px; }
  .area-card .overlay h2 { font-size: 28px; }
  .area-card .overlay p { font-size: 19px; }

  .common-law { padding: 24px 20px; background-position: 30% center; }
  .common-law h2,
  .about-grid h2,
  .contact h2 { font-size: 30px; }

  .contact .subheading { font-size: 26px; }
  .form-wrap iframe { min-height: 720px; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-legal { flex-direction: column; gap: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Print -------------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .common-law, .form-wrap, .map-embed { display: none; }
  body { font-size: 12pt; color: #000; }
  .hero { background: none; color: #000; padding: 0 0 1rem; }
  .hero h1 { color: #000; text-shadow: none; }
  .contact, .site-footer { background: none; color: #000; }
  .contact h2, .site-footer h2, .site-footer a, .contact .subheading a { color: #000; }
}