/* Share Your Stuff! — base stylesheet (mobile-first) */

:root {
    /* Brand: warm coral orange + deep teal accent */
    --primary: #FF6B35;
    --primary-dark: #D94F1F;
    --primary-soft: #FFE8DC;
    --accent: #1E7F8A;
    --accent-dark: #155A63;

    /* Legacy aliases so existing view references keep working */
    --teal: var(--primary);
    --teal-dark: var(--primary-dark);

    /* Warm neutrals */
    --cream: #FFF8F3;
    --charcoal: #2D1B14;
    --muted: #7A6459;
    --border: #F0E0D0;

    /* Utility */
    --amber: #F5A623;   /* reserved for star ratings */
    --danger: #C1292E;
    --success: #2E8B57;

    --radius: 12px;
    --shadow: 0 2px 12px rgba(45, 27, 20, 0.07);
    --shadow-lg: 0 10px 30px rgba(45, 27, 20, 0.12);
    --font-head: "Nunito", "DM Sans", system-ui, sans-serif;
    --font-body: "Source Sans 3", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* Accessibility: visible focus ring for keyboard users */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--charcoal);
    color: #fff;
    padding: .75rem 1rem;
    font-weight: 700;
    z-index: 9999;
}
.skip-link:focus {
    left: 0.5rem;
    top: 0.5rem;
}

html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--charcoal);
    line-height: 1.5;
    min-height: 100vh;
    padding-bottom: 80px; /* space for bottom nav */
}
@media (min-width: 769px) {
    body { padding-bottom: 0; }
}

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 3.5vw, 1.7rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); font-size: .9em; }

/* Layout */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.25rem 1rem;
}

.topbar {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
}
.brand {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.brand img { display: block; height: 40px; width: auto; }
@media (min-width: 481px) { .brand img { height: 44px; } }
.topnav { display: none; gap: 1.2rem; align-items: center; }
.topnav a { color: var(--charcoal); font-weight: 600; }
.topnav a:hover { color: var(--primary); }
@media (min-width: 769px) {
    .topnav { display: flex; }
}

.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    padding: .5rem 0;
    z-index: 100;
}
.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--muted);
    font-weight: 600;
    min-width: 60px;
    min-height: 44px;
    padding: .25rem .5rem;
    text-decoration: none;
}
.bottom-nav span { font-size: 1.25rem; }
.bottom-nav small { font-size: .7rem; }
@media (min-width: 769px) {
    .bottom-nav { display: none; }
}

/* Flash */
.flash {
    padding: .75rem 1rem;
    text-align: center;
    font-weight: 600;
}
.flash-success { background: #e0f5ec; color: var(--success); }
.flash-error   { background: #fbe3e3; color: var(--danger); }
.flash-info    { background: var(--primary-soft); color: var(--primary-dark); }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .7rem 1.2rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    min-height: 44px;
    transition: transform .05s ease, box-shadow .1s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(255, 107, 53, 0.30); }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(30, 127, 138, 0.25); }
.btn-accent:hover { background: var(--accent-dark); color: #fff; }
.btn-ghost  { background: #fff; color: var(--charcoal); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-dark); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: .45rem .8rem; font-size: .9rem; min-height: 36px; }
.btn-lg { padding: .95rem 1.6rem; font-size: 1.1rem; }

/* Forms */
.form { max-width: 520px; }
.field { margin-bottom: 1.1rem; }
.field label {
    display: block;
    font-weight: 600;
    margin-bottom: .3rem;
}
.field input[type=text],
.field input[type=email],
.field input[type=url],
.field input[type=date],
.field input[type=file],
.field textarea,
.field select {
    width: 100%;
    padding: .65rem .8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
    min-height: 44px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.field textarea { min-height: 110px; resize: vertical; }
.field .help { color: var(--muted); font-size: .85em; margin-top: .25rem; }
.char-counter { float: right; color: var(--muted); font-size: .8em; }

/* Cards */
.card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease, transform .05s ease;
}
.card:hover { box-shadow: var(--shadow-lg); text-decoration: none; }
.card > img,
.card > a > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.card-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: linear-gradient(135deg, var(--primary-soft), #FFF3E8);
    color: var(--primary-dark);
}
.card-body { padding: 1rem; }
.card-body h3 { margin: 0 0 .25rem; }

.card-section { margin: 2rem 0; }
.card-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 481px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 769px) { .grid { grid-template-columns: repeat(3, 1fr); } }

/* Empty state */
.empty {
    padding: 2rem;
    text-align: center;
    background: #fff;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

/* Hero / Landing */
.hero {
    text-align: center;
    padding: 3rem 1rem 2rem;
    max-width: 680px;
    margin: 0 auto;
}
.hero-logo { width: 100%; max-width: 360px; height: auto; margin: 0 auto 1.25rem; display: block; }
.hero h1 { color: var(--charcoal); margin-top: .5rem; }
.hero .lead { font-size: 1.15rem; color: var(--muted); margin-bottom: 1.75rem; }

.steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 900px;
    margin: 2rem auto;
}
@media (min-width: 769px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    text-align: center;
}
.step-num {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.30);
}

/* Welcome bar */
.welcome {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.welcome h1 { margin: 0; }

/* Avatar */
.avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #eee;
    border: 2px solid #fff;
    box-shadow: var(--shadow);
}
.avatar-lg { width: 72px; height: 72px; }
.avatar-sm { width: 32px; height: 32px; }

/* Group page header */
.group-header {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.group-header .banner {
    aspect-ratio: 3/1;
    background: linear-gradient(135deg, #FF6B35 0%, #FF8F5E 50%, #1E7F8A 100%);
    background-size: cover;
    background-position: center;
}
.group-header .info { padding: 1rem 1.25rem; }

/* Member grid */
.members {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.member {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    padding: .4rem .7rem .4rem .4rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-weight: 600;
    font-size: .9em;
}
.badge {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .72em;
    font-weight: 700;
    background: var(--primary);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.badge-muted { background: var(--primary-soft); color: var(--primary-dark); }

/* Invite box */
.invite-box {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-top: 1rem;
}
.invite-link {
    display: flex;
    gap: .5rem;
    align-items: center;
    background: var(--cream);
    padding: .5rem .75rem;
    border-radius: var(--radius);
    font-family: ui-monospace, monospace;
    font-size: .85em;
    word-break: break-all;
}