/* Angelic Sea Traveler — starter stylesheet.
   Uses the same "Golden Hour" sunset channel art created for YouTube, so the
   website and the channel feel like one connected brand.

   Written to validate against the W3C CSS specification (no vendor-specific
   or non-standard properties) and mobile-first: base rules target small
   screens, then min-width media queries layer on larger-screen layout. */

:root {
    --color-ink: #2b2320;
    --color-cream: #fdf6ee;
    --color-header-bg: rgba(30, 22, 46, 0.95);
    --color-accent-1: #f2a154;
    --color-accent-2: #e46a4d;
    --color-muted: #6b5f55;
    --content-max-width: 900px;
}

/* box-sizing reset — makes width/height math predictable at every screen size */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Respects the user's browser/OS font-size setting instead of a fixed px value */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--color-ink);
    background-color: var(--color-cream);
    background-image: url('/assets/images/site-background.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    line-height: 1.6;
}

img {
    /* Images never overflow their container on any screen size */
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

/* Visible focus outline for keyboard users on every interactive element */
a:focus-visible,
button:focus-visible,
label:focus-visible {
    outline: 3px solid var(--color-accent-1);
    outline-offset: 2px;
}

/* ---------- Header / nav ---------- */

.site-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: var(--color-header-bg);
    color: var(--color-cream);
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    color: var(--color-cream);
    text-decoration: none;
}

.site-logo-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* CSS-only mobile menu: a hidden checkbox + label toggles the nav list via
   the :checked pseudo-class, so no JavaScript is needed for the hamburger. */
.nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nav-toggle-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    cursor: pointer;
}

.nav-toggle-label .bar {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-cream);
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav a {
    display: block;
    padding: 0.75rem 0;
    text-decoration: none;
    font-size: 0.95rem;
}

/* Small screens (default / mobile-first): nav collapses behind the toggle */
.site-nav ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    flex-direction: column;
    background: var(--color-header-bg);
    padding: 0.5rem 1.25rem 1rem;
}

/* .nav-toggle, its label, and the <ul> are all direct children of <nav
   class="site-nav">, so :checked only needs a general-sibling combinator
   to the <ul> itself — not another .site-nav, which is the ancestor, not
   a sibling. */
.nav-toggle:checked ~ ul {
    display: flex;
}

/* Tablet and up: nav toggle disappears, links show inline */
@media (min-width: 640px) {
    .nav-toggle-label {
        display: none;
    }

    .site-nav ul {
        display: flex;
        position: static;
        flex-direction: row;
        gap: 1.5rem;
        background: none;
        padding: 0;
    }

    .site-nav a {
        padding: 0;
    }
}

/* ---------- Main content ---------- */

main {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 1.25rem;
    background: rgba(253, 246, 238, 0.9);
}

@media (min-width: 640px) {
    main {
        padding: 2rem;
    }
}

/* ---------- Hero ---------- */

.hero {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* fixed background creates jank/rendering issues on many mobile browsers,
       so it's only enabled at larger widths below */
    background-attachment: scroll;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-cream);
    padding: 1.5rem;
}

@media (min-width: 900px) {
    .hero {
        background-attachment: fixed;
        min-height: 60vh;
    }
}

.hero-overlay {
    background: rgba(20, 14, 12, 0.45);
    padding: 1.5rem 1.25rem;
    border-radius: 8px;
    max-width: 30rem;
}

.hero h1 {
    margin: 0 0 0.5rem;
    /* clamp(min, preferred, max) scales the heading fluidly between phone
       and desktop widths instead of jumping at a single breakpoint */
    font-size: clamp(1.5rem, 5vw + 0.5rem, 2.5rem);
    letter-spacing: 0.04em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.hero p {
    margin: 0 0 1.25rem;
    font-size: clamp(0.95rem, 2vw + 0.5rem, 1.1rem);
    letter-spacing: 0.03em;
}

.hero-cta {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 1.4rem;
    background: linear-gradient(135deg, var(--color-accent-1), var(--color-accent-2));
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}

/* ---------- Footer ---------- */

.site-footer {
    text-align: center;
    padding: 1.5rem 1rem;
    font-size: 0.9rem;
    color: var(--color-muted);
    background: rgba(253, 246, 238, 0.9);
}

.site-footer p {
    max-width: 40rem;
    margin: 0 auto 0.5rem;
}

.site-footer p:last-child {
    margin-bottom: 0;
}

.copyright-notice {
    font-size: 0.78rem;
    line-height: 1.5;
}

/* ---------- Forms (contact form, admin login, new-post form) ---------- */

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 32rem;
}

