/* Hope & Inspire — Decap editor styling
   =========================================================================
   Decap ships as a prebuilt React app, so this cannot restyle it the way a
   stylesheet we own would. What it can do is set the typography, the page
   colour and the sizing of the things an editor actually touches, so /admin
   reads as part of this site rather than as a generic tool.

   Two things to know before editing this file:

   1. Decap generates its class names with Emotion — they look like
      "css-1a2b3c-AppHeader". The hash changes between releases; the readable
      suffix does not. So every hook below matches on the suffix, e.g.
      [class*="AppHeader"]. This is why src/admin/index.html pins the Decap
      version exactly. Bump that version and these need re-checking.

   2. Anything that matches nothing simply does nothing — a wrong guess here
      leaves the default styling in place, it does not break the editor.

   Sections
     1. Type and page
     2. Login screen
     3. App header
     4. Collection list
     5. Editor and fields
     6. Buttons
     7. Media library
     8. Small screens
   ========================================================================= */

/* --- 1. Type and page ---------------------------------------------------- */

:root {
  --hi-blue: #2b8fcd;

  /* A darker shade of Sky Blue, used anywhere white text sits on blue.
     White on the full-strength #2B8FCD measures 3.55:1, which fails WCAG AA
     for normal text; this measures 4.88:1 and passes. The brand rules allow a
     tint of one of the three colours where one is needed, and this is admin
     chrome only — the public site's Sky Blue is untouched. */
  --hi-blue-deep: #2377ac;

  --hi-lime: #8fcd2b;
  --hi-ink: #1a1a1a;
  --hi-muted: #888888;
  --hi-bg: #f8f8f6;
  --hi-surface: #ffffff;
  --hi-border: #e8e8e6;
}

/* Decap sets its own font and background on body with enough weight to win a
   plain rule, so these two carry !important. Verified in the running editor:
   without it, body stayed on system-ui and Decap's #eff0f4. */
body,
input,
textarea,
select,
button,
[class*="AppHeader"],
[class*="EditorContainer"],
[class*="ControlPaneContainer"] {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif !important;
}

/* The editor is a working surface, not a document — 15px is the floor set for
   the public site and it applies just as much to the person typing. */
body {
  background: var(--hi-bg) !important;
  color: var(--hi-ink);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
[class*="EditorControl"] h2 {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
}

/* --- 2. Login screen ----------------------------------------------------- */

/* The first thing Fr. Mircea sees. Plain white with a stock logo reads as a
   developer tool; this makes it look like his own site.
   The component is StyledAuthenticationPage — confirmed in the running app. */
[class*="StyledAuthenticationPage"] {
  background: var(--hi-bg) !important;
}

[class*="LoginButton"] {
  background: var(--hi-blue-deep) !important;
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  border-radius: 8px !important;
}

/* --- 3. App header ------------------------------------------------------- */

[class*="AppHeader"] {
  background: var(--hi-blue-deep) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* Decap's header text is its own indigo (#3a69c7), which on our Sky Blue bar
   is very nearly invisible — "Contents", "Media" and the site link all but
   vanished. Everything in the bar is forced to white, including the SVG icons,
   which are drawn with currentColor. */
[class*="AppHeaderNavLink"],
[class*="AppHeaderButton"],
[class*="AppHeaderSiteLink"],
[class*="AppHeaderActions"] a,
[class*="AppHeaderActions"] button,
[class*="AppHeaderContent"] a,
[class*="AppHeaderContent"] button {
  color: #ffffff !important;
  font-weight: 600;
}

[class*="AppHeader"] svg {
  fill: currentColor;
}

/* The inactive nav item should read as inactive without becoming unreadable. */
[class*="AppHeaderNavLink"]:not([class*="Active"]) {
  opacity: 0.82;
}

[class*="AppHeaderNavLink"]:hover,
[class*="AppHeaderSiteLink"]:hover {
  opacity: 1;
  text-decoration: underline;
}

/* --- 4. Collection list -------------------------------------------------- */

[class*="SidebarHeading"] {
  font-family: "Lora", Georgia, serif;
  font-size: 18px;
}

[class*="NavLink"] {
  border-radius: 8px;
}

/* The description under each collection name is the one place a hint can be
   given before an editor opens anything. Make it readable, not fine print. */
[class*="CollectionTop"] p,
[class*="CollectionHeader"] p {
  color: var(--hi-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 58ch;
}

/* Entry cards: a little more room and a visible edge, so the list of posts
   scans as a list of things rather than a wall. */
[class*="CardsGrid"] > * {
  border: 1px solid var(--hi-border);
  border-radius: 10px;
}

/* --- 5. Editor and fields ------------------------------------------------ */

/* With the preview pane switched off (see config.yml) Decap gives the editor
   the full width, which is far too wide to read a single column of fields in.
   Cap it and centre it. */
[class*="EditorContainer"] [class*="ControlPaneContainer"] {
  max-width: 900px;
  margin: 0 auto;
}

/* Field labels carry the plain-English names an editor navigates by. They are
   small and grey by default. */
[class*="FieldLabel"] {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  color: var(--hi-ink) !important;
  text-transform: none !important;
}

/* Hints are the actual instructions for a non-technical editor. Default Decap
   renders them as small muted text under the input; give them real presence. */
[class*="FieldHint"],
[class*="ControlHint"] {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--hi-muted) !important;
  font-style: normal !important;
  margin-top: 6px;
}

/* Breathing room between fields. The homepage collection is a long single
   column; without this it reads as one undifferentiated block. */
[class*="ControlContainer"] {
  margin-bottom: 22px !important;
}

input[type="text"],
input[type="url"],
input[type="email"],
textarea,
select,
[class*="ControlContainer"] [class*="widget"] input {
  font-size: 15px !important;
  line-height: 1.6 !important;
  border-radius: 8px !important;
}

/* Focus has to be obvious — this is used on laptops in bright rooms. */
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--hi-blue) !important;
  outline-offset: 1px;
}

/* List items (gallery photos, board members, groups) get a clear edge so it
   is obvious where one item ends and the next begins. */
[class*="ListItemTopBar"] {
  background: var(--hi-bg) !important;
  border-radius: 8px 8px 0 0;
}

[class*="ObjectWidgetTopBar"] {
  background: var(--hi-bg) !important;
}

/* --- 6. Buttons ---------------------------------------------------------- */

/* Publish is the one button that must never be hunted for. Magenta is
   reserved for the public site's donate and primary actions, so the editor
   uses Sky Blue for its primary and keeps lime for the positive state. */
[class*="ToolbarButton"],
[class*="PublishButton"] {
  font-weight: 600 !important;
  border-radius: 8px !important;
}

[class*="PublishButton"] {
  background: var(--hi-blue-deep) !important;
  color: #fff !important;
}

/* --- 7. Media library ---------------------------------------------------- */

[class*="MediaLibraryModal"] {
  border-radius: 12px;
}

/* Upload is the action Fr. Mircea needs on a photo-heavy post; make it the
   loudest thing in the dialog. */
[class*="MediaLibrary"] [class*="UploadButton"] {
  background: var(--hi-blue-deep) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* --- 8. Small screens ---------------------------------------------------- */

/* Same rule as the public site: every @media block lives at the bottom of the
   file, in its own section. */
@media (max-width: 800px) {
  [class*="EditorContainer"] [class*="ControlPaneContainer"] {
    max-width: none;
    padding-left: 16px;
    padding-right: 16px;
  }

  [class*="FieldHint"],
  [class*="ControlHint"] {
    font-size: 15px !important;
  }
}