/* Community app styles. Brand tokens, containers, grid, navbar, buttons and
   alerts come from the shared ctn-theme.css. */

:root,
:host {
    --pico-form-element-spacing-vertical: 0rem; /* 0.75rem; */
}

/* ctn-theme.css zeroes this out so infosite sections butt against its navbar;
   the community app wants breathing room between the navbar and page headings. */
body > main {
    padding-top: 1.5rem;
}

/* ------------------------------------------------------------------ *
 * Form actions
 * ------------------------------------------------------------------ */

/* Pico stretches a form's submit button to the full width of the form, and inside a page-width
   panel that produces a "Log in" button over a thousand pixels wide. Capping the width leaves the
   button reading as a control rather than a banner, and because the width is still 100% the cap
   simply stops applying once the form is narrower than it, which is what a phone wants.

   The cap is in rem, so it tracks the root font size that ctn-theme.css scales up past 1280px and
   the button keeps its proportions on a very wide screen.

   Buttons that sit in a `.grid` next to the control they act on -- the team page's "Set team type",
   the account list's "Search", "Make leader" -- are sized by the grid column rather than by this
   rule, and are deliberately left to fill it so they stay aligned with their companion. That is why
   this only matches a button that is a form's own direct child. */

:root,
:host {
    --ctn-form-action-width: 20rem;
}

form > button[type="submit"],
form > input[type="submit"] {
    max-width: var(--ctn-form-action-width);
}

/* The same treatment for an article's own action when that action is a link rather than a form.
   Pico only stretches button[type="submit"], so a link styled as a button shrank to fit its text
   and sat at a different width from every submit button on the same page -- the dashboard's "Join
   a competition", "Open the community Discord" and "Account management" were three different
   widths, while "Save details" and "Change password" on the account page matched each other.

   To a reader these are the same thing: the one thing this panel is for. So they share the width
   and the cap above, and a new panel gets it without anyone remembering a class. The footer
   selector is for a card that puts its action in Pico's footer band instead. */

article > a[role="button"],
article > footer > a[role="button"] {
    display: block;
    width: 100%;
    max-width: var(--ctn-form-action-width);
}

/* Keep wide data tables usable without making the entire page scroll sideways. */
.table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: var(--pico-spacing);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.table-scroll:focus-visible {
  outline: 2px solid var(--pico-primary);
  outline-offset: 2px;
}

.table-scroll table {
  margin-bottom: 0;
}

/* Pico's grid carries no bottom margin of its own, and the cards inside it are stretched to the
   row height, so their own bottom margins are absorbed and the panel below sat closer to this row
   than the panels below it sit to each other.
   The gap is moved onto the grid itself and taken off the cards, so exactly one article-sized gap
   is left however the row is sized. */
.team-summary-grid {
  align-items: stretch;
  margin-bottom: var(--pico-block-spacing-vertical);
}

.team-summary-card {
  height: 100%;
  margin-bottom: 0;
}

.team-status-list,
.team-status-list dd {
  margin: 0;
}

.team-status-list > div + div {
  margin-top: 1rem;
}

.team-status-list dt {
  font-weight: 700;
}

.team-ready-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.1rem;
}

.team-ready-status span {
  font-size: 1.4rem;
  line-height: 1;
}

.team-ready-status-yes {
  color: #18743a;
}

.team-ready-status-no {
  color: #b42318;
}

.team-not-ready-reasons {
  margin: 0.5rem 0 0;
}

/* Competition cards */

/* Three cards across at most, so they stay wide enough for a name like "Referral Competition
   (2026)" to fit. The count is set explicitly rather than via minmax(): ctn-theme.css caps the
   container at 1320px, and no single track minimum yields 3 columns at both that width and the
   960px one. Breakpoints follow ctn-theme.css's own container steps. */
.competition-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .competition-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .competition-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.competition-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  margin-bottom: 0;
}

.competition-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  overflow: hidden;
}

.competition-card-image-default {
  background: linear-gradient(to left, #3F67C7 50%, #E85E57 50%);
}

/* Past competitions are dimmed, but their buttons stay untouched. */
.competition-card-image-past {
  position: relative;
  filter: grayscale(1);
}

.competition-card-image-past::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(90, 90, 90, 0.45);
  pointer-events: none;
}

.competition-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.competition-card-actions a[role="button"] {
  margin-bottom: 0;
}

/* The competition page's own row of actions, next to the description. Like the card's, it is
   sized to its buttons rather than stretched to the article: sitting side by side is the point,
   and the full-width rule for a card's single action would stack them instead. */
