/* Stylesheet for the political advertising transparency site.

   Colours and type follow www.trnavskyhlas.sk so the page reads as part of the
   paper: brand red #b00c28, text #333, rules #ddd, Roboto. It is a disclosure
   page, not a news front page, so the brand shows in the masthead, links and
   buttons, and the rest stays quiet.

   No inline styles anywhere, so the CSP can stay strict. Fonts are a system
   stack rather than a web font: nothing to upload over FTP, no extra request,
   and Roboto is used wherever the reader already has it. */

:root {
    /* Sampled from www.trnavskyhlas.sk */
    --color-brand: #b00c28;
    --color-brand-dark: #8c0a20;
    --color-text: #333333;
    --color-rule: #dddddd;
    --color-tint: #eaeff2;
    --color-page: #ffffff;

    /* #777 is what the paper uses for secondary text, but it falls just under
       4.5:1 on white. #666 is the same intent and passes. */
    --color-muted: #666666;

    --color-link: var(--color-brand);
    --color-danger: #b00c28;

    --font-sans: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue",
        Arial, sans-serif;

    --measure: 44rem;
    --gap: 1.5rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    margin: 0;
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
}

a {
    color: var(--color-link);
}

a:hover,
a:focus {
    text-decoration: none;
}

h1,
h2,
h3 {
    font-weight: 700;
    line-height: 1.25;
}

h1 {
    font-size: 1.75rem;
    margin: 0 0 var(--gap);
}

/* --- Masthead ------------------------------------------------------------- */
/* The paper's red bar, so the page is recognisably part of it. */

.site-header {
    background: var(--color-brand);
    padding: 0;
    border-bottom: none;
    margin-bottom: 2rem;
}

.site-header-inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0.875rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
}

body.admin .site-header-inner {
    max-width: 64rem;
}

.site-masthead {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-masthead a {
    color: #ffffff;
    text-decoration: none;
}

.site-section {
    margin: 0;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.85);
}

.site-main,
.site-footer {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 1rem;
}

.site-main {
    padding-bottom: 3rem;
}

.site-footer {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    border-top: 1px solid var(--color-rule);
    color: var(--color-muted);
    font-size: 0.875rem;
}

/* --- Forms and messages --------------------------------------------------- */

.form {
    max-width: 32rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 1.25rem;
}

.field label {
    font-weight: bold;
}

.field input,
.field textarea,
.field select {
    font: inherit;
    padding: 0.5rem;
    border: 1px solid #8a8a8a;
    border-radius: 2px;
    background: #fff;
    color: inherit;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: 2px solid var(--color-brand);
    outline-offset: 1px;
}

.field-hint {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.field-error {
    color: var(--color-brand);
    font-size: 0.9375rem;
}

.actions button,
button[type="submit"] {
    font: inherit;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-brand);
    border-radius: 2px;
    background: var(--color-brand);
    color: #fff;
    cursor: pointer;
    font-weight: 500;
}

.actions button:hover,
button[type="submit"]:hover {
    background: var(--color-brand-dark);
    border-color: var(--color-brand-dark);
}

.notice,
.error {
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid;
    font-size: 0.9375rem;
}

.notice {
    border-color: #8a9aa6;
    background: var(--color-tint);
}

.error {
    border-color: var(--color-brand);
    background: #fbeef1;
}

.form-note {
    color: var(--color-muted);
    font-size: 0.875rem;
}

/* --- Admin navigation ----------------------------------------------------- */

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 2rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--color-rule);
}

.admin-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
}

.admin-nav-logout {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    font-size: 0.9375rem;
}

.admin-nav-user {
    color: var(--color-muted);
}

.admin-nav-logout button {
    padding: 0.25rem 0.75rem;
    border-color: #8a8a8a;
    background: transparent;
    color: var(--color-link);
}

.admin-nav-logout button:hover {
    background: var(--color-tint);
}

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

.lede {
    color: var(--color-muted);
    max-width: var(--measure);
}

.empty {
    color: var(--color-muted);
    font-style: italic;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 2rem;
    font-size: 0.9375rem;
}

.admin-table th,
.admin-table td {
    padding: 0.5rem 0.5rem 0.5rem 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-rule);
}

