/* FILE: /css/one-to-one-dog-training-kent.min.css
   PURPOSE:
   - Unified service-page design system
   - One visual style across the full page
   - No content/text changes
   - No header/footer styling here (chrome.min.css owns that)
*/

/* ===== Base + variables ===== */
:root{
  --accent:#bb9b49;
  --accent-dark:#8e7333;
  --ink:#0a272c;
  --ink-2:#123840;
  --bg:#f4f4f2;
  --surface:#ffffff;
  --surface-alt:#fbfaf7;
  --text:#121212;
  --muted:#4d4d4d;
  --border:#ddd6c8;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --radius:16px;
  --radius-sm:12px;
  --content-max:1120px;
  --article-max:920px;
}

html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
strong{font-weight:900}
*,
*::before,
*::after{box-sizing:border-box}

/* ===== Accessibility ===== */
:focus{outline:2px solid rgba(187,155,73,.55);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
a:focus-visible,button:focus-visible{outline:3px solid rgba(187,155,73,.55);outline-offset:2px}

.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
}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{
  left:16px;top:16px;width:auto;height:auto;z-index:10000;background:#fff;color:#111;
  padding:10px 12px;border-radius:10px;outline:3px solid rgba(187,155,73,.55)
}

/* ===== Main container ===== */
#main-content.container,
main#main-content.container{
  max-width:var(--content-max) !important;
  margin:30px auto 56px !important;
  padding:0 16px !important;
}

/* ===== Utilities ===== */
.text-center{text-align:center}
.text-white{color:#fff}
.bg-dark{background:var(--ink)}
.text-primary{color:var(--ink)}
.mb-0{margin-bottom:0}
.mb-3{margin-bottom:12px}
.mt-3{margin-top:12px}
.mt-4{margin-top:16px}
.mt-5{margin-top:26px}
.my-3{margin-top:12px;margin-bottom:12px}
.me-2{margin-right:10px}
.px-4{padding-left:16px;padding-right:16px}
.px-40{padding-left:16px;padding-right:16px}
.gap-2{gap:10px}
.gap-3{gap:12px}
.flex-wrap{flex-wrap:wrap}
.justify-content-center{justify-content:center}
.d-flex{display:flex}

.s-py-5{padding-top:14px;padding-bottom:14px}
.s-py-40{padding-top:28px;padding-bottom:28px}
.s-py-md-60{padding-top:34px;padding-bottom:34px}
@media (min-width:768px){
  .s-py-40{padding-top:40px;padding-bottom:40px}
  .s-py-md-60{padding-top:60px;padding-bottom:60px}
}

.lead{margin:0 auto 18px}
.lead p{margin:0}

.img-fluid{max-width:100%;height:auto}
.rounded{border-radius:16px}
.shadow{box-shadow:0 12px 28px rgba(0,0,0,.14)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  text-decoration:none;
  border-radius:12px;
  padding:12px 16px;
  font-weight:900;
  line-height:1.1;
  min-width:180px;
  min-height:46px;
  border:2px solid transparent;
  cursor:pointer;
  font-size:15px;
  letter-spacing:.1px;
  white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, border-color .18s ease
}
.btn *{color:inherit !important}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.12)
}
.btn-maincolor{
  background:var(--accent);
  color:#111 !important;
  border-color:var(--accent)
}
.btn-maincolor:hover{filter:brightness(.98)}
.btn-outline-maincolor{
  background:transparent;
  color:var(--accent) !important;
  border-color:var(--accent)
}
.btn-outline-maincolor:hover{background:rgba(187,155,73,.08)}

.btn-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin:18px 0 8px
}
@media (max-width:520px){
  .btn-row a,.btn-row button{width:100%}
}
.cta-center{text-align:center}

/* ===== Sticky CTAs ===== */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;
  display:none;gap:8px;padding:10px;
  background:rgba(0,0,0,.92);
  z-index:9999
}
.sticky-cta__btn{
  flex:1;text-align:center;padding:12px 10px;
  border-radius:12px;font-weight:800;text-decoration:none;
  color:#fff;background:#bb9b49;
  border:3px #000
}
.sticky-cta__btn:nth-child(2),
.sticky-cta__btn:nth-child(3){
  background:#bb9b49; border:3px solid #000;color:#000
}
@media (max-width:768px){
  .sticky-cta{display:flex}
  body{padding-bottom:84px}
}
.sticky-cta-desktop{
  position:fixed;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:9999
}
@media (max-width:768px){.sticky-cta-desktop{display:none}}

/* ===== Hero / title area ===== */
.page_title{
  background:linear-gradient(135deg,var(--ink),var(--ink-2));
  border-radius:18px;
  box-shadow:var(--shadow);
  margin-top:8px
}
.page_title .container{
  max-width:var(--article-max);
  margin:0 auto;
  padding-left:16px;
  padding-right:16px
}
.page_title h1{
  margin:0 0 8px;
  font-weight:900;
  letter-spacing:.2px;
  font-size:clamp(1.6rem,2vw,2.15rem)
}
.page_title .lead{
  margin:0 auto;
  max-width:980px;
  color:rgba(255,255,255,.92);
  font-size:1rem
}

