/* OfficeCalculator.Net v59 — compact page headers
   Goal: keep the actual calculator/tool visible above the fold on laptops and phones. */
:root{--oc59-header-gap:12px}

/* Rebuilt calculator headers */
body[data-oc-workspace="stable-v30"] .oc-r47-breadcrumb{
  margin:0 0 9px!important;font-size:.76rem!important;line-height:1.35!important
}
body[data-oc-workspace="stable-v30"] .oc-r47-hero{
  margin:0 0 14px!important;padding:14px 18px!important;border-radius:16px!important;
  box-shadow:0 7px 20px rgba(34,52,84,.045)!important
}
body[data-oc-workspace="stable-v30"] .oc-r47-eyebrow{
  margin:0 0 4px!important;font-size:.66rem!important;letter-spacing:.075em!important;line-height:1.25!important
}
body[data-oc-workspace="stable-v30"] .oc-r47-hero h1{
  margin:0!important;font-size:clamp(1.65rem,3vw,2.35rem)!important;line-height:1.02!important;letter-spacing:-.035em!important
}
body[data-oc-workspace="stable-v30"] .oc-r47-hero>p{
  max-width:920px!important;margin:7px 0 0!important;font-size:.91rem!important;line-height:1.45!important
}
/* Trust details are already represented in the workspace/tool itself. Do not spend a full row above the calculator. */
body[data-oc-workspace="stable-v30"] .oc-r47-hero .oc-r47-trust{display:none!important}

/* Category headers */
body[data-oc-workspace="stable-v30"] .bt-category-hero,
body[data-oc-workspace="stable-v30"] .oc-category-hero{
  margin:0 0 16px!important;padding:17px 20px!important;border-radius:18px!important;
  box-shadow:0 12px 26px rgba(22,56,106,.12)!important
}
body[data-oc-workspace="stable-v30"] .oc-category-hero h1{margin:0 0 6px!important;font-size:clamp(1.65rem,3vw,2.35rem)!important;line-height:1.05!important}
body[data-oc-workspace="stable-v30"] .oc-category-hero p{margin:6px 0 0!important;line-height:1.48!important;font-size:.92rem!important}
body[data-oc-workspace="stable-v30"] .oc-category-hero .oc-category-hero-meta{gap:6px!important;margin-top:9px!important}
body[data-oc-workspace="stable-v30"] .oc-category-hero .oc-category-count,
body[data-oc-workspace="stable-v30"] .oc-category-hero .oc-category-layout-note{padding:5px 9px!important;font-size:.69rem!important}

/* Other legacy/project page hero conventions, only when present. */
body[data-oc-workspace="stable-v30"] .page-hero,
body[data-oc-workspace="stable-v30"] .hero:not(.oc-calculator-app){
  margin-bottom:16px!important;padding-block:18px!important
}

@media(max-width:900px){
  body[data-oc-workspace="stable-v30"] .content{padding-top:12px!important}
  body[data-oc-workspace="stable-v30"] .oc-r47-hero{padding:12px 14px!important;margin-bottom:10px!important;border-radius:14px!important}
  body[data-oc-workspace="stable-v30"] .oc-r47-hero h1{font-size:clamp(1.52rem,6vw,2rem)!important}
  body[data-oc-workspace="stable-v30"] .oc-r47-hero>p{font-size:.86rem!important;line-height:1.4!important;margin-top:5px!important}
  body[data-oc-workspace="stable-v30"] .bt-category-hero,
  body[data-oc-workspace="stable-v30"] .oc-category-hero{padding:14px 15px!important;margin-bottom:12px!important;border-radius:15px!important}
}
@media(max-width:640px){
  /* On phones, prioritize the working calculator over navigational/marketing copy. */
  body[data-oc-workspace="stable-v30"] .oc-r47-breadcrumb{display:none!important}
  body[data-oc-workspace="stable-v30"] .oc-r47-eyebrow{display:none!important}
  body[data-oc-workspace="stable-v30"] .oc-r47-hero{padding:10px 12px!important}
  body[data-oc-workspace="stable-v30"] .oc-r47-hero h1{font-size:1.48rem!important}
  body[data-oc-workspace="stable-v30"] .oc-r47-hero>p{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  body[data-oc-workspace="stable-v30"] .oc-category-hero .oc-category-hero-meta{display:none!important}
  body[data-oc-workspace="stable-v30"] .oc-category-hero p{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* v60 — prevent dynamically inserted trust chips from touching/overlapping page titles.
   workspace-v40.js inserts .oc30-trust-row immediately after the H1. */
body[data-oc-workspace="stable-v30"] .oc-r47-hero > h1 + .oc30-trust-row,
body[data-oc-workspace="stable-v30"] .content > h1 + .oc30-trust-row{
  margin:10px 0 12px!important;
  position:relative!important;
  transform:none!important;
}
body[data-oc-workspace="stable-v30"] .oc-r47-hero .oc30-trust-chip{
  line-height:1.2!important;
}
@media(max-width:640px){
  body[data-oc-workspace="stable-v30"] .oc-r47-hero > h1 + .oc30-trust-row,
  body[data-oc-workspace="stable-v30"] .content > h1 + .oc30-trust-row{
    margin:9px 0 10px!important;
    gap:6px!important;
  }
}

