/*=====================================================
Saint Peter's College — brand overrides
Loaded after style.css. Keep template-specific tweaks
here so the vendor stylesheet stays close to upstream.
======================================================*/

:root {
  --spc-magenta: #C42B8D;
  --spc-magenta-dark: #9E1F71;
  --spc-cyan: #00A3E0;
  --spc-plum: #2E1140;
}

/* --- Brand marks ------------------------------------------------------ */

/* The wordmark is 260x60, wider and shorter than the template logo. */
.navbar-brand img {
  width: auto;
  max-width: 230px;
  height: 46px;
  object-fit: contain;
}

/* The Academics mega menu -------------------------------------------- */

@media (min-width: 992px) {
  /* Three columns of links do not need the width of the page. Centred with
     a margin rather than a transform: the design opens the panel with one
     (rotateX), and a second would throw the first away. */
  .navbar .nav-item.mega-menu .dropdown-menu {
    width: 1040px;
    max-width: calc(100vw - 40px);
    left: 50%;
    margin-left: -520px;
  }

  /* The picture the home page's About Us section shows, in the styling it
     has there; the crest is already in the header above. Sized so its
     bottom finishes level with the last link in the columns beside it,
     which is what makes the panel sit square. */
  .menu-about-photo {
    display: inline-block;
    margin: 5px 0 15px;
    max-width: 100%;
  }

  .menu-about-photo img,
  .mega-menu .menu-about-photo img {
    width: 220px;
    height: 220px;
    max-width: 100%;
    border-radius: 50%;
    border: 2px dashed var(--theme-color2);
    padding: 8px;
  }

  /* The item you are on, drawn like the one under the pointer — and neither
     of them flush against the edge of the column, which is how the marker
     sat before. */
  .navbar .nav-item.mega-menu .dropdown-menu .dropdown-item:hover,
  .navbar .nav-item.mega-menu .dropdown-menu .dropdown-item.active {
    padding-left: 24px;
  }

  .navbar .nav-item.mega-menu .dropdown-menu .dropdown-item:hover::before,
  .navbar .nav-item.mega-menu .dropdown-menu .dropdown-item.active::before {
    left: 8px;
  }
}

/* Narrower screens: the panel is the width it can be, and the picture
   shrinks with its column. */
@media (min-width: 992px) and (max-width: 1199px) {
  .menu-about-photo img,
  .mega-menu .menu-about-photo img {
    width: 180px;
    height: 180px;
  }
}

.navbar .nav-item.mega-menu .dropdown-menu .dropdown-item.active,
.navbar .nav-item .dropdown-menu .dropdown-item.active {
  background: transparent;
  color: var(--theme-color2);
}

.navbar .nav-item .dropdown-menu .dropdown-item.active::before {
  opacity: 1;
  visibility: visible;
}

/* Footer brand: crest plus the school name, since there is no
   light-on-dark wordmark in the brand assets. */
.spc-footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 25px;
  text-decoration: none;
}

.spc-footer-brand img {
  width: 62px;
  height: auto;
  margin-bottom: 0;
  flex: 0 0 auto;
}

.spc-footer-brand span {
  font-family: var(--heading-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white);
}

.spc-footer-brand:hover span {
  color: var(--theme-color2);
}

/* --- Hero ------------------------------------------------------------- */

/* The template leaves no gap between the icon and the eyebrow text, which
   reads as an overlap once the line wraps on narrow screens. */
.hero-single .hero-content .hero-sub-title i {
  margin-right: 10px;
}

/* --- Staff cards ------------------------------------------------------ */

/*
 * The template ships team photos in two aspect ratios (570x700 and 570x570)
 * and constrains neither, so a row of cards ends up ragged. Staff will also
 * upload portraits of every shape. Pin the frame to a square and let the
 * photo crop into it. Row-level stretching is handled by the shared rule
 * in "Even card grids" below.
 */
.team-area .team-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
}

.team-area .team-img {
  flex: 0 0 auto;
}

.team-area .team-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
}

.team-area .team-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Keeps a one-line role and a two-line "role · department" the same height. */
.team-area .team-bio span {
  display: block;
  min-height: 2.6em;
  line-height: 1.3;
}

/* --- Even card grids -------------------------------------------------- */

/*
 * The template sizes every card to its own content, so one extra line of
 * text leaves a row ragged. Making the wrapping column a flex container
 * stretches each card to the tallest in its row; the card itself becomes a
 * flex column so its footer can be pinned to the bottom.
 *
 * Every card grid on the site is listed here. Some only go ragged at
 * particular breakpoints — department cards look level three-up and drift a
 * line apart two-up — so they are all covered rather than only the ones that
 * happened to show it on a wide screen.
 */
