/* =====================================================================
   Horsham Bearings - home page styles (hb-home.css)
   Used by index.php only: welcome section, Shop Now button and the section boxes.
   ===================================================================== */

/* ===== Welcome section ===== */
#content .welcome {
  text-align: center;
  padding: 20px 10px;
  color: #000;
}

#content .welcome-title {
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: clamp(26px, 5vw, 48px);
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 18px;
}

#content .welcome-tagline {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(22px, 4vw, 36px);
  font-weight: bold;
  font-style: italic;
  margin: 0 0 22px;
}

#content .welcome-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(18px, 3vw, 28px);
  line-height: 1.5;
  max-width: 800px;
  margin: 0 auto 22px;
}

#content .welcome-member {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(16px, 2.6vw, 24px);
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.4;
  max-width: 700px;
  margin: 0 auto;
  padding-top: 16px;
  border-top: 3px solid #ff6600;
}
/* ===== Info boxes (Industrial Supplies, Trailer Repairs, Tanks) ===== */
#content .indexBlock h2,
#content .indexBlock h2 * {
  font-family: "Arial Black", Arial, Helvetica, sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

#content .indexBlock p,
#content .indexBlock p *,
#content .indexBlock .blockText,
#content .indexBlock .blockText * {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 28px !important;
  line-height: 1.5 !important;
}

/* Phones: columns stack, headings a little bigger */
@media screen and (max-width: 700px) {
  #content table,
  #content tbody,
  #content tr,
  #content td {
    display: block !important;
    width: 100% !important;
  }

  #content .indexBlock h2,
  #content .indexBlock h2 * {
    font-size: 26px !important;
  }

  #content img {
    max-width: 100% !important;
    height: auto !important;
  }
}
/* ===== Call us link ===== */
#content a[href^="tel:"],
#content a[href^="tel:"]:link,
#content a[href^="tel:"]:visited {
  color: #0066ff !important;
  font-family: "Arial Black", Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  text-decoration: underline !important;
}

#content a[href^="tel:"]:hover,
#content a[href^="tel:"]:focus {
  color: #ff6600 !important;
}
/* ===== Learn More buttons (match the menu style) ===== */
#content a:has(> img[alt="Learn More"]) {
  display: inline-block !important;
  padding: 14px 30px !important;
  background: #333 !important;
  border-bottom: 4px solid #ff6600 !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 6px rgba(0,0,0,.35) !important;
  text-decoration: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transition: background .15s !important;
}

#content a:has(> img[alt="Learn More"]) img {
  display: none !important;
}

#content a:has(> img[alt="Learn More"])::after {
  content: "Learn More";
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #fff;
}

#content a:has(> img[alt="Learn More"]):hover,
#content a:has(> img[alt="Learn More"]):focus {
  background: #ff6600 !important;
}
/* ===== Trailer, Sheds and Tank images: identical size ===== */
#content img[src*="TRAILER2"],
#content img[src*="shed.jpg"],
#content img[src*="index_3"] {
  object-fit: cover !important;
}

/* Desktop and tablet (tank left as it was) */
@media screen and (min-width: 701px) {
  #content img[src*="TRAILER2"],
  #content img[src*="shed.jpg"] {
    width: 160px !important;
    height: 124px !important;
    max-width: 100% !important;
  }

  #content img[src*="TRAILER2"] {
    float: left !important;
    margin: 4px 12px 8px 0 !important;
  }

  #content img[src*="shed.jpg"] {
    float: right !important;
    margin: 4px 0 8px 12px !important;
  }

  #content .indexImage:has(> img[src*="TRAILER2"]) + .blockText,
  #content div:has(> strong > img[src*="shed.jpg"]) + div .blockText {
    text-align: left !important;
  }
}

