/* M2 — header (desktop + mobile). Owned by the header task. */

/* =========================================================================
   M2.H1 — Mobile header layout (phones, <= 767px)

   Problem being fixed
   -------------------
   The header section (Elementor document 19141) is a plain two-column row:
   the left column holds the logo, the right column holds burger + cart +
   "Try for free". Both columns are hard-coded to 50% width, and the right
   column wraps its widgets. Once the "Try for free" button became visible on
   phones (it used to be hidden, which made the free course unreachable from
   the header on mobile), the right column no longer had room for three
   widgets, so the button dropped onto a second row:

       430px, before:  logo 200x62 | burger 18x29 | cart 122x41
                       button 150x42 pushed to y=56  ->  header 113px tall

   Fix, CSS only (no changes to the Elementor document, so a re-save or a
   theme/plugin update cannot undo it):
     * columns become auto-width instead of 50/50, the row never wraps;
     * the logo is capped at 40px tall (it was 62px);
     * the right cluster is a nowrap flex row, right-aligned, 8px gap, with
       the reading order logo | Try for free | cart | burger;
     * on phones the cart shows only its icon + quantity badge (the price is
       still one tap away in the dropdown, and it stays on tablet/desktop);
     * the button loses its trailing arrow, gets phone-sized paddings and is
       allowed to shrink and ellipsise, so a longer label set by the client in
       "Ollie Options -> Header Button" cannot break the row again.
   ========================================================================= */

/* =========================================================================
   M2.H0 — All widths: the header row must never wrap.

   The button label is editable in "Ollie Options -> Header Button". With the
   stock label ("Try for free") everything fits, but a longer label used to
   push the button onto a second line on desktop as well: at 1440px the label
   "Start your free trial course now" made the button 320px wide and grew the
   header from 90px to 134px. The button is therefore capped and truncates
   instead of re-flowing the header.

   The 200px cap is derived from the measured desktop budget: at 1440px the
   right-hand widget row is 915px wide and the nav menu (507px) plus the cart
   (117px + 2x20px margin) already use 664px, leaving 251px.
   The default label "Try for free" is 160px, so the cap never bites in
   normal use — it only stops an over-long label from breaking the header.
   ========================================================================= */
.edublink-elementor-header-wrapper .elementor-element-220db33 .edublink-button-item {
	max-width: 200px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* =========================================================================
   M2.H2 — Header cart: soft beige pill instead of the boxed outline.

   Problem
   -------
   Elementor Pro's Menu Cart toggle ships with a 1px #69727d outline and a 0px
   radius, so next to the rounded, filled "Try for free" button it read like an
   input field from another design: square corners, hairline grey border,
   transparent fill, and 41px tall against the button's 44px.

   Fix, CSS only
   -------------
   Elementor Pro drives the toggle entirely from custom properties
   (--toggle-button-*), so the whole restyle is a handful of variables on the
   widget wrapper — no Elementor document change, nothing to lose on a re-save
   or a plugin update, and the widget's own Style tab still wins if the client
   ever sets those controls in the editor.

     * border removed, radius 5px — the same radius as the header button;
     * fill #F6F1EA, the beige the site already uses for the band directly
       under the header, so the cart reads as the button's quiet sibling
       instead of competing with the teal CTA;
     * text/icon #3F4B5B instead of #69727d: 7.9:1 on the beige (the stock grey
       managed 4.9:1 on white), and it matches the logo wordmark;
     * height 44px to match the button exactly (was 41px).

   Not touched: the horizontal margins around the widget (M1.2 in style.css —
   the icon spacing the client signed off on) and the dropdown itself.
   ========================================================================= */
.elementor-19141 .elementor-element-306e40c {
	--toggle-button-background-color: #F6F1EA;
	--toggle-button-border-width: 0px;
	--toggle-button-border-type: none;
	--toggle-button-border-radius: 5px;
	--toggle-button-text-color: #3F4B5B;
	--toggle-button-icon-color: #3F4B5B;
	/* Elementor uses the hover set for :hover AND for the "dropdown is open"
	   state, so it has to be declared or the pill goes transparent mid-click. */
	--toggle-button-hover-background-color: #EFE7DB;
	--toggle-button-hover-border-color: transparent;
	--toggle-button-hover-text-color: #3F4B5B;
	--toggle-button-icon-hover-color: #3F4B5B;
}

.elementor-19141 .elementor-element-306e40c .elementor-menu-cart__toggle_button {
	border: 0;
	height: 44px;
	min-height: 44px;
	padding: 0 18px;
	font-weight: 500;
	transition: background-color .2s ease;
}

