/* Covenant University Online — public-site skin inspired by the Unipix university template
   (home variant 1). Loaded AFTER cu-edudash.css.
   Colors come ONLY from the theme variables (--navy, --gold = the brand accent, --ed-* for
   light/dark surfaces), so CU's navy and blue stay in charge; nothing here hard-codes a brand color.
   Scoped to the public site (header/footer skip the portals; the collage hero only exists when a
   hero has collage photos).
   ROLLBACK: delete the <link> to this file in index.html. */

:root{
  /* A readable text-weight version of the brand accent, derived from it so it follows the theme. */
  --ux-accent-ink:color-mix(in srgb,var(--gold) 78%,#000);
  /* Big public headings follow the Heading font chosen in Design & Theme (Roboto by default). */
  --ux-display:var(--font-heading,'Roboto',Georgia,'Times New Roman',serif);
}

/* ---------- Header (public pages) ---------- */
/* No border on the header itself: a border would make header height differ from .topbar height, and the
   --bar-h observer (header height -> .topbar min-height) would then grow the header forever. An inset
   shadow draws the same line without taking space. */
body:not(:has(.portal)):not(:has(.player-shell)) header.top{box-shadow:inset 0 -1px 0 rgba(255,255,255,.1)}
body:not(:has(.portal)):not(:has(.player-shell)) .topbar{padding-top:16px;padding-bottom:16px;min-height:56px}
body:not(:has(.portal)):not(:has(.player-shell)) .logo b{font-family:var(--ux-display);font-size:17px;letter-spacing:.01em}
@media(min-width:941px){
  body:not(:has(.portal)):not(:has(.player-shell)) nav.main a{
    position:relative;background:none;border-radius:0;
    text-transform:uppercase;letter-spacing:.075em;font-size:11.5px;font-weight:700;padding:9px 12px;
  }
  body:not(:has(.portal)):not(:has(.player-shell)) nav.main a::after{
    content:'';position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--gold);
    transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.2,1);
  }
  body:not(:has(.portal)):not(:has(.player-shell)) nav.main a:hover,
  body:not(:has(.portal)):not(:has(.player-shell)) nav.main a.active,
  body:not(:has(.portal)):not(:has(.player-shell)) nav.main a[aria-current="page"]{background:none;color:#fff}
  body:not(:has(.portal)):not(:has(.player-shell)) nav.main a:hover::after,
  body:not(:has(.portal)):not(:has(.player-shell)) nav.main a.active::after,
  body:not(:has(.portal)):not(:has(.player-shell)) nav.main a[aria-current="page"]::after{transform:scaleX(1)}
  /* dropdown items keep normal sentence case and no underline bar */
  body:not(:has(.portal)):not(:has(.player-shell)) nav.main .navdrop-menu a{text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600;padding:9px 12px;border-radius:6px}
  body:not(:has(.portal)):not(:has(.player-shell)) nav.main .navdrop-menu a::after{display:none}
  body:not(:has(.portal)):not(:has(.player-shell)) nav.main .navdrop-menu a:hover{background:rgba(255,255,255,.12)}
  /* account / login links keep the plain look: no underline bar */
  body:not(:has(.portal)):not(:has(.player-shell)) nav.main .nav-acct a::after{display:none}
}