.row > [class*="col-"]:has(> .event-item),
.row > [class*="col-"]:has(> .feature-item),
.row > [class*="col-"]:has(> .choose-item),
.row > [class*="col-"]:has(> .contact-info),
.row > [class*="col-"]:has(> .department-item),
.row > [class*="col-"]:has(> .spc-info-card),
.row > [class*="col-"]:has(> .course-item),
.row > [class*="col-"]:has(> .gallery-item),
.row > [class*="col-"]:has(> .team-item) {
  display: flex;
}

.row > [class*="col-"] > .event-item,
.row > [class*="col-"] > .feature-item,
.row > [class*="col-"] > .choose-item,
.row > [class*="col-"] > .contact-info,
.row > [class*="col-"] > .department-item,
.row > [class*="col-"] > .spc-info-card,
.row > [class*="col-"] > .course-item,
.row > [class*="col-"] > .gallery-item,
.row > [class*="col-"] > .team-item {
  width: 100%;
}

/* Owl lays slides out inline, so they never share a height. */
.event-slider.owl-carousel .owl-stage {
  display: flex;
}

.event-slider.owl-carousel .owl-item {
  display: flex;
  height: auto;
}

.event-slider.owl-carousel .owl-item > div {
  display: flex;
  width: 100%;
}

/* Event cards: fixed photo frame, and the button pinned to the bottom so
   buttons line up regardless of how long the description runs. */
.event-item {
  display: flex;
  flex-direction: column;
}

.event-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.event-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.event-btn {
  margin-top: auto;
  padding-top: 20px;
}

.feature-item {
  display: flex;
  flex-direction: column;
}

/* Department cards: "Read More" pinned to the bottom so the links line up. */
.department-item {
  display: flex;
  flex-direction: column;
}

.department-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.department-btn {
  margin-top: auto;
}

/* Book cards: covers pinned to a common frame, availability at the bottom. */
.course-item {
  display: flex;
  flex-direction: column;
}

.course-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.course-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.course-bottom {
  margin-top: auto;
}

/* --- Book catalogue --------------------------------------------------- */

.spc-catalogue-filters {
  padding: 30px;
  border-radius: 20px;
  background: var(--theme-bg-light);
  /* A card's own white box is invisible against the page: what the eye reads
     as the edge of the listing is the cover inside it, 20px in. The search
     box sat flush with the cards' outer edges and so looked wider than the
     listing it belongs to. These 20px put it over the covers, and the 48px
     keep it off them — it sat directly on the first row. */
  margin: 0 20px 48px;
}

.spc-catalogue-filters .form-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--heading-font);
  font-weight: 500;
  color: var(--color-dark);
}

.spc-catalogue-filters .form-control {
  height: 52px;
  border-radius: 10px;
}

.spc-catalogue-filters select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236E7788'%3E%3Cpath d='M8 11 3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 42px;
}

.spc-catalogue-filters .theme-btn {
  height: 52px;
  justify-content: center;
}

.spc-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.spc-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.spc-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--theme-color);
  cursor: pointer;
}

.spc-clear-filters {
  font-weight: 500;
  color: var(--theme-color);
}

.spc-clear-filters:hover {
  color: var(--theme-color2);
}

.spc-availability {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.spc-availability.is-in {
  color: #1E8E5A;
}

.spc-availability.is-out {
  color: #C4562B;
}

/* Bootstrap pagination, recoloured to the brand. */
/* Lined up with the covers, like the search box above them. */
.spc-pagination {
  margin: 0 20px;
}

.spc-pagination .pagination {
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.spc-pagination .page-link {
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  color: var(--color-dark);
  background: var(--theme-bg-light);
  box-shadow: none;
}

.spc-pagination .page-link:hover {
  color: var(--color-white);
  background: var(--theme-color2);
}

.spc-pagination .page-item.active .page-link {
  color: var(--color-white);
  background: var(--theme-color);
}

.spc-pagination .page-item.disabled .page-link {
  opacity: 0.45;
}

/* --- Gallery tiles ---------------------------------------------------- */

/*
 * The bundled photographs range from 2.4:1 panoramas to 0.8:1 portraits, and
 * uploads will be worse. Pin every tile to the same landscape frame.
 */
.gallery-item .gallery-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Tiles sit in a gutter grid now, so the template's own spacing would double
   up; and the hover overlay is scoped to the photograph, not the caption. */
.gallery-area .gallery-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
}

.gallery-area .gallery-img {
  position: relative;
  overflow: hidden;
  border-radius: 50px 50px 50px 0;
}

.spc-gallery-caption {
  padding: 16px 4px 0;
  font-size: 15px;
  line-height: 1.5;
}

.spc-gallery-caption .caption {
  display: block;
  font-family: var(--heading-font);
  font-weight: 500;
  color: var(--color-dark);
}

.spc-gallery-caption .meta {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--body-text-color);
}