.admin-table th {
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.cell-order form {
    display: flex;
    gap: 0.25rem;
}

.cell-order button {
    padding: 0.125rem 0.5rem;
    background: transparent;
    border-color: #8a8a8a;
    color: inherit;
}

.cell-order button[disabled] {
    opacity: 0.35;
    cursor: default;
}

.cell-usage {
    text-align: right;
    white-space: nowrap;
}

.row-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.row-form input[type="text"] {
    flex: 1 1 16rem;
    font: inherit;
    padding: 0.375rem 0.5rem;
    border: 1px solid #8a8a8a;
    border-radius: 2px;
}

.row-form button {
    padding: 0.375rem 0.875rem;
}

.row-type {
    color: var(--color-muted);
    white-space: nowrap;
}

.row-active {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    white-space: nowrap;
}

.row-error td {
    border-bottom: none;
    padding-top: 0;
}

.delete-form {
    margin: 0.75rem 0 0.5rem;
    padding: 0.75rem;
    border-left: 4px solid var(--color-brand);
    background: #fbeef1;
    max-width: 26rem;
}

.delete-warning {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
}

.delete-form input[type="text"] {
    display: block;
    width: 100%;
    margin: 0.25rem 0 0.75rem;
    font: inherit;
    padding: 0.375rem 0.5rem;
    border: 1px solid #8a8a8a;
    border-radius: 2px;
}

button.danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
}

button.danger:hover {
    background: var(--color-brand-dark);
    border-color: var(--color-brand-dark);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    .admin-table,
    .admin-table thead,
    .admin-table tbody,
    .admin-table tr,
    .admin-table th,
    .admin-table td {
        display: block;
        width: auto;
    }

    .admin-table thead {
        display: none;
    }

    .admin-table tr {
        margin: 0 0 1.5rem;
        padding: 0 0 1rem;
        border-bottom: 1px solid var(--color-rule);
    }

    .admin-table td {
        border-bottom: none;
        padding: 0.25rem 0;
    }

    .cell-usage {
        text-align: left;
    }
}

/* The admin area needs more width than the reading measure. */

/* The masthead is full-bleed and centres its own inner wrapper, so it must not
   be caught by this — only the content columns widen. */
body.admin .site-main,
body.admin .site-footer {
    max-width: 64rem;
}

/* --- Campaign admin ------------------------------------------------------- */

a.button {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-brand);
    border-radius: 2px;
    background: var(--color-brand);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}

a.button:hover {
    background: var(--color-brand-dark);
    border-color: var(--color-brand-dark);
}

.row-slug {
    display: block;
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.state {
    white-space: nowrap;
    font-size: 0.875rem;
}

.state-published::before {
    content: "\25CF\00A0";
    color: #1a7a3c;
}

.state-draft::before {
    content: "\25CB\00A0";
    color: var(--color-muted);
}

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

.campaign-editor {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 3rem;
    align-items: start;
}

.form-wide {
    max-width: none;
}

.campaign-aside h2 {
    font-size: 1.0625rem;
    margin: 0 0 0.75rem;
}

.campaign-aside h2 + * {
    margin-top: 0;
}

.campaign-aside > h2 ~ h2 {
    margin-top: 2.5rem;
}

.field-prefix {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.field-inline label {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-weight: bold;
}

.field-period {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.field-period input {
    font: inherit;
    padding: 0.5rem;
    border: 1px solid #8a8a8a;
    border-radius: 2px;
}

.field-period-dash {
    color: var(--color-muted);
}

.field-hint code {
    font-size: 0.875em;
    background: #f2f2f2;
    padding: 0.0625rem 0.25rem;
    border-radius: 2px;
}

.revision-list {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
}

.revision-list li {
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--color-rule);
}

.revision-list a[aria-current] {
    font-weight: bold;
    text-decoration: none;
}

.revision-snapshot {
    margin: 0 0 2rem;
    padding: 1rem;
    border: 1px solid var(--color-rule);
    background: #fafafa;
    font-size: 0.9375rem;
}

.revision-snapshot h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.revision-snapshot dt {
    font-weight: bold;
    margin-top: 0.75rem;
}

.revision-snapshot dd {
    margin: 0.125rem 0 0;
}

.revision-body {
    white-space: pre-wrap;
    font-size: 0.875rem;
    color: var(--color-muted);
}

@media (max-width: 767px) {
    .campaign-editor {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }
}

/* --- Public pages --------------------------------------------------------- */

.campaign-list {
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--color-brand);
}

.campaign-list li {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-rule);
}

/* Headline treatment: dark and bold like the paper's article links, with the
   brand red kept for hover, so a list of ten does not shout. */
.campaign-list a {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text);
    text-decoration: none;
}

