/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* source: https://www.joshwcomeau.com/css/custom-css-reset/ */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

:root {
  --red-800: hsl(0, 100%, 24%);
  --gray-500: hsl(0, 0%, 65%);
  --gray-700: hsl(0, 0%, 40%);
  --background-color: hsl(40, 27%, 96%);
  --image-border: #fff;
  --image-shadow: 2px 2px 7px #a3a3a3;

  @media (prefers-color-scheme: dark) {
    /* --red-800: hsl(355, 55%, 50%); darker muted red*/
    --red-800: hsl(0, 70%, 60%); /*brighter pastel red*/
    --gray-500: hsl(213, 10%, 55%);
    --gray-700:  hsl(210, 3%, 66%);
    --background-color: hsl(213, 33%, 16%);
    --image-border: hsl(213, 25%, 22%);
    --image-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

.red-800 {
  color: var(--red-800);
}

.gray-700 {
  color: var(--gray-700);
}

html, body, .home-view {
  height: 100%;
}

html {
  background-color: var(--background-color);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
    segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu,
    roboto, noto, helvetica, arial, sans-serif;
  color: var(--gray-700);
}

button, input, select, textarea {
  font-family: inherit;
}

.page-title {
  font-size: clamp(
      calc(24 / 16 * 1rem),
      2vw + 0.75rem,
      calc(28 / 16 * 1rem)
    );
  color: var(--red-800);
  white-space: nowrap;
}

.home-view {
  display: flex;
  flex-direction: column;
}

.desktop-header {
  flex: 0 0;

  @media (min-width: 650px) {
    display: flex;
    align-items: center;
  }

  @media (min-width: 1100px) {
  }
}

.desktop-navbar {
  display: block;
  flex: 1;
  align-items: baseline;

  @media (min-width: 650px) {
    display: flex;
    padding-top: 8px;
  }
}

.logo {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  padding-bottom: 8px;

  @media (min-width: 650px) {
    justify-content: start;
    padding-left: 44px;
  }

  @media (min-width: 1100px) {
    padding-left: 44px;
    padding-top: 16px;
  }
}

.menu-categories {
  /* display: block; */
    display: flex;
    flex: 1;
    justify-content: center;

  font-size: calc(16 / 16 * 1rem);

  gap: clamp(
    1rem,
    5.2vw - 1rem,
    3rem
  );

  @media (min-width: 650px) {
    font-size: calc(20 / 16 * 1rem);
  }
}

.home-main {
  flex: 1;

  display: grid;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}


.gallery-main {
  flex: 1;

  display: flex;
  justify-content: center;
  padding-top: 64px;
}

.gallery-main img {
  height: 50vh;
  aspect-ratio: 3 / 2;
  object-fit: cover;

  border: 2px solid var(--image-border);
  box-shadow: var(--image-shadow);

  @media (min-width: 650px) {
    height: 60vh;
  }

  @media (min-width: 1100px) {
    height: 70vh;
  }
}

.gallery-picture-information {
  padding: 16px 16px 0 16px;
  display: flex;
  flex-direction: column;

  @media (min-width: 650px) {
    flex-direction: row;
    padding: 24px 80px 0 40px;
  }
}

.next-link {
  margin-left: 8px;

  @media (min-width: 650px) {
    margin-left: 40px;

  }
}

.gallery-picture-links {
  margin-left: auto;
}

a.disabled {
  pointer-events: none;
  text-decoration: none;
  opacity: 0.5; 
}

.gray-700 {
  color: var(--gray-700);
}

.logo, .spacer {
  flex: 0 0;

  @media (min-width: 1100px) {
    flex: 1;
  }
}

.spacer {
  display: none;

  @media (min-width: 1100px) {
    display: revert;
  }
}

.admin-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 48px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
}

.admin-table .grow {
  width: 100%;
  white-space: normal;
}

.admin-table img {
  max-width: none;
}

.admin-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.admin-list-label {
  width: 400px;
  flex-shrink: 0;
}

.admin-category-label {
  width: 150px;
  flex-shrink: 0;
}

.admin-list-item img {
  max-width: none;
}

.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
}

a:hover {
  text-decoration: underline;
}

a {
  text-decoration: none;
}


footer a {
  color: var(--gray-500);
  font-size: calc(14 / 16 * 1rem);
  padding: 8px;
}

footer {
  flex: 0 0;
  display: flex; 
  justify-content: center;
  align-items: center;
}