/* Shared brand tokens and base styling.
 *
 * Derived from the Tree House Recovery TN wordmark (`logo.png`): the mark is a
 * single dark slate, #444c4d, set in a wide-tracked geometric sans with the
 * tagline letter-spaced underneath. Those two things -- the slate and the
 * tracking -- are what carry the identity here.
 *
 * The site itself is behind Cloudflare and its stylesheets could not be read,
 * so the greens and the paper tone are the ones this project already used in
 * `portal.css`, kept because they belong to the same outdoors register rather
 * than because they were sampled from the live site. Swap the three values
 * under "borrowed, not sampled" if you want an exact match.
 *
 * No build step and no framework, in keeping with the rest of `app/static`.
 */

:root {
  /* Sampled from the wordmark. */
  --slate: #444c4d;
  --slate-dark: #333a3b;

  /* Borrowed, not sampled. */
  --leaf: #2f6b4f;
  --leaf-dark: #24523d;
  --paper: #f7f5f0;

  --ink: #22292b;
  --surface: #ffffff;
  --line: #ddd8ce;
  --muted: #6b7671;
  --danger: #a3352b;

  --radius: 3px;
  --shadow: 0 1px 2px rgb(34 41 43 / 6%);

  /* The wordmark is geometric and wide-tracked; this is the closest the
     system stack gets without shipping a webfont. */
  --font-display: "Avenir Next", "Segoe UI", Inter, system-ui, sans-serif;
  --font-body: "Helvetica Neue", Arial, system-ui, sans-serif;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

h1 {
  font-size: 1.25rem;
}

h2 {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
}

a {
  color: var(--leaf-dark);
}

/* The masthead carries the wordmark itself rather than re-setting the name in
   a substitute typeface, which never quite matches. */
.brand-logo {
  display: block;
  height: 34px;
  width: auto;
}

/* thr-header.html's own inline style gives this section `padding: 4px 0 4px
   0` -- 4px above the logo and 4px below it before the bar's bottom edge and
   its box-shadow. Dropping only the bottom half brings the shadow up flush
   against the logo. `#masthead` gives this ID-level specificity, so it wins
   over the inline rule's three classes regardless of injection order. */
#masthead .elementor-element-e817b67 {
  padding-bottom: 0;
}

button {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--slate);
  border-radius: var(--radius);
  background: var(--slate);
  color: var(--paper);
  cursor: pointer;
}

button:hover:not(:disabled) {
  background: var(--slate-dark);
  border-color: var(--slate-dark);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The one action per screen that commits something. */
button[type="submit"] {
  background: var(--leaf);
  border-color: var(--leaf);
}

button[type="submit"]:hover:not(:disabled) {
  background: var(--leaf-dark);
  border-color: var(--leaf-dark);
}

input,
select,
textarea {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 2px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

th {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: var(--muted);
  text-align: left;
}

th,
td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* --- the hero, as the page background --------------------------------------
 * The same image the live site uses at the top of
 * /drug-rehab-in-tennessee/, fixed behind every page. A wash over it keeps
 * body text at a readable contrast -- the photograph is dark in places and
 * light in others, and clinical forms sit on top of it.
 */
body {
  /* No wash over it: the photograph shows as it does on the live site. The
     app's own panels carry solid backgrounds, so text contrast comes from the
     cards rather than from dulling the image. */
  background-image: url("./brand/tree-house-recovery-addiction-rehab-in-north-carolina.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

@media (max-width: 780px) {
  body {
    background-image: url("./brand/Hero-Moble.png");
    /* `fixed` is janky on mobile and iOS ignores it outright. */
    background-attachment: scroll;
  }
}

/* The injected chrome is theirs; the app's own content sits between the two. */
#thr-header,
#thr-footer {
  background: var(--surface);
}

.site-copyright {
  margin: 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* --- layout of the injected chrome -----------------------------------------
 * Applies on every page, including the ones that do not load `admin.css`.
 * The header and footer are full-bleed; only the app's own content is held to
 * a column. Constraining `body` instead squeezed their nav and wrapped it.
 */
body > #thr-header,
body > #thr-footer {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* `thr-footer.html` is stripped to the copyright line only -- the live
   site's footer verbatim (a map link, JCAHO/SAMHSA badges, a LegitScript
   stub) has been replaced, not left broken. `#thr-footer` is the flex
   container rather than the `<footer>` it wraps so the centering holds
   regardless of what that inner element is.
   Same selector, same specificity, as the `padding: 0` two rules up:
   placed after it, this is what decides the tie and gives the padding
   back. */
body > #thr-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 32px;
}