/* =========================================================
   BRINGTON MOODLE SECTION - v3.1 FIXED
   Clone original hero + Core Programs, header/footer removed.
   All classes are skl-* and scoped under .skl-brington-home.
   Upload over: assets/moodle-ui/brington-skyline-moodle-ui-kit.v1.1.css
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

.skl-brington-home {
  --skl-navy:#172A4E;
  --skl-navy-deep:#0F1D38;
  --skl-gold:#CE9412;
  --skl-gold-lt:#E3AE44;
  --skl-ink:#1F2A44;
  --skl-muted:#5C6678;
  --skl-line:#E8E4DB;
  --skl-p-k12:#C9891A;
  --skl-p-esl:#2F9E8B;
  --skl-p-ielts:#7B5AC6;
  --skl-p-sat:#2E7FCB;
  --skl-p-chin:#D24B3B;
  --skl-p-ai:#12A08A;
  --skl-p-kor:#7E56C4;
  --skl-p-vie:#33A05C;
  --skl-p-fra:#2E58A6;
  --skl-p-spa:#D9542E;
  width:100%;
  margin:0 auto;
  background:#fff;
  color:var(--skl-ink);
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

.skl-brington-home *,
.skl-brington-home *::before,
.skl-brington-home *::after { box-sizing:border-box; }
.skl-brington-home * { margin:0; padding:0; }
.skl-brington-home img { max-width:100%; height:auto; display:block; }
.skl-brington-home a { text-decoration:none; }
.skl-brington-home .skl-wrap { max-width:1280px; margin:0 auto; padding:0 34px; }
.skl-brington-home .skl-serif { font-family:'Playfair Display',Georgia,'Times New Roman',serif; }

/* ===== HERO ===== */
.skl-brington-home .skl-hero {
  position:relative;
  overflow:hidden;
  background:linear-gradient(118deg,#E6EEFB 0%,#EEF4FC 52%,#F6F9FD 100%);
}

/* replaces the problematic inline SVG map/icon with safe CSS dots */
.skl-brington-home .skl-hero-map {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.18;
  background-image:radial-gradient(circle, rgba(42,92,158,.35) 0 5px, transparent 6px);
  background-size:52px 52px;
  background-position:110px 18px;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 36%,transparent 58%);
  mask-image:linear-gradient(to right,#000 0%,#000 36%,transparent 58%);
}

.skl-brington-home .skl-hero-photo {
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:56%;
  z-index:2;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 27%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 27%,#000 100%);
}
.skl-brington-home .skl-hero-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:52% 46%;
}
.skl-brington-home .skl-hero-in {
  position:relative;
  z-index:3;
  padding:38px 0 54px;
  min-height:378px;
  display:flex;
  align-items:center;
}
.skl-brington-home .skl-hero-copy { max-width:560px; }
.skl-brington-home .skl-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--skl-gold);
}
.skl-brington-home .skl-eyebrow-mark {
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--skl-gold);
  font-size:17px;
  line-height:1;
  flex:0 0 20px;
}
.skl-brington-home .skl-hero-h {
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:800;
  font-size:clamp(36px,4vw,47px);
  line-height:1.08;
  letter-spacing:-.5px;
  color:var(--skl-navy);
  margin:16px 0 0;
}
.skl-brington-home .skl-hero-h .skl-g { color:var(--skl-gold); }
.skl-brington-home .skl-hero-rule {
  width:70px;
  height:4px;
  background:var(--skl-gold);
  border-radius:4px;
  margin:24px 0 22px;
}
.skl-brington-home .skl-lede {
  font-size:18px;
  color:#3E4A60;
  max-width:470px;
  line-height:1.6;
}
.skl-brington-home .skl-partner {
  margin-top:28px;
  display:inline-flex;
  align-items:stretch;
  background:#fff;
  border:1px solid #E7EBF2;
  border-radius:14px;
  box-shadow:0 8px 26px rgba(23,42,78,.08);
  overflow:hidden;
}
.skl-brington-home .skl-partner .skl-col {
  display:flex;
  align-items:center;
  gap:11px;
  padding:15px 22px;
}
.skl-brington-home .skl-partner img { height:36px; width:auto; }
.skl-brington-home .skl-partner .skl-skyline-logo { height:36px; max-width:176px; object-fit:contain; }
.skl-brington-home .skl-lbl {
  font-size:11px;
  color:var(--skl-muted);
  line-height:1.35;
}
.skl-brington-home .skl-lbl b {
  display:block;
  font-size:15px;
  color:var(--skl-navy);
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:700;
}
.skl-brington-home .skl-divider { width:1px; background:#E7EBF2; }
.skl-brington-home .skl-record {
  margin-top:18px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13.5px;
  color:var(--skl-muted);
  max-width:430px;
}
.skl-brington-home .skl-shield-mark {
  width:19px;
  height:19px;
  flex:0 0 19px;
  margin-top:1px;
  display:inline-block;
  background:var(--skl-navy);
  clip-path:polygon(50% 0%, 90% 14%, 90% 52%, 50% 100%, 10% 52%, 10% 14%);
}
.skl-brington-home .skl-record b { color:var(--skl-ink); font-weight:600; }
.skl-brington-home .skl-hero-swoosh {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:88px;
  z-index:5;
}

/* ===== CORE PROGRAMS ===== */
.skl-brington-home .skl-programs { padding:22px 0 60px; background:#fff; }
.skl-brington-home .skl-sec-head { text-align:center; margin:8px 0 0; }
.skl-brington-home .skl-sec-head h2 {
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:700;
  font-size:clamp(32px,3.6vw,44px);
  color:var(--skl-navy);
}
.skl-brington-home .skl-u {
  width:60px;
  height:4px;
  background:var(--skl-gold);
  border-radius:4px;
  margin:12px auto 0;
}
.skl-brington-home .skl-sec-head p { margin-top:16px; color:var(--skl-muted); font-size:16.5px; }
.skl-brington-home .skl-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
  margin-top:40px;
}
.skl-brington-home .skl-pcard {
  background:#fff;
  border:1px solid #ECE9E1;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .16s ease,box-shadow .16s ease;
}
.skl-brington-home .skl-pcard:hover { transform:translateY(-5px); box-shadow:0 18px 38px rgba(23,42,78,.13); }
.skl-brington-home .skl-ptile { width:100%; background:#F3F6FA; line-height:0; }
.skl-brington-home .skl-ptile img { width:100%; height:auto; display:block; }
.skl-brington-home .skl-pbody { padding:15px 16px 18px; display:flex; flex-direction:column; flex:1; }
.skl-brington-home .skl-badge {
  align-self:flex-start;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:#fff;
  background:var(--skl-ac);
  padding:3px 10px;
  border-radius:20px;
  margin-bottom:9px;
}
.skl-brington-home .skl-pcard h3 {
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:700;
  font-size:16.5px;
  color:var(--skl-navy);
  line-height:1.22;
}
.skl-brington-home .skl-pcard p { margin-top:8px; color:var(--skl-muted); font-size:13px; line-height:1.5; flex:1; }
.skl-brington-home .skl-plink {
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:13px;
  color:var(--skl-ac);
  text-decoration:none;
}
.skl-brington-home .skl-arrow { transition:transform .15s ease; }
.skl-brington-home .skl-pcard:hover .skl-arrow { transform:translateX(4px); }

@media(max-width:1080px){
  .skl-brington-home .skl-grid { grid-template-columns:repeat(4,1fr); }
  .skl-brington-home .skl-hero-in { min-height:0; padding:30px 0 44px; display:block; }
  .skl-brington-home .skl-hero-copy { max-width:none; }
  .skl-brington-home .skl-hero-photo {
    position:relative;
    width:100%;
    height:auto;
    margin-top:22px;
    z-index:3;
    -webkit-mask-image:none;
    mask-image:none;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(23,42,78,.15);
  }
  .skl-brington-home .skl-hero-photo img { height:auto; aspect-ratio:1.95/1; }
  .skl-brington-home .skl-hero-map { display:none; }
}
@media(max-width:680px){
  .skl-brington-home .skl-wrap { padding:0 20px; }
  .skl-brington-home .skl-grid { grid-template-columns:repeat(2,1fr); }
  .skl-brington-home .skl-partner { display:flex; flex-direction:column; }
  .skl-brington-home .skl-divider { width:100%; height:1px; }
}
@media(max-width:440px){ .skl-brington-home .skl-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce){ .skl-brington-home * { transition:none!important; } }
.skl-brington-home a:focus-visible { outline:3px solid var(--skl-gold); outline-offset:2px; }

/* ===== v3.2 Moodle drawer z-index fix - keep full-width banner ===== */
/* Keep the banner full-width. Do not add side padding or reduce width. */
.skl-brington-home {
  position: relative;
  z-index: 0;
  isolation: auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

/* Keep hero visually full bleed, but prevent it from sitting above Moodle drawer buttons. */
.skl-brington-home .skl-hero {
  position: relative;
  z-index: 0;
}

/* Original hero internal layers were higher than Moodle's right drawer tab in some themes.
   Lowering them keeps the drawer button visually on top without changing layout width. */
.skl-brington-home .skl-hero-map {
  z-index: 0 !important;
}

.skl-brington-home .skl-hero-photo {
  z-index: 1 !important;
}

.skl-brington-home .skl-hero-in {
  z-index: 2 !important;
}

.skl-brington-home .skl-hero-swoosh {
  z-index: 2 !important;
  pointer-events: none;
}

/* Common Moodle/Boost drawer toggles should remain above the banner. */
.drawer-toggler,
.drawer-toggler .btn,
[data-region="drawer-toggle"],
[data-region="right-hand-drawer"],
.drawer-right-toggle,
.drawer-left-toggle {
  z-index: 1050 !important;
}

/* ===== Skyline partner text image support ===== */
.skl-brington-home .skl-partner .skl-skyline-text {
  height:32px;
  width:auto;
  max-width:180px;
  object-fit:contain;
  display:block;
}

/* =========================================================
   FRONT PAGE GAP CLEANUP ONLY
   No Moodle header styling.
   Purpose: remove the small white/padding gap between Moodle nav/header and the Brington banner.
   ========================================================= */

#page-site-index #page-header {
  display: none !important;
}

#page-site-index #topofscroll.main-inner,
#page-site-index #page-content,
#page-site-index #region-main-box,
#page-site-index #region-main,
#page-site-index .course-content,
#page-site-index #courseformat-frontpage-main-topic,
#page-site-index .sitetopic,
#page-site-index .sitetopic .section-list,
#page-site-index .sitetopic .course-section,
#page-site-index .sitetopic .section-item,
#page-site-index .sitetopic .content,
#page-site-index .sitetopic [data-for="sectioninfo"],
#page-site-index .sitetopic .summarytext,
#page-site-index .sitetopic .no-overflow {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#page-site-index #topofscroll.main-inner,
#page-site-index #region-main,
#page-site-index .sitetopic .section-item {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#page-site-index .sitetopic .no-overflow {
  overflow: visible !important;
}

/* Keep the edit gear available, but do not let its row create height above the banner. */
#page-site-index #courseformat-frontpage-main-topic > .mb-2 {
  position: absolute !important;
  z-index: 60 !important;
  top: 10px !important;
  left: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* The drawer toggle row can also reserve vertical space; overlay it instead. */
#page-site-index .drawer-toggles {
  position: absolute !important;
  top: 8px !important;
  right: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1058 !important;
  pointer-events: none !important;
}

