/*
 * Copyright (C) 2026 Worth Considering Ltd
 *
 * This file is part of teks.click.
 *
 * teks.click is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * teks.click is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with teks.click. If not, see <https://www.gnu.org/licenses/>.
 *
 * HISTORY:
 *   1.0.0: Initial generation — teks.click project styles
 *   1.1.0: Revised against canonical dunny.css; moved utility classes here;
 *           fixed button-secondary, nav link style, site-tagline
 */

/* ── Spacing utilities not in canonical dunny ────────────────────────────── */

.mt-4  { margin-top:    var(--space-4); }
.mb-4  { margin-bottom: var(--space-4); }
.mt-5  { margin-top:    var(--space-5); }
.mt-6  { margin-top:    var(--space-6); }
.mb-6  { margin-bottom: var(--space-6); }
.mt-8  { margin-top:    var(--space-8); }
.text-large { font-size: var(--font-size-large); }

/* ── Rounded corners opt-in ──────────────────────────────────────────────── */

:root { --radius-default: var(--radius-sm); }

/* ── Site title tagline ──────────────────────────────────────────────────── */

.site-tagline {
    font-size: var(--font-size-small);
    color: var(--text-muted);
    font-weight: 400;
}

/* ── Header: allow tagline below site-title ──────────────────────────────── */
/* Canonical header is fixed at --header-height (3rem). teks.click wraps
   a title + tagline, so we need a slightly taller header on desktop.     */

header {
    height: auto;
    min-height: var(--header-height);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

/* Compensate main margin for taller header on desktop */
@media (min-width: 601px) {
    main { margin-top: 4rem; }
}

/* ── Nav link style: remove underlines in header nav ────────────────────── */
/* Canonical gives all nav links text-decoration: underline.
   In a horizontal header nav this is visually heavy; remove it.          */

header nav a {
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: var(--space-1);
}

header nav a:hover {
    background-color: transparent;
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}

header nav a[aria-current="page"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* ── button-secondary: outlined rather than grey fill ────────────────────── */
/* Canonical makes button-secondary a grey-filled button.
   teks.click uses it for BibleGateway links; outlined reads better.      */

.button-secondary {
    background-color: transparent;
    color: var(--accent-dark);
    border: 2px solid var(--accent-dark);
}

.button-secondary:hover {
    background-color: var(--bg-secondary);
    color: var(--accent-dark);
    border-color: var(--accent-dark);
}

.button-secondary:visited {
    color: var(--accent-dark);
}

/* ── Grade badge ─────────────────────────────────────────────────────────── */

.grade-badge {
    display: inline-block;
    background: var(--accent);
    color: var(--bg-primary);
    font-size: var(--font-size-small);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-default);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ── Passage entry sections ──────────────────────────────────────────────── */

.passage-section { margin-bottom: var(--space-6); }
.passage-section h2 {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-2);
}

.passage-meta {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

/* ── Teaching note highlight ─────────────────────────────────────────────── */

.teaching-note {
    background: var(--bg-secondary);
    border-left: 4px solid var(--accent-light);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.teaching-note strong { color: var(--accent-dark); }

/* ── Home page signpost boxes ────────────────────────────────────────────── */

.signpost { display: flex; flex-direction: column; gap: var(--space-3); }
.signpost a.button { align-self: flex-start; margin-top: auto; }

/* ── Passage index status ────────────────────────────────────────────────── */

.passage-status-ready   { color: var(--color-success); font-weight: 600; }
.passage-status-pending { color: var(--text-muted); }

/* ── GPL footer notice ───────────────────────────────────────────────────── */

.gpl-notice { font-size: var(--font-size-small); color: var(--text-muted); }