.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-29 .elementor-element.elementor-element-5175e4ba .elementor-menu-toggle{margin:0 auto;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS *//* St Patrick's header. Menu items come from Appearance > Menus > Main Menu (Nav Menu widget); this CSS only styles them.
   Colours, fonts, text sizes, radii, logo and header heights all come from the global variables (Elementor > Variables). */
.elementor-location-header { position: relative; z-index: 100; }
.sps-header a { text-decoration: none; }
.sps-header :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sps-header .elementor-widget-nav-menu { width: auto; flex: 0 0 auto; margin: 0; }

/* Desktop menu. Selectors use `.elementor-nav-menu a.elementor-item` so size/padding stay identical in every state
   (Elementor Pro's own a:hover rule would otherwise change the padding on hover and make items jump). */
.sps-header .elementor-nav-menu--main .elementor-nav-menu { align-items: center; gap: 2px; }
.sps-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item { font-family: var(--sps-font); font-size: var(--sps-text-ui); font-weight: 700; line-height: 1.2; color: var(--sps-white); fill: currentColor; padding: 14px 16px; border: 0; border-radius: var(--sps-radius-pill); transition: background-color .15s ease; }
.sps-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:is(:hover, :focus, .highlighted, .elementor-item-active) { color: var(--sps-white); fill: currentColor; background-color: var(--sps-on-dark-tint); }
.sps-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item::before, .sps-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item::after { content: none; }
.sps-header .elementor-nav-menu--main .elementor-item .sub-arrow { font-size: 10px; padding-left: 8px; }
.sps-header .elementor-nav-menu--main .sub-menu { min-width: 270px !important; background-color: var(--sps-white); border-radius: var(--sps-radius-lg); padding: 8px; box-shadow: 0 18px 40px var(--sps-shadow); }
.sps-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item { font-family: var(--sps-font); font-size: var(--sps-text-ui); font-weight: 400; line-height: 1.4; color: var(--sps-ink); background-color: transparent; padding: 11px 16px; border: 0; border-radius: var(--sps-radius-md); transition: background-color .15s ease, color .15s ease; }
.sps-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item:is(:hover, :focus, .highlighted) { color: var(--sps-green-band); background-color: var(--sps-sage); }
.sps-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item.elementor-item-active { color: var(--sps-green-band); font-weight: 600; }
/* The last top-level item (Enrol) is the call-to-action pill */
.sps-header .elementor-nav-menu--main .elementor-nav-menu > li:last-child { margin-left: 10px; }
.sps-header .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a.elementor-item { background-color: var(--sps-white); color: var(--sps-green-band); fill: currentColor; padding: 14px 24px; font-weight: 600; }
.sps-header .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a.elementor-item:is(:hover, :focus, .highlighted, .elementor-item-active) { background-color: var(--sps-cream); color: var(--sps-green-band); fill: currentColor; }

/* Mobile / tablet menu: round toggle + full-screen green panel, with the crest and school name still showing above it.
   Top-level items are compact rows; tapping one with a chevron opens its links (the widget's built-in behaviour). */
.sps-header .elementor-menu-toggle { position: relative; z-index: 2; width: 48px; height: 48px; padding: 0; margin: 0; font-size: 20px; color: var(--sps-white); background-color: transparent; border: 1.5px solid currentColor; border-radius: 50%; }
.sps-header .elementor-menu-toggle svg { fill: currentColor; }
.sps-header .elementor-menu-toggle.elementor-active { color: var(--sps-white); border-color: var(--sps-on-dark-faint); }
.sps-header nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 100vh; height: 100dvh; max-height: none !important; margin: 0 !important; z-index: 1; box-sizing: border-box; padding: 96px var(--sps-gutter) 40px; overflow-y: auto; overscroll-behavior: contain; background-color: var(--sps-green-band); box-shadow: none; opacity: 1; visibility: visible; transform: none !important; transition: opacity .25s ease, visibility .25s ease; }
.sps-header .elementor-menu-toggle:not(.elementor-active) + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { opacity: 0; visibility: hidden; pointer-events: none; }
.sps-header nav.elementor-nav-menu--dropdown .elementor-nav-menu { background-color: transparent; border-top: 1px solid var(--sps-on-dark-tint); }
.sps-header nav.elementor-nav-menu--dropdown .elementor-nav-menu a { font-family: var(--sps-font); background-color: transparent !important; border: 0; text-align: left; transition: color .15s ease; }
.sps-header nav.elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item { justify-content: space-between; min-height: 56px; padding: 14px 0; margin: 0; font-size: var(--sps-text-body-lg); font-weight: 700; line-height: 1.3; color: var(--sps-white) !important; fill: var(--sps-white); border-bottom: 1px solid var(--sps-on-dark-tint); }
.sps-header nav.elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item[aria-expanded="true"] { border-bottom-color: transparent; }
.sps-header nav.elementor-nav-menu--dropdown .sub-arrow { display: flex; align-items: center; margin: 0; padding: 12px 4px 12px 20px; font-size: 16px; transition: transform .25s ease; }
.sps-header nav.elementor-nav-menu--dropdown a[aria-expanded="true"] .sub-arrow { transform: rotate(180deg); padding: 12px 20px 12px 4px; }
/* Section headings that don't link anywhere (href "#"): stretch the chevron's tap area over the whole row,
   so tapping the word opens the section too. A heading given a real link stays a normal link with its own chevron. */