#page-site-index .drawer-toggles .drawer-toggler,
#page-site-index .drawer-toggles .drawer-toggler .btn {
  pointer-events: auto !important;
}

/* =========================================================
   MOODLE MY COURSES CARD PATCH v1.0
   Scope: frontpage course list only
   No header changes.
   ========================================================= */

#page-site-index #frontpage-course-list {
  --mc-navy:#172A4E;
  --mc-navy-deep:#0F1D38;
  --mc-blue:#155BC0;
  --mc-gold:#CE9412;
  --mc-gold-soft:#FFF3CF;
  --mc-muted:#5C6678;
  --mc-line:#E7EBF2;
  max-width:1280px;
  margin:44px auto 74px !important;
  padding:0 34px;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

/* Title */
#page-site-index #frontpage-course-list > h2 {
  margin:0 0 26px !important;
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-size:clamp(32px,3vw,44px);
  line-height:1.08;
  font-weight:800;
  color:var(--mc-navy);
  letter-spacing:-.4px;
  position:relative;
}

#page-site-index #frontpage-course-list > h2::after {
  content:"";
  display:block;
  width:68px;
  height:4px;
  margin-top:13px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--mc-gold),#F6D37B,var(--mc-gold));
}

/* Replace Moodle row behavior with a cleaner responsive grid */
#page-site-index #frontpage-course-list .courses.frontpage-course-list-enrolled {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px 28px !important;
  margin:0 !important;
  padding:0 !important;
}

