/* ================================================================
   SocialWave — Custom CSS
   Colors: Espresso #4A3428 | Cream #F5EFE6 | Olive #7D8A72 | Gold #C2A878
   Fonts kept from original: Outfit (display) + DM Sans (body)
   ================================================================ */

:root {
    --espresso: #4A3428;
    --cream:    #F5EFE6;
    --olive:    #7D8A72;
    --gold:     #C2A878;
    --dark:     #2C1F17;
    --light:    #FAF7F2;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    background-color: var(--cream);
    color: var(--dark);
}

/* Page fade-in — same as reference */
main { animation: fadeIn 0.2s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Scrollbar hide ---- */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Line clamp ---- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ================================================================
   DROPDOWN LINKS (shared between both headers)
   ================================================================ */
.sw-drop-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--dark);
    text-decoration: none;
    transition: background-color 0.15s;
}
.sw-drop-link:hover { background-color: #f9f5f0; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--espresso);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--gold); color: var(--espresso); transform: translateY(-1px); }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--espresso);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    border: 2px solid var(--espresso);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-secondary:hover { background: var(--espresso); color: #fff; }

.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gold);
    color: var(--espresso);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid var(--gold);
    transition: all 0.2s;
}
.btn-gold:hover { background: var(--espresso); color: #fff; border-color: var(--espresso); }

.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #dc2626;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s;
}
.btn-danger:hover { background: #b91c1c; }

/* ================================================================
   FORM INPUTS — exact same class patterns as reference app
   ================================================================ */
.sw-input {
    width: 100%;
    border: 1px solid #e5e0d9;
    border-radius: 0.75rem;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--dark);
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sw-input:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(194,168,120,0.2) !important;
}
.sw-input::placeholder { color: #b8ae9e; }
textarea.sw-input { resize: vertical; min-height: 90px; }
select.sw-input { background-color: #fff; cursor: pointer; }

/* Global focus override for native inputs */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(194,168,120,0.2) !important;
    outline: none !important;
}

/* ================================================================
   CARDS — matching reference bg-white rounded-2xl shadow-sm border
   ================================================================ */
.sw-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid rgba(194,168,120,0.2);
    padding: 1.5rem;
    transition: box-shadow 0.2s, transform 0.2s;
}
.sw-card:hover {
    box-shadow: 0 4px 16px rgba(74,52,40,0.1);
    transform: translateY(-2px);
}

/* Table — exact reference pattern */
.sw-table thead { background: #f9f5f0; }
.sw-table thead th {
    padding: 0.75rem 1.25rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9e8e7e;
    font-family: 'Outfit', sans-serif;
    border-bottom: 1px solid #f0ebe3;
}
.sw-table tbody td { padding: 0.85rem 1.25rem; font-size: 0.875rem; }
.sw-table tbody tr { border-bottom: 1px solid #f5f0ea; transition: background 0.1s; }
.sw-table tbody tr:hover { background: #faf7f2; }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 700; font-family: 'Outfit', sans-serif; }
.badge-active     { background: #dcfce7; color: #166534; }
.badge-pending    { background: #fef9c3; color: #854d0e; }
.badge-suspended  { background: #fee2e2; color: #991b1b; }
.badge-admin      { background: #fee2e2; color: #991b1b; }
.badge-manager    { background: #dbeafe; color: #1e40af; }
.badge-user       { background: #f0ebe3; color: #6b4e3d; }
.badge-published  { background: #dcfce7; color: #166534; }
.badge-draft      { background: #f3f4f6; color: #6b7280; }

/* ================================================================
   MANAGE LAYOUT
   ================================================================ */
.manage-wrap {
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}
.manage-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.manage-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--espresso);
}
.manage-sub {
    font-size: 0.875rem;
    color: #9e8e7e;
    margin-top: 0.125rem;
}

/* Page hero (inner pages) */
.sw-page-hero {
    background: linear-gradient(135deg, var(--espresso) 0%, #3d2a1e 50%, #5c3d28 100%);
    color: #fff;
    padding: 4.5rem 0 3.5rem;
    text-align: center;
}

/* Section label */
.sw-label-tag {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--olive);
    border-left: 3px solid var(--gold);
    padding-left: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Hero video */
.hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(74,52,40,0.7), rgba(44,31,23,0.85));
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* FAQ Accordion */
.sw-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.sw-acc-body.open { max-height: 500px; }

/* Manage sidebar nav */
.mgr-nav a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #6b5c50;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
}
.mgr-nav a:hover  { background: var(--cream); color: var(--espresso); }
.mgr-nav a.active { background: var(--espresso); color: #fff; }

/* Star ratings */
.sw-stars { color: var(--gold); }

/* Card lift hover */
.card-lift { transition: transform 0.2s, box-shadow 0.2s; }
.card-lift:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(74,52,40,0.12); }

/* Print */
@media print {
    header, footer, nav, .no-print { display: none !important; }
}