/* Load Cormorant Garamond here so it works in both the public site AND the
   Froala editor (which loads Custom.css but not Content.aspx's <link> tag). */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600&display=swap');

/* ============================================================
   CUSTOM.CSS — Brand & Design Customization
   Indian Hill EVSD

   Split from Styles.css — contains visual styling, typography,
   color/font choices, and brand treatment. Styles.css retains
   the structural layout shell.
   ============================================================ */

/* overflow-x:clip prevents horizontal scroll WITHOUT creating a scroll container.
   `overflow: hidden` would clip content but ALSO break `position: sticky` for every
   descendant (#ucLeftNav_pnlLeftSide left nav, anything else trying to be sticky).
   `clip` is supported in all modern browsers (Chrome 90+, Firefox 81+, Safari 16+).
   Fallback for old browsers: declare hidden first, modern browsers use clip. */
body {
    overflow-x: hidden;       /* fallback for older browsers (clip ignored) */
    overflow-x: clip;         /* modern browsers — keeps sticky working */
}


/* ============================================================
   SITE SHELL — single source of truth for horizontal alignment
   Every major section's INNER container uses these vars so the
   header logo, red sh-strip, dark hero title, breadcrumb row,
   and main content all start at exactly the same x position.
   Backgrounds (page-header dark, sh-strip red) stay edge-to-edge;
   only the inner container is constrained.
   ============================================================ */
:root {
  --shell-max: 1400px;
  --shell-gutter: 40px;
}
@media (max-width: 1100px) { :root { --shell-gutter: 32px; } }
@media (max-width: 640px)  { :root { --shell-gutter: 20px; } }

.header-container,
.sh-strip-inner,
.page-header-inner,
.interior-wrapper {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-gutter);
  box-sizing: border-box;
}


/* AI search results — fully styled in protected-pages.css */

/* ============================================================
   DISTRICT HOMEPAGE — empty-wrapper collapse
   On the district homepage, Content.aspx.cs sets both ucLeftNav
   and ucContentPage to Visible=false, but the surrounding
   <div class="interior-wrapper"> still renders with its
   padding: 70px 60px 120px — adding ~190px of empty space
   between the homepage content and the footer. Hide it.
   ============================================================ */

body.district-home .interior-wrapper { display: none; }


/* ============================================================
   SCHOOL HOMEPAGES — Vintage photo filter
   JS adds .school-vintage to <body> when pathname matches
   /hs, /ms, /es, /ps (with or without .aspx).
   Scoped to TextWindow content panels only — header, nav,
   footer, and non-content images are unaffected.
   ============================================================ */

body.school-vintage [data-comp-kind="Text Window"] img {
  filter: sepia(0.38) saturate(0.72) contrast(0.82) brightness(1.08);
  opacity: 0.92;
}


/* ============================================================
   PAGE HEADER VISUALS
   ============================================================ */

.page-header {
    background: #EDE8D4;
    position: relative;
    overflow: hidden;
    padding-block: 18px 16px;
}

.page-header-grid {
    display: none;
}

h1.page_header {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
    font-weight: 600;
    font-style: italic;
    color: var(--black) !important;
    line-height: 1.2;
    margin: 0 0 2px;
}

.page-header-accent {
    display: block;
    width: 36px;
    height: 2px;
    background: var(--red);
    margin-top: 6px;
}


/* ============================================================
   COMPONENT HEADER TYPOGRAPHY
   ============================================================ */

h2.component_header {
    color: var(--red);
    font-size: 1.75em;
    margin-bottom: 8px;
    font-weight: 600;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
}

h3.component_title {
    color: var(--black);
    font-size: 1.4em;
    margin-bottom: 6px;
    font-weight: 600;
}

/* Text window title label (CMS component span) */
span[id$="lblTextWindowTitle"],
span[id$="lblComponentHeaderText"] {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.4rem;
    font-weight: 600;
    font-style: italic;
    color: var(--black);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--red);
    line-height: 1.2;
}

/* Component header (Header.ascx) wraps its text in an <h1>; neutralize the
   browser's default h1 sizing/margins so it inherits the title styling above. */
span[id$="lblComponentHeaderText"] h1 {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    display: inline;
}

/* Right (window 2) panel */
#ucContentPage_pnlRightWindowControls {
    margin-top: 8px;
}

/* Right (window 2) panel title slightly smaller */
#ucContentPage_pnlRightWindowControls span[id$="lblTextWindowTitle"] {
    font-size: 2.25rem;
    padding-bottom: 6px;
    margin-bottom: 14px;
}

/* Suppress the <br> ASP.NET injects after title label */
span[id$="lblTextWindowTitle"] + br {
    display: none;
}


/* ============================================================
   TEXT WINDOW TYPOGRAPHY
   ============================================================ */

.textwindow_text h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.7rem;
    font-weight: 600;
    font-style: italic;
    color: var(--black);
    margin: 24px 0 12px;
    line-height: 1.25;
}

.textwindow_text h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--black);
    margin: 20px 0 8px;
}

.textwindow_text h4 {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--black);
    margin: 16px 0 6px;
}

.textwindow_text p {
    margin-bottom: 14px;
}

/* Content-area links stand out in IH red with a matching subtle underline.
   Scoped to .textwindow_text so global navigation / buttons / cards keep
   their own styling. */