#page-site-index #frontpage-course-list .courses.frontpage-course-list-enrolled::before,
#page-site-index #frontpage-course-list .courses.frontpage-course-list-enrolled::after {
  content:none !important;
  display:none !important;
}

/* Reset Bootstrap column/card sizing on direct card children */
#page-site-index #frontpage-course-list .courses.frontpage-course-list-enrolled > .dashboard-card {
  width:auto !important;
  max-width:none !important;
  flex:none !important;
  padding:0 !important;
  margin:0 !important;
}

/* Course card */
#page-site-index #frontpage-course-list .dashboard-card {
  border:1px solid rgba(23,42,78,.09) !important;
  border-radius:18px !important;
  background:#fff !important;
  overflow:hidden !important;
  box-shadow:0 14px 36px rgba(15,29,56,.08) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height:284px;
  display:flex !important;
  flex-direction:column !important;
  position:relative;
}

#page-site-index #frontpage-course-list .dashboard-card:hover {
  transform:translateY(-5px);
  box-shadow:0 22px 52px rgba(15,29,56,.15) !important;
  border-color:rgba(206,148,18,.30) !important;
}

/* Image area */
#page-site-index #frontpage-course-list .dashboard-card .dashboard-card-img {
  height:156px !important;
  border-radius:0 !important;
  background-size:cover !important;
  background-position:center !important;
  position:relative;
  overflow:hidden;
}

