/* Buttons that sit inside a gold/copper gradient callout box (the ones with
   the inline background:linear-gradient(135deg,rgb(255,196,139)...) should
   be a solid brand copper rather than repeating the gradient - two gradients
   stacked on top of each other reads muddy. */
[style*="linear-gradient(135deg,rgb(255,196,139)"] .wp-block-button__link {
  background: #CE8341 !important;
}

/* Heritage team cards use the brand gold surface with teal typography. */
.team-member.heritage-team-card {
  background: #CE8341 !important;
  color: var(--wp--preset--color--accent-1) !important;
}
.team-member.heritage-team-card .title,
.team-member.heritage-team-card .job-role,
.team-member.heritage-team-card .clamped-text {
  color: var(--wp--preset--color--accent-1) !important;
}
.team-member.heritage-team-card .job-role {
  margin-bottom: 1rem;
}
.team-member.heritage-team-card .clamped-text {
  text-align: center;
  margin-top: .25rem;
}
.team-member.heritage-team-card .rh-readmore {
  color: var(--wp--preset--color--accent-1) !important;
  margin-top: .75rem;
}

/* Force all blog posts to stack in a single column on small screens */
@media (max-width: 767px) {
  .blog-posts {
    display: block !important; /* disables grid/flex behaviour */
  }

  .blog-post {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
  }

  .blog-post .image {
    width: 100%;
    aspect-ratio: 5 / 4; /* keeps consistent image height */
    background-size: cover;
    background-position: center;
  }
}

.bb\:block-background.bb\:block-background--image.cbb-bg-image[style*="rings-background.svg"] {
  background-size: 20% !important;
}

/* ===== Global Top Bar ===== */
#fbf-topbar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999;
  background: #f5f5f5; /* change if needed */
  color: #004745; /* text colour */
  font-size: 14px;
  line-height: 1.2;
  /* Force the bar to exactly the 48px that the header offset / body padding
     reserve for it, so the sticky header sits flush underneath with no gap
     that scrolling content could show through. */
  min-height: 48px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

#fbf-topbar .fbf-topbar-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

#fbf-topbar .fbf-topbar-text{
  font-weight: 600;
  text-align: center;
}

/* ===== Button ===== */
#fbf-topbar .fbf-topbar-cta a,
#fbf-topbar .fbf-topbar-cta .download-link,
#fbf-topbar .fbf-topbar-cta .dlm-download-link{
  display: inline-block;
  background: #004745 !important;
  color: #fff !important;
  text-decoration: none !important;
  padding: 6px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

/* Heritage London Markets has no sticky topbar promo banner, so #main-header
   sits flush at the top of the viewport (base.css default: top:0). The
   #fbf-topbar rules above are unused (no matching element on this site) and
   are kept only in case a future promo banner is reintroduced. */

/* ===== Fix: keep WP admin bar visible ===== */

/* Desktop admin bar is 32px tall */
body.admin-bar #fbf-topbar{
  top: 32px;
}

/* Mobile admin bar is 46px tall */
@media (max-width: 782px){
  body.admin-bar #fbf-topbar{
    top: 46px;
  }
}

.white-bg

{background: white;
padding: 10px;
border-radius: 8px;}

.place-details-compact-container
{display: none !important;}

/* ==========================================
   PLAIN TEXT PAGES (complaints, cookies, claims, legal, privacy-policy) +
   the downloads list. Their content sat edge-to-edge because it isn't wrapped
   in a .content-section. Constrain it to the same width/padding as the header
   so the text lines up with the logo and last menu item. The :not() guard
   leaves hero pages (whose page-body holds a full-width hero) alone.
   ========================================== */