.textwindow_text a {
    color: var(--red);
    text-decoration: none;
    transition: color 0.2s;
}

.textwindow_text a:hover {
    color: var(--dark-red);
    border-bottom-color: var(--dark-red);
}

/* ============================================================
   CONTENT-AREA MEDIA (text windows, news, component bodies)
   The content column on interior pages got wide after the layout
   rework, and bare <img>/<iframe> tags from the CMS editor were
   filling the entire column. These rules constrain them to
   sensible sizes while still respecting editor-set inline widths.
   ============================================================ */

/* 1. All images inside CMS content — responsive, preserve aspect, never upscale.
      Default cap of 400px prevents large un-resized images from blowing up the layout.
      Images the author explicitly resized in Froala get a `width` attribute (set by
      the editor JS) — those override the cap and display at their intended size. */
.textwindow_text img,
.divComponentContainer img,
#ucContentPage_pnlControls img {
    width: auto;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* 2. Right-column (Window 2 / .dualwindow_right) image cap.
      ONLY narrow secondary-column text-window images are constrained to
      220px — main column (.singlewindow, .dualwindow_left) images keep
      their editor-set widths. !important is required to beat Froala's
      inline style="width:XXXpx".
      TO ALLOW A WIDER IMAGE in the right column: add class="tw-wide" to
      the <img> in the editor. */
.dualwindow_right .textwindow_text img,
.dualwindow_right .divComponentContainer img {
    max-width: 220px !important;
    height: auto !important;
}

/* 3. Escape hatch — any image tagged .tw-wide bypasses the right-column
      cap and stays responsive to its column. */
.dualwindow_right .textwindow_text img.tw-wide,
.dualwindow_right .divComponentContainer img.tw-wide,
.dualwindow_right .textwindow_text .tw-wide img,
.dualwindow_right .divComponentContainer .tw-wide img {
    max-width: 100% !important;
}

/* 4. Video/iframe embeds — cap width, maintain 16:9, center block.
   !important required to override the width/height HTML attributes YouTube embeds add. */
.textwindow_text iframe,
.divComponentContainer iframe,
#ucContentPage_pnlControls iframe {
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    display: block !important;
    margin: 16px 0 !important;
    border: 0 !important;
}

/* 5. If someone wrapped a video in a responsive container div, keep it clean. */
.textwindow_text .video-wrap,
.textwindow_text [class*="embed"] {
    max-width: 100%;
}

/* 7. Mirror Froala's built-in fr-view image alignment classes on the live site.
      Froala writes fr-dii / fr-dib / fr-fil / fr-fir into the saved HTML but
      only applies their styles through its own .fr-view CSS — which does NOT
      exist on the public page. These rules make the live site render the same
      float/display/margin behaviour that the editor shows. */
.textwindow_text img.fr-dii {
    position: relative;
    display: inline-block;
    float: none;
    vertical-align: bottom;
    margin-left: 5px;
    margin-right: 5px;
}
.textwindow_text img.fr-dii.fr-fil {
    float: left;
    margin: 5px 5px 5px 0;
}
.textwindow_text img.fr-dii.fr-fir {
    float: right;
    margin: 5px 0 5px 5px;
}
/* fr-fic without left/right/dib → center block (inline center, or fr-dii stripped by CMS) */
.textwindow_text img.fr-fic:not(.fr-fil):not(.fr-fir):not(.fr-dib) {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
}
/* fr-fil/fr-fir without fr-dib → inline float.
   CMS strips fr-dii, so these classes are the sole signal for float mode.
   fr-fic may also be present as a stale class — fr-fil/fir wins. */
.textwindow_text img.fr-fil:not(.fr-dib) {
    float: left;
    display: inline-block;
    vertical-align: bottom;
    margin: 5px 5px 5px 0;
    max-width: min(100%, 400px);
}
.textwindow_text img.fr-fir:not(.fr-dib) {
    float: right;
    display: inline-block;
    vertical-align: bottom;
    margin: 5px 0 5px 5px;
    max-width: min(100%, 400px);
}
.textwindow_text img.fr-dib:not(.fr-fil):not(.fr-fir) {
    display: block;
    float: none;
    clear: both;
    vertical-align: bottom;
    margin: 5px auto;
    max-width: calc(100% - (2 * 5px));
}
.textwindow_text img.fr-dib.fr-fil {
    display: block;
    float: none;
    clear: both;
    vertical-align: bottom;
    margin: 5px auto 5px 0;
    max-width: calc(100% - (2 * 5px));
}
.textwindow_text img.fr-dib.fr-fir {
    display: block;
    float: none;
    clear: both;
    vertical-align: bottom;
    margin: 5px 0 5px auto;
    max-width: calc(100% - (2 * 5px));
}
/* Clearfix: when a floated image is the last thing in a container, the
   container collapses. This prevents that without extra markup. */
.textwindow_text::after {
    content: '';
    display: table;
    clear: both;
}

/* 7b. Image as the sole content of an ih-grid-2 column.
      In the editor Froala saves an inline width (e.g. style="width:322px")
      that pins the column; that inline style is stripped on save, so on the
      live site the floated image leaves its flex column with no width — the
      card expands and a large gap appears. Inside an ih-grid column the
      float serves no purpose (the grid IS the layout), so neutralise it and
      give the column a fixed width that matches the editor's rendering. */