.competition-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--pico-spacing);
}

.competition-actions a[role="button"] {
  margin-bottom: 0;
}

/* A competition description is authored as Markdown and rendered to real headings, lists and
   paragraphs, so it is a block of prose rather than the single paragraph it used to be. Only the
   leading gap needs correcting: a description that opens with a heading would otherwise start
   well below the top of the card, since headings carry a large top margin. */
.competition-description > :first-child {
  margin-top: 0;
}

.competition-description > :last-child {
  margin-bottom: 0;
}

.competition-hero {
  max-width: 420px;
  margin: 0 auto 1.5rem;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.competition-join-button {
  display: block;
  width: 100%;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 1rem;
}

.competition-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.competition-card-image img.competition-card-fallback {
  width: auto;
  max-width: 70%;
  height: auto;
  max-height: 70%;
  object-fit: contain;
}

.competition-card-body {
  padding: 1rem;
}

.competition-card-body h3 {
  margin-bottom: 0.25rem;
}

.competition-card-dates {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.competition-card-preview img {
  max-height: 160px;
  width: auto;
  border-radius: 8px;
}

main.homepage > article {
  background: none;
  box-shadow: none;
}

main.homepage > article:nth-child(odd) {
  /* Your styles here */
  background-color: #f7f7f7 !important;
}


section .section-heading {
    text-align: center;
    margin: 2rem;
}

.container-gray {
    background-color: #f7f7f7;
}

.community-splash {
  display: grid;
  min-height: calc(100vh - 145px);
  place-items: center;
  padding: 4rem 1.5rem;
  text-align: center;
}

.community-splash-content {
  max-width: 760px;
}

.community-logo {
  width: min(320px, 70vw);
  margin-bottom: 2rem;
}

/* Echoes the infosite's headline strip; parchment and blue sampled from
   Capture_the_Narrative_Web_Headline.png. The size cap keeps the title on one
   line inside the 760px content column, so it reads as a band not a block. */
.community-splash h1 {
  display: inline-block;
  margin-bottom: 1.5rem;
  padding: 0.25em 0.7em;
  transform: rotate(-1deg);
  background: #fcf6e9;
  color: #2a55be;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
}

.community-intro {
  max-width: 620px;
  margin: 0 auto 2.5rem;
  font-size: 1.15rem;
  line-height: 1.5;
}

.community-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.community-action {
  min-width: 190px;
  margin-bottom: 0;
  padding: 0.8rem 1.5rem;
  border-color: var(--ctn-red);
  background: var(--ctn-red);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
}

.community-action:hover,
.community-action:focus {
  border-color: var(--ctn-blue);
  background: var(--ctn-blue);
  color: #fff;
}

.community-action-secondary {
  border-color: var(--ctn-blue);
  background: transparent;
  color: var(--ctn-blue);
}

.community-action-secondary:hover,
.community-action-secondary:focus {
  border-color: var(--ctn-blue);
  background: var(--ctn-blue);
  color: #fff;
}

.community-ctn-home {
  margin: 2.5rem 0 0;
  font-size: 0.95rem;
}

@media (max-width: 700px) {
  .community-splash {
    min-height: calc(100vh - 110px);
    padding-block: 3rem;
  }
}

.hero {
    padding-top: 4rem;
    padding-bottom: 3rem;
    text-align: center;
    color: #f8f8f8;
    background: url(/static/img/intro-bg_xlg_nl.jpeg) no-repeat center center;
    background-size: cover;
}

.hero-logo {
    width: 381px;
    height: auto;
    margin-bottom: 1rem;
}

.hero-headline {
    max-width: 80%;
}

.hero-button {
    background: white;
    color: #ea2524;
    font-weight: 700;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
    border-color: #ccc;
}

.quote-box {
    position:relative;
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 60px;
    padding: 50px 20px 20px 20px;
    box-shadow: 1px 3px 3px #585858;
}

.quote-box-quote {
    font-size: 150px;
    position: absolute;
    top: -80px;
    left: -20px;
    color: #e28787;
    font-family: serif;
    z-index: 1;
}

.quote-box-text {
    font-size: 1rem;
    font-style: italic;
    min-height: 60px;
    position: relative;
    z-index: 2;
}

.quote-box hr {
    border:none;
    border-top: 2px solid #e28787;
    margin: 20px 0;
    width:60px;
    margin-left: 0;
}

.quote-box-author {
    text-align: right;
    font-weight: 700;
    font-size: 0.8rem;
    color: #193273;
    min-height: 32px;
    margin-top: 10px;
}

.twoot-example {
    text-align: center;
    width:100%;
}

.twoot-example span {
    display:inline-block;
    margin:0 auto;
    background: white;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
    margin-bottom: 2rem;
    text-align:center;
}
.twoot-example span:hover {
    transform: translateY(-5px);
}
.twoot-example span img {
    border-radius:8px;
}

.sponsor {
    text-align: center;
    width:100%;
    margin-bottom:2rem;
}

.sponsor span {
    display:inline-block;
    margin:0 auto;
}

.sponsor span img {
    max-height: 100px;
    margin: 1rem;
}

.tech-card {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom:1rem;
}

.tech-card-agents {
    border-top: 4px solid #3F67C7;
}

.tech-card-properties {
    border-top: 4px solid #28a745;
}

.tech-card-code {
    border-top: 4px solid #E85E57;
}

.tech-card-system {
    border-top: 4px solid #ffc107;
}

.tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.tech-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.tech-number {
    font-size: 1.1em;
    font-weight: bold;
    color: #3F67C7;
    margin-bottom: 0.5rem;
    font-family: "Fugaz One","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.tech-label {
    font-size: 0.9em;
    font-weight: bold;
    color: #343a40;
    margin-bottom: 1rem;
}

.tech-description {
    font-size: 0.8em;
    color: #6c757d;
    line-height: 1.5;
}
/* Referral QR codes are rendered at a fixed pixel size, so keep them from overflowing a narrow
   viewport while staying crisp on wide ones. */
.referral-qr {
    margin: 0;
}

.referral-qr img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    image-rendering: pixelated;
    background: #fff;
    padding: 0.5rem;
    border-radius: 4px;
}

/* Discord integration.

   Blurple (#5865F2) is Discord's brand colour, used here on the linking controls so they read as
   the Discord part of the page. The tick/cross colours are shared with the team readiness
   statuses above, since they mean the same thing in both places. */

/* The Discord panel is an ordinary card whose heading is the wordmark rather than a word, so the
   logo just has to be sized to sit on the standard header band. */
.discord-panel-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 24px;
}

