/* ==========================================================================
   KP - Full-width header for Blocksy type-1
   kimiapeyvand.ir  |  RTL Persian, Blocksy 2.1.50
   --------------------------------------------------------------------------
   Goals
     1. header spans edge to edge, no gutter on either side
     2. current height and the logo / menu / phone order are left alone
     3. background tuned to the site palette: mint, faint teal, white,
        very light blue-grey
     4. nothing saturated, nothing loud
     5. logo stays in the start column (right in RTL), menu in the middle
        column, phone in the end column (left in RTL)
     6. full width on desktop, still responsive on mobile
     7. no element may push out of the viewport or cause a horizontal scrollbar
     8. clean and clinical, to suit a dental / medical site
     9. one very soft gradient, no clutter
    10. everything is scoped to the header, nothing else on the site is touched
    11. only the declarations needed for the above are written

   Why the header was not full width
     The Customizer writes  :root { --theme-container-edge-spacing: 88vw }
     and the theme computes .ct-container-fluid as
        width: calc(var(--theme-container-edge-spacing) - frame*2)
     so every fluid container is 88% of the viewport and centred, leaving a
     6vw gutter on each side. Above 1000px the theme redeclares the variable
     on the element itself (100vw - 60px), which is a 30px gutter. Either way
     the header stops short of both edges.

   Specificity notes, checked against static/bundle/main.min.css
     - "#header [data-row]", "#header [data-row]>div" and
       "#header [data-column-set=3]>div" are id selectors, so a plain class
       rule cannot beat them. Every rule below that touches the row, the
       grid or the row box-shadow is therefore written with an #header prefix.
     - ".site-logo-container img" uses height:inherit on purpose. Setting
       height:auto there would render the 512x512 logo at its natural size and
       blow the header up, so the logo is left completely untouched.
     - The Customizer sets --logo-max-height twice, 148px then 28px, with the
       same selector, so 28px is what actually renders today. Left as is.

   Loaded by wp-content/mu-plugins/kp-header-menu.php
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Palette - one place, linked to the theme's own tokens
   -------------------------------------------------------------------------- */
[data-header*="type-1"] .ct-header {
	--kp-white: #FFFFFF;

	--kp-mint: #EAF6F1;
	--kp-mint-soft: #F4FAF8;
	--kp-mint-chip: #E3F2EC;

	--kp-teal-hint: #E7F2F4;
	--kp-blue-grey: #EDF2F7;
	--kp-blue-grey-soft: #F5F8FB;

	--kp-green: var(--theme-palette-color-1, #076951);
	--kp-ink: var(--theme-palette-color-4, #192c27);

	--kp-line: rgba(7, 105, 81, .12);
	--kp-line-soft: rgba(7, 105, 81, .07);
	--kp-shadow: 0 6px 20px -14px rgba(25, 44, 39, .40);
}


/* --------------------------------------------------------------------------
   1. FULL WIDTH
      The row container becomes the full width of the row, with only a small
      scalable inline padding so nothing touches the screen edge.
      width:100% rather than 100vw, because 100vw includes the scrollbar on
      some browsers and would itself cause a horizontal scrollbar.
   -------------------------------------------------------------------------- */
#header .ct-header [data-row*="middle"] > .ct-container-fluid {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: clamp(14px, 2.4vw, 34px);
}

/* The theme's 1fr auto 1fr grid lets the middle column grow past the row
   when the menu is wide. minmax(0, ...) lets it shrink instead, which is
   what keeps requirement 7 true. */
#header .ct-header [data-row*="middle"][data-column-set="3"] > .ct-container-fluid {
	grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
}

#header .ct-header [data-column="middle"] {
	min-width: 0;
}


/* --------------------------------------------------------------------------
   2. BACKGROUND + SEPARATOR
      Replaces the Customizer's linear-gradient(to top, #dfe9f3, white).
      Kept nearly opaque on purpose: the body behind it is a teal to blue
      gradient, and a clinical header should still read as clean white.
      The hairline is an inset shadow, not a border, so the header height
      does not change by a single pixel.
   -------------------------------------------------------------------------- */
#header .ct-header [data-row*="middle"] {
	background-color: var(--kp-mint-soft);
	background-image: linear-gradient(
		100deg,
		var(--kp-blue-grey-soft) 0%,
		var(--kp-mint) 22%,
		var(--kp-white) 50%,
		var(--kp-teal-hint) 78%,
		var(--kp-blue-grey-soft) 100%
	);
	background-repeat: no-repeat;
	box-shadow: inset 0 -1px 0 var(--kp-line), var(--kp-shadow);
	-webkit-backdrop-filter: blur(13px) saturate(105%);
	backdrop-filter: blur(13px) saturate(105%);
}


/* --------------------------------------------------------------------------
   3. LOGO
      Intentionally almost empty. The theme sizes it with
      .site-logo-container { height: var(--logo-max-height) } and
      .site-logo-container img { height: inherit }, and the current rendered
      height is what requirement 2 asks to keep. Only overflow is guarded,
      and only on the wrapper, never on the img.
   -------------------------------------------------------------------------- */
[data-header*="type-1"] .ct-header [data-id="logo"] > [data-items] {
	min-width: 0;
}

[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
}


/* --------------------------------------------------------------------------
   4. PHONE ICON - stays in the end column, just a softer circular chip
      [data-color="custom"] is included because the Customizer sets the
      icon colours on exactly that pair of selectors.
   -------------------------------------------------------------------------- */
[data-header*="type-1"] [data-id="socials"].ct-header-socials [data-color="custom"] {
	--theme-icon-size: 34px;
	--background-color: rgba(255, 255, 255, .92);
	--background-hover-color: var(--kp-mint-chip);
	--theme-icon-color: var(--kp-ink);
	--theme-icon-hover-color: var(--kp-green);
}

