/*
 * DEDAL landing pages.
 * Colours come from the "JIC" theme in WebODM (Administration -> Theme), so the landing
 * pages and WebODM look like one site. Change them in both places together.
 */
:root {
    --dedal-text: #2C3E50;          /* theme: primary */
    --dedal-bg: #FFFFFF;            /* theme: secondary */
    --dedal-link: #1E3A5F;          /* theme: tertiary */
    --dedal-header: #4F6D90;        /* theme: header background */
    --dedal-header-text: #FFFFFF;   /* theme: header primary */
    --dedal-btn: #2C3E50;           /* theme: button primary */
    --dedal-btn-hover: #1E2B38;
    --dedal-btn-default: #95A5A6;   /* theme: button default */
    --dedal-danger: #E74C3C;        /* theme: button danger */
    --dedal-danger-hover: #CF4436;
    --dedal-border: #E7E7E7;        /* theme: border */
    --dedal-highlight: #F7F7F7;     /* theme: highlight */
    --dedal-muted: #6B7A89;
    --dedal-success-bg: #E8F8EA;
    --dedal-success-text: #1E6B2B;
    --dedal-error-bg: #FDECEA;
    --dedal-error-text: #9B2C21;
    --dedal-info-bg: #EAF1F8;
    --dedal-info-text: #1E3A5F;
    --dedal-radius: 6px;
    --dedal-shadow: 0 1px 2px rgba(44, 62, 80, 0.06), 0 4px 16px rgba(44, 62, 80, 0.06);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Arial, as the site has always used */
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--dedal-text);
    background: var(--dedal-highlight);
}

a { color: var(--dedal-link); }
a:hover, a:focus { color: var(--dedal-header); }

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

h1, h2, h3 { color: var(--dedal-text); line-height: 1.25; margin: 0 0 12px; font-weight: 600; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0 0 12px; }

/* ---- Top link bar: shared with WebODM (theme "HTML before header") ---- */
.site-links {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    padding: 6px 16px;
    background: var(--dedal-bg);
    border-bottom: 1px solid var(--dedal-border);
    font-size: 13px;
}

.site-links a {
    color: var(--dedal-text);
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 4px;
}

.site-links a:hover, .site-links a:focus { background: var(--dedal-highlight); color: var(--dedal-link); }
.site-links a.active { background: var(--dedal-highlight); color: var(--dedal-link); font-weight: 600; }

/* ---- Header: same as WebODM's #navbar-top ---- */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    padding: 6px 16px;
    background: var(--dedal-header);
    color: var(--dedal-header-text);
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dedal-header-text);
    text-decoration: none;
    font-size: 18px;
}

.site-brand:hover, .site-brand:focus { color: var(--dedal-header-text); opacity: 0.9; }
.site-brand img { width: 36px; height: 36px; }

.site-header .btn { border-color: rgba(255, 255, 255, 0.6); }

/* ---- Page body ---- */
.site-main {
    flex: 1;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 32px 16px 48px;
}

.page-title { text-align: center; margin-bottom: 24px; }
.page-title p { color: var(--dedal-muted); margin: 0; }

.card {
    background: var(--dedal-bg);
    border: 1px solid var(--dedal-border);
    border-radius: var(--dedal-radius);
    box-shadow: var(--dedal-shadow);
    padding: 28px;
}

.card + .card { margin-top: 20px; }

/* Single-form pages (register, password reset, ...) */
.card-narrow { max-width: 440px; margin: 0 auto; }
.card-medium { max-width: 600px; margin: 0 auto; }

.card-header { text-align: center; margin-bottom: 20px; }
.card-header h1 { font-size: 22px; margin-bottom: 6px; }
.card-header p { color: var(--dedal-muted); margin: 0; }

.card-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--dedal-border);
    color: var(--dedal-muted);
    font-size: 13px;
}

.card-footer p:last-child { margin-bottom: 0; }

.card-danger { border-top: 3px solid var(--dedal-danger); }

/* ---- Forms (match WebODM's Bootstrap form-control) ---- */
.form-group { margin-bottom: 16px; }

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.form-control {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font: inherit;
    color: var(--dedal-text);
    background: var(--dedal-bg);
    border: 1px solid #CCD3DA;
    border-radius: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--dedal-header);
    box-shadow: 0 0 0 3px rgba(79, 109, 144, 0.2);
}

