/*
 * style.css — The Daily Post
 * Aesthetic: Editorial newspaper / literary magazine
 * Fonts: Playfair Display (headings) + Source Serif 4 (body)
 */

/* ── CSS Variables ─────────────────────────────────────────────────────────── */
:root {
    --ink:        #1a1208;
    --ink-light:  #4a3f2f;
    --paper:      #faf7f2;
    --paper-dark: #f0ebe0;
    --rule:       #d4c8b0;
    --accent:     #8b2500;       /* deep press-red */
    --accent-hover: #6b1c00;
    --gold:       #c8a94a;
    --white:      #ffffff;

    --font-head:  'Playfair Display', Georgia, serif;
    --font-body:  'Source Serif 4', Georgia, serif;

    --max-w:      860px;
    --radius:     4px;
    --shadow:     0 2px 16px rgba(26,18,8,.10);
    --shadow-lg:  0 6px 32px rgba(26,18,8,.16);

    --transition: .18s ease;
}

/* ── Reset / Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 17px; scroll-behavior: smooth; }

body {
    font-family:      var(--font-body);
    background-color: var(--paper);
    color:            var(--ink);
    line-height:      1.75;
    min-height:       100vh;
    display:          flex;
    flex-direction:   column;
}

a {
    color:           var(--accent);
    text-decoration: none;
    transition:      color var(--transition);
}
a:hover { color: var(--accent-hover); text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ── Typography ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
    font-family: var(--font-head);
    line-height: 1.2;
    color:       var(--ink);
}
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem);   }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p { margin-bottom: 1rem; }

/* ── Layout helpers ────────────────────────────────────────────────────────── */
.container {
    width:   100%;
    max-width: var(--max-w);
    margin:  0 auto;
    padding: 2rem 1.25rem 3rem;
}

/* ── Site Header ───────────────────────────────────────────────────────────── */
.site-header {
    background:    var(--ink);
    color:         var(--paper);
    border-bottom: 4px solid var(--accent);
}

.header-inner {
    max-width:      var(--max-w);
    margin:         0 auto;
    padding:        1.2rem 1.25rem;
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            1rem;
    flex-wrap:      wrap;
}

.masthead { line-height: 1.1; }

.site-title {
    font-family: var(--font-head);
    font-size:   clamp(1.5rem, 4vw, 2.1rem);
    font-style:  italic;
    color:       var(--paper);
    text-decoration: none;
    letter-spacing: .02em;
}
.site-title:hover { color: var(--gold); text-decoration: none; }

.site-tagline {
    font-size:    .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:        var(--rule);
    margin: 0;
}

/* Nav */
.main-nav {
    display:     flex;
    align-items: center;
    gap:         .5rem 1.1rem;
    flex-wrap:   wrap;
}

.main-nav a {
    font-size:   .88rem;
    font-family: var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color:       var(--paper);
    transition:  color var(--transition);
}
.main-nav a:hover { color: var(--gold); text-decoration: none; }

.main-nav .nav-highlight {
    background:   var(--accent);
    color:        var(--white);
    padding:      .3rem .8rem;
    border-radius: var(--radius);
}
.main-nav .nav-highlight:hover { background: var(--accent-hover); color: var(--white); }

.nav-user {
    font-size:   .85rem;
    color:       var(--rule);
    font-style:  italic;
}

.nav-logout {
    color: #f4a285 !important;
}

