/* ==========================================================================
   Jetski Servicing Gold Coast - 2026 theme
   --------------------------------------------------------------------------
   Loaded AFTER sitebase.css, which is left untouched and still provides the
   Bootstrap 3 grid and the base reset. Everything visual lives here, so the
   whole redesign can be reverted by removing one <link> tag from the three
   public pages.

   Deliberately preserved, because PHP or JS depends on them:
     .businessBox / .boxcontact / .url / .mail / .call / .address
     .bottomrow button / .showHits        (click tracking + hit counter)
     images/32x32Icon.png sprite          (row icons, reused as-is)
   ========================================================================== */

:root{
  /* Brand, pulled from the logo but softened. The original #0027ff was a
     pure blue that vibrates against white. */
  --brand:        #1b3fd8;
  --brand-ink:    #142fa6;
  --brand-wash:   #eef2ff;
  --accent:       #d81f26;

  --ink:          #14181f;
  --body:         #4a5361;
  --muted:        #78818f;

  --line:         #e4e8ee;
  --bg:           #f4f6fa;
  --surface:      #ffffff;

  --radius:       14px;
  --radius-sm:    10px;
  --shadow-sm:    0 1px 2px rgba(16,24,40,.06);
  --shadow:       0 4px 16px rgba(16,24,40,.08);
  --shadow-lg:    0 14px 34px rgba(16,24,40,.13);

  --max:          1200px;
  --ease:         cubic-bezier(.4,0,.2,1);
}

/* --- Base ---------------------------------------------------------------- */

body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;            /* sitebase.css italicises the whole site */
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.22;
}

a{color: var(--brand);}
a:hover,a:focus{color: var(--brand-ink);}

/* Keyboard focus was invisible across the whole site. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.container{max-width: var(--max); width: auto; padding-left: 20px; padding-right: 20px;}

/* --- Header -------------------------------------------------------------- */

.siteheader{
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 50;
}
.siteheader .logo img{max-width: 260px; height: auto; display: block;}

/* --- Navigation ---------------------------------------------------------- */
/* Was a full-width royal blue bar with low-resolution sprite icons and a
   hard-coded 50px height that text overflowed on phones. */

.navcover{
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  height: auto;
  line-height: normal;
  text-align: left;
  padding: 0;
}
.navcover .container{display: flex; justify-content: flex-end;}
.navcover ul{display: flex; gap: 6px; padding: 10px 0; margin: 0;}
.navcover ul li{display: block; padding: 0;}

.navcover ul li a{
  display: block;
  padding: 9px 16px;
  line-height: 1.4;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--body);
  border-radius: 999px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
/* Retire the sprite icons - they are 32px bitmaps and look soft on modern
   displays. The sprite is still used for the card contact rows. */
.navcover ul li a.about:after,
.navcover ul li a.contact:after{display: none;}