/* ---------- Footer (public pages) ---------- */
body:not(:has(.portal)):not(:has(.player-shell)) footer.site{margin-top:72px;border-top:3px solid var(--gold)}
body:not(:has(.portal)):not(:has(.player-shell)) .footin{padding:60px 20px 44px;gap:44px;grid-template-columns:1.7fr 1fr 1fr 1fr}
@media(max-width:760px){body:not(:has(.portal)):not(:has(.player-shell)) .footin{grid-template-columns:1fr 1fr;gap:32px 24px}}
@media(max-width:480px){body:not(:has(.portal)):not(:has(.player-shell)) .footin{grid-template-columns:1fr}}
body:not(:has(.portal)):not(:has(.player-shell)) footer.site h5{
  position:relative;padding-bottom:12px;margin:0 0 16px;
  font-family:var(--ux-display);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
body:not(:has(.portal)):not(:has(.player-shell)) footer.site h5::after{content:'';position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--gold)}
body:not(:has(.portal)):not(:has(.player-shell)) .footin>div:first-child h5{font-size:21px;letter-spacing:.02em;text-transform:none;font-weight:400}
body:not(:has(.portal)):not(:has(.player-shell)) footer.site a{transition:padding-left .2s,color .2s;padding:4px 0}
body:not(:has(.portal)):not(:has(.player-shell)) footer.site a:hover{padding-left:6px;color:#fff}
body:not(:has(.portal)):not(:has(.player-shell)) .footbar{letter-spacing:.05em;padding:18px}

/* ---------- Hero: collage layout (Unipix home variant 1) ----------
   Used when a hero section has a left and/or right collage photo (Page Editor → hero section). */
.hero.hero-collage{
  background:var(--navy);
  min-height:min(640px,82vh);display:flex;align-items:center;
  padding:clamp(72px,10vw,132px) 24px clamp(56px,8vw,104px);
}
.hero-collage .hero-lines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.07) calc(25% - 1px) 25%);
}
.hero-collage .hero-inner{position:relative;z-index:2;width:100%;max-width:var(--site-width);margin:0 auto;text-align:left}
.hero-collage .tag{background:transparent;border:0;padding:0;border-radius:0;color:#fff;font-size:13px;font-weight:600;letter-spacing:.04em;margin-bottom:18px;display:inline-flex;align-items:center;gap:8px}
.hero-collage .tag::before{content:'';width:26px;height:2px;background:var(--gold)}
.hero-collage h1{
  font-family:var(--ux-display);font-weight:700;text-transform:none;text-shadow:none;color:#fff;
  font-size:clamp(38px,6.6vw,92px);line-height:1.02;letter-spacing:-.01em;max-width:none;margin:0;text-wrap:initial;
}
.hero-collage .hl{display:block}
.hero-collage .hl1{padding-left:clamp(0px,9vw,150px)}
.hero-collage .hl2{padding-left:clamp(0px,14vw,230px)}
.hero-sub{display:flex;align-items:center;gap:clamp(20px,4vw,48px);margin-top:clamp(24px,3.5vw,40px)}
.hero-sub-text{max-width:520px}
.hero-collage .hero-sub-text p{margin:0 0 22px;color:rgba(255,255,255,.86);font-size:clamp(15px,1.3vw,17px);line-height:1.6;text-wrap:pretty}
.hero-collage .cta .btn{
  border-radius:2px;background:#fff;color:var(--navy);box-shadow:none;min-height:46px;padding:0 24px;
  font-weight:700;letter-spacing:.02em;border:1px solid #fff;
}
.hero-collage .cta .btn::after{content:'→';margin-left:10px;display:inline-block;transition:transform .2s}
.hero-collage .cta .btn:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.hero-collage .cta .btn:hover::after{transform:translateX(4px)}
.hero-collage .cta .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.hero-collage .cta .btn.ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.hero-collage .cta .btn.ghost::after{content:none}
.hero-collage .verse{margin-top:18px}

.hero-ring{position:relative;flex:0 0 auto;width:clamp(92px,9vw,124px);aspect-ratio:1;display:inline-grid;place-items:center}
.hero-ring svg{position:absolute;inset:0;width:100%;height:100%;animation:heroSpin 26s linear infinite}
.hero-ring text{font-size:7px;letter-spacing:.12em;text-transform:uppercase;fill:rgba(255,255,255,.85);font-family:var(--font-body)}
.hero-ring i{font-style:normal;font-family:var(--ux-display);font-weight:700;font-size:clamp(22px,2.4vw,30px);color:var(--gold-soft)}
@keyframes heroSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero-ring svg{animation:none}}

.hero-ph{position:absolute;z-index:1;object-fit:cover;background:var(--navy-2);box-shadow:0 18px 44px rgba(0,0,0,.28)}
.hero-ph-l{left:0;top:clamp(96px,11vw,150px);width:clamp(150px,19vw,290px);height:clamp(200px,26vw,390px);object-position:center top}
.hero-ph-r{right:0;top:clamp(70px,8vw,100px);width:clamp(140px,17vw,250px);height:clamp(110px,13vw,200px)}

/* with a left photo, the heading starts to its right on wide screens */
@media(min-width:1101px){
  .hero-collage:has(.hero-ph-l) .hero-inner{padding-left:clamp(0px,16vw,260px)}
}
@media(max-width:1100px){
  .hero-ph{display:none}
  .hero-collage .hl1,.hero-collage .hl2{padding-left:0}
}
@media(max-width:620px){
  .hero-sub{flex-direction:column;align-items:flex-start}
}

/* ---------- Home sections (phase 2) ---------- */
/* Section titles on public pages: display serif, uppercase, with a hairline running to the right */
body:not(:has(.portal)):not(:has(.player-shell)) .section-title{align-items:flex-end;gap:18px}
body:not(:has(.portal)):not(:has(.player-shell)) .section-title h2{
  font-family:var(--ux-display);font-weight:700;text-transform:none;letter-spacing:.01em;
  font-size:clamp(24px,3.2vw,38px);line-height:1.1;
}
body:not(:has(.portal)):not(:has(.player-shell)) .section-title::after{content:'';flex:1;height:1px;background:var(--line);margin-bottom:.55em}