.textwindow_text .ih-grid-2 > div:has(> img.fr-dii) {
    flex: 0 0 auto;
    width: 320px;
    max-width: 100%;
    /* Top-align the image with the card, matching the editor (the grid's
       align-items:start). Do NOT stretch/centre — cards are usually much
       taller than the image, which would float it in the middle. */
    align-self: flex-start;
}
.textwindow_text .ih-grid-2 > div > img.fr-dii {
    float: none;
    display: block;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* 6. When a content component is one of the narrow right-column panels,
      the iframe shouldn't aspect-ratio wider than the column allows —
      this caps visible iframe width so very narrow columns get a small
      player instead of a squashed-tall one. */
@media (min-width: 1100px) {
    .interior-wrapper .divComponentContainer iframe {
        max-width: 640px;
    }
}

/* ============================================================
   LINKS / DOWNLOADS CARD EFFECTS
   ============================================================ */

.linksList li {
    padding: 14px 18px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 8px;
    transition: border-color 0.25s, transform 0.25s;
    display: flex;
    align-items: center;
    gap: 12px;
}

.linksList li:hover {
    border-color: rgba(161,30,35,0.25);
    transform: translateX(4px);
}

.linksList li a {
    color: var(--black);
    font-size: 0.88rem;
    font-weight: 400;
    text-decoration: none;
}

.linksList li a:hover {
    color: var(--red);
}


/* ============================================================
   NEWS COMPONENT BRAND
   ============================================================ */

.newscomponent_item h3,
.newscomponent_item h3 a {
    margin-top: 0;
}

.newscomponent_item h3 a,
.newscomponent_item h3 a:visited {
    color: var(--black);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 600;
}

.newscomponent_item h3 a:hover {
    color: var(--red);
}

.newscomponent_readmore,
.newscomponent_readmore:hover {
    color: var(--black);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    border-bottom: 1px solid var(--black);
    padding-bottom: 2px;
    float: right;
    margin-top: 20px;
}

.newscomponent_readmore:hover {
    color: var(--red);
    border-bottom-color: var(--red);
    text-decoration: none;
}

/* --- Reworked layout: Archive/RSS top bar + tidy article rows --- */
.newscomponent_bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.newscomponent_rss,
.newscomponent_rss:visited {
    color: var(--red);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
}
.newscomponent_rss:hover { color: var(--black); }
.newscomponent_archivelink,
.newscomponent_archivelink:visited {
    float: none;            /* override legacy float:right from Styles.css */
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--black);
    text-decoration: none;
    border-bottom: 2px solid var(--red);
    padding-bottom: 2px;
}
.newscomponent_archivelink:hover { color: var(--red); }
.newscomponent_item { overflow: hidden; }   /* clear the floated image + read-more */
.newscomponent_image {
    float: left;
    width: 150px;
    height: auto;
    margin: 3px 18px 8px 0;
    border-radius: 4px;
}
.newscomponent_summary {
    display: block;
    color: #4a4a4a;
    font-size: 0.95rem;
    line-height: 1.55;
    margin-top: 4px;
}
/* Cap the readable width so a full-width (single-window) page doesn't stretch
   the list edge-to-edge. No effect in a narrow sidebar column (cap never hits). */
.divComponentContainer[data-comp-kind="News"] {
    max-width: 820px;
}


/* ============================================================
   GALLERY CAPTION
   ============================================================ */

.fotorama__caption span,
.fotorama__caption,
.fotorama__caption__wrap {
    background-color: #101010 !important;
    color: White;
    text-decoration: none;
    font-weight: normal !important;
}


/* ============================================================
   FROALA EDITOR PREVIEW (admin only)
   Mirrors .textwindow_text rules using .fr-element so the CMS
   editor preview matches the live site. .fr-element does not
   exist on the live site so these rules have zero public impact.
   !important is required to beat Bootstrap's generic h2/h3/etc
   rules that are already loaded in the admin.
   ============================================================ */

.fr-element h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.7rem !important;
    font-weight: 600 !important;
    font-style: italic !important;
    color: var(--black) !important;
    margin: 24px 0 12px !important;
    line-height: 1.25 !important;
}

.fr-element h3 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    color: var(--black) !important;
    margin: 20px 0 8px !important;
}

.fr-element h4 {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--black) !important;
    margin: 16px 0 6px !important;
}

.fr-element p {
    margin-bottom: 14px !important;
}

.fr-element a {
    color: var(--red);
    text-decoration: none;
}

.fr-element a:hover {
    color: var(--dark-red);
}

