/* ====================================================================
   TRINITY EPISCOPAL SCHOOL (Galveston, TX) — tenant override for the
   PCR "Distilled" master page.
   Destination: Z:\pcrfiles\TrinityEpiscopalTX\Style\css\trinity_school_website07082026.css
   Live URL:    /Clue/Style/css/trinity_school_website07082026.css
                (= /Clue/ApplicationFiles/TrinityEpiscopalTx/Style/css/...)
   Portal:      https://webappsca.pcrsoft.com/Clue/Trinity-Episcopal-School/72018

   Direction:   "Trinity Forest Heritage" (palette Option B). Keeps the
                Distilled Cormorant serif for headlines and recolors the
                chrome to Trinity's green with an antique gold accent.

   GREEN SOURCE: sampled from the actual crest LOGO (trinity_banner.png),
                not the brighter grass-green of the marketing-site nav. The
                crest green is a teal-forest / pine green — dominant pixel
                ~#145A50 (avg ~#22665B). The chrome now matches the logo.

   ACCENT FONT: the previous Lobster Two script rendered badly because the
                base applies --accent-font to content-widget headings in
                ALL CAPS (scripts must never be set in caps). Replaced with a
                refined serif. See Trinity_Accent_Font_Options.html for the 5
                alternatives; swap --accent-font below to the chosen one.
   Base:        imported below. Do NOT edit the base; it is shared by every
                tenant. All tenant changes live in this file only.
   ==================================================================== */

@import url("https://webapps.pcrsoft.com/Clue/ApplicationFiles/Poly/Style/css/website05052026.css");

/* Trinity body face (Open Sans). Cormorant + Inter are already loaded by the
   base; Cormorant is kept for headlines and now also the accent font. */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");


:root {
  /* Chrome — teal-forest green sampled from the crest LOGO ---------------- */
  --school-navy:        #145A50;  /* primary green FROM THE LOGO: top bar, L1 nav, headings */
  --school-navy-2:      #1C7466;  /* lifted green for hovers / gradients      */
  --school-navy-deep:   #0C3E37;  /* deepest green: footer band, darkest tone */

  /* Accent — Trinity brand yellow. Green + gold is Trinity's real pairing.
     Ticket #31223: Rea confirmed the school's yellow is #f6d46b; the earlier
     antique gold #C6A93E did not match their branding. ------------------- */
  --school-gold:        #F6D46B;  /* brand yellow: underlines, active nav, links */
  --school-gold-soft:   #F1E9CE;  /* pale gold: icon halos, soft fills         */
  --school-gold-dark:   #8F7524;  /* deep gold: arrows, L2 labels on light     */

  /* Extra brand tones (used by rules below, not base tokens) ------------ */
  --sky:                #248CC8;  /* secondary sky-blue accent (coastal)      */
  --bright-yellow:      #FEDF33;  /* sun-yellow pop (Chargers camp mark)      */

  /* Surfaces and neutrals — WARM (traditional) --------------------------- */
  --warm-cream:         #FAF8F1;  /* L2 sub-nav background                    */
  --bg-warm:            #FAF8F1;
  --cream:              #FAF8F1;
  --ink:                #17241F;  /* warm near-black green ink                */
  --muted:              #465049;  /* warm muted body text                     */
  --line:               #E3E4DC;  /* warm hairline                           */
  --bg:                 #FFFFFF;

  /* Shadows tinted with the deep teal-green, radii unchanged ------------- */
  --shadow-sm:          0 1px 2px rgba(12,62,55,0.07);
  --shadow-md:          0 4px 16px rgba(12,62,55,0.11);
  --shadow-lg:          0 12px 40px rgba(12,62,55,0.17);
  --radius:             8px;
  --radius-lg:          14px;
  --container-max:      1320px;

  /* Typography — HERITAGE (keep the Distilled Cormorant serif headlines).
     Body uses Trinity's Open Sans. The accent font (content-widget section
     headings, rendered in caps by the base) is a refined serif — NOT a
     script. Default = Cormorant (cohesive with headlines). To try another,
     swap this one line to the family from the options page. */
  --sans:               'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --title-font:         'Cormorant Garamond', Georgia, serif;   /* refined headline */
  --accent-font:        'Cormorant Garamond', Georgia, serif;   /* caps-safe accent (was Lobster Two) */
  --common-font:        'Open Sans', Arial, Helvetica, sans-serif;

  /* Tenant widget color tokens (content area) */
  --color1:             #145A50;
  --color2:             #F6D46B;
  --color3:             #248CC8;
  --color4:             #FAF8F1;
  --color5:             #465049;

  /* Logo recolor filters — APPROXIMATE for teal-green / antique gold. Only
     matter if a white logo asset is filtered to brand color; fine-tune if used. */
  --school-navy-filter:      brightness(0) saturate(100%) invert(27%) sepia(24%) saturate(1400%) hue-rotate(126deg) brightness(92%) contrast(92%);
  --school-gold-dark-filter: brightness(0) saturate(100%) invert(49%) sepia(38%) saturate(560%) hue-rotate(6deg) brightness(88%) contrast(84%);
}


