/* =============================================================================
   staff2.css - page-specific rules for staff2.php
   =============================================================================
   Loaded AFTER css/common2.css, which supplies everything shared with the
   other converted pages (header, nav, hero banner, .section / .section-banner,
   back-to-top, footer). Only what is unique to the staff page lives here.

   Replaces css/staff.css, where every element was placed with
   `position:relative` + hand-tuned margin-top/left offsets.
   ============================================================================= */

/* ---- Veterinarian list --------------------------------------------------
   Was: .centered-container (fixed 855x308px flex box) holding two
   .name-column divs, with an empty <div class="name"> padding the second
   column. Now a single <ul>; CSS columns split it into two columns
   automatically (top-to-bottom, then left-to-right, same reading order as
   the original), so adding/removing a name is a one-line change. */

.staff-list {
  list-style: none;
  max-width: 855px;
  margin: 24px 0 0 38px;
  padding: 0;
  columns: 2;
  column-gap: 10px;
}

.staff-list li {
  break-inside: avoid;
  padding: 10px;
  margin: 0 0 10px;
  border: 1px solid #CCCCCC;
  font-size: 25px;          /* original: 1.8em of site_global's 14px body */
  line-height: 1.2;
  text-align: left;
}

/* ---- Schedule notice (pale pink rounded box + Instagram link) -----------
   Was: #u16312 (a 916x123 box at 35% opacity) with the text (#u16314-6) and
   a LINE add-friend button (#u16315) positioned on top of it by pixel
   offset. The 35% opacity only applied to the box, not the text, so it
   becomes an rgba() background here and the text/link sit inside it with
   Flexbox.

   The clinic moved from LINE to Instagram, so the right-hand side is now a
   white "card" holding the Instagram logo (images/instagram-logo-wide.jpg,
   cropped from Instagram_larg.jpg; its white background blends into the
   card) with the account handle underneath. */

.schedule-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 916px;
  margin: 0 0 21px 38px;
  padding: 26px 32px 26px 40px;
  box-sizing: border-box;
  background: rgba(255, 235, 235, 0.35);   /* #FFEBEB @ 35% */
  border-radius: 10px;
}

.schedule-notice__text p {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  color: #000000;
}

.schedule-notice__sns {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 16px 8px;
  background: #FFFFFF;
  border: 1px solid #F3D3D9;
  border-radius: 10px;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* a:link / a:visited in site_global.css add an underline; beat them here. */
.schedule-notice__sns:link,
.schedule-notice__sns:visited {
  text-decoration: none;
}

.schedule-notice__sns:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.schedule-notice__sns img {
  display: block;
  width: 160px;
  height: auto;
  border: 0;
}

.schedule-notice__handle {
  font-size: 14px;
  line-height: 1;
  color: #666666;
  letter-spacing: 0.05em;
  text-decoration: none;
}

/* ---- Calendar button ------------------------------------------------------
   Was: #buttonu8982 + #u8983, a Muse "state" button whose label image was
   swapped via CSS background on hover, plus a hidden .preload_images <img>
   to avoid a flash on first hover. Now both label images are real <img>s
   stacked on top of each other and the hover one is faded in -- both load
   up front, so no preload trick is needed. */

.calendar-button {
  position: relative;
  display: block;
  width: 546px;
  height: 58px;
  margin: 0 auto;
  background-color: #6FB7BB;
  border-radius: 10px;
}

.calendar-button:hover {
  background-color: #F3B9C5;
}

.calendar-button__label {
  position: absolute;
  left: 9px;
  top: 14px;
  display: block;
}

.calendar-button__label--hover {
  opacity: 0;
}

.calendar-button:hover .calendar-button__label--hover {
  opacity: 1;
}

/* ---- Phone line ---------------------------------------------------------- */

.contact-line {
  margin: 22px 0 0;
  text-align: center;
  font-size: 30px;
  line-height: 30px;
  color: #73B8B9;
}

.contact-line__label,
.contact-line__number {
  font-weight: bold;
}