.fr-element a.ih-btn { color: #ffffff !important; }
.fr-element a.ih-btn:hover { color: #ffffff !important; }
.fr-element a.ih-btn-outline { color: var(--red) !important; }
.fr-element a.ih-btn-outline:hover { color: #ffffff !important; }
.fr-element .ih-btn,
.fr-element .ih-btn-outline { margin-right: 8px !important; margin-bottom: 4px !important; }

/* No !important on max-width — inline styles set by Froala resize must override.
   Base is 100% (responsive). Float images are capped at 400px via fr-fil/fr-fir rules below,
   matching the public site exactly. Break-text (fr-dib) images inherit 100% from base. */
.fr-element img {
    max-width: 100%;
    height: auto !important;
    box-sizing: border-box !important;
}
/* Float images: cap at 400px so they don't overwhelm text beside them */
.fr-element img.fr-fil:not(.fr-dib),
.fr-element img.fr-fir:not(.fr-dib) {
    max-width: min(100%, 400px);
}

.fr-element iframe {
    max-width: 100% !important;
    display: block !important;
    margin: 16px 0 !important;
    border: 0 !important;
}

/* ── ih-card ── */
.fr-element .ih-card {
    background: #ffffff !important;
    border-left: 4px solid var(--red) !important;
    border-radius: 0 5px 5px 0 !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07) !important;
    padding: 22px 26px !important;
    margin: 20px 0 !important;
}
.fr-element .ih-card h1 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    color: var(--black) !important;
    margin: 0 0 14px !important;
}
.fr-element .ih-card h2 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--red) !important;
    margin: 0 0 14px !important;
}
.fr-element .ih-card h3 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--red) !important;
    margin: 0 0 14px !important;
}
.fr-element .ih-card img {
    height: auto !important;
}
.fr-element .ih-card.ih-dept-card {
    text-align: center !important;
    border: none !important;
    border-top: 4px solid var(--red) !important;
    border-radius: 5px !important;
    padding: 28px 20px 20px !important;
}
.fr-element .ih-dept-icon {
    display: block !important;
    font-size: 2.2rem !important;
    color: var(--red) !important;
    margin-bottom: 14px !important;
}
.fr-element .ih-dept-name {
    display: block !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--red) !important;
    text-decoration: none !important;
    margin-bottom: 10px !important;
}
.fr-element .ih-dept-card p {
    font-size: 0.875rem !important;
    color: #555 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ── ih-callout ── */
.fr-element .ih-callout {
    background: #EDE8D4 !important;
    border-radius: 5px !important;
    padding: 26px 30px !important;
    margin: 20px 0 !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}
.fr-element .ih-callout h2,
.fr-element .ih-callout h3 {
    color: var(--red) !important;
    margin-top: 0 !important;
    font-style: normal !important;
}

/* ── ih-highlight ── */
.fr-element .ih-highlight {
    background: #fdf5f5 !important;
    border: 1px solid rgba(161,30,35,0.2) !important;
    border-radius: 5px !important;
    padding: 16px 20px !important;
    margin: 16px 0 !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
}

/* ── ih-grid-2 / ih-grid-3 ── */
.fr-element .ih-grid-2 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin: 20px 0 !important;
    align-items: stretch !important;
}
.fr-element .ih-grid-2 > div {
    flex: 1 1 300px !important;
}
.fr-element .ih-grid-2 > div:has(> img) {
    flex: 0 0 auto !important;
}
.fr-element .ih-grid-2 > div:not(.ih-card):not(:has(> img)),
.fr-element .ih-grid-3 > div:not(.ih-card):not(:has(> img)) {
    padding: 16px 20px !important;
}
.fr-element .ih-card .ih-grid-2 > div:not(.ih-card):not(:has(> img)) {
    padding: 0 !important;
}
.fr-element .ih-pad {
    padding: 16px 20px !important;
}
.fr-element .ih-grid-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    margin: 20px 0 !important;
}
.fr-element .ih-grid-3 > div {
    flex: 1 1 200px !important;
}

/* ── ih-link-list ── */
.fr-element .ih-link-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.fr-element .ih-link-list li {
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}
.fr-element .ih-link-list li a {
    display: block !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: var(--red) !important;
    text-decoration: none !important;
    margin-bottom: 3px !important;
}
.fr-element .ih-link-list li span {
    font-size: 0.875rem !important;
    color: var(--gray) !important;
}

/* Froala image alignment classes — force them to match live-site rendering.
   Only center when no explicit left/right class is present.
   :not(.fr-dii) ensures inline mode is never overridden to block. */
