/*
 * pcfixit.css — PC FIX-IT Perth theme overlay
 * Layers on top of Bootstrap 3 + Novi style.css
 * Philosophy: enhance without fighting the template.
 * Only override what genuinely needs improving.
 *
 * Sections:
 *   1.  CSS Variables
 *   2.  Global polish
 *   3.  Links & brand colour
 *   4.  Buttons
 *   5.  Navbar — light touch
 *   6.  Hero slider
 *   7.  Service cards (.box)
 *   8.  Footer
 *   9.  Breadcrumb
 *  10.  Thumbnails
 *  11.  Parallax stats
 *  12.  Testimonial quotes
 *  13.  Leaflet map
 *  14.  Local areas grid
 *  15.  CTA dark section
 *  16.  Accessibility
 *  17.  Responsive
 */

/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
  --clr-brand:       #b22222;
  --clr-brand-dark:  #8b1a1a;
  --clr-dark:        #1a1a1a;
  --clr-mid:         #444444;
  --clr-muted:       #777777;
  --clr-light:       #f5f5f5;
  --clr-white:       #ffffff;
  --clr-border:      #e0e0e0;
  --clr-footer-bg:   #1a1a1a;
  --clr-footer-text: #cccccc;
  --ff-head:         'Montserrat', sans-serif;
  --ff-body:         'Roboto', sans-serif;
  --radius:          3px;
  --transition:      0.2s ease;
  --shadow-sm:       0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:       0 4px 20px rgba(0,0,0,0.12);
}

/* ============================================================
   2. GLOBAL POLISH
   ============================================================ */
html {
  scroll-behavior: smooth;
}

body {
  /* Slightly warmer body text than Novi's default #555 */
  color: #3a3a3a;
  touch-action: manipulation;
}

img {
  max-width: 100%;
  height: auto;
}

address {
  font-style: normal;
}

/* ============================================================
   3. LINKS & BRAND COLOUR
   NOTE: The original style.css already sets a:hover to #b22222
   and .text-primary to #b22222 — we just reinforce consistency.
   ============================================================ */
a.link,
a.link:visited {
  color: var(--clr-brand);
}

a.link:hover,
a.link:focus {
  color: var(--clr-brand-dark);
  text-decoration: underline;
}

/* Divider accent colour (used as brand line under headings) */
.divider-primary {
  background-color: var(--clr-brand);
}

/* ============================================================
   4. BUTTONS — polish existing without breaking layout
   ============================================================ */
.btn {
  border-radius: var(--radius);
  transition: background-color var(--transition),
              border-color     var(--transition),
              color            var(--transition),
              transform        var(--transition),
              box-shadow       var(--transition);
}

.btn-primary,
.btn-primary:visited {
  background-color: var(--clr-brand);
  border-color:     var(--clr-brand);
  color:            var(--clr-white);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--clr-brand-dark);
  border-color:     var(--clr-brand-dark);
  color:            var(--clr-white);
  transform:        translateY(-1px);
  box-shadow:       0 4px 12px rgba(178,34,34,0.35);
  text-decoration:  none;
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-default:hover,
.btn-default:focus {
  background-color: var(--clr-dark);
  border-color:     var(--clr-dark);
  color:            var(--clr-white);
  transform:        translateY(-1px);
  text-decoration:  none;
}

.btn-default:active {
  transform: translateY(0);
}

/* ============================================================
   5. NAVBAR — keep template layout, just sharpen the active state
   The original nav uses its own complex animated border effect.
   We only touch: active colour, dropdown polish.
   ============================================================ */

/* Active nav item and hover state — brand red */
.rd-navbar-static .rd-navbar-nav > li.active > a,
.rd-navbar-fullwidth .rd-navbar-nav > li.active > a,
.rd-navbar-static .rd-navbar-nav > li:hover > a,
.rd-navbar-fullwidth .rd-navbar-nav > li:hover > a,
.rd-navbar-static .rd-navbar-nav > li.focus > a,
.rd-navbar-fullwidth .rd-navbar-nav > li.focus > a {
  color: var(--clr-brand);
}