.campaign-list a:hover,
.campaign-list a:focus {
    color: var(--color-brand);
    text-decoration: underline;
}

.report-link {
    margin: 2.5rem 0 0;
}

/* Section 8.2: the disclosure list is label on the left, value on the right.
   Each row stacks under 768px, label above value. */

.campaign-disclosure,
.campaign-body {
    margin: 2.5rem 0 0;
}

.column-heading {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand);
    margin: 0 0 1rem;
    padding: 0 0 0.5rem;
    border-bottom: 2px solid var(--color-brand);
}

.disclosure-list {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    margin: 0;
}

.disclosure-list dt,
.disclosure-list dd {
    margin: 0;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-rule);
}

.disclosure-list dt:first-of-type,
.disclosure-list dt:first-of-type + dd {
    border-top: none;
    padding-top: 0;
}

.disclosure-list dt {
    padding-right: 2rem;
    color: var(--color-muted);
}

.disclosure-list dd {
    overflow-wrap: anywhere;
}

.campaign-body > :first-child {
    margin-top: 0;
}

.campaign-body h1,
.campaign-body h2,
.campaign-body h3 {
    font-size: 1.125rem;
    line-height: 1.3;
    margin: 1.75rem 0 0.5rem;
}

.campaign-body ul,
.campaign-body ol {
    padding-left: 1.25rem;
}

.campaign-body blockquote {
    margin: 1.25rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--color-rule);
    color: var(--color-muted);
}

.campaign-body code {
    font-size: 0.875em;
    background: #f2f2f2;
    padding: 0.0625rem 0.25rem;
    border-radius: 2px;
}

.campaign-body pre {
    overflow-x: auto;
    padding: 0.75rem;
    background: #f2f2f2;
    border-radius: 2px;
}

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

.campaign-body table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
}

@media (max-width: 767px) {
    .disclosure-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .disclosure-list dt {
        padding: 0.75rem 0 0;
    }

    .disclosure-list dt + dd {
        border-top: none;
        padding-top: 0.125rem;
    }
}

/* --- Report form --------------------------------------------------------- */

/* The honeypot is hidden from people, not from bots: display:none is a hint a
   crawler can read, so this moves it out of view instead. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Submitted reports --------------------------------------------------- */

.cell-nowrap {
    white-space: nowrap;
}

.state-failed::before {
    content: "\26A0\00A0";
    color: var(--color-brand);
}

.state-failed {
    color: var(--color-brand);
}

.mail-error {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-muted);
    overflow-wrap: anywhere;
}

.row-detail td {
    padding-top: 0;
}

.report-reason {
    margin: 0.5rem 0 0;
    padding: 0.75rem;
    background: #fafafa;
    border-left: 3px solid var(--color-rule);
    max-width: 48rem;
}

/* --- Installer ------------------------------------------------------------ */

.check-hint,
.check-detail {
    display: block;
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.check-hint {
    max-width: 44rem;
    margin-top: 0.25rem;
}

.next-steps {
    max-width: var(--measure);
    padding-left: 1.25rem;
}

.next-steps li {
    margin: 0.375rem 0;
}

/* Article 13 information duty, under the report form. Quieter than the form
   itself, but not hidden: it has to be readable where the data is given. */

.privacy-notice {
    max-width: var(--measure);
    margin: 3rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--color-rule);
    font-size: 0.9375rem;
    color: var(--color-muted);
}

.privacy-notice h2 {
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}

.privacy-notice p {
    margin: 0 0 0.75rem;
}

.privacy-notice strong {
    color: var(--color-text);
}

/* State of a field whose stored value is deliberately not rendered back into
   the page — the SMTP password. An empty box would otherwise read as "not set". */

.field-state {
    font-size: 0.875rem;
    padding: 0.375rem 0.625rem;
    border-left: 3px solid var(--color-rule);
    background: #fafafa;
    color: var(--color-muted);
}

.field-state-ok {
    border-color: #1a7a3c;
    color: var(--color-text);
}

.field-state-warn {
    border-color: var(--color-brand);
    background: #fbeef1;
    color: var(--color-brand);
}

/* Fixed line under the heading on both public pages, naming what the page is.
   Client's wording and placement; the brand red carries the emphasis without a
   second type size fighting the headline. */

.transparency-notice {
    margin: -0.5rem 0 1.5rem;
    color: var(--color-brand);
    font-size: 1.125rem;
    font-weight: 700;
}