#page-site-index #frontpage-course-list .dashboard-card .dashboard-card-img::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(15,29,56,.06),rgba(15,29,56,.16)),
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.32),transparent 30%);
  pointer-events:none;
}

#page-site-index #frontpage-course-list .dashboard-card .dashboard-card-img::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  background:linear-gradient(90deg,var(--mc-gold),#F6D37B,var(--mc-blue));
  opacity:.92;
}

/* Course category badge */
#page-site-index #frontpage-course-list .dashboard-card .course-category {
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  z-index:2;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:27px;
  padding:5px 10px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#0E3475,#155BC0) !important;
  color:#fff !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:.02em;
  box-shadow:0 8px 18px rgba(14,52,117,.26);
  border:1px solid rgba(255,255,255,.22);
}

/* Body */
#page-site-index #frontpage-course-list .dashboard-card .course-info-container {
  padding:18px 18px 8px !important;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}

#page-site-index #frontpage-course-list .dashboard-card .coursename {
  display:inline-block;
  margin:0 !important;
  color:var(--mc-navy) !important;
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-size:20px;
  line-height:1.22;
  font-weight:750;
  text-decoration:none !important;
}

#page-site-index #frontpage-course-list .dashboard-card .coursename:hover {
  color:var(--mc-gold) !important;
}

#page-site-index #frontpage-course-list .dashboard-card .course-summary {
  margin-top:10px !important;
  color:#39475F;
  font-size:14px;
  line-height:1.55;
}

#page-site-index #frontpage-course-list .dashboard-card .course-summary p {
  margin:0 !important;
}

#page-site-index #frontpage-course-list .dashboard-card .course-summary .no-overflow {
  max-height:68px;
  overflow:hidden !important;
}

/* Footer / progress */
#page-site-index #frontpage-course-list .dashboard-card .dashboard-card-footer {
  padding:10px 18px 17px !important;
  background:#fff !important;
}