main > .page-body:not(:has(.hero-bento)),
.rh-download-library {
  width: var(--content-width);
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  box-sizing: border-box;
}
@media (max-width: 1300px) and (min-width: 1024px) {
  main > .page-body:not(:has(.hero-bento)),
  .rh-download-library {
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Simple hero title panels that sit in the first column (Downloads, Blog):
   the panel bleeds to the screen edge, so the bare title ran off the left.
   Vertically centre it and shift it right so it lines up with the page
   content, matching the live site. */
.hero-bento .wp-block-columns > .wp-block-column:first-child > .corner-gradient:has(> h1):not(:has(.wp-block-buttons)):not(:has(.wp-block-spacer)) {
  display: grid;
  align-content: center;
  padding: 48px;
}
.hero-bento .wp-block-columns > .wp-block-column:first-child > .corner-gradient:has(> h1):not(:has(.wp-block-buttons)):not(:has(.wp-block-spacer)) > h1 {
  margin-left: max(0px, calc((100vw - var(--content-width)) / 2 - 24px));
}

/* ==========================================
   HERO BENTO — match live site
   The live site centres the icon inside each icon tile and rounds every
   photo / tile. Tiles that bleed off a screen edge are rounded only on
   their inner corners. This block reproduces that; it applies to the
   hero on every page (they all use .hero-bento).
   ========================================== */

/* Centre the icons (medal, house, shield, etc.) within their tiles */
.hero-bento .cbb-block:has(> figure.wp-block-image) {
  display: grid;
  place-content: center;
}
.hero-bento .cbb-block > figure.wp-block-image { margin: 0; }

/* Round every bento photo / gradient tile (interior tiles = all corners) */
.hero-bento .cbb-block[style*="background-image"],
.hero-bento .cbb-block[style*="linear-gradient"] {
  border-radius: 10px;
}

/* Left column bleeds off the screen's LEFT edge -> round inner (right) corners only */
.hero-bento .flex-reach-content .cbb-block[style*="background-image"],
.hero-bento .flex-reach-content .cbb-block[style*="linear-gradient"] {
  border-radius: 0 10px 10px 0;
}

/* Right-hand info panel (Tel box) bleeds off the RIGHT edge -> round inner (left) corners only */
.hero-bento .stack.flex-2 > .corner-gradient {
  border-radius: 10px 0 0 10px;
}

/* Inner-page heroes (products / product sub-pages / sector-expertise / sector
   sub-pages): the Tel / info panels sit inside the content area (not against a
   screen edge), so they round on all four corners like the live site. The home
   page's edge Tel box keeps its partial radius via the more specific rule above. */
.hero-bento .corner-gradient {
  border-radius: 10px;
}

/* Sector-expertise grid: restore the 16px gaps between the sector cards and
   centre the CTA button (headings/icons are already centred by the card).
   Scoped to card rows that contain a button, so other column layouts that
   set their own inline gap are unaffected (inline wins anyway). */
.wp-block-columns:has(.corner-gradient > .wp-block-buttons) {
  gap: var(--wp--preset--spacing--20);
  /* vertical gap between the stacked rows of sector cards (each row is
     individually wrapped, so the generic row-gap rule can't reach them) */
  margin-top: var(--wp--preset--spacing--20);
}
.corner-gradient:has(> figure.wp-block-image) .wp-block-buttons {
  justify-content: center;
}

/* Icon + button cards (product grid, sector grid): make cards equal height and
   pin the button to the bottom so buttons line up even when a title wraps to
   more lines (e.g. "Professional Indemnity Insurance"). */
.corner-gradient:has(> figure.wp-block-image):has(.wp-block-buttons) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.corner-gradient:has(> figure.wp-block-image) .wp-block-buttons {
  margin-top: auto !important;
}

/* Product / sector sub-page hero title panel: the live site distributes the
   title (top) and the CTA button (bottom) using grid + space-between, so the
   button sits low in the panel. Scoped to panels that contain a spacer (the
   sub-page hero pattern) so the home hero (title + paragraph + button) is
   untouched. */
.hero-bento .cbb-block:has(> h1.wp-block-heading):has(> .wp-block-spacer) {
  display: grid;
  align-content: space-between;
}

/* Sub-page hero: the wide photo band at the top of the right-hand stack was
   collapsing very thin (e.g. the "Security" image on Cyber Insurance). Give it
   a sensible minimum height so it reads as a proper image band. */
.hero-bento .stack > .wp-block-columns:first-child:has(.cbb-block[style*="background-image"]) {
  min-height: 120px;
}

/* Contact page: space between the "Give us a call" phone box and the
   "Send us a message" form box (nested-corner-gradient container). */
.corner-gradient:has(> .corner-gradient) {
  margin-top: var(--wp--preset--spacing--30);
}

/* Keep the hero Tel number on one line (e.g. London Market's longer
   "020 4616 3348" was wrapping to two lines). */
.hero-bento .bold-highlight {
  white-space: nowrap;
}

/* "Contact us" CTA banner: rounded corners, a gap above it, and a vertically
   centred Email label + button row (matches the live site). */
.corner-gradient.has-accent-1-background-color {
  border-radius: 10px;
  margin-top: var(--wp--preset--spacing--20);
}
/* CTA email row: vertically centre the "Email:" label with the button and put
   a gap between them. Broadened to any CTA banner (not just the accent-1 one)
   so every page using this pattern is covered. */
.corner-gradient .wp-block-group:has(> .wp-block-buttons) {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Drop the label's bottom margin so it centres cleanly against the button
   (the 16px margin was pushing the button ~8px below the "Email:" text). */
.corner-gradient .wp-block-group:has(> .wp-block-buttons) > p {
  margin: 0;
}

/* Icon panels outside the hero (e.g. About page "We analyse your business"
   magnifying-glass tile): centre the icon both axes, like the live site. */
.cbb-block.has-vivid-cyan-blue-to-vivid-purple-gradient-background:has(> figure.wp-block-image),
.cbb-block.has-background:has(> figure.wp-block-image.aligncenter) {
  display: grid;
  place-content: center;
}

/* Columns given an explicit width (flex-basis) should hold that width and not
   grow — WordPress renders them as flex:0 0 <basis>, but the rebuild's base
   rule (flex:1) let them grow. This squashed the Specialist Industries image
   column (products) and the About "Our Promise" image out of proportion.
   Scoped to ~33% image columns so text/card columns still flex normally. */
.wp-block-column[style*="flex-basis:33"]:has(> .cbb-block[style*="background-image"]) {
  flex-grow: 0;
}

/* Restore WordPress's 16px block gap between consecutive column rows.
   The static rebuild dropped the theme's --wp--style--block-gap, so stacked
   sections (e.g. the Specialist Industries rows — Haulage / Manufacturing —
   and general section-to-section spacing on product & sector pages) sat flush
   against each other. Inline margins (e.g. footer's margin-top) still win. */
.wp-block-columns + .wp-block-columns {
  margin-top: var(--wp--preset--spacing--20);
}

/* Vertical gap between stacked "row" cards (e.g. Specialist Industries list).
   Scoped to cards that wrap their content in a .wp-block-group flex row, so
   product cards / hero panels (which don't) are unaffected. */
.corner-gradient:has(> .wp-block-group) + .corner-gradient:has(> .wp-block-group) {
  margin-top: var(--wp--preset--spacing--20);
}

/* ==========================================
   OUR TEAM: "Read more" expander for clamped bios
   ========================================== */
.team-member .clamped-text.rh-expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
}
.team-member .rh-readmore {
  display: inline-block;
  margin-top: .5rem;
  background: none;
  border: 0;
  padding: 0;
  color: var(--wp--preset--color--accent-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.team-member .rh-readmore:hover { opacity: .85; }

/* ==========================================
   FOOTER partner cards (SRT / First Business Finance)
   Live site keeps these in a ~700px row (two 342px cards), not full width.
   ========================================== */
footer .wp-block-columns:has(> .wp-block-column > .black-gradient),
footer .wp-block-columns:has(> .wp-block-column > .blue-gradient) {
  max-width: 700px;
  gap: 16px;
}
footer .black-gradient img,
footer .blue-gradient img {
  height: 90px !important;
}

/* Anchor link offset - account for fixed header height */
h2[id], h3[id], section[id] {
  scroll-margin-top: 140px;
}

/* ==========================================
   MOBILE FIXES
   ========================================== */

/* Homepage hero Tel/Email box: email address was overflowing its box on
   mobile (bold-highlight-alt forces a large font-size for the phone number's
   sibling paragraph too). Shrink it and allow it to wrap/break cleanly. */
@media (max-width: 768px) {
  .hero-bento .bold-highlight-alt strong {
    font-size: 1rem !important;
  }
  .hero-bento .bold-highlight-alt,
  .hero-bento .bold-highlight {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* "What We Do" (and similar) content sections set padding-left/right:0
   inline so their full-width top border can bleed edge-to-edge on desktop -
   but that leaves the cards with no side margin at all on mobile. Restore a
   comfortable gutter below 1024px (the existing 1024-1300px fix only covers
   tablets). */
@media (max-width: 1023px) {
  main .content-section[style*="padding-right:0"] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* Mobile navigation: turn the dropdown into a proper full-screen overlay
   instead of expanding inline inside .header-left (which squeezed the logo
   into a thin column and made the menu awkward to use). */
@media (max-width: 1024px) {
  header .menu-toggle {
    position: relative;
    z-index: 10000;
  }

  header .wp-block-navigation.is-open {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    background: var(--wp--preset--color--accent-1);
    z-index: 9999;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 6rem 2rem 3rem;
    overflow-y: auto;
    gap: .25rem;
  }

  header .wp-block-navigation.is-open .wp-block-navigation-item {
    padding: 14px 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.15);
    border-radius: 0;
  }

  header .wp-block-navigation.is-open .wp-block-navigation-item > a {
    font-size: 1.25rem;
    white-space: normal;
  }

  header .wp-block-navigation.is-open .wp-block-navigation-submenu__content {
    padding-left: 1rem;
  }

  /* Swap the hamburger for a close icon while the overlay is open. */
  header:has(.wp-block-navigation.is-open) .menu-toggle {
    font-size: 0;
  }
  header:has(.wp-block-navigation.is-open) .menu-toggle::after {
    content: "\2715";
    font-size: 1.75rem;
    color: #fff;
  }

  /* Prevent the page behind the overlay from scrolling. */
  body:has(header .wp-block-navigation.is-open) {
    overflow: hidden;
  }
}

/* Home "Our products" cards: the "Commercial Motor Insurance" title was
   wrapping to 3 lines (making that card much taller than the rest, which
   stretched the whole row). Slightly tighter padding + title size lets the
   longest title fit on 2 lines and evens the cards out. Scoped to the home
   product cards (centred icon + description, no CTA button). */
.corner-gradient:has(> figure.wp-block-image.aligncenter):not(:has(.wp-block-buttons)) {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.corner-gradient:has(> figure.wp-block-image.aligncenter):not(:has(.wp-block-buttons)) h2.has-large-font-size {
  font-size: 1.2rem !important;
}

/* ==========================================
   PRODUCT CARDS (home "Our products")
   Live site centres the icon, heading and text inside each card.
   Scope to corner-gradient groups that contain a centred icon figure,
   so the left-aligned hero panel (also .corner-gradient) is untouched.
   ========================================== */
.corner-gradient:has(> figure.wp-block-image.aligncenter) {
  text-align: center;
}
.corner-gradient > figure.wp-block-image.aligncenter {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.corner-gradient > figure.wp-block-image.aligncenter img {
  display: inline-block;
}

/* Blog cards sit on a cream (accent-5) background, so their text must be dark
   to be readable (the page default is white text on teal). */
.blog-post,
.blog-post .title,
.blog-post .description {
  color: var(--wp--preset--color--accent-1) !important;
}
.blog-post .read-more,
.blog-post .read-more strong {
  color: var(--wp--preset--color--accent-2) !important;
}

/* ==========================================
   HERO BLOG POST
   ========================================== */

.blog-posts .blog-post:first-child {
  display: grid !important;
  grid-template-columns: 52% 48%;
  gap: 0;
  align-items: center;
  max-width: 1220px;
  margin: 0 auto 70px;
}

/* Hero image */
.blog-posts .blog-post:first-child .image {
  width: 100% !important;
  aspect-ratio: 8 / 5;
  min-height: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 8px 0 0 8px;
}

/* Hero text panel */
.blog-posts .blog-post:first-child .content {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 40px 48px !important;
  box-sizing: border-box;
  border-radius: 0 8px 8px 0;
}

/* Hero title */
.blog-posts .blog-post:first-child .title {
  margin: 0 0 24px;
  line-height: 1.15;
}

/* Shorten hero excerpt */
.blog-posts .blog-post:first-child .description {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 18px;
}

/* Hide headings/lists inside hero excerpt */
.blog-posts .blog-post:first-child .description h2,
.blog-posts .blog-post:first-child .description h3,
.blog-posts .blog-post:first-child .description ul,
.blog-posts .blog-post:first-child .description ol {
  display: none;
}

/* Read more */
.blog-posts .blog-post:first-child .read-more {
  display: inline-block;
  margin-top: 8px;
}

/* ==========================================
   BLOG CARDS UNDERNEATH
   ========================================== */

.blog-posts .blog-post:not(:first-child) {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Card image area */
.blog-posts .blog-post:not(:first-child) .image {
  width: 100% !important;
  aspect-ratio: 8 / 5;
  min-height: 0 !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 8px 8px 0 0;
}

/* Text panel */
.blog-posts .blog-post:not(:first-child) .content {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  padding: 25px !important;
  box-sizing: border-box;
}

/* Card title */
.blog-posts .blog-post:not(:first-child) .title {
  margin-bottom: 15px;
  line-height: 1.2;
}

/* Short excerpt */
.blog-posts .blog-post:not(:first-child) .description {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hide headings/lists in card excerpt */
.blog-posts .blog-post:not(:first-child) .description h2,
.blog-posts .blog-post:not(:first-child) .description h3,
.blog-posts .blog-post:not(:first-child) .description ul,
.blog-posts .blog-post:not(:first-child) .description ol {
  display: none;
}

/* Read more */
.blog-posts .blog-post:not(:first-child) .read-more {
  display: inline-block;
  margin-top: 15px;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 900px) {

  .blog-posts .blog-post:first-child {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .blog-posts .blog-post:first-child .content {
    padding: 28px !important;
  }

  .blog-posts .blog-post:first-child .description {
    -webkit-line-clamp: 5;
  }
}


/* Single blog post featured image */
.single-post .wp-post-image,
.single-post .post-thumbnail img,
.single-post .featured-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain !important;
  object-position: center;
  display: block;
  border-radius: 8px;
  
}

/* If the single post image is a background image */
.single-post .post-thumbnail,
.single-post .featured-image {
  aspect-ratio: 16 / 10;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* Downloads page - page-specific styling the live site injects via an
   inline <style> block (Download Monitor plugin), not present in
   post_content or any shared theme stylesheet. Captured directly from the
   live DOM. */
.rh-download-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 40px 0;
}

.rh-download-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding: 24px 30px;
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
}

.rh-download-text {
  font-size: 18px;
  font-weight: 600;
  color: #004745;
  line-height: 1.4;
}

.rh-download-action {
  flex-shrink: 0;
}

.rh-download-action a {
  display: inline-block;
  background: #004745;
  color: #fff !important;
  text-decoration: none !important;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  transition: background .2s ease, transform .2s ease;
}

.rh-download-action a:hover {
  background: #00685f;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .rh-download-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .rh-download-action a {
    width: 100%;
    text-align: center;
  }
}