/* The Deerstone - HoneyBadger overrides.
   Consolidated from 19 inline blocks across 58 pages.
   Everything HB has changed on top of the Elementor build lives here.
   Edit this file, not the HTML. */


/* ===== header-nav ===== */
/* The header nav had no font-size rule anywhere; it was inheriting the theme
   default of 15px, which reads as undersized on a wide viewport against a 75px
   hero heading. Set to 16px.

   The letter-spacing that used to sit here has been removed. Together with the
   15px to 16px rise it pushed the left nav group 25px and the right group 11px
   past their containers at 1280, so Host a Retreat and Book Self Catering
   wrapped onto a second line. It only fits from 1366 up, which is the width it
   was checked at; Kirsty reported it from a laptop. Book Self Catering also
   moved out of the nav into the header button, which is where the rest of the
   room came from.
   The gradient is the part that does the work: the nav is white with no
   text-shadow and no background, so on a bright hero it competes with the
   photograph. It darkens only the top 150px and fades to nothing, leaving the
   image untouched below. On the seven pages where the header already carries a
   solid bar, that bar paints over this and it simply does not show.
   The crest is unaffected: it sits in its own centre column between two equal
   outer columns, so nav size cannot move it.
   !important is needed because Elementor sets the size from a five-class
   per-widget selector in post-409.css. Matching that by hand would mean
   hard-coding widget ids that differ per header variant. */
header.elementor-location-header .elementor-nav-menu .elementor-item {
  font-size: 16px !important; }
header.elementor-location-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 150px; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(20,28,26,.66) 0%, rgba(20,28,26,.36) 55%, rgba(20,28,26,0) 100%); }
header.elementor-location-header { position: relative; }


/* ===== header-layout ===== */
/* Thin the nav separators from 2px to a hairline. */
header.elementor-location-header .elementor-nav-menu li::after {
  border-left-width: 1px !important; }
/* Stop the right nav widget growing, so the Gift Vouchers button sits
   beside the menu instead of against the right edge. Guarded: below
   1400px the right column is too narrow for the menu plus a 14px
   button, which is why the button shipped at 12px. */
@media (min-width: 1400px) {
  header.elementor-location-header .elementor-element-ae3b4f7 {
    flex: 0 0 auto !important; width: auto !important; }
  header.elementor-location-header .elementor-element-1d54b2c {
    gap: 16px; }
  header.elementor-location-header .elementor-element-898e571 .elementor-button {
    font-size: 14px !important; }
}


/* ===== shape-dividers ===== */
/* Wave-brush section dividers removed for a clean square edge.
   Scoped to the sections that own one, so the elementor-shape-square
   / -rounded / -circle icon classes are untouched. */
.elementor-element-72ebf57 .elementor-shape-bottom { display: none !important; }
/* Wave-brush section dividers removed for a clean square edge.
   Scoped to the sections that own one, so the elementor-shape-square
   / -rounded / -circle icon classes are untouched. */
.elementor-element-8ff1d8c .elementor-shape-bottom { display: none !important; }
/* Wave-brush section dividers removed for a clean square edge.
   Scoped to the sections that own one, so the elementor-shape-square
   / -rounded / -circle icon classes are untouched. */
.elementor-element-2e92919 .elementor-shape-bottom { display: none !important; }
/* Wave-brush section dividers removed for a clean square edge.
   Scoped to the sections that own one, so the elementor-shape-square
   / -rounded / -circle icon classes are untouched. */
.elementor-element-6ba53b1 .elementor-shape-bottom { display: none !important; }
/* Wave-brush section dividers removed for a clean square edge.
   Scoped to the sections that own one, so the elementor-shape-square
   / -rounded / -circle icon classes are untouched. */
.elementor-element-aa25e76 .elementor-shape-bottom { display: none !important; }
/* Wave-brush section dividers removed for a clean square edge.
   Scoped to the sections that own one, so the elementor-shape-square
   / -rounded / -circle icon classes are untouched. */
