/* University Template over-ride
   Launched: 2021-XX-XX
   Author: Notre Dame Web Team
   ----------------------------------------------------*/

@media only screen {
  .site-title a {text-indent:-9999px; overflow:hidden; background:url(images/logo.png) left center / contain no-repeat;}

  .section { --section-padding:2rem; --section-margin:2rem; padding:var(--section-padding) 0; margin-bottom:var(--section-margin); }
  .section:last-child { margin-bottom:0; }
  .section--home-callout .section__image { margin-top:calc(var(--section-padding) * -1); margin-left:var(--gutter-offset); margin-right:var(--gutter-offset);}

  .home .page-main { margin-bottom:0; padding-bottom:0; }
  .home .page-header::before {  background-image: none; background: var(--gray-extra-light); }

  .long-title { font-size:1.625rem; margin-bottom:0.5em }
  .long-title:after { content:none; }

  .section--dark-cards .card { color:#fff; background-color:var(--brand-blue); }
  .section--dark-cards .card:hover { background-color:var(--brand-blue-light); }
  .section--dark-cards .card-body { padding:2.5rem 1.5rem; }
  .section--dark-cards .card-title { color:#fff; margin-bottom:0; }

  .lectures-form {padding:1rem 1rem 0; background:var(--sky-blue-light);}
    .lectures-form__input { width:100%; margin: 0 0 1rem; padding: 0.5rem; font-size: 1rem; border: 1px solid var(--gray-light); line-height: 1.5rem; border-radius: 0; color: var(--gray);}
    .lectures-form__btn {background-color: var(--brand-blue); color: #fff;}
  .lectures-form + hr.no-border { margin: 2em 5%; }

  .course-list {}
  .course-info {font-size:0.85rem;}
}

/* 480px
----------------------------------------------------*/
@media only screen and (min-width:30em) {

}

/* 768px
----------------------------------------------------*/
@media only screen and (min-width:48em) {
  .home-primary { background:#fff; padding:2rem; margin:-6.5rem auto 0; }

  .long-title { font-size:1.75rem; }

  .section--home-callout { margin-bottom:calc(var(--section-margin) * 2); }
  .section--home-callout .section__image { margin-top:calc(var(--section-padding) * -2); margin-bottom:calc(var(--section-padding) * -2); margin-left:var(--gutter-offset); margin-right:0; }
  .section--home-callout .section__body { padding:2rem; }
  .section--home-callout img { width:100%; }

  .lectures-form {display:grid; gap:2rem; grid-template-columns:1fr auto auto;}
    .lectures-form .form__group {}

  .course-info li {display:inline-block; margin-right:1rem;}
}

/* 960px
----------------------------------------------------*/
@media only screen and (min-width:60em) {

}

/* 1280px
----------------------------------------------------*/
@media only screen and (min-width:80em) {
  .long-title { font-size:2.125rem; }
}

/* 1600px
----------------------------------------------------*/
@media only screen and (min-width:100em) {
  .bookshelf-list .horizontal-sm .card-image { min-width:17%; width:17%; }
}

/* 1920px
----------------------------------------------------*/
@media only screen and (min-width:120em) {
  .section--home-callout .section__image { margin-left:-6rem; }
}

/* Print
----------------------------------------------------*/
@media print {

}

/* Dialog Polyfill 
--------------------------------------*/
dialog { display:block; position:fixed; top:50%; transform:translate(0, -50%); left:0; right:0; width:-webkit-fit-content; width:-moz-fit-content; width:fit-content; height:-webkit-fit-content; height:-moz-fit-content; height:fit-content; margin:auto; padding:0; border:none; box-shadow:0 0 7px rgba(0,0,0,0.7); background:var(--sky-blue); max-width:90vw; max-height:90vh; }
  dialog[open] { -webkit-animation:dialogShow .25s ease-out; animation:dialogShow .25s ease-out;}
  dialog:not([open]) { display:none; }
  dialog.fixed { position:fixed; top:50%; transform:translate(0, -50%); }
dialog + .backdrop { position:fixed; top:0; right:0; bottom:0; left:0; }
dialog::-webkit-backdrop { background:rgba(0,0,0,0.5); }
dialog + .backdrop,
dialog::backdrop { background:rgba(0,0,0,0.5); }
._dialog_overlay { position:fixed; top:0; right:0; bottom:0; left:0; }
.has-open-dialog .page-main { z-index:unset; }
.has-open-dialog .page-main::before { z-index:0; }

.dialog-close {position:absolute; top:0; right:1rem;}
  .dialog-close button {color:var(--brand-blue); padding:0; margin:0; border:0; background:none; -webkit-animation: dialogEnter 0.3s; animation: dialogEnter 0.3s; font-size:2em; width:1.25em; height:1.25em; line-height:1.25; position:absolute; right:-0.16em; top:0.25em; text-align:center; border-radius:100%; background:rgba(255,255,255,0.5); }
  .dialog-close.offset {top:-1.6rem; right:-0.7rem;}
    .dialog-close.offset button {width:1em; height:1em; line-height:1em; background:#fff;}
    
.dialog-frame { overflow-y:auto; height:auto; max-height:90vh;}
.dialog-body { padding:1rem; }
.dialog-image img { width:100%; }

@-webkit-keyframes dialogEnter { 
  from {  opacity:0; transform:translate3d(0, -1em, 0); } 
  to { opacity:1; transform:translate3d(0, 0, 0); } 
}

@keyframes dialogEnter { 
  from {  opacity:0; transform:translate3d(0, -1em, 0); } 
  to { opacity:1; transform:translate3d(0, 0, 0); } 
}

@-webkit-keyframes dialogShow { 
  from {opacity:0;} 
  to {opacity:1;} 
}

@keyframes dialogShow { 
  from {opacity:0;} 
  to {opacity:1;} 
}

/* Custom 
--------------------------------------*/

/* Overrides */
.dialog-body { padding:2rem; }
.dialog-person .dialog-image { padding:2rem; } 

@media screen and (min-width:40rem) { 
  /* People Modal */
  .dialog-person {overflow:visible; max-width:80vw; display:flex; flex-flow:row; }
    .dialog-person .dialog-image { width:33%; padding-right:0; }
    .dialog-person .dialog-body { width:67%; overflow-y:auto; }
  .dialog-person .dialog-frame { display:flex; flex-flow:row; overflow:visible; height:auto; padding:0; }
}
@media screen and (min-width:60rem) { 
  .dialog-person .dialog-image { width:25%; }
  .dialog-person .dialog-body { width:75%; }
  
  .dialog-degree { max-width:80vw; }
  .dialog-degree .dialog-copy { display:flex; }
  .dialog-degree .dialog-image { width:35%; margin-right:2rem; }
}  
@media screen and (min-width:120rem) { 
 .dialog-person {max-width:108rem; }
}