/* ==================================================================================================
   Hiking guide - fitting the supplied page to our chrome (the same split as the weather guide).

   hiking-guide.css arrived as a self-contained package and may be regenerated wholesale, so anything
   that exists only because of OUR site lives here, where a regeneration cannot silently drop it.
   ================================================================================================== */

/* The navbar floats over the page (position:absolute, 100px; 90px on phones), so the hero's content
   has to clear it rather than centre under it. */
#dle-hiking-guide .hg-hero-content {
    padding-top: 140px;
}
@media (max-width: 720px) {
    #dle-hiking-guide .hg-hero-content {
        padding-top: 120px;
    }
}

/* style.css sets a:hover { display: inline-block } for the whole site. On the guide's block-level
   links - the three quick-pick cards and the jump links - that makes a card change shape under the
   pointer. Hold their display on hover. */
#dle-hiking-guide .hg-picks > a,
#dle-hiking-guide .hg-picks > a:hover {
    display: block;
}
#dle-hiking-guide .hg-button:hover {
    display: inline-block;
}

/* style.css sets button:hover { border: 0 }, which makes the filter's Reset button jump by a pixel. */
#dle-hiking-guide button:hover {
    border: 1px solid #aa8453;
}

/* Text inputs and selects pick up a 15px bottom margin site-wide. */
#dle-hiking-guide select {
    margin-bottom: 0;
}

/* The hero, matched to the site's standard banner (.banner-header in style.css) so the guide does not
   look like a different site: 40vh tall (the short banner), a 15px white Barlow Condensed kicker spaced at 6px, a 60px
   Gilda headline (45px on phones) on one line, and the subtitle at the size the article pages use
   for theirs. The supplied styles had the headline at up to 78px, forced onto two lines. */
#dle-hiking-guide .hg-hero {
    min-height: 40vh;           /* the short banner other guide pages use (.short-display) */
}
#dle-hiking-guide .hg-hero-content {
    padding-bottom: 40px;
}
#dle-hiking-guide .hg-hero .hg-kicker {
    font: 400 15px/1.25 'Barlow Condensed', sans-serif;
    letter-spacing: 6px;
    color: #fff;
    margin: 0 0 10px;
}
#dle-hiking-guide .hg-hero h1 {
    font-size: 60px;
    line-height: 1.25em;
    margin: 0 0 12px;
    color: #fff;
}
#dle-hiking-guide .hg-hero-content p:not(.hg-kicker) {
    max-width: none;
    margin: 0 0 26px;
    font: 300 clamp(16px, 1.5vw, 21px)/1.4 'Barlow', sans-serif;
    color: rgba(255, 255, 255, .82);
}
@media (max-width: 767px) {
    /* Phones: centred, as every other banner on the site is at this width. */
    #dle-hiking-guide .hg-hero-content {
        text-align: center;
    }
    #dle-hiking-guide .hg-hero h1 {
        font-size: 45px;
    }
}

/* Link arrows: the drawn hairline used on the concierge and homeowner pages, in place of the "->"
   and diagonal characters the package used. Takes each link's colour; lengthens on hover. */
#dle-hiking-guide .hg-arrow {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 1px;
    margin-left: 4px;
    background: currentColor;
    vertical-align: middle;
    transition: width .25s ease;
}
#dle-hiking-guide .hg-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
#dle-hiking-guide a:hover .hg-arrow {
    width: 32px;
}
/* The package styles every span in a quick-pick card as a block label; the arrow is not one. */
#dle-hiking-guide .hg-picks .hg-arrow {
    display: inline-block;
    margin: 0 0 0 4px;
}