/* ==========================================================================
   ibr-megamenu
   Converts a Blocksy three-level dropdown into a multi-column mega panel.

   Scope: only menu items carrying the class .ibr-megamenu are affected.
   All other menu items keep Blocksy's default dropdown behaviour.

   Stage: LAYOUT ONLY. Colours and spacing are provisional and exist so the
   structure can be judged. Brand styling is a separate stage.

   Revision 5
   ----------
   Revision 4 drew the backdrop with a pseudo-element, which did not paint.
   That layer is gone. The panel now carries its own background and is given
   an explicit width, with the columns centred inside it.

   The width is a plain value, not an inherited container variable, so what
   is written here is what renders. Change ONE value to resize the panel:
   see --ibr-megamenu-width below.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Positioning context
   The panel is positioned against the <nav>, not the individual menu item,
   so every panel lands in the same place instead of shifting to sit under
   whichever link is hovered.

   Only the centre point comes from the nav. The panel's width is an explicit
   value set below, so a narrow or wide nav cannot change its size.
   -------------------------------------------------------------------------- */

.header-menu-1 {
	position: relative;
}

.header-menu-1 li.ibr-megamenu {
	position: static;
}


/* --------------------------------------------------------------------------
   2. The panel (level 2 container)
   Explicit width, centred under the menu item. Depends on no ancestor, so
   moving or realigning the nav cannot change its size.
   -------------------------------------------------------------------------- */

.header-menu-1 li.ibr-megamenu > ul.sub-menu {
	--dropdown-width: auto;
	--dropdown-max-width: none;

	/* ----------------------------------------------------------------
	   PANEL WIDTH. How wide the white bar is. 100vw runs it the full
	   width of the window. Set a fixed value such as 1400px to make the
	   bar itself match the site container instead.
	   ---------------------------------------------------------------- */
	--ibr-megamenu-width: 100vw;

	/* ----------------------------------------------------------------
	   COLUMN MAX WIDTH. Columns size to their own content, so short
	   lists stay narrow. This is the point at which an over-long item
	   wraps onto a second line instead of widening its column further.
	   ---------------------------------------------------------------- */
	--ibr-megamenu-column-max: 260px;

	/* ----------------------------------------------------------------
	   SEPARATOR COLOUR. Used by every group separator, at both levels.
	   Change here only.
	   ---------------------------------------------------------------- */
	--ibr-megamenu-rule-colour: #e0e0e0;

	/* ----------------------------------------------------------------
	   PROMO PILL. Colour of the text and of the tinted background
	   behind a highlighted menu item.
	   ---------------------------------------------------------------- */
	--ibr-megamenu-promo-colour: #c00000;
	--ibr-megamenu-promo-tint: rgba(200, 0, 0, 0.09);

	/* ----------------------------------------------------------------
	   SIDE MARGIN. Clearance between the bar and the window edge. Zero
	   while the bar is full width. Raise it if the panel width above is
	   changed to a fixed value.
	   ---------------------------------------------------------------- */
	--ibr-megamenu-side-margin: 0px;

	/* ----------------------------------------------------------------
	   CONTENT WIDTH. The white panel runs the full width of the window,
	   but the columns inside it are held to this width and centred, so
	   they line up with the logo and the rest of the page.
	   ---------------------------------------------------------------- */
	--ibr-megamenu-content-width: 1400px;

	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	column-gap: 48px;
	row-gap: 32px;

	position: absolute !important;
	top: 100% !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;

	/* Narrower of the panel width and the viewport less its side margins,
	   so the panel never touches the window edge and never needs a
	   separate breakpoint between here and the mobile menu. */
	width: min(
		var(--ibr-megamenu-width),
		calc(100vw - (var(--ibr-megamenu-side-margin) * 2))
	) !important;
	min-width: 0 !important;
	max-width: none !important;

	box-sizing: border-box;

	/* Vertical padding is fixed. Horizontal padding grows with the window
	   so the columns stay aligned to the content width above, falling back
	   to a fixed inset on narrower screens. */
	padding: 32px max(
		36px,
		calc((100vw - var(--ibr-megamenu-content-width)) / 2)
	);

	background: #ffffff;
	border: 0;
	border-bottom: 2px solid #AAAAAA;
	border-radius: 0;
	box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.35);

	overflow: visible;
}


