/*
 * Boxed icons - the house treatment, taken from the doc-sidebar cards.
 * 36px soft square, radius 10, cream ground, taupe glyph.
 *
 * The mega-menu rail icon is position:absolute at left:20px inside a 52px text
 * gutter, so the gutter widens to 66px to make room for the box.
 * Selectors lead with body and repeat the class to clear MMM's own rules, which
 * sit at (2,5,5) with !important - see the megamenu note.
 */

:root {
  --anan-iconbox-size: 36px;
  --anan-iconbox-bg: #f2efe9;
  --anan-iconbox-fg: #6e6659;
  --anan-iconbox-radius: 10px;
}

/* ------------------------------------------- mega-menu rail tabs --- */

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  padding-left: 66px !important;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::before {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--anan-iconbox-size) !important;
  height: var(--anan-iconbox-size) !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-radius: var(--anan-iconbox-radius) !important;
  background: var(--anan-iconbox-bg) !important;
  color: var(--anan-iconbox-fg) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  text-align: center !important;
  transition: background 0.2s ease, color 0.2s ease;
}

/* the active or hovered tab lifts its icon to the gold */
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item:hover > a.mega-menu-link::before,
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link::before {
  background: #6e6659 !important;
  color: #ffffff !important;
}

/* a divider row has no icon, so it must not inherit the box */
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.ana-rail-heading > a.mega-menu-link {
  padding-left: 20px !important;
}
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.ana-rail-heading > a.mega-menu-link::before {
  display: none !important;
}

/* ------------------------------------ Elementor icon-box widgets --- */
/*
 * The area, district and island guide cards. Only the icon gets a ground; the
 * glyph keeps whatever colour the page set, so a gold icon stays gold on the
 * cream square.
 */

.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--anan-iconbox-bg, #f2efe9);
	transition: background 0.2s ease, transform 0.2s ease;
}

.elementor-widget-icon-box:hover .elementor-icon-box-icon .elementor-icon {
	background: #e8e2d6;
	transform: translateY(-1px);
}

.elementor-widget-icon-box .elementor-position-left .elementor-icon-box-icon,
.elementor-widget-icon-box .elementor-position-right .elementor-icon-box-icon {
	flex-shrink: 0;
}

.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon svg,
.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon i {
	font-size: 20px;
	width: auto;
	height: auto;
	line-height: 1;
}

@media (max-width: 767px) {
	.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
		width: 40px;
		height: 40px;
		border-radius: 10px;
	}
}

/* ------------------------------------- mega-menu panel leaves --- */
/* Boxed at list scale: 30px rather than the rail's 36px, so a panel of twenty
   reads as a list and not a grid of tiles. The injected pills (Insights View
   more, Company Meet the team) are buttons, not menu items, and are excluded. */
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li:not(.ana-ins-more):not(.ana-co-more) > a.mega-menu-link::before {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  margin-right: 12px !important;
  border-radius: 8px !important;
  background: var(--anan-iconbox-bg) !important;
  color: var(--anan-iconbox-fg) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-align: center !important;
  transition: background 0.2s ease, color 0.2s ease;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li:not(.ana-ins-more):not(.ana-co-more) > a.mega-menu-link:hover::before {
  background: #6e6659 !important;
  color: #ffffff !important;
}


/* ------------------------------------- rail hover / selected --- */
/*
 * MMM ships both states as rgba(210,193,150,0.1) - the pale gold at ten per
 * cent, which is all but invisible against white, so the open tab did not read
 * as open. Three signals instead of one: a warmer ground, a gold rule down the
 * left edge, and the title darkening. The divider row is excluded - it is a
 * label, not a target.
 */





body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item:not(.ana-rail-heading):hover > a.mega-menu-link {
  color: #252a2c !important;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-toggle-on:not(.ana-rail-heading) > a.mega-menu-link {
  color: #252a2c !important;
}

/* the subtitle should follow the title rather than stay grey */
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item:not(.ana-rail-heading):hover > a.mega-menu-link::after,
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-toggle-on:not(.ana-rail-heading) > a.mega-menu-link::after {
  color: #6e6659 !important;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-toggle-on:not(.ana-rail-heading) > a.mega-menu-link::before {
  background: #6e6659 !important;
  color: #ffffff !important;
}


/* --------------------------------------------- top-level bar --- */
/*
 * Boxed here too, at 26px - the bar is only 40px tall, so the rail's 36px
 * would fill it edge to edge. Originally left unboxed on the grounds that it
 * would make the header heavy; the user overrode that, and with the smaller
 * box and a light ground it sits fine.
 */

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  margin-right: 6px !important;
  border-radius: 7px !important;
  background: var(--anan-iconbox-bg) !important;
  color: var(--anan-iconbox-fg) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  transition: background 0.2s ease, color 0.2s ease;
}

/* hover and the open/current item: icon inverts, label darkens */
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link::before,
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link::before,
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link::before,
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link::before {
  background: #6e6659 !important;
  color: #ffffff !important;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link,
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
  color: #252a2c !important;
}

