/* ==========================================================================
   DH Tax & Law — brand + reconciliation layer
   Loaded LAST, after Brave's style.min.css and the carried-over DH theme.

   Two jobs:
     1. Stop the DH theme's global resets from leaking into the Navik header.
     2. Recolour Brave / Navik defaults to the DH brand red.

   Brand red   #981b1e
   Hover red   #8c2925
   Body text   #4c4b4b
   Dark panel  #1D1D1B
   ========================================================================== */

/* The hody icon font. The markup's hc-* classes are gone (they became Font
   Awesome), but the theme still draws several glyphs through CSS `content:` —
   the "Read More" arrow, the accordion toggle, check-list bullets and the
   select caret — so the face itself still has to be declared. */
@font-face {
  font-family: "hody-icons";
  src: url("../fonts/hody-icons.eot");
  src: url("../fonts/hody-icons.eot?#iefix") format("embedded-opentype"),
       url("../fonts/hody-icons.woff") format("woff"),
       url("../fonts/hody-icons.ttf") format("truetype"),
       url("../fonts/hody-icons.svg#hody-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

:root {
  --dh-red: #981b1e;
  --dh-red-hover: #8c2925;
  --dh-body: #4c4b4b;
  --dh-dark: #1D1D1B;
}

/* --------------------------------------------------------------------------
   1. Guard the Navik header from the DH theme's global element resets.
      dh-theme.css sets `ul { list-style: disc }` and `a { color: #4c4b4b }`,
      which would otherwise bullet and recolour every menu item.
   -------------------------------------------------------------------------- */

.navik-header ul,
.navik-header ol {
  list-style: none;
  margin: 0;
}

.navik-header li > ul,
.navik-header li > ol {
  margin-left: 0;
}

.navik-header a {
  transition: all .3s ease;
}

.navik-header a:hover,
.navik-header a:focus {
  text-decoration: none;
}

/* The DH theme sets a global `section { padding: 110px 0 }`; the header must
   not inherit any of that if it is ever wrapped. */
.navik-header section {
  padding: 0;
}

/* --------------------------------------------------------------------------
   2. Navik menu — brand colours in place of the template's default blue.
   -------------------------------------------------------------------------- */

/* Match the old nav: gilroy-bold, uppercase, 1px tracking. With four top-level
   items there is room for Navik's stock padding — the previous 13px squeeze
   existed only to fit eight of them into a 1170px container.
   `white-space: nowrap` stays as a guard: a wrapped menu is floated, so it
   overhangs the header and squeezes the next section's flex .row. */
.navik-menu > ul > li > a {
  font-family: 'gilroy-bold', sans-serif;
  font-weight: normal;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dh-body);
}

/* Horizontal padding only once Navik switches to the desktop bar at 1280px.
   Below that its own `padding: 14px 15px` gives the burger list its row
   height — overriding it unscoped collapsed every mobile menu row. */
@media only screen and (min-width: 1280px) {
  .navik-menu > ul > li > a,
  .navik-menu.menu-hover-3 > ul > li:last-child > a {
    padding: 0 20px;
    white-space: nowrap;
  }
}

/* Belt and braces: if the menu ever does wrap, keep the overhanging float
   from reaching into the page content below the header. */
.navik-header .navik-header-container::after {
  display: block;
  clear: both;
  content: "";
}

.navik-menu ul li:hover > a,
.navik-menu > ul > li:hover > a,
.navik-menu > ul > li.current-menu > a,
.navik-menu ul li.current-menu > a,
.navik-menu.menu-hover-3 > ul > li:hover > a,
.navik-menu.menu-hover-3 > ul > li.current-menu > a {
  color: var(--dh-red);
}

/* The hover-3 underline indicator ships blue. */
.navik-menu.menu-hover-3 > ul > li > a::after,
.navik-menu.menu-hover-2 > ul > li > a::after,
.navik-menu.menu-hover-4 > ul > li > a::after {
  background-color: var(--dh-red);
}

/* Logo sizing, matching the old header: 84px, shrinking to 50px when stuck. */
.navik-header .logo img {
  max-height: 84px;
}

.navik-header.sticky .logo img {
  max-height: 50px;
}

/* Navik swaps to the burger at 1280px, so the mobile logo treatment has to
   follow the same breakpoint rather than Bootstrap's 992. */
@media only screen and (max-width: 1279px) {
  .navik-header .logo img {
    max-height: 50px;
  }

  /* Navik centres the mobile logo; the DH header has always been left-aligned. */
  .navik-header .logo {
    text-align: left;
  }
}

/* Submenus */
.navik-menu ul ul li > a {
  font-family: 'gilroy-light', 'Poppins', sans-serif;
  font-style: normal;
  color: var(--dh-body);
}

.navik-menu ul ul li:hover > a,
.navik-menu ul ul li.current-menu > a {
  color: var(--dh-red);
}

.navik-menu.submenu-top-border ul ul {
  border-top-color: var(--dh-red);
}

/* Caret */
.navik-menu > ul > li.dropdown_menu > a > span::before {
  border-color: var(--dh-body);
}

.navik-menu > ul > li.dropdown_menu:hover > a > span::before {
  border-color: var(--dh-red);
}

/* Transparent header (homepage, over the video hero) */
.header-transparent-on .navik-menu > ul > li > a {
  color: #fff;
}

.header-transparent-on .navik-menu > ul > li:hover > a,
.header-transparent-on .navik-menu > ul > li.current-menu > a {
  color: var(--dh-red);
}

/* Burger menu bars */
.burger-menu .line-menu {
  background-color: var(--dh-body);
}

.header-transparent-on .burger-menu .line-menu {
  background-color: #fff;
}

.burger-menu:hover .line-menu {
  background-color: var(--dh-red);
}

/* --------------------------------------------------------------------------
   3. Mega menu
   -------------------------------------------------------------------------- */

/* Brave scopes its mega-menu rules as
   `.navik-menu .mega-menu-container ul.mega-menu-list li a`, which sets the
   links italic and inherits their colour — so these overrides have to be
   scoped at least as tightly to win. */
.navik-menu .mega-menu-container .mega-menu-heading {
  font-family: 'gilroy-bold', sans-serif;
  font-size: 15px;
  font-style: normal;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dh-red);
  margin-top: 0;
  margin-bottom: 14px;
}

