/* ==========================================================================
   RMPT public UI layer
   --------------------------------------------------------------------------
   Design tokens + a conservative polish of shared components. Loaded AFTER
   bootstrap/style/media/webslidemenu (see website/template/header.php) so it
   wins by source order, using the same deferred-preload pattern as style.css.

   Ground rules (see CLAUDE.md / perf/RESULTS.md):
     - no geometry changes to above-the-fold, image-bearing or carousel markup,
       so CLS stays 0 and the LCP image is untouched
     - no new fonts, libraries or icons (Font Awesome subset is unchanged)
     - purely additive: removing the <link> returns the site to its previous look

   The palette matches the admin design system (admin-assets/build/css/rmpt-admin.css).
   --rm-primary is the brand teal darkened just enough for 4.5:1 text/button
   contrast; --rm-brand keeps the original logo teal for decoration. If the
   darker teal is not signed off (perf/RESULTS.md, "Colour contrast"), set
   --rm-primary back to #00a79d here and nothing else needs touching.
   ========================================================================== */

:root {
  --rm-brand: #00a79d;
  --rm-primary: #00857d;
  --rm-primary-hover: #00746d;
  --rm-primary-soft: #e3f5f3;
  --rm-accent: #f45d42;
  --rm-accent-strong: #d4402a;

  --rm-text: #1e293b;
  --rm-text-muted: #475569;
  --rm-border: #e2e8f0;
  --rm-border-strong: #cbd5e1;
  --rm-surface: #ffffff;
  --rm-surface-2: #f8fafc;
  --rm-dark: #0f2433;

  --rm-r-sm: 8px;
  --rm-r: 12px;
  --rm-r-lg: 16px;
  --rm-shadow-sm: 0 1px 2px rgba(15, 36, 51, .06), 0 1px 3px rgba(15, 36, 51, .08);
  --rm-shadow: 0 8px 24px rgba(15, 36, 51, .10);
  --rm-shadow-lg: 0 24px 56px rgba(15, 36, 51, .22);
  --rm-ring: 0 0 0 3px rgba(0, 133, 125, .28);
  --rm-ease: .18s ease;
}

/* ---------- base ---------------------------------------------------------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* style.css removes every outline (`label,input,select,textarea,button{outline:none}`),
   which leaves keyboard users with no focus indicator. Restore one, for keyboard focus only. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, summary:focus-visible {
  outline: 3px solid var(--rm-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.wsmenu a:focus-visible, footer a:focus-visible, .cta a:focus-visible, .call-action:focus-visible, .call-action1:focus-visible {
  outline-color: #fff; box-shadow: 0 0 0 5px var(--rm-primary);
}
.form-control:focus-visible, .common-btn:focus-visible { outline-offset: 1px; }

/* ---------- headings ------------------------------------------------------ */
.heading h1, .heading h2, .brand-device .heading h1 { font-weight: 700; letter-spacing: -.015em; color: var(--rm-text); }