[data-header*="type-1"] [data-id="socials"].ct-header-socials {
	--items-spacing: 0;
}

[data-header*="type-1"] [data-id="socials"].ct-header-socials .ct-social-box {
	border: 1px solid var(--kp-line);
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(25, 44, 39, .05);
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

[data-header*="type-1"] [data-id="socials"].ct-header-socials .ct-social-box:hover,
[data-header*="type-1"] [data-id="socials"].ct-header-socials .ct-social-box:focus-within {
	border-color: rgba(7, 105, 81, .30);
	transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   5. MENU - desktop only. Below 1024px the theme swaps to a different
      device block with the off-canvas panel, and none of these selectors
      match anything there.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {

	/* ---- frame around the whole menu ---------------------------------- */
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 7px;

		min-width: 0;
		margin: 0;
		padding: 6px 8px;

		background-color: rgba(255, 255, 255, .78);
		border: 1px solid rgba(255, 255, 255, .9);
		border-radius: 18px;
		box-shadow: inset 0 0 0 1px var(--kp-line-soft), 0 1px 3px rgba(25, 44, 39, .04);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}

	/* ---- each top-level item is its own chip -------------------------- */
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li {
		float: none;               /* the theme ships "float left" */
		position: relative;        /* keep the dropdown positioning */
		list-style: none;
		min-width: 0;

		background-color: var(--kp-white);
		border: 1px solid var(--kp-line);
		border-radius: 12px;

		transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
	}

	/* ---- the link inside the chip ------------------------------------- */
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > .ct-menu-link {
		display: flex;
		align-items: center;
		gap: 6px;

		height: auto;              /* override the theme's --menu-item-height: 84% */
		min-height: 38px;
		margin: 0;
		padding: 8px 15px;

		border-radius: 12px;
		font-weight: 600;
		text-decoration: none;
	}

	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > .ct-menu-link .ct-toggle-dropdown-desktop {
		display: inline-flex;
		align-items: center;
		opacity: .55;
		transition: opacity .18s ease;
	}

	/* ---- hover: a soft mint wash, no saturated fill -------------------- */
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li:hover,
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li:focus-within {
		background-color: var(--kp-mint-chip);
		border-color: rgba(7, 105, 81, .28);
		box-shadow: 0 2px 8px -4px rgba(7, 105, 81, .30);
	}

	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li:hover > .ct-menu-link,
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li:focus-within > .ct-menu-link,
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li:hover > .ct-menu-link .ct-toggle-dropdown-desktop,
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li:focus-within > .ct-menu-link .ct-toggle-dropdown-desktop {
		color: var(--kp-green);
		opacity: 1;
	}

	/* ---- current page -------------------------------------------------- */
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-menu-item,
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-menu-ancestor,
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current_page_item {
		background-color: var(--kp-mint);
		border-color: rgba(7, 105, 81, .34);
	}

	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-menu-item > .ct-menu-link,
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-menu-ancestor > .ct-menu-link,
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current_page_item > .ct-menu-link {
		color: var(--kp-green);
		font-weight: 700;
	}

	/* ---- keyboard focus ring ------------------------------------------ */
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > .ct-menu-link:focus-visible {
		outline: 2px solid var(--kp-green);
		outline-offset: 2px;
	}

	/* ---- dropdown panels stay clean, not chip on chip ------------------- */
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > .sub-menu {
		border: 1px solid var(--kp-line-soft);
		border-radius: 12px;
		box-shadow: 0 12px 28px -14px rgba(25, 44, 39, .45);
	}

	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > .sub-menu > li {
		float: none;
		border-radius: 0;
		box-shadow: none;
	}

	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > .sub-menu > li > .ct-menu-link {
		height: auto;
		min-height: 0;
		padding: 9px 16px;
		border-radius: 0;
	}

	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > .sub-menu > li:hover > .ct-menu-link,
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > .sub-menu > li:focus-within > .ct-menu-link {
		color: var(--kp-green);
	}
}


/* --------------------------------------------------------------------------
   6. TIGHTER DESKTOP WIDTHS
      Eight chips plus the logo and the phone chip will not fit on one line
      around 1100px. Below 1280px they shrink a little, and below that the
      flex-wrap on the ul takes over instead of pushing the row wider.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1279px) {
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul {
		gap: 5px;
		padding: 5px 6px;
		border-radius: 16px;
	}

	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > .ct-menu-link {
		min-height: 34px;
		padding: 6px 11px;
		font-size: 15px;
	}
}


/* --------------------------------------------------------------------------
   7. MOBILE
      The theme renders a different device block here (logo + menu trigger)
      and hides the desktop one. Only the container needs to be full width;
      the chips are deliberately not applied.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	#header .ct-header [data-row*="middle"] > .ct-container-fluid {
		padding-inline: clamp(12px, 3.5vw, 22px);
	}

	[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
		--logo-max-height: 46px;
	}

	[data-header*="type-1"] .ct-header [data-id="trigger"] .ct-toggle {
		border: 1px solid var(--kp-line);
		border-radius: 12px;
		background-color: rgba(255, 255, 255, .9);
	}
}


/* --------------------------------------------------------------------------
   8. Respect a reduced-motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li,
	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > .ct-menu-link .ct-toggle-dropdown-desktop,
	[data-header*="type-1"] [data-id="socials"].ct-header-socials .ct-social-box {
		transition: none;
	}

	[data-header*="type-1"] [data-id="socials"].ct-header-socials .ct-social-box:hover,
	[data-header*="type-1"] [data-id="socials"].ct-header-socials .ct-social-box:focus-within {
		transform: none;
	}
}