.navik-menu .mega-menu-container ul.mega-menu-list li > a {
  font-family: 'gilroy-medium', 'Poppins', sans-serif;
  font-style: normal;
  font-size: 14px;
  color: var(--dh-body);
}

.navik-menu .mega-menu-container ul.mega-menu-list li > a:hover {
  color: var(--dh-red);
}

.navik-menu .mega-menu-container ul.mega-menu-list li > a i {
  width: 18px;
  margin-right: 6px;
  color: var(--dh-red);
}

/* -- service cards --
   Brave leaves thumbnails at their natural aspect (width:100%; height:auto).
   The four service images are a mix of 3:2 landscape and 3:4 portrait, so
   without a fixed height the cards come out wildly uneven. */
.navik-menu .dh-service-card .mega-menu-thumbnail {
  margin-bottom: 16px;
}

.navik-menu .dh-service-card .mega-menu-thumbnail img {
  height: 150px;
  object-fit: cover;
  /* biased upward so faces stay in frame when portraits are cropped */
  object-position: center 25%;
}

.navik-menu .dh-service-card .mega-menu-heading {
  margin-bottom: 8px;
}

.navik-menu .dh-service-card .mega-menu-heading a {
  color: var(--dh-red);
}

.navik-menu .dh-service-card .mega-menu-heading a:hover {
  color: var(--dh-red-hover);
}

/* Brave sets .mega-menu-desc in Montserrat italic grey. */
.navik-menu .mega-menu-desc {
  font-family: 'gilroy-light', 'Poppins', sans-serif;
  font-style: normal;
  font-size: 13px;
  line-height: 1.55;
  color: #787878;
}

/* -- the guides strip along the foot of the Services panel -- */
.navik-menu .dh-mega-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 5px;
  padding: 18px 0 4px;
  border-top: 1px solid #ececec;
}

.navik-menu .dh-mega-foot-label {
  margin-right: 18px;
  font-family: 'gilroy-bold', sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dh-red);
}

.navik-menu .dh-mega-foot a {
  margin-right: 26px;
  font-family: 'gilroy-medium', 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--dh-body);
}

.navik-menu .dh-mega-foot a:hover {
  color: var(--dh-red);
}

.navik-menu .dh-mega-foot .dh-mega-foot-all {
  margin-right: 0;
  margin-left: auto;
  font-family: 'gilroy-bold', sans-serif;
  color: var(--dh-red);
}

