/* ============================================================
   Paleozoic Games — presskit() theme
   Loads after UIkit 1.2.0, which the engine pulls from a CDN.

   PRINCIPLE: theme only, never re-layout. UIkit's float grid
   (.uk-grid + .uk-width-medium-*) does the layout and works fine.
   Overriding it with flex breaks the sidebar. Everything below
   changes colour, type, and surfaces only — so presskit() can be
   updated underneath without losing the skin.
   ============================================================ */

:root {
    --bg:        #0e0e0e;
    --panel:     #161616;
    --panel-2:   #1e1e1e;
    --line:      #2a2a2a;
    --text:      #c9c9c9;
    --text-dim:  #8a8a8a;
    --heading:   #ffffff;
    --accent:    #6cb4ee;
    --radius:    10px;
}

/* ---------- base ---------- */

html, body {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    line-height: 1.7 !important;
    -webkit-font-smoothing: antialiased;
}

body { padding: 2.5rem 0 0 !important; }

a { color: var(--accent) !important; text-decoration: none !important; }
a:hover { text-decoration: underline !important; }

hr { border: none !important; border-top: 1px solid var(--line) !important; margin: 2.5rem 0 !important; }

img { max-width: 100%; height: auto; }

/* UIkit paints these white — make them transparent, but do NOT touch
   display/float/width, which is what positions the columns. */
.uk-panel, .uk-block, .uk-article, .uk-form,
.uk-well, .uk-nav, .uk-navbar, .uk-badge {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* ---------- typography ---------- */

h1, h2, h3, h4, h5, h6 {
    color: var(--heading) !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

h1 { font-size: 2rem !important; line-height: 1.2 !important; }
h2 {
    font-size: 1.3rem !important;
    margin: 2.75rem 0 1.1rem !important;
    padding-bottom: .55rem !important;
    border-bottom: 1px solid var(--line) !important;
}
h3 { font-size: 1.05rem !important; }

p { color: var(--text) !important; }
strong, b { color: var(--heading) !important; }

/* ---------- sidebar ---------- */

#navigation { padding-right: 1.5rem; }

.nav-header {
    color: var(--heading) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin: 0 0 .1rem !important;
    line-height: 1.3 !important;
}
a.nav-header {
    display: inline-block;
    color: var(--text-dim) !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-bottom: 1.75rem !important;
}

.uk-nav-side > li > a {
    color: var(--text) !important;
    padding: .45rem .7rem !important;
    border-radius: 7px !important;
    border: none !important;
    font-size: .93rem !important;
    background: transparent !important;
}
.uk-nav-side > li > a:hover {
    background: var(--panel-2) !important;
    color: var(--heading) !important;
    text-decoration: none !important;
}
.uk-nav-side > li.uk-active > a {
    background: var(--panel-2) !important;
    color: var(--heading) !important;
}

/* ---------- factsheet (left column inside #content) ---------- */

#content .uk-width-medium-2-6 strong {
    display: block;
    color: var(--text-dim) !important;
    font-size: .71rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 1.35rem 0 .1rem !important;
    line-height: 1.4 !important;
}
/* presskit() wraps each factsheet value in its own <p>; UIkit's default
   paragraph margin leaves a gap between the label and its value. */
#content .uk-width-medium-2-6 p,
#content .uk-width-medium-2-6 a { margin: 0 !important; line-height: 1.55 !important; }
/* long store URLs must wrap inside the factsheet column, not overflow it */
#content .uk-width-medium-2-6 a,
#content .uk-width-medium-2-6 p {
    overflow-wrap: anywhere;
    word-break: break-word;
}
#content .uk-width-medium-2-6 > p:first-child > strong:first-child { margin-top: 0 !important; }

/* ---------- product index on the company page ---------- */

#content ul { padding-left: 1.2rem; }
#content li { margin-bottom: .4rem; }

/* ---------- images ---------- */

.uk-grid.images img,
#images img,
#logo img {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    display: block;
    width: 100%;
    background: var(--panel-2);
    transition: border-color .15s ease;
}
.uk-grid.images a:hover img,
#images a:hover img,
#logo a:hover img { border-color: var(--accent) !important; }

img.header {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 2rem;
    background: var(--panel-2);
}

/* ---------- download bars ---------- */

.uk-alert {
    background: var(--panel-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
    padding: .8rem 1.05rem !important;
    transition: border-color .15s ease;
}
a:hover .uk-alert { border-color: var(--accent) !important; }

/* ---------- forms ---------- */

input, textarea, select {
    background: var(--panel-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: 7px !important;
    color: var(--text) !important;
    padding: .55rem .75rem !important;
    font-family: inherit !important;
}
input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: var(--accent) !important;
}
button, input[type="submit"], .uk-button {
    background: var(--accent) !important;
    border: none !important;
    color: #06121e !important;
    font-weight: 650 !important;
    border-radius: 7px !important;
    padding: .55rem 1.1rem !important;
    cursor: pointer;
}
button:hover, input[type="submit"]:hover, .uk-button:hover { filter: brightness(1.1); }

/* ---------- tables ---------- */

table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line) !important; padding: .55rem .5rem !important; text-align: left; }
th { color: var(--text-dim) !important; font-size: .73rem; text-transform: uppercase; letter-spacing: .1em; }

/* ---------- footer ---------- */

.uk-text-small, footer {
    color: var(--text-dim) !important;
    font-size: .84rem !important;
}
.uk-text-small a, footer a { color: var(--text-dim) !important; }
.uk-text-small a:hover, footer a:hover { color: var(--accent) !important; }