/* ===== Breadcrumb ===== */
.breadcrumb-list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  font-weight:800;
  justify-content:center
}
.breadcrumb-list li{display:flex;align-items:center}
.breadcrumb-list li+li::before{
  content:"›";
  margin:0 10px;
  color:rgba(255,255,255,.65);
  font-weight:900
}
.breadcrumb-list a{
  color:rgba(255,255,255,.94);
  text-decoration:none;
  font-weight:800
}
.breadcrumb-list a:hover{text-decoration:underline}
.breadcrumb-list span[aria-current="page"]{color:#fff;font-weight:900}

/* ===== Top CTA bar ===== */
body > #canvas #box_wrapper > .mt-4.d-flex.flex-wrap.justify-content-center.gap-2,
#box_wrapper > .mt-4.d-flex.flex-wrap.justify-content-center.gap-2{
  max-width:var(--article-max);
  margin:18px auto 0;
  padding:0 8px
}

/* ===== Layout correction ===== */
.service .row{
  display:flex;
  justify-content:center;
  width:100%;
  margin:0
}
.service .col-lg-8{
  width:100%;
  max-width:var(--article-max);
  flex:0 0 100%
}
.service article{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:24px 20px 30px;
  position:relative
}
@media (min-width:768px){
  .service article{padding:28px 28px 34px}
}
@media (min-width:1100px){
  .service article{padding:32px 34px 38px}
}

/* Hide any leftover sidebar/panel on this service page */
@media (max-width:991px){
  #main-content .col-lg-4,
  #main-content .service-sidebar,
  #main-content .page_sidebar,
  #main-content .left-panel,
  #main-content aside{
    display:none !important;
  }
}

/* ===== Article typography ===== */
.service article > *{
  max-width:none
}
.service p{
  margin:0 0 14px;
  color:#1c1c1c;
  font-size:1rem
}
.service ul{
  margin:0 0 14px;
  padding-left:18px;
  line-height:1.75
}
.service li{
  margin:0 0 6px;
  color:#1b1b1b
}
.service a{
  color:var(--accent-dark);
  font-weight:900;
  text-decoration:none
}
.service a:hover{text-decoration:underline;text-underline-offset:2px}

/* ===== Consistent headings ===== */
.service h2,
.service .h4,
.service .h3{
  color:var(--ink);
  font-weight:900;
  letter-spacing:.1px
}
.one2one-headline{
  margin:16px 0 14px !important;
  font-size:clamp(1.35rem,2vw,1.7rem);
  line-height:1.25;
  padding-bottom:12px;
  border-bottom:2px solid rgba(187,155,73,.35)
}
.service h2.h4,
.service .h4{
  margin:26px 0 12px !important;
  font-size:1.22rem;
  line-height:1.3;
  padding:0 0 10px;
  border-bottom:1px solid rgba(187,155,73,.28)
}
.service h3.h6,
.service .h6{
  margin:16px 0 8px !important;
  color:#1b1b1b;
  font-size:.98rem;
  font-weight:900
}

/* ===== Hero image ===== */
.item-media{
  margin:0 auto 16px;
  max-width:780px
}
.item-media img{
  width:100%;
  border:1px solid rgba(0,0,0,.08);
  background:#fff
}