.navik-menu .dh-mega-foot .dh-mega-foot-all i {
  margin-left: 7px;
  font-size: 12px;
}

/* -- address block in the About panel -- */
.navik-menu .dh-mega-address {
  font-family: 'gilroy-light', 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #787878;
}

.navik-menu .dh-mega-address p {
  margin-bottom: 12px;
}

.navik-menu .dh-mega-address a {
  color: var(--dh-body);
}

.navik-menu .dh-mega-address a:hover {
  color: var(--dh-red);
}

.navik-menu .dh-mega-address .dh-mega-hours {
  margin-bottom: 0;
  font-family: 'gilroy-bold', sans-serif;
  color: var(--dh-body);
}

/* -- burger mode (below Navik's 1280px desktop breakpoint) --
   Navik drops mega-menu content inline into the accordion. Stacked photos plus
   blurbs would make that a very long scroll, so the cards collapse to their
   headings and the Brave box margins are removed. */
@media only screen and (max-width: 1279px) {
  .navik-menu .dh-service-card .mega-menu-thumbnail,
  .navik-menu .mega-menu-desc {
    display: none;
  }

  /* strip the grid gutters so every row lines up on one indent */
  .navik-menu .mega-menu-container,
  .navik-menu .mega-menu-container .row,
  .navik-menu .mega-menu-container [class*="col-"] {
    margin: 0;
    padding: 0;
  }

  .navik-menu .mega-menu-box {
    margin-bottom: 0;
  }

  /* the h4 margins come from the Bootstrap 3 type scale in section 6a */
  .navik-menu .mega-menu-container .mega-menu-heading {
    margin: 0;
  }

  .navik-menu .mega-menu-container .dh-service-card .mega-menu-heading a {
    display: block;
    padding: 14px 15px 14px 30px;
    font-size: 13px;
    color: var(--dh-body);
  }

  /* section headings only — a card's heading is a link and pads itself */
  .navik-menu .mega-menu-container .mega-menu-box:not(.dh-service-card) > .mega-menu-heading {
    padding: 16px 15px 4px 30px;
  }

  /* Brave sets `padding: inherit` on mega-menu links, so with the gutters
     stripped the plain lists lose their indent. */
  .navik-menu .mega-menu-container ul.mega-menu-list li > a {
    display: block;
    padding: 11px 15px 11px 30px;
  }

  .navik-menu .dh-mega-foot {
    display: block;
    margin-top: 0;
    padding: 10px 15px 10px 30px;
  }

  .navik-menu .dh-mega-foot a,
  .navik-menu .dh-mega-foot .dh-mega-foot-all {
    display: block;
    margin: 0 0 10px;
  }

  .navik-menu .dh-mega-address {
    padding: 0 15px 14px 30px;
  }
}

/* --------------------------------------------------------------------------
   4. Top utility bar — replaces the old .contact-header-block strip.
   -------------------------------------------------------------------------- */

/* Shown only alongside the desktop menu (Navik's breakpoint is 1280px); in
   burger mode .dh-mobile-social carries the social links instead. */
.dh-topbar {
  display: none;
  background-color: var(--dh-red);
  color: #fff;
  font-family: 'gilroy-medium', 'Poppins', sans-serif;
  font-size: 14px;
  letter-spacing: .02em;
}

@media only screen and (min-width: 1280px) {
  .dh-topbar {
    display: block;
  }
}

.dh-topbar .dh-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  min-height: 38px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.dh-topbar a {
  color: #fff;
}

.dh-topbar a:hover,
.dh-topbar a:focus {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
}

.dh-topbar strong {
  font-family: 'gilroy-bold', sans-serif;
  font-weight: normal;
}

.dh-topbar .dh-topbar-sep {
  opacity: .5;
  margin: 0 10px;
}

.dh-topbar .dh-topbar-social {
  display: inline-flex;
  align-items: center;
}

.dh-topbar .dh-topbar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 15px;
}

.dh-topbar .dh-topbar-social a img {
  width: 17px;
  height: auto;
  /* the clapperboard svg is dark; invert it to sit on the red bar */
  filter: brightness(0) invert(1);
}

@media only screen and (max-width: 991px) {
  .dh-topbar .dh-topbar-inner {
    justify-content: center;
    text-align: center;
  }
}

/* In burger mode the top bar is hidden (as it was on the old site), so the
   social links move into the header itself, left of the burger — matching the
   old .yt-link cluster. */
