/*
 * Copyright (c) RISC OS Technologies 2026. All rights reserved.
 * Closed source — not for redistribution.
 *
 * RISC OS One "Frosted" site theme and page layout.
 * Imported at the top of every app stylesheet, so app rules still win for
 * app-specific detail. Styles the shared template ids used by the upstream
 * layouts: template_header_2025, template_navigation, template_main,
 * template_body, template_sidebar, template_footer_2025.
 *
 * Palette from the RISC OS One Invision theme and logo: navy header,
 * ice blue brand, pale ice, dark slate; crystal starfield, slate and cells
 * backgrounds.
 */

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&family=Roboto+Mono:wght@400;500&display=swap");

:root {
  --ro1-navy: #1e324a;
  --ro1-navy-deep: #122236;
  --ro1-ice: #6fa8dc;
  --ro1-ice-pale: #9fc5e8;
  --ro1-ice-wash: #eaf2fa;
  --ro1-slate: #1f2126;
  --ro1-slate-2: #2b2c31;

  --ro1-ground: #eef3f8;
  --ro1-surface: rgb(255 255 255 / .9);
  --ro1-surface-solid: #ffffff;
  --ro1-text: #2f363c;
  --ro1-text-soft: #5a6572;
  --ro1-line: #d3dde8;
  --ro1-link: #17639f;
  --ro1-link-hover: #0d3f69;
  --ro1-code-bg: #1f2126;
  --ro1-code-text: #d7e8f7;
  --ro1-ok: #1f7a4a;
  --ro1-warn: #9a5b00;
  --ro1-bad: #b3261e;
  --ro1-shadow: 0 18px 40px -26px rgb(18 34 54 / .55);

  --ro1-font: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ro1-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ro1-radius: 10px;
  --ro1-width: 1240px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ro1-ground: #16181c;
    --ro1-surface: rgb(31 33 38 / .9);
    --ro1-surface-solid: #1f2126;
    --ro1-text: #e2e8ef;
    --ro1-text-soft: #a7b3c1;
    --ro1-line: #353a44;
    --ro1-link: #8fc0ec;
    --ro1-link-hover: #c5e0f7;
    --ro1-ice-wash: #1c2633;
    --ro1-ok: #6fd09a;
    --ro1-warn: #f0b54a;
    --ro1-bad: #ff8a80;
    --ro1-shadow: 0 18px 40px -26px rgb(0 0 0 / .9);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ro1-ground);
  color: var(--ro1-text);
  font: 400 16px/1.6 var(--ro1-font);
}
@media (prefers-color-scheme: dark) {
  body { background: var(--ro1-ground) url("/images/bg-cells.jpg") repeat fixed; }
}
a { color: var(--ro1-link); text-underline-offset: .18em; }
a:hover { color: var(--ro1-link-hover); }
:focus-visible { outline: 3px solid var(--ro1-ice); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
code, kbd, pre, tt { font-family: var(--ro1-mono); font-size: .92em; }
pre {
  background: var(--ro1-code-bg); color: var(--ro1-code-text);
  padding: .9em 1.1em; border-radius: 8px; overflow-x: auto; line-height: 1.5;
}
hr.for_no_css_browers { display: none; }

/* ---------- Header: crystal starfield + logo ---------- */
#template_header_2025 {
  background: var(--ro1-navy-deep) url("/images/bg-crystal-2400.webp") center 40% / cover no-repeat;
  position: relative;
  isolation: isolate;
}
#template_header_2025::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(10 22 38 / .78) 0%, rgb(10 22 38 / .25) 55%, rgb(10 22 38 / .55) 100%);
}
#template_header_content {
  max-width: var(--ro1-width); margin: 0 auto;
  padding: clamp(14px, 2.4vw, 26px) clamp(16px, 3vw, 32px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.ro1-brand { display: block; line-height: 0; }
.ro1-brand img { height: clamp(72px, 9vw, 112px); width: auto; filter: drop-shadow(0 6px 18px rgb(0 0 0 / .45)); }
.ro1-tagline {
  margin: 0; max-width: 34ch; text-align: right;
  color: #e6f1fb; font-size: clamp(.9rem, .8rem + .4vw, 1.05rem); line-height: 1.45;
  text-shadow: 0 1px 12px rgb(0 0 0 / .6);
}
.ro1-tagline strong { color: #fff; font-weight: 500; }
@media (max-width: 640px) { .ro1-tagline { text-align: left; } }

/* ---------- Navigation bar ---------- */
#template_navigation {
  background: linear-gradient(180deg, #243c58 0%, var(--ro1-navy) 100%);
  border-bottom: 3px solid var(--ro1-ice);
  box-shadow: 0 6px 18px -12px rgb(0 0 0 / .6);
}
#template_navigation_content { max-width: var(--ro1-width); margin: 0 auto; padding: 0 clamp(8px, 2vw, 22px); }
#template_navigation_main { display: flex; flex-wrap: wrap; align-items: stretch; }
#template_navigation_main > a.template_navigation {
  display: flex; align-items: center; min-height: 48px; padding: 0 .95em;
  color: #eef5fc; font-weight: 500; font-size: .98rem; letter-spacing: .01em; text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -3px;
}
#template_navigation_main > a.template_navigation:hover { background: rgb(255 255 255 / .07); color: #fff; }
#template_navigation_main > a.template_navigation.is-current { border-bottom-color: var(--ro1-ice-pale); color: #fff; }
#template_navigation_hub { margin-left: auto; display: flex; align-items: center; padding: 0 .8em; color: #d6e6f5; font-size: .92rem; }
#template_navigation_hub a { color: #fff; font-weight: 500; }

/* ---------- Main two-column layout ---------- */
#template_main {
  max-width: var(--ro1-width); margin: 0 auto;
  padding: clamp(18px, 3vw, 34px) clamp(14px, 3vw, 32px) 48px;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(18px, 2.5vw, 30px);
  align-items: start;
}
#template_body { min-width: 0; }
#template_body_content {
  background: var(--ro1-surface); border: 1px solid var(--ro1-line); border-radius: var(--ro1-radius);
  padding: clamp(16px, 2.6vw, 30px); box-shadow: var(--ro1-shadow);
}
#template_main_block_end { display: none; }
#content > :first-child { margin-top: 0; }
#content h1, #content h2, #content h3 { color: var(--ro1-text); line-height: 1.25; }
#content h1 { font-weight: 700; letter-spacing: -.01em; }

