/*
File: /site/assets/style.css
Purpose: Global site styles for Central States Metal Artisans.
         Dark forge/blacksmith theme: warm charcoal, ember accents,
         modern spacing and transitions.
*/

/* =========================
   CSS Variables (blacksmith / forge palette)
   ========================= */
:root {
    /* Core palette - warm charcoal / forge */
    --bg: #0d0c0b;
    --bg-soft: #161412;
    --panel: rgba(22,20,18,0.94);
    --panel-soft: rgba(30,27,24,0.94);
    --line: rgba(255,255,255,0.06);
    --panel-border: rgba(201,107,31,0.12);

    /* Text */
    --text: #ebe9e6;
    --muted: #9c968e;

    /* Brand - ember / hot metal */
    --accent: #c96b1f;
    --accent-soft: rgba(201,107,31,0.18);
    --accent-hover: #e07d28;
    --accent-glow: rgba(201,107,31,0.25);

    /* Secondary */
    --accent-2: #7a736b;

    /* Forms */
    --input-bg: #1a1816;
    --input-bg-focus: #242120;
    --input-border: #3a3532;
    --input-border-focus: var(--accent);

    /* Utility */
    --ok: #4a9c4a;
    --danger: #c9302c;
    --shadow: 0 4px 24px rgba(0,0,0,0.45);
    --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.03);
    --radius: 10px;
    --radius-sm: 6px;
    --transition: 0.2s ease;
}

html {
    scroll-behavior: smooth;
}

html, body {
    height: 100%;
}

body {
    font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 100%);
    pointer-events: none;
    z-index: -1;
}

/* =========================
   Typography
   ========================= */
h1, h2 {
    font-family: "Oswald", "Copperplate Gothic Bold", sans-serif;
    letter-spacing: 0.03em;
    font-weight: 700;
}

h1 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    color: var(--accent);
    margin: 0 0 0.5rem 0;
    text-shadow: 0 0 20px var(--accent-glow);
}

h2 {
    font-size: 1.35rem;
    border-left: 4px solid var(--accent);
    padding-left: 0.85rem;
    margin: 1.5rem 0 0.85rem 0;
    color: var(--text);
}

h3 {
    font-size: 1.12rem;
    color: var(--text);
    margin: 1.1rem 0 0.5rem 0;
    font-weight: 600;
}

h4 {
    font-size: 1.05em;
    margin: 0.85rem 0 0.4rem 0;
    font-weight: 600;
}

p {
    line-height: 1.65;
    margin: 0 0 0.85rem 0;
}

ul, ol {
    margin: 0 0 0.85rem 0;
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.25rem;
}

/* =========================
   Fonts (local fallback)
   ========================= */
@font-face {
    font-family: 'Copperplate Gothic Bold';
    src: url('/fonts/Copperplate Gothic Bold Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* =========================
   Base Elements
   ========================= */
img {
    display: inline-block;
    margin: 0.5rem 0.5rem 0.5rem 0;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* =========================
   Links
   ========================= */
a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 4px;
    transition: color var(--transition), border-color var(--transition);
}

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

/* =========================
   Layout Containers
   ========================= */
.div_main {
    background: var(--panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow), var(--shadow-inner);
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
    max-width: 56rem;
    width: 100%;
    margin: 1.5rem auto;
    box-sizing: border-box;
}

.div_wrap {
    display: inline-block;
    margin: 0.25rem;
    padding: 0.25rem;
    vertical-align: top;
    word-wrap: break-word;
}

/* =========================
   Cards
   ========================= */
.card,
.blog-post {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow), var(--shadow-inner);
    transition: border-color var(--transition);
}

.card-title {
    font-family: "Oswald", "Copperplate Gothic Bold", sans-serif;
    text-align: center;
    color: var(--text);
    margin-top: 0;
    font-weight: 700;
}

.card-muted {
    color: var(--muted);
    font-size: 0.95em;
}

/* =========================
   Notices
   ========================= */
.notice {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.notice.success {
    color: var(--ok);
    border-color: var(--ok);
    background: rgba(74,156,74,0.15);
}

.notice.error {
    color: var(--danger);
    border-color: var(--danger);
    background: rgba(201,48,44,0.15);
}

.content {
    font-size: 1.05em;
    line-height: 1.65;
}

/* =========================
   Navigation
   ========================= */
.main-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.main-nav li {
    margin: 0;
}

.main-nav a {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.main-nav a:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}

.nav-accent a {
    color: var(--text);
}

.nav-admin a {
    color: #7dd3fc;
}

/* =========================
   Blog
   ========================= */
.blog-post {
    display: flex;
    gap: 1.25rem;
    border-radius: var(--radius);
    padding: 1.25rem;
    margin: 1.5rem auto;
    max-width: 52rem;
}

.blog-image {
    width: 150px;
}

.blog-content {
    max-width: 700px;
}

/* =========================
   Countdown
   ========================= */
#countdown {
    font-size: 1.6em;
    text-align: center;
}

.countdown {
    font-size: 1em;
}

/* =========================
   Tables
   ========================= */
table {
    border-collapse: collapse;
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
}

th, td {
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--line);
    text-align: left;
}