.spc-gallery-caption .meta a {
  color: var(--theme-color);
  font-weight: 500;
}

.spc-gallery-caption .meta a:hover {
  color: var(--theme-color2);
}

/* --- Album filter ----------------------------------------------------- */

.spc-album-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.spc-album-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 30px;
  background: var(--theme-bg-light);
  color: var(--color-dark);
  font-family: var(--heading-font);
  font-weight: 500;
  transition: var(--transition2);
}

.spc-album-chip .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 20px;
  background: var(--color-white);
  font-size: 12px;
  color: var(--body-text-color);
}

.spc-album-chip:hover {
  background: var(--theme-color2);
  color: var(--color-white);
}

.spc-album-chip.is-active {
  background: var(--theme-color);
  color: var(--color-white);
}

.spc-album-chip.is-active .count,
.spc-album-chip:hover .count {
  background: rgba(255, 255, 255, 0.25);
  color: var(--color-white);
}

.spc-album-intro h3 {
  margin-bottom: 8px;
}

.spc-album-intro .spc-album-date {
  margin-bottom: 8px;
  font-size: 14px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--theme-color);
}

.spc-album-intro p:last-child {
  margin-bottom: 0;
}

/* --- Motto ribbon ----------------------------------------------------- */

.spc-motto {
  display: inline-block;
  padding: 6px 22px;
  border-radius: 30px;
  background: var(--theme-color-light);
  color: var(--theme-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-style: italic;
  letter-spacing: .4px;
}

/* --- Scripture list --------------------------------------------------- */

.spc-verse-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.spc-verse-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 14px;
  line-height: 1.8;
}

.spc-verse-list li::before {
  content: "\f02d"; /* book */
  font-family: 'Font Awesome 6 Pro';
  font-weight: 300;
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--theme-color2);
}

.spc-verse-list .ref {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-color);
}

.spc-ref {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-color);
}

/* --- Checklist -------------------------------------------------------- */

.spc-check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.spc-check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  line-height: 1.7;
}

.spc-check-list li::before {
  content: "\f00c";
  font-family: 'Font Awesome 6 Pro';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 13px;
  color: var(--theme-color);
}

/* --- Note / callout panel -------------------------------------------- */

.spc-note {
  border-left: 4px solid var(--theme-color2);
  background: var(--theme-bg-light);
  border-radius: 0 10px 10px 0;
  padding: 26px 30px;
}

.spc-note h4 {
  color: var(--theme-color);
  margin-bottom: 10px;
}

.spc-note p:last-child {
  margin-bottom: 0;
}

/* --- Prose blocks ----------------------------------------------------- */

.spc-prose p {
  margin-bottom: 18px;
  line-height: 1.9;
}

.spc-prose p:last-child {
  margin-bottom: 0;
}

/* --- Simple info cards ------------------------------------------------ */

.spc-info-card {
  height: 100%;
  padding: 34px 30px;
  border-radius: 12px;
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  transition: var(--transition2);
}

.spc-info-card:hover {
  transform: translateY(-6px);
}

.spc-info-card .icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 20px;
  background: var(--theme-color-light);
  color: var(--theme-color);
  font-size: 24px;
}

.spc-info-card h4 {
  margin-bottom: 12px;
}

.spc-info-card p:last-child {
  margin-bottom: 0;
}

/* --- Results table ---------------------------------------------------- */

.spc-result-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 10px;
  overflow: hidden;
}

.spc-result-table th,
.spc-result-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border-info-color2);
}

.spc-result-table thead th {
  background: var(--theme-color);
  color: var(--color-white);
  font-family: var(--heading-font);
  font-weight: 500;
  border-bottom: none;
}

.spc-result-table tbody tr:last-child td {
  border-bottom: none;
}

/* --- Forms ------------------------------------------------------------ */

.spc-form-error {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #D63333;
}

.form-control.is-invalid {
  border-color: #D63333;
}

/* --- Map -------------------------------------------------------------- */

.contact-map iframe {
  width: 100%;
  height: 450px;
  display: block;
  border: 0;
}

/* --- The film at the foot of a page ----------------------------------- */

/* The template's own video band, with nothing behind the play button but the
   school's still: without a height it collapses to the button. */
.video-area .video-content {
  min-height: 420px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
}

.modal-body video {
  display: block;
  border-radius: 6px;
}

/* --- The testimonial slider's arrows ---------------------------------- */

