/**
 * The content sidebar: a two-column shell beside the page or post, and the card
 * each widget is given.
 *
 * The three measurements come from the Customizer as custom properties on the
 * shell itself (see `sonipat_it_sidebar_css()`), so this sheet never carries a
 * number the owner can change.
 */

.sonipat-sidebar-shell {
	align-items: start;
	display: grid;
	gap: var( --sonipat-sidebar-gap, 48px );
	grid-template-columns: minmax( 0, 1fr ) var( --sonipat-sidebar-width, 320px );
	margin-inline: auto;
	max-width: var( --wp--style--global--content-size, 1200px );
	width: 100%;
}

.sonipat-sidebar-left .sonipat-sidebar-shell {
	grid-template-columns: var( --sonipat-sidebar-width, 320px ) minmax( 0, 1fr );
}

.sonipat-sidebar-left .sonipat-sidebar {
	grid-column: 1;
	grid-row: 1;
}

.sonipat-sidebar-left .sonipat-sidebar-shell > .wp-block-post-content {
	grid-column: 2;
	grid-row: 1;
}

/* Nothing was put in the area, or the layout is off for this screen: the content
   goes back to the single column it had before a sidebar existed, at the width its
   own template asked for rather than the wider one two columns need. */
.sonipat-sidebar-shell:not( :has( > .sonipat-sidebar ) ) {
	display: block;
	max-width: none;
}

/* --- the sidebar ---------------------------------------------------------- */

.sonipat-sidebar {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: var( --sonipat-widget-gap, 28px );
	width: 100%;
}

.sonipat-widget {
	background: var( --wp--preset--color--surface, #ffffff );
	border: 1px solid var( --wp--preset--color--hairline, rgba( 23, 1, 44, 0.1 ) );
	border-radius: 16px;
	padding: clamp( 1.1rem, 2.4vw, 1.6rem );
}

.sonipat-widget-title,
.sonipat-widget .sidebar-label {
	color: var( --wp--preset--color--ink, #17012c );
	font-size: var( --wp--preset--font-size--small, 0.94rem );
	letter-spacing: 0.1em;
	margin: 0 0 0.9rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var( --wp--preset--color--hairline, rgba( 23, 1, 44, 0.1 ) );
	text-transform: uppercase;
}

.sonipat-widget > :last-child {
	margin-bottom: 0;
}

.sonipat-widget p,
.sonipat-widget li {
	color: var( --wp--preset--color--ink-muted, #504e4e );
	font-size: var( --wp--preset--font-size--small, 0.94rem );
	line-height: 1.65;
}

.sonipat-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sonipat-widget ul li {
	border-bottom: 1px solid var( --wp--preset--color--hairline, rgba( 23, 1, 44, 0.1 ) );
	padding: 0.55rem 0;
}

.sonipat-widget ul li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Plain links in a widget take the brand colour. A button brings its own text
   colour, and painting over it puts ink the same purple as its own face — so the
   buttons are left alone. */
.sonipat-widget a:not( .wp-element-button ) {
	color: var( --wp--preset--color--primary, #6a47ed );
	font-weight: 600;
	text-decoration: none;
}

.sonipat-widget a:not( .wp-element-button ):hover {
	color: var( --wp--preset--color--primary-deep, #5434d0 );
	text-decoration: underline;
}

/* --- the smaller screens -------------------------------------------------- */

/* On a phone the sidebar goes under the content whatever side it was put on: a
   reader who is already scrolling one column should not have to scroll past a
   list of widgets to reach the article. */
@media only screen and ( max-width: 620px ) {
	.sonipat-sidebar-shell,
	.sonipat-sidebar-left .sonipat-sidebar-shell {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sonipat-sidebar,
	.sonipat-sidebar-left .sonipat-sidebar {
		grid-column: 1;
		grid-row: 2;
	}

	.sonipat-sidebar-left .sonipat-sidebar-shell > .wp-block-post-content {
		grid-column: 1;
		grid-row: 1;
	}
}

/* A device the owner switched the sidebar off for takes its column back: the
   aside itself goes away, and the shell stops being a two-column grid so the
   content sits at the width its own template asked for.

   The three ranges do not overlap — phone ends at 620, desktop starts at 1025 —
   so a switch means one screen only, the same three chips the panel shows. */
@media only screen and ( max-width: 620px ) {
	.sonipat-sidebar.sonipat-off-mobile {
		display: none;
	}

	.sonipat-sidebar-shell:has( > .sonipat-sidebar.sonipat-off-mobile ) {
		display: block;
		max-width: none;
	}
}

@media only screen and ( min-width: 621px ) and ( max-width: 1024px ) {
	.sonipat-sidebar.sonipat-off-tablet {
		display: none;
	}

	.sonipat-sidebar-shell:has( > .sonipat-sidebar.sonipat-off-tablet ) {
		display: block;
		max-width: none;
	}
}

@media only screen and ( min-width: 1025px ) {
	.sonipat-sidebar.sonipat-off-desktop {
		display: none;
	}

	.sonipat-sidebar-shell:has( > .sonipat-sidebar.sonipat-off-desktop ) {
		display: block;
		max-width: none;
	}
}