/* Hummingbird Tracker — base styles
   Restyled to the "Track Hummingbirds" green design system.
   Mobile-first, custom (no framework), CSS custom properties.
   NOTE: variable names and utility class names are kept stable so map.css,
   community.css, and all existing pages inherit the new look automatically. */

:root {
    /* Brand palette (from the approved design) */
    --color-primary:   #0b8b4f;  /* green */
    --color-primary-d: #097a45;  /* green hover */
    --color-deep:      #073f35;  /* deep forest */
    --color-accent:    #e11d74;  /* ruby-throat accent (likes / report) */

    --color-text:      #10232f;
    --color-muted:     #677682;
    --color-border:    #e8eeea;
    --color-bg:        #ffffff;
    --color-surface:   #ffffff;
    --color-cream:     #f7fbf7;

    --color-success:   #1b7b40;
    --color-info:      #2676b1;
    --color-warning:   #9a6b00;
    --color-danger:    #dc2626;
    --color-gray:      #6b7280;

    --grad-green: linear-gradient(135deg, #0b8b4f, #2fb76c);

    --radius:    16px;
    --radius-sm: 10px;
    --shadow:    0 8px 24px rgba(16,35,47,.06);
    --shadow-lg: 0 14px 40px rgba(16,35,47,.12);
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --maxw: 1200px;
    /* Left/right inset that matches .container's content edge, so full-bleed
       sections (hero, story) align with the header/footer/content column.
       Uses 50% (of the section's own width) rather than 100vw so it stays
       correct when a scrollbar is present. */
    --gutter: max(24px, calc(50% - var(--maxw) / 2 + 24px));
}

* { box-sizing: border-box; }
/* Always reserve the vertical scrollbar's width so the usable viewport width is
   identical on every page (scrolling or not). Without this, short/non-scrolling
   pages (e.g. the full-screen map) are ~15px wider than content pages on
   Windows, so the right-aligned nav and the right-bleeding hero image shift
   ("jump") between pages while the left-pinned logo stays put. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-y: scroll; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.55;
    font-size: 16px;
}
h1, h2, h3 { line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); }
p { margin: 0 0 1rem; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.muted { color: var(--color-muted); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.eyebrow { font-size: 12px; letter-spacing: .26em; font-weight: 700; color: #607582; margin: 0 0 12px; text-transform: uppercase; }

.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; z-index: 2000; }
.skip-link:focus { left: 0; }

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    font: inherit; font-weight: 700; cursor: pointer;
    padding: .7em 1.3em; border-radius: 24px;
    border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-text); transition: transform .06s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad-green); color: #fff; border-color: transparent; }
.btn-primary:hover { filter: brightness(1.04); }
.btn-accent { background: var(--color-accent); color: #fff; border-color: transparent; }
.btn-outline { background: #fff; border-color: var(--color-border); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-sm { padding: .5em 1em; font-size: .9rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* --- Header --- */
.site-header {
    position: relative; z-index: 20;
    background: transparent;
    border-bottom: none;
}
/* Hero pages: overlay the transparent header on top of the hero so the hero
   background flows up behind it. It is absolute (not fixed), so it scrolls
   away with the page instead of staying stationary. */
body.has-hero .site-header {
    position: absolute; top: 0; left: 0; right: 0;
}
@media (min-width: 901px) {
    body.has-hero .home-hero .hero-copy { padding-top: 150px; }
    /* Give every hero the same height as the homepage's so the hero box (and its
       `cover` photo) doesn't resize/re-crop when navigating between pages.
       612px = the homepage hero's natural height at desktop; it's compact (NOT a
       tall block — an earlier 700px read as oversized). Shorter-copy pages gain
       some space below their text; the image fills it. min-height (not height)
       so a longer hero grows at narrow widths rather than clipping. */
    body.has-hero .home-hero { min-height: 612px; }
}
.header-inner { display: flex; align-items: center; gap: 24px; height: 128px; }
.brand { display: inline-flex; align-items: center; height: 110px; }
.brand img { height: 110px; width: auto; object-fit: contain; object-position: left center; }
.brand:hover { text-decoration: none; }

.header-collapse { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav { display: flex; gap: 56px; align-items: center; }
.nav a { color: #15252f; font-weight: 500; font-size: 14px; }
.nav a:hover { color: var(--color-primary); text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-actions .btn { height: 42px; }
.icon-button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--color-border); background: #fff; font-size: 20px; cursor: pointer; color: var(--color-text); }

.nav-toggle { display: none; background: none; border: 0; flex-direction: column; gap: 5px; cursor: pointer; margin-left: auto; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--color-text); display: block; }

@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .header-collapse {
        position: absolute; top: 128px; left: 0; right: 0; margin: 0;
        background: var(--color-surface); border-bottom: 1px solid var(--color-border);
        flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 18px;
        display: none; box-shadow: var(--shadow);
    }
    .header-collapse.open { display: flex; }
    .nav { flex-direction: column; align-items: stretch; gap: 0; }
    .nav a { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
    .header-actions { margin-top: 12px; flex-wrap: wrap; }
    .header-actions .btn, .header-actions .icon-button { flex: 1; }
}

/* --- Generic hero (interior pages) --- */
.hero {
    background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-deep) 100%);
    color: #fff; padding: 56px 0 44px;
}
.hero h1 { color: #fff; max-width: 18ch; }
.hero p { color: #d7efe9; max-width: 54ch; font-size: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* Locator (used on hero, near-me, report, admin search) */
.locator { display: flex; gap: 8px; margin-top: 22px; max-width: 520px; flex-wrap: wrap; }
.locator input {
    flex: 1 1 220px; padding: .85em 1.1em; border-radius: 28px;
    border: 1px solid var(--color-border); background: #fff; color: var(--color-text); font: inherit;
}
.hero .locator input { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.14); color: #fff; }
.hero .locator input::placeholder { color: rgba(255,255,255,.8); }

/* --- Homepage: hero split --- */
.home-hero {
    display: grid; grid-template-columns: 49% 51%; overflow: hidden; min-height: 420px;
    background: linear-gradient(90deg, #fff 0%, #fff 46%, #eff7ef 100%);
    padding-left: var(--gutter); /* aligns the copy with the content column; image still bleeds right */
}
.home-hero .hero-copy { padding: 48px 3vw 40px 0; }
.home-hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: .95; margin: 0 0 18px; color: var(--color-text); font-weight: 900; }
.home-hero h1 span { color: var(--color-primary); }
.home-hero .hero-text { font-size: 1.05rem; line-height: 1.5; max-width: 540px; margin: 0 0 24px; color: #33464f; }
.hero-visual { min-height: 420px; background: url('/assets/images/hero.jpg') right center / cover no-repeat; position: relative; }
.hero-visual:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.35) 14%, transparent 35%); }