.dh-mobile-social {
  display: none;
}

/* Burger mode lays the header out as a single flex row: logo left, social
   icons and burger right, all vertically centred. Both the icons and Navik's
   burger used to be absolutely positioned at hand-tuned offsets, which put
   them ~4px out of line with each other and, on a 375px screen, overlapping
   the logo. Flex removes the arithmetic, and because .navik-menu wraps to a
   full-width second line the burger panel still opens underneath the row.
   1279px is Navik's own desktop/burger switch (it is hard-coded in the plugin
   CSS and in its `$(window).width() < 1280` resize handler), so the layout has
   to change on exactly that boundary. */
@media only screen and (max-width: 1279px) {
  .navik-header .navik-header-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .navik-header .logo {
    flex: 1 1 auto;
    /* without this the 186px logo refuses to shrink and forces an overflow */
    min-width: 0;
    float: none;
    /* Navik pads the logo 19px/40px; the horizontal half is 80px the icons
       need back on a narrow screen. */
    padding: 14px 0;
  }

  .navik-header .dh-mobile-social {
    position: static;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .navik-header .burger-menu {
    position: static;
    flex: 0 0 20px;
    margin-left: 14px;
  }

  .navik-header .navik-menu {
    flex: 0 0 100%;
    clear: none;
  }

  .navik-header .dh-mobile-social a {
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    font-size: 18px;
    color: var(--dh-red);
  }

  .navik-header .dh-mobile-social a:hover {
    color: var(--dh-red-hover);
  }

  .navik-header .dh-mobile-social img {
    width: 20px;
    height: auto;
  }
}

@media only screen and (max-width: 575px) {
  .navik-header .dh-mobile-social a {
    padding: 0 5px;
    font-size: 16px;
  }

  .navik-header .dh-mobile-social img {
    width: 18px;
  }
}

/* Smallest phones: five icons plus the logo is a tight fit at 320px. */
@media only screen and (max-width: 360px) {
  .navik-header .dh-mobile-social a {
    padding: 0 3px;
    font-size: 15px;
  }

  .navik-header .dh-mobile-social img {
    width: 16px;
  }

  .navik-header .burger-menu {
    margin-left: 10px;
  }
}

/* --------------------------------------------------------------------------
   5. Recolour Brave's "primary" utilities to the DH red, so any Brave
      component dropped in later inherits the brand rather than the demo blue.
   -------------------------------------------------------------------------- */

.text-primary { color: var(--dh-red) !important; }
.bg-primary { background-color: var(--dh-red) !important; }
.border-primary { border-color: var(--dh-red) !important; }

a.text-primary:hover,
a.text-primary:focus,
.text-hover-primary:hover,
.text-hover-primary:focus {
  color: var(--dh-red-hover) !important;
}

.btn-primary {
  color: #fff;
  background-color: var(--dh-red);
  border-color: var(--dh-red);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: var(--dh-red-hover);
  border-color: var(--dh-red-hover);
}

.btn-outline-primary {
  color: var(--dh-red);
  border-color: var(--dh-red);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: var(--dh-red);
  border-color: var(--dh-red);
}

/* --------------------------------------------------------------------------
   6. Layout reconciliation.
      The old #navbar was `position: fixed; height: 112px`, so intro-header
      carried 140px of top padding to clear it. The Navik header sits in
      normal flow on inner pages, so that compensation is no longer needed.
   -------------------------------------------------------------------------- */

section.intro-header {
  padding-top: 60px;
  padding-bottom: 30px;
}

@media only screen and (max-width: 991px) {
  section.intro-header {
    padding-top: 40px;
    padding-bottom: 30px;
  }
}

/* The full-screen video hero. Its 110px of section padding existed only to
   clear the old position:fixed navbar; the Navik header is in normal flow. */
section.home-section {
  padding-top: 0;
  padding-bottom: 0;
}

/* Header + hero together make exactly one viewport, so the bottom of the video
   sits on the fold and there is nothing to scroll past to reach it. The old
   navbar was position:fixed and overlapped the hero, so a flat 100vh worked
   then; the Navik header takes up real space, so subtract it.
   These defaults match the header at each breakpoint (the top bar only shows
   from 1280px); dh-custom.js measures the real header and overwrites them. */
:root {
  --dh-header-height: 76px;
}

@media only screen and (min-width: 1280px) {
  :root {
    --dh-header-height: 128px;
  }
}

.dh-home #home-slider,
.dh-home #home-slider .slide-item {
  height: calc(100vh - var(--dh-header-height));
}

