/* ==========================================================================
   ThisIsOsaka! Hikes - scoped styles for the standalone trail programme.
   --------------------------------------------------------------------------
   Earthy palette: forest pine, trail charcoal, topo sand, safety orange.
   Every rule is scoped to #hikes except the shared .hike-blaze size, which the
   page header uses too. No new font, image or library is loaded.
   Linked by hiking/index.html only; the root index.html no longer carries it.
   ========================================================================== */

#hikes {
    --hike-pine: #173a2c;
    --hike-pine-deep: #0f261d;
    --hike-charcoal: #2a2a24;
    --hike-sand: #f4efe2;
    --hike-sand-deep: #e9e1cd;
    --hike-orange: #e8621a;
    --hike-orange-deep: #c44e0d;
    --hike-line: rgba(23, 58, 44, 0.16);
    position: relative;
    overflow: hidden;
    background-color: var(--hike-sand);
    color: var(--hike-charcoal);
    border-top: 6px solid var(--hike-orange);
    scroll-margin-top: 5.5rem;
}
/* Subtle topographic rings - pure CSS, no image request. */
#hikes .hike-topo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.9;
    background-image:
        repeating-radial-gradient(circle at 12% 18%, rgba(23, 58, 44, 0.10) 0 1px, transparent 1px 15px),
        repeating-radial-gradient(circle at 88% 6%, rgba(23, 58, 44, 0.08) 0 1px, transparent 1px 17px),
        repeating-radial-gradient(circle at 72% 92%, rgba(232, 98, 26, 0.10) 0 1px, transparent 1px 19px);
}
#hikes .hike-shell { position: relative; z-index: 1; }
#hikes .hike-anchor { scroll-margin-top: 5.5rem; }
/* Also used by the page header, outside #hikes, so this one is unscoped. */
.hike-blaze { width: 1.1rem; height: 1.5rem; flex: none; }
#hikes .hike-eyebrow {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #4d5f53;
}
#hikes .hike-panel {
    background: rgba(255, 253, 247, 0.92);
    border: 1px solid var(--hike-line);
    border-radius: 1rem;
}
#hikes :focus-visible {
    outline: 3px solid var(--hike-orange);
    outline-offset: 2px;
}

/* --- Grade + gear badges --------------------------------------------- */
#hikes .hike-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
#hikes .hike-badge--easy { background: #dcecdd; color: #14532d; border-color: #b7d6ba; }
#hikes .hike-badge--moderate { background: #f5e2b8; color: #5a3806; border-color: #e3c98d; }
#hikes .hike-badge--strenuous { background: var(--hike-orange); color: #1a1206; border-color: var(--hike-orange-deep); }
#hikes .hike-badge--region { background: transparent; color: #3f4f44; border-color: var(--hike-line); }
#hikes .hike-badge--gear {
    background: #eef0e6;
    color: #33453a;
    border-color: #d8ddc9;
    letter-spacing: 0;
    text-transform: none;
}

/* --- Buttons, segmented control, filter chips ------------------------- */
#hikes .hike-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 0.95rem;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#hikes .hike-btn--orange {
    background: var(--hike-orange);
    color: #1a1206;
    box-shadow: 0 8px 18px -12px rgba(196, 78, 13, 0.95);
}
#hikes .hike-btn--orange:hover { background: #f2742c; }
#hikes .hike-btn--pine { background: var(--hike-pine); color: var(--hike-sand); }
#hikes .hike-btn--pine:hover { background: var(--hike-pine-deep); }
#hikes .hike-btn--ghost { background: transparent; color: var(--hike-pine); border-color: var(--hike-line); }
#hikes .hike-btn--ghost:hover { background: rgba(23, 58, 44, 0.07); border-color: var(--hike-pine); }

#hikes .hike-seg {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgba(255, 253, 247, 0.9);
    border: 1px solid var(--hike-line);
    border-radius: 0.8rem;
}
#hikes .hike-seg button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.6rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: #3f4f44;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
#hikes .hike-seg button:hover { background: rgba(23, 58, 44, 0.07); }
#hikes .hike-seg button[aria-pressed="true"] { background: var(--hike-pine); color: var(--hike-sand); }

