/**
 * woocommerce/product-details block styles.
 *
 * Moved here out of assets/scss/woocommerce/_single-product.scss --
 * DECISIONS.md #4. Enqueued for the block from functions.php; there is no
 * build step for this file, so edit it directly, and write logical
 * properties because it never passes through rtlcss.
 *
 * The block renders WooCommerce's classic tabs: a `.woocommerce-tabs` wrapper
 * holding a `ul.wc-tabs` tab list, a `.panel-title` heading per tab, and one
 * `.woocommerce-Tabs-panel` per tab. The plugin's script hides the tab list and
 * shows the `.panel-title` headings, or the reverse, so both are styled below
 * and both are laid out the same way.
 *
 * The comment form rules at the end are the review form inside the Reviews tab.
 * They are rooted at the block, not written bare, because the blog's own
 * comment form is styled in assets/scss/gb-block/_single-post.scss and the two
 * must not reach each other.
 *
 * Nested per DECISIONS.md #5, mobile-first with the breakpoint blocks last per
 * #2.
 *
 * Sections:
 *   1. Wrapper and panels
 *   2. Tab list / accordion headings
 *   3. Description panel
 *   4. Additional information panel
 *   5. Reviews -- the list
 *   6. Reviews -- the form
 *   7. Responsive
 */

