/* Arizona botanical gardens — page styles only. */

.az-botanical {
  --az-green: #174d41;
  --az-rust: #a33f25;
  --az-gold: #f3bc49;
  --az-ink: #263b33;
  --az-muted: #53625b;
  --az-line: #d8d8ca;
  background: #f8f6ef;
  color: var(--az-ink);
}

.az-botanical .wrap {
  max-width: 1240px;
}

.az-shell {
  width: min(1240px, calc(100% - 64px));
  margin: auto;
}

.az-botanical h1,
.az-botanical h2,
.az-botanical h3,
.az-garden-name {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.025em;
}

.az-botanical h2 {
  color: var(--az-green);
  font-size: clamp(1.9rem, 2.5vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 20px;
}

.az-botanical h3 {
  color: var(--az-green);
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 12px;
}

.az-botanical p {
  margin: 0 0 18px;
}

.az-botanical a {
  color: var(--az-green);
}

.az-botanical .az-eyebrow {
  display: block;
  margin: 0 0 13px;
  color: var(--az-rust);
  font-family: system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .15em;
  line-height: 1.5;
  text-transform: uppercase;
}

.az-botanical .site-header {
  border-top: 5px solid var(--az-rust);
  background: #fffdf6;
}

.az-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 22px 0;
  color: var(--az-muted);
  font-size: .75rem;
}

.az-breadcrumb a {
  text-decoration: none;
}

/* A compact image and a saturated editorial title panel. */
.az-hero {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: stretch;
  margin-bottom: 46px;
  background: var(--az-green);
  border-bottom: 7px solid var(--az-gold);
}

.az-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px;
  background: var(--az-rust);
  color: #fffaf0;
}

.az-hero-copy .az-eyebrow {
  color: #ffdb91;
}

.az-hero h1 {
  color: #fffaf0;
  font-size: clamp(2.6rem, 4.1vw, 3.85rem);
  line-height: 1.06;
  margin: 0 0 23px;
}

.az-hero h1 em {
  color: #ffdb91;
  font-weight: 400;
}

.az-hero-copy > p:last-child {
  max-width: 440px;
  margin-bottom: 0;
  font-size: .98rem;
  line-height: 1.7;
}

.az-hero-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  margin: 0;
}

.az-hero-image picture {
  display: block;
}

.az-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
}

.az-hero-image figcaption {
  padding: 9px 18px;
  color: #f5e8c9;
  font-size: .65rem;
  letter-spacing: .04em;
}

.az-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 42px;
  padding-bottom: 60px;
}

.az-main,
.az-sidebar {
  min-width: 0;
}

.az-intro {
  padding: 0 0 27px;
}

.az-intro p:not(.az-eyebrow) {
  color: var(--az-muted);
}

.az-section-head {
  border-top: 3px solid var(--az-rust);
  padding-top: 25px;
}

.az-section-head h2 {
  font-size: clamp(1.65rem, 2.3vw, 2.2rem);
}

.az-gardens {
  display: grid;
  gap: 13px;
}

/* Every garden starts closed. Each whole summary is the opening control. */
.az-garden {
  --garden-accent: #174d41;
  margin: 0;
  background: #fffdf8;
  border: 1px solid var(--az-line);
  border-left: 7px solid var(--garden-accent);
}

.az-garden:nth-child(2) {
  --garden-accent: #a33f25;
}

.az-garden:nth-child(3) {
  --garden-accent: #296576;
}

.az-garden:nth-child(4) {
  --garden-accent: #7d4a69;
}

.az-garden:nth-child(5) {
  --garden-accent: #626b2d;
}

.az-garden-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 26px;
  list-style: none;
  cursor: pointer;
}

.az-garden-summary::-webkit-details-marker {
  display: none;
}

.az-garden-summary::marker {
  content: "";
}

.az-garden-summary:hover {
  background: #f0ece0;
}

.az-garden-heading {
  display: block;
  min-width: 0;
}

.az-garden-summary .az-eyebrow {
  color: var(--garden-accent);
  margin-bottom: 6px;
}

.az-garden-name {
  display: block;
  color: var(--garden-accent);
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1.15;
}

.az-card-deck {
  display: block;
  margin-top: 9px;
  color: var(--az-muted);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.5;
}

.az-expand {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  background: var(--garden-accent);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
}

.az-expand::before {
  content: "+";
}

.az-garden[open] > summary {
  background: var(--garden-accent);
}

.az-garden[open] > summary .az-eyebrow {
  color: #ffe1a2;
}

.az-garden[open] > summary .az-garden-name,
.az-garden[open] > summary .az-card-deck {
  color: #fff;
}

.az-garden[open] .az-expand {
  background: #ffffff26;
}

.az-garden[open] .az-expand::before {
  content: "−";
}

.az-garden-body {
  padding: 27px;
  cursor: pointer;
}

.az-garden-body > p {
  font-size: .94rem;
  line-height: 1.8;
}

.az-family {
  padding: 0 0 0 17px;
  border-left: 4px solid var(--az-gold);
  margin: 23px 0;
}

.az-family strong {
  color: var(--az-rust);
  font-size: .82rem;
}

