/* ==========================================================================
   Breinton Recital Society — CiviCRM (standalone) brand stylesheet
   Loaded via Administer > System Settings > Resource URLs > Custom CSS URL
   Matches cassiopeia_breinton (Joomla site) design tokens.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;600;700&family=Jost:wght@400;500;600&display=swap');

:root {
  --crm-font: 'Jost', system-ui, -apple-system, sans-serif;
  --crm-primary-color: #630f7a;
  --crm-primary-hover-color: #3a0847;
  --crm-primary-text-color: #ffffff;
  --crm-primary-hover-text-color: #ffffff;
  --crm-link-color: #630f7a;
  --crm-link-hover-color: #3a0847;
  --crm-focus-color: #b8860b;
  --crm-container-bg-color: #f5f2f7;
  --crm-border-color: #ddd6e3;
}

body,
#crm-container.crm-public {
  font-family: 'Jost', system-ui, -apple-system, sans-serif;
  font-size: 1.125rem;
  color: #1c1a1e;
}

/* Radio/checkbox-group field labels render as a bare <div class="label">, not an
   actual <label> element (CiviCRM uses role="radiogroup"/aria-labelledby
   instead) - so core's own `.form-item label { font-size: var(--crm-input-label-
   size) }` rule never matches them, and they fall through to inherit the 18px
   body base above instead of the smaller label size every other field gets.
   Match it explicitly, using the same variable core uses, so it can never drift
   out of sync with a future core update. */
.crm-container .form-item .label {
  font-size: var(--crm-input-label-size);
}

/* --------------------------------------------------------------------------
   Brand bar — injected by the brsheader extension (page-header region)
   Matches the Joomla site's .brs-brand-bar: violet, title left, contact right
   -------------------------------------------------------------------------- */
.brs-crm-brand-bar {
  background: #630f7a;
  padding: 18px max(10px, 1vw);
  margin: 0 calc(-1 * max(10px, 1vw));
}

.brs-crm-brand-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.brs-crm-brand-title {
  font-family: 'Cormorant', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 2rem;
  color: #ffffff;
  line-height: 1.1;
}

.brs-crm-brand-strap {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: #b8860b;
  letter-spacing: 0.14em;
  margin-top: 2px;
}

.brs-crm-brand-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 1rem;
  white-space: nowrap;
}

.brs-crm-brand-right a {
  color: rgba(255, 255, 255, 0.8) !important;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}

.brs-crm-brand-right a:hover {
  color: #b8860b !important;
}

.brs-crm-sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.3);
  margin: 0 4px;
  vertical-align: middle;
}

@media (max-width: 767px) {
  .brs-crm-brand-right { display: none; }
  .brs-crm-brand-title { font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Sticky "nav replacement" bar — same slot/size as the site's sticky nav
   -------------------------------------------------------------------------- */
.brs-crm-sticky-bar {
  background: #3a0847;
  color: #ffffff;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 1.2rem;
  text-align: left;
  padding: 14px max(10px, 1vw);
  margin: 0 calc(-1 * max(10px, 1vw)) 24px;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 3px 12px rgba(30, 4, 40, 0.5);
}

/* When viewed while logged in, the black CiviCRM admin toolbar occupies
   the real top:0 — offset the sticky bar below it so it doesn't hide behind it.
   Anonymous registrants (the real audience) never see that toolbar. */
body:has(#civicrm-menu) .brs-crm-sticky-bar {
  top: 41px;
}

#crm-container.crm-public .crm-page-title-wrapper .crm-page-title,
#crm-container.crm-public #intro_text h2,
#crm-container.crm-public #intro_text h3,
#crm-container.crm-public fieldset legend {
  font-family: 'Cormorant', Georgia, 'Times New Roman', serif;
  color: #3a0847;
}

#crm-container.crm-public .crm-page-title-wrapper .crm-page-title {
  font-size: 2.4rem;
  font-weight: 700;
  border-bottom: 2px solid #b8860b;
  padding-bottom: 12px;
  margin-bottom: 24px;
}