.wp-block-woocommerce-product-details {

	.tabs li {
		border: 0;
	}

	.woocommerce-tabs {

		/* --------------------------------------------------------------------------
		 * 1. Wrapper and panels
		 *
		 * On narrow screens the tabs collapse to an accordion and the open panel
		 * bleeds out to the page edges, which is what the negative inline margin
		 * plus matching padding does. The lg block at the bottom pulls it back
		 * into the column.
		 * ----------------------------------------------------------------------- */

		margin-block-start: 40px;
		padding-block-end: 0;

		/*
		 * Carried over from the rules this file replaces. Nothing in the theme
		 * draws a border on the accordion headings today; this is the guard that
		 * kept the closed Reviews heading from growing one.
		 */
		.reviews_tab:not(.active) {
			border-bottom-width: 0;
		}

		.panel-title.active:not(.reviews_tab) + .panel {
			margin-inline: -1.5rem;
			padding: 2.5rem;
		}

		/* --------------------------------------------------------------------------
		 * 2. Tab list / accordion headings
		 * ----------------------------------------------------------------------- */

		.wc-tabs,
		.panel-title {
			display: flex;
			align-items: center;
			gap: 10px;
			margin: 0 0 30px;
			padding: 0;
			border: 0;
			font-size: clamp(20px, 1.25rem + ((1vw - 3.2px) * 1.111), 24px);
			font-weight: 500;
			list-style: none;

			a {
				position: relative;
				display: inline-block;
				padding: 10px 0;
				border: 1px solid transparent;
				border-radius: 50px;
				color: var(--wp--preset--color--gray-1000);
			}

			li.active a,
			&.active a,
			a:hover,
			a:focus {
				color: var(--wp--preset--color--gray-100);
			}

			/* The 50px underline that marks the open tab. */
			li.active a,
			&.active a {

				&::before {
					content: "";
					position: absolute;
					inset-block-end: 0;
					inset-inline: 50% 0;
					width: 50px;
					height: 4px;
					background: var(--wp--preset--color--primary);
					transform: translateX(-50%);
				}
			}
		}

		.wc-tabs li {
			padding: 0;
			border: 0;
		}

		/* --------------------------------------------------------------------------
		 * 3. Panels -- shared, then description
		 * ----------------------------------------------------------------------- */

		.woocommerce-Tabs-panel {

			/*
			 * Each panel prints its own "Description" / "Reviews" heading above
			 * content the tab strip has already named.
			 */
			> h2,
			.woocommerce-Reviews-title {
				display: none;
			}

			> p {
				font-weight: 500;
				line-height: 26px;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		.woocommerce-Tabs-panel--description {

			> p {
				max-width: 924px;
				margin-inline: auto;
			}

			p {
				color: var(--wp--preset--color--gray-100);
				font-size: 18px;
				line-height: 30px;
			}
		}

		/* --------------------------------------------------------------------------
		 * 4. Additional information
		 *
		 * WooCommerce prints the attributes as a two-column table, one
		 * attribute per row, label in the row header. The design is a spec
		 * sheet instead: no rules, no columns of labels, each attribute a
		 * small block with its name above its value, and those blocks laid
		 * out across the page.
		 *
		 * That means dropping the table display entirely -- `display: block`
		 * on the table and its rows, `grid` on the body -- so the rows can be
		 * grid items. The grid is one column here and widens at the two
		 * breakpoints at the bottom of the file. Row order is left-to-right;
		 * the markup gives the attributes in the order the shop set them and
		 * that order is what reads across.
		 *
		 * Rooted through `table.woocommerce-product-attributes` rather than
		 * the panel alone so it outweighs `.woocommerce table.shop_attributes`
		 * in the plugin's frontend stylesheet, which sets a dotted rule and a
		 * 150px label column on the same elements wherever that file loads.
		 * ----------------------------------------------------------------------- */

		.woocommerce-Tabs-panel--additional_information {

			p {
				margin: 0;
			}

			table.woocommerce-product-attributes {
				display: block;
				width: 100%;
				border: 0;
				border-collapse: collapse;
				text-align: start;

				tbody {
					display: grid;
					grid-template-columns: 1fr;
					gap: 30px 40px;
				}

				tr {
					display: block;
					border: 0;
				}

				th,
				td {
					display: block;
					width: auto;
					padding: 0;
					border: 0;
					font-size: 16px;
					line-height: 1.5;
					text-align: start;
				}

				/*
				 * The label is the quieter of the two: it names the value
				 * under it, so it is the value that carries the weight and
				 * the page colour.
				 */
				th {
					margin-block-end: 6px;
					color: var(--wp--preset--color--gray-1000);
					font-weight: 400;
				}

				td {
					color: var(--wp--preset--color--gray-100);
					font-weight: 500;
				}
			}
		}

		/* --------------------------------------------------------------------------
		 * 5. Reviews -- the list
		 * ----------------------------------------------------------------------- */

		.woocommerce-noreviews {
			margin-bottom: 16px;
			padding: 10px 20px;
			border-radius: 6px;
			background-color: #a7e1ea; /* no preset matches this pale blue */
		}

		.woocommerce-Reviews {

			.commentlist {
				margin-bottom: 50px;
				padding: 0;
				font-size: 14px;
				list-style: none;

				.comment_container {
					display: flex;
					align-items: flex-start;
					gap: 30px;
				}

				.comment-text {
					width: 100%;
				}

				.avatar {
					width: 60px;
					height: 60px;
					border-radius: 50%;
				}

				.review {
					margin-bottom: 30px;
					padding-bottom: 10px;
				}
			}

			.comment-text {

				.star-rating {
					margin: 0;
				}

				.meta {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 6px 0 0;
					line-height: 1.4;

					strong {
						font-size: clamp(18px, 0.875rem + (1vw - 0.48rem) * 0.24, 0.875rem);
						font-weight: 600;
						text-transform: capitalize;
					}

					.woocommerce-review__published-date {
						color: var(--wp--preset--color--gray-900);
						font-size: 12px;
					}
				}

				.description {
					font-size: clamp(16px, 0.875rem + (1vw - 0.48rem) * 0.24, 0.875rem);
					line-height: 24px;
				}
			}
		}

		/* --------------------------------------------------------------------------
		 * 6. Reviews -- the form
		 * ----------------------------------------------------------------------- */

		.comment-notes {
			margin-bottom: 16px;
		}

		.comment-reply-title {
			display: block;
			margin-bottom: 20px;
			font-size: 23px;
			font-weight: 600;
			line-height: 26px;
		}

		/*
		 * The star picker. WooCommerce prints five nested links; they are drawn
		 * here as a row of pills, each with a star glyph from the icon font the
		 * theme already loads.
		 */
		.stars {
			margin: 0;

			span {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;

				a {
					display: flex;
					gap: 15px;
					padding: 12px 20px;
					border: 1px solid var(--wp--preset--color--gray-1100);
					border-radius: 60px;
					color: var(--wp--preset--color--contrast);
					font-size: 15px;
					font-weight: 500;
					line-height: 24px;
					transition: 0.3s ease-in-out;

					&::before {
						content: "\F586";
						color: var(--wp--preset--color--contrast);
						font-family: bootstrap-icons, sans-serif;
						font-size: 12px;
					}

					&:hover {
						border-color: var(--wp--preset--color--gray-100);
					}

					&.active {
						border-color: var(--wp--preset--color--primary);
						color: var(--wp--preset--color--primary);
					}
				}
			}
		}

		.comment-form {

			.comment-form-comment,
			.comment-form-author,
			.comment-form-email,
			.comment-form-url,
			.comment-form-rating {

				label {
					display: block;
					margin-bottom: 8px;
				}
			}
		}

		/*
		 * The theme stretches form controls to full width by default; the review
		 * form's fields are short ones sitting side by side, so they size to
		 * themselves instead.
		 */
		#commentform {

			input[type="text"],
			input[type="password"],
			input[type="email"],
			input[type="number"],
			input[type="url"],
			input[type="search"],
			input[type="tel"],
			p.form-submit .wp-element-button {
				width: auto;
			}
		}
	}
}

/* --------------------------------------------------------------------------
 * 7. Responsive
 * ----------------------------------------------------------------------- */

/* sm */
@media (min-width: 40rem) {

	.wp-block-woocommerce-product-details .woocommerce-tabs {

		.panel-title.active:not(.reviews_tab) + .panel {
			margin-inline: -2.5rem;
		}

		.stars span a {
			padding: 10px 30px;
		}
	}
}

/* md */
@media (min-width: 48rem) {

	.wp-block-woocommerce-product-details .woocommerce-tabs {

		.wc-tabs a,
		.panel-title a {
			padding: 10px 20px;
		}

		.woocommerce-Tabs-panel--additional_information
		table.woocommerce-product-attributes tbody {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
}

/* lg */
@media (min-width: 64rem) {

	.wp-block-woocommerce-product-details .woocommerce-tabs {

		/* The accordion is a tab strip from here, so the panel stops bleeding. */
		margin-block-start: 0;

		.wc-tabs,
		.panel-title {
			justify-content: center;
		}

		.panel-title.active:not(.reviews_tab) + .panel {
			margin-inline: 0;
			padding: 0 1.7rem 2.5rem;
		}

		.woocommerce-Tabs-panel--additional_information
		table.woocommerce-product-attributes tbody {
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 34px 60px;
		}
	}
}