/* ==========================================================================
   Sterling Signs Melbourne: site-wide styles
   Paste into Site Styling > Custom Styles.

   A replica of www.sterlingsigns.com.au: white header, cyan (#00AEEF) accents,
   Open Sans, grey title bands and a charcoal footer.

   - Every class and custom property of our own starts with ss- / --ss-.
   - Element rules only apply inside our own .ss-section.
   - The only Bootstrap classes styled are a CMS Form's .form-control and .btn,
     inside the form's own .cms-form-wrapper (every form on this site is ours).
   - Light only: the original site has no dark mode.
   ========================================================================== */

:root{
  --primary:#00AEEF;
  --highlight:#00AEEF;
  --info:#00AEEF;
  --secondary:#7A7A7A;
  --body:#393939;
  --surface:#FFFFFF;
  --on-primary:#FFFFFF;
  --site-background:#F5F5F5;
  --font-family-body:"Open Sans",Arial,sans-serif;
  --font-family-headings:"Open Sans",Arial,sans-serif;

  --ss-accent:var(--primary);
  --ss-accent-dark:#0096CE;
  --ss-ink:#393939;
  --ss-text:#7A7A7A;          /* the original's #8D8D8D, darkened a little to read on grey */
  --ss-sub:#5D5D5D;
  --ss-grey:#F5F5F5;
  --ss-white:#FFFFFF;
  --ss-band:#585858;
  --ss-foot:#393939;
  --ss-foot-text:#A2A2A2;
  --ss-rule:#E5E5E5;
  --ss-f:"Open Sans",Arial,sans-serif;
  --ss-f-quote:"Crete Round",Georgia,serif;
  --ss-wide:950px;
}

body,.site-layout{background:var(--ss-grey);font-family:var(--ss-f)}

/* ---------- the <footer> the Site Footer block sits in, and the copyright line under it ---------- */
.content-wrapper > footer{background:var(--ss-foot);color:var(--ss-foot-text);margin-top:0;font-family:var(--ss-f);font-size:14px}
.content-wrapper > footer .footer-content{max-width:none;margin:0;padding:0}
.content-wrapper > footer #versionInfo{display:flex;flex-direction:column;align-items:center;padding:12px 15px;background:var(--ss-white);color:#5D5D5D;font-size:13px;line-height:1.35}
.content-wrapper > footer #versionInfo a{color:#393939;text-decoration:none}
.content-wrapper > footer #versionInfo p{margin:0}
.content-wrapper > footer #versionInfo p a{color:var(--ss-accent)}
.content-wrapper > footer #versionInfo a:hover{text-decoration:underline}