/* The hero <video> is z-index:-1. Without a stacking context of its own that
   negative index resolves against `section` (z-index:10), which paints the
   video underneath #home-slider's opaque background and hides it. Giving
   .video-wrapper its own stacking context confines the -1 to the wrapper, so
   the video sits above the slider background and below the .slide-wrap
   overlay and headline — the order the design expects. */
#home-slider .video-wrapper {
  z-index: 0;
  /* the old 30px offset existed to sit under the fixed navbar */
  margin-top: 0;
}

/* Fill the hero with the video, cropping rather than letterboxing. */
#home-slider .video-wrapper video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The still is a real fallback, not a cover. dh-theme.css used to hide it
   above 992px and show it below, unconditionally — so on every phone it was
   painted over a perfectly healthy, playing video. Now it behaves like a
   poster: visible while the video loads, faded out once playback actually
   starts, and left in place if autoplay is refused or the file fails.
   The z-index arrangement above is deliberate and untouched — fading is
   enough, so the wrapper's stacking context still does its job. */
.video-wrapper .fallback-bg {
  opacity: 1;
  transition: opacity .5s ease;
}

.video-wrapper.video-ready .fallback-bg {
  opacity: 0;
  pointer-events: none;
}

/* Keep the tint overlay and the headline above the video. */
#home-slider .slide-wrap {
  z-index: 1;
}

/* The theme hides the slide copy (opacity:0, scale .9) until the old slick
   slider marked the slide active. There is one static slide and no slick, so
   reveal it here; the entrance animation is re-applied from data-animation
   by dh-custom.js using animate.css. */
#home-slider .slide-content .container > * {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

/* Container widths.
   Brave widens the container to 1276px at xl, and Bootstrap 4 sizes the other
   tiers differently from Bootstrap 3 (540/720/960 against 750/970/1170) as well
   as adding a 576px tier that Bootstrap 3 had no equivalent for. The DH content
   was laid out against the Bootstrap 3 values, so restore them — otherwise the
   measure of every line of body copy shifts at each breakpoint. */
@media (min-width: 576px) and (max-width: 767.98px) {
  .container {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

/* Brave moves its xl breakpoint to 1280px (see $grid-breakpoints in
   scss/_theming.scss); Bootstrap's default is 1200, and Bootstrap 3 — which
   this content was laid out against — also switched to its widest tier at 1200.
   The tier shift in build-brave.py maps BS3 `lg` onto `xl`, so without this the
   1200–1279 band drops back to the narrower `lg` layout: on profile.html the
   7/5 split collapsed to 6/6. Only the classes actually in use are redefined;
   from 1280px Brave's own identical rules take over. */
@media (min-width: 1200px) {
  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
  .order-xl-1 { order: 1; }
  .order-xl-2 { order: 2; }
}

/* --------------------------------------------------------------------------
   6a. Bootstrap 3 base typography.
       Bootstrap 4 rescaled the headings and changed the vertical rhythm
       (p/ul margin-bottom 10px -> 1rem, headings margin-top 20px -> 0). The
       DH theme only ever set font-family, colour and line-height on headings,
       so it inherited the BS3 values — restore them, or every article page
       re-flows. Theme rules with their own sizes (.title > h2, .font-32 and
       friends) are more specific and still win.
   -------------------------------------------------------------------------- */

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

h1, h2, h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h4, h5, h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}

p {
  margin: 0 0 10px;
}

ul, ol {
  margin-bottom: 10px;
}

dl {
  margin-bottom: 20px;
}

blockquote {
  font-size: 17.5px;
  margin: 0 0 20px;
}

address {
  margin-bottom: 20px;
  line-height: 1.428571;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* BS3's .lead was 21px/1.4 at >=768px; BS4's is 1.25rem with no line-height. */
.lead {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .lead {
    font-size: 21px;
  }
}

/* --------------------------------------------------------------------------
   6b. Class-name collisions with Brave.
       The DH markup happens to reuse a few class names that Brave defines for
       its own components. Left alone, Brave's rules win and break the markup.
   -------------------------------------------------------------------------- */

/* Brave's .map-wrapper/.map-container are an absolutely-positioned map
   component. The DH pages use those names for a plain embedded iframe, which
   Brave's `position:absolute; height:100%` collapses to nothing. */
.map-wrapper {
  position: relative;
  height: auto;
}

.map-container {
  position: static;
  height: auto;
}

.map-container > iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* The guide pages' accordions carry a `nav` class from the old markup, and
   Bootstrap's .nav is display:flex — which lays the panels out in a row. */
ul.accordion.nav {
  display: block;
}

/* --------------------------------------------------------------------------
   6c. Blog categories, tags and the news filter.
       Categories are one per article and drive the filter; tags are
       cross-cutting. Both are generated by build-brave.py from ARTICLE_META.
   -------------------------------------------------------------------------- */

/* -- category chip -- */
.dh-post-meta {
  margin-bottom: 12px;
}

.single-post-info .dh-post-meta {
  text-align: center;
}

.dh-cat {
  display: inline-block;
  padding: 4px 12px;
  font-family: 'gilroy-bold', sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--dh-red);
}

.dh-cat:hover,
.dh-cat:focus {
  color: #fff;
  background-color: var(--dh-red-hover);
  text-decoration: none;
}

/* -- tag row at the foot of an article -- */
.dh-tags {
  margin-top: 35px;
  padding-top: 22px;
  border-top: 1px solid #e7e7e7;
}

.dh-tags-label {
  margin-right: 10px;
  font-family: 'gilroy-bold', sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #929292;
}

.dh-tag {
  display: inline-block;
  margin: 0 6px 8px 0;
  padding: 5px 13px;
  font-size: 13px;
  color: var(--dh-body);
  background-color: #f2f2f2;
  border: 1px solid #e7e7e7;
  transition: all .3s ease;
}

.dh-tag:hover,
.dh-tag:focus {
  color: #fff;
  background-color: var(--dh-red);
  border-color: var(--dh-red);
  text-decoration: none;
}

/* -- filter bar -- */
.dh-filter {
  padding: 0 15px 40px;
  text-align: center;
}

.dh-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.dh-filter-btn {
  margin: 0 5px 10px;
  padding: 9px 20px;
  font-family: 'gilroy-bold', sans-serif;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dh-body);
  background-color: #fff;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: all .3s ease;
}