.fr-element img.fr-dib:not(.fr-fil):not(.fr-fir),
.fr-element img.fr-fic:not(.fr-fil):not(.fr-fir):not(.fr-dii) {
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.fr-element img.fr-dib.fr-fil,
.fr-element img.fr-fic.fr-fil:not(.fr-dii) {
    display: block !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}
.fr-element img.fr-dib.fr-fir,
.fr-element img.fr-fic.fr-fir:not(.fr-dii) {
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}
/* Inside IH components images left-align instead of centering. */
.fr-element .ih-card img.fr-dib,
.fr-element .ih-card img.fr-fic,
.fr-element .ih-callout img.fr-dib,
.fr-element .ih-callout img.fr-fic {
    margin-left: 0 !important;
    margin-right: auto !important;
}
.fr-element .ih-social-icon {
    margin-right: 7px !important;
}



/* ============================================================
   SLIDESHOW / HERO + SLICK SLIDER
   ============================================================ */

/* Slideshow rules removed — the modern fade-transition slideshow lives entirely
   in Controls/ucHeader.ascx (custom slideshow that replaced the old Slick layout).
   The old rules here were overriding ucHeader's `position:absolute; inset:0`
   stacking with `position:relative`, which broke the fade transitions and made
   slides invisible. ucHeader.ascx is the single source of truth for slideshow CSS. */

/* Search area */
.SearchArea {
    width: 100%;
    background: #1F78FF;
    margin-top: -60px;
    padding: 10px 0;
    transition: all 0.5s;
}


/* ============================================================
   LEFT NAV VISUAL POLISH
   — extracted from DynamicNav section of Styles.css
   ============================================================ */

.dyn-nav-section-link,
.dyn-nav-section-link:visited {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-weight: 600;
    font-style: italic;
    color: var(--black) !important;
    text-decoration: none;
    transition: color 0.2s;
}

.dyn-nav-section-link:hover {
    color: var(--red) !important;
    text-decoration: none;
}

.dyn-nav-item-row > a {
    color: var(--black);
    font-weight: 400;
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease,
                background 0.2s ease;
}

.dyn-nav-item-row > a:hover {
    color: var(--red);
    border-left-color: var(--red);
    background: rgba(161,30,35,0.04);
    text-decoration: none;
}

.dyn-nav-toggle {
    color: rgba(0,0,0,0.3);
    transition: color 0.2s ease;
}

.dyn-nav-toggle:hover {
    color: var(--red);
}

.dyn-nav-item.open > .dyn-nav-item-row > .dyn-nav-toggle {
    color: var(--red);
}

/* Active / current page */
.DynamicNav_currentpage .dyn-nav-item-row > a,
li.DynamicNav_currentpage .dyn-nav-item-row > a {
    color: var(--red) !important;
    border-left-color: var(--red) !important;
    font-weight: 500 !important;
    background: rgba(161,30,35,0.05) !important;
}

a.DynamicNav_currentpage_link {
    color: var(--red) !important;
    border-left-color: var(--red) !important;
    font-weight: 500 !important;
    background: rgba(161,30,35,0.05) !important;
}

.dyn-nav-subitem > a {
    font-size: 0.78rem;
    color: var(--gray);
    text-decoration: none;
    font-weight: 300;
    transition: color 0.2s ease;
}

.dyn-nav-subitem > a:hover {
    color: var(--red);
    text-decoration: none;
}

/* Grandchild active */
.dyn-nav-subitem > a.DynamicNav_currentpage_link {
    color: var(--red) !important;
    font-weight: 500 !important;
}


/* ============================================================
   SIDEBAR WIDGET TYPOGRAPHY
   ============================================================ */

#ucLeftNav_pnlLeftSide span[id$="lblContent"] h4,
#ucLeftNav_pnlLeftSide span[id$="lblContent"] h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--black);
    margin: 0 0 8px;
}

#ucLeftNav_pnlLeftSide span[id$="lblContent"] a {
    font-size: 0.72rem;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
}

#ucLeftNav_pnlLeftSide span[id$="lblContent"] a:hover {
    color: var(--red);
    border-bottom-color: var(--red);
}


/* ============================================================
   RESPONSIVE BRAND BREAKPOINTS
   ============================================================ */

@media screen and (max-width: 640px) {
    h1.page_header {
        font-size: clamp(1.75rem, 8vw, 2.4rem);
    }
}


/* ============================================================
   SCHOOL HOME PANELS
   ============================================================ */

/* ══════════════════════════════════════════════════════════════════
   School Building Homepage — News + Events Auto-Panels
   Injected by ucSchoolHomePanels.ascx on school root pages.
   ══════════════════════════════════════════════════════════════════ */

/* ── Outer two-column layout ─────────────────────────────────────── */
.school-home-panels {
    display: flex;
    gap: 44px;
    margin-bottom: 40px;
    align-items: flex-start;
}

.school-home-panels .school-home-news {
    flex: 0 0 60%;
    min-width: 0;
}

.school-home-panels .school-home-events {
    flex: 1;
    min-width: 0;
}

/* ── Section headers ─────────────────────────────────────────────── */
.school-home-panels .shp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1.5px solid #a11e23;
    margin-bottom: 12px;
}

.school-home-panels .shp-section-label {
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #a11e23;
    margin: 0;
    line-height: 1;
}

.school-home-panels .shp-view-all {
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: #6b6b6b;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.school-home-panels .shp-view-all:hover {
    color: #a11e23;
}

/* ── News: white cards stacked with small gap ────────────────────── */
.school-home-panels .shp-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/*
 * Each news item is a white card using CSS grid:
 *   Col 1: landscape thumbnail (220px)   Col 2: date + title
 *   Row 2 spans full width: excerpt + read more
 */
.school-home-panels .shp-news-item {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: auto auto;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    list-style: none;
}

/* Landscape thumbnail — top-left cell only */
.school-home-panels .shp-news-thumb-wrap {
    grid-column: 1;
    grid-row: 1;
    width: 220px;
    height: 124px;
    overflow: hidden;
    background: #ddd;
    align-self: start;
}

.school-home-panels .shp-news-thumb-wrap a {
    display: block;
    width: 220px;
    height: 124px;
}