/* ====================================================================
   TICKET #31223 — remove the gold underline ornament below page titles.
   The base (website05052026.css) draws a 56x2px bar via
   .PageTitleLabelRow::after; Rea asked for it to be removed (the old
   design and the portal have no line under the title).
   ==================================================================== */
.PageTitleLabelRow::after {
  content: none !important;
  display: none !important;
}


/* ====================================================================
   LOGO — header
   Trinity's official banner (teal-green crest + wordmark + "Galveston,
   Texas" script) is a single horizontal lockup (757x200), already in the
   tenant images folder as trinity_banner.png; contain scales it cleanly.
   ==================================================================== */

.logoLink {
  background-image: url(../images/trinity_banner.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

/* Mobile: keep the wide lockup inside the narrowed header so it never clips
   (Holland Hall mobile fix). The banner is ~3.8:1, so cap by width. */
@media screen and (max-width: 600px) {
  .logoLink {
    background-size: contain !important;
    background-position: left center !important;
    max-width: 220px !important;
  }
}


/* ====================================================================
   LEGACY GOLD NEUTRALIZER  — KEEP THIS SECTION
   The base hardcodes the OLD Distilled gold (#c9a86a / rgba(201,168,106,..)
   / #f3eada / a drawer-scoped --gold) as LITERALS in several rules, so they
   ignore --school-gold and render the wrong gold on the live portal: the
   Logout pill border, the L1 nav top hairline, the L2 sub-nav hairline, the
   whole mobile drawer, and gradebook "reported" cells. Repaint them in the
   brand yellow (#F6D46B = rgb(246,212,107)). The base stays untouched.
   ==================================================================== */

/* Logout pill border — base literal rgba(201,168,106,0.4). */
a.Logout,
.ButtonNoFloat a.Logout,
a.ButtonNoFloat.Logout,
.LoginsLayout .Logout {
  border-color: rgba(246,212,107,0.40) !important;
}

/* L1 green main menu top hairline — base literal rgba(201,168,106,0.55). */
.menuwrapper > div {
  border-top-color: rgba(246,212,107,0.55) !important;
}

/* L2 sub-nav top hairline — base ::before gradient is literal gold. */
.SubmenuColumn::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(246,212,107,0.18) 30%,
    rgba(246,212,107,0.18) 70%,
    transparent 100%) !important;
}

/* Mobile drawer — base scopes its OWN Distilled tokens to .mobilemenu .nav
   (literal navy + gold), bypassing every token above. Re-point to Trinity. */
.mobilemenu .nav {
  --navy:       #145A50;
  --navy-2:     #1C7466;
  --navy-deep:  #0C3E37;
  --navy-inset: #124A42;
  --gold:       #F6D46B;
  --cream:      #FAF8F1;
}

/* Gradebook "reported" cell — base bg literal #f3eada. Doubled class beats
   the base id-suffix selector WITHOUT an #id/[id$=] selector (forbidden). */
td.GradebookReported.GradebookReported {
  background-color: var(--school-gold-soft) !important;   /* #F1E9CE */
}