/* Stats row: big serif numbers, hairline dividers */
.ux-stats .grid{gap:0}
.ux-stats .grid .card{background:transparent!important;border:0!important;border-left:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;padding:8px 22px!important;text-align:left!important}
.ux-stats .grid .card:first-child{border-left:0!important;padding-left:0!important}
.ux-stat-n{display:block;font-family:var(--ux-display);font-weight:700;font-size:clamp(34px,4.4vw,56px);line-height:1.05;color:var(--ux-accent-ink)}
.ux-stat-l{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
@media(max-width:620px){.ux-stats .grid .card{border-left:0!important;padding-left:0!important;border-top:1px solid var(--line)!important}.ux-stats .grid .card:first-child{border-top:0!important}}

/* Icon row: accent rule on top of each item, left aligned */
.fi-wrap .fi-card{background:transparent;border:0;border-top:2px solid var(--gold);border-radius:0;box-shadow:none;text-align:left;padding:22px 4px 8px}
.fi-wrap .fi-h{font-family:var(--ux-display);font-weight:400;font-size:20px}

/* Photo cards (feature-cards, "Photo cards" look) */
.ux-pcard{
  position:relative;isolation:isolate;display:flex;align-items:flex-end;color:#fff;
  min-height:clamp(260px,26vw,360px);border-radius:4px;overflow:hidden;
  background:var(--navy) center/cover no-repeat;cursor:default;outline-offset:3px;
}
.ux-pcard::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,color-mix(in srgb,var(--navy) 92%,transparent),color-mix(in srgb,var(--navy) 15%,transparent) 62%);
}
.ux-pcard-in{padding:20px 22px;width:100%}
.ux-pcard h4{margin:0;color:#fff;font-family:var(--ux-display);font-weight:400;font-size:clamp(18px,1.6vw,22px)}
.ux-pcard-body{max-height:0;overflow:hidden;opacity:0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.9);transition:max-height .35s,opacity .3s,margin .3s}
.ux-pcard:hover .ux-pcard-body,.ux-pcard:focus-within .ux-pcard-body,.ux-pcard:focus .ux-pcard-body{max-height:220px;opacity:1;margin-top:8px}
@media(hover:none){.ux-pcard-body{max-height:none;opacity:1;margin-top:8px}}

/* Banner call to action / spotlight banner */
.ux-cta{padding:clamp(44px,7vw,84px) 24px!important;position:relative;overflow:hidden}
.ux-cta h3{font-family:var(--ux-display)!important;font-weight:700;text-transform:none;font-size:clamp(26px,4.2vw,50px);line-height:1.08;margin:0}
.ux-cta .btn{border-radius:2px;background:#fff;color:var(--navy);border:1px solid #fff;min-height:46px;padding:0 24px;font-weight:700}
.ux-cta .btn::after{content:'→';margin-left:10px;display:inline-block;transition:transform .2s}
.ux-cta .btn:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.ux-cta .btn:hover::after{transform:translateX(4px)}
.ux-cta .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.ux-cta .btn.ghost:hover{background:#fff;color:var(--navy)}

/* About block */
.ux-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;margin:clamp(24px,4vw,56px) 0}
.ux-about-nophoto{display:block;margin-left:0;margin-right:auto;text-align:left}
.ux-about-nophoto .ux-about-text{max-width:760px;margin:0;text-align:left}
.ux-about-media{position:relative;min-height:clamp(320px,38vw,520px)}
.ux-about-a{position:absolute;left:0;top:0;width:68%;height:80%;object-fit:cover;border-radius:2px}
.ux-about-b{position:absolute;right:0;bottom:0;width:52%;height:58%;object-fit:cover;border-radius:2px;border:8px solid var(--ed-canvas,var(--bg))}
.ux-about-ring{position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);width:clamp(84px,9vw,118px);background:var(--gold);border-radius:50%;z-index:2}
.ux-about-ring i{color:#fff}
.ux-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ux-accent-ink)}
.ux-eyebrow::before{content:'';width:26px;height:2px;background:currentColor}
.ux-about-text h2{font-family:var(--ux-display);font-weight:700;text-transform:none;font-size:clamp(28px,3.6vw,46px);line-height:1.08;margin:10px 0 16px}
.ux-outline{font-family:var(--ux-display);text-transform:none;font-size:clamp(44px,6vw,84px);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--muted);margin:20px 0 10px;opacity:.85}
.ux-link{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:700;color:var(--ux-accent-ink);border-bottom:1px solid currentColor;padding-bottom:2px;cursor:pointer}
.ux-link::after{content:'↗';font-size:.95em}
@media(max-width:860px){.ux-about{grid-template-columns:1fr}.ux-about-media{min-height:340px;order:2}}

html[data-ed-theme="dark"]{--ux-accent-ink:color-mix(in srgb,var(--gold) 70%,#fff)}