/* --------------------------------------------------------------------------
   3. Columns (level 2 items)
   Each column is as wide as its longest item, up to the cap set by
   --ibr-megamenu-column-max above. Only items longer than the cap wrap onto
   a second line, so short columns stay tight and the spacing between them
   stays even. If the columns together exceed the panel width they drop onto
   a second row rather than running off the edge.

   Blocksy sets every menu item to display:flex with a row direction, so the
   direction is forced to column here to stack each heading above its own
   children.
   -------------------------------------------------------------------------- */

.header-menu-1 li.ibr-megamenu > ul.sub-menu > li {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;

	flex: 0 1 auto !important;
	width: auto !important;
	max-width: var(--ibr-megamenu-column-max) !important;

	position: static !important;
	border: 0 !important;
	margin: 0;
	padding: 0;
}

.header-menu-1 li.ibr-megamenu > ul.sub-menu > li > .ct-menu-link {
	display: block;
	padding: 0 0 14px 0;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	color: #111111;
	white-space: normal;
	overflow-wrap: break-word;
}

.header-menu-1 li.ibr-megamenu > ul.sub-menu > li > .ct-menu-link:hover {
	color: #111111;
	text-decoration: none;
}


/* --------------------------------------------------------------------------
   4. Level 3 lists
   Blocksy renders these as hover flyouts. Returned to the normal flow so
   they sit permanently beneath their column heading.

   visibility and pointer-events INHERIT rather than being forced. Every
   panel is positioned in the same place, so a closed panel still occupies
   that space. Forcing these lists to be visible and interactive made the
   closed panels' contents capture the pointer, which switched the open panel
   as soon as the cursor dropped low enough to cross one.

   Inheriting means an open panel passes down "visible" and "interactive"
   while a closed one passes down "hidden" and "none".
   -------------------------------------------------------------------------- */

.header-menu-1 li.ibr-megamenu ul.sub-menu ul.sub-menu {
	--dropdown-width: auto;
	--dropdown-max-width: none;

	display: block !important;
	position: static !important;
	visibility: inherit !important;
	opacity: 1 !important;
	transform: none !important;
	pointer-events: inherit !important;

	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;

	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}

.header-menu-1 li.ibr-megamenu ul.sub-menu ul.sub-menu > li {
	display: block !important;
	position: static !important;
	width: auto !important;
	border: 0 !important;
	margin: 0;
	padding: 0;
}

.header-menu-1 li.ibr-megamenu ul.sub-menu ul.sub-menu > li > .ct-menu-link {
	display: block;
	padding: 7px 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: #444444;
	white-space: normal;
	overflow-wrap: break-word;
}

.header-menu-1 li.ibr-megamenu ul.sub-menu ul.sub-menu > li > .ct-menu-link:hover {
	color: #000000;
	text-decoration: underline;
}


/* --------------------------------------------------------------------------
   4b. Group separators

   A horizontal rule can be placed under any item inside a panel, to break a
   long list into visual groups. Grouping "iBreathe Premium Liquid 3-Pack"
   through "20-Pack" apart from the Nicorefill packs below them makes a long
   column far easier to scan.

   To add one: Appearance > Menus, expand the item the rule should sit BELOW,
   and add this to its CSS Classes field:

       ibr-megamenu-rule

   Works on level 2 headings and level 3 links alike. On a level 2 heading the
   rule sits directly under the heading text; on a level 3 link it sits under
   that link. Nothing else is needed, and no code changes when rules are
   added, moved or removed.

   The colour of every separator is set once, by --ibr-megamenu-rule-colour in
   section 2. Do not hardcode a colour in the rules below.

   The rule is suppressed on the last item of a column, so a stray class left
   at the bottom of a list cannot leave a rule hanging under nothing.

   The !important flags and the repeated "ul.sub-menu" are both required, and
   for the same reason. Sections 3 and 4 above strip borders from every item
   in the panel with "border: 0 !important", in order to remove Blocksy's own
   dividers. Because those rules also carry !important, specificity decides
   the winner, and section 4's level 3 reset is more specific than a shorter
   selector would be. The level 3 rule below therefore spells the depth out
   in full so it outweighs the reset.

   Level 2 and level 3 are written separately for that reason. Merging them
   into one shorter selector will silently stop the level 3 rules painting.
   -------------------------------------------------------------------------- */