.school-home-panels .shp-news-thumb {
    width:  220px !important;
    height: 124px !important;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Date + title — top-right cell */
.school-home-panels .shp-news-header {
    grid-column: 2;
    grid-row: 1;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* Excerpt + read more — full-width bottom row */
.school-home-panels .shp-news-footer {
    grid-column: 1 / 3;
    grid-row: 2;
    padding: 12px 20px 18px;
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
}

.school-home-panels .shp-news-category {
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #a11e23;
    margin-bottom: 6px;
    display: block;
}

.school-home-panels .shp-news-title {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;
    color: #1a1a1a;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
    transition: color 0.15s;
}

.school-home-panels .shp-news-title:hover {
    color: #a11e23;
}

/* SubHeader can contain a bare <div> from the rich-text editor — flatten it inline */
.school-home-panels .shp-news-excerpt {
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 0.82rem;
    color: #6b6b6b;
    line-height: 1.6;
    margin-bottom: 14px;
    max-height: calc(1.6em * 3);
    overflow: hidden;
}

.school-home-panels .shp-news-excerpt div,
.school-home-panels .shp-news-excerpt p {
    display: inline;
    margin: 0;
    padding: 0;
}

.school-home-panels .shp-news-readmore {
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #a11e23;
    text-decoration: none;
    display: inline-block;
    margin-top: auto;
    transition: letter-spacing 0.15s;
}

.school-home-panels .shp-news-readmore:hover {
    letter-spacing: 2.5px;
}

/* ── Events: white cards stacked with gap ───────────────────────── */
.school-home-panels .shp-events-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.school-home-panels .shp-event-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    list-style: none;
}

/* Date badge — compact square, flush style matching design */
.school-home-panels .shp-events-list .shp-event-date {
    flex-shrink: 0 !important;
    width: 58px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    background: #a11e23 !important;
    border-radius: 0 !important;
    padding: 8px 4px !important;
    text-align: center !important;
    color: #ffffff !important;
    line-height: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.school-home-panels .shp-events-list .shp-event-month {
    display: block !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    opacity: 0.9 !important;
    margin-bottom: 2px !important;
}

.school-home-panels .shp-events-list .shp-event-day {
    display: block !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin-bottom: 3px !important;
}

.school-home-panels .shp-events-list .shp-event-dow {
    display: block !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 0.52rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    opacity: 0.8 !important;
}

/* Event body */
.school-home-panels .shp-event-body {
    flex: 1;
    min-width: 0;
}

.school-home-panels .shp-event-title {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
    transition: color 0.15s;
}

.school-home-panels .shp-event-title:hover {
    color: #a11e23;
}

.school-home-panels .shp-event-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 0.72rem;
    color: #6b6b6b;
    line-height: 1.4;
}

.school-home-panels .shp-event-meta i {
    color: #a11e23;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.school-home-panels .shp-event-meta-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .school-home-panels {
        flex-direction: column;
        gap: 32px;
    }

    .school-home-panels .school-home-news,
    .school-home-panels .school-home-events {
        flex: none;
        width: 100%;
    }
}


/* ============================================================
   TEXT WINDOW UTILITY CLASSES  (ih-*)
   Use these in the CMS rich-text editor source view.
   All classes are prefixed ih- to avoid conflicts.
   ============================================================ */

/* ── Card ────────────────────────────────────────────────────────────
   Clean section container with a red left accent and subtle shadow.
   Usage: <div class="ih-card"> ... </div>                          */
.ih-card {
    background: #ffffff;
    border-left: 4px solid var(--red);
    border-radius: 0 5px 5px 0;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07);
    padding: 22px 26px;
    margin: 20px 0;
}

/* ── Department icon card ─────────────────────────────────────────────
   Usage: <div class="ih-card ih-dept-card">
            <i class="ih-dept-icon fa-solid fa-..."></i>
            <a class="ih-dept-name" href="...">Title</a>
            <p>Description</p>
          </div>                                                        */
a.ih-dept-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
a.ih-dept-card p {
    color: #555;
}
a.ih-dept-card:hover {
    text-decoration: none;
    color: inherit;
}
/* Card itself is the clickable element: <a class="ih-card ih-dept-card">.
   Reset link defaults so the <a> renders like a block card and lets each
   child element (icon, name, p) provide its own color. */
.ih-dept-card {
    display: block;
    text-decoration: none;
    color: inherit;
    text-align: center;
    border-left: none;
    border-top: 4px solid var(--red);
    border-radius: 5px;
    padding: 28px 20px 20px;
    position: relative;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}
.ih-dept-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    text-decoration: none;
}
.ih-dept-card:hover .ih-dept-name {
    color: var(--dark-red);
    text-decoration: underline;
}
.ih-dept-icon {
    display: block;
    font-size: 2.2rem;
    color: var(--red);
    margin-bottom: 14px;
}
.ih-dept-name {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--red);
    text-decoration: none;
    margin-bottom: 10px;
}
.ih-dept-card p {
    font-size: 0.875rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.ih-card h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 14px;
}
.ih-card h2 {
    font-size: 1.75rem;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--red);
    margin: 0 0 14px;
}
.ih-card h3 {
    font-size: 1rem;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--red);
    margin: 0 0 14px;
}

/* Feed URL code blocks */
.ih-feed-url {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    background: #f4f4f4;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 3px;
    padding: 6px 10px;
    margin: 4px 0 14px;
    word-break: break-all;
    color: #444;
    user-select: all;
}

/* Card photo figure + caption */
.ih-card-figure {
    margin: 20px 0 8px;
    text-align: center;
}
.ih-card-figure img {
    max-width: 100%;
    height: auto;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 4px;
}
.ih-card-figure figcaption {
    font-size: 0.78rem;
    color: var(--gray);
    font-style: italic;
    margin-top: 8px;
}

/* ── Callout ─────────────────────────────────────────────────────────
   Warm cream block for intro text, announcements, or welcome copy.
   Usage: <div class="ih-callout"> ... </div>                       */