#hikes .hike-chip {
    padding: 0.32rem 0.68rem;
    border: 1px solid var(--hike-line);
    border-radius: 999px;
    background: #fffdf7;
    color: #33453a;
    font-size: 0.68rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#hikes .hike-chip:hover { border-color: var(--hike-pine); }
#hikes .hike-chip[aria-pressed="true"] {
    background: var(--hike-pine);
    border-color: var(--hike-pine);
    color: var(--hike-sand);
}
#hikes .hike-filter-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4d5f53;
}
#hikes .hike-select {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--hike-line);
    border-radius: 0.55rem;
    background: #fffdf7;
    color: #26332b;
    font-size: 0.72rem;
    font-weight: 700;
}
/* --- Hike cards ------------------------------------------------------- */
#hikes .hike-card {
    background: #fffdf7;
    border: 1px solid var(--hike-line);
    border-left: 5px solid var(--hike-pine);
    border-radius: 1rem;
    box-shadow: 0 1px 0 rgba(23, 58, 44, 0.05), 0 14px 28px -24px rgba(15, 38, 29, 0.75);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
#hikes .hike-card:hover {
    border-left-color: var(--hike-orange);
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -24px rgba(15, 38, 29, 0.65);
}
#hikes .hike-card.is-highlighted {
    border-left-color: var(--hike-orange);
    animation: hike-pulse 2.4s ease-out 1;
}
@keyframes hike-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 98, 26, 0); }
    15% { box-shadow: 0 0 0 4px rgba(232, 98, 26, 0.45); }
    55% { box-shadow: 0 0 0 4px rgba(232, 98, 26, 0.18); }
}
#hikes .hike-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    flex: none;
    width: 4.4rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.8rem;
    background: var(--hike-pine);
    color: var(--hike-sand);
    text-align: center;
}
#hikes .hike-date .m { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.16em; color: #cfe1d5; }
#hikes .hike-date .d { font-size: 1.55rem; font-weight: 900; line-height: 1; }
#hikes .hike-date .w { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.14em; color: #cfe1d5; }

#hikes .hike-title {
    margin-top: 0.4rem;
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.3;
    color: var(--hike-pine-deep);
}
#hikes .hike-title--sm { font-size: 0.92rem; }
#hikes .hike-meta { font-size: 0.68rem; font-weight: 700; color: #46564c; }
#hikes .hike-meet {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #2f3d33;
}
#hikes .hike-meet i { margin-top: 0.15rem; color: var(--hike-pine); }
#hikes .hike-station { color: #46564c; font-weight: 700; }
#hikes .hike-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.75rem;
}
#hikes .hike-spec {
    padding: 0.4rem 0.35rem;
    border-radius: 0.55rem;
    background: #eef0e6;
    text-align: center;
}
#hikes .hike-spec dt {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #55665a;
}
#hikes .hike-spec dd { margin-top: 0.1rem; font-size: 0.78rem; font-weight: 900; color: #223026; }
#hikes .hike-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.7rem; }
#hikes .hike-details {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--hike-line);
}
#hikes .hike-details summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hike-pine);
}
#hikes .hike-details summary::-webkit-details-marker { display: none; }
#hikes .hike-details summary::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid var(--hike-line);
    border-radius: 0.3rem;
    background: #eef0e6;
    font-size: 0.72rem;
    line-height: 1;
}
#hikes .hike-details[open] summary::before { content: "\2013"; }
#hikes .hike-note { margin-top: 0.45rem; font-size: 0.75rem; line-height: 1.6; color: #3a493f; }
/* --- Month grid ------------------------------------------------------- */
#hikes .hike-cal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid var(--hike-line);
    border-radius: 0.6rem;
    background: #fffdf7;
    color: var(--hike-pine);
    cursor: pointer;
}
#hikes .hike-cal-nav:hover:not(:disabled) { border-color: var(--hike-pine); background: #f2efe3; }
#hikes .hike-cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
#hikes .hike-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}
#hikes .hike-cal-dow {
    padding: 0.25rem 0;
    text-align: center;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4d5f53;
}
#hikes .hike-cal-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 4rem;
    padding: 0.35rem;
    border: 1px solid var(--hike-line);
    border-radius: 0.6rem;
    background: rgba(255, 253, 247, 0.65);
    text-align: left;
}
#hikes .hike-cal-cell--empty { border-color: transparent; background: transparent; }
#hikes .hike-cal-cell--today { box-shadow: inset 0 0 0 2px rgba(232, 98, 26, 0.5); }
#hikes .hike-cal-cell--hike {
    background: #fffdf7;
    border-color: #cdd9c8;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
