/* ------------------------------------------------------------------
   Colours and box style for shifts.dance (2026) – used with both the
   light and the dark background. Loaded after new.css.
   Each menu section has its own accent colour, set once here.
   ------------------------------------------------------------------ */

:root {
  --magenta:   #ff00f6;
  --cyan:      #00edff;
  --orange:    #ff3f00;  /* red-orange */
  --green:     #2bff88;
  --yellow:    #ffd400;
  --blue:      #3d6bff;
  --violet:    #a64dff;

  --accent:    var(--magenta);
  --on-accent: #1a1a1a;  /* text on an accent background */
}

/* Which colour belongs to which section (body and each menu item) */
.sec-home           { --accent: var(--magenta); }
.sec-about          { --accent: var(--cyan); }
.sec-pieces         { --accent: var(--magenta); }
.sec-projects       { --accent: var(--orange); }
.sec-fascia-map     { --accent: var(--green); }
.sec-decision-field { --accent: var(--yellow); }
.sec-calendar       { --accent: var(--blue);   --on-accent: #fff; }
.sec-contact        { --accent: var(--violet); --on-accent: #fff; }
.sec-legal          { --accent: var(--violet); --on-accent: #fff; }

/* Highlights: accent background */
a.active, .green a.active, .blue a.active, .red a.active,
#logo:hover, .green #logo:hover, .blue #logo:hover, .red #logo:hover,
#navbar a:hover, .green #navbar a:hover, .blue #navbar a:hover, .red #navbar a:hover {
  background: var(--accent);
  color: var(--on-accent);
}
#logo:hover a { color: var(--on-accent); }
.callist a.active { background: none; }

/* Header line in the section colour */
header, .green header, .blue header, .red header { border-bottom-color: var(--accent); }

/* Boxes: no frame, only a coloured line on top */
.fullborder, .green .fullborder, .blue .fullborder, .red .fullborder,
.filled, .green .filled, .blue .filled, .red .filled {
  background: none;
  border-top: 3px solid var(--accent);
}
.fullborder { padding: 14px 0 0; }
.topborder > h1:first-of-type, .topborder > h2:first-of-type, .topborder > h3:first-of-type,
.topborder > h4:first-of-type, .topborder > h5:first-of-type, .topborder > h6:first-of-type,
.texttopborder h1, .texttopborder h2, .texttopborder h3,
.texttopborder h4, .texttopborder h5, .texttopborder h6,
.topborder > .callist, .calmonth {
  border-top-color: var(--accent);
}

.outline:hover::after, .green .outline:hover::after,
.blue .outline:hover::after, .red .outline:hover::after {
  border-color: var(--accent);
}

/* Press slider */
.press-dot { background: var(--accent); }
.press-dot-current { outline-color: var(--accent); }

/* Projects overlay */
.proj-btn span { background: var(--accent); color: var(--on-accent); }

/* Menu with seven items: keep each item on one line, spread evenly */
@media (min-width: 768px) {
  #navbar ul.navpages { justify-content: space-between; gap: 1.2em; }
  #navbar ul.navpages li { flex-grow: 0; white-space: nowrap; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  #navbar ul.navpages { font-size: 0.85rem; gap: 0.8em; }
}

/* Footer: no coloured block, only a thin line in the section colour */
footer, .green footer, .blue footer, .red footer {
  background: none;
  border-top: 2px solid var(--accent);
}

/* ------------------------------------------------------------------
   Opening screen on the home page: five entry points
   ------------------------------------------------------------------ */
.opening {
  min-height: calc(100vh - 78px);
  display: flex;
  align-items: center;
  padding: 32px 0 48px;
}
.opening .maincont { width: 90%; }

.opening-name {
  font-family: 'GraebenbachMedium', Helvetica, sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}
.opening-name .logo-slash { margin: 0 0.2em; }
.opening-intro {
  font-size: 1.15rem;
  color: #555;
  max-width: 34em;
  margin-bottom: 14px;
}
.opening-about {
  display: inline-block;
  margin-bottom: 40px;
  font-size: 1.05rem;
  border-bottom: 3px solid var(--cyan);
  padding-bottom: 2px;
}
.opening-about:hover { background: var(--cyan); }

.entry-magenta { --entry: var(--magenta); --on-entry: #1a1a1a; }
.entry-cyan    { --entry: var(--cyan);    --on-entry: #1a1a1a; }
.entry-orange  { --entry: var(--orange);  --on-entry: #1a1a1a; }
.entry-green   { --entry: var(--green);   --on-entry: #1a1a1a; }
.entry-yellow  { --entry: var(--yellow);  --on-entry: #1a1a1a; }
.entry-blue    { --entry: var(--blue);    --on-entry: #fff; }
.entry-violet  { --entry: var(--violet);  --on-entry: #fff; }

.entries { display: grid; grid-template-columns: 1fr; gap: 14px; }
.entry {
  display: flex;
  flex-direction: column;
  border-top: 6px solid var(--entry);
  padding: 14px 14px 20px;
  transition: background 0.25s, color 0.25s;
}
.entry:hover, .entry:focus { background: var(--entry); color: var(--on-entry); }
.entry-title {
  font-family: 'GraebenbachMedium', Helvetica, sans-serif;
  font-size: 1.35rem;
  line-height: 1.1;
  text-transform: uppercase;
}
.entry-text { margin-top: 10px; font-size: 0.95rem; line-height: 1.35; }

.opening-more {
  display: inline-block;
  margin-top: 36px;
  font-size: 0.95rem;
  color: #555;
}
.opening-more:hover { color: #000; }

@media (min-width: 768px) {
  /* keep clear of the vertical name on the right */
  .opening .maincont { width: calc(100% - 160px); }
  .entries { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .entry { min-height: 170px; padding: 16px 14px 22px; }
}
@media (min-width: 1100px) {
  .entries { grid-template-columns: repeat(3, 1fr); }
  .entry { min-height: 230px; }
  .entry-title { font-size: 1.25rem; }
}
@media (min-width: 1400px) {
  .entry-title { font-size: 1.45rem; }
  .opening-name { font-size: 1.8rem; }
}

/* Links inside running text: always visible (also on phones, where there is no hover), 2026-11-06.
   Black text with an underline in the section's accent colour; buttons and styled links (with a class) are not affected. */
main :is(p, li, td, dd, blockquote):not(.callist *) a:not([class]) {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
main :is(p, li, td, dd, blockquote):not(.callist *) a:not([class]):hover,
main :is(p, li, td, dd, blockquote):not(.callist *) a:not([class]):focus-visible {
  text-decoration-thickness: 3px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Language switcher (FR/DE added 2026-11-08): menu and switcher share one line; the menu takes the free space */
@media (min-width: 768px) {
  #navbar .row { display: flex; align-items: center; }
  #navbar .row > div:first-child { flex: 1 1 auto; width: auto; min-width: 0; }
  #navbar .row > .langs-col { flex: 0 0 auto; width: auto; padding-left: 1.4em; }
  #navbar ul.langs { gap: 0.5em; margin: 0; }
  #navbar ul.langs li { flex-grow: 0; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  #navbar ul.navpages { font-size: 0.72rem; gap: 0.45em; }
  #navbar .row > .langs-col { padding-left: 0.8em; }
  #navbar ul.langs { gap: 0.35em; font-size: 0.72rem; }
}