.az-family p,
.az-details p {
  margin: 6px 0 17px;
  color: var(--az-muted);
  font-size: .88rem;
}

.az-details {
  border-top: 1px solid var(--az-line);
  padding-top: 18px;
}

.az-official {
  display: inline-block;
  padding: 11px 15px;
  margin-top: 5px;
  background: var(--garden-accent);
  color: #fff !important;
  font-size: .8rem;
  font-weight: 650;
  text-decoration: none;
}

.az-official:hover {
  text-decoration: underline;
}

.az-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--az-line);
  margin-top: 24px;
  padding: 13px 0 0;
  background: none;
  color: var(--az-muted);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}

.az-source-note {
  padding-top: 18px;
  color: var(--az-muted);
  font-size: .73rem;
}

/* Sidebar navigation and a contrasting gold family note. */
.az-outings {
  padding: 30px 25px 17px;
  background: var(--az-green);
  border-top: 7px solid var(--az-gold);
}

.az-outings .az-eyebrow {
  color: #ffdb91;
}

.az-outings h2 {
  color: #fffaf0;
  font-size: 2.15rem;
}

.az-outings ul {
  list-style: none;
  margin: 25px 0 0;
  padding: 0;
}

.az-outings li {
  border-top: 1px solid #ffffff38;
}

.az-outings a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 0;
  color: #fff;
  font-size: .83rem;
  text-decoration: none;
}

.az-outings a:hover {
  color: #ffdb91;
  text-decoration: underline;
}

.az-side-note {
  margin: 23px 0;
  padding: 27px 24px;
  background: var(--az-gold);
}

.az-side-note .az-eyebrow {
  color: #653817;
}

.az-side-note h3 {
  color: #3c351d;
  font-size: 1.8rem;
}

.az-side-note p:last-child {
  margin: 0;
  color: #443d26;
  font-size: .88rem;
}

.az-faq {
  padding: 24px;
  background: #fffdf8;
  border-top: 4px solid var(--az-rust);
}

.az-faq h2 {
  font-size: 1.7rem;
}

.az-faq details {
  border-bottom: 1px solid var(--az-line);
}

.az-faq summary {
  padding: 14px 0;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.5;
  cursor: pointer;
}

.az-faq details p {
  color: var(--az-muted);
  font-size: .83rem;
  cursor: pointer;
}

.az-planning {
  margin-top: 36px;
  padding: 30px;
  background: var(--az-green);
  color: #fff;
}

.az-planning .az-eyebrow {
  color: #ffdb91;
}

.az-planning h2,
.az-planning h3 {
  color: #fffaf0;
}

.az-planning-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}

.az-planning h3 {
  padding-top: 16px;
  border-top: 2px solid var(--az-gold);
  font-size: 1.3rem;
}

.az-planning-grid p {
  color: #e8eee9;
  font-size: .87rem;
}

.az-next {
  padding-top: 28px;
  margin-top: 35px;
  border-top: 5px solid var(--az-rust);
}

.az-next p:not(.az-eyebrow) {
  color: var(--az-muted);
  font-size: .93rem;
}

.az-next a {
  color: var(--az-rust);
  font-weight: 650;
}

.az-botanical .site-footer {
  background: var(--az-green);
  color: #fff;
}

.az-botanical .site-footer a,
.az-botanical .site-footer p {
  color: #fff;
}

.az-botanical :focus-visible {
  outline: 3px solid #c77017;
  outline-offset: 4px;
}

@media (max-width: 1050px) {
  .az-layout {
    grid-template-columns: minmax(0, 1fr) 265px;
    gap: 26px;
  }

  .az-hero-copy {
    padding: 27px;
  }

  .az-hero h1 {
    font-size: 3rem;
  }
}

@media (max-width: 800px) {
  .az-shell {
    width: calc(100% - 36px);
  }

  .az-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .az-hero-copy {
    padding: 24px;
  }

  .az-hero h1 {
    font-size: 2.6rem;
  }

  .az-hero-copy > p:last-child {
    font-size: .86rem;
  }
}

@media (max-width: 700px) {
  .az-breadcrumb {
    padding: 16px 0;
    font-size: .68rem;
  }

  .az-hero {
    grid-template-columns: minmax(0, 1fr) 36%;
    margin-bottom: 29px;
    border-bottom-width: 5px;
  }

  .az-hero-copy {
    padding: 23px 17px;
  }

  .az-hero h1 {
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    margin-bottom: 15px;
  }

  .az-hero-copy .az-eyebrow {
    font-size: .6rem;
    letter-spacing: .08em;
  }

  .az-hero-copy > p:last-child {
    font-size: .8rem;
    line-height: 1.65;
  }

  .az-hero-image img {
    aspect-ratio: 706 / 941;
  }

  .az-hero-image figcaption {
    padding: 9px;
    font-size: .59rem;
  }

  .az-garden-summary {
    padding: 21px 16px;
    gap: 12px;
  }

  .az-garden-name {
    font-size: 1.5rem;
  }

  .az-card-deck {
    font-size: .75rem;
  }

  .az-expand {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }

  .az-garden-body {
    padding: 21px 19px;
  }

  .az-planning {
    padding: 25px 22px;
  }

  .az-planning-grid {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}