/* ==========================================================================
   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)}

/* ---------- header ---------- */
.site-layout > header{background:var(--ss-white);box-shadow:none}
.site-layout > header.sticky-header{box-shadow:0 1px 3px rgba(0,0,0,.12)}
.site-layout > header .header-wrapper{max-width:var(--ss-wide);margin:0 auto;width:100%;padding-inline:15px}
.site-layout > header .navbar{padding:0;min-height:82px;transition:min-height .3s}
.site-layout > header.sticky-header .navbar{min-height:48px}
.site-layout > header .navbar-brand{padding:6px 0;margin:0}
.site-layout > header .logo{height:70px;padding:0;width:auto}
.site-layout > header.sticky-header .logo{height:40px}
.site-layout > header .nav-link{font-family:var(--ss-f);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#303030;padding:.5rem 0!important;margin:0!important}
.site-layout > header .nav-item:hover > .nav-link,
.site-layout > header .nav-item:hover .btn-group > .nav-link,
.site-layout > header .nav-link:hover,
.site-layout > header .nav-link.active{color:var(--ss-accent)}
.site-layout > header .nav-item{border:0;border-radius:0}
.site-layout > header .navbar-menu-line{background-color:#303030;width:28px}
/* the Products drop-down */
.site-layout > header .dropdown-menu{border:0;border-top:3px solid var(--ss-accent);border-radius:0;padding:.4rem 0;min-width:15rem;background:#262626;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.site-layout > header .dropdown-item{font-family:var(--ss-f);font-size:12px;font-weight:400;color:#B4B4B4;padding:.45rem 1.1rem;white-space:nowrap}
.site-layout > header .dropdown-item:hover,
.site-layout > header .dropdown-item:focus,
.site-layout > header .dropdown-item.active{background:transparent;color:var(--ss-white)}
@media (min-width:992px){
  .site-layout > header .navbar-collapse menu[data-section="1"]{gap:0 2.4rem;margin-left:auto}
  /* the platform pushes the search button right; here it follows the menu */
  .site-layout > header .navbar-collapse menu[data-section="2"]{margin-left:1.6rem}
}
@media (max-width:991.98px){
  .site-layout > header .logo{height:44px}
  .site-layout > header .navbar{min-height:60px}
  .site-layout > header .navbar-collapse{background:var(--ss-white)}
  .site-layout > header .nav-link{font-size:15px}
  .site-layout > header .dropdown-menu{background:transparent;border:0;box-shadow:none}
  .site-layout > header .dropdown-item{color:var(--ss-text);font-size:14px}
  .site-layout > header .dropdown-item:hover{color:var(--ss-accent)}
}

/* ---------- footer ---------- */
.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 #cmsContent{display:block;margin:0;max-width:var(--ss-wide);margin-inline:auto;padding:75px 15px 70px}
.content-wrapper > footer #versionInfo{display:flex;flex-direction:column;align-items:center;margin:0;padding:12px 15px;background:var(--ss-white);color:#5D5D5D;font-size:13px;line-height:1.35}
.content-wrapper > footer #versionInfo p{margin:0}
.content-wrapper > footer #versionInfo a{color:#393939;text-decoration:none}
.content-wrapper > footer #versionInfo p a{color:var(--ss-accent)}
.content-wrapper > footer #versionInfo a:hover{text-decoration:underline}
.content-wrapper > footer .ss-foot{display:grid;grid-template-columns:1fr 1fr;gap:0}
.content-wrapper > footer .ss-foot-brand{padding-right:30px;align-self:start}
.content-wrapper > footer .ss-foot-brand img{display:block;width:100%;max-width:430px;height:auto;margin:20px 0 70px auto}
.content-wrapper > footer .ss-foot-brand p{margin:0;line-height:1.75}
.content-wrapper > footer .ss-foot-brand em{font-size:18px;color:#C8C8C8;margin-right:4px}
.content-wrapper > footer .ss-foot a{color:var(--ss-foot-text);text-decoration:none}
.content-wrapper > footer .ss-foot a:hover{color:var(--ss-white)}
.content-wrapper > footer .ss-foot-products{border-left:1px solid #4A4A4A;padding-left:25px}
.content-wrapper > footer .ss-foot-products h2{font-family:var(--ss-f);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ss-white);margin:0 0 15px}
.content-wrapper > footer .ss-foot-products ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
@media (max-width:767px){
  .content-wrapper > footer #cmsContent{padding:50px 16px}
  .content-wrapper > footer .ss-foot{grid-template-columns:1fr;gap:40px}
  .content-wrapper > footer .ss-foot-brand{padding-right:0}
  .content-wrapper > footer .ss-foot-brand img{margin:0 0 30px;max-width:300px}
  .content-wrapper > footer .ss-foot-products{border-left:0;padding-left:0}
}

/* ---------- 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 .image-gallery-content{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin:0}
  .ss-gallery-tile{margin:0;background:var(--ss-white);height:100%}
  .ss-gallery-tile img{aspect-ratio:550/498;width:100%;height:auto!important;object-fit:cover}
  .ss-gallery-tile figcaption{padding:20px 20px 38px;font-family:var(--ss-f);font-size:13px;line-height:20px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ss-ink)}
  @media (max-width:768px) and (min-width:500px){.ss-gallery .image-gallery-content > *{grid-column:span 6!important}}

  /* 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}
}