.navcover ul li a:hover,
.navcover ul li a:focus{background: var(--brand-wash); color: var(--brand-ink);}
.navcover ul li a.active{background: var(--brand); color: #fff;}

/* --- Hero ---------------------------------------------------------------- */

.hero{
  background: linear-gradient(160deg, #1b3fd8 0%, #142fa6 55%, #101f74 100%);
  color: #fff;
  padding: 64px 0 72px;
  text-align: center;
}
.hero h1{
  color: #fff;
  font-size: 44px;
  font-weight: 800;
  margin: 0 0 16px;
  letter-spacing: -.03em;
}
.hero p{
  color: rgba(255,255,255,.88);
  font-size: 19px;
  max-width: 620px;
  margin: 0 auto;
}
.hero .heroActions{margin-top: 30px;}
.hero .heroBtn{
  display: inline-block;
  background: #fff;
  color: var(--brand-ink);
  font-weight: 700;
  font-size: 16px;
  padding: 13px 26px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.hero .heroBtn:hover,
.hero .heroBtn:focus{transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--brand-ink);}

/* --- Listing grid -------------------------------------------------------- */

.listingSection{padding: 52px 0 8px;}
.sectionHead{text-align: center; margin-bottom: 34px;}
.sectionHead h2{font-size: 30px; margin: 0 0 8px;}
.sectionHead p{color: var(--muted); margin: 0;}

.businessList{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
  justify-content: center;
  gap: 24px;
  float: none;
  padding: 0;
  width: 100%;
}

/* --- Listing card -------------------------------------------------------- */

.businessBox{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.businessBox:hover{transform: translateY(-3px); box-shadow: var(--shadow-lg);}

.businessBox .boxheader{padding: 0;}

.businessBox .boxheader .boxlogo{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  float: none;
  margin: 0;
  padding: 26px 24px 18px;
  min-height: 118px;
}
.businessBox .boxheader .boxlogo img{max-width: 78%; max-height: 82px; height: auto; width: auto;}

.businessBox .boxheader .title{width: 100%; float: none; text-align: center; padding: 0 24px;}

.businessBox .boxheader .title h3{
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  background: none;
  border-bottom: none;
  margin: 0 0 10px;
  padding: 0;
  letter-spacing: -.02em;
}

.businessBox .boxheader .description{
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  text-align: left;
  margin: 0 0 20px;
  padding: 0;
}

/* Contact rows. The :after sprite icons from sitebase.css are kept. */
.businessBox .boxcontact{margin: 0; padding: 0; border-top: 1px solid var(--line);}

.boxcontact p,
.boxcontact a,
.boxcontact span{
  display: block;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid var(--line);
  margin: 0;
  padding: 13px 20px 13px 58px;
  font-size: 15px;
  position: relative;
  transition: background .16s var(--ease);
}
.boxcontact a:last-child{border-bottom: none;}

.boxcontact .address{background: transparent; color: var(--muted); font-size: 14px;}
.boxcontact .url,
.boxcontact .call,
.boxcontact .mail{color: var(--brand); font-weight: 600; font-size: 15px;}
.boxcontact a:hover,
.boxcontact a:focus{background: var(--brand-wash); color: var(--brand-ink);}

/* Sprite sits a little tighter against the new row padding. */
.boxcontact .address:after,
.boxcontact .call:after,
.boxcontact .url:after,
.boxcontact .mail:after{left: 16px; top: 9px; opacity: .75;}

/* --- Card footer --------------------------------------------------------- */

.businessBox .bottomrow{
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  margin-top: auto;
  text-align: left;
}
.businessBox .bottomrow .showHits{
  background-image: url(../images/32x32Icon.png);
  background-color: transparent;
  background-position: 2px -158px;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0 0 0 28px;
  line-height: 30px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}
.businessBox .bottomrow .showHits:after{display: none;}

.businessBox .bottomrow button,
.businessBox .bottomrow button:visited{
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 22px;
  line-height: 1.3;
  height: auto;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.businessBox .bottomrow button:hover,
.businessBox .bottomrow button:focus,
.businessBox .bottomrow button:active{background: var(--brand-ink); color: #fff; transform: translateY(-1px);}

/* --- Article ------------------------------------------------------------- */

.articleSection{
  background: var(--surface);
  border-top: 1px solid var(--line);
  margin-top: 52px;
  padding: 56px 0 64px;
}
.articleSection .contentcover{float: none; max-width: 760px; margin: 0 auto; padding: 0 20px;}
.articleSection .contentcover h2{font-size: 32px; margin: 0 0 18px;}
.articleSection .contentcover h3{font-size: 20px; margin: 34px 0 8px; color: var(--ink);}
.articleSection .contentcover p{margin: 0 0 16px;}

/* --- Interior pages ------------------------------------------------------ */

.aboutUspage,
.contactpage{padding: 52px 0 60px;}
.aboutUspage{background: none;}

.aboutUspage .contentcover,
.contactpage .contentcover{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 40px;
  float: none;
  max-width: 820px;
  margin: 0 auto;
  width: auto;
}
.aboutUspage .contentcover h1,
.contactpage .contentcover h1{font-size: 34px; margin: 0 0 20px;}
.aboutUspage .aboutLeft,
.contactpage .contentLeft{display: none;}

.sitebanner{max-height: 300px; box-shadow: none;}

.contactbtn{
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  padding: 13px 26px;
  border-radius: 999px;
  margin-top: 12px;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.contactbtn:hover,
.contactbtn:focus{background: var(--brand-ink); color: #fff; transform: translateY(-1px);}

/* --- Forms --------------------------------------------------------------- */

.formCover{margin-top: 26px; padding: 0;}
.formCover .form-group{margin-bottom: 18px; padding: 0;}
.formCover .formlabel{
  font-weight: 600;
  color: var(--ink);
  font-size: 15px;
  padding-top: 10px;
}
.formCover input[type=text],
.formCover input[type=email],
.formCover textarea,
.formCover .form-control{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.formCover input:focus,
.formCover textarea:focus,
.formCover .form-control:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
  outline: none;
}
.formCover textarea{min-height: 130px; resize: vertical;}
.formCover .inputcover.error input,
.formCover .inputcover.error textarea{border-color: var(--accent);}

.formError ul{
  background: #fdf2f2;
  border: 1px solid #f6d5d5;
  color: #96222a;
  border-radius: var(--radius-sm);
  padding: 14px 18px 14px 34px;
  margin-bottom: 20px;
}

.formSuccess{
  background: #eefaf3;
  border: 1px solid #bfe7d2;
  border-left: 4px solid #1f9d60;
  color: #16603c;
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.formSuccess strong{display: block; font-size: 17px; margin-bottom: 4px; color: #124a2f;}
.formSuccess p{margin: 0; font-size: 15px; line-height: 1.55;}

.logoPrev .tag{
  display: inline-block;
  background: var(--brand-wash);
  color: var(--brand-ink);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* --- Footer -------------------------------------------------------------- */

.pagefooter{
  background: var(--ink);
  color: rgba(255,255,255,.62);
  padding: 30px 0;
  margin-top: 0;
}
.pagefooter .copyright{margin: 0; font-size: 14px;}

/* --- Popup blocker notice ------------------------------------------------ */

.pupupblock{
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 15px;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 991px){
  .hero h1{font-size: 36px;}
  .hero p{font-size: 17px;}
}

@media (max-width: 767px){
  body{font-size: 16px;}

  .siteheader{position: static; text-align: center;}
  .siteheader .logo img{margin: 0 auto; max-width: 220px;}

  .navcover .container{justify-content: center;}
  .navcover ul{flex-direction: column; gap: 4px; width: 100%; padding: 8px 0;}
  .navcover ul li a{text-align: center; padding: 11px 14px;}

  .hero{padding: 44px 0 48px;}
  .hero h1{font-size: 29px;}

  .listingSection{padding: 36px 0 4px;}
  .sectionHead h2{font-size: 25px;}

  .businessList{grid-template-columns: 1fr; gap: 18px;}

  .articleSection{margin-top: 36px; padding: 40px 0 46px;}
  .articleSection .contentcover h2{font-size: 26px;}

  .aboutUspage .contentcover,
  .contactpage .contentcover{padding: 26px 22px;}
  .aboutUspage .contentcover h1,
  .contactpage .contentcover h1{font-size: 27px;}
}

/* --- Single listing ------------------------------------------------------ */
/* A lone card in the grid sits at 360px with a lot of air either side, which
   reads as "empty directory" rather than "one good listing". When there is
   exactly one card, widen the track so it fills the row deliberately. The
   layout stays single-column - logo above the title - the same as every
   other card. Reverts to the normal grid automatically as soon as a second
   business is added. */

@media (min-width: 768px){
  .businessList:has(.businessBox:only-child){grid-template-columns: minmax(0, 680px);}

  /* Slightly more generous proportions now the card is wider. */
  .businessBox:only-child .boxheader .boxlogo{padding: 32px 24px 22px; min-height: 140px;}
  .businessBox:only-child .boxheader .boxlogo img{max-width: 58%; max-height: 104px;}
  .businessBox:only-child .boxheader .title{padding: 0 40px;}
  .businessBox:only-child .boxheader .title h3{font-size: 24px; margin-bottom: 12px;}
  .businessBox:only-child .boxheader .description{font-size: 16px;}
}