/* The template gives this slider dots and no arrows; the school asked for
   the arrows too. They are the event slider's own — same size, same colour,
   same behaviour on hover — so the site keeps one idea of what an arrow on a
   slider looks like. */
/* The event slider reveals its arrows on hover; these stay, because this band
   is the one people are told to look at and an arrow nobody can see is an
   arrow nobody uses. */
.testimonial-slider .owl-nav {
  width: 100%;
  margin: 0;
}

.testimonial-slider .owl-nav button {
  position: absolute;
  top: 50%;
  margin: -24px 0 0;
  padding: 0;
  height: 48px;
  width: 48px;
  line-height: 45px !important;
  border: none;
  border-radius: 100%;
  font-size: 25px !important;
  background: var(--theme-color2) !important;
  color: var(--color-white) !important;
  transition: var(--transition);
}

.testimonial-slider .owl-nav button:hover {
  background: var(--theme-color) !important;
}

.testimonial-slider .owl-nav .owl-prev { left: -70px; }
.testimonial-slider .owl-nav .owl-prev:hover { left: -60px; }
.testimonial-slider .owl-nav .owl-next { right: -70px; }
.testimonial-slider .owl-nav .owl-next:hover { right: -60px; }

/* Narrow screens have no room outside the slider, so the arrows sit on it. */
@media (max-width: 1400px) {
  .testimonial-slider .owl-nav .owl-prev { left: -10px; }
  .testimonial-slider .owl-nav .owl-prev:hover { left: 0; }
  .testimonial-slider .owl-nav .owl-next { right: -10px; }
  .testimonial-slider .owl-nav .owl-next:hover { right: 0; }
}

/* --- The questions on Admission Requirements -------------------------- */

/* They sit in the wrapper the design keeps for a picture beside a form. The
   row's own gutter puts 24px on the left of that half and nothing on the
   right, which reads as lopsided against the picture; without it the column
   edges meet the picture and the box, and the panel's own padding is what
   anybody sees. */
.spc-faq-band .row {
  --bs-gutter-x: 0;
}

.spc-faq-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 40px 35px;
}

/* Questions that overflow scroll inside rather than pushing the box taller
   and taller. The cap is about the height of the picture beside them, so a
   school with three questions and a school with thirty get a band of the
   same size. */
.spc-faq-panel .accordion {
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
}

@media (min-width: 992px) {
  .spc-faq-panel .accordion {
    max-height: 376px;
  }
}

.spc-faq-panel .accordion::-webkit-scrollbar {
  width: 6px;
}

.spc-faq-panel .accordion::-webkit-scrollbar-thumb {
  background: var(--theme-color2);
  border-radius: 6px;
}

.spc-faq-panel .accordion::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 991px) {
  /* Stacked under the picture, the panel has no height to fill. */
  .spc-faq-panel {
    padding: 30px 25px;
  }

  .spc-faq-panel .accordion {
    overflow-y: visible;
  }
}

/* --- What a teacher brings -------------------------------------------- */

/* Under the name and the role on the staff page: what they hold, how long
   they have taught, and a sentence for parents. The template's card was
   drawn for a name alone, so this is the school's own. */
.spc-teacher-facts {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.spc-teacher-facts li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-dark);
  text-transform: none;
  letter-spacing: normal;
}

.spc-teacher-facts li i {
  margin-top: 3px;
  font-size: 13px;
  color: var(--theme-color2);
}

.spc-teacher-profile {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  /* Four lines, so a card stays a card however much somebody writes. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- A slider with nothing to slide to -------------------------------- */

/* Every slider on this site loops, so owl only marks an arrow `disabled`
   when it has given up looping: there are no more cards than it already
   shows. The design still draws both arrows and a lone dot, and a visitor
   clicking them gets nothing back. A control that cannot do anything is
   better not drawn. */
.owl-carousel .owl-nav button.disabled {
  display: none !important;
}

.owl-carousel .owl-dots .owl-dot:only-child {
  display: none;
}

/* --- The events slider's arrows --------------------------------------- */

/* The design hid them until the pointer was over the slider and then put
   them 75px outside it, in the gutter. Moving towards one took the pointer
   off the slider, which hid it again — there was no way to reach either
   arrow, and below about 1300px they were off the side of the screen
   altogether. They stay visible now, and on anything narrower than a wide
   desktop they sit at the slider's own edges, as the testimonial band's
   arrows already do. */
.event-slider .owl-nav {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1400px) {
  .event-slider .owl-nav .owl-prev { left: -10px; }
  .event-slider .owl-nav .owl-prev:hover { left: 0; }
  .event-slider .owl-nav .owl-next { right: -10px; }
  .event-slider .owl-nav .owl-next:hover { right: 0; }
}