/**
 * PhD Menu Arrows 1.2.0
 *
 * Mobile drawer (since 1.0.0): replaces the drawer submenu toggles' thin
 * green arrow glyph with the owner-approved indicator: a filled brand-green
 * (#57803a) circle containing a white arrow when the section is closed.
 * When a section is OPEN, its toggle inverts — white circle (green ring)
 * with a green up arrow — so the open section is distinguishable at a
 * glance from the closed ones.
 *
 * Desktop nav (1.2.0, owner's pick "Option 3 — Tiny triangle"): the theme
 * renders each dropdown's indicator as a long-shaft arrow SVG inside
 * <span class="site-header__nav-arrow">. The owner found it busy and chose
 * the classic quiet marker instead: hide the SVG and draw a tiny filled
 * white triangle (8px wide, 5px tall) in its place.
 *
 * Targets the LLG-Boilerplate header markup:
 *   drawer: <button class="site-header__drawer-toggle" aria-label="Toggle Submenu">
 *             <span class="site-header__drawer-arrow"><svg ...></svg></span>
 *           </button>
 *           (open state flagged by .is-active on .site-header__drawer-item--has-sub)
 *   desktop: <a class="site-header__nav-link">LOCATIONS
 *              <span class="site-header__nav-arrow"><svg ...></svg></span></a>
 */

/* 1. Hide the legacy thin green arrow glyph everywhere in the mobile drawer. */
.site-header__drawer .site-header__drawer-toggle .site-header__drawer-arrow {
	display: none;
}

/* 2. Turn the toggle button itself into the green circle with a white down arrow. */
.site-header__drawer .site-header__drawer-toggle {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #57803a;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M6 13l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
	cursor: pointer;
}

/* 3. Open state: cancel the theme's 180deg rotation and INVERT the colors —
      white circle with a green up arrow — so the open section reads as
      different from every closed (green) circle around it. The ring is an
      inset box-shadow so the white circle stays visible on the drawer's
      white background without shifting the layout. */
.site-header__drawer .site-header__drawer-item--has-sub.is-active > .site-header__drawer-row .site-header__drawer-toggle {
	transform: none;
	background-color: #ffffff;
	box-shadow: inset 0 0 0 2px #57803a;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357803a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M6 11l6-6 6 6'/%3E%3C/svg%3E");
}

/* 4. Desktop nav: replace the theme's long-shaft arrow with a tiny triangle.
      The theme sizes .site-header__nav-arrow at 10x11px with opacity 0.7 and
      lets the SVG fill it; hide the SVG and draw the triangle with borders.
      The span is inline-flex with centered alignment, so the zero-size
      ::after with colored top border renders as a small filled ▾. */
.site-header__nav-arrow {
	width: auto;
	height: auto;
	opacity: 0.85;
}
.site-header__nav-arrow svg {
	display: none;
}
.site-header__nav-arrow::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid #ffffff;
}