/* Level 2 column headings

   The border goes on the heading LINK, not on the list item. The level 2 item
   is a flex column containing the heading and all of its children, so a
   border on the item itself lands beneath the whole column rather than under
   the heading text. */

.header-menu-1 li.ibr-megamenu > ul.sub-menu > li.ibr-megamenu-rule > .ct-menu-link {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 2px solid var(--ibr-megamenu-rule-colour) !important;
}

/* Level 3 links

   Here the border does go on the list item, because a level 3 item contains
   only its own link. */

.header-menu-1 li.ibr-megamenu ul.sub-menu ul.sub-menu > li.ibr-megamenu-rule {
	padding-bottom: 7px;
	margin-bottom: 7px;
	border-bottom: 2px solid var(--ibr-megamenu-rule-colour) !important;
}

.header-menu-1 li.ibr-megamenu ul.sub-menu ul.sub-menu > li.ibr-megamenu-rule:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
   4c. Promo highlight

   Marks a single menu item as a temporary promotion: a tinted pill with a
   slow glint travelling across it, like light moving over glass.

   To apply: Appearance > Menus, expand the item, and add to its CSS Classes
   field:

       ibr-megamenu-promo

   Classes are space separated, so this can sit alongside others:

       ibr-megamenu-rule ibr-megamenu-promo

   Intended to be used sparingly and removed once a promotion ends. Anything
   permanently highlighted stops reading as highlighted.

   Colours are set by --ibr-megamenu-promo-colour and
   --ibr-megamenu-promo-tint in section 2.

   Level 2 and level 3 are written separately for the same specificity reason
   given in section 4b. Do not merge them into one shorter selector.
   -------------------------------------------------------------------------- */

.header-menu-1 li.ibr-megamenu > ul.sub-menu > li.ibr-megamenu-promo > .ct-menu-link,
.header-menu-1 li.ibr-megamenu ul.sub-menu ul.sub-menu > li.ibr-megamenu-promo > .ct-menu-link {
	position: relative;
	display: inline-block;
	overflow: hidden;

	padding: 5px 12px;
	border-radius: 999px;

	background: var(--ibr-megamenu-promo-tint);
	color: var(--ibr-megamenu-promo-colour);
	font-weight: 600;
}

.header-menu-1 li.ibr-megamenu > ul.sub-menu > li.ibr-megamenu-promo > .ct-menu-link:hover,
.header-menu-1 li.ibr-megamenu ul.sub-menu ul.sub-menu > li.ibr-megamenu-promo > .ct-menu-link:hover {
	color: var(--ibr-megamenu-promo-colour);
	text-decoration: none;
}

/* The glint. A narrow band of light sweeping left to right, skewed so it
   reads as a reflection rather than a wipe. */

.header-menu-1 li.ibr-megamenu ul.sub-menu li.ibr-megamenu-promo > .ct-menu-link::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 45%;

	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.85) 50%,
		rgba(255, 255, 255, 0) 100%
	);

	transform: skewX(-20deg);
	pointer-events: none;

	animation: ibr-megamenu-glint 1.5s linear infinite;
}

@keyframes ibr-megamenu-glint {
	0%   { transform: translateX(-160%) skewX(-20deg); }
	100% { transform: translateX(360%)  skewX(-20deg); }
}

/* Respect an operating system setting asking for reduced motion. The pill
   remains, the movement stops. */

@media (prefers-reduced-motion: reduce) {

	.header-menu-1 li.ibr-megamenu ul.sub-menu li.ibr-megamenu-promo > .ct-menu-link::after {
		animation: none;
		display: none;
	}
}