#crm-container.crm-public #intro_text h2 {
  font-size: 1.6rem;
  font-weight: 600;
}

#crm-container.crm-public fieldset.crm-profile legend,
#crm-container.crm-public fieldset#priceset legend {
  font-size: 1.3rem;
  font-weight: 600;
  border-bottom: 1px solid #ddd6e3;
  padding-bottom: 8px;
  margin-bottom: 16px;
  width: 100%;
}

#crm-container.crm-public a {
  color: #630f7a;
}

#crm-container.crm-public a:hover {
  color: #3a0847;
}

#crm-container.crm-public .crm-form-text,
#crm-container.crm-public select,
#crm-container.crm-public textarea {
  border: 1px solid #ddd6e3;
  border-radius: 3px;
  font-family: 'Jost', system-ui, sans-serif;
}

#crm-container.crm-public .crm-form-text:focus,
#crm-container.crm-public select:focus,
#crm-container.crm-public textarea:focus {
  border-color: #b8860b;
  outline: none;
  box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.25);
}

#crm-container.crm-public button.crm-button,
#crm-container.crm-public input.crm-button,
#crm-container.crm-public .crm-form-submit {
  background: #630f7a;
  border-color: #630f7a;
  color: #ffffff;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 12px 28px;
}

#crm-container.crm-public button.crm-button:hover,
#crm-container.crm-public input.crm-button:hover,
#crm-container.crm-public .crm-form-submit:hover {
  background: #3a0847;
  border-color: #3a0847;
}

#crm-container.crm-public .messages.help {
  background: #f5f2f7;
  border: 1px solid #ddd6e3;
  color: #1c1a1e;
}

#crm-container.crm-public input[type="radio"]:checked + label .crm-price-amount-label,
#crm-container.crm-public .crm-price-amount-amount {
  color: #630f7a;
  font-weight: 600;
}

/* ==========================================================================
   Member login page (/civicrm/login) — Breinton brand treatment
   Added 2026-07-15. Scoped to .brs-login / .standalone-auth-* so it only
   affects the standalone auth (login / password reset) screens.
   ========================================================================== */

/* Full-bleed violet brand bar, mirrors the Joomla site header (.brs-brand-bar) */
.brs-login-bar {
  background: #630f7a;
  padding: 18px 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.brs-login-bar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.brs-login-title {
  font-family: 'Cormorant', Georgia, serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.brs-login-desc {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b8860b;
  margin-top: 6px;
}

/* Hide the stock CiviCRM logo on auth screens (in case the override is bypassed) */
.standalone-auth-box .crm-logo { display: none !important; }

/* Sign-in card */
.standalone-auth-form {
  display: flex;
  justify-content: center;
  padding: 48px 20px 72px;
}
.standalone-auth-box {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid #ddd6e3;
  border-top: 3px solid #b8860b;
  border-radius: 8px;
  padding: 36px 36px 30px;
}

.brs-login-head { text-align: center; margin-bottom: 24px; }
.brs-login-head h2 {
  font-family: 'Cormorant', Georgia, serif;
  font-weight: 700;
  font-size: 30px;
  color: #630f7a;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.brs-login-head p {
  font-size: 15px;
  color: #6b6570;
  margin: 0;
  line-height: 1.5;
}

/* Form fields (crmLogin angular markup) */
.crm-login .input-wrapper { margin-bottom: 16px; }
.crm-login .form-label {
  display: block;
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 6px;
  color: #3a3540;
}
.crm-login .form-control {
  width: 100%;
  padding: 11px 13px;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 16px;
  color: #1c1a1e;
  background: #ffffff;
  border: 1px solid #ddd6e3;
  border-radius: 6px;
}
.crm-login .form-control:focus {
  outline: none;
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.18);
}

.crm-login .login-or-forgot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  gap: 16px;
}
.crm-login .login-or-forgot a {
  color: #630f7a;
  font-size: 15px;
  text-decoration: none;
}
.crm-login .login-or-forgot a:hover {
  color: #b8860b;
  text-decoration: underline;
}