form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.95rem;
}

.hint {
    font-weight: normal;
    font-size: 0.82rem;
    color: var(--color-muted);
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form textarea,
form select {
    font: inherit;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--color-muted);
    border-radius: 4px;
    background: var(--color-cream);
    color: var(--color-ink);
    min-height: 44px;
}

form textarea {
    min-height: auto;
    resize: vertical;
}

/* Password field with an embedded eye-icon show/hide toggle. */
.password-field {
    position: relative;
    display: block;
}

.password-field input {
    width: 100%;
    padding-right: 2.75rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    min-height: auto;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-muted);
    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--color-ink);
}

/* The `hidden` attribute doesn't reliably suppress display on inline SVG
   in every browser, so force it explicitly here. */
.password-toggle svg[hidden] {
    display: none;
}

/* ---------- Single blog post ---------- */

.post-date {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.post-body {
    margin: 1.25rem 0;
    line-height: 1.7;
}

/* ---------- Private journal (scrollable list of entries) ---------- */

.journal-entry {
    padding: 1.25rem 0;
    border-bottom: 1px dashed rgba(107, 95, 85, 0.35);
}

.journal-entry:first-child {
    padding-top: 0;
}

.journal-entry h2 {
    margin: 0 0 0.25rem;
}

/* ---------- Honeypot anti-spam field ---------- */
/* Hidden from real visitors (off-screen, not display:none, so basic bots
   that skip display:none fields still trip it). Real users never see or
   fill this in; anything that does is treated as spam. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* ---------- Admin sections with multiple tables (e.g. Membership Requests) ---------- */
.admin-post-list h2 {
    font-size: 1.1rem;
    margin: 1.5rem 0 0.75rem;
}

.admin-post-list:first-of-type h2 {
    margin-top: 0;
}

.admin-post-list code {
    font-size: 0.8rem;
    word-break: break-all;
}

form button {
    align-self: flex-start;
    font: inherit;
    min-height: 44px;
    padding: 0 1.4rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-accent-1), var(--color-accent-2));
    color: #fff;
    letter-spacing: 0.03em;
    cursor: pointer;
}

/* ---------- Admin (login gate, new-post page) ---------- */

.admin-notice {
    background: rgba(242, 161, 84, 0.18);
    border: 1px solid var(--color-accent-1);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.admin-errors {
    background: rgba(228, 106, 77, 0.12);
    border: 1px solid var(--color-accent-2);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--color-accent-2);
}

.admin-errors ul {
    margin: 0;
    padding-left: 1.2rem;
}

.admin-link {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--color-muted);
    font-size: 0.85rem;
}

.admin-link a {
    text-decoration: none;
    color: var(--color-muted);
}

/* ---------- Admin post table (Manage Posts) ---------- */

.admin-post-list {
    overflow-x: auto;
}

.admin-post-list table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-post-list th,
.admin-post-list td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(107, 95, 85, 0.25);
    vertical-align: top;
}

.admin-post-list th {
    font-weight: bold;
    color: var(--color-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    white-space: nowrap;
}

.status-badge.status-published {
    background: rgba(242, 161, 84, 0.25);
    color: #8a4f16;
}

.status-badge.status-draft {
    background: rgba(107, 95, 85, 0.18);
    color: var(--color-muted);
}

.status-badge.status-hold {
    background: rgba(228, 106, 77, 0.18);
    color: var(--color-accent-2);
    font-weight: bold;
}

.danger-link {
    color: var(--color-accent-2);
}

form button.button-danger {
    background: var(--color-accent-2);
}

/* A <form>+<button> that should look and sit like an inline text link
   (used for one-click delete actions with a JS confirm() prompt). */
.inline-form {
    display: inline;
}

button.link-button {
    display: inline;
    min-height: auto;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}