/*
 * morzy.art, NESTJS-PLAN N5. Loaded after bootstrap.min.css and alexmorzy.css (the old
 * css/style.css, unchanged):
 *   1. what the old css/overload.php wrote into every page, from the settings: the fonts and
 *      colours now arrive as CSS variables on .page-style (apps/web/src/components/alexmorzy.tsx);
 *   2. styles for the new markup (menu with <details>, logo outside <h1>, links inside the tiles);
 *   3. the minor fixes of morzy.art SPEC section 10 (phones, keyboard focus, images).
 */

/* ---------------- 1. Settings (was css/overload.php) ---------------- */
.page-style {
  min-height: 100vh;
  background-color: var(--bg);
  /* The old "Background Color" coloured the text (decision B23: now the "text colour"). */
  color: var(--text);
}
/* FONT 1 */
#main-contact,
.subcategory-list-item,
.list-projects .list-group-item p,
.project-second-title,
.project-content,
.scrollTop {
  font-family: var(--font1);
}
/* FONT 2 */
.list-projects .list-group-item h2,
.project-title,
.list-proj-item,
.list-proj-item a {
  font-family: var(--font2);
}
/* FONT 3 */
.sidebar-nav .panel-group .first-heading .panel-title a,
.sidebar-nav .panel-group .first-heading .menu-label {
  font-family: var(--font3);
}
/* COLOR 1 */
.list-projects .list-group-item h2,
.project-title,
#contact-mail,
#contact-phone {
  color: var(--c1) !important;
}
/* COLOR 2 */
.list-proj-item,
.list-proj-item a,
.subcategory-list-item,
.list-projects .list-group-item p,
.project-second-title,
.project-content,
.scrollTop {
  color: var(--c2) !important;
}
/* COLOR 3: hover, and the open sub-section and current project */
.list-proj-item a:hover,
.list-proj-item a.active,
.subcategory-list-item:hover,
details[open] > summary .subcategory-list-item,
.list-projects .list-group-item:hover p,
.scrollTop:hover,
.scrollTop:focus {
  color: var(--c3) !important;
}

/* ---------------- 2. New markup ---------------- */
/* The logo is no longer a heading (one <h1> per page); it keeps the old <h1>'s line box. */
header .site-logo {
  margin: 0;
  font-size: 36px;
  line-height: 1.1;
}
/* The contact block keeps its 2 lines even when the e-mail or phone is empty: on project pages,
   style.css moves the title up by a fixed 172px, which fits this header height only. */
#main-contact {
  min-height: 40px;
}
/* The accordion opens with <details> instead of Bootstrap's JavaScript. */
.sidebar-nav summary {
  display: block;
  cursor: pointer;
  list-style: none;
}
.sidebar-nav summary::-webkit-details-marker {
  display: none;
}
.sidebar-nav .panel-title {
  display: block;
}
.sidebar-nav .panel-group .first-heading .menu-label {
  font-size: 28px;
}
.sidebar-nav .panel-group .first-heading .menu-label img {
  position: relative;
  top: -3px;
}
/* The tile's link is inside the tile now (the old <a> around <li> was invalid HTML). */
.list-projects .list-group-item > a {
  display: block;
  color: inherit;
  text-decoration: none;
}
/* "Back to top" is a link now. */
.scrollTop {
  display: inline-block;
}
.scrollTop:hover,
.scrollTop:focus {
  text-decoration: none;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------------- 3. Fixes (SPEC section 10) ---------------- */
/* A thumbnail that isn't square is cropped instead of stretched. */
.list-group-item img {
  object-fit: cover;
}
/* A visible focus ring for keyboard users. */
a:focus-visible,
summary:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* The "Menu" button exists on phones only. */
.menu-toggle {
  display: none;
}
@media (max-width: 767px) {
  .menu-toggle {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 8px 12px;
    border: 1px solid currentColor;
    /* The titles' colour: the site's text colour can be the background's (B23). */
    color: var(--c1);
    background: transparent;
    font-size: 18px;
    text-align: left;
    text-transform: uppercase;
  }
  .menu-panel[data-open='false'] {
    display: none;
  }
  #main-logo {
    max-width: 100%;
    height: auto;
  }
  /* Two tiles per row, as wide as the screen allows (was one 200 px tile per row). */
  .list-projects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
  }
  .list-projects .list-group-item {
    display: block;
    padding: 0;
  }
  .list-projects .list-group-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .list-projects .list-group-item h2 {
    margin: 10px 0 4px;
    font-size: 15px;
  }
  .list-projects .list-group-item p {
    margin: 0;
    font-size: 15px;
  }
}