/* ==========================================================================
   MP Heart Clinic - UI / accessibility enhancements
   Loaded AFTER styleae52.css. Safe to delete this file to revert to the
   original look (the pages keep working).
   Brand colours: blue #0554a6, deep blue #0153b8, red #e91d25
   ========================================================================== */

:root {
  --mphc-blue: #0554a6;
  --mphc-blue-dark: #043f7c;
  --mphc-red: #e91d25;
  --mphc-text: #2b3440;
}

/* ---- Base ---------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* The page <h1> is real, keyword-bearing text for search engines and screen
   readers, but visually hidden so the original design is unchanged.
   (The old rule used display:none, which search engines ignore.) */
h1 {
  display: block !important;
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Readability --------------------------------------------------------- */
._content p,
._content li,
.innercontent p,
.innercontent li {
  line-height: 1.7;
}
._content img,
.innercontent img {
  max-width: 100%;
  height: auto;
}
iframe {
  max-width: 100%;
}
video {
  max-width: 100%;
  height: auto;
}

/* ---- Links & keyboard focus --------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
#mobilemenu:focus-visible {
  outline: 3px solid #f5a623;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Menu ---------------------------------------------------------------- */
#menu a {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
#menu a:hover,
#menu a.active {
  text-shadow: none;
}

/* ---- Forms --------------------------------------------------------------- */
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="date"],
.form textarea,
.form select {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 15px;
  color: var(--mphc-blue);
  margin-bottom: 14px;
  border: 1px solid var(--mphc-blue);
  border-radius: 4px;
  padding: 8px 10px;
  display: block;
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"] {
  height: 40px;
}
.form textarea {
  height: 186px;
  resize: vertical;
}
.form input::placeholder,
.form textarea::placeholder {
  color: #6b87a8;
  opacity: 1;
}
.form input:focus,
.form textarea:focus,
.form select:focus {
  border-color: var(--mphc-blue-dark);
  box-shadow: 0 0 0 3px rgba(5, 84, 166, 0.18);
  outline: none;
}
.form input:invalid:not(:placeholder-shown):not(:focus),
.form textarea:invalid:not(:placeholder-shown):not(:focus) {
  border-color: #d50000;
}

/* Submit buttons are always active (browser validation handles required
   fields) - previously they stayed grey until a script enabled them. */
.form #sendform,
.form #sendcontactform,
.form #subscribe,
input#sendcontactform[type="submit"] {
  background-color: var(--mphc-blue) !important;
  color: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(5, 84, 166, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.form #sendform:hover,
.form #sendcontactform:hover,
.form #subscribe:hover,
input#sendcontactform[type="submit"]:hover {
  background-color: var(--mphc-red) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(233, 29, 37, 0.3);
}

/* Spam-trap field: invisible to people, tempting to bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ---- Social icons & footer ---------------------------------------------- */
.titleandbuttons a img {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.titleandbuttons a:hover img,
.titleandbuttons a:focus-visible img {
  transform: translateY(-3px) scale(1.08);
}
#footer a.mitem,
#footer a.simple {
  transition: color 0.2s ease, padding-left 0.2s ease;
}
#footer a.mitem:hover {
  color: var(--mphc-red);
  padding-left: 4px;
}

/* ---- Call button -------------------------------------------------------- */
#instantcall {
  display: inline-block;
  text-decoration: none;
}

/* ---- Touch devices / small screens -------------------------------------- */
@media (max-width: 800px) {
  #menu a,
  #footer a.mitem {
    min-height: 44px;
  }
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="tel"],
  .form textarea,
  .form select {
    font-size: 16px; /* stops iOS zooming into focused fields */
  }
  ._content p,
  .innercontent p {
    font-size: 16px;
  }
}

/* ---- Respect users who prefer less motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}