/* Roboto sets everything on this page, loaded as a variable font so the
   project names can move between weights instead of snapping. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variables */
:root {
  --bg-color: rgb(255, 255, 255);
  --text-color: rgb(20, 20, 20);
  --border-color: rgb(0, 0, 255); /* Blue border */
  --accent-color: rgb(0, 0, 255); /* Blue accent */
  --title: rgb(20, 20, 20);
  --link: rgb(0, 0, 255);
  --muted: rgb(120, 120, 120);
  --desc: rgb(90, 90, 90); /* Dark grey for the project descriptions */
  /* Interface text */
  --font-main: 'Roboto', Arial, sans-serif;
  border: 15px solid blue;
}

body.dark {
  --bg-color: rgb(20, 20, 20);
  --text-color: rgb(180, 180, 180);
  --border-color: rgb(255, 255, 255);
  --accent-color: rgb(255, 255, 255);
  --title: rgb(255, 255, 255);
  --link: rgb(255, 255, 255);
  --muted: rgb(130, 130, 130);
  --desc: rgb(150, 150, 150);
}

body {
  font-family: var(--font-main);
  background: var(--bg-color);
  color: var(--text-color);
  /* the 15px page border on each side is outside this box */
  min-height: calc(100vh - 30px);
}

/* Container: the top bar sits at the top, the projects take the rest */
.container {
  width: 100%;
  margin: auto;
  padding: 20px;
  min-height: calc(100vh - 30px);
  display: flex;
  flex-direction: column;
}

/* Top bar with the title on the left, about and toggle on the right */
.top-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 5px;
}

.sitetitle {
  margin-right: auto;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Heading */
/* Size and weight left exactly as on the Horouf page: the browser default h1
   and h2 sizes, the h1 in the blue accent. */
h1 {
  text-align: left;
  font-weight: 600;
  color: var(--accent-color);
}

h2 {
  text-align: left;
  margin-bottom: 3px;
  font-weight: 400;
  color: var(--text-color);
}

/* Dark Mode Toggle Button */
.toggle-btn {
  background: blue;
  color: white;
  border: none;
  padding: 8px 12px 6px 12px;
  font-size: 18px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark .toggle-btn {
  background: blue;
  color: white;
}

/* About Toggle Button */
.about-toggle {
  background: blue;
  color: white;
  border: none;
  height: 40px;
  padding: 8px 12px;
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  flex: none;
  transition: background-color 0.3s ease;
}

body.dark .about-toggle {
  background: blue;
  color: white;
}

/* Full-width About Panel */
.about-panel {
  padding-left: 40px;
  padding-right: 40px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  background: blue;
  color: white;
  z-index: 1000;
  transition: height 0.4s ease, padding 0.5s ease;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.about-panel.show {
  height: 65vh;
  overflow-y: scroll;
  padding: 40px 40px;
}

.aboutLink {
  color: rgb(180, 180, 180);
  text-decoration: underline;
}

.about-inner {
  float: left;
  margin: 0 auto;
  max-width: 748px;
  padding-right: 20px;
}

.about-inner h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: white;
}

.about-inner p {
  font-size: 16px;
  line-height: 1.6;
}

/* Contact form, the same one as on the Makhzan page */
.contactForm {
  float: left;
  margin: 0 auto;
  min-width: 30%;
  max-width: 748px;
  font-size: 16px;
  line-height: 1.6;
}

/* Its heading takes the same size and spacing as "About Sawad", so the two
   headings sit on one line and the first field lines up with the first line
   of the text beside it. */
.contactForm h2 {
  font-size: 24px;
  line-height: normal; /* not the form's 1.6, or it sits lower than "About Sawad" */
  margin-bottom: 10px;
  color: white;
}

.Ainput {
  border: 1px solid white;
  background: none;
  color: white;
  font-family: inherit;
  font-size: 16px;
  outline: none;
  appearance: none;
  border-radius: 0;
  padding: 5px;
  margin-bottom: 7px;
  margin-top: 2px;
  width: 100%;
}

.submit {
  background: blue;
  border: 1px solid white;
  color: white;
  height: 40px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-bottom: 10px;
}

.submit:hover {
  background: white;
  border: 1px solid white;
  color: blue;
  font-weight: 400;
}

@media (max-width: 748px) {
  .contactForm {
    width: 100%;
  }
}

/* Close Button */
#about-close {
  position: absolute;
  top: 27px;
  right: 40px;
  font-size: 40px;
  padding: 0;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

/* The three projects, stacked down the upper left of the page, each with its
   description on the same baseline beside it */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px; /* the leading between the three names */
  padding-top: 13vh;
  padding-left: 5.5vw;
}

.project-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  max-width: 100%;
}

/* Each name is laid over a hidden bold copy of itself, so the row keeps its
   width and the description beside it does not shift while the weight
   animates. */
.project {
  display: inline-grid;
  color: var(--link);
  text-decoration: none;
  font-size: 32px; /* the same size as the page title */
  line-height: 1.2;
  font-weight: 400;
  font-variation-settings: 'wght' 400;
  transition: font-variation-settings 0.35s ease, color 0.35s ease;
}

.project::after {
  content: attr(data-text);
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

.project,
.project::after {
  grid-area: 1 / 1;
  text-align: left;
}

.project:hover,
.project:focus-visible {
  font-variation-settings: 'wght' 700;
}

.project:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 6px;
}

/* Without a variable Roboto, fall back to a plain bold on hover */
@supports not (font-variation-settings: 'wght' 700) {
  .project:hover,
  .project:focus-visible {
    font-weight: 700;
  }
}

/* The description is only there on hover */
.desc {
  font-size: 18px;
  line-height: 1.4;
  color: var(--desc);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.project-row:has(.project:hover) .desc,
.project-row:has(.project:focus-visible) .desc {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .project,
  .desc {
    transition: none;
  }
}

/* A touch screen has no hover, so there the descriptions simply stay visible */
@media (hover: none) {
  .desc {
    opacity: 1;
  }
}

/* On a narrow screen the description goes under its name */
@media (max-width: 700px) {
  .stage {
    padding-left: 0;
    gap: 24px;
  }

  .project-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}