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

[data-theme="light"], :root:not([data-theme="dark"]) {
  --pico-text-selection-color: rgba(44, 177, 244, 0.25);

  --pico-primary: #189AB4;
  --pico-primary-background: #189AB4;
  --pico-primary-underline: rgba(44, 177, 244, 0.5);
  --pico-primary-hover: #14859b;
  --pico-primary-hover-background: rgba(24, 154, 180, 0.8);
  --pico-primary-focus: rgba(44, 244, 234, 0.5);
  --pico-primary-inverse: #fff;

  --pico-secondary: #1d5a72;
  --pico-secondary-background: #154355;
  --pico-secondary-border: var(--pico-secondary-background);
  --pico-secondary-underline: rgba(93, 107, 137, 0.5);
  --pico-secondary-hover: #216884;
  --pico-secondary-hover-background: #1d5a72;
  --pico-secondary-hover-border: var(--pico-secondary-hover-background);
  --pico-secondary-hover-underline: var(--pico-secondary-hover);
  --pico-secondary-focus: rgba(93, 107, 137, 0.25);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 1000;
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  transition: left 0.2s;

  &:focus {
    position: absolute;
    left: 16px;
    top: 16px;
    width: auto;
    height: auto;
    overflow: visible;
    outline: 2px solid var(--pico-primary-hover);
    outline-offset: 2px;
    box-shadow: 0 2px 8px rgba(24, 154, 180, 0.2);
  }
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

nav[aria-label=breadcrumb] ul li a {
  font-weight: bold;
}

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert.alert-info, .alert.alert-notice {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
}

.alert.alert-alert, .alert.alert-danger, .alert.alert-error {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}

.alert h3 {
  margin-top: 0;
}
.alert ul {
  margin: 0;
}
.alert p {
  margin: 0;
}
.alert p + p {
  margin-top: 0.5em;
}

.alert.alert-danger h3, .alert.alert-error h3 {
  color: #a94442;
}

.page-header {
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
}

.page-footer {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid #e5e5e5;
}

a.btn, [type=submit] {
  display: block;
  font-weight: bold;
}

.help-block {
  display: block;
  margin: 5px 0;
  color: #393939;
}

caption {
  font-size: 1.2em;
  margin-bottom: 10px;
  text-align: left;
}

.bt-1 {
  border-top: var(--pico-border-width) solid var(--pico-table-border-color);
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background-color: var(--pico-card-sectioning-background-color);
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.toolbar .btn {
  margin-left: 10px;
}
.toolbar .btn:first-child {
  margin-left: 0;
}

.m-0 {
  margin: 0 !important;
}

.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

.text-muted {
  color: var(--pico-muted-color);
}

a.item-link {
  color: var(--pico-h2-color);
  display: block;
  text-decoration: none;
}
a.item-link article {
  transition: box-shadow 0.3s ease;
}
a.item-link:hover article {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.item-name {
  font-weight: bold;
  margin-bottom: 1rem;
}
.item-description {
  color: var(--pico-text-color);
  margin: 1rem 0;
}

.item-image {
  margin-bottom: 1rem;
  max-width: 100%;
  height: auto;
  text-align: center;
}

.product-price {
  padding: .125rem .25rem;
  background-color: var(--pico-mark-background-color);
  color: var(--pico-mark-color);
  vertical-align:baseline
}

footer nav.links ul {
  display: grid;
  font-size: 0.8em;
}

footer nav.links ul li {
  display: block;
  margin: 0;
  padding: 0;
}

.copyright {
  font-size: 0.8em;
  color: var(--pico-text-color);
}


.pre {
  display: block;
  margin: 1em 0;
  padding: 1em;
  white-space: pre-wrap;
}

.development-tools {
  margin-top: 1em;
  list-style: none;
  padding: 0;
  font-size: 0.8em;
}
.development-tools li {
  display: inline-block;
  padding: 0;
  margin-right: 0.5em;
}
.development-tools li a {
  color: var(--pico-secondary);
  text-decoration: none;
}

.usnf-logo {
  width: 15%;
  height: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 16px;
}