/* AyushNet theme: brand colours + logo from https://ayushnet.clirnet.com (Nov 2026).
   Only the brand colour changes. Font, font sizes, text colours, borders and the page
   background stay exactly as the application has them (system-ui, #525252 body text,
   #161616 headings, #e5e5e5 borders, #f0f0f0 page). Brand colours live on <html style>
   in index.html. */
:root {
  --ayush-green: #276b59;       /* primary: buttons, links, active states */
  --ayush-green-dark: #1e5546;  /* hover */
  --ayush-green-rgb: 39, 107, 89;
  --ayush-mint-rgb: 118, 201, 179; /* focus ring */
  --ayush-orange: #ee9a50;      /* search-match highlight, Sowa-Rigpa leaf */
}

/* logos: AyushNet's is a 4:1 wordmark, CLIRNET's header slot was a 36px square */
.cs-brand-logo { height: 4rem; width: auto; max-width: 16rem; display: block; }
.cs-brand-logo-full { height: auto; width: 22rem; max-width: 80%; }
@media (max-width: 575.98px) {
  .cs-brand-logo { height: 3.2rem; }
}

/* buttons on the page read their colour from --bs-btn-* set by Bootstrap at build time */
.btn-primary {
  --bs-btn-bg: var(--ayush-green);
  --bs-btn-border-color: var(--ayush-green);
  --bs-btn-hover-bg: var(--ayush-green-dark);
  --bs-btn-hover-border-color: var(--ayush-green-dark);
  --bs-btn-active-bg: var(--ayush-green-dark);
  --bs-btn-active-border-color: var(--ayush-green-dark);
  --bs-btn-disabled-bg: var(--ayush-green);
  --bs-btn-disabled-border-color: var(--ayush-green);
}
/* .btn-outline-primary: no override. The app's own rule (green text on a
   --bs-soft-primary tint, derived from --bs-primary) already themes it. */
.form-check-input:checked { background-color: var(--ayush-green); border-color: var(--ayush-green); }
.form-control:focus, .form-select:focus {
  border-color: rgba(var(--ayush-mint-rgb), 0.9);
  box-shadow: 0 0 0 0.3rem rgba(var(--ayush-mint-rgb), 0.25);
}

/* header brand slot: drop the square tile the CLIRNET "C" mark sat in */
.clr_v3_Header__brand { background: transparent !important; padding: 0 !important; }

/* ---------- phone layout (below lg, where the right-hand form column is hidden) ----------
   Mirrors the app: HeaderSpecialityMobilePublic replaces the desktop header and carries
   the form; the feed's own preview banner is dropped (the header card has one). */
.cs-mobile-header { display: none; }
@media (max-width: 991.98px) {
  .cs-mobile-header { display: flex; }
  #headerDesktopNavBar { display: none !important; }
  .clr_v3_mainContent__width > .bg-soft-secondary:first-child { display: none !important; }
  .cs-mobile-header .clr_v3_Header--Public__brand img { height: 4.8rem; }
  /* the desktop "padding: 0" reset above also hit this logo; give it room from the top */
  .cs-mobile-header .clr_v3_Header__brand.clr_v3_Header--Public__brand { padding-top: 2.4rem !important; margin-bottom: 1.4rem !important; }
  /* the nav row has a fixed desktop height; let it grow so the logo's bottom margin pushes the tagline down */
  .cs-mobile-header .clr_v3_Header__nav { height: auto !important; }
  .cs-mobile-header .cs-brand-logo-full { display: none; }
}