.elementor-19141 .elementor-element-306e40c .elementor-menu-cart__toggle_button:focus-visible {
	background-color: #EFE7DB;
	outline: 2px solid #1AB69D;
	outline-offset: 2px;
}

@media (max-width: 767px) {

	/* --- the row itself: one line, vertically centred, never wraps -------- */
	.elementor-19141 .elementor-element-19d430b > .elementor-container {
		flex-wrap: nowrap;
		align-items: center;
		column-gap: 12px;
	}

	/* Logo column: only as wide as the logo needs. */
	.elementor-19141 .elementor-element.elementor-element-8c2180e {
		width: auto;
		flex: 0 0 auto;
		min-width: 0;
	}

	/* Actions column: takes the rest of the row and hugs the right edge. */
	.elementor-19141 .elementor-element.elementor-element-386ea20 {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}

	.elementor-19141 .elementor-element-386ea20 > .elementor-widget-wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
	}

	/* --- logo ------------------------------------------------------------ */
	/* 40px tall, but never wider than 30% of the screen: on a 360px phone the
	   logo is 108px and the action cluster still has room to stay on one line. */
	.elementor-19141 .elementor-element-b3f86e4 img {
		height: 40px;
		width: auto;
		max-width: 30vw;
		object-fit: contain;
		object-position: left center;
	}

	.elementor-19141 .elementor-element-b3f86e4 .edublink-site-logo-widget-container,
	.elementor-19141 .elementor-element-b3f86e4 .edublink-site-main-logo,
	.elementor-19141 .elementor-element-b3f86e4 .edublink-site-main-logo > a {
		display: block;
		line-height: 0;
	}

	/* --- visual order: button, cart, burger ------------------------------ */
	.elementor-19141 .elementor-element-386ea20 .elementor-element-220db33 {
		order: 1;
		flex: 0 1 auto;
		min-width: 0;
	}

	.elementor-19141 .elementor-element-386ea20 .elementor-element-306e40c {
		order: 2;
		flex: 0 0 auto;
	}

	.elementor-19141 .elementor-element-386ea20 .elementor-element-79dc7be {
		order: 3;
		flex: 0 0 auto;
	}

	/* --- "Try for free" button ------------------------------------------- */
	/* Shrinkable and truncating: survives a longer label from Ollie Options. */
	.elementor-19141 .elementor-element-220db33 .elementor-widget-container,
	.elementor-19141 .elementor-element-220db33 .edublink-button-widget-wrapper {
		min-width: 0;
	}

	.elementor-19141 .elementor-element-220db33 .edublink-button-widget-wrapper {
		display: flex;
		justify-content: flex-end;
	}

	.edublink-elementor-header-wrapper .elementor-element-220db33 .edublink-button-item {
		height: 40px;
		line-height: 40px;
		padding: 0 14px;
		font-size: 13px;
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* The trailing arrow costs ~21px and adds nothing on a phone. */
	.edublink-elementor-header-wrapper .elementor-element-220db33 .edublink-button-item i,
	.edublink-elementor-header-wrapper .elementor-element-220db33 .edublink-button-item svg {
		display: none;
	}

	/* --- cart: icon + badge only ----------------------------------------- */
	.elementor-19141 .elementor-element-306e40c.elementor-widget-woocommerce-menu-cart {
		margin-left: 0;
		margin-right: 0;
	}

	.elementor-19141 .elementor-element-306e40c .elementor-menu-cart__toggle_button .elementor-button-text {
		display: none;
	}

	.elementor-19141 .elementor-element-306e40c .elementor-menu-cart__toggle_button {
		width: 40px;
		height: 40px;
		min-height: 40px;
		padding: 0;
		justify-content: center;
	}

	/* --- burger: 40x40 tap target ---------------------------------------- */
	.elementor-19141 .elementor-element-79dc7be .edublink-elementor-mobile-hamburger-menu > a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
	}

	.elementor-19141 .elementor-element-79dc7be .edublink-elementor-mobile-hamburger-menu > a svg {
		width: 20px;
		height: auto;
	}

	/* --- dropdown must not run off a narrow screen ------------------------ */
	.elementor-19141 .elementor-element-306e40c .elementor-menu-cart__container {
		max-width: calc(100vw - 20px);
	}
}

/* Small phones (iPhone SE and friends): tighten gaps and button paddings so
   the label still fits whole instead of being ellipsised. */
@media (max-width: 374px) {

	.elementor-19141 .elementor-element-19d430b > .elementor-container {
		column-gap: 10px;
	}

	.elementor-19141 .elementor-element-386ea20 > .elementor-widget-wrap {
		gap: 6px;
	}

	.edublink-elementor-header-wrapper .elementor-element-220db33 .edublink-button-item {
		padding: 0 12px;
	}
}