.ih-callout {
    background: #EDE8D4;
    border-radius: 5px;
    padding: 26px 30px;
    margin: 20px 0;
    font-size: 1rem;
    line-height: 1.7;
    overflow: hidden;
}
.ih-callout h2, .ih-callout h3 {
    color: var(--red);
    margin-top: 0;
    font-style: normal;
}
.ih-callout > p:first-of-type {
    margin-top: 0;
}
.textwindow_text .ih-callout img[width],
.textwindow_text .ih-card img[width],
.divComponentContainer .ih-callout img[width],
.divComponentContainer .ih-card img[width] {
    max-width: 100%;
}
.ih-callout img.fr-dib,
.ih-callout img.fr-fic,
.ih-card img.fr-dib,
.ih-card img.fr-fic {
    margin-left: 0;
    margin-right: auto;
}

/* ── Highlight ───────────────────────────────────────────────────────
   Red-tinted box for important notices or key information.
   Usage: <div class="ih-highlight"> ... </div>                     */
.ih-highlight {
    background: #fdf5f5;
    border: 1px solid rgba(161,30,35,0.2);
    border-radius: 5px;
    padding: 16px 20px;
    margin: 16px 0;
    font-size: 1rem;
    line-height: 1.65;
}

/* ── Link List ───────────────────────────────────────────────────────
   Styled list where each item has a bold linked title + description.
   Usage:
     <ul class="ih-link-list">
       <li><a href="...">Link Title</a><span>Description text.</span></li>
     </ul>                                                           */
.ih-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ih-link-list li {
    padding: 8px 0;
    line-height: 1.5;
}
.ih-link-list li a {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--red);
    text-decoration: none;
    margin-bottom: 3px;
}
.ih-link-list li a:hover {
    color: var(--dark-red);
    text-decoration: underline;
}
.ih-link-list li span {
    font-size: 0.875rem;
    color: var(--gray);
}

/* ── Button (solid) ──────────────────────────────────────────────────
   Usage: <a class="ih-btn" href="...">Button Text</a>             */
.ih-btn {
    display: inline-block;
    background: var(--red);
    color: #ffffff !important;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 11px 24px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: background 0.2s;
    margin-top: 10px;
}
.ih-btn:hover {
    background: var(--dark-red) !important;
    color: #ffffff !important;
}

/* ── Button (outline) ────────────────────────────────────────────────
   Usage: <a class="ih-btn-outline" href="...">Button Text</a>    */
.ih-btn-outline {
    display: inline-block;
    background: transparent;
    color: var(--red) !important;
    border: 2px solid var(--red);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 9px 22px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s;
    margin-top: 10px;
}
.ih-btn-outline:hover {
    background: var(--red) !important;
    color: #ffffff !important;
}

/* ── 2-Column Grid ───────────────────────────────────────────────────
   Stacks to 1 column on mobile.
   Usage: <div class="ih-grid-2"> <div>...</div> <div>...</div> </div> */
.ih-grid-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
    align-items: stretch;
}
.ih-grid-2 > div,
.ih-grid-2 > a {
    flex: 1 1 300px;
}
/* If a column contains only an image, shrink it to fit the image instead of
   stretching to fill half the row — eliminates the gap between image and card. */
.ih-grid-2 > div:has(> img) {
    flex: 0 0 auto;
}
/* Plain (non-card, non-image) grid columns get breathing room so text
   isn't flush to the edge. Cards already pad themselves. */
.ih-grid-2 > div:not(.ih-card):not(:has(> img)),
.ih-grid-3 > div:not(.ih-card):not(:has(> img)) {
    padding: 16px 20px;
}
/* ...but sub-grids nested inside a card (e.g. social links) stay tight. */
.ih-card .ih-grid-2 > div:not(.ih-card):not(:has(> img)) {
    padding: 0;
}
/* Reusable padding helper for standalone (non-grid) blocks so they match
   the padded columns. Usage: <div class="ih-pad"> ... </div> */
.ih-pad {
    padding: 16px 20px;
}

/* Social / inline icons (injected by app.js or hand-placed) need a little
   breathing room before the text/link that follows them. */
.ih-social-icon {
    margin-right: 7px;
}

/* ── 3-Column Grid ───────────────────────────────────────────────────
   Usage: <div class="ih-grid-3"> ... </div>                       */
.ih-grid-3 {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 20px 0;
}
.ih-grid-3 > div,
.ih-grid-3 > a {
    flex: 1 1 200px;
}

@media (max-width: 680px) {
    .ih-grid-2 > div,
    .ih-grid-2 > a,
    .ih-grid-3 > div,
    .ih-grid-3 > a { flex: 1 1 100%; }
}

/* ── Department / Launchpad card ─────────────────────────────────────
   Usage:
     <div class="ih-card ih-dept-card">
       <i class="fa-solid fa-book-open ih-dept-icon"></i>
       <a class="ih-dept-name" href="...">Department</a>
       <p>Description.</p>
     </div>                                                           */
/* Images inside any ih-card render full-width with spacing */
.ih-card img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Links inside IH components should be red on the public site.
   (.fr-element a covers the editor; these cover the live site.) */
.ih-card a:not(.ih-btn):not(.ih-btn-outline),
.ih-callout a:not(.ih-btn):not(.ih-btn-outline),
.ih-highlight a:not(.ih-btn):not(.ih-btn-outline),
.ih-link-list a,
.ih-quick-links a {
    color: var(--red);
    text-decoration: none;
}
.ih-card a:not(.ih-btn):not(.ih-btn-outline):hover,
.ih-callout a:not(.ih-btn):not(.ih-btn-outline):hover,
.ih-highlight a:not(.ih-btn):not(.ih-btn-outline):hover {
    color: var(--dark-red);
}

