/*
 * 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.
 */

/* variables */
:root {
  /* Simple fonts */
  --font-family-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-family-serif: 'Garamond', 'Georgia', 'Times New Roman', Times, serif;

  /* Classical line heights */
  --line-height-headers: 1.1;
  --line-height-body:    1.5;

  /* Classical and robust font sizes system */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-s: 0.875rem;   /* 14px */
  --font-size-m: 1rem;       /* 16px */
  --font-size-l: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-xxl: 1.5rem;   /* 24px */
  --font-size-xxxl: 2rem;    /* 32px */
  --font-size-xxxxl: 2.5rem; /* 40px */

  /* Three different text colors */
  --color-text-header: hsl(0, 1%, 16%);

  --color-text-body:  oklch(26.9% 0 0); /* hsl(0, 5%, 25%); */
  --color-text-muted:  hsl(0, 1%, 44%);

  /* Classical and robust spacing system */
  --space-xxxs: 0.25rem; /* 4px */
  --space-xxs: 0.375rem; /* 6px */
  --space-xs: 0.5rem;    /* 8px */
  --space-s: 0.75rem;    /* 12px */
  --space-m: 1rem;       /* 16px */
  --space-l: 1.5rem;     /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-xxl: 2.5rem;   /* 40px */
  --space-xxxl: 3rem;    /* 48px */
  --space-xxxxl: 4rem;   /* 64px */

  /* Application colors */
  --color-primary:          var(--color-text-header); /* hsl(350, 67%, 50%); */
  --color-primary-rotate:   hsl(0 0% 45.1%);
  --color-primary-bg:       hsl(0, 85%, 96%);
  --color-secondary:        hsl(101, 45%, 56%);
  --color-secondary-rotate: hsl(120, 45%, 56%);
  --color-tertiary:         hsl(49, 89%, 64%);
  --color-glint:            hsl(210, 100%, 82%);

  /* Neutral colors */
  --color-white:      hsl(0, 0%, 100%);
  --color-background: hsl(0, 0%, 100%);
  --color-light:      hsl(0, 6%, 93%);
  --color-dark:       var(--color-text-header);

  --color-blue:       hsl(201, 90%, 27.5%);
  --color-red:        hsl(0, 70%, 35.3%);
  --color-green:      hsl(142.8, 64.2%, 24.1%);

  /* Border radius */
  --border-radius: 0.375rem;

  /* Border */
  --border: solid 2px var(--color-light);

  /* Shadows */
  --shadow-large:  2px 4px 10px hsl(0 0% 0% / 0.1);
  --shadow-small:  1px 3px 6px hsl(0 0% 0% / 0.1);

  /* every-layout.dev */
  --ratio: 1.3; 
  /* --ratio: 1.61803398875; */
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));

  --measure: 70ch;
}

/* reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  color: inherit;
  transition: .2s ease-in-out;
}

* {
  margin: 0;
  padding: 0;
  max-inline-size: var(--measure);
}

*::selection {
  background-color: var(--color-text-body);
  color: var(--color-background);
}

*::-moz-selection { /* Firefox */
  background-color: var(--color-text-body);
  color: var(--color-background);
}

html,
body,
div,
header,
nav,
main,
footer {
  max-inline-size: none;
}

html {
  overflow-y: auto;
  height: 100%;
}

body {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
  background-color: var(--color-background);
  color: var(--color-text-body);
  line-height: var(--line-height-body);
  font-family: var(--font-family-sans);
}

header {
  flex-grow: 1;
  flex-basis: 10rem;
  display: flex;
  flex-direction: column;
  gap: var(--s0);
  justify-content: space-between;
  padding: var(--s0);
}

nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

nav.active {
  font-weight: bold;
}

nav * {
  color: inherit;
}

nav button,
nav input[type=submit] {
  box-shadow: none;
}

main {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 70%;
  min-block-size: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--s1);
  padding-block: var(--s0);
}

img,
picture,
svg {
  display: block;
  max-inline-size: 100%;
}

svg {
  height: 1em;
}

form {
  input[type=submit] {
    margin-top: var(--s0);
  }
}

label {
  display: block;
  font-weight: bold;
}

input,
button,
input[type=file]::file-selector-button,
textarea,
select,
.button {
  font: inherit;
  background-color: var(--color-white);
  border: 1px solid oklch(0.922 0 0);
  border-radius: var(--s-5);
  padding: var(--s-5);
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}

input,
textarea,
select {
  width: 100%;
}

.field_with_errors {
  width: 100%;

  input,
  textarea,
  select {
    border: 1px solid var(--color-red);
  }
}

input[type=checkbox] {
  cursor: pointer;
  accent-color: var(--color-dark);
  width: var(--s-1);
  height: var(--s-1);
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  box-shadow: 0 0 0 var(--s-5) #0000001a, 0 1px 2px -1px #0000001a;
}

input[type=submit],
input[type=file]::file-selector-button,
button,
.button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-5);
  flex-shrink: 0;

  min-width: 1rem;
  min-height: 1rem;
  width: auto;
  cursor: pointer;
  transition: all .5s ease;

  background-color: var(--color-dark);
  color: var(--color-light);
}

input[type=file]::file-selector-button:hover,
input[type=file]::file-selector-button:focus,
input[type=file]::file-selector-button:focus-visible,
button:hover,
button:focus,
button:focus-visible,
.button:hover,
.button:focus,
.button:focus-visible {
  filter: invert(100%);
}