/* ---------- buttons ------------------------------------------------------- */
.common-btn, input.common-btn, button.common-btn {
  background-color: var(--rm-primary);
  box-shadow: 0 2px 6px rgba(15, 36, 51, .18);
  transition: background-color var(--rm-ease), box-shadow var(--rm-ease), transform var(--rm-ease);
  cursor: pointer;
}
.common-btn:hover, input.common-btn:hover, button.common-btn:hover {
  background-color: var(--rm-primary-hover); color: #fff;
  border-radius: 20px;                              /* style.css flips to 3px on hover, which makes the button jump shape */
  box-shadow: 0 6px 14px rgba(15, 36, 51, .22); transform: translateY(-1px);
}
.common-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(15, 36, 51, .18); }
.cta .common-btn { background-color: #000; }
.cta .common-btn:hover { background-color: #1f2937; }
.cn-bottom .common-btn, .revoke-cookiess .common-btn { background-color: var(--rm-primary); box-shadow: none; transform: none; }

/* Bootstrap's default blue/grey buttons (call-back modal, search, forms) -> brand */
.btn { font-weight: 700; border-radius: var(--rm-r-sm); transition: background-color var(--rm-ease), border-color var(--rm-ease), box-shadow var(--rm-ease); }
.btn-primary { background-color: var(--rm-primary); border-color: var(--rm-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--rm-primary-hover); border-color: var(--rm-primary-hover); color: #fff;
}
.btn-primary:focus, .btn-primary.focus { box-shadow: var(--rm-ring); }
.btn-secondary { background-color: #334155; border-color: #334155; color: #fff; }
.btn-secondary:hover { background-color: #1e293b; border-color: #1e293b; }
.btn.disabled, .btn:disabled, .common-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- forms --------------------------------------------------------- */
.form-control,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"],
input[type="search"], input[type="date"], input[type="url"], select, textarea {
  font-family: 'PT Sans', system-ui, sans-serif;
  color: var(--rm-text);
  border-radius: var(--rm-r-sm);
  transition: border-color var(--rm-ease), box-shadow var(--rm-ease), background-color var(--rm-ease);
}
.form-control { border: 1px solid var(--rm-border-strong); background-color: var(--rm-surface); }
.form-control::placeholder, textarea::placeholder, input::placeholder { color: #64748b; opacity: 1; }
.form-control:hover { border-color: #94a3b8; }
.form-control:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="number"]:focus, input[type="search"]:focus, select:focus, textarea:focus {
  border-color: var(--rm-primary); box-shadow: var(--rm-ring); background-color: #fff;
}
/* business / student / contact / quote forms: .req-field controls came as #f7f7f7 on #dcdbdb */
.req-field input[type=text], .req-field input[type=tel], .req-field input[type=email], .req-field input[type=password],
.req-field input[type=number], .req-field input[type=date], .req-field input[type=search], .req-field select, .req-field textarea {
  background-color: var(--rm-surface); border: 1px solid var(--rm-border-strong); border-radius: var(--rm-r-sm);
}
.req-field input:focus, .req-field select:focus, .req-field textarea:focus { border-color: var(--rm-primary); box-shadow: var(--rm-ring); }
.req-field label { color: var(--rm-text); }

/* contact-us form: faint #eee borders; the two read-only captcha numbers keep their borderless look */
#contact-submit-form input[type=text]:not([readonly]), #contact-submit-form input[type=email], #contact-submit-form input[type=tel], #contact-submit-form textarea {
  border: 1px solid var(--rm-border-strong); background-color: var(--rm-surface); border-radius: var(--rm-r-sm);
}
#contact-submit-form input:focus, #contact-submit-form textarea:focus { border-color: var(--rm-primary); box-shadow: var(--rm-ring); }
#contact-submit-form .error { color: #c62828; font-size: 13px; }

/* business-services-registration / business forms (style.css:1106-1108: #f7f7f7 fill; the select's arrow image is !important, so only its colour is changed) */
.business-form .form-field input[type=text], .business-form .form-field input[type=tel], .business-form .form-field input[type=email],
.business-form .form-field input[type="date"], .business-form .form-field select, .business-form .form-field textarea {
  background-color: var(--rm-surface); border: 1px solid var(--rm-border-strong); border-radius: var(--rm-r-sm);
}
.business-form .form-field select { background-color: var(--rm-surface) !important; }
.business-form .form-field input:focus, .business-form .form-field select:focus, .business-form .form-field textarea:focus {
  border-color: var(--rm-primary); box-shadow: var(--rm-ring);
}

/* booking / quote steps: style.css gives these a hard #191919 border on a #eee fill */
.quote-steps input[type=text], .quote-steps input[type=tel], .quote-steps input[type=email], .quote-steps input[type=password],
.quote-steps input[type=search], .quote-steps input[type="date"], .quote-steps select, .quote-steps textarea {
  border: 1px solid var(--rm-border-strong); background-color: var(--rm-surface); border-radius: var(--rm-r-sm);
}
.quote-steps input[type=text]:focus, .quote-steps input[type=tel]:focus, .quote-steps input[type=email]:focus,
.quote-steps input[type="date"]:focus, .quote-steps select:focus, .quote-steps textarea:focus {
  border-color: var(--rm-primary); box-shadow: var(--rm-ring);
}
.quote-steps { border-left-color: var(--rm-brand); }

/* native validation feedback, shown only after the user has interacted */
.form-control:user-invalid, input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: #c62828; box-shadow: 0 0 0 3px rgba(198, 40, 40, .15); }
#form-msg .alert, .alert { border-radius: var(--rm-r-sm); }

/* ---------- modals (call-back, quote, store picker, student offer) ------- */
.modal-content { border: 0; border-radius: var(--rm-r-lg); box-shadow: var(--rm-shadow-lg); overflow: hidden; }
.modal-header { align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--rm-border); background: var(--rm-surface); }
.modal-title { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 20px; color: var(--rm-text); }
.modal-body { padding-top: 20px; }
.modal-backdrop.show { opacity: .55; }
/* style.css pins `.close` to the corner as a flat square; make it a round, labelled-by-icon control */
button.close, .modal-header button.close {
  width: 36px; height: 36px; top: 12px; right: 12px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; opacity: 1; border-radius: 50%;
  background: var(--rm-surface-2); color: var(--rm-text) !important; border: 1px solid var(--rm-border);
  transition: background-color var(--rm-ease), color var(--rm-ease);
}
button.close:hover, button.close:focus, .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
  background: var(--rm-accent-strong); color: #fff !important; border-color: var(--rm-accent-strong);
}
#offer-number .close { border-radius: 0; background: #000; color: #fff !important; border: 0; }

/* ---------- cards --------------------------------------------------------- */
.gadget_card, .blog-listing .grid-list-content, .location .card {
  transition: transform var(--rm-ease), box-shadow var(--rm-ease), border-color var(--rm-ease);
}
.gadget_card:hover, .blog-listing .grid-list-content:hover { transform: translateY(-3px); box-shadow: var(--rm-shadow); }
.blog-listing .grid-list-content { border-radius: var(--rm-r); border-color: var(--rm-border); overflow: hidden; background: var(--rm-surface); }
.gadget_btn { background-color: var(--rm-primary); transition: background-color var(--rm-ease); }
.gadget_card:hover .gadget_btn, .gadget_btn:hover { background-color: var(--rm-primary-hover); }

/* mega-menu icons now carry intrinsic width/height attributes (CLS); keep them at natural size, never stretched */
.link-list li a img { width: auto; height: auto; }

/* ---------- breadcrumb ---------------------------------------------------- */
.site-breadcrumb { background: var(--rm-surface-2); border-bottom-color: var(--rm-border); }
.site-breadcrumb ol li a { color: var(--rm-primary); }
.site-breadcrumb ol li a:hover { color: var(--rm-accent-strong); text-decoration: underline; }

/* ---------- navigation + floating actions -------------------------------- */
.wsmenu > .wsmenu-list > li > a { transition: color var(--rm-ease); }
.wsmenu > .wsmenu-list > li > a:hover { color: var(--rm-primary); }
.call-action, .call-action1, .whatsapp_float { transition: transform var(--rm-ease), box-shadow var(--rm-ease), background-color var(--rm-ease); }
.call-action:hover, .call-action1:hover { transform: scale(1.08); }
.call-action { background: var(--rm-primary); }
.scrollToTop { transition: transform var(--rm-ease), opacity var(--rm-ease); }
.scrollToTop:hover { transform: translateY(-2px); }

/* ---------- footer -------------------------------------------------------- */
footer.footer a { transition: color var(--rm-ease), opacity var(--rm-ease); }
footer.footer a:hover { opacity: .85; text-decoration: underline; text-underline-offset: 3px; }
footer .foot-box ul li button.footer-linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- content tables from the CMS ---------------------------------- */
.blog_detail_content table, .repair-intro table, .main-services table {
  max-width: 100%; border-collapse: collapse; border: 1px solid var(--rm-border);
}
.blog_detail_content table th, .blog_detail_content table td, .repair-intro table th, .repair-intro table td {
  padding: 10px 12px; border: 1px solid var(--rm-border);
}
.blog_detail_content table th, .repair-intro table th { background: var(--rm-surface-2); text-align: left; }
.blog_detail_content img { max-width: 100%; height: auto; border-radius: var(--rm-r-sm); }

/* ---------- touch targets + small screens -------------------------------- */
@media (max-width: 767px) {
  .common-btn, input.common-btn, button.common-btn { min-height: 44px; }
  /* the compact header pills and the cookie bar keep their own (smaller) sizing */
  .req-btn a.common-btn, .shop-btn a.common-btn, .cn-bottom .common-btn, .revoke-cookiess .common-btn { min-height: 0; }
  /* cookie bar: was ~17% of a phone screen; tighten without changing its content or controls */
  #cookie-notice { font-size: 12px; line-height: 18px; }
  .cookie-notice-container { padding: 8px 10px; }
  .cn-bottom .common-btn { padding: 4px 10px; margin: 3px; font-size: 11px; }
  .form-control, input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="password"], input[type="search"], input[type="date"], select, textarea { font-size: 16px; }   /* stops iOS zooming into focused fields */
  .modal-dialog { margin: 12px; }
  .heading h1, .heading h2 { letter-spacing: -.01em; }
}

@media (hover: none) {
  .gadget_card:hover, .blog-listing .grid-list-content:hover, .common-btn:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}