/*
 * Musas Del Arte - shared design tokens and components
 * Reusable across every page (landing, register, login, dashboard, ...).
 * Depends on UIkit (https://getuikit.com) being loaded first.
 */

:root {
    --ayart-black: #000000;
    --ayart-dark: #17140f;      /* near-black warm background */
    --ayart-darker: #100e0b;
    --ayart-accent: #a27e46;    /* burnt orange, buttons / rules / prices */
    --ayart-accent-hover: #b3672f;
    --ayart-cream: #f4efe8;     /* light warm section background */
    --ayart-muted: #8a8378;
    --ayart-hero-tint: #4a3524; /* single knob for the hero gradient's mood color */
    --ayart-hero-grey: #505050; /* single knob for the hero gradient's mood color */
}

body {
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    color: #262220;
}

h1, .uk-h1,
h2, .uk-h2,
h3, .uk-h3,
h4, .uk-h4,
h5, .uk-h5,
h6, .uk-h6,
.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge,
.uk-heading-3xlarge {
    font-family: "Space Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
}

a { color: inherit; }

/* ---------- Navbar ---------- */
.ayart-navbar {
    background: transparent;
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 100;
}

.ayart-logo {
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 1rem;
    text-transform: uppercase;
}

.ayart-logo small {
    display: block;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 0.65rem;
    opacity: .7;
    text-transform: none;
}

.ayart-nav-link {
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 12px;
}

/* ---------- Buttons ---------- */
.uk-button-ayart {
    background-color: var(--ayart-accent);
    border: 1px solid var(--ayart-accent);
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.uk-button-ayart:hover {
    background-color: var(--ayart-black);
    border-color: var(--ayart-accent);
    color: #fff;
}
.uk-button-ayart-muted {
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0 !important;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8rem;
}
.uk-navbar-container {
    background: var(--ayart-dark) !important;
}
.uk-button-ayart-muted:hover {
    background-color: var(--ayart-accent);
    padding: 0 !important;
    color: #fff;
}

.uk-button-ayart-outline {
    border: 1px solid var(--ayart-accent);
    background-color: var(--ayart-black);
    border-color: var(--ayart-accent);
    color: #fff;
}

.uk-button-ayart-outline:hover {
    background-color: var(--ayart-accent);
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8rem;
}
/*  */
.uk-button-profile-ayart {
    background-color: var(--ayart-hero-tint);
    border: 1px solid var(--ayart-hero-grey);
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.uk-button-profile-ayart:hover {
    background-color: var(--ayart-black);
    border-color: var(--ayart-hero-grey);
    color: #fff;
}
.uk-button-profile-ayart-muted {
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0 !important;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.uk-button-profile-ayart-muted:hover {
    background-color: var(--ayart-hero-tint);
    padding: 0 !important;
    color: #fff;
}

.uk-button-profile-ayart-outline {
    border: 1px solid var(--ayart-hero-tint);
    background-color: var(--ayart-black);
    color: #fff;
}

.uk-button-profile-ayart-outline:hover {
    background-color: var(--ayart-hero-tint);
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.uk-button-profile-small {
    padding: 0 15px;
    line-height: 28px;
    font-size: 0.875rem;
}

/* ---------- Section heading with rule ---------- */
.ayart-rule {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ayart-rule .line {
    flex: 1 1 auto;
    height: 2px;
    background: var(--ayart-accent);
}

.ayart-rule h2 {
    margin: 0;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.ayart-rule--right .line { order: 1; }
.ayart-rule--right h2 { order: 2; }
.ayart-rule--left h2 { order: 1; }
.ayart-rule--left .line { order: 2; }

/* ---------- Footer ---------- */
.ayart-footer {
    background: var(--ayart-darker);
    color: rgba(255, 255, 255, .7);
}

.ayart-footer a:hover { color: var(--ayart-hero-grey); }

.ayart-footer-heading {
    margin: 0 0 14px 0;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
}

.ayart-footer-list {
    margin: 0;
    padding: 0;
}

.ayart-footer-list li {
    padding: 4px 0;
}

.ayart-footer-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}