@import url("https://webapps.pcrsoft.com/Clue/ApplicationFiles/Poly/Style/css/website07292026.css");
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Official HCDS colors: Mosswood #1D6536 (PMS 349 C), Deep Harbor #173E63 (PMS 7694 C) */
  --school-navy:        #1d6536;
  --school-navy-2:      #247a42;
  --school-navy-deep:   #144725;
  --school-gold:        #c1d8ca;
  --school-gold-soft:   #eaf2ed;
  --school-gold-dark:   #173e63;
  --warm-cream:         #fafafa;
  --ink:                #1c1c1c;
  --muted:              #6b6f73;
  --line:               #eaeaea;
  --bg:                 #fafafa;
  --shadow-sm:          0 1px 2px rgba(29,101,54,0.05);
  --shadow-md:          0 4px 16px rgba(29,101,54,0.08);
  --shadow-lg:          0 12px 40px rgba(29,101,54,0.14);
  --radius:             8px;
  --radius-lg:          14px;
  --container-max:      1320px;
  --serif:              'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:               'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --color1: #1D6536; 
  --color2: #9BC8AC;
  --color3: #173E63;
  --color4: #eaeaea;
  --color5: #1c1c1c;
  /* Older gbwebsite.css layer reads these for content headings/body. */
  --title-font:  'Fraunces', Georgia, 'Times New Roman', serif;
  --common-font: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Icon recolor filters. CSS filter cannot take a color value, so these
     chains are the filter-math equivalents of the color tokens above,
     applied to icons painted as background-images. If --school-navy or
     --school-gold-dark ever changes, regenerate the matching chain. */
  --school-navy-filter:      brightness(0) saturate(100%) invert(44%) sepia(18%) saturate(1346%) hue-rotate(88deg) brightness(71%) contrast(101%);
  --school-gold-dark-filter: brightness(0) saturate(100%) invert(21%) sepia(18%) saturate(1956%) hue-rotate(168deg) brightness(97%) contrast(96%);
}
.logoLink {
    background-image: url(../images/HCDS-PrimaryLogo-Green.png);
    position: relative;
    width: 460px !important;     /* !important: base sizes the slot from the (absent) uploaded image */
    min-height: 88px !important; /* !important: same reason — empty slot otherwise collapses */
}
.logoLinkFooter {
    background-image: url(../images/logo2023_WhiteTransparent_230.png) !important;
}

/* Pay buttons: the base fills them with var(--school-gold) and labels
   them var(--school-navy). Give them the same green fill and white
   label as every other button instead.

   The two submit-input selectors carry :not(#__never__), an inert
   specificity booster the base itself uses to outrank Telerik. It
   matches no element on any page, so nothing is bound to a real
   WebForms id; it is only there to tie the base rule's specificity so
   source order decides. Noted because it shows up in a grep for '#'. */
a.Pay,
.Pay,
a[class*="Pay"]:not(.PayPal),
.PayButton input,
input.Pay,
a.button.Pay,
a.Pay.button,
input[type="submit"][name*="btnPay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__),
input[type="submit"][value="Pay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__) {
    background-color: var(--school-navy) !important;
    background: var(--school-navy) !important;
    border-color: var(--school-navy) !important;
    color: #ffffff !important;
}

a.Pay:hover,
.Pay:hover,
a[class*="Pay"]:not(.PayPal):hover,
.PayButton input:hover,
input.Pay:hover,
a.button.Pay:hover,
a.Pay.button:hover,
input[type="submit"][name*="btnPay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__):hover,
input[type="submit"][value="Pay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__):hover {
    background-color: var(--school-navy-2) !important;
    background: var(--school-navy-2) !important;
    border-color: var(--school-navy-2) !important;
    color: #ffffff !important;
}