.search-bar {
    width: min(540px, 100%); height: 56px; display: flex; align-items: center;
    border: 1px solid var(--color-border); border-radius: 28px; background: #fff;
    box-shadow: 0 7px 18px rgba(16,35,47,.07); overflow: hidden;
}
.search-bar .pin { font-size: 20px; margin-left: 18px; color: var(--color-primary); }
.search-bar input { border: 0; outline: 0; flex: 1; padding: 0 14px; font-size: 15px; min-width: 0; background: transparent; }
.search-bar button { border: 0; background: var(--grad-green); color: #fff; width: 52px; height: 52px; border-radius: 50%; font-size: 24px; cursor: pointer; flex: 0 0 auto; margin-right: 2px; }
.popular { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; }
.popular strong { color: var(--color-muted); font-weight: 700; }
.popular a, .popular button { border: 1px solid var(--color-border); background: #fff; padding: 8px 14px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,.04); color: var(--color-text); font: inherit; cursor: pointer; }
.popular a:hover { border-color: var(--color-primary); text-decoration: none; }

/* --- Homepage: map shell card + recent sidebar --- */
.home-map {
    display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 12px;
    align-items: start;
    margin: 20px auto 44px; max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px);
    padding: 14px; background: #fff; border-radius: 26px; box-shadow: var(--shadow-lg);
    position: relative; z-index: 2;
}
.home-map .recent { max-height: 506px; overflow-y: auto; }
.map-panel { min-width: 0; }
.map-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0 0 8px; }
.map-tabs a, .map-tabs button {
    height: 38px; border: 0; background: #f2f7f4; border-radius: 19px; font-size: 12px; font-weight: 700;
    color: #17333b; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.map-tabs a:hover { color: var(--color-primary); text-decoration: none; }
.map-tabs .active { background: var(--grad-green); color: #fff; }
.map-tabs .active:hover { color: #fff; }
.map-tabs .report { background: var(--color-accent); color: #fff; }
.map-tabs .report:hover { color: #fff; filter: brightness(1.05); }
#home-map-canvas { position: relative; height: 460px; border-radius: 14px; overflow: hidden; }
.recent { padding: 2px 0 0 6px; }
.recent-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 8px; }
.recent-head h2 { font-size: 18px; margin: 0; }
.recent-head a { font-size: 12px; color: var(--color-primary); }
.recent-item { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center; padding: 9px 4px; border-top: 1px solid #edf0ef; }
.recent-item img { width: 58px; height: 58px; border-radius: 8px; object-fit: cover; background: #eef2f0; }
.recent-item h3 { font-size: 12.5px; line-height: 1.2; margin: 0 0 3px; }
.recent-item p { font-size: 11px; line-height: 1.25; color: #52646c; margin: 0; }
.recent-item .like { font-size: 11px; color: #6a7880; align-self: center; }

/* --- Stats strip --- */
.stats {
    max-width: calc(var(--maxw) - 48px); margin: 18px auto; width: calc(100% - 48px);
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: #dfe9e6; color: var(--color-text); border-radius: 18px; padding: 16px 22px;
    box-shadow: 0 8px 24px rgba(16,35,47,.06);
}
.stats > div { display: grid; grid-template-columns: 42px auto; grid-template-rows: auto auto; padding: 4px 18px; border-right: 1px solid rgba(16,35,47,.12); align-items: center; }
.stats > div:last-child { border-right: 0; }
.stats .s-icon { grid-row: 1 / 3; color: var(--color-primary); font-size: 28px; }
.stats strong { font-size: 18px; color: var(--color-text); }
.stats small { font-size: 12px; color: var(--color-muted); }

/* --- How it works --- */
.how { display: grid; grid-template-columns: 1.05fr repeat(3, 1fr); gap: 14px; align-items: center; }
.how-title h2 { font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.02; margin: 0; }
.step { min-height: 100px; border-radius: var(--radius); background: #fff; display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; padding: 18px; position: relative; box-shadow: var(--shadow); border: 1px solid var(--color-border); }
.step i { position: absolute; top: -8px; left: 40px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); color: #fff; font-style: normal; text-align: center; line-height: 24px; font-weight: 700; font-size: 13px; }
.step-icon { font-size: 24px; color: var(--color-primary); }
.step h3 { font-size: 16px; margin: 0 0 5px; }
.step p { font-size: 12.5px; color: #5f6f78; line-height: 1.35; margin: 0; }

/* --- Feature cards --- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-card { min-height: 170px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); position: relative; display: flex; }
.feature-card:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,64,54,.92) 0%, rgba(4,64,54,.8) 40%, rgba(255,255,255,.08) 78%); }
.feature-card.light:after { background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 52%, rgba(255,255,255,.06) 78%); }
.feature-card > div { position: relative; z-index: 2; width: 62%; padding: 22px; color: #fff; align-self: center; }
.feature-card.light > div { color: #142b31; }
.feature-card h3 { margin: 0 0 8px; font-size: 18px; }
.feature-card p { font-size: 12.5px; line-height: 1.4; margin: 0 0 11px; }
.feature-card a { font-size: 12px; color: inherit; font-weight: 700; }
.feature-icon { display: block; font-size: 26px; margin-bottom: 6px; color: #19a65c; }
.feat-migration { background: url('/assets/images/feature-migration.jpg') center/cover; }
.feat-species { background: url('/assets/images/feature-species.jpg') center/cover; }
.feat-near { background: url('/assets/images/feature-nearme.jpg') center/cover; }

/* --- Story banner --- */
.story { min-height: 200px; position: relative; overflow: hidden; color: #fff; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 32px var(--gutter); margin-top: 24px; }
.story-bg { position: absolute; inset: 0; background: url('/assets/images/sunset.jpg') center/cover no-repeat; z-index: -2; }
.story:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,51,44,.6), rgba(6,51,44,.18), rgba(6,51,44,.55)); z-index: -1; }
.story h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.1; margin: 0 0 12px; color: #fff; }
.story p { max-width: 340px; font-size: 14px; }
.story blockquote { justify-self: end; text-align: center; font-size: 18px; line-height: 1.5; font-style: italic; margin: 0; max-width: 360px; }
.story cite { display: block; font-size: 12px; font-style: normal; margin-top: 12px; }

/* --- Sections / cards / grids --- */
.section { padding: 44px 0; }
.section-tight { padding: 24px 0; }
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }

/* --- Badges --- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: .25em .7em; border-radius: 12px; text-transform: capitalize; letter-spacing: .01em; }
.badge-green  { background: #d7f4de; color: #1b7b40; }
.badge-blue   { background: #dceeff; color: #2676b1; }
.badge-yellow { background: #fff0c5; color: #9a6b00; }
.badge-gray   { background: #e9edeb; color: #55655d; }
.demo-badge { display: inline-block; background: #fff0c5; color: #9a6b00; font-weight: 700; font-size: .7rem; padding: .15em .55em; border-radius: 8px; text-transform: uppercase; letter-spacing: .03em; }

/* --- Forms --- */
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea {
    width: 100%; padding: .7em .9em; font: inherit; color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff;
}
.form-field textarea { min-height: 96px; resize: vertical; }
.form-help { font-size: .85rem; color: var(--color-muted); margin-top: 4px; }
.form-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; }
.form-success { background: #eafaf0; border: 1px solid #bbeacb; color: #166534; padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; }
.form-narrow { max-width: 460px; margin: 0 auto; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Sighting list cards --- */
.sighting-list { display: grid; gap: 14px; }
.sighting-item { display: flex; gap: 14px; align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px; }
.sighting-item .thumb { width: 72px; height: 72px; border-radius: var(--radius-sm); object-fit: cover; background: #eef2f0; flex: 0 0 auto; }
.sighting-item h3 { font-size: 1rem; margin-bottom: 2px; }

/* --- Stats tiles (profile/admin) --- */
.stat-row { display: flex; flex-wrap: wrap; gap: 16px; }
.stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px 20px; flex: 1 1 160px; }
.stat .num { font-size: 1.8rem; font-weight: 800; color: var(--color-primary); }
.stat .label { color: var(--color-muted); font-size: .9rem; }

/* --- Footer --- */
.site-footer { background: linear-gradient(180deg, #07493c, #04352f); color: #cfe7e2; margin-top: 0; padding: 28px 0 18px; }
.site-footer a { color: #fff; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.footer-brand img { height: 52px; width: auto; }
.footer-inner nav { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.footer-inner nav a { font-size: 12px; }
.footer-tagline { font-size: 11px; line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; color: #d7efe9; }
.footer-note { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; color: #9dc4bd; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* --- Mobile floating action --- */
.fab-report { display: none; position: fixed; right: 16px; bottom: 16px; z-index: 950; background: var(--color-accent); color: #fff; border-radius: 999px; padding: .9em 1.3em; font-weight: 700; box-shadow: var(--shadow-lg); }
@media (max-width: 900px) { .fab-report { display: inline-flex; } }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- Homepage responsive --- */
@media (max-width: 900px) {
    .home-hero { grid-template-columns: 1fr; padding-left: 0; }
    .home-hero .hero-copy { padding: 34px 24px 26px; }
    .hero-visual { min-height: 260px; order: -1; }
    .home-map { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stats > div { border-right: 0; }
    .how { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: 1fr; }
    .story { grid-template-columns: 1fr; }
    .story blockquote { justify-self: start; text-align: left; margin-top: 16px; }
}
@media (max-width: 560px) {
    .map-tabs { grid-template-columns: 1fr 1fr; }
    .stats { grid-template-columns: 1fr 1fr; }
}