/* ===== Trainer card ===== */
.trainer-card{
  background:linear-gradient(180deg,#fff,#fbfaf7);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  margin:14px 0 18px
}
.trainer-card__title{
  font-weight:900;
  font-size:1.08rem;
  margin:0 0 8px;
  color:#111
}
.trainer-card__desc{margin-top:8px;color:#1b1b1b}
.trainer-card__reviews{margin-top:10px;color:#1b1b1b}
.review-stars{color:var(--accent);letter-spacing:1px}

/* ===== Unified content blocks ===== */
.service article > p,
.service article > ul,
.service article > .btn-row,
.service article > .cta-center,
.service article > .case-studies,
.service article > .other-services,
.service article > .useful-links-box,
.service article > .faq,
.service article > .testimonials-section,
.service article > .trainer-card{
  scroll-margin-top:100px
}

/* ===== Standard card treatment for key boxes ===== */
.case-card,
.useful-links-box,
.other-services,
.review-card{
  background:linear-gradient(180deg,#fff,#fbfaf7);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 6px 16px rgba(0,0,0,.06)
}

/* ===== Case studies ===== */
.case-studies{
  display:grid;
  gap:12px;
  margin-top:10px
}
.case-card{
  padding:16px
}
.case-card__p{margin:8px 0 10px}
.case-card__meta{color:#2a2a2a}

/* ===== Useful links ===== */
.useful-links-box{
  padding:16px;
  margin-top:18px
}
.useful-links-box .h4{margin:0 0 10px !important;border-bottom:0;padding-bottom:0}
.useful-links-box ul{
  margin:0;
  padding-left:18px;
  columns:2;
  column-gap:28px
}
.useful-links-box li{
  break-inside:avoid;
  margin-bottom:4px
}
@media (max-width:700px){
  .useful-links-box ul{columns:1}
}
.useful-link{
  color:var(--accent-dark);
  font-weight:900;
  text-decoration:none
}
.useful-link:hover{text-decoration:underline;text-underline-offset:2px}

/* ===== FAQ ===== */
.faq{
  background:linear-gradient(135deg,var(--ink),var(--ink-2));
  border-radius:18px;
  padding:22px 18px;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.16);
  margin-top:28px
}
.faq h2{
  color:var(--accent);
  text-align:center;
  margin:0 0 10px !important;
  font-weight:900;
  border-bottom:0;
  padding-bottom:0
}
.faq .faq-intro{
  color:rgba(255,255,255,.92);
  text-align:center;
  max-width:880px;
  margin:0 auto 16px
}
.faq details.details-summary{
  max-width:100%;
  margin:0 auto 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  padding:12px 14px
}
.faq details.details-summary>summary{
  cursor:pointer;
  font-weight:900;
  color:var(--accent);
  list-style:none
}
.faq details.details-summary>summary::-webkit-details-marker{display:none}
.faq details.details-summary>p{margin:10px 0 0;color:rgba(255,255,255,.92)}
.faq details.details-summary a{color:var(--accent)}
.faq details.details-summary:hover,
.faq details.details-summary[open]{border-color:rgba(255,255,255,.28)}

/* ===== Testimonials ===== */
.testimonials-section{margin-top:20px}
.review-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:10px
}
@media (max-width:900px){.review-grid{grid-template-columns:1fr}}
.review-card{
  padding:16px
}
.review-card__text{margin-top:8px;color:#1b1b1b}

/* ===== Other services ===== */
.other-services{
  padding:16px;
  margin-top:18px
}
.other-services h2{border-bottom:0;padding-bottom:0;margin-bottom:10px !important}
.other-services p{margin:0 0 12px;color:#1b1b1b}
.other-services__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px
}
@media (max-width:680px){.other-services__grid{grid-template-columns:1fr}}
.other-services__item{
  display:block;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:12px;
  padding:12px 14px;
  text-decoration:none;
  font-weight:900;
  color:#111;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease
}
.other-services__item:hover{
  border-color:rgba(187,155,73,.65);
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  transform:translateY(-1px)
}

/* ===== Lists: make long sections more readable ===== */
@media (min-width:900px){
  .service h2.h4 + ul{
    columns:2;
    column-gap:34px
  }
  .service h2.h4 + ul li{
    break-inside:avoid;
    page-break-inside:avoid
  }
}

/* Prevent specific short lists from becoming awkward multi-column */
.trainer-card + p + p + p + h2 + ul,
.faq + h2 + p + p + .cta-center + h2 + p + ul,
.useful-links-box ul,
.other-services__grid,
.review-grid,
.case-studies{
  columns:auto !important
}

/* ===== Separator rhythm ===== */
.service article > p + h2,
.service article > ul + h2,
.service article > .btn-row + h2,
.service article > .cta-center + h2,
.service article > .case-studies + h2,
.service article > .other-services + h2,
.service article > .useful-links-box + h2,
.service article > .faq + h2,
.service article > .testimonials-section + h2{
  margin-top:30px !important
}

/* ===== Flash highlight ===== */
.flash-highlight{
  outline:3px solid rgba(187,155,73,.65);
  outline-offset:3px
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}

/* ===== Desktop visual polish ===== */
@media (min-width:992px){
  .service article{
    background:
      linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.98)),
      linear-gradient(180deg,#fff,#faf8f2)
  }
}

/* ===== Mobile refinement ===== */
@media (max-width:767px){
  #main-content.container,
  main#main-content.container{
    margin:20px auto 40px !important;
    padding:0 12px !important
  }

  .service article{
    padding:18px 14px 24px;
    border-radius:16px
  }

  .page_title{
    border-radius:14px
  }

  .page_title h1{
    font-size:1.42rem
  }

  .btn{
    min-width:unset;
    width:100%
  }

  body > #canvas #box_wrapper > .mt-4.d-flex.flex-wrap.justify-content-center.gap-2,
  #box_wrapper > .mt-4.d-flex.flex-wrap.justify-content-center.gap-2{
    padding:0
  }

  .service h2.h4,
  .service .h4{
    font-size:1.12rem
  }

  .one2one-headline{
    font-size:1.25rem
  }

  .useful-links-box,
  .other-services,
  .faq{
    padding:14px
  }
}