/* ==========================================================================
   Contact page styles (reuthtemp) — loaded ONLY on Template Contact.
   Self-contained: does not require Bootstrap CSS to be present on the site.
   Everything is scoped to .clinic-item / .content-contact so it cannot
   leak into the header/footer/menu of the new theme.

   Written desktop-first: base rules are the desktop appearance, and
   @media (max-width: ...) blocks override for smaller screens.
   ========================================================================== */
/* Optional: only keep if these fonts are not already loaded by the new theme.
   Update the src paths to match where you actually place the .woff files
   (e.g. get_stylesheet_directory_uri() . '/fonts/...'). Delete this block
   entirely if reuthtemp already defines these font-families. */
/*@font-face { font-family: 'NarkisBlockBold';    src: url('./fonts/NarkisBlockMFBold.woff');    font-weight: bold; }
@font-face { font-family: 'NarkisBlockRegular'; src: url('./fonts/NarkisBlockMFRegular.woff'); font-weight: normal; }
@font-face { font-family: 'SusitaBold';         src: url('./fonts/Susita_OEBold.woff'); }*/
/* ---------- Minimal Bootstrap-like grid & utilities (scoped) ---------- */
.clinic-header.container,
.content-contact.container {
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
  padding: 5rem 15px;
  box-sizing: border-box;
  width: 100%;
}
@media (max-width: 767px) {
  .clinic-header.container,
  .content-contact.container { padding: 4rem 15px; }
}
.content-contact .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.content-contact .row > [class*="col-"] {
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
  width: 100%;
}
/* Desktop-first: base = the actual desktop split (66/33), and the two
   specific blocks that use it collapse to full width under 767px —
   same mobile breakpoint used everywhere else in this file. */
.content-contact .col-sm-8.col-12.pt-5 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.content-contact .col-sm-4.col-12.widget { flex: 0 0 33.3333%; max-width: 33.3333%; }
@media (max-width: 767px) {
  .content-contact .col-sm-8.col-12.pt-5,
  .content-contact .col-sm-4.col-12.widget { flex: 0 0 100%; max-width: 100%; }
}
/* utility spacers actually used in the template */
.content-contact .pt-5 { padding-top: 3rem !important; }
.content-contact .pt-4 { padding-top: 1.5rem !important; }
.content-contact .pt-3 { padding-top: 1rem !important; }
.content-contact .pb-4 { padding-bottom: 1.5rem !important; }
.content-contact .pl-5 { padding-left: 3rem !important; }
.content-contact .mb-3 { margin-bottom: 1rem !important; }
.content-contact .mt-5 { margin-top: 3rem !important; }
.content-contact .float-right { float: right !important; }
html[dir="rtl"] .content-contact .float-right { float: left !important; }
/* nav-pills / tabs (visual only — switching handled by contact-page.js) */
.content-contact .nav-pills {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.content-contact .nav-pills .nav-item { flex: 1 1 auto; text-align: center; }
.content-contact .nav-pills .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}
.content-contact .tab-pane { display: none; }
.content-contact .tab-pane.active,
.content-contact .tab-pane.show { display: block; }
/* ---------- Banner (clinic-item) ---------- */
.content-contact .tab-pane > .col-12{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.clinic-item {
  width: 100%;
  background-size: cover;
  background-position: center center;
  height: 575px;
}
.clinic-item .banner-content { position: relative; }
.clinic-item .beadcrump { padding-top: 2rem; margin-right: 0 !important; }
.clinic-item h1.title-c {
  font-weight: bold;
  font-size: 4rem;
  color: #003E52;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}
@media (max-width: 767px) {
  .clinic-item { height: calc(50vh - 112px); }
  .clinic-item h1.title-c { font-size: 2.25rem !important; }
}
/* ---------- Content / forms (from _contact.scss) ---------- */
/* Screen-reader-only text (the <p class="sr-only"> field labels CF7 renders
   before every input). Without this rule that text shows up as a visible
   line above every field — this was the biggest source of "looks messy". */
.content-contact .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.content-contact .callreuth { text-align: center; padding-bottom: 1rem; font-size: 18px; }
.content-contact form.wpcf7-form { max-width: 700px; margin-left: auto; margin-right: auto; }
.content-contact select,
.content-contact input[type="text"] { width: 100%; }
.content-contact .nav-pills .nav-link {
  color: #003E52;
  background-color: #eaeceb;
  margin-right: 1rem;
  padding: 1rem 2.5rem 1rem 1rem;
  font-weight: bold;
  font-size: 1.25rem;
  position: relative;
}
.content-contact .nav-pills .nav-link.active {
  color: #fff;
  background-color: #003E52;
}
.content-contact .nav-pills .nav-link:after {
  content: "\f105";
  font-family: FontAwesome;
  position: absolute;
  right: 15px;
  font-size: 1.375rem;
}
html[dir="rtl"] .content-contact .nav-pills .nav-link {
  padding: 1rem 1rem 1rem 2.5rem;
}
html[dir="rtl"] .content-contact .nav-pills .nav-link:after {
  content: "\f104";
  left: 15px;
  right: auto;
}
.content-contact h3.title-contact {
  color: #003E52;
  font-weight: bold;
  text-align: center;
  padding-bottom: 1rem;
  padding-top: 2rem;
}
/* Field rows: flex + gap fills the row edge-to-edge with an even, modest
   gap between fields, instead of the old percentage-width + justify-center
   trick (which is what produced the big uneven gaps). */
.content-contact .content-name,
.content-contact .content-mail-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}
.content-contact .content-name > span,
.content-contact .content-mail-sub > span {
  flex: 1 1 220px; /* grow/shrink evenly, wrap to its own line under ~220px */
  padding: 0;
}
/* CF7 wraps every field in <label>/<span class="wpcf7-form-control-wrap">,
   both of which are inline by default — that's why width:100% on the input
   itself was being ignored (its containing box never actually spanned the
   column). Forcing these wrappers to display:block fixes that. */
.content-contact .content-name label,
.content-contact .content-mail-sub label,
.content-contact .content-name .wpcf7-form-control-wrap,
.content-contact .content-mail-sub .wpcf7-form-control-wrap,
.content-contact .textarea label,
.content-contact .textarea .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  position: relative; /* contains the absolutely-positioned .sr-only text */
}
.content-contact .textarea { padding: 0; }
.content-contact .submit-button { display: flex; justify-content: center; padding-top: 1rem; }
/* One unified rule for every field type so size/height/color/font all match,
   instead of separate wpcf7-text / wpcf7-select / wpcf7-textarea rules that
   had drifted out of sync with each other. */