/* ====================================================================
   FOOTER (Option C, widget-driven grid) — PORTED so it renders on
   app/portal pages too.
   The polished footer lives in website09152025.css, which only loads on
   marketing/CMS pages (e.g. Beginning-School 73023). Portal/app pages
   (e.g. Trinity-Episcopal-School 72018) do NOT load that file, so their
   footer widgets (.tes-info-widget/.schedule-tour-btn/... — already present
   in the DOM) render unstyled. These rules + the --tes-* vars they need are
   copied verbatim from website09152025.css so the footer is identical
   everywhere. The global link/nav overrides from that file are deliberately
   NOT copied (they would restyle the portal app UI). Shield asset
   TrinityShield_White.png sits beside this file in Style/css/.
   ==================================================================== */

:root {
  --tes-green:      #13574C;
  --tes-green-deep: #0E4339;
  --tes-gold:       #F6D46B;  /* ticket #31223: footer gold matches brand yellow */
  --tes-gold-soft:  #f6e7c2;
  --tes-line:       rgba(255,255,255,.18);
  --tes-white-88:   rgba(255,255,255,0.88);
  --tes-white-85:   rgba(255,255,255,0.85);
  --tes-white-70:   rgba(255,255,255,0.7);
}

.FooterLayout {
  background-color: var(--tes-green) !important;
  color: #fff !important;
  padding: 0 !important;
}

#FooterLogoRow {
  display: grid !important;
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-areas:
    "shield shield shield shield"
    "info   info   info   info"
    ".      tour   give   ."
    "rule   rule   rule   rule"
    "menu   menu   menu   menu"
    "sep    sep    sep    sep"
    "copy   copy   copy   social";
  column-gap: 12px;
  row-gap: 18px;
  max-width: 1180px;
  margin: 0 auto !important;
  padding: 64px 40px 40px !important;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
}

#FooterLogoRow::before {
  content: "";
  grid-area: sep;
  height: 1px;
  background: var(--tes-line);
  align-self: center;
}

#FooterLogoColumnCenter,
#FooterLogoColumnRight,
#FooterLogoColumnCenter > div[id$="_panel"],
#FooterLogoColumnRight > div[id$="_panel"] {
  display: contents !important;
}

#FooterLogoColumnLeft {
  background: url('TrinityShield_White.png') center/contain no-repeat !important;
  width: 78px !important;
  height: 96px !important;
  grid-area: shield !important;
  justify-self: center !important;
  margin: 0 auto !important;
  display: block !important;
  float: none !important;
}

.tes-info-widget       { grid-area: info; text-align: center; }
.schedule-tour-btn     { grid-area: tour; justify-self: end; }
.give-to-trinity-btn   { grid-area: give; justify-self: start; }
.tes-rule-gold-widget  { grid-area: rule; width: 100%; max-width: 540px; justify-self: center; }
.footer-quick-menu-wrap{ grid-area: menu; }
.tes-copy-widget       { grid-area: copy; text-align: left; }
.facebook-icon         { grid-area: social; justify-self: end; margin-right: 46px; }
.instagram-icon        { grid-area: social; justify-self: end; }

#FooterLogoRow .control-header {
  display: none !important;
}

.tes-info-widget .h2-style,
.tes-info-widget .content-wrap,
.tes-rule-gold-widget .h2-style,
.tes-rule-gold-widget .content-wrap,
.tes-copy-widget .h2-style,
.tes-copy-widget .content-wrap {
  border: none !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font: inherit !important;
  display: block !important;
}

.tes-mission {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  color: var(--tes-gold) !important;
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 10px !important;
  line-height: 1.4 !important;
}

.tes-school-name {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 32px !important;
  line-height: 1.15 !important;
  margin: 0 0 14px !important;
  color: #fff !important;
  font-weight: 400 !important;
}

.tes-meta {
  font-size: 14px !important;
  color: var(--tes-white-88) !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 24px !important;
}
.tes-meta a {
  color: var(--tes-white-88) !important;
  text-decoration: none !important;
}
.tes-meta a:hover {
  color: var(--tes-gold) !important;
}
.tes-sep {
  margin: 0 10px;
  color: var(--tes-gold);
  opacity: 0.7;
  font-size: 11px;
}

