/*
Theme Name: Hampshire Clinic
Theme URI: https://hampshireclinic.com/
Author: Hampshire Clinic website team
Description: Custom theme for the Hampshire Clinic landing site — hero, concerns, treatments,
             doctor, awards, approach, reviews, clinic photos, two branches and the booking
             request dialog. Content is managed from the WordPress dashboard; the design is
             reproduced 1:1 from the approved build.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hampshire
Tags: custom-theme, custom-menu, featured-images, translation-ready
*/

/*
 * All presentation for the approved design lives in assets/css/main.css, so the
 * design stays byte-identical to the signed-off build. This file is loaded after
 * it and holds only additions that are not part of that build — currently the
 * booking dialog's optional field types (preferred date, time and message).
 */

/* ---------- Booking dialog: field types added from Booking Requests → Settings ---------- */
.field textarea{
  width:100%; min-height:96px; padding:11px 13px;
  font:400 15px var(--sans); color:var(--ink); line-height:1.45;
  background:#fff; border:1px solid #e3dbd1; border-radius:8px; resize:vertical;
}
.field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(168,140,100,.13); }
.field.has-error textarea{ border-color:#cf8b82; }
.field input[type="date"],.field input[type="time"]{ -webkit-appearance:auto; appearance:auto; padding-right:13px; }
.field input[type="date"]::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; }

/* ---------- Branch card contact line ---------- */
/* The branch phone numbers sit under the address as one quiet line, so the action row
   stays exactly the two links the approved design has. */
.location-contact .item{ display:block; white-space:nowrap; }
.location-contact a{ color:var(--gold-dark); text-decoration:none; border-bottom:1px solid rgba(168,140,100,.35); }
.location-contact a:hover{ color:var(--gold); border-bottom-color:var(--gold); }

/* ---------- Footer: even columns ---------- */
/* The approved stylesheet sizes each footer column to its content, which leaves the blocks
   ragged. The contact band now takes its own row and lays out as an even grid, so all four
   columns are the same width with identical gaps and nothing wraps mid-number. The brand sits
   above it and the socials below, as in the approved layout. */
.site-footer .footer-inner{ row-gap:30px; }
.site-footer .footer-contacts{
  flex:1 1 100%;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:22px 34px;
}
.site-footer .footer-bottom{ padding-top:18px; }

/* ---------- Booking dialog: fixed header, scrolling form, fixed footer bar ---------- */
/* The dialog is a column with three parts: the header and the footer bar stay put, and only
   the form between them scrolls. The scrollbar therefore runs beside the fields alone — never
   across the header or the button. Both fixed blocks carry the panel's background, so a field
   passing behind them cannot show through, and no side margins are used: those made the panel
   scroll sideways and clipped the text on a phone. */
.modal-panel{ display:flex; flex-direction:column; overflow:hidden; }
.modal-panel .modal-form-wrap{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.modal-panel #bookForm{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.modal-panel .form-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  /* Keeps the scrollbar away from the fields: the padding holds it off, and the negative
     margin cancels the padding so the fields keep the same width as the header text. */
  padding-right:14px; margin-right:-14px;
}
.modal-panel .modal-head{ flex:0 0 auto; padding-bottom:14px; margin-top:-10px; background:#fdfbf8; }
/* The browser's own <h2> margin was pushing the title ~25px further down. */
.modal-panel .modal-head h2{ margin-top:0; }
.modal-close-wrap{ position:static; height:0; }
.modal-panel .modal-close{ top:10px; right:10px; }
.modal-panel .modal-success{ flex:1 1 auto; min-height:0; overflow-y:auto; }

/* The form and the success panel are swapped with the `hidden` attribute. Any display rule
   here would beat it (author styles win over the browser's own), so honour it explicitly. */
.modal-panel [hidden]{ display:none !important; }

/* The same quiet gold bar the panel used to carry, now on the form area. */
.modal-panel .form-scroll::-webkit-scrollbar{ width:6px; }
.modal-panel .form-scroll::-webkit-scrollbar-track{ background:transparent; }
.modal-panel .form-scroll::-webkit-scrollbar-thumb{ background:rgba(168,140,100,.45); border-radius:99px; }
.modal-panel .form-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(168,140,100,.72); }
@supports not selector(::-webkit-scrollbar){
  .modal-panel .form-scroll{ scrollbar-width:thin; scrollbar-color:rgba(168,140,100,.55) transparent; }
}

/* ---------- Booking dialog: the note and the submit button ---------- */
/* The note and the button close the dialog beneath the scrolling form, always in reach. The
   negative bottom margin lifts the bar over the panel's own bottom padding, so the button
   sits its margin from the dialog's edge rather than that padding further up. */
.modal-panel .form-actions{
  display:flow-root; flex:0 0 auto;
  margin:16px 0 -30px; padding:14px 0 0;
  background:#fdfbf8; border-top:1px solid #efe7dd;
}
/* main.css gives the note a 16px top margin; inside this bar it is not wanted. */
.modal-panel .form-actions .form-note{ margin-top:0; }
.modal-panel .form-actions .btn{ margin-top:14px; margin-bottom:15px; }
/* On a phone the dialog is a taller sheet with its own padding (26px 20px 24px); the header
   already sits where the client wants it there, so only the header nudge is dropped. */
@media (max-width:720px){
  .modal-panel .modal-head{ margin-top:0; }
  .modal-panel .form-scroll{ padding-right:10px; margin-right:-10px; }
  .modal-panel .form-actions{ margin-bottom:-24px; }
}
.form-note a{ border-bottom:1px solid rgba(168,140,100,.55); text-decoration:none; }
.form-note a:hover,.form-note a:focus-visible{ border-bottom-color:currentColor; }
/* Shown above the patient reviews only when the clinic has entered a score and
   the listing it came from (Customize → 16. Search, sharing & ratings). */
.review-score{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 9px; margin:12px 0 0; font-size:.95rem; color:#5a5049; }
.review-score__stars{ color:#a88c64; font-size:1.05rem; line-height:1; letter-spacing:2px; }
.review-score__link{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(168,140,100,.45); }
.review-score__link:hover,.review-score__link:focus-visible{ color:#1f1b18; border-bottom-color:#1f1b18; }
.review-score__link strong{ font-weight:600; }
@media (max-width:720px){ .review-score{ font-size:.9rem; } }
/* The shared .logo-img rule sizes the header lockup at 70px (and 62/56px on smaller screens);
   in the footer the logo carries the whole brand block, so it is set a little larger there —
   the header is untouched. */
.site-footer .footer-brand .logo-img{ height:96px; }
@media (max-width:980px){ .site-footer .footer-brand .logo-img{ height:84px; } }
@media (max-width:720px){ .site-footer .footer-brand .logo-img{ height:76px; } }

/* ---------- Footer contact columns on phones ---------- */
/* The approved stylesheet wraps the footer columns but does not let them shrink, so on a
   phone the second branch column is clipped at the right edge (verified against the static
   build). Stacking them keeps every address and number readable. Desktop, tablet and the
   signed-off look are untouched, and removing this block restores the previous behaviour. */
@media (max-width:720px){
  /* flex-basis 100% keeps the block on its own row, below the logo; the selector matches the
     desktop rule's specificity so stacking wins on phones. */
  .site-footer .footer-contacts{ flex:1 1 100%; grid-template-columns:1fr; gap:26px; }
}