/*
 Theme Name:   Heritage IFC (Bricks Child)
 Theme URI:    https://heritage-ifc.com/
 Description:  Heritage Independent Financial Consultancy — design tokens and base styles.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.2
 Text Domain:  bricks
*/

/* =========================================================================
   SELF-HOSTED ROBOTO
   Bricks loads all 18 Roboto variants from fonts.googleapis.com. That sends
   every visitor's IP to Google before any consent is given, and ships 14
   weights the site never uses. Only 400/500/600/700 are used, and they are
   served from this theme.
   ========================================================================= */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/roboto-400-0.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/roboto-400-1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/roboto-500-0.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/roboto-500-1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/roboto-600-0.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/roboto-600-1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/roboto-700-0.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/roboto-700-1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =========================================================================
   SCOPE OF THIS FILE

   Tokens and base element styling ONLY — things that are genuinely
   cross-cutting and have no single element to live on.

   Everything component-shaped (header, footer, tiles, buttons, sections)
   lives in Bricks GLOBAL CLASSES so it stays editable in the builder:
     Bricks → Class manager → h-header, h-footer, h-tile, h-btn, …
   Do not add component styling here — add or edit the global class.
   ========================================================================= */

:root {
  /* --- brand ------------------------------------------------------------
     Consolidated from #71100c / #721212 / #7e2635 / #800000 to one red. */
  --h-red:          #71100C;   /* 11.79:1 on white */
  --h-red-deep:     #560B08;   /* hover / pressed */
  --h-red-wash:     #F6ECEB;   /* tinted surface */

  /* Gold: #A07A07 is only 3.98:1 on white, so it is limited to large text
     and rules. On burgundy it drops to 2.96:1, so text over the footer uses
     --h-gold-on-red (7.05:1) instead. */
  --h-gold:         #A07A07;
  --h-gold-on-red:  #E8C55B;

  /* --- neutrals (warm-biased toward the brand red, not pure grey) ------- */
  --h-ink:          #1B1513;   /* headings   16.49:1 on --h-surface-2 */
  --h-body:         #47403D;   /* body copy  10.15:1 on white */
  --h-muted:        #6F6560;   /* secondary   5.67:1 on white */
  --h-line:         #E3DCD8;
  --h-surface:      #FFFFFF;
  --h-surface-2:    #F7F4F2;

  /* --- type -------------------------------------------------------------
     Roboto retained: already licensed/loaded and pairs with the logo.
     NB: Bricks sets html{font-size:62.5%}, so 1rem = 10px throughout. */
  --h-font:         'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --h-text:         1.7rem;     /* 17px */
  --h-leading:      1.65;
  --h-measure:      68ch;

  --h-h1: clamp(3.4rem, 2.40rem + 2.4vw, 5.2rem);   /* 34 → 52px */
  --h-h2: clamp(2.8rem, 2.16rem + 1.6vw, 4.0rem);   /* 28 → 40px */
  --h-h3: clamp(2.2rem, 1.92rem + 0.7vw, 2.8rem);   /* 22 → 28px */
  --h-h4: 2.0rem;                                   /* 20px */
  --h-h5: 1.7rem;                                   /* 17px */

  /* --- space (4pt scale) ------------------------------------------------ */
  --h-1: 4px;   --h-2: 8px;   --h-3: 12px;  --h-4: 16px;
  --h-5: 24px;  --h-6: 32px;  --h-7: 48px;  --h-8: 64px;  --h-9: 96px;

  /* --- layout ----------------------------------------------------------- */
  --h-container: 1200px;       /* was 1920px, which is why it read as loose */
  --h-radius: 3px;
}

/* =========================================================================
   BASE ELEMENTS
   ========================================================================= */

body {
  font-family: var(--h-font);
  font-size: var(--h-text);
  line-height: var(--h-leading);
  color: var(--h-body);
  background: var(--h-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--h-ink);
  font-family: var(--h-font);
  line-height: 1.18;
  text-wrap: balance;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--h-h1); font-weight: 700; }