#template_sidebar { min-width: 0; }
#template_sidebar_content { display: grid; gap: 14px; }
.template_sidebar_node {
  background: var(--ro1-surface); border: 1px solid var(--ro1-line); border-radius: var(--ro1-radius);
  padding: 14px 16px 16px; box-shadow: var(--ro1-shadow);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: .94rem;
}
.template_sidebar_node h3 {
  margin: 0 0 .5em; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ro1-link);
}
.template_sidebar_node p { margin: .4em 0; }
.template_sidebar_node ul { margin: .3em 0; padding-left: 1.1em; }
.ro1-sidebar-downloads {
  background: linear-gradient(160deg, rgb(30 50 74 / .96), rgb(18 34 54 / .96)), url("/images/bg-crystal-1200.webp") center / cover;
  border-color: #2d4a6b; color: #e6f1fb;
}
.ro1-sidebar-downloads h3 { color: var(--ro1-ice-pale); }
.ro1-sidebar-downloads a { color: #fff; }

@media (max-width: 900px) {
  #template_main { grid-template-columns: 1fr; }
}

/* ---------- Forms, buttons, tables ---------- */
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], select, textarea {
  font: inherit; color: var(--ro1-text); background: var(--ro1-surface-solid);
  border: 1px solid var(--ro1-line); border-radius: 6px; padding: .45em .6em; max-width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--ro1-ice); outline-offset: 0; border-color: var(--ro1-ice); }
