/* Ported from tunefish-synth.com (Pagekit theme-brick / UIkit) — fonts + layout match */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@300;400&family=Roboto+Mono&display=swap');

body {
    background-color: #a06040 !important;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#page-wrapper {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 8px 8px 8px #804040;
    background: #fbfbfb;
    border-radius: 10px;
    overflow: hidden;
}

/* Brick: .uk-container max-width 1200px; from 1220px up → 1480px (wider main column) */
@media (min-width: 1220px) {
    #page-wrapper {
        max-width: 1480px;
    }
}

/*
 * Quark/Spectre caps `.container.grid-lg` at 976px (and other grid-* similarly), so widening
 * #page-wrapper alone left empty bands. Let inner layout use the full shell width.
 */
#page-wrapper .container[class*='grid-'] {
    max-width: 100%;
}

/* Headings — Montserrat, uppercase (theme-brick). Nav / brand stay Roboto like the original UIkit bar. */
#page-wrapper h1,
#page-wrapper h2,
#page-wrapper h3,
#page-wrapper h4,
#page-wrapper h5,
#page-wrapper h6,
#page-wrapper .tf-panel-title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

#page-wrapper h1 {
    font-size: 36px;
    line-height: 46px;
    color: #333;
}

#page-wrapper h2 {
    font-size: 30px;
    line-height: 40px;
    color: #333;
}

#page-wrapper h3 {
    font-size: 18px;
    line-height: 24px;
    color: #333;
}

#page-wrapper h4 {
    font-size: 16px;
    line-height: 22px;
    color: #333;
}

#page-wrapper h5,
#page-wrapper h6 {
    font-size: 14px;
    line-height: 20px;
    color: #333;
}

#page-wrapper code,
#page-wrapper kbd,
#page-wrapper pre,
#page-wrapper samp {
    font-family: 'Roboto Mono', Consolas, monospace, serif;
    font-size: 12px;
}

/* Footer was outside #page-wrapper in stock Quark; we moved it inside. Match shell and width. */
#footer.section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: auto;
    border-top: 1px solid rgba(128, 64, 64, 0.12);
    background-color: #f0f0f0 !important;
}

#header.section {
    background-color: #fbfbfb;
    border-bottom: 1px solid rgba(128, 64, 64, 0.15);
}

/* Navbar: Montserrat + all caps (matches previous site title + requested menu style) */
#page-wrapper #header .navbar,
#page-wrapper #header .dropmenu {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}

#page-wrapper #header .dropmenu > ul > li > a,
#page-wrapper #header .dropmenu > ul > li > span {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 26px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#page-wrapper #header .dropmenu ul ul a {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 22px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

#page-wrapper #header .login-status-wrapper {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tf-brand {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #505050 !important;
}

.tf-brand:hover {
    color: #f08080 !important;
}

/* Mobile slide-out nav (outside #page-wrapper in Quark base) */
.mobile-container .overlay-menu a,
.mobile-container .overlay-menu .treemenu li a {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 26px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#body-wrapper {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
}

.tf-hero {
    background-color: #804040;
    background-size: cover;
    background-position: center;
    padding: 4.5rem 0;
    min-height: 200px;
}

@media (min-width: 600px) {
    .tf-hero {
        padding: 6rem 0;
        min-height: 260px;
    }
}

.tf-hero-inner {
    min-height: 1px;
}

.tf-main-columns {
    align-items: flex-start;
}

.tf-main {
    background-color: #fbfbfb;
    border-radius: 10px;
    padding-right: 1rem;
}

.tf-sidebar {
    padding-left: 0.5rem;
}

@media (max-width: 960px) {
    .tf-sidebar {
        padding-left: 0;
        margin-top: 1.5rem;
    }
}

.tf-panel {
    margin-bottom: 1.5rem;
}

.tf-panel-title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    margin-bottom: 0.75rem;
    color: #333;
}

.tf-panel p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #555;
}

.tf-donate {
    text-align: center;
    margin-top: 1rem;
}

a {
    color: #f08080;
}

a:hover {
    color: #e06060;
}

/* List link pills (from original site) */
.tf-main ul li a,
.tf-sidebar a {
    border-bottom: none;
}

.tf-main ul li a {
    display: inline-block;
    border: 1px solid #f0c0c0;
    border-radius: 6px;
    padding: 0.15rem 0.45rem;
    margin: 0.15rem 0;
    color: #f0a0a0 !important;
}

.tf-main ul li a:hover {
    background: rgba(240, 160, 160, 0.12);
    color: #e07070 !important;
}

/* Download tables when you add them in Markdown/HTML */
.download-table {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
}

.download-table td {
    background-color: #fcfcfc;
    border: 1px solid #eee;
    padding: 0.5rem 0.75rem;
}

.download-table td:nth-child(1) {
    width: 25%;
}

.download-table td:nth-child(2) {
    width: 40%;
}