#hikes .hike-cal-cell--hike:hover { border-color: var(--hike-orange); background: #fff7ef; }
#hikes .hike-cal-day { font-size: 0.7rem; font-weight: 900; color: #33453a; }
#hikes .hike-cal-label {
    font-size: 0.55rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--hike-pine);
    overflow-wrap: anywhere;
}
#hikes .hike-cal-dot {
    width: 0.4rem;
    height: 0.4rem;
    margin-top: auto;
    border-radius: 999px;
    background: var(--hike-orange);
}
/* On a phone a 7-column grid leaves ~40px per day: keep the day number and
   the orange marker, and let the button's aria-label carry the name. */
@media (max-width: 640px) {
    #hikes .hike-cal-cell { min-height: 3.1rem; padding: 0.3rem 0.25rem; }
    #hikes .hike-cal-label { display: none; }
}

/* --- Recommended apps ------------------------------------------------- */
#hikes .hike-app {
    display: flex;
    flex-direction: column;
    padding: 1.15rem;
    border: 1px solid rgba(244, 239, 226, 0.18);
    border-radius: 1rem;
    background: var(--hike-pine);
    color: #f1ede0;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
#hikes .hike-app:hover { border-color: var(--hike-orange); transform: translateY(-2px); }
#hikes .hike-app__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.7rem;
    background: var(--hike-orange);
    color: #1a1206;
    font-size: 1rem;
}
#hikes .hike-app h3,
#hikes .hike-app h4 { font-size: 0.95rem; font-weight: 900; color: #fffdf7; }
#hikes .hike-app__kicker { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #b9cbbd; }
#hikes .hike-app > p { margin-top: 0.6rem; font-size: 0.75rem; line-height: 1.6; color: #e7e2d3; }
#hikes .hike-app__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.9rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffd7bd;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#hikes .hike-app__link:hover { color: #ffe9d8; }
/* --- Safety accordion ------------------------------------------------- */
#hikes .hike-acc {
    border: 1px solid var(--hike-line);
    border-radius: 0.9rem;
    background: #fffdf7;
    overflow: hidden;
}
#hikes .hike-acc + .hike-acc { margin-top: 0.6rem; }
#hikes .hike-acc summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 0.95rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.8rem;
    font-weight: 900;
    color: var(--hike-pine-deep);
}
#hikes .hike-acc summary::-webkit-details-marker { display: none; }
#hikes .hike-acc summary::after {
    content: "+";
    margin-left: auto;
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--hike-pine);
}
#hikes .hike-acc[open] summary { background: #eef0e6; }
#hikes .hike-acc[open] summary::after { content: "\2013"; }
#hikes .hike-acc__body { padding: 0.85rem 0.95rem 1rem; font-size: 0.76rem; line-height: 1.65; color: #33453a; }
#hikes .hike-acc__body ul { display: grid; gap: 0.45rem; }
#hikes .hike-acc__body li { display: flex; gap: 0.5rem; }
#hikes .hike-acc__body i { margin-top: 0.2rem; color: var(--hike-pine); }
#hikes .hike-emergency {
    border: 1px solid rgba(232, 98, 26, 0.45);
    border-left: 5px solid var(--hike-orange);
    border-radius: 0.9rem;
    background: #fff7ef;
    padding: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
    #hikes .hike-card,
    #hikes .hike-app { transition: none; }
    #hikes .hike-card:hover,
    #hikes .hike-app:hover { transform: none; }
    #hikes .hike-card.is-highlighted { animation: none; box-shadow: 0 0 0 4px rgba(232, 98, 26, 0.4); }
}