.dh-filter-btn:hover,
.dh-filter-btn:focus {
  color: var(--dh-red);
  border-color: var(--dh-red);
  outline: none;
}

.dh-filter-btn.is-active {
  color: #fff;
  background-color: var(--dh-red);
  border-color: var(--dh-red);
}

.dh-filter-count {
  margin-left: 7px;
  font-size: 11px;
  opacity: .6;
}

.dh-filter-active,
.dh-filter-empty {
  margin: 6px 0 0;
  font-size: 15px;
  color: #787878;
}

.dh-filter-active strong {
  font-family: 'gilroy-bold', sans-serif;
  font-weight: normal;
  color: var(--dh-red);
}

.dh-filter-clear {
  margin-left: 12px;
  padding: 0;
  font-size: 14px;
  color: var(--dh-body);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}

.dh-filter-clear:hover {
  color: var(--dh-red);
}

/* Items hidden by the filter. */
.side-post.dh-hidden {
  display: none;
}

@media only screen and (max-width: 767px) {
  .dh-filter {
    padding-bottom: 25px;
  }

  .dh-filter-btn {
    margin: 0 3px 8px;
    padding: 8px 13px;
    font-size: 11px;
  }
}

/* --------------------------------------------------------------------------
   7. Font-Awesome stand-ins for the retired hody icon font.
      The old markup floated `.link-list li i` to the right; keep that.
   -------------------------------------------------------------------------- */

.link-list li i {
  float: right;
  margin-top: 5px;
  font-size: 12px;
}

/* The footer link lists come through Brave's reboot with default bullets. */
.list-unstyled.link-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* --------------------------------------------------------------------------
   8. 2026 additions: the five-card Services panel, the WhatsApp entry points,
      the contact page's form replacement, and the Autónomo guide's table.
   -------------------------------------------------------------------------- */

/* -- five service cards across --
   The Services panel grew from four cards to five, and five does not divide
   into Bootstrap's twelve columns. The markup carries col-lg-4 so the cards
   fall 3-then-2 on the way down; from Navik's own desktop breakpoint they go
   to a fifth each. Keyed to 1280px, NOT col-xl, because that is where Navik
   switches to the desktop bar — a 1200px xl rule would leave the 1200-1279
   band showing a five-across menu inside a burger layout. */
