/* ==========================================================================
   Heritage London Markets — base design system
   Brand tokens adapted from the Readhunt design system (copper/teal palette
   already suits the Heritage logo).
   ========================================================================== */

@font-face {
  font-family: "Roboto Slab";
  src: url("../fonts/RobotoSlab-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour palette (from Global Styles) */
  --wp--preset--color--base: #FFFFFF;
  --wp--preset--color--contrast: #111111;
  --wp--preset--color--accent-1: #004745;   /* deep teal — primary brand colour */
  --wp--preset--color--accent-2: #cc813e;   /* gold/tan — highlight colour */
  --wp--preset--color--accent-3: #00403e;   /* darker teal — nav/pill background */
  --wp--preset--color--accent-4: #686868;   /* grey */
  --wp--preset--color--accent-5: #FBFAF3;   /* cream */
  --wp--preset--color--accent-6: rgba(17,17,17,.2);
  --wp--preset--color--white: #FFFFFF;

  /* Gradients */
  --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(90deg, rgb(255,196,139) 0%, rgb(204,129,62) 100%);

  /* Spacing scale */
  --wp--preset--spacing--20: 1rem;
  --wp--preset--spacing--30: 2rem;
  --wp--preset--spacing--40: 3rem;
  --wp--preset--spacing--50: 4rem;
  --wp--preset--spacing--60: 5rem;
  --wp--preset--spacing--70: 6rem;
  --wp--preset--spacing--80: 7rem;

  /* Font sizes */
  --wp--preset--font-size--small: 0.875rem;
  --wp--preset--font-size--medium: 1rem;
  --wp--preset--font-size--large: 1.38rem;
  --wp--preset--font-size--x-large: 1.75rem;
  --wp--preset--font-size--xx-large: 2.15rem;

  --content-width: 1200px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* The real site's default page canvas is the deep teal brand colour with
   white text everywhere - NOT a white page with occasional dark cards. This
   was confirmed by checking three completely different real templates
   (homepage bento layout, the About page, and a plain text-only Legal page)
   - all three render solid accent-1 body background with white text site-wide.
   The footer is NOT an exception - checked it directly too: no background
   colour of its own, same teal/white as the rest of the page. Only actual
   light sections (the ".has-base-background-color" / cream "#f2f2f2" cards
   etc, further down) set their own background and override this default. */
body {
  margin: 0;
  font-family: "Roboto Slab", serif;
  font-weight: 300;
  font-size: var(--wp--preset--font-size--large);
  letter-spacing: -0.1px;
  line-height: 1.4;
  color: var(--wp--preset--color--base);
  background: var(--wp--preset--color--accent-1);
}
h1, h2, h3, h4, h5, h6 { font-weight: 300; line-height: 1.125; margin: 0 0 1rem; }
/* Real Global Styles typography scale — headings only carry an explicit
   font-size class (has-large/x-large/xx-large-font-size) when the block
   editor set one manually; most headings rely on these tag defaults, so
   without them every heading was falling back to the browser's UA default
   size (much larger/inconsistent than the live site). */
h1 { font-size: var(--wp--preset--font-size--xx-large); }
h2 { font-size: var(--wp--preset--font-size--x-large); }
h3, h4, h5, h6 { font-size: var(--wp--preset--font-size--large); }
p { margin: 0 0 1rem; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
ul, ol { padding-left: 1.25em; }

/* ---------- Layout helpers ---------- */
.content-section {
  width: var(--content-width);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (max-width: 1300px) and (min-width: 1024px) {
  .content-section { width: 100% !important; padding-left: 2rem !important; padding-right: 2rem !important; }
}
.wp-block-group, .wp-block-boldblocks-group, .cbb-block { display: block; }
.wp-block-group.has-background, .wp-block-boldblocks-group.has-background { overflow: hidden; }

/* WP's block editor stores border color/width inline but relies on a themed
   default of border-style:solid (it never writes border-style itself). Our
   extracted content only carries the color+width, so without this the
   divider line above sections like "Our products" silently fails to render
   since the browser default border-style is "none". Each side is set
   individually (NOT the border-style shorthand) - the shorthand resets all
   four sides to solid, and any side without an explicit width then falls
   back to the browser's default "medium" (~3px) width, drawing unwanted
   borders on the other three sides. (The spacing around this divider is now
   baked in as real inline padding/margin by inject_layout.py, reading the
   same block JSON WordPress itself would - no CSS fallback needed here.) */
[style*="border-top-width"] { border-top-style: solid; }
[style*="border-bottom-width"] { border-bottom-style: solid; }
[style*="border-left-width"] { border-left-style: solid; }
[style*="border-right-width"] { border-right-style: solid; }

/* Core block: columns — WP core keeps columns in a single row on desktop and
   only stacks them below the mobile breakpoint; children stretch to match
   the tallest column so background-filled "cards"/"tiles" line up evenly.
   The real per-block gap is now baked in inline by inject_layout.py; this
   gap value is only a fallback for the rare block with no explicit gap. */
.wp-block-columns {
  display: flex;
  gap: 2rem;
  flex-wrap: nowrap;
  align-items: stretch;
}
.wp-block-column { flex: 1; min-width: 0; }
/* A column's content is (almost) always a single wrapper block — make it
   fill the stretched column so background colours/images read as full tiles.
   Excludes ".stack" columns (hero-bento's icon-tile columns): those are
   flex-direction:column containers that size their own children explicitly
   via .flex-1/.flex-2/.flex-fill-rest classes, and height:100% on a plain
   block sibling there acts as an oversized flex-basis, hogging almost the
   whole column and leaving the .flex-fill-rest sibling (e.g. the small
   fleet-image row under the tel/claims box) squashed into a sliver. */
.wp-block-column:not(.stack) > .cbb-block,
.wp-block-column:not(.stack) > .wp-block-boldblocks-group,
.wp-block-column:not(.stack) > .wp-block-group {
  height: 100%;
}
/* ...and even outside .stack, this only holds when the column has a SINGLE
   such wrapper - if it holds several stacked blocks side by side in normal
   flow (e.g. three icon-cards stacked in one column), each one is a direct
   .cbb-block child too, and blindly giving every one of them height:100%
   stretches EACH to the full column height (matched against the tall image
   in the sibling column), so a 3-card column ends up 3x taller than it
   should be with huge empty gradient padding under each icon+heading.
   Detect "more than one such sibling" on the parent and fall back to
   natural/auto height for all of them. */
.wp-block-column:has(> .cbb-block ~ .cbb-block) > .cbb-block,
.wp-block-column:has(> .wp-block-boldblocks-group ~ .wp-block-boldblocks-group) > .wp-block-boldblocks-group,
.wp-block-column:has(> .wp-block-group ~ .wp-block-group) > .wp-block-group {
  height: auto;
}
@media (max-width: 781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-direction: column; flex-wrap: wrap; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: auto !important; width: 100% !important; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > .cbb-block,
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > .wp-block-boldblocks-group,
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > .wp-block-group {
    height: auto;
    min-height: 220px;
  }
}

/* Core block: buttons */
.wp-block-buttons { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.wp-block-button__link, .wp-block-button__link.wp-element-button {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-style: normal;
  font-size: var(--wp--preset--font-size--small);
  padding: 14px 28px;
  border-radius: 9999px;
  color: var(--wp--preset--color--accent-1);
  background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple);
  border: none;
  cursor: pointer;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: none;
  border: 1px solid currentColor;
  color: var(--wp--preset--color--contrast);
}

/* Dark card/panel backgrounds default to white text (matches the live site's
   Global Styles, where headings/body text are white unless a section is on a
   plain white background). Anything with an explicit has-*-color class still
   wins since those are !important below. */
.corner-gradient,
.black-gradient,
.blue-gradient,
.has-accent-1-background-color,
.has-accent-3-background-color,
.has-contrast-background-color {
  color: var(--wp--preset--color--base);
}

/* ...and the reverse: now that body defaults to white-on-teal, the light
   "base"/cream panels used on product/sector pages and the team grid (plain
   #FFFFFF, accent-5 cream, or the #f2f2f2 off-white used for body-copy
   blocks) need to flip back to dark text by default. Individual text
   elements that already carry their own explicit has-*-color class (e.g.
   has-accent-1-color, has-accent-2-color) still win, since those are
   !important below. */
.has-base-background-color,
.has-accent-5-background-color,
[style*="background-color:#f2f2f2"] {
  color: var(--wp--preset--color--contrast);
}

/* Colour / background utility classes (mirrors WP's has-*-color) */
.has-base-color { color: var(--wp--preset--color--base) !important; }
.has-contrast-color { color: var(--wp--preset--color--contrast) !important; }
.has-accent-1-color { color: var(--wp--preset--color--accent-1) !important; }
.has-accent-2-color { color: var(--wp--preset--color--accent-2) !important; }
.has-accent-3-color { color: var(--wp--preset--color--accent-3) !important; }
.has-accent-4-color { color: var(--wp--preset--color--accent-4) !important; }
.has-accent-5-color { color: var(--wp--preset--color--accent-5) !important; }

.has-base-background-color { background-color: var(--wp--preset--color--base) !important; }
.has-contrast-background-color { background-color: var(--wp--preset--color--contrast) !important; color: #fff; }
.has-accent-1-background-color { background-color: var(--wp--preset--color--accent-1) !important; }
.has-accent-2-background-color { background-color: var(--wp--preset--color--accent-2) !important; }
.has-accent-3-background-color { background-color: var(--wp--preset--color--accent-3) !important; }
.has-accent-4-background-color { background-color: var(--wp--preset--color--accent-4) !important; }
.has-accent-5-background-color { background-color: var(--wp--preset--color--accent-5) !important; }

.has-vivid-cyan-blue-to-vivid-purple-gradient-background { background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important; }

.has-small-font-size { font-size: var(--wp--preset--font-size--small) !important; }
.has-medium-font-size { font-size: var(--wp--preset--font-size--medium) !important; }
.has-large-font-size { font-size: var(--wp--preset--font-size--large) !important; }
.has-x-large-font-size { font-size: var(--wp--preset--font-size--x-large) !important; }
.has-xx-large-font-size { font-size: var(--wp--preset--font-size--xx-large) !important; }

/* Block text-alignment utilities (WordPress core classes the rebuild was
   missing — without them elements marked has-text-align-center rendered
   left-aligned, e.g. the "Contact us" CTA banner headings). */
.has-text-align-center { text-align: center; }
.has-text-align-left { text-align: left; }
.has-text-align-right { text-align: right; }

/* Images */
.wp-block-image.is-resized img, .wp-block-image img { border-radius: inherit; }
.wp-block-image.size-large img, .wp-block-image.size-full img { width: 100%; }
.alignfull { width: 100%; max-width: 100%; }
.alignwide { width: 100%; max-width: 100%; }

/* ---------- Site header ---------- */
header#main-header {
  position: sticky;
  top: 0;
  z-index: 99;
}
header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
header .header-left {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex: 1;
  justify-content: space-between;
}
header .header-left img { height: 80px; width: auto; }
header .wp-block-navigation {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
header .wp-block-navigation-item {
  position: relative;
  padding: 6px 14px !important;
  border-radius: 9999px;
  list-style: none;
}
header .wp-block-navigation-item > a {
  text-decoration: none;
  color: var(--wp--preset--color--base);
  font-size: 1rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
header .has-submenu > a::after {
  content: "";
  display: inline-block;
  margin-left: 5px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
header .wp-block-navigation-item.current-menu-item,
header .wp-block-navigation-item:hover {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.1), transparent 30%),
    radial-gradient(circle at top right, rgba(255,255,255,.1), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,255,255,.1), transparent 30%),
    radial-gradient(circle at bottom right, rgba(255,255,255,.1), transparent 30%),
    var(--wp--preset--color--accent-3);
}
header .has-submenu { position: relative; }
header .wp-block-navigation-submenu__content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 10px;
  background: var(--wp--preset--color--accent-3);
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  z-index: 999;
}
header .has-submenu:hover .wp-block-navigation-submenu__content,
header .has-submenu:focus-within .wp-block-navigation-submenu__content { display: block; }
header .wp-block-navigation-submenu__content .wp-block-navigation-item { padding: 0 !important; }
header .wp-block-navigation-submenu__content .wp-block-navigation-item > a { display: block; padding: 8px 14px; border-radius: 6px; }
header .wp-block-navigation-submenu__content .wp-block-navigation-item > a:hover { background: rgba(255,255,255,.1); }
header .mobile-contact-button { display: none; }
header .menu-toggle { display: none; background: none; border: 0; color: #fff; font-size: 1.75rem; cursor: pointer; }

@media (max-width: 1024px) {
  header .header-left { gap: 1rem; flex: 1; }
  header .wp-block-navigation { display: none; flex-direction: column; align-items: stretch; width: 100%; }
  header .wp-block-navigation.is-open { display: flex; }
  header .wp-block-navigation-submenu__content { position: static; background: none; box-shadow: none; padding-left: 1rem; }
  header .menu-toggle { display: inline-block; }
  header .mobile-contact-button { display: inline-block !important; }
  header .hide-for-mobile { display: none !important; }
}

/* ---------- Site footer ---------- */
footer .footer-columns { display: flex; gap: 2rem; }
footer .footer-nav { list-style: none; margin: 0; padding: 0; }
footer .footer-nav li { margin-bottom: .5rem; }
footer .footer-nav a { text-decoration: none; }
footer .footer-nav a:hover { text-decoration: underline; }
@media (max-width: 1320px) and (min-width: 780px) {
  footer .footer-columns { flex-direction: column !important; }
}
@media (max-width: 600px) {
  footer .footer-columns { flex-direction: column !important; }
}

/* ---------- Team grid (custom, no source markup to preserve) ---------- */
.team-member img { border-radius: 50%; width: 100px; height: 100px; object-fit: cover; margin-bottom: 1rem; }
.team-member .placeholder { border-radius: 50%; width: 100px; height: 100px; margin-bottom: 1rem; background: var(--wp--preset--color--accent-3); overflow: hidden; }
.team-member .placeholder .placeholder-inner { width: 100%; height: 100%; }
.team-member .title { margin-bottom: .25rem; }
.team-member .job-role { font-weight: 600; margin-bottom: .75rem; }

/* ---------- Utility ---------- */
.show-for-mobile { display: none; }
@media (max-width: 768px) {
  .show-for-mobile { display: block; }
  .hide-for-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .show-for-mobile { display: none !important; }
}

/* Breadcrumb / generic page hero used on inner pages */
.page-hero {
  padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40);
}
.page-hero h1 { margin-bottom: .5rem; }

/* Section spacing rhythm for content pages */
.wp-block-post-content > * + *,
main > .content-section > * + * {
  margin-top: 1rem;
}