:root {
  /* colors - Dark theme matching Providence Health Centre */
  --background-color: #000000;
  --light-color: #1a1a1a;
  --dark-color: #0a0a0a;
  --text-color: #f0f0f0;
  --heading-color: #d4af37;
  /* Gold/tan accent for headings */
  --link-color: #d4af37;
  --link-hover-color: #c9a961;
  --section-alt-bg: #0d0d0d;
  /* Slightly lighter black for alternating sections */
  /* fonts - Matching Providence Health Centre */
  --body-font-family: "Source Sans 3", source-sans-fallback, "Proxima Nova",
      -apple-system, sans-serif;
  --heading-font-family: "Work Sans", work-sans-fallback, sans-serif;
  /* body sizes - Smaller to match Providence (14px base) */
  --body-font-size-m: 16px;
  --body-font-size-s: 15px;
  --body-font-size-xs: 14px;
  /* heading sizes - Matching Providence dimensions */
  --heading-font-size-xxl: 40px;
  /* H1 - matches Providence */
  --heading-font-size-xl: 33px;
  /* H2 large - Contact section */
  --heading-font-size-l: 28px;
  /* H2 - Vision, Mission, Values */
  --heading-font-size-ml: 30px;
  /* H3 - Address, Contact */
  --heading-font-size-m: 24px;
  /* H3 - Address, Contact */
  --heading-font-size-s: 22px;
  --heading-font-size-xs: 18px;
  /* nav height */
  --nav-height: 64px; }

/* fallback fonts */
@font-face {
  font-family: roboto-condensed-fallback;
  size-adjust: 88.82%;
  src: local("Arial"); }
@font-face {
  font-family: roboto-fallback;
  size-adjust: 99.529%;
  src: local("Arial"); }
@media (width >= 900px) {
  :root {
    /* body sizes - Keep smaller for Providence style */
    --body-font-size-m: 15px;
    --body-font-size-s: 14px;
    --body-font-size-xs: 13px;
    /* heading sizes - Scale down for desktop to match Providence */
    --heading-font-size-xxl: 60px;
    --heading-font-size-xl: 48px;
    --heading-font-size-l: 36px;
    --heading-font-size-m: 24px;
    --heading-font-size-s: 20px;
    --heading-font-size-xs: 18px; } }
body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: 1.6; }

body.appear {
  display: block; }

header {
  height: var(--nav-height); }

header .header,
footer .footer {
  visibility: hidden; }

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible; }

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  font-family: var(--heading-font-family);
  font-weight: 300;
  /* Light weight to match Providence ExtraLight/Light */
  line-height: 1.25;
  scroll-margin: 40px;
  color: var(--heading-color);
  /* Gold/tan color for headings */ }

h1 {
  font-size: var(--heading-font-size-xxl); }

h2 {
  font-size: var(--heading-font-size-l); }

h3 {
  font-size: var(--heading-font-size-l); }

h4 {
  font-size: var(--heading-font-size-m); }

h5 {
  font-size: var(--heading-font-size-s); }

h6 {
  font-size: var(--heading-font-size-xs); }

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em; }

li {
  margin-bottom: 0.8em; }

header li {
  margin-bottom: 0; }

code,
pre {
  font-size: var(--body-font-size-s); }

code {
  padding: 4px 8px;
  margin: 0 2px;
  border-radius: 4px;
  background-color: var(--light-color);
  border: 1px solid var(--link-color);
  color: var(--link-color);
  font-weight: 500; }

pre {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre; }

main > div {
  margin: 40px 16px; }

input,
textarea,
select,
button {
  font: inherit; }

/* links */
a:any-link {
  color: var(--link-color);
  text-decoration: none;
  overflow-wrap: break-word; }

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

/* buttons */
a.button:any-link,
button {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  margin: 12px 0;
  border: 2px solid transparent;
  border-radius: 2.4em;
  padding: 0.5em 1.2em;
  font-family: var(--body-font-family);
  font-style: normal;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  background-color: var(--link-color);
  color: var(--background-color);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

a.button:hover,
a.button:focus,
button:hover,
button:focus {
  background-color: var(--link-hover-color);
  cursor: pointer; }

button:disabled,
button:disabled:hover {
  background-color: var(--light-color);
  cursor: unset; }

a.button.secondary,
button.secondary {
  background-color: unset;
  border: 2px solid currentcolor;
  color: var(--text-color); }

main img {
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 8px 0; }

main p img {
  width: 100%;
  max-width: 500px; }

.icon {
  display: inline-block;
  height: 24px;
  width: 24px; }

.icon img {
  height: 100%;
  width: 100%; }

/* sections */
main > .section {
  margin: 40px 0; }

main > .section > div {
  max-width: 900px;
  margin: auto;
  padding: 0 24px; }

main > .section:first-of-type {
  margin-top: 0; }

@media (width >= 900px) {
  main > .section > div {
    padding: 0 32px; } }
/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
  margin: 0;
  padding: 40px 0; }

main .section.dark {
  background-color: var(--dark-color);
  margin: 0;
  padding: 40px 0; }