.elementor-element-2360af7 .elementor-shape-bottom { display: none !important; }
.elementor-element-923a537 .elementor-shape-bottom { display: none !important; }
.elementor-element-fe2c5d1 .elementor-shape-top { display: none !important; }
/* Wave-brush section dividers removed for a clean square edge.
   Scoped to the sections that own one, so the elementor-shape-square
   / -rounded / -circle icon classes are untouched. */
.elementor-element-86ce96b .elementor-shape-bottom { display: none !important; }
/* Wave-brush section dividers removed for a clean square edge.
   Scoped to the sections that own one, so the elementor-shape-square
   / -rounded / -circle icon classes are untouched. */
.elementor-element-08d766f .elementor-shape-bottom { display: none !important; }


/* ===== inserted-content-styling ===== */
/* Styles the content blocks inserted by the v5 content pass. Those blocks reuse
   Elementor widget classes but carry no data-id, and Elementor keys its per-widget
   CSS to .elementor-element-<id> selectors, so they fell back to theme defaults:
   Roboto instead of Intro and Baskervville, cream #dcd6cb text on white at a 1.45:1
   contrast ratio against the 4.5:1 WCAG AA minimum, and full-bleed with no container.
   Measured on staging, 18 August 2026. The :not([data-id]) selector matches only the
   inserted blocks; native Elementor widgets all carry a data-id and are untouched. */