.sps-header nav.elementor-nav-menu--dropdown a.has-submenu[href="#"] .sub-arrow::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.sps-header nav.elementor-nav-menu--dropdown a[aria-expanded="true"][href="#"] .sub-arrow { transform: none; padding: 12px 4px 12px 20px; }
.sps-header nav.elementor-nav-menu--dropdown a[aria-expanded="true"][href="#"] .sub-arrow svg { transform: rotate(180deg); }
.sps-header nav.elementor-nav-menu--dropdown .sub-arrow svg { transition: transform .25s ease; }
.sps-header nav.elementor-nav-menu--dropdown .sub-menu { position: static !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 0 14px; background-color: transparent; border-bottom: 1px solid var(--sps-on-dark-tint); }
.sps-header nav.elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-sub-item { justify-content: flex-start; min-height: 42px; padding: 9px 0 9px 14px; font-size: var(--sps-text-menu-sub); font-weight: 500; line-height: 1.4; color: var(--sps-on-dark-strong) !important; }
.sps-header nav.elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-sub-item:is(:hover, :focus) { color: var(--sps-white) !important; }
.sps-header nav.elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-sub-item.elementor-item-active { color: var(--sps-white) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
body:has(.sps-header .elementor-menu-toggle.elementor-active) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .sps-header nav.elementor-nav-menu--dropdown.elementor-nav-menu__container, .sps-header nav.elementor-nav-menu--dropdown .sub-arrow, .sps-header nav.elementor-nav-menu--dropdown .sub-arrow svg { transition: none; } }

/* Any page that starts with a photo hero (sps-hero or sps-page-hero): header sits transparent over the photo, then fills with the
   bright green (sps-green-band) on scroll. The logo and header height shrink between the sps-logo-header / sps-header-h variables and their -solid versions. */
body:has(.sps-hero, .sps-page-hero):not(.elementor-editor-active) .elementor-location-header { position: absolute; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; }
body:has(.sps-hero, .sps-page-hero) .sps-header { background-color: transparent; box-shadow: none; }
body:has(.sps-hero, .sps-page-hero) .sps-brand-logo { filter: drop-shadow(0 2px 10px var(--sps-text-shadow)); }
@supports (animation-timeline: scroll()) {
  body:has(.sps-hero, .sps-page-hero):not(.elementor-editor-active) .elementor-location-header { position: fixed; }
  body:has(.sps-hero, .sps-page-hero) .sps-header { animation: sps-hdr-solid linear both; animation-timeline: scroll(root); animation-range: 0px 48px; }
  @media (min-width: 1025px) {
    body:has(.sps-hero, .sps-page-hero) .sps-header-inner { animation: sps-hdr-shrink linear both; animation-timeline: scroll(root); animation-range: 0px 48px; }
    body:has(.sps-hero, .sps-page-hero) .sps-brand-logo { animation: sps-hdr-logo linear both; animation-timeline: scroll(root); animation-range: 0px 48px; }
  }
}
@keyframes sps-hdr-solid { from { background-color: rgba(11,138,69,0); box-shadow: 0 6px 20px var(--sps-shade-none); } to { background-color: var(--sps-green-band); box-shadow: 0 6px 20px var(--sps-shade-faint); } }
@keyframes sps-hdr-shrink { to { min-height: var(--sps-header-h-solid); } }
@keyframes sps-hdr-logo { to { height: var(--sps-logo-header-solid); filter: drop-shadow(0 2px 10px var(--sps-shade-none)); } }/* End custom CSS */