/* Phones: all four images the same size */
@media screen and (max-width: 700px) {
  #content img[src*="TRAILER2"],
  #content img[src*="shed.jpg"],
  #content img[src*="index_3"] {
    float: left !important;
    display: block !important;
    margin: 4px 12px 8px 0 !important;
  }

  /* one size rule for all four, including Industrial Supplies */
  #content img[src*="TRAILER2"],
  #content img[src*="shed.jpg"],
  #content img[src*="index_3"],
  #content img[src*="DSCN3004"] {
    width: min(234px, 60vw) !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 234 / 161 !important;
    object-fit: cover !important;
  }

  /* stop the image wrappers squeezing or centring the pictures */
  #content .indexImage:has(img[src*="TRAILER2"]),
  #content .indexImage:has(img[src*="index_3"]) {
    float: left !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* left-align the text beside each photo */
  #content .indexImage:has(img[src*="TRAILER2"]) + .blockText,
  #content .indexImage:has(img[src*="index_3"]) + .blockText,
  #content div:has(> strong > img[src*="shed.jpg"]) + div .blockText {
    text-align: left !important;
  }
}
/* Keep the Learn More buttons on their own line */
#content .indexBlock div:has(> a > img[alt="Learn More"]) {
  clear: both !important;
}  
/* ===== Peerless compressors image ===== */
#content img[src*="images/images.jpg"] {
  width: 234px !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 234 / 161 !important;
  object-fit: cover !important;
}

/* Phones: image beside the text, on the left */
@media screen and (max-width: 700px) {
  #content img[src*="images/images.jpg"] {
    float: left !important;
    display: block !important;
    width: min(234px, 60vw) !important;
    max-width: none !important;
    margin: 4px 12px 8px 0 !important;
  }

  #content .indexImage:has(img[src*="images/images.jpg"]) {
    float: left !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #content .indexImage:has(img[src*="images/images.jpg"]) + .blockText {
    text-align: left !important;
  }
}
/* ===== Learn More buttons: identical fixed size on phones ===== */
@media screen and (max-width: 700px) {
  #content .indexBlock a:has(> img[alt="Learn More"]) {
    display: inline-block !important;
    box-sizing: border-box !important;
    width: 180px !important;
    height: 54px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
    vertical-align: top !important;
  }

  #content .indexBlock a:has(> img[alt="Learn More"])::after {
    display: block !important;
    font-size: 18px !important;
    line-height: 50px !important;
    text-align: center !important;
  }
}
/* ===== Info box paragraphs: normal weight everywhere ===== */
#content .indexBlock p,
#content .indexBlock p *,
#content .indexBlock .blockText,
#content .indexBlock .blockText * {
  font-weight: normal !important;
}

/* keep phone number links bold */
#content .indexBlock a[href^="tel:"] {
  font-weight: 900 !important;
}
/* ===== Info boxes: all text left-aligned, buttons centred ===== */
#content .indexBlock p,
#content .indexBlock p *,
#content .indexBlock .blockText,
#content .indexBlock .blockText * {
  text-align: left !important;
}

/* keep the Learn More buttons centred */
#content .indexBlock .blockText:has(> a > img[alt="Learn More"]),
#content .indexBlock .blockText:has(> a > img[alt="Learn More"]) * {
  text-align: center !important;
}
/* ===== Info box photos: full width on desktop, tall left column on phones ===== */

/* Desktop and tablet: photo across the full width, text underneath */
@media screen and (min-width: 701px) {
  #content .indexBlock .indexImage,
  #content .indexBlock div:has(> strong > img[src*="shed.jpg"]) {
    float: none !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
  }

  #content .indexBlock img[src*="DSCN3004"],
  #content .indexBlock img[src*="shed.jpg"],
  #content .indexBlock img[src*="TRAILER2"],
  #content .indexBlock img[src*="index_3"],
  #content .indexBlock img[src*="images/images.jpg"] {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 234 / 161 !important;
    object-fit: cover !important;
    margin: 0 !important;
  }
}

