/* Tiny Valley Tots — Shared Card Styles */

.tvt-form-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  overflow:hidden;
  margin:0 auto 18px;
  border:1px solid rgba(0,0,0,.06);
}

.tvt-form-card .hd{
  font-family:"Patrick Hand SC", cursive;
  font-size:1.5rem;
  padding:14px 16px;
  border-bottom:1px solid #f0f0f0;
  background:#fffdf3; /* TVT paper tone */
}

.tvt-form-card .bd{
  padding:16px;
}

/* Match booking card narrow width */
.tvt-form-card.is-narrow{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
/* ============================================================
   Card colour variants — match menu/button colours
   Uses the same tokens defined in buttons.css (:root --tvt-*)
   ============================================================ */

/* Helper: light tint of a brand colour (modern browsers) */
@supports (background: color-mix(in srgb, white 85%, black)) {
  .tvt-card-tint-yellow { background: color-mix(in srgb, white 85%, var(--tvt-yellow)); }
  .tvt-card-tint-green  { background: color-mix(in srgb, white 88%, var(--tvt-green)); }
  .tvt-card-tint-blue   { background: color-mix(in srgb, white 88%, var(--tvt-blue)); }
  .tvt-card-tint-orange { background: color-mix(in srgb, white 88%, var(--tvt-orange)); }
}

/* Fallback tints for older browsers (approximate) */
@supports not (background: color-mix(in srgb, white 85%, black)) {
  .tvt-card-tint-yellow { background:#FFF8D7; }  /* ~ yellow tint */
  .tvt-card-tint-green  { background:#E9F8EF; }  /* ~ green tint  */
  .tvt-card-tint-blue   { background:#E8F7FE; }  /* ~ blue tint   */
  .tvt-card-tint-orange { background:#FFF0E0; }  /* ~ orange tint */
}

/* Modifiers you can add to any .tvt-form-card */
.tvt-form-card--yellow { border-color: var(--tvt-yellow); }
.tvt-form-card--green  { border-color: var(--tvt-green);  }
.tvt-form-card--blue   { border-color: var(--tvt-blue);   }
.tvt-form-card--orange { border-color: var(--tvt-orange); }

/* Make the card header pick up a soft tint, but keep body white for readability */
.tvt-form-card--yellow .hd { border-bottom-color: var(--tvt-yellow); }
.tvt-form-card--green  .hd { border-bottom-color: var(--tvt-green);  }
.tvt-form-card--blue   .hd { border-bottom-color: var(--tvt-blue);   }
.tvt-form-card--orange .hd { border-bottom-color: var(--tvt-orange); }

.tvt-form-card--yellow .hd { background: var(--tvt-paper-yellow, transparent); }
.tvt-form-card--green  .hd { background: var(--tvt-paper-green,  transparent); }
.tvt-form-card--blue   .hd { background: var(--tvt-paper-blue,   transparent); }
.tvt-form-card--orange .hd { background: var(--tvt-paper-orange, transparent); }

/* Use the modern tint when available */
@supports (background: color-mix(in srgb, white 85%, black)) {
  .tvt-form-card--yellow .hd { background: color-mix(in srgb, white 85%, var(--tvt-yellow)); }
  .tvt-form-card--green  .hd { background: color-mix(in srgb, white 88%, var(--tvt-green));  }
  .tvt-form-card--blue   .hd { background: color-mix(in srgb, white 88%, var(--tvt-blue));   }
  .tvt-form-card--orange .hd { background: color-mix(in srgb, white 88%, var(--tvt-orange)); }
}

/* Optional: page-level defaults — colour all cards on a page by its nav tag
   (only applies when a card DOESN'T already have a specific --modifier) */
body[data-nav="staff"]     .tvt-form-card:not([class*="tvt-form-card--"]) { border-color: var(--tvt-yellow); }
body[data-nav="sessions"]  .tvt-form-card:not([class*="tvt-form-card--"]) { border-color: var(--tvt-green);  }
body[data-nav="media"]     .tvt-form-card:not([class*="tvt-form-card--"]) { border-color: var(--tvt-blue);   }
body[data-nav="customers"] .tvt-form-card:not([class*="tvt-form-card--"]) { border-color: var(--tvt-orange); }

body[data-nav="staff"]     .tvt-form-card:not([class*="tvt-form-card--"]) > .hd { background: color-mix(in srgb, white 85%, var(--tvt-yellow)); }
body[data-nav="sessions"]  .tvt-form-card:not([class*="tvt-form-card--"]) > .hd { background: color-mix(in srgb, white 88%, var(--tvt-green));  }
body[data-nav="media"]     .tvt-form-card:not([class*="tvt-form-card--"]) > .hd { background: color-mix(in srgb, white 88%, var(--tvt-blue));   }
body[data-nav="customers"] .tvt-form-card:not([class*="tvt-form-card--"]) > .hd { background: color-mix(in srgb, white 88%, var(--tvt-orange)); }

/* Fallback for the page-level defaults if color-mix isn't supported */
@supports not (background: color-mix(in srgb, white 85%, black)) {
  body[data-nav="staff"]     .tvt-form-card:not([class*="tvt-form-card--"]) > .hd { background:#FFF8D7; }
  body[data-nav="sessions"]  .tvt-form-card:not([class*="tvt-form-card--"]) > .hd { background:#E9F8EF; }
  body[data-nav="media"]     .tvt-form-card:not([class*="tvt-form-card--"]) > .hd { background:#E8F7FE; }
  body[data-nav="customers"] .tvt-form-card:not([class*="tvt-form-card--"]) > .hd { background:#FFF0E0; }
}
/* Clamp any session image site-wide (public lists) */
.session-card img,
.card-session img,
.card-list .session img {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
  margin: 0 auto 8px;
  border-radius: 12px;
}
/* Booking page cards: match the green booking button */
.tvt-form-card--booking { border-color: var(--tvt-green); }
.tvt-form-card--booking .hd {
  border-bottom-color: var(--tvt-green);
  background: color-mix(in srgb, white 88%, var(--tvt-green));
}
@supports not (background: color-mix(in srgb, white 85%, black)) {
  .tvt-form-card--booking .hd { background:#E9F8EF; } /* fallback tint */
}