/* Open House Racine County - guide article pages (loaded only on these pages) */
.oh-guide{
  --oh-ink:#333333;
  --oh-brown:#593d2c;
  --oh-sky:#25aae2;
  --oh-deep:#005d84;
  --oh-aqua:#afe0e0;
  --oh-mist:#eef7f8;
  --oh-red:#b22222;
  color:var(--oh-ink);
  font-size:17px;
  line-height:1.7;
}
.oh-guide .container{padding:0 10px !important}

/* hero: photo with the title card overlapping its lower edge */
.oh-hero{padding:28px 0 8px}
.oh-hero__media{margin:0;border-radius:4px;overflow:hidden;background:var(--oh-mist)}
.oh-hero__media img{display:block;width:100%;height:auto;aspect-ratio:9/4;object-fit:cover}
.oh-hero__card{position:relative;margin:-120px 56px 0;padding:34px 44px 16px;background:#fff;border-top:5px solid var(--oh-sky);border-radius:0 0 4px 4px;box-shadow:0 14px 34px rgba(0,61,90,.14)}
.oh-guide h1{margin:0 0 18px;font-size:42px;line-height:1.15;font-weight:700;letter-spacing:-.01em;color:var(--oh-brown)}
.oh-guide .oh-lead{font-size:19px;line-height:1.65}

/* bands */
.oh-band{padding:56px 0}
.oh-band--mist{background:var(--oh-mist)}
.oh-band--deep{background:var(--oh-deep);color:#fff}
.oh-guide h2{margin:0 0 20px;font-size:29px;line-height:1.25;font-weight:700;color:var(--oh-deep)}
.oh-band--deep h2{color:#fff}
.oh-guide p{margin:0 0 18px}
.oh-band .container > :last-child,
.oh-hero__card > :last-child,
.oh-panel__card > :last-child{margin-bottom:0}
.oh-hero__card > p:last-child{margin-bottom:18px}

/* links inside the text */
.oh-guide p a:not(.btn),
.oh-guide li a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(89,61,44,.45)}
.oh-guide p a:not(.btn):hover,
.oh-guide li a:not(.btn):hover{text-decoration:underline;text-decoration-color:currentColor}
.oh-band--deep p a:not(.btn){color:#fff !important;text-decoration-color:rgba(255,255,255,.6)}
.oh-band--deep p a:not(.btn):hover{color:var(--oh-aqua) !important}
.oh-guide a:focus-visible{outline:2px solid var(--oh-sky);outline-offset:2px}

/* photo panel: text card overlapping a photo */
.oh-panel{position:relative}
.oh-panel__media{margin:0;border-radius:4px;overflow:hidden;background:#dfeff1}
.oh-panel__media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.oh-panel__card{position:relative;margin:-60px 16px 0;padding:28px 24px 22px;background:#fff;border-left:5px solid var(--oh-sky);border-radius:0 4px 4px 0;box-shadow:0 14px 34px rgba(0,61,90,.14)}

/* notes */
.oh-note{display:flex;gap:14px;align-items:flex-start;margin:0 0 18px;padding:16px 20px;background:var(--oh-mist);border-left:4px solid var(--oh-sky);border-radius:0 4px 4px 0}
.oh-note::before{content:"";flex:0 0 24px;height:24px;margin-top:3px;background:center/24px 24px no-repeat}
.oh-note p{margin:0}
.oh-note--info::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005d84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-5M12 8h.01'/%3E%3C/svg%3E")}
.oh-note--warn{background:#fbf0ee;border-left-color:var(--oh-red)}
.oh-note--warn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
.oh-band--deep .oh-note{background:rgba(255,255,255,.08);border-left-color:#fff}
.oh-band--deep .oh-note--warn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}

/* a paragraph set apart */
.oh-guide .oh-pull{margin-top:28px;padding:4px 0 4px 22px;border-left:4px solid var(--oh-sky);font-size:21px;line-height:1.6;color:var(--oh-brown)}

/* lists */
.oh-guide ul{margin:6px 0 24px;padding:0;list-style:none}
.oh-qlist{border-top:1px solid var(--oh-aqua)}
.oh-qlist li{position:relative;padding:15px 0 15px 46px;border-bottom:1px solid var(--oh-aqua);font-size:18px;line-height:1.55}
.oh-qlist li::before{content:"";position:absolute;left:0;top:13px;width:30px;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005d84' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E") center/30px 30px no-repeat}
.oh-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.oh-cards li{padding:20px 22px;background:var(--oh-mist);border-top:4px solid var(--oh-sky);border-radius:0 0 4px 4px;font-size:18px;line-height:1.55}
.oh-guide .oh-checks{padding:8px 28px;background:#fff;border:1px solid var(--oh-aqua);border-radius:4px}
.oh-checks li{position:relative;padding:14px 0 14px 44px;border-bottom:1px dashed var(--oh-aqua);font-size:18px;line-height:1.55}
.oh-checks li:last-child{border-bottom:0}
.oh-checks li::before{content:"";position:absolute;left:0;top:13px;width:28px;height:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005d84' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") center/28px 28px no-repeat}

@media (min-width:992px){
  .oh-panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
  .oh-panel__media{grid-column:1 / 8;grid-row:1}
  .oh-panel__media img{aspect-ratio:1/1}
  .oh-panel__card{grid-column:7 / 13;grid-row:1;margin:0;padding:40px 44px 34px}
  .oh-panel--right .oh-panel__media{grid-column:6 / 13}
  .oh-panel--right .oh-panel__card{grid-column:1 / 7;border-left:0;border-right:5px solid var(--oh-sky);border-radius:4px 0 0 4px}
}
@media (min-width:992px) and (max-width:1199px){
  .oh-panel__media img{aspect-ratio:4/5}
}
@media (min-width:768px) and (max-width:991px){
  .oh-hero__card{margin:-80px 32px 0}
  .oh-panel__card{margin:-70px 32px 0;padding:32px 36px 28px}
}
@media (max-width:767px){
  .oh-guide{font-size:16px}
  .oh-guide .container{padding:0 16px !important}
  .oh-hero{padding-top:16px}
  .oh-hero__media img{aspect-ratio:4/3}
  .oh-hero__card{margin:-40px 10px 0;padding:22px 20px 4px}
  .oh-guide h1{font-size:30px}
  .oh-guide .oh-lead{font-size:17px}
  .oh-band{padding:40px 0}
  .oh-guide h2{font-size:24px}
  .oh-panel__card{margin:-40px 10px 0;padding:24px 20px 20px}
  .oh-note{padding:14px 16px;gap:12px}
  .oh-guide .oh-pull{font-size:19px;padding-left:18px}
  .oh-qlist li,.oh-cards li,.oh-checks li{font-size:16px}
  .oh-qlist li{padding-left:42px}
  .oh-cards{grid-template-columns:1fr}
  .oh-guide .oh-checks{padding:4px 16px}
  .oh-checks li{padding-left:40px}
}

/* image framing on narrow screens */
.oh-guide img.oh-focus-left{object-position:35% 50%}

/* site header on these pages: no sideways scroll on phones */
.oh-guide-page .navbar > .container-fluid > .navbar-header,
.oh-guide-page .navbar > .container-fluid > .navbar-collapse{margin-left:0;margin-right:0}