.form-control[readonly] { background: var(--dedal-highlight); color: var(--dedal-muted); }

textarea.form-control { resize: vertical; min-height: 140px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.form-hint { display: block; margin-top: 4px; color: var(--dedal-muted); font-size: 12px; font-weight: normal; }

.checkbox { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
.checkbox input { margin-top: 4px; }
.checkbox label { font-weight: normal; margin: 0; }

.recaptcha { margin: 4px 0 16px; min-height: 78px; }

/* Shown by DEDAL.formError() in base.html */
.form-error {
    display: none;
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 4px;
    background: var(--dedal-error-bg);
    color: var(--dedal-error-text);
}

.form-error.visible { display: block; }

/* ---- Buttons (match WebODM's .btn-primary / .btn-default / .btn-danger) ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    color: #FFFFFF;
    background: var(--dedal-btn);
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s;
}

.btn:hover, .btn:focus { background: var(--dedal-btn-hover); color: #FFFFFF; }
.btn:focus-visible { outline: 3px solid rgba(79, 109, 144, 0.4); outline-offset: 1px; }

.btn-block { width: 100%; }
.btn-default { background: var(--dedal-btn-default); }
.btn-default:hover, .btn-default:focus { background: #7F8C8D; }
.btn-danger { background: var(--dedal-danger); }
.btn-danger:hover, .btn-danger:focus { background: var(--dedal-danger-hover); }
.btn-outline { background: transparent; border-color: currentColor; }
.btn-outline:hover, .btn-outline:focus { background: rgba(255, 255, 255, 0.12); }
.btn-sm { padding: 4px 12px; font-size: 13px; }

/* ---- Flash messages ---- */
.alerts { max-width: 600px; margin: 0 auto 20px; }

.alert {
    padding: 12px 16px;
    border-radius: 4px;
    border-left: 4px solid currentColor;
    margin-bottom: 10px;
}

.alert-success { background: var(--dedal-success-bg); color: var(--dedal-success-text); }
.alert-error { background: var(--dedal-error-bg); color: var(--dedal-error-text); }
.alert-info, .alert-message { background: var(--dedal-info-bg); color: var(--dedal-info-text); }

/* ---- Long text pages (about, terms) ---- */
.prose { max-width: 820px; margin: 0 auto; }
.prose h2 { margin-top: 28px; }
.prose h2:first-child { margin-top: 0; }
.prose p { text-align: left; }

.lead { font-size: 16px; color: var(--dedal-muted); }

.figure { margin: 24px 0; text-align: center; }
.hero-banner { display: block; width: 100%; max-width: 560px; height: auto; margin: 4px auto 18px; }
.hero-banner.hero-small { max-width: 320px; margin-bottom: 10px; }
.figure img { border-radius: var(--dedal-radius); max-width: 520px; width: 100%; }
.figure figcaption { margin-top: 8px; color: var(--dedal-muted); font-style: italic; font-size: 13px; }

.media { display: flex; align-items: flex-start; gap: 24px; }
.media > :first-child { flex: 1; }
.media img { max-height: 140px; width: auto; }

.note { color: var(--dedal-muted); font-size: 13px; }

/* Terms and conditions clauses */
.clauses { list-style: none; padding: 0; margin: 0 0 12px; }
.clauses li { margin-bottom: 6px; padding-left: 36px; text-indent: -36px; }
.clauses li strong { display: inline-block; width: 36px; text-indent: 0; }

/* ---- Card grids (conference, training) ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.grid .card + .card { margin-top: 0; }

.card-media { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin: 16px 0; }
.card-media img { border-radius: var(--dedal-radius); }

.tag {
    display: inline-block;
    padding: 2px 8px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: var(--dedal-info-bg);
    color: var(--dedal-info-text);
    font-size: 12px;
    font-weight: 600;
}

/* ---- Guide ---- */
.guide { max-width: 860px; margin: 0 auto; }
.guide .card + .card { margin-top: 20px; }
.guide .prose { max-width: none; }
.guide h2 { display: flex; align-items: center; gap: 10px; }
.guide ol, .guide ul { padding-left: 22px; }
.guide li { margin-bottom: 6px; }
.guide code { background: var(--dedal-highlight); padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.guide .figure img { max-width: 100%; border: 1px solid var(--dedal-border); }
.step {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--dedal-header); color: #FFFFFF; font-size: 14px;
}
.toc ol { margin: 6px 0 0; }
.toc li { margin-bottom: 2px; }
html { scroll-behavior: smooth; }
.guide section { scroll-margin-top: 16px; }

/* ---- Loading page ---- */
.progress {
    position: relative;
    height: 12px;
    margin: 20px 0 8px;
    background: var(--dedal-highlight);
    border: 1px solid var(--dedal-border);
    border-radius: 6px;
    overflow: hidden;
}

.progress-bar { height: 100%; width: 0; background: var(--dedal-header); transition: width 1s linear; }

/* ---- Footer ---- */
.site-footer {
    padding: 16px;
    background: var(--dedal-bg);
    border-top: 1px solid var(--dedal-border);
    color: var(--dedal-muted);
    font-size: 12px;
    text-align: center;
}

.site-footer a { color: var(--dedal-muted); }

/* ---- Small screens ---- */
@media (max-width: 600px) {
    .site-main { padding: 20px 12px 32px; }
    .card { padding: 20px 16px; }
    .form-row { grid-template-columns: 1fr; }
    .media { flex-direction: column; }
}

/* ---- Key / value table (farmer application) ---- */
.details { width: 100%; border-collapse: collapse; }
.details th, .details td { text-align: left; vertical-align: top; padding: 8px 0; border-bottom: 1px solid var(--dedal-border); }
.details th { width: 110px; color: var(--dedal-muted); font-weight: 600; }

/* ---- Calibration method page ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 18px 0; }
.stats div { background: var(--dedal-highlight); border: 1px solid var(--dedal-border); border-radius: var(--dedal-radius); padding: 12px 14px; }
.stats b { display: block; font-size: 22px; color: var(--dedal-header); line-height: 1.2; margin-bottom: 4px; }
.stats span { font-size: 12px; color: var(--dedal-muted); }
.formula {
    background: var(--dedal-highlight); border: 1px solid var(--dedal-border); border-left: 3px solid var(--dedal-header);
    border-radius: 4px; padding: 10px 14px; overflow-x: auto; font-size: 13px; line-height: 1.6;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.toc-inline { font-size: 13px; color: var(--dedal-muted); }
.methods-text {
    margin: 12px 0; padding: 12px 16px; background: var(--dedal-info-bg); border-left: 4px solid var(--dedal-header);
    border-radius: 4px; color: var(--dedal-text);
}
.details th { width: 190px; }

/* ---- Documentation hub ---- */
.docs-cards { margin-top: 18px; }
.docs-cards a.card { display: block; text-decoration: none; color: var(--dedal-text); padding: 16px 18px; transition: border-color 0.15s, box-shadow 0.15s; }
.docs-cards a.card:hover, .docs-cards a.card:focus { border-color: var(--dedal-header); box-shadow: 0 2px 12px rgba(44, 62, 80, 0.12); }
.docs-cards b { display: block; color: var(--dedal-header); font-size: 15px; margin-bottom: 4px; }
.docs-cards span { font-size: 13px; color: var(--dedal-muted); }
.arch svg { width: 100%; height: auto; }
.arch .box rect { stroke-width: 1.5; }
.arch .box text { text-anchor: middle; font-size: 14px; font-weight: 600; fill: var(--dedal-text); font-family: inherit; }
.arch .box text.s { font-size: 12px; font-weight: normal; fill: var(--dedal-muted); }
.arch .box text.tag { font-size: 12px; fill: var(--dedal-header); }
.arch .ours rect { fill: #EAF1F8; stroke: var(--dedal-header); }
.arch .third rect { fill: #F7F7F7; stroke: #95A5A6; }
.arch .mixed rect { fill: #F2F6F9; stroke: var(--dedal-header); stroke-dasharray: 5 3; }
.arch .user rect { fill: #FFFFFF; stroke: #95A5A6; }
.arch .ln { stroke: #6B7A89; stroke-width: 1.5; fill: none; marker-end: url(#ah); }
.arch .ln.dash { stroke-dasharray: 5 4; }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; border: 1.5px solid var(--dedal-header); }
.key.ours { background: #EAF1F8; } .key.third { background: #F7F7F7; border-color: #95A5A6; } .key.mixed { background: #F2F6F9; border-style: dashed; }
.guide .grid .card + .card { margin-top: 0; }