/* --------------------------------------------------------------------------
   5. Notice block
   Injected by PHP as a synthetic menu item, placed first in its panel by
   markup order. Position is set in ibr-megamenu.php, not here, so that it
   reads the same way in the mobile accordion where flex ordering does not
   apply.
   -------------------------------------------------------------------------- */

.header-menu-1 li.ibr-megamenu > ul.sub-menu > li.ibr-megamenu-block {
	display: block !important;
	flex: 0 0 auto !important;
	align-self: stretch;
	width: auto !important;
	padding: 0;
	margin: 0;
	border: 0 !important;
}

.ibr-megamenu-notice {
	box-sizing: border-box;
	width: 230px;
	height: 100%;
	padding: 28px 24px;

	background: #8e2464;
	border-radius: 10px;

	text-align: center;
	color: #ffffff;
}

.ibr-megamenu-notice__heading {
	margin: 0 0 18px 0;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: inherit;
}

.ibr-megamenu-notice__body {
	margin: 0 0 18px 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: inherit;
}

.ibr-megamenu-notice__link {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.ibr-megamenu-notice__link a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	opacity: 0.9;
}

.ibr-megamenu-notice__link a:hover {
	color: inherit;
	border-bottom-color: currentColor;
}


/* --------------------------------------------------------------------------
   5b. Notice block colours

   The default box is magenta. To use a different colour, add one of the
   modifier classes below alongside the base class in
   ibr-megamenu-blocks.php:

       <div class="ibr-megamenu-notice ibr-megamenu-notice--teal">

   Each modifier sets its own text colour, so light backgrounds get dark text
   automatically. Adding a new colour means adding one rule here rather than
   styling a block inline, which keeps every box responding to the mobile
   rules further down this file.
   -------------------------------------------------------------------------- */

/* Reds and pinks */

