/*
A stylesheet for any simple page (recipe page, new recipe page, etc.)
It assumes that:
- the page's main content is inside a container with the class "page-content-container"
- the page has a header with the class "header-container", consisting of an h1 heading
  and a set of action buttons with the class "page-actions".
  This stylesheet handles the home button via the class "home-button".
*/

body {
  background-color: var(--eggshell);
  font-family: var(--font1-family), serif;
  color: var(--umber);
}

h1, h2, h3 {
  font-family: var(--font2-family), serif;
}

h1 {
  font-size: 2.5em;
  color: var(--soot);
}

h2 {
  font-size: 1.8em;
  color: var(--nutmeg);
}

h3 {
  font-size: 1.4em;
  color: var(--mulberry);
}

.page-content-container {
  max-width: 720px;
  width: 100%;
  margin: 40px auto;
  padding: 30px;
  margin-inline: auto; /* Horizontal centering */

  display: flex;
  flex-direction: column;

  background-color: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.header-container {
  margin-bottom: 0.5em;

  display: flex;
  justify-content: space-between;
}

.page-actions {
  display: flex; /* Align the action buttons horizontally */
  gap: 10px; /* Gap between the action buttons */
}

/* Common rules for action buttons */
.action-button {
  width: 48px;
  height: 48px;
  padding: 10px;

  color: white; /* SVG icon color (stroke="currentColor") */
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.action-button:hover,
.action-button:focus {
  transform: translateY(-2px);
  outline: none;
}

.action-button:active {
  transform: translateY(0px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.action-button svg {
  width: 100%;
  height: 100%;
}

/* Home button specific rules */
.home-button {
  background-color: #9a3737d4;
}

.home-button:hover,
.home-button:focus {
  background-color: #7b2c2c; /* Darkened by 20% */
}