.schedule-tour-btn .textContent,
.give-to-trinity-btn .textContent {
  display: inline-block !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  line-height: 0;
}
.schedule-tour-btn .textContent > span,
.schedule-tour-btn .textContent > a,
.give-to-trinity-btn .textContent > span,
.give-to-trinity-btn .textContent > a {
  display: inline-block !important;
  width: 220px !important;
  padding: 13px 24px !important;
  border-radius: 999px !important;
  font: 700 13px/1.2 Helvetica, Arial, sans-serif !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: 1.5px solid #fff !important;
  text-align: center !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.schedule-tour-btn .textContent > span,
.schedule-tour-btn .textContent > a {
  background: #fff !important;
  color: var(--tes-green) !important;
}
.schedule-tour-btn .textContent > span:hover,
.schedule-tour-btn .textContent > a:hover {
  background: var(--tes-gold) !important;
  color: var(--tes-green) !important;
  transform: translateY(-1px);
}
.give-to-trinity-btn .textContent > span,
.give-to-trinity-btn .textContent > a {
  background: transparent !important;
  color: #fff !important;
}
.give-to-trinity-btn .textContent > span:hover,
.give-to-trinity-btn .textContent > a:hover {
  background: #fff !important;
  color: var(--tes-green) !important;
}

.tes-rule-gold {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 28px auto !important;
  color: var(--tes-gold);
  max-width: 540px;
}
.tes-rule-gold::before,
.tes-rule-gold::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--tes-gold-soft);
  opacity: 0.55;
}
.tes-rule-gold .tes-dia {
  width: 8px;
  height: 8px;
  background: var(--tes-gold);
  transform: rotate(45deg);
  display: inline-block;
}

.footer-quick-menu-wrap {
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  color: var(--tes-white-85) !important;
  text-align: center !important;
}
.footer-quick-menu-wrap ul,
.footer-quick-menu-wrap ul.noprint,
.footer-quick-menu-wrap ul.navigationSubmenu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}
.footer-quick-menu-wrap ul.navigationSubmenu,
.footer-quick-menu-wrap a.close-btn {
  display: none !important;
}
.footer-quick-menu-wrap li,
.footer-quick-menu-wrap li.footer-quick-menu {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.footer-quick-menu-wrap a,
.footer-quick-menu-wrap li a,
.footer-quick-menu-wrap li.footer-quick-menu a {
  margin: 0 12px !important;
  color: var(--tes-white-85) !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 4px 0 !important;
  background: transparent !important;
  border: none !important;
  font: 400 13px/1.4 Helvetica, Arial, sans-serif !important;
  letter-spacing: 0.06em !important;
}
.footer-quick-menu-wrap a:hover,
.footer-quick-menu-wrap li a:hover {
  color: var(--tes-gold) !important;
}

.tes-copy-text {
  font-size: 12px !important;
  color: var(--tes-white-70) !important;
  letter-spacing: 0.02em !important;
}

.social-icon .textContent,
.social-icon .textContent * {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.social-icon .textContent {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  background: #fff !important;
  border-radius: 50% !important;
  color: var(--tes-green) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s ease;
}
.social-icon .textContent:hover {
  background: var(--tes-gold) !important;
}
.social-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  color: var(--tes-green) !important;
  fill: currentColor !important;
}

#FooterSocialRow,
#SitemapRow {
  display: none !important;
}

@media (max-width: 900px) {
  #FooterLogoRow {
    grid-template-areas:
      "shield shield shield shield"
      "info   info   info   info"
      ".      tour   give   ."
      "rule   rule   rule   rule"
      "menu   menu   menu   menu"
      "copy   copy   copy   copy"
      "fb     fb     ig     ig" !important;
  }
  .tes-copy-widget {
    text-align: center !important;
    border-bottom: 0 !important;
  }
  .facebook-icon,
  .instagram-icon {
    border-top: 0 !important;
    padding-top: 0 !important;
  }
  .facebook-icon { grid-area: fb !important; justify-self: end !important; margin-right: 0 !important; }
  .instagram-icon { grid-area: ig !important; justify-self: start !important; }
}
@media (max-width: 600px) {
  #FooterLogoRow {
    padding: 48px 20px 32px !important;
    grid-template-areas:
      "shield shield shield shield"
      "info   info   info   info"
      "tour   tour   tour   tour"
      "give   give   give   give"
      "rule   rule   rule   rule"
      "menu   menu   menu   menu"
      "copy   copy   copy   copy"
      "fb     fb     ig     ig" !important;
  }
  .schedule-tour-btn,
  .give-to-trinity-btn { justify-self: center !important; }
  .tes-school-name { font-size: 26px !important; }
  .footer-quick-menu-wrap .footer-quick-menu li a { margin: 4px 8px !important; }
  .tes-meta .tes-sep { display: inline-block; }
}