h2 { font-size: var(--h-h2); font-weight: 700; }
h3 { font-size: var(--h-h3); font-weight: 600; }
h4 { font-size: var(--h-h4); font-weight: 600; }
h5 { font-size: var(--h-h5); font-weight: 600; }

/* More space above a heading than below it. */
:is(h2, h3, h4) { margin-block: var(--h-6) var(--h-3); }
h2:first-child, h3:first-child, h4:first-child { margin-block-start: 0; }

p { margin-block: 0 var(--h-4); }
p:last-child { margin-block-end: 0; }

a { color: var(--h-red); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--h-red-deep); }

/* Not :where() — that has zero specificity and lost to plugin styles on form
   controls, leaving no visible focus ring at all. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--h-red) !important;
  outline-offset: 2px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; }

/* Container measure. Every section on every page sits inside .brxe-container,
   so this is genuinely cross-cutting rather than component styling. The old
   site ran 1920px wide, which is the main reason it read as loose and empty.
   (Bricks → Theme Styles → Container is the alternative home for this if you
   would rather set it in the UI; setting it here keeps it in version control.) */
.brxe-container {
  width: 100%;
  max-width: var(--h-container);
  margin-inline: auto;
}

/* Long-form copy was centred on mobile sitewide, which is hard to read at
   length. Applies across every element, so it belongs here rather than on
   any single class. */
@media (max-width: 767px) {
  .brxe-text p, .brxe-text-basic, .brxe-post-content p { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* Person card internals. These are applied via utility classes on elements
   inside h-card, so they live with the other shared patterns. */
/* Person card styling lives in the h-person global class so it stays editable
   in the builder. The class sits on the <img> itself, not a wrapper. */


/* =========================================================================
   FORMS
   Contact Form 7 renders on more than one page and its markup is plugin
   owned, so its styling belongs here rather than on any single element.
   ========================================================================= */
.h-form { display: flex; flex-direction: column; gap: var(--h-5); max-width: 640px; }
.h-form__row { display: flex; flex-direction: column; gap: var(--h-2); margin: 0; }
/* CF7 emits a <br> and a wrapper span after each label; both add stray space. */
.h-form__row br { display: none; }
.h-form__row .wpcf7-form-control-wrap { display: block; margin: 0; }
.h-form__row > * { margin: 0; }
.h-form__row label { font-weight: 600; color: var(--h-ink); font-size: 15px; }
.h-req { color: var(--h-red); }

.h-form input[type="text"],
.h-form input[type="email"],
.h-form input[type="tel"],
.h-form select,
.h-form textarea {
  width: 100%;
  font: inherit;
  color: var(--h-ink);
  background: var(--h-surface);
  border: 1px solid var(--h-line-strong, #CFC2BA);
  border-radius: var(--h-radius);
  padding: 12px 14px;
  min-height: 48px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.h-form textarea { min-height: 150px; resize: vertical; }
.h-form :is(input, select, textarea):hover { border-color: var(--h-muted); }
.h-form :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--h-red);
  box-shadow: 0 0 0 3px rgba(113,16,12,.14);
}

.h-form__consent { display: flex; gap: var(--h-3); align-items: flex-start; margin: 0; font-size: 15px; }
.h-form__consent input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--h-red); flex: none; }
.h-form__consent .wpcf7-list-item { margin: 0; }

.h-form__actions { margin: 0; }
.h-form input[type="submit"] {
  font: inherit; font-weight: 700; font-size: 16px;
  color: #fff; background: var(--h-red);
  border: 0; border-radius: var(--h-radius);
  padding: 0 26px; min-height: 48px;
  cursor: pointer;
  transition: background-color .18s ease;
}
.h-form input[type="submit"]:hover { background: var(--h-red-deep); }