@media (min-width: 1280px) {
  .navik-menu .mega-menu-container .dh-service-card-5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* -- floating WhatsApp button --
   Sits below Navik's sticky header (z-index 999 in the theme) and below
   Fancybox's overlay (99992), but above the Google Maps iframes on the
   contact and office pages, which otherwise swallow the click. */
.dh-whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  transition: transform .2s ease, background .2s ease;
}

.dh-whatsapp-float:hover,
.dh-whatsapp-float:focus {
  background: #1ebe5a;
  color: #fff;
  transform: scale(1.06);
}

.dh-whatsapp-float i {
  /* the glyph's own bearing sits it a touch low in the circle */
  margin-top: -1px;
}

@media (max-width: 575px) {
  .dh-whatsapp-float {
    right: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
    font-size: 27px;
  }
}

/* The WhatsApp glyph in the header clusters keeps the brand red of its
   siblings; only the floating button uses WhatsApp's own green. */

/* -- contact page, where the enquiry form used to be -- */
.dh-contact-cta {
  margin-top: 20px;
}

.dh-contact-cta h4 {
  margin-bottom: 8px;
}

.dh-contact-cta .btn i {
  font-size: 18px;
  vertical-align: -2px;
}

/* -- the Autónomo guide's deadlines table -- */
.dh-deadlines {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}

.dh-deadlines th,
.dh-deadlines td {
  padding: 10px 14px;
  border-bottom: 1px solid #e6e6e6;
  text-align: left;
  vertical-align: top;
}

/* Brave ships a material-blue `thead th { color:#fff; background:#2196f3 }`.
   Cancel it explicitly -- the guide's table should read as body copy with a
   brand-red rule under the head, not as a blue banner. */
.dh-deadlines thead th {
  background-color: transparent;
  color: #444;
  border-bottom: 2px solid var(--dh-red);
  font-family: 'gilroy-bold', 'Poppins', sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
}

/* Service pages that group two sub-headed lists in one column (Autónomos)
   need air between a list and the next h4; without it the heading reads as
   part of the list above. */
.split-section .bulleted-color + h4 {
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   9. Split image/text sections: keep the image flush with the copy.

   #profile-intro and #new-profile put a full-bleed image in one column and
   the copy in the other. Bootstrap 4 stretches both columns to the row
   height, but the <img> inside keeps its natural height -- so whenever the
   copy is the taller of the two, the image stops short and leaves a band of
   white beside the end of the text.

   Filling the column and cropping with object-fit makes the two columns end
   on the same line whichever one is taller.

   Gated at 1301px, not 1400: dh-custom.css stacks #profile-intro full width
   below 1400, but profile.html's own <style> block only stacks it below 1300,
   so 1301-1400 is still side by side there and would keep the gap. Below 1301
   every one of these sections is stacked, where the image's natural height is
   what you want -- and a percentage height against an auto-height parent
   resolves to auto anyway.
   -------------------------------------------------------------------------- */

@media (min-width: 1301px) {
  #profile-intro > .container-fluid > .row,
  #new-profile > .container-fluid > .row {
    align-items: stretch;
  }

  /* the wrappers between the column and the image */
  #profile-intro [class*="col-"] > .row,
  #new-profile [class*="col-"] > .row,
  #profile-intro .images-gallery,
  #profile-intro .images-gallery .owl-stage-outer,
  #profile-intro .images-gallery .owl-stage,
  #profile-intro .images-gallery .owl-item {
    height: 100%;
  }

  #profile-intro [class*="col-"] > .row > img,
  #profile-intro .images-gallery img,
  #new-profile [class*="col-"] > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* --------------------------------------------------------------------------
   10. Visited links.

   Nothing in Brave or the DH theme ever set :visited, so a visited link fell
   back to whatever the browser paints it -- the default purple, which showed
   up on in-copy links like "Charlotte Ivory" and on the text of button links.

   Body-copy links take their colour by inheritance, so pinning visited to
   `inherit` reproduces the unvisited appearance exactly; button links keep
   their white label on the brand red.
   -------------------------------------------------------------------------- */

.post-body a:visited,
.split-section a:visited,
.intro-header a:visited,
#profile-intro a:visited,
#new-profile a:visited,
.dh-contact-cta a:visited {
  color: inherit;
}

a.btn:visited,
a.btn-color:visited,
.dh-whatsapp-float:visited {
  color: #fff;
}