/* ---------------------------------------------------------------------------
   Family Medicine residency pages.

   Everything is scoped under .fm-page so nothing here can affect the Internal
   Medicine or General Surgery pages, which share the same header and footer.

   Palette matches assets/css/style.css: #00a8b6 is .main-text.

   Card policy: a card is used only for a repeating, self-contained entity -
   a faculty member, a resident, an FAQ item. Sections of a document are
   typographic, not boxed, which is how the rest of the GME site reads.
--------------------------------------------------------------------------- */

/* --- page furniture ------------------------------------------------------ */
/* --- page title block ---------------------------------------------------- */
/* Eyebrow, H1 and rule are one unit. The eyebrow sat a full paragraph margin
   (16px) away from the title it labels, which read as two separate lines
   rather than a heading pair. */
.fm-page .content-space > .text-20:first-child {
    margin-bottom: 5px; letter-spacing: .6px; line-height: 1.3;
}
.fm-page .content-space > h1 { line-height: 1.25; }
.fm-page .fm-rule {
    border: 0; border-top: 3px solid #00a8b6; width: 56px;
    margin: 16px 0 32px 0; opacity: 1;
}

/* --- typographic sections (the default for document content) ------------- */
.fm-page .fm-section { margin-bottom: 40px; }
.fm-page .fm-section:last-child { margin-bottom: 0; }

.fm-page .fm-h2 {
    font-size: 20px; font-weight: 600; color: #00a8b6;
    margin: 0; padding-bottom: 10px;
    border-bottom: 1px solid #e6e6e6;
}
.fm-page .fm-h2 .fa { margin-right: 8px; opacity: .85; font-size: 18px; }
.fm-page .fm-section > *:first-child + * { margin-top: 18px; }
.fm-page .fm-section > .fm-h2 + ul { margin-top: 18px; }
.fm-page .fm-section p { line-height: 1.7; }

.fm-page .fm-h3 {
    font-size: 16px; font-weight: 600; color: #333;
    margin: 20px 0 8px 0;
}

/* --- lists --------------------------------------------------------------- */
.fm-page .fm-list { margin: 14px 0 0 0; padding-left: 20px; list-style-position: outside; }
.fm-page .fm-list li { line-height: 1.65; margin-bottom: 7px; }
.fm-page .fm-list li:last-child { margin-bottom: 0; }

