/* Shop-specific styles. Colours and components come from the site's own theme in ../site/. */

@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-wght-normal.311d352d9323.woff2") format("woff2");
}
@font-face {
  font-family: Montserrat;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-wght-italic.7921052ef928.woff2") format("woff2");
}

:root, [data-bs-theme=light] {
  --bs-heading-color: var(--bs-primary);
  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: #7a1259;
  --bs-link-hover-color-rgb: 122, 18, 89;
  --bs-border-color: #e0d6cc;
  --shop-surface: #fff;
}

main { max-width: 1040px; }
.intro { max-width: 46rem; }
.narrow { max-width: 32rem; }

#mainNav .navbar-brand { color: var(--bs-primary); white-space: normal; max-width: 13rem; line-height: 1.3; font-size: 1.05rem; }
footer { border-top: 1px solid var(--bs-border-color); }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

.myunderline {
  background-image: linear-gradient(#ffd200, #ffd200);
  background-repeat: no-repeat;
  background-size: 100% 8px;
  background-position: 0 110%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 4px;
}

/* Cards and forms sit on white so they stand out from the cream page. */
.card { --bs-card-bg: var(--shop-surface); --bs-card-border-color: var(--bs-border-color); }
.form-control, .form-select { background-color: var(--shop-surface); border-color: #c9b99e; }
.form-control:focus { background-color: var(--shop-surface); border-color: var(--bs-secondary); box-shadow: 0 0 0 .2rem rgba(var(--bs-secondary-rgb), .3); }
.list-group { --bs-list-group-bg: var(--shop-surface); --bs-list-group-border-color: var(--bs-border-color); }
.table { --bs-table-bg: var(--shop-surface); --bs-table-border-color: var(--bs-border-color); }
.table thead th { background: #f3ece0; border-bottom: 2px solid var(--bs-secondary); font-size: .85rem; }

.product-card { border: 2px solid var(--bs-primary); position: relative; }
.product-card.is-coming-soon { border-color: var(--bs-warning); }
.product-name { font-weight: 500; }
.product-price { font-size: 2.25rem; font-weight: 700; line-height: 1.2; color: var(--bs-primary); }
.product-badge {
  position: absolute; top: 0; right: 0;
  background: var(--bs-warning); color: var(--bs-primary);
  border-radius: 0 0 0 .375rem; letter-spacing: .03em;
}
.price-was { text-decoration: line-through; opacity: .6; font-weight: 500; }
.course-list li { padding-left: 1.6rem; margin-bottom: .4rem; position: relative; }
.course-list li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--bs-secondary);
}
.callout-band { background: var(--bs-primary); color: #fff; }
.callout-band h2 { color: #fff; }

.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  user-select: all;
  white-space: nowrap;
}
.break-anywhere { overflow-wrap: anywhere; }
#id_code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; }

/* The theme's status colours are pastel; these keep messages readable on them. */
.alert-info, .alert-secondary { --bs-alert-bg: #f3ece0; --bs-alert-border-color: var(--bs-secondary); --bs-alert-color: #3a0a2a; }
.alert-success { --bs-alert-bg: #e8f3ea; --bs-alert-border-color: #9cc5a4; --bs-alert-color: #1d4a27; }
.alert-warning { --bs-alert-bg: #fbf3f3; --bs-alert-border-color: #edc2c2; --bs-alert-color: #3a0a2a; }
.badge.text-bg-success { background-color: #2e7d42 !important; color: #fff !important; }
.badge.text-bg-warning { background-color: var(--bs-secondary) !important; color: #3a0a2a !important; }
.badge.text-bg-secondary { background-color: #8a7a85 !important; color: #fff !important; }

@media print {
  body { background: #fff; }
  .card { border: 0; }
}