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

html {
  /**
    App mode is for mobile devices, 'stand-alone' mode. Browser-mode is for desktop browsers.
  
    We add a bit of margin at the bottom here on iOS since the viewport goes to the very
    bottom and underneath the 'app minimizer' widget bar.
  
    Android has its own system bar that is always visible so we don't need that extra margin.
  
  */
  --safe-area-top: env(safe-area-inset-top);
  --safe-area-bottom: env(safe-area-inset-bottom);
  --safe-area-left: env(safe-area-inset-left);
  --safe-area-right: env(safe-area-inset-right);

  --bottom-keyboard-margin-on: max(24px, env(safe-area-inset-bottom));
  --bottom-keyboard-margin-off: 0px;
}

:root {
  --button-shadow-colour: rgba(117, 117, 206, 0.475);
}

html {
  --bg-colour: rgb(85, 255, 255);
  height: 100%;
  max-height: 100%;
  background-color: var(--bg-colour);
  background-image: linear-gradient(336deg, var(--bg-colour), rgb(251, 255, 204));
}

body {
  display: flex;
  flex-wrap: wrap;
  padding: 0 2em;
  margin: 0 auto;
  margin-top: max(var(--safe-area-top), 1em);
  max-width: 800px;

  main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

* {
  height: min-content;
}

nav#header_nav {
  width: 100%;
  text-align: center;
  margin: 2em auto;

  h1 {
    color: #7791c2;
  }

  a {
    text-decoration: none;
  }
}

nav#footer_nav {
  display: none !important;
  
  --nav-padding: 1em;
  padding: var(--nav-padding) 0;
  padding-bottom: max(var(--safe-area-bottom), var(--nav-padding));

  width: 100%;
  max-width: 100%;

  display: flex;
  column-gap: 10px;
  justify-content: space-evenly;
  align-self: flex-end;

  position: absolute;
  bottom: 0;
  left: 0;

  border-top: 1px solid #fffa;
  background-color: #fff5;
}

button {
  --text-color: #5e5fab;
  user-select: none;
  border-radius: 0.2em;
  background-color: #fff;
  padding: 2px 12px;
  border: none;
  box-shadow: 4px 4px 0 var(--button-shadow-colour);
  margin: 8px 8px;
  cursor: pointer;
  font-size: 1.2em;
  color: var(--text-color);
  
  &:active {
    position: relative;
    top: 2px;
  }

  a {
    text-decoration: none;
    color: var(--text-color);
  }
}

main {
  height: calc(100% - 70px);
}

.notice {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  padding: 10px;
  margin: 10px 0;
}

.alert {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  padding: 10px;
  margin: 10px 0;
}


section#meditation_timer {
  
  --timer-ui-max-width: 300px;
  
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  row-gap: 60px;
  width: var(--timer-ui-max-width);

  &>div {
    width: 100%;
  }

  div#timer_clock {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 16px;
    width: min-content;
    align-self: center;
    
    color: #4b4c7a;
    text-align: center;
    font-size: 60px;
    
    & > div {
      display: inline-block;
      display: flex;
      column-gap: 6px;
    }
    
    span.time_label {
    }
    
    div#secs_block {
      font-size: 21px;
      margin-top: 20px;
      column-gap: 1px;
    }
  }

  div#timer_controls {
    max-width: var(--timer-ui-max-width);
    
    & > div {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      
    }
  }
  
  div#start_stop_button {
    max-width: var(--timer-ui-max-width);
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 80px;
    
    button#timer_start {
      font-size: 1.75em;
      padding: 8px 32px;
      flex-grow: 1;
    }
  }
  
  button#end_button {
    font-size: 14px;
    opacity: 0.25;
  }
  
  button {
    flex-grow: 1;
    
    &.increment_button {
    }
    
    &.increment_button,
    &#end_button {
      box-shadow: 2px 2px 1px var(--button-shadow-colour);
    }
  }

}