input[type="submit"], button, .button {
  font: 500 .95rem/1 var(--ro1-font); color: #fff; background: var(--ro1-navy);
  border: 1px solid var(--ro1-navy); border-radius: 6px; padding: .6em 1em; cursor: pointer;
}
input[type="submit"]:hover, button:hover, .button:hover { background: #2a4868; }
.search_form { display: flex; gap: 6px; }
.search_form input[type="search"], .search_form input[type="text"] { flex: 1; min-width: 0; }

#content table { border-collapse: collapse; }
#content table th { background: var(--ro1-ice-wash); text-align: left; }
#content table th, #content table td { border: 1px solid var(--ro1-line); padding: .45em .7em; vertical-align: top; }

/* Hub flash messages: <h2 class="notice|attention|alert"> */
h2.notice, h2.attention, h2.alert, p.notice, p.error {
  margin: 0 0 1em; padding: .7em 1em; border-radius: 8px; font-size: 1rem; font-weight: 500;
  border: 1px solid currentColor; background: var(--ro1-surface-solid);
}
h2.notice, p.notice { color: var(--ro1-ok); }
h2.attention { color: var(--ro1-warn); }
h2.alert, p.error { color: var(--ro1-bad); }

.moderation {
  margin-top: 1.5em; padding: .8em 1em; border-radius: 8px; font-size: .9rem;
  background: var(--ro1-ice-wash); border: 1px dashed var(--ro1-ice);
}

/* ---------- Footer on slate ---------- */
#template_footer_2025 {
  background: var(--ro1-slate) url("/images/bg-slate.jpg") repeat;
  color: #b9c4d0; border-top: 3px solid var(--ro1-navy);
  padding: 26px clamp(16px, 3vw, 32px) 34px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  font-size: .9rem;
}
#template_footer_2025 > div { max-width: 600px; }
#template_footer_2025 a.template_navigation { color: #fff; text-decoration: none; font-weight: 500; }
#template_footer_2025 a:hover { text-decoration: underline; }
#template_footer_2025 p { margin: .5em 0 0; }
#template_footer_environment { color: var(--ro1-warn); font-weight: 700; }
.template_navigation_divider { color: #6f7b88; }

/* ---------- CMS content (Radiant pages) ---------- */
.ro1-lede { font-size: 1.12rem; color: var(--ro1-text-soft); max-width: 62ch; }
.ro1-hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 3vw, 32px); align-items: center;
  margin: 0 0 28px; padding: clamp(18px, 3vw, 30px); border-radius: var(--ro1-radius);
  background: linear-gradient(120deg, rgb(12 26 44 / .92), rgb(20 46 78 / .72)), url("/images/bg-crystal-1200.webp") center / cover;
  color: #e8f2fb;
}
.ro1-hero img { width: 100%; height: auto; filter: drop-shadow(0 10px 24px rgb(0 0 0 / .5)); }
#content .ro1-hero h1 { color: #fff; margin: 0 0 .35em; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); }
.ro1-hero p { margin: 0 0 1em; max-width: 52ch; }
.ro1-actions { display: flex; flex-wrap: wrap; gap: 10px; }
a.button { display: inline-flex; align-items: center; text-decoration: none; }
.ro1-hero a.button { background: #fff; color: var(--ro1-navy); border-color: #fff; }
.ro1-hero a.button.ro1-button-quiet { background: transparent; color: #fff; border-color: rgb(255 255 255 / .55); }
@media (max-width: 720px) { .ro1-hero { grid-template-columns: 1fr; } .ro1-hero img { max-width: 320px; } }

.ro1-cards { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ro1-cards a {
  display: grid; gap: 4px; height: 100%; box-sizing: border-box; padding: 14px 16px; text-decoration: none;
  border: 1px solid var(--ro1-line); border-radius: var(--ro1-radius); background: var(--ro1-surface-solid); color: var(--ro1-text);
}
.ro1-cards a:hover { border-color: var(--ro1-ice); }
.ro1-cards b { color: var(--ro1-link); font-size: 1.02rem; }
.ro1-cards span { color: var(--ro1-text-soft); font-size: .92rem; line-height: 1.45; }

.ro1-download-group { margin-bottom: 26px; }
.ro1-download {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: start;
  padding: 16px 0; border-top: 1px solid var(--ro1-line);
}
.ro1-download h3 { margin: 0 0 .25em; font-size: 1.12rem; }
.ro1-download p { margin: .35em 0; }
.ro1-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: .84rem; }
.ro1-meta span { padding: 2px 8px; border-radius: 999px; background: var(--ro1-ice-wash); color: var(--ro1-text-soft); }
.ro1-download-button { align-self: center; white-space: nowrap; }
.ro1-table-scroll { overflow-x: auto; margin-top: 10px; }
@media (max-width: 560px) { .ro1-download { grid-template-columns: 1fr; } .ro1-download-button { justify-self: start; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}