/* ==========================================================
   3W Studio - modern overrides (modern.css)
   Loaded after screen.css on every page.
   To undo everything: remove the <link ... modern.css> line
   from the pages.
   ========================================================== */

/* Barlow: a grotesk drawn from highway and wayfinding signage,
   a fitting voice for an ADA / construction consultancy. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --page:    #e8e9eb;   /* light concrete */
  --surface: #ffffff;
  --ink:     #2a2c30;
  --muted:   #5b5f67;
  --line:    #d5d8dc;
  --red:     #b3141b;   /* logo red */
  --red-dk:  #8f0f15;
  --green:   #2e7a31;   /* logo green */
}

/* ---------- Page: flat background, wider flexible layout ---------- */
html {
  background: var(--page) !important;
}

body {
  background: transparent !important;
  background-image: none !important;
  width: auto !important;          /* overrides the inline 1000px */
  max-width: 1180px;
  margin: 0 auto !important;
  padding: 0 20px 24px;
  box-sizing: border-box;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
}

/* Stop words being chopped mid-word ("t hanks", "First Nam e") */
body, body * {
  word-break: normal !important;
  overflow-wrap: break-word;
}

/* ---------- Type ---------- */
body, body p, body li, body td, body th, body a,
body div, body span, body label {
  font-family: 'Barlow', Arial, Helvetica, sans-serif;
}

input, textarea, select, button {
  font-family: inherit;
  font-size: 16px;                 /* 16px prevents zoom-on-focus on phones */
}

h1, h2, h3, h4 {
  font-family: 'Barlow', Arial, Helvetica, sans-serif !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

/* Section headings get a short red rule beneath, like a dimension line */
#main h2 {
  display: inline-block;
  font-size: 1.65rem;
  padding-bottom: 6px;
  margin-bottom: 14px;
  border-bottom: 3px solid var(--red);
}

#main h2 a {
  color: inherit !important;
  text-decoration: none !important;
}

#main h2 a:hover {
  color: var(--red) !important;
}

/* ---------- Content boxes: replace the bright blue borders ---------- */
#main {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.06);
  margin-bottom: 18px;
}

#main p, #main li, #main td {
  color: var(--ink);
}

/* Keep paragraphs to a comfortable reading width */
#main p {
  max-width: 85ch;
}

#main img {
  max-width: 100%;
  height: auto;
}

/* ---------- Links ---------- */
#main p a, #main td a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#main p a:hover, #main td a:hover {
  color: var(--red-dk);
}

/* Menu */
.sf-menu a {
  color: var(--ink);
}

.sf-menu a:hover,
.sf-menu li:hover > a {
  color: var(--red);
}

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="tel"],
textarea, select {
  border: 1px solid #bfc3c9;
  border-radius: 4px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  box-sizing: border-box;
}

input[type="text"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, textarea:focus, select:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--red);
}

input[type="submit"], button {
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 10px 22px;
  font-weight: 600;
  cursor: pointer;
}

input[type="submit"]:hover, button:hover {
  background: var(--red-dk);
}

input[type="submit"]:focus-visible, button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  body {
    padding: 0 10px 16px;
    font-size: 16px;
  }
  #main h2 {
    font-size: 1.35rem;
  }
}

/* Menu: no underline, larger text */
.sf-menu a { text-decoration: none !important; font-size: 17px !important; }
.sf-menu ul a { font-size: 16px !important; }
.sf-menu a i { font-size: 15px; }

/* Footer */
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 24px; font-size: 15px; line-height: 1.5; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .ft-card { display: flex; align-items: center; gap: 14px; }
.site-footer .ft-card img { display: block; width: 140px; height: 140px; background: #fff; }
.site-footer .ft-social { display: flex; gap: 12px; }
.site-footer .ft-social img { display: block; width: 28px; height: 28px; }
@media (max-width: 700px) { .site-footer .ft-card { display: none; } }