#page-site-index #frontpage-course-list .dashboard-card .progress {
  height:9px !important;
  border-radius:999px !important;
  background:#E9EEF5 !important;
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(15,29,56,.08);
}

#page-site-index #frontpage-course-list .dashboard-card .progress-bar {
  border-radius:999px !important;
  background:linear-gradient(90deg,#155BC0,#2E7FCB,#CE9412) !important;
}

#page-site-index #frontpage-course-list .dashboard-card .dashboard-card-footer p {
  margin-top:7px !important;
  color:var(--mc-muted);
  font-size:13px;
  font-weight:650;
}

/* Add a subtle arrow affordance on hover */
#page-site-index #frontpage-course-list .dashboard-card::after {
  content:"Open →";
  position:absolute;
  right:16px;
  bottom:16px;
  color:var(--mc-gold);
  font-size:12px;
  font-weight:800;
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

#page-site-index #frontpage-course-list .dashboard-card:hover::after {
  opacity:1;
  transform:translateX(0);
}

/* Keep arrow away from progress cards */
#page-site-index #frontpage-course-list .dashboard-card:has(.dashboard-card-footer)::after {
  bottom:38px;
}

/* All courses button */
#page-site-index #frontpage-course-list .paging.paging-morelink {
  display:flex !important;
  justify-content:center;
  margin:34px 0 0 !important;
  padding:0 !important;
}

#page-site-index #frontpage-course-list .paging.paging-morelink .btn,
#page-site-index #frontpage-course-list .paging.paging-morelink a {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 22px !important;
  border-radius:999px !important;
  border:1px solid rgba(206,148,18,.34) !important;
  background:linear-gradient(135deg,var(--mc-navy),#155BC0) !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:0 12px 26px rgba(15,29,56,.18) !important;
  text-decoration:none !important;
}

#page-site-index #frontpage-course-list .paging.paging-morelink .btn:hover,
#page-site-index #frontpage-course-list .paging.paging-morelink a:hover {
  background:linear-gradient(135deg,#155BC0,var(--mc-gold)) !important;
  transform:translateY(-1px);
}

/* Responsive */
@media(max-width:1180px) {
  #page-site-index #frontpage-course-list .courses.frontpage-course-list-enrolled {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:720px) {
  #page-site-index #frontpage-course-list {
    margin-top:34px !important;
    padding:0 20px;
  }

  #page-site-index #frontpage-course-list .courses.frontpage-course-list-enrolled {
    grid-template-columns:1fr;
    gap:20px !important;
  }

  #page-site-index #frontpage-course-list .dashboard-card .dashboard-card-img {
    height:142px !important;
  }
}

/* Browser fallback if :has() is not supported */
@supports not selector(:has(*)) {
  #page-site-index #frontpage-course-list .dashboard-card::after {
    display:none;
  }
}

/* =========================================================
   MOODLE MY COURSES CARD PATCH v1.1
   Fix oversized "All courses" button.
   Append AFTER My Courses Card Patch v1.0.
   ========================================================= */

#page-site-index #frontpage-course-list .paging.paging-morelink {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
}

/* Force the button to stay normal size, not stretch like a card/grid item. */
#page-site-index #frontpage-course-list .paging.paging-morelink a,
#page-site-index #frontpage-course-list .paging.paging-morelink .btn,
#page-site-index #frontpage-course-list .paging-morelink a,
#page-site-index #frontpage-course-list .paging-morelink .btn {
  width: auto !important;
  min-width: 132px !important;
  max-width: max-content !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg,#172A4E,#155BC0) !important;
  color: #fff !important;
  border: 1px solid rgba(206,148,18,.34) !important;
  box-shadow: 0 10px 22px rgba(15,29,56,.16) !important;
}

/* In case Moodle places the paging item inside the same row/grid as course cards. */
#page-site-index #frontpage-course-list .courses.frontpage-course-list-enrolled > .paging,
#page-site-index #frontpage-course-list .courses.frontpage-course-list-enrolled > .paging-morelink {
  align-self: center !important;
  justify-self: center !important;
}
/* =========================================================
   HOTFIX v1.2 - Brington/Skyline Moodle Hero Top Clipping
   Append at the END of current CSS file
   ========================================================= */

