/* UK tutor profile (/users/<username>/ = member-profile.asp with
   includes/display-member.inc), linked after css/profile.css on the UK site only.
   It brings the page in line with the redesigned pages: Figtree, the navy-on-lime
   button, the plain breadcrumb, one star colour, readable labels, a 16px margin on
   phones and no extra gap above the rates. Markup and text are unchanged; the other
   countries keep css/profile.css alone. */

/* ---------- 1. Font and headings ---------- */
#maincontentouter,
#fixedminiprofile
{
  font-family: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* The site sets Roboto on many elements directly, so they follow the page instead */
#maincontentouter :is(h1, h2, h3, h4, h5, h6, p, a, span, div, li, td, th, strong, b, em, label, small, abbr, button, input, select, textarea),
#fixedminiprofile :is(a, span, div, strong)
{
  font-family: inherit;
}

#maincontentouter .profileheroname
{
  color: #1f3350;
  font-weight: 800;
  letter-spacing: -.02em;
}

#maincontentouter .cardtitle
{
  color: #1f3350;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Online / In-person: normal case, as on the search pages */
#maincontentouter div.subjecttabitem a
{
  color: #1f3350;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- 2. Buttons: navy on lime, "Contact this tutor" ---------- */
#maincontentouter a.btnsuccess,
#fixedminiprofile a.btnsuccess
{
  color: #1f3350 !important;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color .15s;
}

#maincontentouter a.btnsuccess:hover,
#maincontentouter a.btnsuccess:focus,
#fixedminiprofile a.btnsuccess:hover,
#fixedminiprofile a.btnsuccess:focus
{
  background-color: #98c31a !important;
  color: #1f3350 !important;
}

#maincontentouter a.btnsuccess:focus-visible,
#fixedminiprofile a.btnsuccess:focus-visible
{
  outline: 3px solid #3a68ae;
  outline-offset: 2px;
}

/* The markup says "Contact this Tutor" ("Contact Tutor" in the phone's sticky bar,
   "Contact this Student" on student profiles): shown in sentence case. Screen
   readers still read the text as written. */
#maincontentouter a.profileherocta,
#maincontentouter a.tabcontactbut,
#maincontentouter a.btnsuccess[href^="/enquiry.asp"],
#fixedminiprofile a.btnsuccess
{
  text-transform: lowercase;
}

#maincontentouter a.profileherocta::first-letter,
#maincontentouter a.tabcontactbut::first-letter,
#maincontentouter a.btnsuccess[href^="/enquiry.asp"]::first-letter,
#fixedminiprofile a.btnsuccess::first-letter
{
  text-transform: uppercase;
}

/* The feedback score badge was white on lime too */
#maincontentouter .feedbackscore
{
  color: #1f3350;
  font-weight: 800;
}

/* ---------- 3. Breadcrumb: plain links with "/" between, as on the other pages ---------- */
/* Padding, not a top margin: a margin here collapsed through #maincontent and
   #maincontentouter and left a white band under the menu bar */
#maincontentouter #location
{
  margin: 0 0 14px;
  padding-top: 18px;
  color: #56657b;
  font-size: 14px;
  line-height: 1.4;
}

#maincontentouter #location a
{
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #56657b;
  font-size: 14px;
  text-decoration: none;
}

#maincontentouter #location a:hover
{
  color: #1f3350;
  text-decoration: underline;
}

#maincontentouter #location a + a::before
{
  content: "/";
  display: inline-block;
  margin: 0 8px;
  color: #9aa8bb;
  text-decoration: none;
}

/* ---------- 4. One star colour: the hero's orange stars match the lime ones ---------- */
#maincontentouter .profileherostaron
{
  color: #a9d622;
}

/* ---------- 5. Labels in the About text: navy, not pale blue ---------- */
#maincontentouter .profilelabel,
#maincontentouter .profilelabel abbr
{
  color: #1f3350;
}

/* ---------- 7. No extra gap above the rates ---------- */
/* profile.css moves the tab bar down 25px (top: 25px) inside a 59px box, which left
   55px above the tabs instead of the 30px between other cards. Same overlap onto
   the card below, just without the extra space. */
#maincontentouter #profilesubjectheader
{
  top: 0;
  height: 34px;
}

/* ---------- 6. Phones: a 16px margin, as on the other pages ---------- */
@media (max-width: 767px)
{
  #maincontentouter #maincontent
  {
    width: auto;
    margin: 0 16px;
  }

  /* The sticky bar that appears on scrolling: the same 16px either side */
  #fixedminiprofile .container
  {
    box-sizing: border-box;
    padding-right: 16px;
    padding-left: 16px;
  }

  #fixedminiprofile a.btnsuccess
  {
    padding: 10px 18px;
    font-size: 15px;
    white-space: nowrap;
  }

  /* Student profiles: a card holding only the desktop Contact button was left
     empty on phones */
  #maincontentouter .card:has(> .cardcontent:first-child > .mobno:only-child)
  {
    display: none;
  }
}