/* ---------- page content ---------- */
#cms-content-style{
  .cms-content-wrapper{padding-bottom:0}

  .ss-section{width:100%;font-family:var(--ss-f);font-size:14px;line-height:23px;color:var(--ss-text);-webkit-font-smoothing:antialiased}
  .ss-section.ss-white{background:var(--ss-white)}
  .ss-section.ss-grey{background:var(--ss-grey)}
  .ss-wrap{max-width:var(--ss-wide);margin:0 auto;padding-inline:15px}

  .ss-section :is(h1,h2,h3,h4,h5,h6){font-family:var(--ss-f);color:var(--ss-ink);margin:0}
  .ss-section p{margin:0 0 14px}
  .ss-section :where(a){color:var(--ss-accent);text-decoration:none}
  .ss-section :where(a):hover{color:var(--ss-accent-dark);text-decoration:underline}
  .ss-section :focus-visible{outline:2px solid var(--ss-accent);outline-offset:2px}
  .ss-section img{max-width:100%;height:auto}

  .ss-h5{font-size:18px;line-height:26px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:22px!important}
  .ss-display{font-size:40px;line-height:48px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
  .ss-kicker{font-size:13px;line-height:20px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#8B8B8B!important}
  @media (max-width:767px){.ss-display{font-size:28px;line-height:34px;letter-spacing:1px}}

  /* the cyan button */
  .ss-button{display:inline-block;font-family:var(--ss-f);font-size:11px;line-height:35px;height:35px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:0 21px;background:var(--ss-accent);color:var(--ss-white);border:0;border-radius:0;text-decoration:none;transition:background .2s}
  .ss-button:hover{background:#393939;color:var(--ss-white);text-decoration:none}
  .ss-button.ss-button-big{font-size:13px;line-height:44px;height:44px;padding:0 24px;letter-spacing:1.5px}

  /* title band at the top of the inner pages */
  .ss-band{background:var(--ss-band);padding:13px 0 12px}
  .ss-band h1{color:var(--ss-white);font-size:34px;line-height:58px;font-weight:700;letter-spacing:3px;text-transform:uppercase}
  .ss-band-quiet{padding:22px 0}
  .ss-band-quiet h1{font-size:20px;line-height:40px;font-weight:400;font-style:italic;letter-spacing:0;text-transform:none}
  .ss-band-image{background-size:cover;background-position:center 40%;padding:0;min-height:280px;display:flex;align-items:center}
  .ss-band-image .ss-wrap{width:100%}
  .ss-band-image h1{font-size:46px;letter-spacing:4px;text-shadow:0 1px 8px rgba(0,0,0,.35)}
  @media (max-width:767px){.ss-band:not(.ss-band-quiet) h1{font-size:24px;line-height:40px;letter-spacing:2px}.ss-band-image{min-height:180px}.ss-band-image h1{font-size:32px}}

  /* home: slider */
  .ss-hero{background:var(--ss-grey)}
  .ss-hero .carousel-wrapper{max-width:var(--ss-wide);margin:0 auto;aspect-ratio:1100/400;min-height:0;background:var(--ss-white)}
  .ss-hero .carousel-item img.ss-slide{width:100%;height:100%;object-fit:cover;display:block}
  .ss-hero .carousel-button{border-radius:0;box-shadow:none;background:rgba(160,160,160,.7);color:var(--ss-white);padding:0;width:40px;height:42px;font-size:14px}
  .ss-hero .carousel-button:hover{background:rgba(110,110,110,.9)}
  .ss-hero .carousel-button-back{left:0}
  .ss-hero .carousel-button-next{right:0}
  @media (max-width:767px){.ss-hero .carousel-wrapper{aspect-ratio:11/6}}

  /* home: intro */
  .ss-intro{padding:75px 0 55px}

  /* home: product cards */
  .ss-browse{padding:70px 0 50px}
  .ss-browse .ss-display{margin-bottom:22px}
  .ss-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 25px}
  .ss-card{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:40px}
  .ss-card h3{font-size:14px;line-height:22px;font-weight:600;margin-bottom:9px}
  .ss-card h3 a{color:var(--ss-accent)}
  .ss-card img{width:100%;aspect-ratio:5/3;object-fit:cover;display:block;margin-bottom:22px}
  .ss-card p{margin-bottom:16px}
  @media (max-width:991px){.ss-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:560px){.ss-cards{grid-template-columns:1fr}}

  /* home: clients */
  .ss-clients-head{padding:70px 0 20px}
  .ss-clients{background:var(--ss-white);padding:0 0 70px}
  .ss-clients .hs-wrapper{max-width:var(--ss-wide);margin:0 auto;padding-inline:15px}
  .ss-clients .hs-item{flex:0 0 20%;max-width:20%;padding:0 12px}
  .ss-clients .ss-client{height:90px;display:flex;align-items:center;justify-content:center}
  .ss-clients .hs-container img{height:auto;max-height:60px;max-width:100%;width:auto;object-fit:contain}
  .ss-clients .hs-button{top:50%;transform:translateY(-50%);padding:.6rem .8rem;box-shadow:none;background:rgba(0,0,0,.06);border-radius:0}
  @media (max-width:991px){.ss-clients .hs-item{flex-basis:33.333%;max-width:33.333%}}
  @media (max-width:575px){.ss-clients .hs-item{flex-basis:50%;max-width:50%}}

  /* call-to-action band */
  .ss-cta{padding:58px 0}
  .ss-cta .ss-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .ss-cta p{margin:0;font-family:var(--ss-f-quote);font-style:italic;font-size:17px;color:#8D8D8D}
  .ss-cta .ss-button{font-size:12px;height:33px;line-height:33px}

  /* product pages: list, copy, quote form */
  .cms-row.ss-product{max-width:var(--ss-wide);margin:0 auto;padding:30px 15px 70px;gap:0 30px;align-items:flex-start}
  .ss-sidenav{padding-top:5px}
  .ss-sidenav h2{background:var(--ss-accent);color:var(--ss-white);font-size:13px;line-height:20px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:12px 18px;margin-bottom:20px}
  .ss-sidenav ul{list-style:none;margin:0;padding:0}
  .ss-sidenav li{line-height:25px}
  .ss-sidenav a{color:#8D8D8D!important;font-style:italic;font-size:13px}
  .ss-sidenav a:hover{color:var(--ss-accent)!important;text-decoration:none!important}
  .ss-product-body{padding-top:10px}
  .ss-product-body .ss-lede{font-size:26px;line-height:34px;font-weight:400;font-style:italic;color:var(--ss-sub);margin-bottom:18px}
  .ss-product-body h3{font-size:18px;line-height:26px;font-weight:400;font-style:italic;color:var(--ss-sub);margin:8px 0 12px}
  .ss-product-body p{font-size:13px;line-height:22px}
  .ss-scroll-note{font-size:11px!important;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#8D8D8D;margin:26px 0 26px!important}
  .ss-works{display:grid;gap:26px}
  .ss-work{margin:0}
  .ss-work img{display:block;width:100%;height:auto;margin-bottom:12px}
  .ss-work h4{font-size:17px;line-height:24px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px}
  .ss-work p{margin:0}
  @media (max-width:800px){.cms-row.ss-product{padding:24px 16px 50px;gap:30px}.ss-sidenav{display:none}}

  /* products index */
  .ss-product-tiles{padding-top:5px}
  .ss-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 25px}
  .ss-tile{display:block;text-decoration:none!important}
  .ss-tile-pics{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;margin-bottom:14px}
  .ss-tile-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s}
  .ss-tile-pics .ss-tile-alt{opacity:0}
  .ss-tile:hover .ss-tile-alt,.ss-tile:focus-visible .ss-tile-alt{opacity:1}
  .ss-tile-label{display:block;color:var(--ss-accent);font-size:13px;line-height:19px;font-weight:600}
  @media (max-width:991px){.ss-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media (max-width:560px){.ss-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}}

  /* about */
  .ss-about{padding:40px 0 30px}
  .ss-about-flush{padding:10px 0 50px}
  .ss-about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:start}
  .ss-about-text .ss-h5{font-size:13px;line-height:20px;margin-bottom:18px!important}
  .ss-about-text .ss-display{margin:10px 0 20px}
  .ss-about-text p{font-size:13.5px}
  .ss-about-text .ss-button{margin-top:10px}
  .ss-about figure{margin:0}
  .ss-about figure img{display:block;width:100%;height:auto;margin-bottom:12px}
  .ss-about figcaption{font-size:13px;line-height:22px}
  .ss-about-photos{display:grid;grid-template-columns:1fr 1fr;gap:25px 25px;padding-top:10px}
  .ss-about-photos figure:nth-child(-n+2) img{aspect-ratio:3/4;object-fit:cover}
  .ss-about-photos figure:nth-child(n+3) img{aspect-ratio:4/3;object-fit:cover}
  .ss-bullets{list-style:none;margin:0 0 26px;padding:0;font-size:13.5px;line-height:22px}
  .ss-bullets li::before{content:"• "}
  @media (max-width:800px){.ss-about-grid{grid-template-columns:1fr}}

  /* gallery */
  .ss-gallery{max-width:var(--ss-wide);margin:0 auto;padding:30px 15px 60px}
  .ss-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .ss-gallery-tile{display:block;background:var(--ss-white);text-decoration:none!important}
  .ss-gallery-tile img{display:block;aspect-ratio:550/498;width:100%;height:auto;object-fit:cover;transition:opacity .3s}
  .ss-gallery-tile:hover img,.ss-gallery-tile:focus-visible img{opacity:.75}
  .ss-gallery-title{display:block;padding:20px 20px 4px;font-size:13px;line-height:20px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ss-ink)}
  .ss-gallery-tile:hover .ss-gallery-title{color:var(--ss-accent)}
  .ss-gallery-cat{display:block;padding:0 20px 30px;font-size:13px;font-style:italic;color:#8D8D8D}
  @media (max-width:768px){.ss-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:499px){.ss-gallery-grid{grid-template-columns:1fr}}

  /* gallery entries: the slider beside its details, then previous / gallery / next */
  .cms-row.ss-pf{max-width:var(--ss-wide);margin:0 auto;padding:60px 15px 30px;gap:0 30px;align-items:flex-start}
  .ss-pf .carousel-wrapper{aspect-ratio:4/3;min-height:0;background:var(--ss-white)}
  .ss-pf .carousel-item img.ss-pf-slide{width:100%;height:100%;object-fit:contain;display:block}
  .ss-pf .carousel-button{border-radius:0;box-shadow:none;background:rgba(160,160,160,.7);color:var(--ss-white);padding:0;width:40px;height:42px;font-size:14px}
  .ss-pf .carousel-button:hover{background:rgba(110,110,110,.9)}
  .ss-pf .carousel-button-back{left:0}
  .ss-pf .carousel-button-next{right:0}
  .ss-pf-details h2{font-size:22px;line-height:30px;font-weight:600;margin-bottom:24px!important}
  .ss-pf-details h3{font-size:12px;line-height:20px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px!important}
  .ss-pf-details p{margin-bottom:18px}
  .ss-pf-nav{max-width:var(--ss-wide);margin:0 auto;padding:10px 15px 70px;display:flex;justify-content:space-between;align-items:center;font-size:22px}
  .ss-pf-nav a{color:#8D8D8D!important;text-decoration:none!important;width:40px;text-align:center}
  .ss-pf-nav a:hover{color:var(--ss-accent)!important}
  .ss-pf-prev,.ss-pf-next{width:40px}
  /* stacked, the columns have no width of their own, so the slider needs them stretched */
  @media (max-width:800px){.cms-row.ss-pf{padding:30px 16px 10px;gap:24px;align-items:stretch}}

  /* contact details */
  .ss-details{padding:45px 0 50px}
  .ss-details-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .ss-detail{display:flex;gap:18px;align-items:flex-start}
  .ss-icon{flex:none;width:52px;height:52px;border-radius:50%;background:var(--ss-accent);color:var(--ss-white);display:grid;place-items:center;font-size:20px}
  .ss-detail h2{font-size:11px;line-height:20px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:0 0 6px}
  .ss-detail p{font-size:12px;line-height:22px;margin:0}
  .ss-detail a{color:var(--ss-text)}
  @media (max-width:991px){.ss-details-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}}
  @media (max-width:480px){.ss-details-grid{grid-template-columns:1fr}}

  /* the quote and contact forms (CSS class ss-form on the form) */
  .ss-quote,.ss-contact{max-width:var(--ss-wide);margin:0 auto;padding:30px 15px 60px}
  .ss-quote .cms-form-wrapper{max-width:640px;margin-left:0}
  .ss-contact{padding-top:45px}
  .cms-form-wrapper{padding:0}
  .cms-form-wrapper .ss-form-title{font-family:var(--ss-f);font-size:26px;line-height:34px;font-weight:400;font-style:italic;color:var(--ss-sub);margin:0 0 14px}
  .cms-form-wrapper .ss-form-title.ss-display{font-size:30px;line-height:40px;font-weight:800;font-style:normal;letter-spacing:2px;text-transform:uppercase;color:var(--ss-ink);margin-bottom:20px}
  .cms-form-wrapper .ss-form-thanks{font-family:var(--ss-f);font-size:14px;color:var(--ss-text)}
  .cms-form-wrapper .form-group{padding:0;margin-bottom:14px}
  .cms-form-wrapper label{font-family:var(--ss-f);font-size:12px;font-weight:400;color:#8D8D8D;margin-bottom:4px}
  .cms-form-wrapper .form-control{font-family:var(--ss-f);font-size:13px;color:#5D5D5D;background:var(--ss-white);border:0;border-radius:0;box-shadow:none;height:41px;padding:10px 15px}
  .cms-form-wrapper textarea.form-control{height:180px}
  .cms-form-wrapper .form-control:focus{box-shadow:0 0 0 2px var(--ss-accent)}
  .cms-form-wrapper .btn{font-family:var(--ss-f);font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;border-radius:0;border:0;height:37px;padding:0 22px}
  .cms-form-wrapper .btn-primary{background:var(--ss-accent);color:var(--ss-white)}
  .cms-form-wrapper .btn-primary:hover,.cms-form-wrapper .btn-primary:focus{background:#393939;color:var(--ss-white)}
  .cms-form-wrapper .btn-primary .fa-floppy-disk{display:none}
  /* the original forms have no Clear button */
  .cms-form-wrapper .cms-form-canvas .btn-secondary{display:none}
  /* the narrow form beside a product: the reCAPTCHA box is 304px wide */
  .cms-row.ss-product .cms-form-wrapper iframe[title*="reCAPTCHA"]{transform:scale(.68);transform-origin:0 0}
  .cms-row.ss-product .cms-form-wrapper div:has(> div > iframe[title*="reCAPTCHA"]){height:54px;overflow:visible}
}