/* Palette carried over from damosden.com */
:root {
    --banner:      #4444ee;
    --banner-dark: #2e2eb8;
    --page-bg:     #eeeeee;
    --text:        #333333;
    --text-muted:  #666666;
    --border:      #dddddd;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', Tahoma, Geneva, sans-serif;
    color: var(--text);
    background: var(--page-bg);
    line-height: 1.7;
}

a { color: var(--banner); text-decoration: none; }
a:hover { color: var(--banner-dark); text-decoration: underline; }

/* Nav */
.site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 2rem;
    background: var(--banner);
    color: #fff;
}
.site-nav a { color: #fff; }
.site-nav a:hover { color: #fff; opacity: .85; }
.site-nav .nav-brand { font-size: 1.25rem; font-weight: bold; color: #fff; margin-right: auto; }
.site-nav ul { list-style: none; display: flex; gap: 1rem; align-items: center; }
.site-nav .nav-user { color: #fff; opacity: .75; font-size: .9rem; }
.site-nav .nav-user strong { font-weight: 600; opacity: 1; }

/* Container */
.container { max-width: 860px; margin: 2rem auto; padding: 0 1rem; }

/* Flash messages */
.flash { padding: .75rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
.flash--success { background: #d4edda; color: #155724; }
.flash--error   { background: #f8d7da; color: #721c24; }
.flash--info    { background: #d1ecf1; color: #0c5460; }

/* Forms */
.form-page { max-width: 420px; margin: 3rem auto; }
.form-page h1 { margin-bottom: 1.5rem; }
label { display: block; margin-top: 1rem; font-weight: bold; font-size: .9rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="datetime-local"], input[type="number"], input[type="url"],
textarea, select {
    width: 100%; padding: .5rem; border: 1px solid #ccc;
    border-radius: 4px; font-size: 1rem; margin-top: .25rem;
    font-family: inherit; color: var(--text); background: #fff;
}
button, .btn {
    display: inline-block; margin-top: 1.25rem;
    padding: .6rem 1.4rem; background: var(--banner);
    color: #fff; border: none; border-radius: 4px;
    cursor: pointer; font-size: 1rem; font-family: inherit;
}
button:hover, .btn:hover { background: var(--banner-dark); }

/* Post list */
.post-list { list-style: none; }
.post-list li { border-bottom: 1px solid var(--border); padding: 1rem 0; }
.post-list .meta { font-size: .85rem; color: var(--text-muted); margin-left: .5rem; }

/* Post list with thumbnails (travel blog) */
.post-list--thumbs li { display: flex; align-items: center; gap: 1rem; }
.post-list--thumbs .meta { display: block; margin-left: 0; }
.post-list-body { display: flex; flex-direction: column; gap: .15rem; }
.thumb-link { flex-shrink: 0; }
.thumb {
    display: block; width: 72px; height: 72px;
    object-fit: cover; border-radius: 4px; background: var(--page-bg);
}
.thumb--placeholder { border: 1px dashed var(--border); }

/* Hero */
.hero { padding: 3rem 0 2rem; }
.hero h1 { font-size: 2.5rem; }

/* Error pages */
.error-page { text-align: center; padding: 5rem 1rem; }
.error-page h1 { font-size: 6rem; color: #ccc; }

/* Footer */
footer {
    text-align: center; font-size: .8rem; color: var(--text-muted);
    padding: 1.5rem 1rem 2.5rem;
}

/* Admin */
.admin-nav {
    display: flex; gap: 1rem; padding: .75rem 1.5rem;
    background: var(--banner-dark);
}
.admin-nav a { color: #e0e0ff; font-size: .9rem; }
.admin-nav a:hover { color: #fff; }
.admin-nav .admin-nav-user { margin-left: auto; color: #e0e0ff; opacity: .75; font-size: .9rem; }
.admin-nav .admin-nav-user strong { font-weight: 600; opacity: 1; }
.admin-container { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }

/* Dashboard header */
.dashboard-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.5rem;
}
.dashboard-links { margin-top: 1.5rem; }

/* Tables */
.table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.table th, .table td {
    text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--border);
}
.table th { font-size: .85rem; text-transform: uppercase; color: var(--text-muted); }
.table-actions { display: flex; gap: .75rem; align-items: center; }

/* Badges */
.badge {
    display: inline-block; padding: .15rem .6rem; border-radius: 999px;
    font-size: .75rem; text-transform: capitalize;
}
.badge--published { background: #d4edda; color: #155724; }
.badge--pending    { background: #fff3cd; color: #856404; }
.badge--draft      { background: #e2e3e5; color: #383d41; }
.badge--seed       { background: #d6e4ff; color: #1a3d7c; }

/* Link-styled buttons (inline forms) */
.btn-link {
    background: none; border: none; padding: 0; margin: 0;
    color: var(--banner); cursor: pointer; font-size: .95rem;
    text-decoration: underline; font-family: inherit;
}
.btn-link:hover { color: var(--banner-dark); }
.btn-danger { color: #c0392b; }
.btn-danger:hover { color: #922b21; }

/* Checkbox groups */
.checkbox-group { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .5rem; }
.checkbox-item { display: flex; align-items: center; gap: .4rem; font-weight: normal; margin-top: 0; }
.checkbox-item input { width: auto; margin: 0; }

/* Wide form pages (post/travel editors) */
.form-page--wide { max-width: 720px; }

/* Stat cards (admin dashboard) */
.stat-grid { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1.5rem 0; }
.stat-card {
    flex: 1; min-width: 140px; padding: 1.25rem; background: #fff;
    border: 1px solid var(--border); border-radius: 6px; text-align: center;
}
.stat-value { display: block; font-size: 2rem; font-weight: bold; color: var(--banner); }
.stat-label { display: block; color: var(--text-muted); font-size: .85rem; margin: .25rem 0 .5rem; }

/* Travel type nav */
.type-nav { display: flex; gap: 1rem; margin: 1rem 0; }

/* Travel entry contact links (website / email / Google Maps) */
.entry-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0 0; }
.entry-links a {
    display: inline-flex; align-items: center;
    padding: .35rem .9rem; border: 1px solid var(--banner); border-radius: 999px;
    color: var(--banner); font-size: .85rem; font-weight: 600;
    text-decoration: none; transition: background .15s, color .15s;
}
.entry-links a:hover { background: var(--banner); color: #fff; text-decoration: none; }

/* Post / entry content */
.post-image { width: 100%; max-height: 420px; object-fit: cover; border-radius: 6px; margin: 1rem 0; }
.post-content { margin: 1.5rem 0; }
.entry-images { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }
.entry-images img, .entry-images video { max-width: 220px; border-radius: 4px; }

/* Photo upload / management (travel entry form) */
.field-hint { font-size: .8rem; color: var(--text-muted); margin-top: .35rem; }
.photo-grid { display: flex; flex-wrap: wrap; gap: 1rem; margin: .5rem 0 1rem; }
.photo-item { display: flex; flex-direction: column; align-items: center; gap: .35rem; font-weight: normal; margin-top: 0; }
.photo-item img, .photo-item video { width: 120px; height: 90px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); }
.photo-item span { font-size: .8rem; }
.photo-item .photo-meta {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    width: 120px; text-align: center; overflow-wrap: break-word;
}
.photo-item .field-hint {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem;
}
.photo-caption { width: 120px; font-size: .8rem; padding: .3rem; margin-top: 0; }

/* New-upload caption rows (built by JS after files are picked) */
.photo-caption-row { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.photo-caption-row-name { font-size: .8rem; color: var(--text-muted); min-width: 140px; }
.photo-caption-row input { margin-top: 0; }

/* Travel items (wines/dishes/rooms) — form editor */
.item-row {
    border: 1px solid var(--border); border-radius: 6px;
    padding: 1rem; margin: 1rem 0; background: #fff;
}

/* Travel items — read-only display */
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0; }
.item-card { border: 1px solid var(--border); border-radius: 6px; padding: 1rem; background: #fff; }
.item-card h3 { margin-bottom: .35rem; }
.item-tags { margin-bottom: .5rem; }
.item-tags .badge { background: var(--page-bg); color: var(--text); margin-right: .35rem; }
.entry-images--item { margin: .75rem 0; }
.entry-images--item img { max-width: 140px; }

/* Inline "add option" form inside the item-attributes admin table */
.inline-option-form { display: inline-flex; gap: .4rem; align-items: center; margin-left: .5rem; }
.inline-option-form input { width: auto; margin-top: 0; padding: .25rem .4rem; }

/* Events — admin form */
.event-slideshow-fields { border: 1px solid var(--border); border-radius: 6px; padding: .5rem 1rem 1rem; margin-top: 1.5rem; }
.event-slideshow-fields legend { font-weight: bold; font-size: .9rem; padding: 0 .4rem; }

/* Events — guest photo page */
.event-upload { margin: 2rem 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.event-upload h2, .event-gallery h2 { margin-bottom: .75rem; }
.event-gallery .entry-images figure { position: relative; width: 220px; }
/* Videos get a fixed thumbnail box (unlike photos, which keep their natural
   aspect ratio) — a portrait phone video would otherwise render far taller
   than its max-width alone implies, dwarfing the photo tiles beside it. */
.event-gallery .entry-images video { width: 220px; height: 165px; object-fit: cover; background: #000; }
.event-gallery .entry-images figcaption { font-size: .8rem; color: var(--text-muted); margin-top: .25rem; }
.event-gallery .entry-images form { margin-top: .25rem; }
.event-photo--hidden { opacity: .45; }