/* Section band — repaint the Poly "WideWithBlue" strip to Trinity deep green. */
.WideWithBlue {
    background-color: var(--school-navy-deep);
}


/* ====================================================================
   TRINITY CONTENT COMPONENTS — migrated from website09152025.css
   (the old tenant stylesheet) so these developed styles survive on the
   new Distilled theme. Color refs remapped to the new tokens
   (--school-navy / --school-gold / --ink / --muted / --line / --cream /
   --school-gold-soft) and the old hardcoded 'Lato' remapped to
   var(--common-font) (Open Sans; Lato is not loaded here).
   Skipped intentionally: the old #00a9e0 Poly-base nav/link/Logout
   overrides and the bare h2 recolor (the new base + theme own the chrome);
   the footer "Option C" block (already ported above); :root palette,
   .logoLink and .WideWithBlue (already defined above).
   ==================================================================== */

/* Content quote */
blockquote {
  color: var(--school-navy);
  border-color: var(--school-navy);
}

/* Padding above page titles (old ticket #27886) */
.PageTitleLabelRow {
  padding-top: 15px;
}

/* --- Centered intro paragraph above page content --- */
.page-intro,
.tuition-intro {
  max-width: 720px;
  margin: 0 auto 32px !important;
}
.page-intro .textContent,
.page-intro .textContent *,
.tuition-intro .textContent,
.tuition-intro .textContent * {
  color: var(--muted) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}
.page-intro .control-header,
.tuition-intro .control-header { display: none !important; }

/* --- Faith Life / chapel-style centered green prose --- */
.faith-content {
  max-width: 860px;
  margin: 0 auto 24px;
}
.faith-content .control-header { display: none !important; }
.faith-content .textContent,
.faith-content .textContent * {
  color: var(--school-navy) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  text-align: center !important;
}
.faith-content p { margin: 0 0 1em; }
.faith-content p:last-child { margin-bottom: 0; }

/* ====================================================================
   .table-card — set a widget's CssClass to "table-card" and drop a plain
   HTML table inside; the CSS styles heading bar, header row, cells, and
   stacks on mobile. .table-card-head-only = section title that merges with
   the accordion group below it.
   ==================================================================== */
