/* GS Notice */

a.gs-notice {
	display: grid !important;
	grid-template-columns: 54px minmax(0, 1fr) 28px;
	align-items: center;
	gap: 16px;

	width: min(100%, 680px);
	max-width: 100%;
	margin: 32px auto;
	padding: 22px 24px;

	box-sizing: border-box;
	overflow: hidden;

	border: 1px solid var(--wp--preset--color--accent-5, #e4e7ec);
	border-left: 4px solid var(--wp--preset--color--accent-1, #6f5bd3);
	border-radius: 16px;

	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #111);
	text-decoration: none;

	box-shadow: 0 10px 30px rgba(17, 17, 17, 0.04);

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

a.gs-notice:hover {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--accent-4, #d7dce5);
	color: var(--wp--preset--color--contrast, #111);
	text-decoration: none;
	box-shadow: 0 16px 40px rgba(17, 17, 17, 0.08);
}

a.gs-notice:focus,
a.gs-notice:active,
a.gs-notice:visited {
	color: var(--wp--preset--color--contrast, #111);
	text-decoration: none;
}

a.gs-notice:focus-visible {
	outline: 3px solid color-mix(
		in srgb,
		var(--wp--preset--color--accent-1, #6f5bd3) 28%,
		transparent
	);
	outline-offset: 3px;
}

/* Icon */
.gs-notice__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 54px;
	height: 54px;
	flex: 0 0 54px;

	border: 1px solid var(--wp--preset--color--accent-5, #e4e7ec);
	border-radius: 999px;

	background: var(--wp--preset--color--accent-7, #f7f5ff);
	color: var(--wp--preset--color--accent-1, #6f5bd3);
}

.gs-notice__icon svg {
	display: block;
	width: 26px;
	height: 26px;
	fill: currentColor;
}

/* Content */
.gs-notice__body {
	display: grid;
	gap: 7px;
	min-width: 0;
}

.gs-notice__label {
	display: block;
	min-width: 0;

	color: var(--wp--preset--color--accent-2, #756f82);

	font-size: 13px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	overflow-wrap: anywhere;
	word-break: normal;
}

.gs-notice__title {
	display: block;
	min-width: 0;

	color: var(--wp--preset--color--contrast, #111);

	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.35;
	font-weight: 700;

	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.gs-notice__desc {
	display: block;
	min-width: 0;

	color: var(--wp--preset--color--accent-3, #595463);

	font-size: 15px;
	line-height: 1.65;

	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

/* Arrow */
.gs-notice__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 28px;
	height: 28px;

	color: var(--wp--preset--color--accent-1, #6f5bd3);
	opacity: 0.78;
}

.gs-notice__arrow svg {
	display: block;
	width: 28px;
	height: 28px;
	fill: currentColor;
}

/* Prevent theme link styles from affecting inner elements */
a.gs-notice .gs-notice__icon,
a.gs-notice .gs-notice__body,
a.gs-notice .gs-notice__label,
a.gs-notice .gs-notice__title,
a.gs-notice .gs-notice__desc,
a.gs-notice .gs-notice__arrow {
	text-decoration: none;
}

/* Mobile */
@media (max-width: 640px) {
	a.gs-notice {
		grid-template-columns: 46px minmax(0, 1fr);
		gap: 14px;

		margin: 24px auto;
		padding: 18px;
	}

	.gs-notice__icon {
		width: 46px;
		height: 46px;
		flex-basis: 46px;
	}

	.gs-notice__icon svg {
		width: 22px;
		height: 22px;
	}

	.gs-notice__arrow {
		display: none;
	}

	.gs-notice__title {
		font-size: 18px;
	}

	.gs-notice__desc {
		font-size: 14px;
		line-height: 1.6;
	}
}