/* ===== Phones: photo full width on top, text underneath ===== */
@media screen and (max-width: 700px) {

  /* Industrial Supplies, Trailer, Tanks, Peerless */
  #content .indexBlock .indexText:has(> .indexImage) {
    display: block !important;
  }
  #content .indexBlock .indexText:has(> .indexImage) > .indexImage {
    float: none !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
  }
  #content .indexBlock .indexText:has(> .indexImage) > .indexImage + .blockText {
    clear: both !important;
  }

  /* Garages & Sheds (photo with or without a link around it) */
  #content .indexBlock div:has(> div > strong > img[src*="shed.jpg"]),
  #content .indexBlock div:has(> div > a > strong > img[src*="shed.jpg"]) {
    display: block !important;
  }
  #content .indexBlock div:has(> div > strong > img[src*="shed.jpg"]) > div:has(> strong > img[src*="shed.jpg"]),
  #content .indexBlock div:has(> div > a > strong > img[src*="shed.jpg"]) > div:has(> a > strong > img[src*="shed.jpg"]) {
    float: none !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
  }
  #content .indexBlock div:has(> div > strong > img[src*="shed.jpg"]) > div:has(> strong > img[src*="shed.jpg"]) + div,
  #content .indexBlock div:has(> div > a > strong > img[src*="shed.jpg"]) > div:has(> a > strong > img[src*="shed.jpg"]) + div {
    display: block !important;
    clear: both !important;
  }

  /* All five photos: full width, same shape as on desktop */
  #content .indexBlock .indexText:has(> .indexImage) > .indexImage img,
  #content .indexBlock div:has(> div > strong > img[src*="shed.jpg"]) > div:has(> strong > img[src*="shed.jpg"]) img,
  #content .indexBlock div:has(> div > a > strong > img[src*="shed.jpg"]) > div:has(> a > strong > img[src*="shed.jpg"]) img {
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 234 / 161 !important;
    object-fit: cover !important;
    margin: 0 !important;
  }
}
/* ===== Industrial & Agricultural Supplies photo (shopfront-ag.jpg): show the whole shopfront ===== */
#content .indexBlock img[src*="shopfront-ag"],
#content .indexBlock .indexText:has(> .indexImage) > .indexImage img[src*="shopfront-ag"] {
  position: static !important;
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1024 / 611 !important;
  object-fit: cover !important;
  margin: 0 !important;
}
#content .indexBlock .indexImage:has(img[src*="shopfront-ag"]) {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}
/* ===== Home page sections: each one in its own bordered box (.hbBox, set in the Power CMS text) ===== */
#content td.indexBlock:has(.hbBox) {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: none !important;
}
#content .hbBox {
  border: 1px solid #282a27;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 18px 0;
  padding-bottom: 14px;
}
#content .hbBox .indexText {
  margin: 5px 10px 0 10px;
}
#content .hbBox .indexText .indexText {
  margin: 0;
}
#content .hbSheds > div {
  margin: 5px 10px 0 10px;
}
@media screen and (max-width: 700px) {
  /* the narrow spacer columns between boxes aren't needed once everything stacks */
  #content td.indexBlock + td:not(.indexBlock) {
    display: none !important;
  }
  /* same gap between the text and the Learn More button in every box */
  #content .indexBlock .blockText:has(+ div > a > img[alt="Learn More"]),
  #content .indexBlock .blockText:has(+ .blockText > a > img[alt="Learn More"]) {
    margin-bottom: 0 !important;
  }
  #content .indexBlock div:has(> a > img[alt="Learn More"]) {
    margin: 14px 0 0 !important;
    padding: 0 !important;
  }
}
/* ===== Desktop home page: same tidy-ups as the phone view, sized for a big screen ===== */
@media screen and (min-width: 701px) {

  /* --- welcome section through to SHOP NOW: fills the rest of the first screen,
         with SHOP NOW the last thing showing at the bottom --- */
  #content .welcome {
    padding: 10px 0 10px !important;
  }
  #content .welcome .welcome-title,
  #content .welcome .welcome-title * {
    font-size: 36px !important;
    line-height: 1.2 !important;
  }
  #content .welcome .welcome-title {
    margin: 0 0 18px !important;
    padding: 16px 20px !important;
    text-align: center !important;
  }
  #content .welcome .welcome-title + p:not([class]) {
    display: none !important;
  }
  #content .welcome .welcome-tagline,
  #content .welcome .welcome-tagline * {
    font-size: 40px !important;
    line-height: 1.2 !important;
  }
  #content .welcome .welcome-tagline {
    margin: 0 0 18px !important;
  }
  #content .welcome .welcome-text,
  #content .welcome .welcome-text * {
    font-size: 26px !important;
    line-height: 1.4 !important;
  }
  #content .welcome .welcome-text {
    max-width: 1000px !important;
    margin: 0 auto 20px !important;
  }
  #content .welcome .welcome-member,
  #content .welcome .welcome-member * {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  #content .welcome .welcome-member {
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding-top: 14px !important;
    border-top-width: 3px !important;
  }

  /* --- online store: intro line and a SHOP NOW button instead of the long web address --- */
  #content h4:has(+ p + h2 a[href*="industrialsuppliesaustralia"]),
  #content h4:has(+ p + h2 a[href*="industrialsuppliesaustralia"]) * {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  #content h4:has(+ p + h2 a[href*="industrialsuppliesaustralia"]) {
    margin: 8px 0 18px !important;
  }
  #content p:has(+ h2 a[href*="industrialsuppliesaustralia"]),
  #content h2:has(a[href*="industrialsuppliesaustralia"]) ~ h2:not(:has(*)):not(.slogan) {
    display: none !important;
  }
  #content h2:has(a[href*="industrialsuppliesaustralia"]) {
    margin: 0 0 50px !important;
    line-height: 1 !important;
    text-align: center !important;
  }
  #content h2:has(a[href*="industrialsuppliesaustralia"]) * {
    font-size: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }
  #content h2 a[href*="industrialsuppliesaustralia"] {
    display: inline-block !important;
    padding: 16px 70px !important;
    background: #333 !important;
    border-bottom: 5px solid #ff6600 !important;
    border-radius: 4px !important;
    box-shadow: 0 3px 6px rgba(0,0,0,.35) !important;
    transition: background .15s;
  }
  #content h2 a[href*="industrialsuppliesaustralia"]::after {
    content: "Shop Now";
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #fff;
  }
  #content h2 a[href*="industrialsuppliesaustralia"]:hover,
  #content h2 a[href*="industrialsuppliesaustralia"]:focus {
    background: #ff6600 !important;
  }

  /* --- section boxes: stacked one under another across the full width (like the phone view) --- */
  #content table,
  #content tbody,
  #content tr,
  #content td {
    display: block !important;
    width: auto !important;
  }
  #content td.indexBlock + td:not(.indexBlock) {
    display: none !important;
  }
  #content .hbBox {
    margin: 0 0 24px 0 !important;
    padding-bottom: 20px !important;
  }

  /* headings across the top of each box */
  #content .hbBox .indexHeader,
  #content .hbBox .indexHeader * {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }

  /* inside each box: photo on the left, text and Learn More button on the right */
  #content .hbBox .indexText:has(> .indexImage),
  #content .hbSheds > div {
    display: grid !important;
    grid-template-columns: 44% 1fr !important;
    column-gap: 28px !important;
    align-items: center !important;
  }
  #content .hbBox .indexText:has(> .indexImage) > *,
  #content .hbSheds > div > * {
    grid-column: 2 !important;
  }
  /* headings inside a box's grid span the full width */
  #content .hbBox .indexText:has(> .indexImage) > h2,
  #content .hbBox .indexText:has(> .indexImage) > div:has(> h2),
  #content .hbSheds > div > div:has(> h2) {
    grid-column: 1 / -1 !important;
    margin-bottom: 14px !important;
  }
  /* the photo */
  #content .hbBox .indexText:has(> .indexImage) > .indexImage,
  #content .hbSheds > div > div:has(img[src*="shed.jpg"]) {
    grid-column: 1 !important;
    grid-row: span 3 !important;
    margin: 0 !important;
    align-self: start !important;
  }
  #content .hbBox .indexImage img,
  #content .hbSheds img[src*="shed.jpg"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    float: none !important;
    margin: 0 !important;
    border-radius: 4px;
  }
  #content .hbBox img[src*="shopfront-ag"] {
    aspect-ratio: 1024 / 611 !important;
  }
  /* the text beside the photo */
  #content .hbBox .blockText,
  #content .hbBox .blockText * {
    font-size: 21px !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }
  /* same gap between the text and the Learn More button in every box */
  #content .indexBlock .blockText:has(+ div > a > img[alt="Learn More"]),
  #content .indexBlock .blockText:has(+ .blockText > a > img[alt="Learn More"]) {
    margin-bottom: 0 !important;
  }
  #content .hbBox .blockText:has(> a > img[alt="Learn More"]),
  #content .hbBox div:has(> a > img[alt="Learn More"]) {
    text-align: left !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
  }
}