.table-card,
.table-card-head-only {
  display: block;
  margin-bottom: 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.table-card .control-header,
.table-card-head-only .control-header { display: none !important; }
.table-card .textContent { padding: 0 !important; }

.table-card-head-only {
  margin-bottom: 0;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.table-card h1, .table-card h2, .table-card h3, .table-card h4,
.table-card-head-only h1, .table-card-head-only h2,
.table-card-head-only h3, .table-card-head-only h4 {
  margin: 0;
  background: var(--school-navy);
  color: #fff;
  padding: 12px 20px;
  font: 400 18px/24px var(--common-font);
  letter-spacing: 0.02em;
  border: none;
  position: relative;
}

/* Suppress the Poly base h2::after white accent line inside the green card head */
.table-card h1::after, .table-card h2::after,
.table-card h3::after, .table-card h4::after,
.table-card-head-only h1::after, .table-card-head-only h2::after,
.table-card-head-only h3::after, .table-card-head-only h4::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

.table-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0;
}
.table-card table th,
.table-card table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table-card table thead th {
  background: var(--school-gold-soft);
  color: var(--school-navy);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.table-card table tbody th {
  font-weight: 600;
  color: var(--ink);
}
.table-card table thead th:not(:first-child),
.table-card table tbody td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table-card table tr:last-child th,
.table-card table tr:last-child td { border-bottom: 0; }

.table-card .req-marker { color: var(--school-navy); font-weight: 700; }
.table-card .footnote {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  padding: 10px 14px 14px;
  margin: 0;
}
.table-card table .sub {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 600px) {
  .table-card table thead { display: none; }
  .table-card table tbody tr {
    display: block;
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
  }
  .table-card table tbody tr:last-child { border-bottom: 0; }
  .table-card table tbody th,
  .table-card table tbody td {
    display: block;
    border: 0;
    padding: 4px 14px;
    text-align: left;
  }
  .table-card table tbody th {
    font-size: 16px;
    color: var(--school-navy);
  }
  .table-card table tbody td::before {
    content: attr(data-label) " · ";
    color: var(--muted);
    font-weight: 600;
  }
}

/* ====================================================================
   Accordion items (ExpandableText / Telerik RadPanelBar) restyled to the
   <details>/<summary> look with a +/- caret.
   ==================================================================== */
.RadPanelBar_Default,
.RadPanelBar.tuition-acc,
.table-card .RadPanelBar,
.table-card-head-only + div[id*="RadPanelBar"] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.table-card-head-only + .RadPanelBar,
.table-card-head-only ~ .RadPanelBar {
  border-left: 1px solid var(--line) !important;
  border-right: 1px solid var(--line) !important;
}
.RadPanelBar .rpRootGroup,
.RadPanelBar .rpGroup {
  border: 0 !important;
  background: transparent !important;
}
.RadPanelBar .rpItem,
.RadPanelBar li.rpItem {
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
  list-style: none !important;
}
.RadPanelBar .rpItem:last-of-type {
  border-bottom: 0 !important;
}
.RadPanelBar .rpLink,
.RadPanelBar a.rpLink {
  padding: 14px 20px !important;
  font: 600 16px/1.4 var(--common-font) !important;
  color: var(--school-navy) !important;
  background: #fff !important;
  text-decoration: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border: 0 !important;
  position: relative !important;
}
.RadPanelBar .rpLink:hover {
  background: var(--cream) !important;
}
.RadPanelBar .rpLink .rpOut,
.RadPanelBar .rpLink .rpText {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  display: inline !important;
  color: inherit !important;
  font: inherit !important;
}
.RadPanelBar .rpExpandHandle,
.RadPanelBar .rpImage,
.RadPanelBar .rpRootImage,
.RadPanelBar .rpExpandable .rpImage {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
}
.RadPanelBar .rpLink.rpExpandable::after,
.RadPanelBar a.rpLink::after,
.RadPanelBar .rpLink::after {
  content: "+" !important;
  display: inline-block !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--school-navy) !important;
  margin-left: auto !important;
  padding-left: 12px !important;
  position: static !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  transition: transform 0.2s ease;
  visibility: visible !important;
  opacity: 1 !important;
}
.RadPanelBar .rpExpanded > .rpLink::after,
.RadPanelBar li.rpExpanded > .rpLink::after,
.RadPanelBar .rpLink.rpExpanded::after,
.RadPanelBar .rpLink.rpSelected::after {
  content: "−" !important;
}
.RadPanelBar .rpTemplate,
.RadPanelBar .rpGroup,
.RadPanelBar .rpItem .rpItem,
.RadPanelBar .rpAnimation {
  background: #fff !important;
  padding: 0 20px 16px !important;
  color: var(--ink) !important;
  font-size: 15px !important;
}
.RadPanelBar .rpTemplate p,
.RadPanelBar .rpTemplate dl,
.RadPanelBar .rpTemplate dt,
.RadPanelBar .rpTemplate dd {
  margin: 0;
  color: var(--ink) !important;
}
.RadPanelBar dl.acc-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}
.RadPanelBar dl.acc-dl dt {
  font-weight: 600;
  color: var(--muted);
}
.RadPanelBar dl.acc-dl dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* --- Contact block (right sidebar) --- */
.tuition-contact {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  margin-top: 14px;
}
.tuition-contact .control-header { display: none !important; }
.tuition-contact .textContent {
  padding: 0 !important;
}
.tuition-contact h3 {
  margin: 0 0 8px;
  color: var(--school-navy);
  font: 700 18px/1.2 var(--common-font);
  border: none;
}
.tuition-contact p {
  margin: 4px 0;
  color: var(--muted);
  font-size: 14px;
}
.tuition-contact a {
  color: var(--school-navy);
  text-decoration: none;
}
.tuition-contact a:hover {
  /* deep gold, not --school-gold: the brand yellow #F6D46B is too light to
     read on this card's cream background */
  color: var(--school-gold-dark);
}