.discord-panel-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.05rem;
  color: #18743a;
}

/* The gap between linking and the enrolment worker actually putting the account in the server.
   It sits where the "Open the community Discord" button will appear, and is replaced by it. */
.discord-waiting {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.discord-spinner {
  flex: none;
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-top: 0.3em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: discord-spin 0.8s linear infinite;
}

@keyframes discord-spin {
  to { transform: rotate(360deg); }
}

/* Somebody who has asked for less motion gets a still ring rather than nothing, so the note still
   reads as something in progress. */
@media (prefers-reduced-motion: reduce) {
  .discord-spinner { animation: none; }
}

.discord-button,
.discord-button:hover,
.discord-button:focus {
  background: #5865F2;
  border-color: #5865F2;
  color: #fff;
}

.discord-button:hover,
.discord-button:focus {
  background: #4752C4;
  border-color: #4752C4;
}

/* The dashboard reminder is an ordinary dismissable alert, so it only needs room for the close
   button and a little space above its call to action. */
#discord-prompt p {
  padding-right: 2rem;
}

/* It carries no coloured header bar, so its dismiss control has to read against the alert's own
   background rather than being the white one that sits on such a bar. */
#discord-prompt .alert-dismiss {
  color: var(--ctn-blue);
}

#discord-prompt .alert-dismiss:hover,
#discord-prompt .alert-dismiss:focus {
  background: rgba(63, 103, 199, 0.15);
}

#discord-prompt .discord-button {
  margin: 0;
}

/* The Discord column in a team's member table. */
.discord-column-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.discord-column-heading img {
  height: 15px;
  width: auto;
}

.discord-linked-yes,
.discord-linked-no {
  font-size: 1.2rem;
  line-height: 1;
}

.discord-linked-yes {
  color: #18743a;
}

.discord-linked-no {
  color: #b42318;
}

/* The admin account list's search box and paging controls. */
.admin-account-search {
  margin-bottom: 0.5rem;
}

.admin-account-search .grid > div {
  display: flex;
  gap: 0.5rem;
}

.admin-account-paging {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

/* Survey completion, sharing the readiness colours since the marks mean the same thing. */
.survey-done,
.survey-todo {
  font-size: 1.2rem;
  line-height: 1;
}

.survey-done {
  color: #18743a;
}

.survey-todo {
  color: #b42318;
}