/*
Theme Name: Misultin
Theme URI: https://misultin.progettidemo.com/
Author: Codex
Description: Tema custom pulito e minimale per il progetto Misultin.
Version: 1.0.0
Text Domain: misultin
*/

:root {
    --bg: #f5efe5;
    --bg-alt: #efe4d6;
    --surface: rgba(255, 252, 246, 0.9);
    --surface-strong: #fffaf2;
    --text: #1f1a17;
    --muted: #6b5d52;
    --accent: #a05b2d;
    --accent-2: #355c7d;
    --border: rgba(31, 26, 23, 0.12);
    --shadow: 0 20px 60px rgba(42, 28, 18, 0.12);
    --radius: 28px;
    --content-width: min(1120px, calc(100vw - 32px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(160, 91, 45, 0.18), transparent 30%),
        radial-gradient(circle at top right, rgba(53, 92, 125, 0.14), transparent 28%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Segoe UI', sans-serif;
    line-height: 1.6;
}
a { color: inherit; text-decoration-color: rgba(160, 91, 45, 0.45); text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; display: block; }

.site-shell {
    width: var(--content-width);
    margin: 0 auto;
    padding: 24px 0 60px;
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(18px);
    background: rgba(245, 239, 229, 0.72);
    border-bottom: 1px solid rgba(31, 26, 23, 0.08);
}
.site-header-inner,
.site-footer-inner {
    width: var(--content-width);
    margin: 0 auto;
    padding: 18px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.branding {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.branding .site-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.branding .site-description { color: var(--muted); font-size: 0.95rem; }
.nav-primary ul {
    list-style: none;
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.nav-primary a {
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.nav-primary a:hover {
    border-color: var(--border);
    background: rgba(255,255,255,0.45);
}
.hero {
    margin-top: 28px;
    padding: clamp(32px, 6vw, 64px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(255,250,242,0.82));
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}
.hero::after {
    content: '';
    position: absolute;
    inset: auto -120px -140px auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(160, 91, 45, 0.22), transparent 68%);
    pointer-events: none;
}
.hero-kicker {
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: 700;
}
.hero h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.8rem, 7vw, 5.8rem);
    line-height: 0.95;
    margin: 14px 0 18px;
    max-width: 9ch;
}
.hero p {
    max-width: 62ch;
    font-size: 1.08rem;
    color: var(--muted);
}
.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.8);
    box-shadow: 0 8px 18px rgba(31, 26, 23, 0.06);
}
.button.primary {
    background: var(--text);
    color: #fff8f0;
    border-color: var(--text);
}
.section-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 24px 0;
}
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 12px 30px rgba(42, 28, 18, 0.06);
}
.panel h2, .entry-title, .page-title { font-family: Georgia, 'Times New Roman', serif; }
.panel h2 { margin-top: 0; font-size: 1.4rem; }
.content-area {
    display: grid;
    gap: 24px;
    margin-top: 24px;
    grid-template-columns: 1.55fr 0.9fr;
}
article, .widget, .post-card {
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 12px 30px rgba(42, 28, 18, 0.05);
}
.post-card + .post-card { margin-top: 18px; }
.entry-meta, .wp-caption-text, .posted-on { color: var(--muted); font-size: 0.95rem; }
.site-footer {
    margin-top: 40px;
    border-top: 1px solid rgba(31, 26, 23, 0.1);
    color: var(--muted);
}
.wp-block-image img, .alignwide, .alignfull { border-radius: 18px; }
@media (max-width: 900px) {
    .content-area, .section-grid { grid-template-columns: 1fr; }
    .site-header-inner, .site-footer-inner { flex-direction: column; align-items: flex-start; }
    .hero h1 { max-width: none; }
}