.ibr-megamenu-notice--magenta { background: #8e2464; color: #ffffff; }
.ibr-megamenu-notice--pink    { background: #d81b60; color: #ffffff; }
.ibr-megamenu-notice--crimson { background: #c2185b; color: #ffffff; }
.ibr-megamenu-notice--red     { background: #d32f2f; color: #ffffff; }

/* Oranges and yellows */

.ibr-megamenu-notice--orange  { background: #e65100; color: #ffffff; }
.ibr-megamenu-notice--tangerine { background: #f57c00; color: #ffffff; }
.ibr-megamenu-notice--amber   { background: #ffb300; color: #1a1a1a; }
.ibr-megamenu-notice--yellow  { background: #fdd835; color: #1a1a1a; }

/* Greens */

.ibr-megamenu-notice--lime    { background: #c0ca33; color: #1a1a1a; }
.ibr-megamenu-notice--green   { background: #43a047; color: #ffffff; }
.ibr-megamenu-notice--forest  { background: #2e7d32; color: #ffffff; }
.ibr-megamenu-notice--teal    { background: #00796b; color: #ffffff; }

/* Blues */

.ibr-megamenu-notice--cyan    { background: #0097a7; color: #ffffff; }
.ibr-megamenu-notice--sky     { background: #0288d1; color: #ffffff; }
.ibr-megamenu-notice--blue    { background: #1565c0; color: #ffffff; }
.ibr-megamenu-notice--indigo  { background: #3949ab; color: #ffffff; }

/* Purples and neutrals */

.ibr-megamenu-notice--violet  { background: #7b1fa2; color: #ffffff; }
.ibr-megamenu-notice--purple  { background: #8e24aa; color: #ffffff; }
.ibr-megamenu-notice--slate   { background: #37474f; color: #ffffff; }
.ibr-megamenu-notice--black   { background: #1a1a1a; color: #ffffff; }


/* --------------------------------------------------------------------------
   6. Dropdown affordances

   Top level: the arrow beside the panel's own link is removed. A link that
   opens a panel is a familiar enough pattern not to need signposting, and
   Blocksy's free tier has no setting for this.

   To remove the arrow from every menu item rather than just mega panels,
   drop "li.ibr-megamenu" from the first selector below, leaving
   .header-menu-1 > ul > li > .ct-menu-link .ct-toggle-dropdown-desktop.

   Inside the panel: the level 3 lists are always visible, so their arrows
   and Blocksy's invisible toggle buttons are redundant and would sit over
   the links.

   The ghost button on the top-level item is deliberately left in place. It
   carries the keyboard and screen reader behaviour for opening the panel, and
   is the second of the two tab stops on a mega item: the link navigates to the
   category, the button opens the panel.

   With the arrow hidden the button has no size of its own, so the focus ring
   collapsed to a sliver over the label. It is given a footprint below so the
   ring reads as a control. It stays invisible to mouse users.
   -------------------------------------------------------------------------- */

.header-menu-1 li.ibr-megamenu > .ct-menu-link .ct-toggle-dropdown-desktop {
	display: none !important;
}

.header-menu-1 li.ibr-megamenu > .ct-toggle-dropdown-desktop-ghost {
	width: 24px;
	height: 24px;
	background: none;
	border: 0;
	cursor: pointer;
}

.header-menu-1 li.ibr-megamenu > .ct-toggle-dropdown-desktop-ghost:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

.header-menu-1 li.ibr-megamenu ul.sub-menu .ct-toggle-dropdown-desktop,
.header-menu-1 li.ibr-megamenu ul.sub-menu .ct-toggle-dropdown-desktop-ghost {
	display: none !important;
}


/* --------------------------------------------------------------------------
   7. Mobile
   Blocksy uses a separate offcanvas panel below the desktop breakpoint. The
   column layout is switched off there and the notice block is restyled to
   run the full width of the panel with left-aligned text.

   Blocksy's expand and collapse behaviour is deliberately untouched. In
   particular the submenu is not forced to display:flex, because Blocksy
   toggles display to open and close it.

   If the site's breakpoint has been changed in the Customizer, match the
   value below to it.
   -------------------------------------------------------------------------- */

@media (max-width: 999px) {

	.header-menu-1 {
		position: static;
	}

	.header-menu-1 li.ibr-megamenu > ul.sub-menu {
		display: block !important;
		left: auto !important;
		transform: none !important;
		width: auto !important;
		max-width: none !important;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	/* The block sits in whichever menu is rendering, so these are not scoped
	   to the desktop nav. */

	li.ibr-megamenu-block {
		display: block !important;
		width: 100% !important;
		flex: 0 0 auto !important;
		margin: 0;
		padding: 0;
		border: 0 !important;
	}

	.ibr-megamenu-notice {
		width: 100%;
		height: auto;
		margin: 4px 0 14px 0;
		padding: 18px 20px;
		text-align: left;
		border-radius: 8px;
	}

	.ibr-megamenu-notice__heading {
		margin-bottom: 12px;
		font-size: 15px;
	}

	.ibr-megamenu-notice__body {
		margin-bottom: 12px;
		font-size: 14px;
	}

	.ibr-megamenu-notice__link {
		font-size: 14px;
	}

	/* ------------------------------------------------------------------
	   Promo pill on mobile

	   Blocksy's offcanvas tray is dark, so the translucent tint used on
	   desktop would be invisible against it. The pill becomes a solid
	   fill with light text instead.

	   These rules are not scoped to .header-menu-1, because the mobile
	   tray is a separate menu with its own markup.

	   Change the two colours here. The desktop pill is unaffected.
	   ------------------------------------------------------------------ */

	li.ibr-megamenu-promo > .ct-menu-link {
		position: relative;
		display: inline-block;
		overflow: hidden;

		padding: 5px 12px !important;
		border-radius: 999px;

		background: #c00000 !important;
		color: #ffffff !important;
		font-weight: 600;
	}

	li.ibr-megamenu-promo > .ct-menu-link::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 45%;

		background: linear-gradient(
			100deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.45) 50%,
			rgba(255, 255, 255, 0) 100%
		);

		transform: skewX(-20deg);
		pointer-events: none;

		animation: ibr-megamenu-glint 1.5s linear infinite;
	}
}