/* ── Flash messages ────────────────────────────────────────────────────────── */
.flash {
    padding:       .85rem 1.25rem;
    text-align:    center;
    font-size:     .92rem;
    font-weight:   600;
    letter-spacing: .02em;
    animation:     fadeDown .4s ease;
}
.flash-success { background: #d4edda; color: #155724; border-bottom: 2px solid #28a745; }
.flash-error   { background: #f8d7da; color: #721c24; border-bottom: 2px solid #dc3545; }
.flash-info    { background: #d1ecf1; color: #0c5460; border-bottom: 2px solid #17a2b8; }

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Main / Footer ─────────────────────────────────────────────────────────── */
.site-main { flex: 1; }

.site-footer {
    background:  var(--ink);
    color:       var(--rule);
    text-align:  center;
    padding:     1.2rem;
    font-size:   .82rem;
    letter-spacing: .06em;
    border-top:  3px double var(--rule);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
    display:        inline-block;
    font-family:    var(--font-body);
    font-size:      .88rem;
    font-weight:    600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding:        .55rem 1.2rem;
    border-radius:  var(--radius);
    border:         2px solid transparent;
    cursor:         pointer;
    transition:     background var(--transition), color var(--transition), border-color var(--transition);
    text-decoration: none;
}

.btn-primary {
    background:   var(--accent);
    color:        var(--white);
    border-color: var(--accent);
}
.btn-primary:hover {
    background:   var(--accent-hover);
    border-color: var(--accent-hover);
    color:        var(--white);
    text-decoration: none;
}

.btn-outline {
    background:   transparent;
    color:        var(--accent);
    border-color: var(--accent);
}
.btn-outline:hover {
    background:   var(--accent);
    color:        var(--white);
    text-decoration: none;
}

.btn-sm   { font-size: .78rem; padding: .35rem .8rem; }
.btn-full { width: 100%; text-align: center; display: block; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
    text-align:    center;
    padding:       3rem 1rem 2.5rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 2rem;
}

.hero h1 { margin-bottom: .5rem; }
.hero h1 em { color: var(--accent); }
.hero p { color: var(--ink-light); font-size: 1.05rem; margin-bottom: 1.5rem; }

.hero-auth {
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         1rem;
    flex-wrap:   wrap;
}
.hero-auth span { font-size: .9rem; color: var(--ink-light); font-style: italic; }

/* ── Toolbar ───────────────────────────────────────────────────────────────── */
.toolbar {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    flex-wrap:   wrap;
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--rule);
    font-size:   .85rem;
}

.toolbar-label {
    font-variant: small-caps;
    letter-spacing: .08em;
    color: var(--ink-light);
}

.sort-links { display: flex; gap: .4rem; flex-wrap: wrap; }

.sort-btn {
    padding:       .25rem .65rem;
    border:        1px solid var(--rule);
    border-radius: 2rem;
    color:         var(--ink-light);
    font-size:     .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition:    all var(--transition);
}
.sort-btn:hover, .sort-btn.active {
    background:  var(--ink);
    color:       var(--paper);
    border-color: var(--ink);
    text-decoration: none;
}

.post-count {
    margin-left: auto;
    color:       var(--ink-light);
    font-style:  italic;
    font-size:   .85rem;
}

/* ── Post card list ────────────────────────────────────────────────────────── */
.post-list { display: flex; flex-direction: column; gap: 1.5rem; }

.post-card {
    background:   var(--white);
    border:       1px solid var(--rule);
    border-left:  4px solid var(--accent);
    border-radius: var(--radius);
    box-shadow:   var(--shadow);
    transition:   box-shadow var(--transition), transform var(--transition);
    overflow:     hidden;
}
.post-card:hover {
    box-shadow:  var(--shadow-lg);
    transform:   translateY(-2px);
}

.post-card-body { padding: 1.4rem 1.4rem .8rem; }

.post-card-title {
    font-size:   1.35rem;
    margin-bottom: .4rem;
}
.post-card-title a { color: var(--ink); }
.post-card-title a:hover { color: var(--accent); text-decoration: none; }

.post-meta {
    display:   flex;
    gap:       1rem;
    flex-wrap: wrap;
    font-size: .8rem;
    color:     var(--ink-light);
    font-style: italic;
    margin-bottom: .75rem;
}

.post-excerpt {
    color:     var(--ink-light);
    font-size: .95rem;
    margin-bottom: 0;
    display:   -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:  hidden;
}

.post-card-footer {
    display:      flex;
    align-items:  center;
    justify-content: space-between;
    padding:      .8rem 1.4rem;
    background:   var(--paper-dark);
    border-top:   1px solid var(--rule);
    flex-wrap:    wrap;
    gap:          .5rem;
}

.comment-badge {
    font-size:   .82rem;
    color:       var(--ink-light);
    font-style:  italic;
}

/* ── Pagination ────────────────────────────────────────────────────────────── */
.pagination {
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         .4rem;
    margin-top:  2.5rem;
    flex-wrap:   wrap;
}

.page-btn {
    display:       inline-block;
    min-width:     2.2rem;
    text-align:    center;
    padding:       .35rem .6rem;
    border:        1px solid var(--rule);
    border-radius: var(--radius);
    font-size:     .85rem;
    color:         var(--ink);
    transition:    all var(--transition);
}
.page-btn:hover, .page-btn.active {
    background:  var(--accent);
    color:       var(--white);
    border-color: var(--accent);
    text-decoration: none;
}

/* ── Empty state ───────────────────────────────────────────────────────────── */
.empty-state {
    text-align:  center;
    padding:     3rem 1rem;
    color:       var(--ink-light);
    font-style:  italic;
    font-size:   1.05rem;
}

/* ── Back link ─────────────────────────────────────────────────────────────── */
.back-link {
    display:      inline-block;
    font-size:    .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:        var(--ink-light);
    margin-bottom: 1.5rem;
}
.back-link:hover { color: var(--accent); text-decoration: none; }

/* ── Full post ─────────────────────────────────────────────────────────────── */
.post-full {
    background:   var(--white);
    border:       1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow:   var(--shadow);
    overflow:     hidden;
    margin-bottom: 2.5rem;
}

.post-full-header {
    padding:      2rem 2rem 1.2rem;
    border-bottom: 1px solid var(--rule);
    background:   var(--paper-dark);
}

.post-full-title {
    margin-bottom: .6rem;
    font-size:    clamp(1.6rem, 4vw, 2.4rem);
}

.post-full-body {
    padding:      1.8rem 2rem;
    font-size:    1.05rem;
    line-height:  1.9;
    color:        var(--ink);
}
.post-full-body p { margin-bottom: 1.25rem; }

/* ── Comments ──────────────────────────────────────────────────────────────── */
.comments-section { margin-top: 1rem; }

#toggle-comments-btn { margin-bottom: 1.5rem; }

.comments-heading {
    font-size:     1.15rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--rule);
}

.no-comments {
    font-style: italic;
    color:      var(--ink-light);
    margin-bottom: 1.5rem;
}

.comment-list {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    margin-bottom:  2rem;
}

.comment-card {
    background:   var(--paper-dark);
    border:       1px solid var(--rule);
    border-radius: var(--radius);
    padding:      1rem 1.25rem;
}

.comment-meta {
    display:   flex;
    gap:       .75rem;
    font-size: .8rem;
    color:     var(--ink-light);
    margin-bottom: .4rem;
    font-style: italic;
    flex-wrap: wrap;
}
.comment-meta strong { color: var(--ink); font-style: normal; }

.comment-body {
    font-size:    .95rem;
    color:        var(--ink);
    margin:       0;
    white-space:  pre-wrap;
    word-wrap:    break-word;
}

/* Comment form */
.comment-form-wrap {
    margin-top:   1.5rem;
    padding-top:  1.5rem;
    border-top:   1px dashed var(--rule);
}
.comment-form-wrap h4 {
    margin-bottom: 1rem;
    font-size:    1rem;
    font-variant: small-caps;
    letter-spacing: .06em;
    color:        var(--ink-light);
}

.login-prompt {
    margin-top:  1.5rem;
    padding:     1.25rem;
    background:  var(--paper-dark);
    border:      1px dashed var(--rule);
    border-radius: var(--radius);
    text-align:  center;
    font-style:  italic;
    color:       var(--ink-light);
}

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-page {
    display:         flex;
    justify-content: center;
    padding-top:     3rem;
    padding-bottom:  3rem;
}

.form-card {
    background:   var(--white);
    border:       1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow:   var(--shadow-lg);
    padding:      2.5rem 2rem;
    width:        100%;
    max-width:    480px;
}

.form-card-wide { max-width: 680px; }

.form-title {
    font-size:     1.7rem;
    margin-bottom: .3rem;
    text-align:    center;
}
.form-sub {
    text-align:    center;
    color:         var(--ink-light);
    font-style:    italic;
    margin-bottom: 1.75rem;
    font-size:     .95rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display:       block;
    font-size:     .82rem;
    font-weight:   700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:         var(--ink-light);
    margin-bottom: .35rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea {
    display:      block;
    width:        100%;
    padding:      .65rem .85rem;
    font-family:  var(--font-body);
    font-size:    1rem;
    color:        var(--ink);
    background:   var(--paper);
    border:       1.5px solid var(--rule);
    border-radius: var(--radius);
    transition:   border-color var(--transition), box-shadow var(--transition);
    resize:       vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    outline:      none;
    border-color: var(--accent);
    box-shadow:   0 0 0 3px rgba(139,37,0,.12);
}

.form-group.has-error input,
.form-group.has-error textarea {
    border-color: #dc3545;
}

.field-error {
    display:    block;
    font-size:  .8rem;
    color:      #dc3545;
    margin-top: .3rem;
}

.char-hint {
    display:    block;
    font-size:  .78rem;
    color:      var(--ink-light);
    margin-top: .3rem;
    font-style: italic;
}

.form-switch {
    text-align:  center;
    margin-top:  1.25rem;
    font-size:   .88rem;
    color:       var(--ink-light);
}

.form-actions {
    display:     flex;
    gap:         .75rem;
    justify-content: flex-end;
    margin-top:  .5rem;
    flex-wrap:   wrap;
}

/* Alert box (login page generic error) */
.alert {
    padding:       .75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-size:     .9rem;
    font-weight:   600;
}
.alert-error {
    background:  #f8d7da;
    color:       #721c24;
    border:      1px solid #f5c6cb;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .post-full-header,
    .post-full-body { padding-left: 1.2rem; padding-right: 1.2rem; }

    .form-card { padding: 1.75rem 1.2rem; }

    .toolbar { flex-direction: column; align-items: flex-start; }
    .post-count { margin-left: 0; }
}

/* ── Decorative rule divider ───────────────────────────────────────────────── */
.rule-divider {
    display:    block;
    text-align: center;
    color:      var(--rule);
    letter-spacing: .5em;
    margin:     2rem 0;
    user-select: none;
}

/* ── Print styles (bonus) ──────────────────────────────────────────────────── */
@media print {
    .site-header, .site-footer, .main-nav, .btn, .pagination { display: none; }
    body { background: #fff; color: #000; }
}