/* Dropdown — add brand top border and clean shadow */
.rd-navbar-static .rd-navbar-nav > li > .rd-navbar-dropdown,
.rd-navbar-fullwidth .rd-navbar-nav > li > .rd-navbar-dropdown {
  border-top: 3px solid var(--clr-brand);
  box-shadow: var(--shadow-md);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Dropdown links */
.rd-navbar-dropdown a:hover,
.rd-navbar-dropdown a:focus {
  color: var(--clr-brand);
  background-color: var(--clr-light);
}

/* Mobile hamburger — 44px touch target (WCAG 2.5.5) */
.rd-navbar-toggle {
  min-width: 44px;
  min-height: 44px;
}

/* ============================================================
   6. HERO SLIDER
   The swiper text is already white on a dark background image.
   We add shadow for legibility on light images.
   ============================================================ */
.swiper-slide-caption h1,
.swiper-slide-caption h2 {
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}

/* Prevent horizontal scroll on mobile */
.swiper-container {
  overflow-x: hidden;
}

/* ============================================================
   7. SERVICE CARDS (.box)
   The original .box has no border. We add a subtle one + hover lift.
   ============================================================ */
.box {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.box:hover {
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

/* Box icon — brand red */
.box .icon {
  color: var(--clr-brand);
}

/* ============================================================
   8. FOOTER — dark treatment
   The original footer is already styled by style.css.
   We just enrich it: darker bg, circular social icons.
   ============================================================ */
.page-footer {
  background-color: var(--clr-footer-bg);
  color:            var(--clr-footer-text);
}

.page-footer,
.page-footer a,
.page-footer .icon {
  color: var(--clr-footer-text);
}

.page-footer a:hover,
.page-footer a:focus {
  color: var(--clr-brand);
  text-decoration: none;
}

.page-footer address {
  color: var(--clr-footer-text);
  line-height: 1.8;
  font-style: normal;
}

/* Override .text-primary inside dark footer */
.page-footer .text-primary {
  color: var(--clr-brand) !important;
}

/* Circular social icons */
.page-footer .list-inline .icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border:          1px solid #555;
  border-radius:   50%;
  color:           var(--clr-footer-text);
  transition:      background-color var(--transition),
                   border-color     var(--transition),
                   color            var(--transition);
  font-size:       14px;
}

.page-footer .list-inline .icon:hover,
.page-footer .list-inline .icon:focus {
  background-color: var(--clr-brand);
  border-color:     var(--clr-brand);
  color:            var(--clr-white);
  text-decoration:  none;
}

/* ============================================================
   9. BREADCRUMB — subtle, out of the way
   ============================================================ */
.breadcrumb {
  background: transparent;
  padding:    0.4rem 0;
  font-size:  0.8rem;
}

.breadcrumb > li + li:before {
  content: ' › ';
  color:   var(--clr-muted);
}

.breadcrumb > li > a {
  color: var(--clr-muted);
}

.breadcrumb > li > a:hover {
  color: var(--clr-brand);
}

/* ============================================================
   10. THUMBNAILS — add hover depth
   ============================================================ */
.thumbnail {
  border:        1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow:      hidden;
  transition:    box-shadow var(--transition);
}

.thumbnail:hover {
  box-shadow: var(--shadow-md);
}

/* ============================================================
   11. PARALLAX STATS — dark overlay so white text is readable
   The background image is very pale; we add a semi-transparent
   dark scrim via ::before so the white counters are legible.
   ============================================================ */

.parallax-container .h1,
.parallax-container .h1 .counter,
.parallax-container .counter {
  color:       var(--clr-dark);
  font-weight: 700;
}

.parallax-container h4 {
  color:          var(--clr-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   12. TESTIMONIAL QUOTES — brand-accented sidebar
   ============================================================ */
.quote {
  border-left:   4px solid var(--clr-brand);
  background:    var(--clr-light);
  padding:       1.5rem 1.5rem 1.5rem 2rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.quote cite {
  color:      var(--clr-brand);
  font-style: normal;
  font-size:  0.85rem;
}

/* ============================================================
   13. LEAFLET MAP
   ============================================================ */
.leaflet-map-wrap {
  width:         100%;
  height:        420px;
  border-radius: var(--radius);
  overflow:      hidden;
  position:      relative;
}

/* "We come to you" notice bar above map */
.map-notice {
  background:  var(--clr-brand);
  color:       var(--clr-white);
  padding:     0.65rem 1.5rem;
  font-size:   0.875rem;
  font-family: var(--ff-head);
  text-align:  center;
  line-height: 1.5;
}

.map-notice strong {
  font-weight: 700;
}

.map-notice a,
.map-notice a:visited {
  color:           var(--clr-white);
  text-decoration: underline;
}

.map-notice a:hover,
.map-notice a:focus {
  color:           rgba(255,255,255,0.8);
  text-decoration: none;
}

/* ============================================================
   14. LOCAL AREAS GRID (homepage + services page)
   ============================================================ */
.local-areas-grid a.link,
.local-areas-grid a.text-bold {
  display:         block;
  padding:         0.45rem 0;
  border-bottom:   1px solid var(--clr-border);
  padding-left:    0;
  transition:      color var(--transition), padding-left var(--transition);
  text-decoration: none;
}

.local-areas-grid a.link:hover,
.local-areas-grid a.link:focus,
.local-areas-grid a.text-bold:hover,
.local-areas-grid a.text-bold:focus {
  color:        var(--clr-brand);
  padding-left: 0.4rem;
}

.local-areas-grid .small {
  color:     var(--clr-muted);
  font-size: 0.78rem;
  display:   block;
  margin-top: 0.1rem;
}

/* ============================================================
   15. CTA DARK SECTION (suburb pages)
   ============================================================ */
.cta-dark {
  background-color: var(--clr-dark);
  padding:          4rem 0;
  text-align:       center;
}

.cta-dark h2 {
  color:         var(--clr-white);
  margin-bottom: 0.5rem;
}

.cta-dark p {
  color:         rgba(255,255,255,0.7);
  margin-bottom: 2rem;
}

/* btn-default needs to be visible on dark CTA background */
.cta-dark .btn-default,
.cta-dark .btn-default:visited {
  border-color: var(--clr-white);
  color:        var(--clr-white);
}

.cta-dark .btn-default:hover,
.cta-dark .btn-default:focus {
  background-color: var(--clr-white);
  border-color:     var(--clr-white);
  color:            var(--clr-dark);
}

/* ============================================================
   16. ACCESSIBILITY
   ============================================================ */

/* Keyboard focus ring */
*:focus-visible {
  outline:        2px solid var(--clr-brand);
  outline-offset: 3px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link — shown only on focus */
.skip-link {
  position:    absolute;
  top:         -100%;
  left:        0;
  z-index:     9999;
  background:  var(--clr-brand);
  color:       var(--clr-white);
  padding:     0.75rem 1.5rem;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size:   0.9rem;
  transition:  top 0.15s;
}

.skip-link:focus {
  top:     0;
  outline: none;
}

/* Respect reduced motion */
@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;
  }
}

/* ============================================================
   17. RESPONSIVE
   ============================================================ */

/* ---- Tablet / small desktop (≤ 991px) ---- */
@media (max-width: 991px) {
  /* Prevent any section causing horizontal scroll */
  body {
    overflow-x: hidden;
  }
}

/* ---- Mobile (≤ 767px) ---- */
@media (max-width: 767px) {
  .shell {
    padding-left:  1rem;
    padding-right: 1rem;
  }

  /* Give cards breathing room when stacked */
  .box {
    margin-bottom: 1.5rem;
    height: auto;
  }

  /* Stack footer gracefully */
  .page-footer .range {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .page-footer img {
    max-width: 160px;
  }

  /* Map full height on mobile */
  .leaflet-map-wrap {
    height: 300px;
  }
}

/* ---- Small phones (≤ 480px) ---- */
@media (max-width: 480px) {
  /* Stack hero CTA buttons */
  .swiper-slide-caption .btn,
  .cta-dark .btn {
    display:       block;
    width:         100%;
    margin-bottom: 0.5rem;
    margin-left:   0 !important;
    text-align:    center;
  }
}