/* ===== Home page on phones: text sizes, SHOP NOW button, welcome block and slogan ===== */
@media screen and (max-width: 700px) {
  #content .indexBlock h2,
  #content .indexBlock h2 * {
    font-size: 20px !important;
  }
  #content .indexBlock p,
  #content .indexBlock p *,
  #content .indexBlock .blockText,
  #content .indexBlock .blockText * {
    font-size: 17px !important;
  }
  #content .indexBlock {
    margin-bottom: 14px !important;
  }
  /* online store link: smaller intro line, web address swapped for a SHOP NOW button */
  #content h4:has(+ p + h2 a[href*="industrialsuppliesaustralia"]),
  #content h4:has(+ p + h2 a[href*="industrialsuppliesaustralia"]) * {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  #content h4:has(+ p + h2 a[href*="industrialsuppliesaustralia"]) {
    margin: 0 0 8px !important;
  }
  #content p:has(+ h2 a[href*="industrialsuppliesaustralia"]) {
    display: none !important;
  }
  #content h2:has(a[href*="industrialsuppliesaustralia"]) {
    margin: 0 0 18px !important;
    line-height: 1 !important;
    text-align: center !important;
  }
  #content h2:has(a[href*="industrialsuppliesaustralia"]) * {
    font-size: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }
  #content h2 a[href*="industrialsuppliesaustralia"] {
    display: inline-block !important;
    padding: 9px 30px !important;
    background: #333 !important;
    border-bottom: 4px solid #ff6600 !important;
    border-radius: 4px !important;
    box-shadow: 0 3px 6px rgba(0,0,0,.35) !important;
  }
  #content h2 a[href*="industrialsuppliesaustralia"]::after {
    content: "Shop Now";
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #fff;
  }
  #content h2 a[href*="industrialsuppliesaustralia"]:hover,
  #content h2 a[href*="industrialsuppliesaustralia"]:focus {
    background: #ff6600 !important;
  }
  /* gap between SHOP NOW and the first box: the two blank lines below it removed */
  #content h2:has(a[href*="industrialsuppliesaustralia"]) ~ h2:not(:has(*)):not(.slogan) {
    display: none !important;
  }
  #content h2:has(a[href*="industrialsuppliesaustralia"]) {
    margin-bottom: 33px !important;
  }
  /* slogan at the bottom: always two lines on phones */
  #content h2.slogan {
    font-size: min(32px, 7.8vw) !important;
    line-height: 1.25 !important;
  }
  #content h2.slogan .hbLine {
    display: block;
  }
  /* home page welcome block, sized for a phone */
  #content .welcome {
    padding: 0 2px 8px !important;
  }
  #content .welcome .welcome-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
    margin: 0 0 8px !important;
    padding: 7px 6px !important;
    text-align: center !important;
    letter-spacing: 0 !important;
  }
  #content .welcome .welcome-title * {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  #content .welcome .welcome-title + p:not([class]) {
    display: none !important;
  }
  #content .welcome .welcome-tagline,
  #content .welcome .welcome-tagline * {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  #content .welcome .welcome-tagline {
    margin: 0 0 6px !important;
  }
  #content .welcome .welcome-text,
  #content .welcome .welcome-text * {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  #content .welcome .welcome-text {
    margin: 0 auto 8px !important;
  }
  #content .welcome .welcome-member,
  #content .welcome .welcome-member * {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  #content .welcome .welcome-member {
    padding-top: 8px !important;
    border-top-width: 2px !important;
  }
}