[data-widget_type]:not([data-id]) { max-width: 900px; margin-left: auto; margin-right: auto; padding: 0 20px; }
[data-widget_type]:not([data-id]) .elementor-heading-title { font-family: "Baskervville", Georgia, serif; font-weight: 400; color: #273c39; text-align: center; line-height: 1.25; margin: 46px 0 18px; }
[data-widget_type]:not([data-id]) h1.elementor-heading-title { font-size: 44px; }
[data-widget_type]:not([data-id]) h2.elementor-heading-title { font-size: 34px; }
[data-widget_type]:not([data-id]) p { font-family: "Intro", sans-serif; font-size: 16.416px; line-height: 1.7; color: #273c39; margin: 0 0 16px; }
[data-widget_type]:not([data-id]) a { color: #273c39; text-decoration: underline; }
/* The footer's inner container carries margin-top:-103px so its curve overlaps the
   section above. Content inserted immediately before the footer makes no allowance
   for that pull, so the last block was painted underneath the footer band and was
   invisible on the page while present and correctly styled in the DOM. Reported by
   Neil, who was right; every check that measured the block itself came back clean.
   Pushing the footer down restores the clearance. */
body.hb-inserted-content footer.elementor-location-footer { margin-top: 130px; }


/* ===== kirsty-layout ===== */
/* R24. Ten content images carried border-radius 100px 100px 100px 200px.
   That uneven fourth corner is the organic shape Kirsty asked to lose. */
.elementor-1104 .elementor-element.elementor-element-b7a2e7a img,
.elementor-1104 .elementor-element.elementor-element-040e4a9 img,
.elementor-1104 .elementor-element.elementor-element-c99c563 img,
.elementor-1104 .elementor-element.elementor-element-004ef58 img,
.elementor-1104 .elementor-element.elementor-element-3d653af img,
.elementor-1104 .elementor-element.elementor-element-14422b6 img,
.elementor-1104 .elementor-element.elementor-element-2fc9c0e img,
.elementor-1104 .elementor-element.elementor-element-07d13bb img,
.elementor-1104 .elementor-element.elementor-element-0230254 img,
.elementor-1104 .elementor-element.elementor-element-70697bd img {
  border-radius: 0 !important; }
/* R33. Three containers under "Gatherings at The Deerstone" were masked
   with an organic PNG shape, which is what made the images read as
   merging into each other. Squared off. */
.elementor-232 .elementor-element-fb6e679 .elementor-widget-container,
.elementor-232 .elementor-element-fb6e679 img,
.elementor-232 .elementor-element-56c771f2 .elementor-widget-container,
.elementor-232 .elementor-element-56c771f2 img,
.elementor-232 .elementor-element-3ec68a2 .elementor-widget-container,
.elementor-232 .elementor-element-3ec68a2 img {
  -webkit-mask-image: none !important; mask-image: none !important; }
/* R31. Centre the hero, move "Natural & Nourishing" below the H1 using
   flex order rather than moving markup, and reduce the H1 across all
   three breakpoints (was 75 / 65 / 40). */
.elementor-519 .elementor-element-7cbaf30 > .e-con-inner {
  align-items: center !important; text-align: center !important; }
/* The H1 widget sets align-self: flex-start on itself, so centring the
   container is not enough: its box would still sit left of centre. */
.elementor-519 .elementor-element-7cbaf30 > .e-con-inner > .elementor-element {
  align-self: center !important; }
.elementor-519 .elementor-element-7cbaf30 > .e-con-inner > .elementor-element-3e78a5a { order: 1; }
.elementor-519 .elementor-element-7cbaf30 > .e-con-inner > .elementor-element-7dd2dc2 { order: 2; }
.elementor-519 .elementor-element-7cbaf30 > .e-con-inner > .elementor-element-1cd0c9a { order: 3; }
.elementor-519 .elementor-element-7cbaf30 > .e-con-inner > .elementor-element-4079338 { order: 4; }
.elementor-519 .elementor-element.elementor-element-3e78a5a .elementor-heading-title {
  font-size: 56px !important; line-height: 1.2 !important; }
@media (max-width: 1211px) {
  .elementor-519 .elementor-element.elementor-element-3e78a5a .elementor-heading-title { font-size: 50px !important; }
}
@media (max-width: 767px) {
  .elementor-519 .elementor-element.elementor-element-3e78a5a .elementor-heading-title { font-size: 34px !important; }
}


/* ===== header-contrast ===== */
/* The site header is a fixed, transparent overlay designed to sit on a dark hero
   image, so it serves the reverse logo and pale nav links. These pages have no hero:
   the five new pages had their page wrapper replaced during the v5 build, and
   /retreats/ and /teachers-page/ now open with an inserted H1. The result was a white
   or cream page under a transparent header, giving white nav links at roughly 1.3:1
   contrast and content starting at 46px, underneath the fixed 132px header.
   Only the desktop bar needs a background: below 1025px the header already carries a
   dark motion-effects layer. Header heights measured at 132, 119 and 88px. */
body.hb-solid-header header.elementor-location-header .elementor-element-731d380 { background-color: #273c39; }
body.hb-solid-header #content.site-content { padding-top: 132px; }
@media (max-width: 1024px) {
body.hb-solid-header #content.site-content { padding-top: 110px; }
}
@media (max-width: 767px)  {
body.hb-solid-header #content.site-content { padding-top: 90px; }
}


/* ===== exclusive-hire-palette ===== */
/* R20. Kirsty: "Can we change white backgrounds to a softer brand guideline
   contrast colour?" #FFFFFF to #DCD6CB, the cream already used on /corporate/
   and /sustainability/.
   The :not() is carried over from the Elementor rule this overrides. Without it
   the override is one class less specific and silently loses. Buttons and the
   enquiry form keep their white deliberately.
   The page body is deliberately NOT recoloured: the hero H1 is cream text sized
   for a dark photograph, and a cream body put it at 1.0:1 against its own
   background wherever the hero image had not painted. Sections only. */
.elementor-477 .elementor-element.elementor-element-dac59cd:not(.elementor-motion-effects-element-type-background),
.elementor-477 .elementor-element.elementor-element-8cb1bd6:not(.elementor-motion-effects-element-type-background),
.elementor-477 .elementor-element.elementor-element-9fc0c91:not(.elementor-motion-effects-element-type-background),
.elementor-477 .elementor-element.elementor-element-f6addeb:not(.elementor-motion-effects-element-type-background),
.elementor-477 .elementor-element.elementor-element-75b9432:not(.elementor-motion-effects-element-type-background),
.elementor-477 .elementor-element.elementor-element-e0caade:not(.elementor-motion-effects-element-type-background),
.elementor-477 .elementor-element.elementor-element-0c3fac2:not(.elementor-motion-effects-element-type-background),
.elementor-477 .elementor-element.elementor-element-47713e7:not(.elementor-motion-effects-element-type-background),
.elementor-477 .elementor-element.elementor-element-59a657b:not(.elementor-motion-effects-element-type-background),
.elementor-477 .elementor-element.elementor-element-4551ad9:not(.elementor-motion-effects-element-type-background),
.elementor-477 .elementor-element.elementor-element-3d119d8:not(.elementor-motion-effects-element-type-background) { background-color: #DCD6CB; }


/* ===== retreat-grid-alignment ===== */
/* Aligns the Eventful Pro retreat cards. Cards were already equal height per row,
   but the thumbnails ran from 197px to 416px because the source images are a mix of
   portrait, square and landscape, so the View Details buttons landed anywhere from
   342px to 561px down the card. Measured on staging, 18 August 2026. */
body.hb-retreat-grid .eventful .ta-row { align-items: stretch; }
body.hb-retreat-grid .eventful .ta-row > div { display: flex; }
body.hb-retreat-grid .eventful .eventful_pro__item { display: flex; flex-direction: column; width: 100%; }
body.hb-retreat-grid .eventful .eventful_pro__item--meta { margin: 0 0 10px; }
body.hb-retreat-grid .eventful .eventful_pro__item--title { display: flex; align-items: center; justify-content: center; min-height: 78px; height: auto; margin: 0 0 16px; }
body.hb-retreat-grid .eventful .eventful_pro__item--thumbnail { margin: 0 0 22px; }
body.hb-retreat-grid .eventful .eventful_pro__item--thumbnail a { display: block; }
body.hb-retreat-grid .eventful .eventful_pro__item--thumbnail img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
body.hb-retreat-grid .eventful .eventful_pro_cf_list { margin-top: auto; display: flex; justify-content: center; }


/* ===== wellness-hero ===== */
/* Hero image and legibility on /wellness-retreats/.
   The previous hero, yoga_retreats_wicklow.jpg, was an extreme close-up of a massage.
   It read as skin and hands rather than a retreat, and it was the only primary page
   whose hero showed no place: every other one leads with the property or the setting.
   Replaced with the roundhouse and the hillside behind it.
   The hero also had no scrim, and the H1 renders in pale cream #dcd6cb at 65px
   uppercase. When the H1 was the single word "Retreats" that just about held; the v5
   copy change to "Wellness Retreats in Ireland" wraps to two lines and spans 779px,
   so the text crossed the busiest part of the photograph. The gradient darkens the
   left side, where the text sits, and eases to a lighter floor on the right so the
   building stays visible. The floor never reaches zero because at 1440 the two-line
   H1 spans 8.4% to 91.6% of the hero, past the point an earlier fade-to-zero
   gradient had stopped covering. Measured 18 August 2026. */
.elementor-element-08d766f { background-image: url("/assets/uploads/2026/06/hero-roundhouse2.jpg") !important; background-position: center 60% !important; background-size: cover !important; position: relative; }
.elementor-element-08d766f::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,28,26,.72) 0%, rgba(20,28,26,.58) 45%, rgba(20,28,26,.44) 75%, rgba(20,28,26,.36) 100%); pointer-events: none; z-index: 0; }
.elementor-element-08d766f > * { position: relative; z-index: 1; }


/* ===== carousel-aspect ===== */
/* The four images in this carousel were all 720x480 before the R28 swap. Their
   replacements are a mix of 1.78 and 1.50 ratios, so the slides no longer line up.
   Constrain every slide to the original 3:2 and crop from the centre. */
.elementor-element-4648d6c .swiper-slide-image { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; object-position: center; display: block; }
.elementor-element-4648d6c .swiper-slide-inner { margin: 0; display: block; }

/* ===== kirsty-r34-activities ===== */
/* R34. The homepage Activities block was illustrated with a guide holding a
   wicker basket addressing a group, which is the image Kirsty struck through.
   Replaced with croquet on the lawn: unmistakably an activity, on the estate,
   with The Barn behind. Cropped to the slot's own 712x900 ratio so
   background-size: cover has nothing left to crop.

   Elementor sets this in post-232.css with a five-class selector including
   :not(.elementor-motion-effects-element-type-background), so this carries
   !important rather than trying to out-specify it. post-232.css is generated
   output and is deliberately left untouched. */
.elementor-232 .elementor-element.elementor-element-1280516 {
  background-image: url("/assets/uploads/2026/08/croquet_on_the_lawn.jpg") !important; }

/* ===== homepage-carousel-aspect ===== */
/* The homepage carousel ran four slides at 3:2 and one at 16:9, because
   group_dining_long_table.jpg replaced an animated GIF in an earlier pass and is
   1920x1078. Measured at 475x317 against 475x267, so the row visibly stepped.
   The same constraint is already applied to the /wellness-retreats/ carousel. */
.elementor-element-bd525a6 .swiper-slide-image {
  aspect-ratio: 3 / 2; width: 100%; height: auto;
  object-fit: cover; object-position: center; display: block; }
.elementor-element-bd525a6 .swiper-slide-inner { margin: 0; display: block; }

/* ===== kirsty-r29-card-tints ===== */
/* R29. Kirsty asked for the pale retreat cards on /wellness-retreats/ to become a
   variety of soft brand colours rather than one flat tone. They were #E8E8E8 on all
   twelve.

   This was recorded as blocked twice. The colour is declared in an inline <style>
   as #eventful_pro_wrapper-986 .eventful_pro__item, not in any stylesheet, which is
   why searching the CSS files found nothing. And post-519.css is shared with the
   five pages cloned from this one, so it could not carry a change scoped here. The
   hb-retreat-grid body class solves the second problem: it exists on this page only.

   An ID selector beats any number of classes, so these carry !important.

   She asked for variety, so the rule has to guarantee no two touching cards match,
   and the grid changes shape: 3 columns above 1200px, 2 from 768 to 1200, 1 below.
   A plain 3-cycle is correct at 1 and 2 columns but fails at 3, where every column
   would end up a single colour, so above 992px the cycle shifts by one per row.

   The breakpoints come from ta-grid.min.css, where the class suffix is the column
   count: ta-col-lg-3 holds 33.22% down to 992px, ta-col-md-2 takes over at 50%
   below that, and ta-col-xs-1 goes full width under 420px. Reading the class names
   as breakpoints rather than counts gave 1200px, which left 992 to 1200 on the
   3-cycle while still three across, and every column came out one flat colour. */
body.hb-retreat-grid .ta-row > *:nth-child(3n+1) .eventful_pro__item {
  background-color: #DCD6CB !important; }
body.hb-retreat-grid .ta-row > *:nth-child(3n+2) .eventful_pro__item {
  background-color: #BAC7BF !important; }
body.hb-retreat-grid .ta-row > *:nth-child(3n+3) .eventful_pro__item {
  background-color: #E7DBD7 !important; }

@media (min-width: 993px) {
  body.hb-retreat-grid .ta-row > *:nth-child(9n+1) .eventful_pro__item {
    background-color: #DCD6CB !important; }
  body.hb-retreat-grid .ta-row > *:nth-child(9n+2) .eventful_pro__item {
    background-color: #BAC7BF !important; }
  body.hb-retreat-grid .ta-row > *:nth-child(9n+3) .eventful_pro__item {
    background-color: #E7DBD7 !important; }
  body.hb-retreat-grid .ta-row > *:nth-child(9n+4) .eventful_pro__item {
    background-color: #BAC7BF !important; }
  body.hb-retreat-grid .ta-row > *:nth-child(9n+5) .eventful_pro__item {
    background-color: #E7DBD7 !important; }
  body.hb-retreat-grid .ta-row > *:nth-child(9n+6) .eventful_pro__item {
    background-color: #DCD6CB !important; }
  body.hb-retreat-grid .ta-row > *:nth-child(9n+7) .eventful_pro__item {
    background-color: #E7DBD7 !important; }
  body.hb-retreat-grid .ta-row > *:nth-child(9n+8) .eventful_pro__item {
    background-color: #DCD6CB !important; }
  body.hb-retreat-grid .ta-row > *:nth-child(9n+9) .eventful_pro__item {
    background-color: #BAC7BF !important; }
}

/* ===== header-nav-fit ===== */
/* The two outer header columns are equal at 40 per cent each, but the left menu
   carries five items and the right two, so the left ran out of room first. At
   1212, the narrowest width where the desktop nav still shows rather than the
   burger, the left menu needed 482px in 459px while the right had 95px spare.
   Total space was never the problem, only its distribution.

   Both outer columns take 40px from the centre column, which had roughly 78px of
   air around a 129px crest. The crest keeps its own size and stays centred: only
   the column around it narrows. Item padding drops from 5px to 4px a side.

   Measured at 1212 after: left menu 26px spare, right 143px, one line.
   Padding alone was not enough, it left the left menu 4px short.

   Scoped below 1400 on purpose. From 1400 up the header-layout block already
   shrink-wraps the right menu and the margins were balanced at 290 and 276.
   Applying this there too widened the right margin to 412 against 327 on the
   left, fixing nothing and unbalancing what was already right. */
@media (max-width: 1399px) {
  header.elementor-location-header .elementor-element-3f852d9,
  header.elementor-location-header .elementor-element-1d54b2c {
    width: calc(40% + 40px) !important; }
  header.elementor-location-header .elementor-nav-menu .elementor-item {
    padding-left: 4px !important; padding-right: 4px !important; }
}

/* ===== homepage-section-gaps ===== */
/* Kirsty: "Alignment of pictures. We need a gap." The homepage bands butted
   straight into each other. Measured: the accommodation image ended at 4036 and
   the Roundhouse row began at 4036, and every row grid carried gap: 0. A
   full-width photo sat directly on a half-width one, so the edges met at a hard
   join and, because the widths differ, it read as a mistake.

   24px gutters, horizontally between each image and its text panel and
   vertically between the stacked bands. 24px is the figure the brief already
   uses for the same problem on /sustainability/ and /corporate/.

   The parent is display: block, so the vertical separation is margins rather
   than a gap on the container.

   A gutter shows whatever is painted behind it, and here that was not white.
   body carries a background IMAGE, rhnighttouch1a.jpg, a dark night shot, and
   every container between body and these sections is transparent, so the first
   version let that photo show through the gaps. Neil caught it. The homepage
   wrapper is painted white so the gutters read as gutters. Checked first that
   all 19 wrapper children are opaque, so the body image was not deliberately
   visible anywhere else on the page. .elementor-232 is the homepage wrapper,
   so this stays homepage only. */
.elementor-232 {
  background-color: #ffffff !important; }
.elementor-232 .elementor-element.elementor-element-95ec7c5,
.elementor-232 .elementor-element.elementor-element-d386d72,
.elementor-232 .elementor-element.elementor-element-b37d662,
.elementor-232 .elementor-element.elementor-element-86b11fe {
  gap: 24px !important; }
.elementor-232 .elementor-element.elementor-element-1151f26,
.elementor-232 .elementor-element.elementor-element-95ec7c5,
.elementor-232 .elementor-element.elementor-element-d386d72,
.elementor-232 .elementor-element.elementor-element-99088a9,
.elementor-232 .elementor-element.elementor-element-b37d662,
.elementor-232 .elementor-element.elementor-element-86b11fe {
  margin-bottom: 24px !important; }

/* ===== kirsty-r26-roundhouse-yoga ===== */
/* R26. Kirsty: "Replace image with simple Roundhouse yoga layout". The block
   beside Host Your Own Retreat on /wellness-retreats/ carried yoga_session.jpg,
   a close hands-on adjustment of one identifiable person lying on a mat.

   I recorded R26 as done earlier. It was not. roundhouse_yoga_simple.jpg went
   into the four-image gallery further up the page as part of R28, and I took
   that filename as evidence the request was satisfied without checking which
   element it landed on. The page was never confirmed in the brief either; a
   screenshot from Kirsty settled it.

   Replaced with a group class in the Roundhouse: the curved ceiling, the window
   wall and the woodland behind it, which is what that section is actually
   selling. It also answers the brief's own note that the previous shot was a
   close frame of an identifiable person and worth a model release check.

   Cropped to the slot's own 712x720 so background-size: cover crops nothing
   further, at 2x for the slot. */
.elementor-519 .elementor-element.elementor-element-5e895d5 {
  background-image: url("/assets/uploads/2026/08/roundhouse_yoga_group.jpg") !important; }