/* Media-style card: logo left, text right */
.ih-card--media {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.ih-card--media > a:first-child {
    flex: 0 0 110px;
}
.ih-card--media > a:first-child img {
    width: 100%;
    height: auto;
    display: block !important;
    float: none !important;
    max-width: none !important;
    margin: 0 !important;
}
.ih-card--media > div {
    flex: 1;
    min-width: 0;
}
@media (max-width: 500px) {
    .ih-card--media { flex-direction: column; }
    .ih-card--media > a:first-child { flex: none; width: 100%; }
}

.ih-dept-icon {
    display: block;
    font-size: 1.6rem;
    color: var(--red);
    margin-bottom: 10px;
    opacity: 0.85;
}
.ih-dept-name {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--red);
    text-decoration: none;
    margin-bottom: 8px;
    transition: color 0.2s;
}
.ih-dept-name:hover { color: var(--dark-red); text-decoration: underline; }
.ih-dept-card p {
    font-size: 0.875rem;
    color: var(--gray);
    line-height: 1.6;
    margin: 0;
}

/* ── Media List ───────────────────────────────────────────────────────
   Thumbnail + title link + description rows. Wrap in ih-card optional.
   Usage:
     <ul class="ih-media-list">
       <li>
         <a href="..."><img src="..." alt="..."></a>
         <div>
           <a class="ih-media-title" href="...">Title</a>
           <span class="ih-media-desc">Description.</span>
         </div>
       </li>
     </ul>                                                             */
.ih-media-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ih-media-list li {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}
.ih-media-list li:last-child { border-bottom: none; }
.ih-media-list li > a { flex-shrink: 0; }
.ih-media-list li img {
    min-width: 80px;
    height: auto;
    display: block;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.ih-media-title {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--red);
    text-decoration: none;
    margin-bottom: 5px;
}
.ih-media-title:hover { color: var(--dark-red); text-decoration: underline; }
.ih-media-desc {
    font-size: 0.875rem;
    color: var(--gray);
    line-height: 1.55;
}
/* ── Quick Links ─────────────────────────────────────────────────────
   Styled list for navigation-style plain link lists (no descriptions).
   Wraps to next line as needed. Each link becomes a pill with red left
   accent and arrow indicator on hover.
   Usage:
     <ul class="ih-quick-links">
       <li><a href="...">Link Title</a></li>
     </ul>                                                              */
.ih-quick-links {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ih-quick-links li {
    flex: 0 1 auto;
}
.ih-quick-links li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid rgba(161,30,35,0.2);
    border-left: 3px solid var(--red);
    border-radius: 4px;
    padding: 10px 16px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--red);
    text-decoration: none;
    transition: all 0.2s;
}
.ih-quick-links li a::after {
    content: "→";
    font-weight: 400;
    opacity: 0.6;
    transition: transform 0.2s;
}
.ih-quick-links li a:hover {
    background: var(--red);
    color: #ffffff;
    border-color: var(--red);
}
.ih-quick-links li a:hover::after {
    transform: translateX(3px);
    opacity: 1;
}
/* Ask IH chatbot styles — extracted to /AI/ai-chat.css so the entire
   AI feature lives in one drop-in folder. Loaded via its own <link>
   tag in Content.aspx and protected/ProtectedPage.master. */

/* ============================================================
   MOBILE HEADER FIXES
   Prevent the scroll-morph (logo bloom + gap expansion) from
   running on mobile — the header is too compact for the 88px
   logo. Keep the logo at its default 52px size on small screens.
   ============================================================ */
@media (max-width: 767px) {
    /* Kill the scroll-triggered logo bloom */
    header.ih-scrolled .header-logo.hl-morph .hl-vintage {
        width: 52px !important;
        height: 52px !important;
        top: -4px !important;
        left: -4px !important;
    }
    /* Kill the container padding swell */
    header.ih-scrolled .header-container {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    /* Kill the brand gap swell */
    header.ih-scrolled .header-brand {
        gap: 12px !important;
    }
    /* Prevent the logo overflow from creating horizontal scroll */
    header {
        overflow-x: hidden;
    }
    /* Interior page shell — prevent any child from creating h-scroll */
    .sh-strip,
    .sh-hero,
    .page-header {
        overflow-x: hidden;
    }
}

/* ============================================================
   Social media icon utility classes
   Usage: <span class="ih-social-email"></span>
   Froala-safe: span with a class is preserved; icon renders via ::before.
   ============================================================ */
.ih-social-email::before,
.ih-social-twitter::before,
.ih-social-instagram::before,
.ih-social-linkedin::before,
.ih-social-facebook::before,
.ih-social-youtube::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 1.1em;
    vertical-align: middle;
    margin-right: .25em;
}
.ih-social-email::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    content: "\f0e0";
}
.ih-social-twitter::before {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    content: "\e61b";
}
.ih-social-instagram::before {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    content: "\f16d";
}
.ih-social-linkedin::before {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    content: "\f08c";
}
.ih-social-facebook::before {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    content: "\f09a";
}
.ih-social-youtube::before {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    content: "\f167";
}
