/* Main navigation. A full-width dark blue header bar (.site-header) with the
   white logo. Desktop (801px+): one row with the logo, white category links, a
   search icon and favourites; hovering a category opens a full-width white
   mega menu. Mobile (800px and below) keeps the menu styles in brand.css.
   The markup lives in includes/NavBar.php. */

/* Slim utility bar above the main header - small links, right-aligned */
.site-topbar { background: #12213a; }
.site-topbar-inner { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 6px 20px; line-height: 1.3; }
.site-topbar a { color: #c3cbdb; font-size: 11px; line-height: 1.3; font-weight: 400; text-decoration: none; letter-spacing: .01em; }
.site-topbar a:hover { color: #fff; text-decoration: underline; }
.site-topbar a.site-topbar-fav { display: inline-flex; align-items: center; gap: 4px; }
.site-topbar-fav svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.site-topbar-count { min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #cc4c50; color: #fff; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center; }
@media only screen and (max-width: 800px) {
	.site-topbar-inner { justify-content: center; gap: 12px; padding: 3px 12px; flex-wrap: wrap; }
	.site-topbar a { font-size: 10.5px; }
}

.site-header { background: #1a2a49; }
.site-header .top-menu-outer { background: none; border-bottom: 0; }
.site-header .site-logo { display: block; width: 240px; height: auto; }
.site-header .gf-fav-nav, .site-header .mobilesearchtoggle, .site-header .mobilemenu { color: #fff; }
.site-header .gf-fav-nav:hover, .site-header .mobilesearchtoggle:hover { color: #fabc4e; }
.site-header .gf-fav-count { box-shadow: 0 0 0 2px #1a2a49; }

@media only screen and (min-width: 801px) {

	/* Header row */
	.top-menu-outer { position: relative; padding: 0 20px; }
	.top-menu-outer > header { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; min-height: 76px; }
	/* The mega menu hangs off the header so it starts flush under the links (no hover gap) */
	.top-menu-outer .mobilemenusection { display: none; }
	.top-menu-outer .logosection.sitelogo { order: 1; flex: none; margin-right: 26px; }
	.top-menu-outer #mainnav { order: 2; flex: 1 1 auto; min-width: 0; }
	.top-menu-outer .mobilesearchtoggle { order: 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; font-size: 21px; text-decoration: none; }
	.top-menu-outer .gf-fav-nav { order: 4; float: none; margin: 0; }

	/* Category links */
	.navouter { background: none; border: 0; padding: 0; position: static; }
	.navouter .links { position: static; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; width: auto; max-width: none; margin: 0; padding: 0; text-align: left; }
	.navouter .links > a.categorylink,
	.navouter .links > a.dunelm-link,
	.navouter .links > a.categorylink.inspiration-link {
		position: relative; display: flex; align-items: center; padding: 0 13px; height: 76px; line-height: 1;
		border: 0; color: #fff; font-size: 14.5px; font-weight: 400; letter-spacing: .01em; text-decoration: none; white-space: nowrap; background: none;
	}
	.navouter .links > a.categorylink:after {
		content: ""; position: absolute; left: 13px; right: 13px; bottom: 18px; height: 2px; padding: 0;
		background: #fabc4e; transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
	}
	.navouter .links > a.categorylink:hover { color: #fff !important; transition-delay: 0s; }
	.navouter .links > a.categorylink:hover:after,
	.navouter .links > a.categorylink.active:after { transform: scaleX(1); }

	/* Mega menu panel */
	.navouter .content-menu {
		position: absolute; top: 100%; left: 0; right: 0; width: auto; z-index: 999;
		box-sizing: border-box; padding: 34px 40px 38px; margin: 0;
		background: #fff; border: 0; box-shadow: 0 14px 28px rgba(0,0,0,.12);
		color: #333; font-size: 14px; text-align: left;
	}
	.navouter .content-menu > .menu-item { float: left; width: 25%; box-sizing: border-box; padding: 0 24px 0 0; border: 0; }
	.navouter .content-menu > .menu-item:nth-of-type(n) { border-left: 0; padding-left: 0; }
	.navouter .menu-item .menu-item { float: none; width: auto; padding: 0; border: 0; }
	.navouter .content-menu:after { content: ""; display: block; clear: both; position: static; border: 0; }
	.navouter .menu-title { padding: 0 0 22px; font-weight: 400; background: none; border: 0; }
	.navouter .menu-item a { display: block; padding: 0; line-height: 1.4; }
	.navouter .menu-title-heading { margin: 0 0 8px; color: #222; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
	.navouter .menu-title-heading:hover { color: #1a2a49; text-decoration: none; }
	.navouter a.menu-item-sub-cat { padding: 5px 0; color: #6b6b6b; font-size: 14px; font-weight: 400; line-height: 1.45; }
	.navouter a.menu-item-sub-cat:before { content: none; display: none; }
	.navouter a.menu-item-sub-cat:hover { color: #1a2a49; text-decoration: none; }
	.navouter .menu-item a.nodt, .navouter .menu-item-sub-cat.nodt { display: none; }
	.navouter .menu-spacer { margin: 0; }

	/* Search: an icon in the row that opens a slim search bar over the header */
	.top-menu-outer div#searchform { display: none; position: absolute; left: 0; right: 0; top: 0; z-index: 1000; width: auto; height: 100%; float: none; margin: 0; padding: 0 20px; box-sizing: border-box; background: #1a2a49; align-items: center; gap: 16px; }
	.top-menu-outer div#searchform[style*="block"] { display: flex !important; }
	.top-menu-outer div#searchform form { display: flex; flex: 1; max-width: 900px; margin: 0 auto; }
	.top-menu-outer div#searchform input[type="text"] { flex: 1; width: auto; height: 46px; margin: 0; padding: 0 18px; border: 0; border-radius: 23px 0 0 23px; font-size: 15px; box-sizing: border-box; }
	.top-menu-outer div#searchform .searchBtn { height: 46px; margin: 0; padding: 0 24px; border: 0; border-radius: 0 23px 23px 0; background: #fabc4e; color: #1a2a49; font-weight: 600; font-size: 15px; cursor: pointer; }
	.top-menu-outer a.mobilesearchtogglesmall { display: block; padding: 10px; color: #fff; font-size: 14px; white-space: nowrap; }
}

/* Narrower desktops: the category links drop to their own line under the logo */
@media only screen and (min-width: 801px) and (max-width: 1239px) {
	.top-menu-outer > header { min-height: 0; padding-top: 10px; }
	.top-menu-outer .logosection.sitelogo { margin-right: auto; }
	.top-menu-outer #mainnav { order: 5; flex-basis: 100%; }
	.navouter .links { justify-content: center; }
	.navouter .links > a.categorylink,
	.navouter .links > a.dunelm-link,
	.navouter .links > a.categorylink.inspiration-link { height: 50px; padding: 0 11px; font-size: 14px; }
	.navouter .links > a.categorylink:after { bottom: 10px; left: 11px; right: 11px; }
	.navouter .content-menu > .menu-item { width: 33.333%; }
}

/* Mobile: the nav sits inside the header, so drop it in just below the header bar */
@media only screen and (max-width: 800px) {
	.top-menu-outer { position: relative; }
	.top-menu-outer #mainnav { top: 100%; left: 0; right: 0; width: 100%; }
	.site-header .top-menu-outer { border-bottom: 0; }
	.site-header .logosection { text-align: center; }
	.site-header .site-logo { width: 180px; margin: 0 auto; }
	.site-header .mobilemenu { color: #fff; }
}

.nav-search-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; display: block; }