/* CF7 messages */
.wpcf7-not-valid-tip { color: var(--h-red); font-size: 14px; font-weight: 500; }
.wpcf7 form .wpcf7-response-output {
  border: 1px solid var(--h-line-strong, #CFC2BA);
  border-radius: var(--h-radius);
  padding: 14px 16px; margin: var(--h-4) 0 0; font-size: 15px;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--h-red); background: var(--h-red-wash); color: var(--h-red); }
.wpcf7 form.sent .wpcf7-response-output { border-color: #2E6B4F; background: #E8F1EC; color: #1F5238; }


/* Consent row: CF7 renders the label grey (2.53:1) and flush against its own
   checkbox. Both are fixed here because the markup is plugin owned. */
.h-form__consent { display: flex; gap: var(--h-3); align-items: flex-start; }
.h-form__consent .wpcf7-list-item { margin: 0; display: flex; gap: var(--h-3); align-items: flex-start; }
.h-form__consent .wpcf7-list-item-label,
.h-form__consent label { color: var(--h-ink); font-size: 15px; line-height: 1.55; font-weight: 400; }
.h-form__consent input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--h-red); }

/* Anti-spam honeypot must never be reachable or visible. */
#altEmail_container,
.wpcf7 .altEmail_container,
[id^="altEmail"] {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Footer nav should not break mid-label. */
.h-footer__nav a { white-space: nowrap; }


/* =========================================================================
   COOKIE BANNER
   ========================================================================= */
.h-cookie {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 9999;
  background: var(--h-surface);
  border-top: 2px solid var(--h-red);
  box-shadow: 0 -8px 28px -18px rgba(27,21,19,.5);
}
.h-cookie[hidden] { display: none; }
.h-cookie__inner {
  max-width: var(--h-container);
  margin-inline: auto;
  padding: var(--h-5) 20px;
  display: flex; align-items: center; gap: var(--h-6); flex-wrap: wrap;
}
.h-cookie__text { margin: 0; font-size: 15px; flex: 1 1 380px; color: var(--h-body); }
.h-cookie__actions { display: flex; gap: var(--h-3); flex-wrap: wrap; }
.h-cookie .h-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  font: inherit; font-weight: 700; font-size: 15px;
  padding: 0 20px; border-radius: var(--h-radius);
  background: var(--h-red); color: #fff; border: 1px solid var(--h-red);
  cursor: pointer;
}
.h-cookie .h-btn:hover { background: var(--h-red-deep); border-color: var(--h-red-deep); }
.h-cookie .h-btn--ghost { background: transparent; color: var(--h-red); }
.h-cookie .h-btn--ghost:hover { background: var(--h-red); color: #fff; }
@media (max-width: 575px) { .h-cookie__inner { padding: var(--h-4) 16px; gap: var(--h-4); } }


/* Cookie table. Wide content scrolls inside its own container so the page
   body never scrolls sideways. */
.h-prose .h-table,
.h-table { width: 100%; border-collapse: collapse; margin-block: var(--h-4); font-size: 15px; display: table; }
.h-table th, .h-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--h-line); vertical-align: top; }
.h-table th { font-weight: 600; color: var(--h-ink); background: var(--h-surface-2); font-size: 14px; }
.h-table td { color: var(--h-body); }
.h-table tr:last-child td { border-bottom: 0; }
.h-prose table { max-width: none; }
@media (max-width: 620px) {
  .h-table, .h-table thead, .h-table tbody, .h-table tr, .h-table th, .h-table td { display: block; }
  .h-table thead { display: none; }
  .h-table tr { border: 1px solid var(--h-line); border-radius: var(--h-radius); margin-bottom: var(--h-3); padding: var(--h-2); }
  .h-table td { border: 0; padding: 6px 10px; }
  .h-table td::before { content: attr(data-label); display: block; font-weight: 600; color: var(--h-ink); font-size: 13px; }
}