th {
    background: var(--panel-soft);
    color: var(--accent);
    font-weight: 600;
    font-family: "Oswald", sans-serif;
    letter-spacing: 0.02em;
}

tbody tr {
    transition: background var(--transition);
}

tbody tr:nth-child(even) {
    background: rgba(0,0,0,0.15);
}

tbody tr:hover {
    background: rgba(201,107,31,0.06);
}

.tablehead {
    background: var(--panel-soft);
    color: var(--text);
    font-weight: 600;
    border-radius: var(--radius);
}

.muted {
    color: var(--muted);
}

/* ============================================================
   Newsletters
   ============================================================ */
.newsletter-intro {
    margin-bottom: 1rem;
}

.newsletter-filter {
    margin-bottom: 1.25rem;
}

.newsletter-filter a.active {
    font-weight: bold;
    color: var(--accent);
}

.newsletter-year {
    font-size: 1.25rem;
    color: var(--accent);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.newsletter-year:first-of-type {
    margin-top: 0;
}

.newsletter-item {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.newsletter-item-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.newsletter-item-title a {
    color: var(--text);
}

.newsletter-item-meta {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.newsletter-item-description {
    color: var(--muted);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.newsletter-item-action {
    font-size: 0.9rem;
}

.newsletter-item-action a {
    text-decoration: underline;
}

.newsletter-footer {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--muted);
}

/* ============================================================
   Application form (join/apply)
   ============================================================ */
.apply-form {
    max-width: 42rem;
}

.apply-form .form-section {
    margin-bottom: 1.75rem;
}

.apply-form .form-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--line);
}

.apply-form label {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: var(--text);
}

.apply-form label .hint {
    font-weight: normal;
    color: var(--muted);
    font-size: 0.85rem;
}

.apply-form .field-group {
    display: block;
    margin-bottom: 1rem;
}

.apply-form .field-group label,
.apply-form .field-group input,
.apply-form .field-group textarea,
.apply-form .field-group select {
    display: block;
}

.apply-form .field-group input,
.apply-form .field-group textarea,
.apply-form .field-group select {
    margin-bottom: 0;
}

.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form input[type="tel"],
.apply-form select,
.apply-form textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.7rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--text);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    transition: border-color var(--transition), background var(--transition);
}

.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus {
    outline: none;
    border-color: var(--input-border-focus);
    background: var(--input-bg-focus);
}

.apply-form .form-row .field select {
    margin-bottom: 0;
}

.apply-form textarea {
    min-height: 4rem;
    resize: vertical;
}

.apply-form textarea.ta-large {
    min-height: 5.5rem;
}

.apply-form .form-row {
    display: grid;
    gap: 0 1rem;
    margin-bottom: 1rem;
}

.apply-form .form-row-2 {
    grid-template-columns: 1fr 1fr;
}

.apply-form .form-row-3 {
    grid-template-columns: 2fr 1fr 1fr;
}

.apply-form .form-row .field {
    margin-bottom: 0;
}

.apply-form .form-row .field input {
    margin-bottom: 0;
}

.apply-form .dues-callout {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.apply-form .dues-callout a {
    color: var(--accent);
    font-weight: 600;
}

.apply-form button[type="submit"] {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bg);
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-top: 0.5rem;
    transition: background var(--transition), filter var(--transition);
}

.apply-form button[type="submit"]:hover {
    background: var(--accent-hover);
}

.apply-form .back-link {
    margin-top: 1.25rem;
    font-size: 0.95rem;
}

.apply-form .back-link a {
    color: var(--accent);
}

/* =========================
   Global form elements (non-apply forms)
   ========================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
    padding: 0.5rem 0.7rem;
    font-size: 1rem;
    color: var(--text);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    transition: border-color var(--transition), background var(--transition);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--input-border-focus);
    background: var(--input-bg-focus);
}

button,
input[type="submit"] {
    padding: 0.55rem 1.35rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bg);
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), filter var(--transition);
}

button:hover,
input[type="submit"]:hover {
    background: var(--accent-hover);
}

button:active,
input[type="submit"]:active {
    filter: brightness(0.95);
}

.form-block label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.form-block input,
.form-block select,
.form-block textarea {
    margin-bottom: 0.75rem;
}

@media (max-width: 560px) {
    .apply-form .form-row-2,
    .apply-form .form-row-3 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Admin / index_table (reuse table styles)
   ============================================================ */
.index_table {
    border-radius: var(--radius);
    overflow: hidden;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 760px) {
    .div_main {
        padding: 1rem 1.25rem;
        margin: 1rem auto;
    }

    .main-nav a {
        padding: 0.5rem 0.85rem;
        font-size: 0.9rem;
    }

    .site-footer .footer-row {
        flex-direction: column;
        align-items: center;
        white-space: normal;
    }

    .header-row,
    .footer-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .portfolio-image {
        height: 180px;
    }
}