/* National Park - ExtraLight */
@font-face {
    font-family: 'National Park';
    src: url(/assets/national_parks/woff2/NationalPark-ExtraLight-794015272f1a499e45a957594de0a2606d3cc14beaec13eb52e7bc29cc8a5578.woff2) format('woff2'),
    url(/assets/national_parks/woff/NationalPark-ExtraLight-681932fe7b8ed1d253c96fccd4babf0e32c9ad1e770bbd9c5d011cf25a03cffc.woff) format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* National Park - Light */
@font-face {
    font-family: 'National Park';
    src: url(/assets/national_parks/woff2/NationalPark-Light-bf43717e21075b40d5ea658a2c88de35f596e4e0231244abf06f448aa4f4a904.woff2) format('woff2'),
    url(/assets/national_parks/woff/NationalPark-Light-83ec7fdef0373e3091bcfd03656f78b348d4224826c8f6eb2013150863458cca.woff) format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* National Park - Regular */
@font-face {
    font-family: 'National Park';
    src: url(/assets/national_parks/woff2/NationalPark-Regular-2868e371640dfc6830d836b2ad66fe2b399fc60ead7878306c0230aae585df0b.woff2) format('woff2'),
    url(/assets/national_parks/woff/NationalPark-Regular-a12882547fd346a4f549ec207978ece2ff20feb43f14ee9e3391afd9e8d78078.woff) format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* National Park - Medium */
@font-face {
    font-family: 'National Park';
    src: url(/assets/national_parks/woff2/NationalPark-Medium-bd1c3a7e235e799184997428955c038a5d1052c5341f1adea6c9a95d027a35e6.woff2) format('woff2'),
    url(/assets/national_parks/woff/NationalPark-Medium-5e40013934d68599510ddcc00bdaadd786ef199b9eb552c29eb6f6525374ca2f.woff) format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* National Park - SemiBold */
@font-face {
    font-family: 'National Park';
    src: url(/assets/national_parks/woff2/NationalPark-SemiBold-ba3a2038d9e43f215c98ddad12fbe054497394e3c6fdd2b4ed412d505f5a20e1.woff2) format('woff2'),
    url(/assets/national_parks/woff/NationalPark-SemiBold-64a6ed7584b231308aad40484494acbb5623aeb1ece47c1f41c70c6267bc496c.woff) format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* National Park - Bold */
@font-face {
    font-family: 'National Park';
    src: url(/assets/national_parks/woff2/NationalPark-Bold-42cf11e1b08ae16007fa67f59c872b7c42aaed7f19fffffcff6631b31dd2661c.woff2) format('woff2'),
    url(/assets/national_parks/woff/NationalPark-Bold-eb3cd4035cb7d6f30b5d29c5955556e4eb4b0aa5b8d1d2ae0b9c6b37ff340b05.woff) format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* National Park - ExtraBold */
@font-face {
    font-family: 'National Park';
    src: url(/assets/national_parks/woff2/NationalPark-ExtraBold-165ef5349d90090056c591dfa7186b5067671df516da7012da0109db554b8519.woff2) format('woff2'),
    url(/assets/national_parks/woff/NationalPark-ExtraBold-d12955e7f018c71ffb592bfb5606dd3f8e555414ed03477d3ad58b2bf76c8175.woff) format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

@import "fonts";

body {
    margin: 0;
    height: 100vh;
    background-image: url(/assets/redwoodtrees-5a024f3975d71ff2e88fe1eff285a7b297288e127172ec06d60c26fcc0d78c56.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'National Park', serif;
}

.sign-container {
    display: flex;
    border: 6px solid #1b140a;
    border-radius: 6px;
    box-shadow:
            inset 0 0 0 2px #5c4123,
            0 4px 15px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    background-color: transparent; /* remove shared background, delegate to children */
    max-width: 900px;
    width: 90%;
}

.sign-main {
    background-color: #3a2b1a;
    color: #fef8e2;
    padding: 2.5rem 3rem;
    font-size: 2rem;
    line-height: 1.4;
    white-space: pre-line;
    font-weight: 500;
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sign-nav {
    background-color: #2c2114;
    padding: 2rem 1.5rem;
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sign-logo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tall-tree {
    background: linear-gradient(to bottom, #c25a27, #e9a34d);
    border: 3px solid #61190e;
    padding: 1rem 0.5rem;
    font-size: 2.5rem;
    width: 60px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: #2f1500;
    font-weight: bold;
    border-radius: 3px;
    text-decoration: none;
    transition: transform 0.1s ease;
}

.tall-tree:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.badge-row {
    display: flex;
    gap: 0.5rem;
}

.badge {
    width: 40px;
    height: 40px;
    background-color: #cfcfcf;
    border-radius: 50%;
    border: 2px solid #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease;
    text-decoration: none;
    padding: 0;
}

.badge:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.hotdog-icon {
    width: 24px;
    height: 24px;
    fill: #5c4123;
}

.person-hiking-icon {
    width: 24px;
    height: 24px;
    fill: #5c4123;
}

/* 🎯 New form styles inside the sign */
form.nps-form {
    margin-top: 1.5rem;
    font-size: 1rem;
}

form.nps-form label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: bold;
    color: #fef8e2;
}

form.nps-form input,
form.nps-form textarea,
form.nps-form select {
    background-color: #fef8e2;
    color: #2a1f14;
    border: 1px solid #8a7352;
    border-radius: 4px;
    padding: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
    font-family: Georgia, serif;
}

form.nps-form button {
    background-color: #c25a27;
    color: #fffef6;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-family: inherit;
}

form.nps-form button:hover {
    background-color: #a9471d;
}