.content-contact input.wpcf7-form-control,
.content-contact select.wpcf7-form-control,
.content-contact textarea.wpcf7-form-control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  background-color: #f5f6f7;
  border: none;
  color: #464646;
  font-size: 1.25rem;
  font-family: inherit;
}
.content-contact input.wpcf7-form-control::placeholder ,
.content-contact select.wpcf7-form-control::placeholder ,
.content-contact textarea.wpcf7-form-control::placeholder{
  color: #464646;
}
.content-contact textarea.wpcf7-form-control {
  height: 7rem;
  padding-top: 0.75rem;
  resize: vertical;
}
.content-contact .submit-button input.wpcf7-form-control.wpcf7-submit {
  background-color: #003E52;
  padding: 15px;
  min-width: 210px;
  color: white;
  border: none;
  font-size: 1.375rem;
  line-height: 0.8;
  cursor: pointer;
}
.content-contact .submit-button input.wpcf7-form-control.wpcf7-submit:hover {
  background-color: #1B70EE;
}
.content-contact .details-contact { display: none; }
/* ---------- Side widget ---------- */
.content-contact .widget .bg_img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.content-contact .widget .bg_img .text_donnation {
  padding: 9rem 3rem 0;
  font-weight: bold;
  color: #5679b5;
  font-size: 1.875rem;
}
.content-contact .widget .bg_img .b-text { padding: 0 3rem 3rem; }
.content-contact .widget .rehab-widg {
  background-color: #eaeceb;
  color: #5679b5;
  font-size: 1.875rem;
  font-weight: bold;
  padding: 1rem 3rem;
}
.content-contact .widget .rehab-widg a { color: #5679b5; }
.content-contact .widget .rehab-widg .b-text { color: #000; font-weight: normal; font-size: 1.25rem; }
.content-contact .widget .text_donnation:after {
  content: "\f105";
  font-family: FontAwesome;
  color: #ff4788;
  font-size: 2.25rem;
  float: right;
}
html[dir="rtl"] .content-contact .widget .text_donnation:after {
  content: "\f104";
  float: left;
}
.content-contact .widget .rehab-widg h4,
.content-contact .widget .bg_img .text_donnation {
  font-size: 1.6rem;
}
@media (max-width: 767px) {
  .content-contact .nav-pills .nav-item { min-width: 33%; margin-bottom: 1rem; }
  .content-contact .nav-pills .nav-link { font-size: 1rem;margin-bottom: 10px; }
  .content-contact h3.title-contact { padding-top: 1rem; }
  .content-contact .widget .bg_img .text_donnation { padding: 6rem 1rem 0 !important; }
  .content-contact .widget .bg_img .b-text { padding: 0 1rem 3rem !important; }
  .content-contact .widget .rehab-widg { padding: 1rem !important; font-size: 1.25rem; }
}