/* Main CSS - imports all modular stylesheets */
@import url('base.css');
@import url('layout.css');
@import url('components.css');

/* Page-specific styles */
.page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.page-content { flex: 1; }

/* Trip card grid */
.trips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }

/* Trip info styles */
.trip-info-card { padding: 1.5rem; }
.trip-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.trip-meta { color: var(--text-light); margin-bottom: 1rem; }
.trip-desc { color: var(--text); line-height: 1.6; margin-bottom: 1rem; }

/* Vote button */
.vote-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border: 2px solid var(--danger); border-radius: var(--radius); background: transparent; color: var(--danger); font-weight: 600; cursor: pointer; transition: all var(--transition); }
.vote-btn:hover { background: var(--danger); color: white; }
.vote-btn.voted { background: var(--danger); color: white; }

/* Comments */
.comments-section { padding: 1.5rem; max-height: 400px; overflow-y: auto; }
.comment { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.comment:last-child { border-bottom: none; }
.comment-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85rem; }
.comment-author { font-weight: 600; color: var(--text); }
.comment-time { color: var(--text-muted); font-size: 0.8rem; }
.comment-content { color: var(--text-light); line-height: 1.5; }

/* Share buttons */
.share-btn { padding: 0.5rem 0.75rem; border: 1px solid var(--border); background: var(--bg-white); border-radius: var(--radius-sm); font-size: 0.85rem; cursor: pointer; text-decoration: none; color: var(--text-light); transition: all var(--transition-fast); }
.share-btn:hover { border-color: var(--primary); color: var(--primary); }

/* "Your trip" badge shown on the Discover page in place of the
   Join button when the current user owns the trip. Same shape as
   .share-btn but the crown + green pill makes it obvious this is
   a self-owned row. CodeMax.md §17 commit 4. */
