/* Josh Car Key Boston - joshcarkeyboston.com
   Stylesheet for all pages. Edit here once and every page updates. */

:root{
    --blue:#2b4a7d;
    --blue-dark:#1d3557;
    --blue-text:#22406e;
    --panel:#241a17;
    --gray-band:#dcdcdc;
    --list-gray:#ebebeb;
  }

  *{box-sizing:border-box;}

  html,body{margin:0;padding:0;}

  body{
    font-family:Verdana,Geneva,Arial,sans-serif;
    background:#eef0f2;
    color:#222;
  }

  /* thin blue rule across the very top */
  .topbar{height:5px;background:var(--blue);}

  .wrap{max-width:1000px;margin:0 auto;padding:0 20px;}

  /* ---------- header ---------- */
  .masthead{background:#fff;}
  .masthead .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-top:22px;
    padding-bottom:22px;
  }
  .site-name{
    margin:0;
    font-size:30px;
    font-weight:bold;
    color:var(--blue-text);
    letter-spacing:-0.3px;
  }
  .site-name a{color:inherit;text-decoration:none;}
  .site-name .brand{
    display:flex;
    align-items:center;
    gap:16px;
    line-height:normal;
  }
  .phone{
    font-family:Georgia,"Times New Roman",serif;
    font-size:30px;
    font-weight:bold;
    color:var(--blue-text);
    white-space:nowrap;
    text-decoration:none;
  }

  /* ---------- nav ---------- */
  .navband{background:var(--gray-band);padding-top:18px;}
  .nav{
    background:var(--blue);
    display:flex;
    list-style:none;
    margin:0;
    padding:0;
  }
  .nav li + li{border-left:1px solid #fff;}
  .nav a{
    display:block;
    padding:13px 30px;
    color:#fff;
    text-decoration:none;
    font-size:13px;
  }
  .nav a:hover,
  .nav a:focus-visible{background:var(--blue-dark);}
  .nav .current a{background:var(--blue-dark);font-weight:bold;}

  /* ---------- hero panel ---------- */
  .hero-shell{background:var(--gray-band);}
  .hero-shell .wrap{padding-top:16px;padding-bottom:20px;}
  .hero{
    background:transparent;
    padding:0;
    display:flex;
    gap:0;
  }
  .hero-photo{
    --hero-ar:3/2;
    flex:1 1 auto;
    aspect-ratio:var(--hero-ar);
    min-height:260px;
    background-color:#5a6470;
    background-image:linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
  }

  /* ---------- hero image per page ---------- */
  .page-acura .hero-photo{background-image:url("../images/hero-acura.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-buick .hero-photo{background-image:url("../images/hero-buick.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-cadillac .hero-photo{background-image:url("../images/hero-cadillac.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-index .hero-photo{background-image:url("../images/hero-car.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-contact .hero-photo{background-image:url("../images/hero-car.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-privacy-policy .hero-photo{background-image:url("../images/hero-car.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-car-key-programming .hero-photo{background-image:url("../images/hero-car-key-programming.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-chevrolet .hero-photo{background-image:url("../images/hero-chevrolet.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-chrysler .hero-photo{background-image:url("../images/hero-chrysler.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-dodge .hero-photo{background-image:url("../images/hero-dodge.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-car-key-fob-programming .hero-photo{background-image:url("../images/hero-fob-programming.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-ford .hero-photo{background-image:url("../images/hero-ford.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-gmc .hero-photo{background-image:url("../images/hero-gmc.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-honda .hero-photo{background-image:url("../images/hero-honda.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-hyundai .hero-photo{background-image:url("../images/hero-hyundai.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-ignition-repair .hero-photo{background-image:url("../images/hero-ignition-repair.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-jeep .hero-photo{background-image:url("../images/hero-jeep.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-kia .hero-photo{background-image:url("../images/hero-kia.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-lexus .hero-photo{background-image:url("../images/hero-lexus.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-mazda .hero-photo{background-image:url("../images/hero-mazda.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-mitsubishi .hero-photo{background-image:url("../images/hero-mitsubishi.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-nissan .hero-photo{background-image:url("../images/hero-nissan.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-ram .hero-photo{background-image:url("../images/hero-ram.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-subaru .hero-photo{background-image:url("../images/hero-subaru.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-toyota .hero-photo{background-image:url("../images/hero-toyota.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-volkswagen .hero-photo{background-image:url("../images/hero-volkswagen.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}

  /* ---------- contact page: form inside the content ---------- */
  .page-contact .lead-form{
    flex:none;
    width:100%;
    max-width:none;
    margin:0 0 26px;
    padding:20px 24px 24px;
  }
  /* two fields per row so the wider panel is not one long column */
  .page-contact .lead-form form{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:18px;
  }
  .page-contact .lead-form label{grid-column:span 1;}
  .page-contact .lead-form input{grid-column:span 1;}
  .page-contact .lead-form label[for="q-address"],
  .page-contact .lead-form input#q-address,
  .page-contact .lead-form button,
  .page-contact .lead-form .form-msg{grid-column:1 / -1;}
  .page-contact .lead-form button{margin-top:8px;}
  /* the in-content link colour must not win over the panel's own link colour */
  .page-contact .copy .lead-call a{color:#ffc93c;text-decoration:none;}
  .page-contact .copy .lead-call a:hover{color:#ffd76b;text-decoration:underline;}
  .page-contact .content .wrap{padding-top:14px;}

  /* ---------- privacy page: single column ---------- */
  .page-privacy-policy .copy{max-width:760px;}
  .page-privacy-policy .content .wrap{padding-top:14px;}

  /* ---------- main content ---------- */
  .content{background:#fff;padding-bottom:40px;}
  .content .wrap{padding-left:60px;padding-right:60px;}

  .section-title{
    background:var(--blue);
    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:19px;
    margin:0 0 22px;
    padding:11px 16px;
  }

  .columns{display:flex;gap:30px;align-items:flex-start;}
  .copy{flex:1 1 auto;}
  .copy p{
    font-family:"Source Sans 3","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:15px;
    line-height:1.65;
    text-align:left;
    margin:0 0 16px;
  }
  .sidebar{flex:0 0 225px;}

  .callout{
    margin-top:26px;
    border-top:2px solid var(--blue);
    padding-top:16px;
    font-family:"Source Sans 3","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:15px;
  }
  .callout strong{color:var(--blue-text);font-size:20px;}

  /* ---------- footer ---------- */
  .footer{
    background:var(--blue-dark);
    color:#dbe4f0;
    font-size:11px;
    text-align:center;
  }
  .footer .wrap{padding-top:14px;padding-bottom:14px;}
  .footer a{color:#fff;}

  a:focus-visible{outline:2px solid #ffd34d;outline-offset:2px;}


  /* ---------- nav dropdown ---------- */
  .nav li{position:relative;}
  .nav .caret{font-size:9px;margin-left:6px;vertical-align:1px;}
  .drop{
    list-style:none;
    margin:0;
    padding:0;
    position:absolute;
    top:100%;
    left:0;
    min-width:235px;
    background:var(--blue-dark);
    box-shadow:0 3px 9px rgba(0,0,0,.3);
    opacity:0;
    visibility:hidden;
    transition:opacity .12s ease;
    z-index:60;
  }
  .has-drop:hover > .drop,
  .has-drop:focus-within > .drop{opacity:1;visibility:visible;}
  .drop li + li{border-left:0;}
  .drop li{border-top:1px solid rgba(255,255,255,.22);}
  .drop a{padding:11px 16px;font-size:12px;white-space:nowrap;}
  .drop a:hover,
  .drop a:focus-visible{background:var(--blue);}
  .drop .current a{background:var(--blue);font-weight:bold;}
  @media (prefers-reduced-motion:reduce){.drop{transition:none;}}


  /* ---------- mobile menu button (hidden on desktop) ---------- */
  .nav-toggle{
    position:absolute;
    width:1px;height:1px;
    opacity:0;
    margin:0;
  }
  .nav-btn{display:none;}
  .bars{
    display:inline-block;
    width:18px;
    height:2px;
    background:#fff;
    position:relative;
    margin-right:10px;
  }
  .bars::before,
  .bars::after{
    content:"";
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    background:#fff;
  }
  .bars::before{top:-6px;}
  .bars::after{top:6px;}


  /* ---------- mobile submenu toggle (hidden on desktop) ---------- */
  .drop-toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;}
  .drop-btn{display:none;}


  /* ---------- hero quote form ---------- */
  .lead-form{
    flex:0 0 300px;
    background:var(--blue-dark);
    color:#fff;
    padding:16px 18px 18px;
  }
  .lead-form h2{
    font-family:Georgia,"Times New Roman",serif;
    font-size:19px;
    margin:0 0 14px;
    color:#fff;
  }
  .lead-form label{
    display:block;
    font-size:11px;
    letter-spacing:.03em;
    text-transform:uppercase;
    margin-bottom:3px;
    color:#c7d5e8;
  }
  .lead-form input{
    display:block;
    width:100%;
    font:inherit;
    font-size:13px;
    padding:7px 8px;
    margin-bottom:10px;
    border:1px solid #46618a;
    background:#fff;
    color:#222;
    border-radius:0;
  }
  .lead-form input:focus{
    outline:2px solid #ffd34d;
    outline-offset:-1px;
  }
  .lead-form input:invalid.touched{border-color:#e06b6b;background:#fff4f4;}
  .lead-form button{
    display:block;
    width:100%;
    font:inherit;
    font-size:14px;
    font-weight:bold;
    color:#1d3557;
    background:#ffc93c;
    border:0;
    padding:11px 12px;
    margin-top:4px;
    cursor:pointer;
  }
  .lead-form button:hover{background:#ffd76b;}
  .lead-form button:focus-visible{outline:2px solid #fff;outline-offset:2px;}
  .form-msg{
    font-size:12px;
    line-height:1.4;
    margin:10px 0 0;
    color:#ffd76b;
  }
  .form-msg:empty{margin:0;}
  .lead-call{
    font-size:12px;
    margin:12px 0 0;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.2);
    color:#c7d5e8;
  }
  .lead-call a{color:#ffc93c;font-weight:bold;}


  /* ---------- sidebar table ---------- */
  .why{
    width:100%;
    margin-top:14px;
    border-collapse:collapse;
    border:1px solid #c9cfd8;
    background:#fff;
  }
  .why caption{
    background:var(--blue-dark);
    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:15px;
    text-align:left;
    padding:9px 12px;
  }
  .why td{
    font-size:12.5px;
    line-height:1.4;
    padding:8px 12px 8px 26px;
    border-top:1px solid #e2e6ec;
    position:relative;
  }
  .why tr:first-child td{border-top:0;}
  .why tr:nth-child(even) td{background:#f4f6f9;}
  .why td::before{
    content:"\2713";
    position:absolute;
    left:9px;
    color:var(--blue);
    font-weight:bold;
  }


  /* ---------- wide vehicles dropdown ---------- */
  .drop-wide{
    display:grid;
    grid-template-columns:repeat(2,minmax(190px,1fr));
    min-width:420px;
  }
  .drop-wide li:nth-child(-n+2){border-top:0;}
  .drop-wide li:nth-child(odd){border-right:1px solid rgba(255,255,255,.22);}


  .models{
    background:#f2f5f9;
    border-left:3px solid var(--blue);
    padding:10px 14px;
  }


  /* ---------- logo + site name ---------- */
  .site-name a{display:block;line-height:0;}
  .site-name img{
    display:block;
    width:290px;
    max-width:100%;
    height:auto;
    flex:0 0 auto;
  }
  /* the website name shown to the right of the logo */
  .site-title{
    font-family:"Source Sans 3",Verdana,Geneva,Arial,sans-serif;
    font-size:25px;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-0.2px;
    color:var(--blue-text);
    white-space:nowrap;
    padding-left:16px;
    border-left:3px solid var(--blue);
  }
  .brand:hover .site-title{color:var(--blue-dark);}


  /* ---------- sidebar coupon ---------- */
  .coupon{display:block;line-height:0;}
  .coupon img{
    display:block;
    width:100%;
    height:auto;
    border:1px solid #c9cfd8;
  }
  .coupon:focus-visible{outline:2px solid #ffd34d;outline-offset:2px;}


  /* ---------- brand logo strip ---------- */
  .brands{background:#fff;}
  .brands .wrap{padding-top:26px;padding-bottom:26px;}
  .brands img{
    display:block;
    width:100%;
    max-width:900px;
    height:auto;
    margin:0 auto;
  }


  /* ---------- footer address ---------- */
  .footer .addr{white-space:nowrap;}


  /* ---------- header phone block ---------- */
  .phone-block{text-align:right;}
  .phone-label{
    display:block;
    font-size:12px;
    font-weight:bold;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:2px;
  }
  .phone{display:block;}


  /* ---------- in-content links ---------- */
  .copy p a{
    color:var(--blue-text);
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .copy p a:hover{color:var(--blue-dark);}

  @media (max-width:820px){
    .masthead .wrap{flex-direction:column;align-items:center;gap:10px;text-align:center;}
    .phone{font-size:24px;}
    .phone-block{text-align:center;}
    .phone-label{font-size:11px;}
    .site-name .brand{flex-direction:column;gap:8px;}
    .site-name img{width:230px;margin:0 auto;}
    .site-title{
      font-size:21px;
      padding-left:0;
      border-left:0;
      text-align:center;
    }
    .nav-btn{
      display:flex;
      align-items:center;
      background:var(--blue);
      color:#fff;
      font-size:13px;
      padding:14px 16px;
      cursor:pointer;
      user-select:none;
    }
    .nav-toggle:focus-visible + .nav-btn{outline:2px solid #ffd34d;outline-offset:-3px;}
    .nav-toggle:checked + .nav-btn{background:var(--blue-dark);}
    .nav-toggle:checked + .nav-btn .bars{background:transparent;}
    .nav-toggle:checked + .nav-btn .bars::before{top:0;transform:rotate(45deg);}
    .nav-toggle:checked + .nav-btn .bars::after{top:0;transform:rotate(-45deg);}
    .nav{display:none;}
    .nav-toggle:checked ~ nav .nav{display:block;}
    .nav li + li{border-left:0;border-top:1px solid rgba(255,255,255,.3);}
    .nav .caret{display:none;}
    .drop{
      position:static;
      opacity:1;
      visibility:visible;
      box-shadow:none;
      background:rgba(0,0,0,.13);
    }
    .drop a{padding-left:34px;}
    /* Services row becomes a tap-to-open toggle */
    .has-drop > a{display:none;}
    .drop-btn{
      display:flex;
      align-items:center;
      justify-content:space-between;
      color:#fff;
      font-size:13px;
      padding:13px 16px;
      cursor:pointer;
      user-select:none;
    }
    .drop-toggle:focus-visible + .drop-btn{outline:2px solid #ffd34d;outline-offset:-3px;}
    .drop-toggle:checked + .drop-btn{background:var(--blue-dark);}
    .drop-btn .caret{
      display:inline-block;
      font-size:9px;
      margin:0;
      transition:transform .15s ease;
    }
    .drop-toggle:checked + .drop-btn .caret{transform:rotate(180deg);}
    .drop{display:none;}
    .drop-toggle:checked ~ .drop{display:block;}
    .drop-wide{display:none;grid-template-columns:1fr;min-width:0;}
    .drop-toggle:checked ~ .drop-wide{display:block;}
    .drop-wide li:nth-child(odd){border-right:0;}
    .drop-wide li{border-top:1px solid rgba(255,255,255,.22);}

    @media (prefers-reduced-motion:reduce){.drop-btn .caret{transition:none;}}
    .nav a{padding:12px 18px;}
    .hero{flex-direction:column;}
    .lead-form{flex:1 1 auto;}
    .hero-photo{
      min-height:170px;              /* fallback if aspect-ratio is unsupported */
      aspect-ratio:var(--hero-ar);   /* shows the whole banner, nothing cropped */
      background-size:cover;
      background-position:center;
    }
    .page-contact .lead-form form{grid-template-columns:1fr;}
    .columns{flex-direction:column;}
    .sidebar{flex:1 1 auto;width:100%;}
    .coupon{max-width:340px;margin:0 auto;}
    .content .wrap{padding-left:20px;padding-right:20px;}
  }

  /* ---------- inner pages ---------- */
  .content h3{
    font-family:Georgia,"Times New Roman",serif;
    font-size:17px;
    color:var(--blue-text);
    margin:26px 0 10px;
  }
  .content ul.plain{
    font-family:"Source Sans 3","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:15px;
    line-height:1.6;
    margin:0 0 16px;
    padding-left:22px;
  }
  .content ul.plain li{margin-bottom:6px;}
  .crumbs{
    font-size:11px;
    color:#666;
    padding-top:14px;
  }
  .crumbs a{color:var(--blue-text);}

  /* ---------- reviews ---------- */
  .reviews{background:#f2f5f9;border-top:1px solid #dde3ea;border-bottom:1px solid #dde3ea;}
  .reviews .wrap{padding-top:26px;padding-bottom:26px;}
  .reviews h2{
    font-family:Georgia,"Times New Roman",serif;
    font-size:19px;
    color:var(--blue-text);
    margin:0 0 4px;
  }
  .rating-line{font-size:11px;color:#556;margin:0 0 18px;}
  .review-grid{display:flex;gap:16px;flex-wrap:wrap;}
  .review{
    flex:1 1 200px;
    background:#fff;
    border:1px solid #d6dce4;
    padding:14px 15px;
  }
  .stars{color:#e8a317;letter-spacing:3px;font-size:15px;line-height:1;}
  .review p{
    font-family:"Source Sans 3","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:13px;
    line-height:1.5;
    margin:9px 0 11px;
  }
  .reviewer{font-size:11px;color:#555;border-top:1px solid #eee;padding-top:8px;}
  .reviewer strong{color:#222;}

  /* ---------- faq ---------- */
  .faq{margin-top:34px;}
  .faq-item{border-bottom:1px solid #e4e4e4;padding-bottom:12px;margin-bottom:16px;}
  .faq-item:last-child{border-bottom:0;}
  .faq-item h3{margin:0 0 7px;}
  .faq-item p{
    font-family:"Source Sans 3","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:15px;
    line-height:1.6;
    margin:0;
  }