/* Ph.D. Prep Track -- static port of the wiki.
   Bootstrap 5.3.2 supplies the chrome; this file only carries across the layout
   conventions the wiki content itself relies on: floated infobox tables, thumbnail
   frames, and the heading rhythm. */

:root { --byu-navy: #002E5D; }

.phd-content { font-size: 1.02rem; line-height: 1.7; color: #333; max-width: 62rem; }
.phd-content h2 { font-size: 1.6rem; font-weight: 600; color: var(--byu-navy);
                  margin-top: 2.2rem; margin-bottom: .9rem;
                  padding-bottom: .35rem; border-bottom: 2px solid #e6e9ee; }
.phd-content h3 { font-size: 1.25rem; font-weight: 600; color: #24425f;
                  margin-top: 1.6rem; margin-bottom: .7rem; }
.phd-content h4 { font-size: 1.08rem; font-weight: 600; margin-top: 1.2rem; }
.phd-content p  { margin-bottom: 1rem; }
.phd-content ul, .phd-content ol { margin-bottom: 1rem; }
.phd-content li { margin-bottom: .35rem; }
.phd-content a  { color: #0d5aa7; }
.phd-content a:hover { color: var(--byu-navy); }

/* The wiki floated tables to make infoboxes and sidebars. Keep that on a desktop,
   but let them fall back to full width on a phone instead of overflowing. */
.phd-content table { max-width: 100%; }
.phd-content table.toccolours { background: #f6f8fa; border: 1px solid #dde3ea;
                                border-radius: .5rem; padding: .75rem; font-size: .94rem; }
.phd-content img { max-width: 100%; height: auto; }
.phd-content figure, .phd-content .thumb { max-width: 100%; }
.phd-content .thumbinner { background: #f6f8fa; border: 1px solid #dde3ea;
                           border-radius: .5rem; padding: .5rem; font-size: .88rem; }
.phd-content figcaption, .phd-content .thumbcaption { color: #6c757d; font-size: .88rem;
                                                      padding-top: .35rem; }
/* An image with no frame still gets a <figcaption>, and MediaWiki's own content CSS
   hides it -- only mw:File/Thumb and mw:File/Frame are meant to show one. Every image
   on this wiki is a plain mw:File, so the wiki displayed none of these captions; drop
   them here too, or the Main Page banners print "Header1"/"Header2" beneath themselves.
   The two framed types are re-shown so the rule stays correct if a thumb is ever added. */
.phd-content figure[typeof~="mw:File"] > figcaption,
.phd-content figure[typeof~="mw:File/Frameless"] > figcaption { display: none; }
.phd-content figure[typeof~="mw:File/Thumb"] > figcaption,
.phd-content figure[typeof~="mw:File/Frame"] > figcaption { display: block; }
.phd-content .videoflash-embed { margin: 1.25rem auto; }

/* Headings inside a floated infobox inherit the article h2 rule, which is far too
   large for a sidebar. Scale them to the box. */
.phd-content table.toccolours h2,
.phd-content table[style*="float"] h2 { font-size: 1.15rem; border-bottom: none;
                                        margin-top: .25rem; margin-bottom: .5rem; }
.phd-content table.toccolours h3,
.phd-content table[style*="float"] h3 { font-size: 1rem; margin-top: .5rem; }

@media (max-width: 767.98px) {
  .phd-content table[style*="float"], .phd-content .tright, .phd-content .tleft,
  .phd-content figure[class*="tright"], .phd-content figure[class*="tleft"] {
    float: none !important; width: auto !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  /* The videos carry the width the old <videoflash> tag asked for -- 400px, which is
     wider than a phone. That width is deliberate on a desktop (a percentage collapsed
     the player to 176px and broke its controls), so it is overridden only here, with
     aspect-ratio keeping the proportions. */
  .phd-content .videoflash-embed { width: 100% !important; max-width: 100% !important; }
  .phd-content .videoflash-embed iframe { width: 100% !important; height: auto !important;
                                          aspect-ratio: 16 / 9; }
  .phd-content table.toccolours { width: auto !important; max-width: 100% !important; }
  /* Real data tables -- the research area x method matrix is six columns and 676px, and
     no amount of reflowing makes that fit a phone. Let it scroll inside itself instead
     of pushing the whole page sideways. The wiki's layout tables are excluded by their
     inline width, or this would break the Main Page's two-column arrangement. */
  .phd-content table:not(.toccolours):not([style*="width:100%"]):not([style*="width: 100%"]) {
    display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch;
  }
}

.section-card { transition: box-shadow .15s ease; }
.section-card:hover { box-shadow: 0 .4rem 1rem rgba(0,0,0,.08); }
.breadcrumb { --bs-breadcrumb-divider: '/'; }

/* ------------------------------------------------------------------ contents page
   The contents page used to be seven stacked lists of underlined links in a
   half-width column -- about 3,000px of near-identical blue text. What follows gives
   it a hierarchy: a hero that says what the site is for, the seven flagship pages as
   cards carrying a sentence each, and the remaining sections as two-column indexes. */

html { scroll-behavior: smooth; }
body { background: #fff; color: #333; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200;
             background: var(--byu-navy); color: #fff; padding: .6rem 1rem; }
.skip-link:focus { left: 0; }

.site-nav { background: var(--byu-navy); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.site-nav .navbar-brand { font-weight: 700; letter-spacing: -.01em; }
.site-nav .nav-link { color: rgba(255,255,255,.82); font-size: .95rem;
                      padding: .4rem .85rem; border-radius: .4rem; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus { color: #fff; background: rgba(255,255,255,.12); }
.site-nav .nav-link--out { color: rgba(255,255,255,.6); }

.hero { background: linear-gradient(160deg, #002E5D 0%, #013a75 55%, #0a4f92 100%);
        color: #fff; padding: 4.5rem 0 4rem; }
.hero__inner { max-width: 54rem; }
.hero__eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .74rem;
                 font-weight: 600; color: rgba(255,255,255,.62); margin-bottom: .9rem; }
.hero__title { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 700; line-height: 1.12;
               letter-spacing: -.02em; margin-bottom: 1.1rem; }
.hero__lead { font-size: 1.12rem; line-height: 1.65; color: rgba(255,255,255,.84);
              margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn-hero { display: inline-block; padding: .6rem 1.15rem; border-radius: 2rem;
            border: 1px solid rgba(255,255,255,.35); color: #fff; text-decoration: none;
            font-size: .95rem; font-weight: 500; transition: background .15s, border-color .15s; }
.btn-hero:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); color: #fff; }
.btn-hero--solid { background: #fff; color: var(--byu-navy); border-color: #fff; font-weight: 600; }
.btn-hero--solid:hover { background: #e8eef6; color: var(--byu-navy); }

/* Article pages get the same banded top as the contents page, so moving between the
   two does not feel like moving between two different sites. Lighter than the hero,
   because on an article the content is the thing, not the banner. */
.page-head { background: #f6f8fa; border-bottom: 1px solid #e6e9ee; padding: 1.5rem 0 1.75rem; }
.page-head__title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; color: #1d2b3a;
                    letter-spacing: -.02em; line-height: 1.15; margin: .35rem 0 0; }
.page-head .breadcrumb { margin-bottom: 0; }
.page-body { padding: 2.25rem 0 1rem; }

.page { padding: 3.5rem 0 1rem; }
.section { scroll-margin-top: 5rem; margin-bottom: 3.25rem; }
/* The navbar is sticky on the article pages too, so a link into a section of a page
   (Life as a Professor#What do Accounting Professors get Paid?) would otherwise land
   with its heading hidden underneath it. */
.phd-content h2, .phd-content h3, .phd-content h4,
.phd-content .section-heading, .phd-content [id] { scroll-margin-top: 5rem; }
.section__head { display: flex; align-items: baseline; gap: .85rem;
                 border-bottom: 2px solid #e9edf2; padding-bottom: .6rem; margin-bottom: .5rem; }
.section__title { font-size: 1.4rem; font-weight: 700; color: var(--byu-navy);
                  letter-spacing: -.01em; margin: 0; }
.section__title a { color: inherit; text-decoration: none; }
.section__title a:hover { text-decoration: underline; }
.section__count { margin-left: auto; font-size: .78rem; color: #8a94a3; white-space: nowrap; }
.section__blurb { color: #6c757d; font-size: .95rem; margin-bottom: 1.1rem; }

/* Flagship pages. The whole card is the link, so the target is large and there is no
   separate "read more" line to repeat seven times down the page. */
.topic-grid { display: grid; gap: 1rem;
              grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.topic-card { display: flex; flex-direction: column; gap: .4rem;
              padding: 1.15rem 1.25rem; border: 1px solid #e3e8ef; border-radius: .7rem;
              background: #fff; text-decoration: none; color: inherit;
              transition: border-color .15s, box-shadow .15s, transform .15s; }
.topic-card:hover { border-color: #b9cbe0; box-shadow: 0 .5rem 1.4rem rgba(0,46,93,.10);
                    transform: translateY(-2px); color: inherit; }
.topic-card__title { font-weight: 650; font-size: 1.05rem; color: var(--byu-navy);
                     line-height: 1.3; }
/* \00a0 not a plain space: with a normal space the arrow can wrap onto a line of its
   own under a title that fills the card. */
.topic-card__title::after { content: "\00a0→"; color: #9db3c9; font-weight: 400; }
.topic-card:hover .topic-card__title::after { color: #0d5aa7; }
.topic-card__desc { font-size: .88rem; color: #6c757d; line-height: 1.5; }

/* Index sections.
   CSS Grid, not multi-column. Multi-column splits the row into fixed halves, so a long
   title wrapped onto two lines even with most of the page still empty; and it fills
   top-to-bottom down column one before starting column two, which reads oddly in a
   list people scan. Grid fills left-to-right, and a title too long for half the width
   is marked .wide in assets.py and spans the whole row instead of wrapping. */
.link-list { list-style: none; margin: 0; padding: 0;
             display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
             column-gap: 2.5rem; }
.link-list li { border-bottom: 1px solid #eef1f5; }
.link-list li.wide { grid-column: 1 / -1; }
.link-list a { display: block; padding: .55rem .6rem .55rem 1rem; border-radius: .3rem;
               color: #24425f; text-decoration: none; font-size: .96rem; position: relative;
               transition: background .12s, color .12s; }
.link-list a::before { content: "›"; position: absolute; left: .35rem; color: #b9c4d1;
                       transition: color .12s; }
.link-list a:hover { background: #f2f6fa; color: #0d5aa7; }
.link-list a:hover::before { color: #0d5aa7; }
/* Two columns only while a cell is still wide enough for the titles. Measured: at
   1280px the cells are ~620px and nothing wraps; at 1100px they are ~500px and four
   titles wrap. So below 1200px it drops to one full-width column, which is taller but
   never wraps and never leaves a half-empty row. */
@media (max-width: 1199.98px) { .link-list { grid-template-columns: 1fr; } }

.about { background: #f6f8fa; border-top: 1px solid #e6e9ee; margin-top: 2rem; padding: 2.5rem 0; }
.about__inner { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between;
                align-items: start; }
.about__title { font-size: 1.05rem; font-weight: 700; color: var(--byu-navy); margin-bottom: .5rem; }
.about__text { color: #6c757d; font-size: .95rem; max-width: 42rem; margin: 0; }
.about__contact { font-size: .9rem; color: #6c757d; margin: 0; }

.site-foot { background: var(--byu-navy); color: rgba(255,255,255,.6);
             text-align: center; font-size: .875rem; padding: 1.75rem 0; }
.site-foot a { color: rgba(255,255,255,.85); }