.share-btn.own-trip-badge { color: var(--primary, #006644); border-color: var(--primary, #006644); background: var(--primary-light); cursor: default; }
.share-btn.own-trip-badge:hover { color: var(--primary, #006644); border-color: var(--primary, #006644); background: var(--primary-light); }

/* "This trip is over" pill shown on the Discover page in place
   of the Join button when the trip is completed or cancelled.
   Same .share-btn shape so the row stays aligned; the colours
   come from the same status palette the trip meta badge uses.
   CodeMax.md §45. */
.share-btn.trip-status-pill { cursor: default; }
.share-btn.trip-status-pill:hover { border-color: var(--border); color: var(--text-light); }
.share-btn.trip-status-completed { color: #1e40af; border-color: #1e40af; background: #dbeafe; }
.share-btn.trip-status-cancelled { color: #991b1b; border-color: #991b1b; background: #fee2e2; }

/* Trip-card thumbnails. §45 follow-up:
   The default `.card-img` background was `var(--primary-light)`,
   which evaluates to dark green (#14532d) in dark mode and hides
   the light OSM-tile thumbnails against the dark card chrome.
   We force a neutral light-green fallback in BOTH modes so the
   thumbnail is always clearly visible. The user explicitly chose
   this over generating per-theme dark-tile variants (a one-line
   serviceUrl swap in routing.js could do that later if desired).
*/
.card-img {
    background: #e8f5e9 !important;
}
:root[data-theme="dark"] .card-img {
    background: #e8f5e9 !important;
}

/* Map container */
.map-container { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }

/* Route info panel */
.route-info-panel { position: absolute; bottom: 10px; left: 10px; background: var(--bg-white); padding: 8px 12px; border-radius: var(--radius); box-shadow: var(--shadow); font-size: 0.85rem; z-index: 1000; }

/* Toolbar */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.sort-btn { padding: 0.5rem 1rem; border: 1px solid var(--border); background: var(--bg-white); color: var(--text); border-radius: var(--radius); cursor: pointer; font-size: 0.9rem; transition: all var(--transition-fast); }
.sort-btn:hover { border-color: var(--primary); color: var(--primary); }
.sort-btn.active { background: var(--primary); border-color: var(--primary); color: white; }
/* Dark mode: inactive buttons get a transparent background
   (otherwise they match the page bg, which is the same as
   --bg-white in dark mode) and a subtle white wash on hover. */
:root[data-theme="dark"] .sort-btn { background: transparent; }
:root[data-theme="dark"] .sort-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.05); }
/* Dark mode: the active green is bright (#22c55e), so
   flip the text to dark green for contrast. Scoped to
   :not([data-theme="light"]) so the OS-level dark pref
   backs off when the user has explicitly chosen light. */
:root[data-theme="dark"] .sort-btn.active { color: #052e16; }

/* ================================================
   SHARE-BTN / SORT-BTN DARK-MODE OVERRIDES (§22)
   The base .share-btn / .sort-btn rules now use
   var(--bg-white) so the backgrounds flip correctly.
   But .sort-btn.active has 'color: white' on
   var(--primary) — same problem as .btn-primary:
   white on #22c55e is 1.96:1, below WCAG AA.
   Flip the text to dark green in dark mode.
   ================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .sort-btn.active {
        color: #052e16;  /* very dark green for high contrast on #22c55e */
    }
}

/* Stats */
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.stat-label { font-size: 0.85rem; color: var(--text-muted); }

/* Route grid cards */
.route-card-img { width: 100%; height: 180px; object-fit: cover; background: var(--primary-light); }

/* Loading & empty states */
.loading { text-align: center; padding: 3rem; color: var(--text-light); }
.empty { text-align: center; padding: 3rem; color: var(--text-muted); }

/* Form container */
.form-container { max-width: 450px; margin: 0 auto; padding: 2rem; background: var(--bg-white); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.form-container h1 { text-align: center; margin-bottom: 1.5rem; }
.form-footer { text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.form-footer a { color: var(--primary); }

/* Hero stats */
.hero-stats { display: flex; justify-content: center; gap: 3rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.2); }
.hero-stat { text-align: center; }
.hero-stat-number { font-size: 2rem; font-weight: 700; color: var(--accent); }
.hero-stat-label { font-size: 0.9rem; opacity: 0.8; }

/* Feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }
.feature-card { background: var(--bg-white); padding: 2rem; border-radius: var(--radius-xl); box-shadow: var(--shadow); transition: transform var(--transition-slow), box-shadow var(--transition-slow); border: 1px solid var(--border); }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,100,68,0.15); }
.feature-icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; }
.feature-card h3 { margin-bottom: 0.75rem; color: var(--text); }

/* Route preview cards */
.routes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; max-width: 1200px; margin: 0 auto; }
.route-card-content { padding: 1.25rem; }
.route-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.route-link { color: var(--primary); font-weight: 500; }

/* Profile form */
.profile-section { background: var(--bg-white); padding: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 2rem; }
.profile-section h2 { color: var(--primary); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }

/* Vehicle select */
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

/* §46: footer legal-links row. Holds Privacy / Terms /
   Facebook icon as inline links with a "·" separator.
   Matches both themes via the existing --text-muted /
   --primary variables so no dark-mode override is
   needed. The Facebook icon is slightly larger to read
   as an icon rather than text. */
.footer-links {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.footer-links a {
    color: var(--text-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.footer-links a:hover {
    color: var(--primary);
    text-decoration: underline;
}
.footer-sep {
    margin: 0 0.5rem;
    color: var(--text-muted);
}
.footer-fb-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    transition: background var(--transition-fast), transform var(--transition-fast);
    /* The image is the official Facebook blue circle, but we
       invert it in dark mode so it doesn't burn a bright blue
       hole into the otherwise muted footer. */
}
.footer-fb-link:hover {
    background: rgba(8, 102, 255, 0.12);
    transform: translateY(-2px);
}
.footer-fb-icon {
    /* 44px — doubled from the original 22px at the user's
       request. The official SVG has a 36×36 viewBox so it
       stays crisp at any size. The 52×52 hover button keeps
       4px of padding around the icon so the hover wash
       doesn't crowd the icon edge. */
    width: 44px;
    height: 44px;
    display: block;
}