/* the current section keeps a gold underline so you can see where you are */

/* the bar has to clear the logo at 1280 - it is the tightest common width */
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  padding-left: 7px !important;
  padding-right: 7px !important;
}


/* ------------------------------------------ rail rows as cards --- */
/*
 * The row is a rounded card: inset from the panel edge, so the shape reads even
 * before it is coloured. Resting is transparent, hover is the warm beige, and
 * the open tab goes dark with white type. The margin and radius sit on every
 * row rather than appearing on hover, or the rows would shift as the pointer
 * moved.
 */

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item:not(.ana-rail-heading) > a.mega-menu-link {
  margin: 3px 12px !important;
  border-radius: 12px !important;
  /* no !important here: it would outrank a transition:none override and make
     the state impossible to inspect */
  transition: background 0.2s ease, color 0.2s ease;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item:not(.ana-rail-heading):hover > a.mega-menu-link {
  background: #ece5d6 !important;
  color: #252a2c !important;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-toggle-on:not(.ana-rail-heading) > a.mega-menu-link {
  background: #ece5d6 !important;
  color: #252a2c !important;
}

/* subtitle follows the ground it sits on */
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item:not(.ana-rail-heading):hover > a.mega-menu-link::after {
  color: #6e6659 !important;
}
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-toggle-on:not(.ana-rail-heading) > a.mega-menu-link::after {
  color: #6e6659 !important;
}

/* icon: dark on the beige card, gold on the dark one */
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item:not(.ana-rail-heading):hover > a.mega-menu-link::before {
  background: #6e6659 !important;
  color: #ffffff !important;
}
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-toggle-on:not(.ana-rail-heading) > a.mega-menu-link::before {
  background: #6e6659 !important;
  color: #ffffff !important;
}


/* ------------------------------------ top bar hover / current --- */
/*
 * Same language as the rail: the warm beige for hover AND the section you are
 * actually in - the old #2a2723 chocolate pill read too heavy (user, 2026-08-20).
 * The current section keeps the gold icon box so it still stands apart from a
 * plain hover. Horizontal margin gives the pills air: measured 2026-08-20 at
 * 1280px there is ~59px of slack between the menu and the user avatar, so 3px
 * a side (+48px total over 8 items) fits, and wider screens can afford 5px.
 */

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  margin: 6px 3px !important;
  border-radius: 10px !important;
  transition: background 0.2s ease, color 0.2s ease;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link,
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
  background: #ece5d6 !important;
  color: #252a2c !important;
}

body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
  background: #ece5d6 !important;
  color: #252a2c !important;
}

/* wider screens can afford a wider gap between the pills */
@media (min-width: 1400px) {
  body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    margin: 6px 5px !important;
  }
}

/* icon follows: taupe box on the hover beige, gold box marks the current section */
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link::before,
body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link::before {
  background: #ae8c63 !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
 * Dropdown arrows without dashicons (2026-08-20)
 * ---------------------------------------------------------------------------
 * MMM draws .mega-indicator::after as a dashicons glyph, but dashicons only
 * loads for logged-in users AND FlyingPress's Remove-Unused-CSS strips the
 * stylesheet for visitors anyway (no element carries a .dashicons class), so
 * anonymous browsers rendered a tofu box after every item with a dropdown.
 * A border chevron needs no font and cannot be stripped away from under us.
 * Attribute-prefix ids cover the primary and mobile menu wraps alike. */
body div[id^="mega-menu-wrap"] ul[id^="mega-menu"] li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator::after {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  border-bottom: none;
  transform: none;
  /* MMM forces vertical-align: top on the indicator glyph, which floated the
     arrow to the item's top-right corner - the "ugly chevron" complaint. */
  vertical-align: middle !important;
  position: relative;
  top: -1px;
  margin-left: 2px;
  opacity: .6;
}

/* ------------------------------------------- header avatar dropdown --- */
/* The theme paints #user_menu_open a:hover with BOTH the menu hover back AND
   hover font options, which are the same taupe (#6e6659) on this site, so the
   hovered label vanished. White ink on the taupe pill; icon strokes follow. */
body #user_menu_open a:hover,
body #user_menu_open a:focus {
  color: #fff !important;
}
body #user_menu_open a:hover svg path,
body #user_menu_open a:hover svg circle,
body #user_menu_open a:focus svg path,
body #user_menu_open a:focus svg circle {
  stroke: #fff !important;
}
body #user_menu_open a:hover .unread_mess,
body #user_menu_open a:focus .unread_mess {
  background-color: #fff !important;
  color: #6e6659 !important;
}

/* ------------------------------------------- blog archive overflow --- */
/* Category/tag archives and single posts showed a horizontal scrollbar on
   Windows (classic 15px vertical scrollbar + something sized to the full
   viewport). The homepage already clips the x axis; do the same here. */
body.archive, body.single-post, body.blog, body.search-results {
  overflow-x: clip;
}