/*--------------------------------------------------------------
# Keys Master additions (loaded after style.css)
# Everything visual comes from the Bootslander template (style.css).
# This file only adds what the template does not have: the key drawings,
# a few accessibility fixes and the small pieces the template's pages lack.
--------------------------------------------------------------*/

/* ---- Accessibility ------------------------------------------------ */
:focus-visible {
  outline: 3px solid #1acc8d;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  background: #fff;
  color: #010483;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* ---- Header brand (was an <h1>; the hero owns the page h1 now) ---- */
#header .logo .site-name {
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#header .logo .site-name a,
#header .logo .site-name a:hover { color: #fff; text-decoration: none; }

/* ---- Hero ----------------------------------------------------------- */
/* the hero's blue overlay (#hero::before) must sit underneath the hero content, not on top of it */
#hero > .container { position: relative; z-index: 2; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
#hero .btn-get-started-outline { background: transparent; border: 2px solid rgba(255, 255, 255, 0.8); padding: 8px 28px; color: #fff; }
#hero .btn-get-started-outline:hover { background: #fff; color: #010483; }

/* ---- Green buttons -------------------------------------------------------
   The template's green pill buttons use white text (2.2:1 contrast, hard to read).
   Navy text on the same green is 8:1, so every green button on the site uses it. */
#hero .btn-get-started,
.btn-buy,
.pricing .btn-buy,
.contact .php-email-form button[type=submit],
#footer .footer-top .footer-newsletter form input[type=submit] { color: #010483; font-weight: 600; }
#hero .btn-get-started:hover,
.btn-buy:hover,
.pricing .btn-buy:hover,
.contact .php-email-form button[type=submit]:hover { color: #010483; background: #34e5a6; }

/* the template only defines .btn-buy inside the pricing section; the same button is used elsewhere too */
.btn-buy {
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 50px;
  background: #1acc8d;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  transition: 0.3s;
  text-decoration: none;
}

/* ---- High security boxes (template Pricing section) ---------------------- */
.pricing h3 a { color: inherit; }
.pricing h3 a:hover { color: #1acc8d; }
.pricing .row > [class*="col-"] > .box { height: 100%; display: flex; flex-direction: column; }
.pricing .row > [class*="col-"] > .box ul { flex: 1; }
/* the drawing of the key, shown without its text labels at this size */
.km-box-art { display: block; margin: 0 0 14px; }
.km-box-art .km-diagram-svg text,
.km-box-art .km-diagram-svg .dg-leader { display: none; }

/* ---- Key drawings (inline SVGs in Views/Keys) ------------------------------ */
.km-diagram { margin: 0; padding: 14px; background: #fff; border: 1px solid #e6e6f2; border-radius: 5px; }
.km-diagram figcaption { margin-top: 8px; text-align: center; font-size: 13px; color: #6b6b7d; }
.km-diagram-svg { display: block; width: 100%; height: auto; }

.dg-metal { fill: #d9dbe8; stroke: #010483; stroke-width: 2.5; stroke-linejoin: round; }
.dg-hole { fill: #fff; stroke: #010483; stroke-width: 2.5; }
.dg-soft { fill: #eef0ff; stroke: #010483; stroke-width: 2.5; }
.dg-case { fill: #f7f8ff; stroke: #010483; stroke-width: 3; }
.dg-plug { fill: #e6e8fb; stroke: #010483; stroke-width: 3; }
.dg-gate { fill: #fff; stroke: #010483; stroke-width: 2; }
.dg-accent { fill: #1acc8d; stroke: #0b8f63; stroke-width: 2; }
.dg-accent-line { fill: none; stroke: #1acc8d; stroke-width: 3; stroke-linecap: round; }
.dg-dash { stroke-dasharray: 7 6; }
.dg-dimples circle { fill: #b7bbd3; stroke: #010483; stroke-width: 1.5; }
.dg-dimples-in circle { fill: #7d82a3; }
.dg-scoop { fill: #fff; stroke: #010483; stroke-width: 2; }
.dg-track { fill: none; stroke: #7d82a3; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.dg-driver { fill: #c9cdf5; stroke: #010483; stroke-width: 2.5; }
.dg-keypin { fill: #ffe3a3; stroke: #010483; stroke-width: 2.5; }
.dg-springs path { fill: none; stroke: #010483; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dg-shear { stroke: #1acc8d; stroke-width: 3.5; stroke-dasharray: 9 6; }
.dg-shear-label { font: 700 13px "Poppins", sans-serif; fill: #0b7a57; }
.dg-text { font: 600 13px "Poppins", sans-serif; fill: #010483; }
.dg-muted { font: 500 12.5px "Open Sans", sans-serif; fill: #5b5f7a; }
.dg-chip { font: 700 11px "Poppins", sans-serif; fill: #010483; }
.dg-leader { stroke: #5b5f7a; stroke-width: 1.5; }
.dg-fob { fill: #3f43fd; stroke: #010483; stroke-width: 3; }
.dg-coil { fill: none; stroke: #fff; stroke-width: 3; }
.dg-wave { fill: none; stroke: #1acc8d; stroke-width: 4; stroke-linecap: round; }
.dg-led { fill: #1acc8d; stroke: #0b8f63; stroke-width: 2; }

@media (max-width: 575px) {
  /* the drawing shrinks with the screen, so give its labels a boost to stay readable on phones */
  .dg-text, .dg-shear-label { font-size: 15px; }
  .dg-muted { font-size: 14px; }
  .dg-chip { font-size: 13px; }
  .km-diagram { padding: 8px; }
}

/* ---- Template sections: small gaps ------------------------------------------ */
/* plain text links in the template sections: the template green is only 2.2:1 on white, this darker green is 5:1 */
.km-link { color: #0b7a57; font-weight: 600; }
.km-link:hover { color: #010483; }
/* the template's link green (#1acc8d) is only 2.2:1 on white */
.contact .info a { color: #0b7a57; font-weight: 600; }
.contact .info a:hover { color: #010483; }
.details .content img { border-radius: 5px; }
/* every home-page gallery tile the same shape, whatever the photo's own proportions */
.gallery .gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* the template's FAQ questions are links without a href; ours have one so keyboard users can reach them */
.faq .faq-list a { text-decoration: none; }

/* ---- Forms (template Contact section, now with server-side messages) --------- */
.contact .php-email-form .text-danger { display: block; margin-top: 4px; font-size: 13px; color: #c0182c !important; }
.contact .php-email-form .input-validation-error { border-color: #c0182c; }
.contact .php-email-form .validation-summary-errors { padding: 12px 16px; margin-bottom: 18px; background: #fdeced; border: 1px solid #f3b6bc; color: #c0182c; }
.contact .php-email-form .validation-summary-errors ul { margin: 0; padding-left: 18px; }
.km-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.km-counter { font-size: 13px; color: #6b6b7d; text-align: right; margin-top: 4px; }

/* ---- Footer: call-to-action (replaced the non-working newsletter box) ----------- */
#footer .footer-cta p { font-size: 14px; line-height: 22px; color: rgba(255, 255, 255, 0.85); }
#footer .footer-top .footer-links ul a { line-height: 1.3; }

/* ---- Staff / admin pages ------------------------------------------------------------ */
.km-admin { padding: 110px 0 60px; min-height: 60vh; }
.km-admin h2 { font: 700 26px "Poppins", sans-serif; color: #010483; margin-bottom: 18px; }
.km-logout { background: none; border: 0; padding: 10px 0 10px 30px; font: 500 15px "Poppins", sans-serif; color: rgba(255, 255, 255, 0.7); cursor: pointer; transition: 0.3s; }
.km-logout:hover { color: #fff; }
.navbar-mobile .km-logout { color: #010483; padding: 10px 20px; }
.navbar-mobile .km-logout:hover { color: #0b7a57; }