#page-site-index .skl-brington-home {
  --skl-safe-top: 72px;
  overflow: hidden !important;
}

/* Give hero content safe space so Moodle sticky/header area does not cut it */
#page-site-index .skl-brington-home .skl-hero {
  position: relative !important;
  min-height: 470px !important;
  overflow: hidden !important;
}

/* Push hero text down safely */
#page-site-index .skl-brington-home .skl-hero-in {
  min-height: 470px !important;
  padding-top: calc(38px + var(--skl-safe-top)) !important;
  padding-bottom: 92px !important;
  align-items: center !important;
}

/* Stabilize right image crop */
#page-site-index .skl-brington-home .skl-hero-photo {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  width: 56% !important;
}

#page-site-index .skl-brington-home .skl-hero-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 54% 50% !important;
}

/* Keep swoosh attached to bottom, not floating over programs */
#page-site-index .skl-brington-home .skl-hero-swoosh {
  bottom: -1px !important;
  height: 92px !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* Give Core Programs better breathing space after swoosh */
#page-site-index .skl-brington-home .skl-programs {
  padding-top: 44px !important;
}

/* Minor HTML compatibility: your HTML uses strong, current CSS styles b */
#page-site-index .skl-brington-home .skl-lbl strong {
  display: block;
  font-size: 15px;
  color: var(--skl-navy);
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

#page-site-index .skl-brington-home .skl-record strong {
  color: var(--skl-ink);
  font-weight: 700;
}

/* Restore shield icon without needing to edit HTML */
#page-site-index .skl-brington-home .skl-record::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  background: var(--skl-navy);
  clip-path: polygon(50% 0%, 90% 14%, 90% 52%, 50% 100%, 10% 52%, 10% 14%);
}

/* Tablet/mobile: avoid giant empty top space */
@media (max-width: 1080px) {
  #page-site-index .skl-brington-home {
    --skl-safe-top: 24px;
  }

  #page-site-index .skl-brington-home .skl-hero {
    min-height: 0 !important;
  }

  #page-site-index .skl-brington-home .skl-hero-in {
    min-height: 0 !important;
    padding-top: 42px !important;
    padding-bottom: 36px !important;
    display: block !important;
  }

  #page-site-index .skl-brington-home .skl-hero-photo {
    position: relative !important;
    width: calc(100% - 40px) !important;
    height: auto !important;
    margin: 20px auto 54px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  #page-site-index .skl-brington-home .skl-hero-photo img {
    height: auto !important;
    aspect-ratio: 1.95 / 1 !important;
  }

  #page-site-index .skl-brington-home .skl-hero-swoosh {
    height: 66px !important;
  }

  #page-site-index .skl-brington-home .skl-programs {
    padding-top: 30px !important;
  }
}
#page-site-index .skl-brington-home .skl-hero-swoosh {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 88px !important;
  display: block !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
/* =========================================================
   HOTFIX v1.4 - Moodle-safe full-width hero swoosh
   Use CSS background instead of inline SVG because Moodle strips SVG attrs
   ========================================================= */

#page-site-index .skl-brington-home .skl-hero-swoosh {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: -1px !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: 88px !important;
  display: block !important;
  z-index: 6 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center bottom !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 88' preserveAspectRatio='none'%3E%3Cpath d='M0 44 C 360 90 760 90 1080 58 C 1250 40 1360 28 1440 22 L1440 88 L0 88 Z' fill='%23CE9412'/%3E%3Cpath d='M0 56 C 360 98 760 98 1080 68 C 1250 50 1360 40 1440 34 L1440 88 L0 88 Z' fill='%23172A4E'/%3E%3Cpath d='M0 68 C 360 106 760 106 1080 80 C 1250 64 1360 56 1440 50 L1440 88 L0 88 Z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
}

/* If old svg paths are still cached somewhere, hide them */
#page-site-index .skl-brington-home .skl-hero-swoosh path {
  display: none !important;
}