/* =========================================================
   BUEN PHYSICAL THERAPY
   Main stylesheet
   ========================================================= */


/* ================= COLORS ================= */

:root {
  --green: #315844;
  --green-dark: #203d2d;

  --red: #9b3d32;

  --bg: #F3F0E6;
  --panel: #E8E5D9;

  --border: #C9C5B8;
  --border-dark: #AAA596;

  --sub: #66645D;
}


/* ================= BASIC RESET ================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: #292A26;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 14px;
  line-height: 1.6;
}

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


/* ================= MAIN WRAPPER ================= */

.wrap {
  max-width: 900px;

  margin: 0 auto;

  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);

  background: var(--bg);
}


/* ================= HEADER ================= */

.masthead {
  background: var(--green);

  color: #EDE9DA;

  border-bottom: 3px solid var(--red);

  padding: 14px 20px;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  flex-wrap: wrap;

  gap: 10px;
}

.masthead h1 {
  color: #fff;

  font-size: 24px;

  margin: 0;

  letter-spacing: 0.5px;
}

.masthead .tagline {
  font-style: italic;

  color: #CFE0D6;

  font-size: 12px;

  margin-top: 2px;
}

.masthead .contact {
  text-align: right;

  font-size: 12px;

  color: #EDE9DA;

  line-height: 1.5;
}

.masthead .contact strong {
  color: #fff;
}


/* ================= NAVIGATION ================= */

.nav {
  background: var(--panel);

  border-bottom: 1px solid var(--border-dark);

  padding: 0;

  display: flex;

  flex-wrap: wrap;
}

.nav a {
  display: block;

  padding: 8px 16px;

  border-right: 1px solid var(--border);

  color: var(--green-dark);

  text-decoration: none;

  font-size: 12px;

  font-weight: bold;

  letter-spacing: 0.3px;
}

.nav a:hover {
  background: var(--green);

  color: #fff;
}


/* ================= NOTICE BAR ================= */

.notice {
  margin: 16px 20px 0 20px;

  border: 1px solid var(--border-dark);

  background: #FBF8EE;

  padding: 8px 12px;

  font-size: 12px;
}

.notice .label {
  color: var(--red);

  font-weight: bold;

  margin-right: 6px;
}


/* ================= HERO ================= */

.hero {
  padding: 26px 20px 10px 20px;

  border-bottom: 1px solid var(--border);
}

.hero h2 {
  font-size: 22px;

  line-height: 1.35;

  margin-top: 0;

  margin-bottom: 10px;
}

.hero .lede {
  max-width: 520px;

  color: var(--sub);

  font-size: 13px;
}


/* ================= CONTENT GRID ================= */

.content {
  display: grid;

  grid-template-columns: 2fr 1fr;

  gap: 0;
}


/* ================= MAIN COLUMN ================= */

.main {
  padding: 20px;

  border-right: 1px solid var(--border);
}


/* ================= CONTENT BOXES ================= */

.box {
  border: 1px solid var(--border-dark);

  background: #FBF8EE;

  padding: 14px 16px;

  margin-bottom: 18px;
}

.box h3 {
  font-size: 14px;

  border-bottom: 1px solid var(--border);

  padding-bottom: 6px;

  margin-top: 0;

  margin-bottom: 10px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  color: var(--red);
}

.box p {
  margin: 0 0 10px 0;
}

.box p:last-child {
  margin-bottom: 0;
}


/* ================= BUTTON ================= */

.cta {
  display: inline-block;

  margin-top: 6px;

  padding: 8px 14px;

  background: var(--green);

  color: #fff;

  text-decoration: none;

  font-size: 12px;

  font-weight: bold;

  border: 1px solid var(--green-dark);
}

.cta:hover {
  background: var(--green-dark);
}


/* ================= SIDEBAR ================= */

.sidebar {
  padding: 20px;

  background: var(--panel);
}

.sidebar .box {
  background: #F6F4EC;
}

.sidebar ul {
  margin: 0;

  padding-left: 18px;
}

.sidebar li {
  margin-bottom: 6px;

  list-style-type: square;
}

.sidebar li::marker {
  color: var(--red);
}


/* ================= STAFF ================= */

.staff {
  border-top: 1px solid var(--border);

  padding: 18px 20px;

  background: #FBF8EE;
}

.staff h3 {
  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  color: var(--red);

  margin-top: 0;

  margin-bottom: 10px;
}

.staff-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 14px;
}

.staff-card {
  border: 1px solid var(--border);

  padding: 10px 12px;

  background: var(--bg);
}

.staff-card .name {
  font-weight: bold;

  color: var(--green-dark);

  font-size: 12px;
}

.staff-card .cred {
  font-size: 11px;

  color: var(--sub);

  margin-bottom: 4px;
}


/* ================= FOOTER ================= */

.footer {
  background: var(--green-dark);

  color: #C9D6CD;

  padding: 14px 20px;

  font-size: 11px;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 6px;
}

.footer a {
  color: #E7DCCB;
}


/* ================= DIVIDER ================= */

hr.rule {
  border: none;

  border-top: 1px solid var(--border);

  margin: 18px 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .wrap {
    border-left: none;
    border-right: none;
  }

  .masthead {
    padding: 16px;
  }

  .masthead h1 {
    font-size: 21px;
  }

  .masthead .contact {
    text-align: left;
  }

  .nav a {
    padding: 9px 12px;
  }

  .notice {
    margin-left: 16px;
    margin-right: 16px;
  }

  .hero {
    padding: 22px 16px 10px 16px;
  }

  .content {
    grid-template-columns: 1fr;
  }

  .main {
    padding: 16px;

    border-right: none;
  }

  .sidebar {
    padding: 16px;
  }

  .staff {
    padding: 18px 16px;
  }

  .staff-grid {
    grid-template-columns: 1fr;
  }

  .footer {
    padding: 14px 16px;
  }

}

/* ================= PHOTO GALLERY ================= */

.work-gallery {
  border-top: 1px solid var(--border);

  padding: 18px 20px;

  background: #FBF8EE;
}

.work-gallery h3 {
  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  color: var(--red);

  margin-top: 0;

  margin-bottom: 10px;
}

.photo-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 14px;
}

.photo-card {
  border: 1px solid var(--border);

  background: var(--bg);

  overflow: hidden;
}

.photo-card img {
  display: block;

  width: 100%;

  height: 220px;

  object-fit: cover;
}


/* Mobile */

@media (max-width: 640px) {

  .photo-grid {
    grid-template-columns: 1fr;
  }

  .photo-card img {
    height: auto;
  }

}