/* --- callouts: rare by design, so they still mean something -------------- */
.fm-page .fm-note {
    background-color: #f8f9fa; border-left: 4px solid #00a8b6;
    padding: 12px 16px; margin-bottom: 26px; font-size: 15px;
}
.fm-page .fm-note .fa { color: #00a8b6; margin-right: 6px; }

.fm-page .fm-quote {
    background-color: #f8f9fa; border-left: 4px solid #00a8b6;
    padding: 18px 20px; margin: 26px 0; font-size: 17px; font-style: italic;
}
.fm-page .fm-quote p { margin-bottom: 0; }

.fm-page .fm-lead { font-size: 18px; line-height: 1.7; color: #333; }

/* --- in-page navigation for long documents ------------------------------- */
.fm-page .fm-jump {
    background-color: #f8f9fa; border: 1px solid #e6e6e6; border-radius: 4px;
    padding: 14px 18px; margin-bottom: 30px;
}
.fm-page .fm-jump-label {
    display: block; font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .5px; color: #666; margin-bottom: 8px;
}
.fm-page .fm-jump-list { list-style: none; margin: 0; padding: 0; }
.fm-page .fm-jump-list li { display: inline-block; margin: 0 14px 6px 0; }
.fm-page .fm-jump-list a { color: #00a8b6; font-weight: 600; font-size: 14px; }
.fm-page .fm-jump-list a:hover { color: #36949a; text-decoration: underline; }
.fm-page [id^="sec-"] { scroll-margin-top: 20px; }

/* --- cards: repeating entities only -------------------------------------- */
.fm-page .fm-entity {
    border: 1px solid #e6e6e6; border-radius: 4px;
    margin-bottom: 22px; overflow: hidden;
}
.fm-page .fm-entity .card-body { padding: 18px 20px; }
.fm-page .fm-entity p:last-child { margin-bottom: 0; }
.fm-page .fm-photo { width: 100%; height: auto; display: block; }

.fm-page .fm-name { font-size: 20px; font-weight: 600; color: #00a8b6; margin-bottom: 2px; }
.fm-page .fm-role {
    font-size: 14px; font-style: italic; color: #555;
    border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 12px;
}
.fm-page .fm-chief {
    display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 10px;
    background-color: #00a8b6; color: #fff; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; vertical-align: middle;
}

/* Grouped name lists (Community Preceptors, OB Fellows) keep a light frame
   because they are a set of peers, not a passage of text. */
.fm-page .fm-namelist { border: 1px solid #e6e6e6; border-radius: 4px; margin-bottom: 22px; }
.fm-page .fm-namelist .card-header { background-color: #f8f9fa; border-bottom: 1px solid #e6e6e6; }
.fm-page .fm-namelist .card-header h2 { font-size: 18px; font-weight: 600; color: #00a8b6; }
.fm-page .fm-namelist .list-group-item { border-color: #f0f0f0; }

/* --- external links leaving the site ------------------------------------- */
.fm-page .fm-external a::after {
    content: "\f08e"; font-family: FontAwesome; font-size: 11px;
    margin-left: 6px; opacity: .7;
}

/* Emphasis blocks inside a passage of prose (the co-chiefs message). Not a
   card: they are part of the letter, not separable objects. */
.fm-page .fm-value { border-left: 3px solid #a3d4d7; padding: 2px 0 2px 16px; margin-bottom: 22px; }
.fm-page .fm-value .fm-h3 { color: #00a8b6; margin-top: 0; }
.fm-page .fm-value p { margin-bottom: 0; }

/* FAQ accordion - a card per question is right here: each is a discrete,
   independently clickable entity. */
.fm-page #faqAccordion .card {
    border: 1px solid #e6e6e6; border-radius: 4px; margin-bottom: 8px;
}
.fm-page #faqAccordion .card:last-child { margin-bottom: 0; }
.fm-page #faqAccordion .card-header { background-color: #f8f9fa; border-bottom: 0; padding: 0; }

/* The question is the whole clickable row, so the padding lives on the button
   rather than the header. Right side is kept clear for the chevron.

   !important is required, not preferred: assets/css/style.css carries
   ".accordion .btn { padding: 0px!important; }" (twice - that file is a
   duplicated copy of the main hospital stylesheet). An !important declaration
   beats a normal one whatever the specificity, so the padding below has to
   match it. This selector is more specific, so it wins the important-vs-
   important comparison. style.css is left alone because it is shared. */
.fm-page #faqAccordion .btn-link {
    color: #00a8b6; font-weight: 600; text-decoration: none; white-space: normal;
    padding: 14px 46px 14px 18px !important; position: relative; line-height: 1.45;
}
.fm-page #faqAccordion .btn-link:hover, .fm-page #faqAccordion .btn-link:focus { color: #36949a; text-decoration: none; }
.fm-page #faqAccordion .btn-link:focus { outline: 2px solid #00a8b6; outline-offset: -2px; }
.fm-page #faqAccordion .btn-link .fa {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    transition: transform .2s ease-in-out; font-size: 14px;
}
.fm-page #faqAccordion .btn-link[aria-expanded="true"] .fa { transform: translateY(-50%) rotate(180deg); }

/* Answer padding matches the question's 20px left edge so the two align, with
   a hairline rule separating them once the panel is open. */
.fm-page #faqAccordion .card-body {
    padding: 14px 18px 16px 18px; border-top: 1px solid #ededed; line-height: 1.65;
}
.fm-page #faqAccordion .card-body p:last-child { margin-bottom: 0; }

/* The hotels answer is the only one with sub-headings and lists. */
.fm-page #faqAccordion .card-body .bold-600 { margin-top: 18px; }
.fm-page #faqAccordion .card-body .bold-600:first-child { margin-top: 0; }
.fm-page .fm-faq-list {
    list-style-position: outside; padding-left: 20px; margin: 10px 0 0 0;
}
.fm-page .fm-faq-list li { line-height: 1.65; margin-bottom: 8px; }
.fm-page .fm-faq-list li:last-child { margin-bottom: 0; }

/* --- mobile hardening ---------------------------------------------------- */
/* Bare URLs appear in the migrated text (USCIS form, UC Davis network). Let
   them wrap rather than force a horizontal scrollbar on small screens. */
.fm-page .fm-section,
.fm-page .fm-entity,
.fm-page #faqAccordion .card-body { overflow-wrap: break-word; word-wrap: break-word; }

/* Headings and the jump nav should never be the thing that overflows. */
.fm-page .fm-h2, .fm-page .fm-h3 { overflow-wrap: break-word; }

@media (max-width: 575.98px) {
    /* Photo column is full width when stacked; cap it so a headshot does not
       fill the whole phone screen before the biography starts. */
    .fm-page .fm-entity .fm-photo { max-width: 190px; margin: 16px auto 0 auto; }
    .fm-page .fm-entity .card-body { padding: 14px 16px; }
    .fm-page .fm-name { font-size: 18px; }
    .fm-page .fm-h2 { font-size: 18px; }
    .fm-page .fm-rule { margin: 14px 0 26px 0; }
    .fm-page #faqAccordion .btn-link { padding: 12px 40px 12px 14px !important; }
    .fm-page #faqAccordion .btn-link .fa { right: 14px; }
    .fm-page #faqAccordion .card-body { padding: 12px 14px 14px 14px; }
    .fm-page .fm-section { margin-bottom: 32px; }
    .fm-page .fm-lead { font-size: 17px; }
    .fm-page .fm-jump-list li { display: block; margin: 0 0 8px 0; }
}