/* Violet primary button (beats RiverLea's default blue) */
.standalone-auth-box .btn.btn-primary,
.crm-login .btn.btn-primary {
  background: #630f7a !important;
  border: none !important;
  color: #ffffff !important;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  padding: 11px 26px;
  border-radius: 6px;
  cursor: pointer;
}
.standalone-auth-box .btn.btn-primary:hover,
.crm-login .btn.btn-primary:hover {
  background: #3a0847 !important;
}

/* ==========================================================================
   Embedded (iframed) member pages — Breinton "My Account" on the Joomla site.
   .brs-framed is added by the standalone.tpl script only when the page is
   running inside a frame, so direct/full-page visits are unaffected.
   ========================================================================== */
.brs-framed .breadcrumb,
.brs-framed .crm-public-footer,
.brs-framed #civicrm-footer,
.brs-framed .brs-login-bar { display: none !important; }

.brs-framed #crm-container.standalone-page-padding { padding-top: 8px !important; }
html.brs-framed,
.brs-framed body { background: #ffffff !important; }

/* ==========================================================================
   Event Info page (civicrm/event/info) — card layout for the "before
   booking is live" screen, applies to every event via the customTemplateDir
   override at CRM/Event/Page/EventInfo.tpl (not event-specific).
   ========================================================================== */

.brs-eventinfo-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff4d6;
  border: 1px solid #b8860b;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 0 0 28px;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #5a4400;
}

.brs-eventinfo-notice-icon {
  font-size: 1.4rem;
  color: #b8860b;
  flex-shrink: 0;
}

.brs-eventinfo-wrap {
  max-width: 760px;
  margin: 0 auto;
}

.brs-eventinfo-card {
  background: #ffffff;
  border: 1px solid #ddd6e3;
  border-radius: 10px;
  padding: 8px 28px 24px;
}

.brs-eventinfo-summary {
  padding: 16px 0 4px;
  font-size: 1.05rem;
  line-height: 1.6;
}

.brs-eventinfo-row {
  display: flex;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #ece7f0;
}

.brs-eventinfo-card > .brs-eventinfo-row:last-of-type {
  border-bottom: none;
}

.brs-eventinfo-row-label {
  flex: 0 0 140px;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #630f7a;
  padding-top: 2px;
}

.brs-eventinfo-row-value {
  flex: 1;
  min-width: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #1c1a1e;
}

.brs-eventinfo-row-value a {
  color: #630f7a;
}

.brs-eventinfo-row-value .fee_block-table {
  width: 100%;
  border-collapse: collapse;
}

.brs-eventinfo-row-value .fee_block-table td {
  padding: 7px 0;
  border-bottom: 1px solid #ece7f0;
}

.brs-eventinfo-row-value .fee_block-table tr:last-child td {
  border-bottom: none;
}

.brs-eventinfo-row-value .fee_amount-value {
  font-weight: 600;
  color: #630f7a;
}

/* Register CTA — a real button, not the generic core treatment */
#crm-container.crm-public .crm-register-button {
  display: inline-block;
  background: #630f7a;
  color: #ffffff !important;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 36px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background 0.2s ease;
}

#crm-container.crm-public .crm-register-button:hover {
  background: #3a0847;
}

#crm-container.crm-public .brs-eventinfo-wrap .register_link-section {
  text-align: center;
  margin: 24px 0 4px;
}

#crm-container.crm-public .brs-eventinfo-wrap .crm-actionlinks-top .register_link-section {
  margin-top: 4px;
}

@media (max-width: 600px) {
  .brs-eventinfo-row {
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
  }
  .brs-eventinfo-row-label {
    flex: none;
  }
  .brs-eventinfo-card {
    padding: 4px 18px 20px;
  }
  .brs-eventinfo-notice {
    font-size: 0.95rem;
  }
}