input[type=submit].delete:hover,
input[type=submit].delete:focus-visible,
input[type=submit].delete:focus-visible,
button.delete:hover,
button.delete:focus,
button.delete:focus-visible {
  background-color: var(--color-red);
  color: white;
  filter: none;
}


input[type=submit]:hover,
input[type=submit]:focus-visible,
input[type=submit]:focus-visible,
button.save:hover,
button.save:focus,
button.save:focus-visible {
  background-color: var(--color-blue);
  color: white;
  filter: none;
}

input[type=radio] {
  accent-color: var(--color-text-body);
  box-shadow: none;
  width: auto;
}

label:has(input[type=radio]) {
  font-weight: normal;
}

input *,
button *,
textarea *,
select * {
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-header);
  line-height: var(--line-height-headers);
  font-family: var(--font-serif);
}

h1 {
  font-size: var(--s3)
}

h2 {
  font-size: var(--s2)
}

h3 {
  font-size: var(--s1)
}

h4 {
  font-size: var(--s0)
}

h5 {
  font-size: var(--s0)
  text-decoration: underline;
}

h6 {
  font-size: var(--s0)
  text-decoration: italic;
}

a, 
button.text, 
input[type=input].text {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 200ms;

  &:not(.button):hover,
  &:not(.button):focus,
  &:not(.button):active {
    color: var(--color-primary-rotate);
    text-decoration: underline;

    * {
      color: var(--color-primary-rotate);
      text-decoration: underline;
    }
  }
}

p a {
  text-decoration: underline;
}

ul.clear {
  list-style-type: none;
}

li {
  margin-inline: var(--s1);
}

dl {
  display: flex;
  flex-direction: column;

  div {
    display: flex;
    flex-direction: row;

    dt {
     width: 8ch;
    }
    dd {
    }
  }
}

span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-5);
}

input[type=submit].text,
button.text {
  border: none;
  background-color: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

details summary {
  cursor: pointer;
}

details > ul,
details > ol, 
details > dl {
  padding-left: var(--s0);
}

.column {
  display: flex;
  flex-direction: column;
  column-gap: 0;
  row-gap: var(--s0);
}

.row {
  display: flex;
  flex-direction: row;
  column-gap: var(--s0);
  row-gap: 0;
  align-items: stretch;
}

.card {
  background-color: var(--color-white);
  border: 1px solid oklch(0.922 0 0);
  border-radius: var(--s0);
  padding: var(--s0);
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}

.card * {
  color: inherit;
}

.center {
  box-sizing: content-box;
  margin-inline: auto;
  inline-size: 100%;
  max-inline-size: var(--measure);
  flex: 1 1 var(--measure)
}

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

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--s3);
  padding-inline-start: var(--s-1);
  padding-inline-end: var(--s-1);
}

.stack > * {
  width: 100%;
}

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((30rem - 100%) * 999);
}

.switcher > :nth-last-child(n+ 4),
.switcher > :nth-last-child(n+ 4) ~ * {
  flex-basis: 100%;
}

.with-sidebar-l {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.with-sidebar-l > :first-child {
  flex-grow: 1;
}

.with-sidebar-l > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

.with-sidebar-r {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.with-sidebar-r > :last-child {
  flex-grow: 1;
}

.with-sidebar-r > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

.max-inline-size\:measure {
  max-inline-size: var(--measure);
}

.max-inline-size\:measure\/2 {
  max-inline-size: calc(var(--measure) / 2);
}

.logo {
  height: 100px;
  width: 100px;
  border-radius: var(--s-3);
  flex-shrink: 0;
}

.logo > img,
.logo > video {
  border-radius: var(--s-5)
}

.logo-wide {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 100px;
  max-width: 300px;
}

.logo-wide > img,
.logo-wide > video {
  object-fit: contain;
  border-radius: var(--s-5)
}

.thumb {
  --n: 1;
  --d: 1;
  aspect-ratio: var(--n) / var(--d);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 50px;
  max-width: 50px;
  border-radius: var(--s0)
}

.thumb > img,
.thumb > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-3);
  flex-grow: 0;
}

.turbo {
  display: none;
}

.turbo--supported .turbo {
  display: initial;
}

.alert {
  color: hsl(0, 70.2%, 50.6%);
}

.notice {
  color: hsl(142.1, 70.6%, 45.3%);
}

.bold {
  font-weight: bold !important;
}

.italic {
  font-style: italic !important;
}

.underline {
  text-decoration: underline !important;
}

.strikethrough {
  text-decoration: line-through !important;
}

.hidden {
  visibility: hidden !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-around {
  justify-content: space-around !important;
}

.flex-wrap {
  flex-wrap: wrap;
}

.width-100 {
  width: 100%;
}

.color-delete {
  color: var(--color-red) !important;
}

.color-create {
  color: var(--color-blue) !important;
}

.color-success {
  color: green !important;
}

@media not (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .1s;
  }

  .view-transition[id] {
    view-transition-name: attr(id type(<custom-ident>), none); /* church_1, church_2, church_3, … */
  }
}

.autocomplete-results {
  list-style: none;

  li {
    margin-inline: var(--s-5);
    margin-block: var(--s-5);
    background-color: var(--color-light);
    cursor: pointer;
  }

  li:hover,
  li:focus,
  li:focus-visible {
    filter: invert(100%);
  }
}