/**
 * Main navigation sizing — see inc/header/menu.php for the full reasoning.
 *
 * Remember: html root font-size is 10px on this site, so 1rem = 10px. Sizes
 * here are in px deliberately, to sit alongside Total's own menu rules which
 * are also in px.
 *
 * Measured in the browser against the real menu (Total header style "three",
 * 1140px container), with an 11th item present:
 *
 *   20px / 5px padding  ->  1204px   overflows by 64px   (current, wraps)
 *   18px / 5px padding  ->  1095px   45px slack
 *   17px / 6px padding  ->  1063px   77px slack
 *   16px / 6px padding  ->  1009px   93px slack   <- chosen
 *
 * 16px keeps the menu comfortably clear of the container at every width where
 * it is shown, so a renamed item or a twelfth entry will not immediately push
 * it onto a second line. Below 1200px the mobile menu takes over instead.
 */

/* This file is the ONLY place the top-level menu font-size is set. Two
   competing `!important` declarations previously lived in style.css (20px, and
   17px below 1268px); both were removed and point here, so there is nothing to
   out-specify. Do not reintroduce a size in style.css.

   Note the links contain a `span.link-inner` with `padding: 0.5em 0.4em`
   (style.css). Being em-based it scales with the size set here, which is where
   most of the per-item width actually comes from — roughly 26px per item at
   20px. Changing the font size alone is enough; the spacing follows. */

/*
 * Padding is stepped, because the container does not grow with the viewport at
 * a constant rate: it is min(1140px, viewport - 120px), so it stops widening
 * once the window passes ~1260px.
 *
 * MEASURE BY LAID-OUT WIDTH, NOT BY SUMMING THE ITEMS. The <li>s are
 * inline-block, so there is a whitespace gap of ~4px between each one — about
 * 40px across the row. Adding up li widths under-reports by that much and will
 * tell you a padding fits when it actually wraps. These figures are measured
 * from the first item's left edge to the last item's right edge:
 *
 *   padding    row width    fits 1080 (@1200px)    fits 1140 (@1260px+)
 *      6px       1043px            yes                    yes
 *      7px       1065px            yes  (15px spare)      yes
 *      9px       1109px            no                     yes  (31px spare)
 *     10px       1131px            no                     yes  (9px spare)
 *     11px          —              no                     no
 *
 * 10px is deliberately not used at the wide end: 9px of slack is close enough
 * to the edge that renaming one item would wrap the row.
 *
 * Below 1200px the mobile menu takes over (inc/header/menu.php), so there is no
 * narrower step to provide.
 */
#site-navigation .dropdown-menu > li > a {
	font-size: 16px;
	/*
	 * 4px, down from 7px — measured, not guessed.
	 *
	 * The row now carries TWELVE items: the eleven pages plus the "Enquire"
	 * button. Measured in place by forcing the list onto one line and reading
	 * the width it wants, against the 1140px container:
	 *
	 *   7px padding -> 1177px   37px too wide, wraps
	 *   6px         -> 1155px   15px too wide, wraps
	 *   5px         -> 1133px   fits, 7px spare — too tight to be safe
	 *   4px         -> 1111px   fits, 29px spare   <- chosen
	 *
	 * That is with "About Us" shortened to "About" and "Contact Us" to
	 * "Contact", which together save 43px. Without those two the button does not
	 * fit at any padding worth having.
	 *
	 * 29px is not much. Renaming an item to something longer will wrap the row,
	 * so re-measure if the labels change.
	 */
	padding-left: 4px;
	padding-right: 4px;
}

/* 1260px is where the container stops growing and settles at its 1140px max,
   which is the point the wider padding comfortably fits. */
@media only screen and (min-width: 1260px) {

	#site-navigation .dropdown-menu > li > a {
		/* Was 9px. The container stops growing at 1140px, so the extra padding
		   bought nothing and pushed the twelve-item row over the edge. 5px is
		   the most that still fits (1133px of 1140px). */
		padding-left: 5px;
		padding-right: 5px;
	}

}

/**
 * Keep the top bar in step with the new breakpoint.
 *
 * In mobile-toggle mode Total floats the logo left and up into the space the
 * top bar occupies — that is by design, and style.css already hid the top bar
 * (`#top-bar-social`, the div that also carries .top-bar-left) below 959px to
 * make room. Moving the menu handover to 1199px without moving this left a
 * band from 960-1199px where both rendered and the "Makes the difference"
 * strap sat directly on top of the MAKERS logo.
 *
 * Same 1199px value as inc/header/menu.php — these three must stay in step.
 */
@media only screen and (max-width: 1199px) {

	#top-bar-social {
		display: none;
	}

}

/* ------------------------------------------------ the trailing divider

   The dividers between menu items are a border-right on each link
   (style.css: `.navbar-style-three .dropdown-menu > li.menu-item > a`), which
   left one hanging off the end after "Contact Us".

   NOT fixed with :last-child. The twelfth item is the "Enquire" button, which
   is the last child but is drawn as a bordered button rather than a plain link —
   so :last-child would aim at the button and leave the real trailing divider,
   after "Contact", exactly where it was. (It was worse still when the button was
   desktop-hidden: the rule stripped a divider from an invisible item.)

   Moving the rule to border-LEFT on every item except the first sidesteps the
   problem entirely: dividers only ever appear BETWEEN items, so whichever item
   happens to be last, hidden or not, there is nothing after it. */
.navbar-style-three .dropdown-menu > li.menu-item > a {
	border-right: 0;
}

.navbar-style-three .dropdown-menu > li.menu-item + li.menu-item > a {
	border-left: 1px solid #6f6f6f;
}