/* ==========================================================================
   Scorpion - Compare Personal Legal Policies page
   Page-specific additions. Load AFTER /assets/css/style.css

   Nothing in style.css is modified. Every rule below is scoped to the
   compare table's expanded (drop) panels via the new .cmp_ classes, so it
   cannot affect the existing rows, the funeral tables, or any other page.
   ========================================================================== */

:root {
	--cmp-red: #D3171C;
	--cmp-ink: #000000;
}

/* --------------------------------------------------------------------------
   Bullet lists inside an expanded panel
   Scoped to .legal_plans so the rules apply on both the public compare page
   and the online application's ProductLegal page.
   style.css sets `.compare_legal_main .table_row ul { margin: 0 41px !important }`
   and a 15px !important li size, so !important is required to opt out here.
   Bullets sit flush with the paragraph above them, matching the approved design.
   -------------------------------------------------------------------------- */
.legal_plans .drop_row ul.cmp_drop_list {
	margin: 0 0 6px 0 !important;
	padding: 0;
	list-style: none;
}

.legal_plans .drop_row ul.cmp_drop_list li {
	margin: 0 0 10px 0;
	padding: 0;
	font-family: "Poppins", sans-serif;
	font-size: 14px !important;
	line-height: 1.4;
	color: var(--cmp-ink);
	text-indent: 0;
}

.legal_plans .drop_row ul.cmp_drop_list li:last-child {
	margin-bottom: 0;
}

.legal_plans .drop_row ul.cmp_drop_list li:before {
	content: "\2022";
	margin-right: 4px;
}

/* --------------------------------------------------------------------------
   Detail rows inside an expanded panel
   These reuse .table_cell + .col_1 / .col_2 / .col_3 / .col_4 / .col_5 so they
   inherit the table's column widths and stay in step with the existing
   show/hide-a-single-column behaviour on mobile.
   -------------------------------------------------------------------------- */
.legal_plans .drop_row .cmp_detail_row {
	height: auto;
	background-color: #ffffff;
	clear: both;
}

.legal_plans .drop_row .cmp_detail_row:first-of-type {
	padding-top: 4px;
}

/* Breathing room before the next benefit's YES/NO row */
.legal_plans .drop_row .cmp_detail_row:last-child {
	padding-bottom: 16px;
}

.legal_plans .drop_row .cmp_detail_row .table_cell {
	height: auto;
	vertical-align: middle;
	padding-top: 10px;
	padding-bottom: 10px;
	background-image: none;
	cursor: default;
}

.legal_plans .col_2, .legal_plans .col_3, .legal_plans .col_4, .legal_plans .col_5 {
	vertical-align: top;
	padding-top: 13px;
}

/* Left-hand label */
.legal_plans .drop_row .cmp_detail_row .cmp_detail_label {
	text-align: left;
}

.legal_plans .drop_row .cmp_detail_row .cmp_detail_label p {
	margin: 0;
	padding: 0 20px 0 0;
	width: auto;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--cmp-ink);
	text-align: left;
}

/* Value columns.
   Padding and width mirror `.table_row.standard_row .table_cell p` in style.css
   so these figures centre on exactly the same axis as the YES/NO row above. */
.legal_plans .drop_row .cmp_detail_row .cmp_detail_value p {
	margin: 0;
	padding: 0 0 0 10px;
	width: 96%;
	font-family: "Poppins", sans-serif;
	line-height: 1.35;
	color: var(--cmp-red);
	text-align: center;
}

/* The figure itself - e.g. "+ R32,00", "R192 000", "R69 000 cover" */
.legal_plans .drop_row .cmp_detail_row .cmp_detail_value p .cmp_value_amount {
	display: block;
	font-size: 13px;
	font-weight: 700;
}

/* The qualifier under the figure - e.g. "per person per month", "per matter" */
.legal_plans .drop_row .cmp_detail_row .cmp_detail_value p .cmp_value_note {
	display: block;
	font-size: 12px;
	font-weight: 400;
}

/* Placeholder so a column with no value keeps the row's alignment */
.legal_plans .drop_row .cmp_detail_row .cmp_detail_value p .cmp_value_empty {
	display: block;
	font-size: 13px;
}

/* ==========================================================================
   TABLET AND MOBILE (<= 991px)
   --------------------------------------------------------------------------
   On narrow screens style.css floats the row title to 86% and leaves the four
   policy columns 14% each, which only works because the page script hides all
   but the selected policy. That produced a single visible column and forced
   the extender figures to stack.

   Below, every row switches to: title on its own full-width line, then all
   four policy columns side by side beneath it at 25% each. The policy names
   from each section head are shown in the same four columns so the values
   underneath can be read.

   Scoped to .legal_plans and excludes .funeral_content_row, so only the legal
   comparison tables are affected.
   ========================================================================== */
@media screen and (max-width: 991px) {

	/* Rows must contain their floated cells. flow-root is used rather than
	   overflow:hidden because cell text can overrun its box by a few pixels
	   at these widths and hiding the overflow would clip the values. */
	.legal_plans .table_content_row:not(.funeral_content_row) .table_row,
	.legal_plans .section_head_row {
		display: flow-root;
		min-height: 0;
		clear: both;
	}

	.legal_plans .section_head_row.expanded_row {
		background-position: 100% 13px;
	}

	/* ---- Section head: title, then the four policy names ---- */
	.legal_plans .section_head_row .table_cell.col_1 {
		display: block;
		float: none;
		width: 100%;
		height: auto;
	}

	.legal_plans .section_head_row .table_cell.col_1 p {
		padding: 16px 30px 16px 0 !important;
	}

	.legal_plans .section_head_row.expanded_row .row-header-col,
	.legal_plans .section_head_row.expanded_row .table_cell.row-header-col.hide_col {
		display: block !important;
		float: left;
		width: 25%;
		height: auto;
		padding: 0 0 12px 0;
	}

	.legal_plans .section_head_row.expanded_row .row-header-col p {
		width: auto;
		padding: 0 2px !important;
		font-family: "Poppins", sans-serif;
		font-size: 10px;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
		color: var(--cmp-ink);
	}

	/* ---- Content rows: title on its own line ---- */
	.legal_plans .table_content_row:not(.funeral_content_row) .table_row .table_cell.col_1 {
		display: block;
		float: none;
		width: 100%;
		height: auto;
	}

	.legal_plans .row_title {
		background-position: 100% 2px;
	}

	.legal_plans .table_content_row:not(.funeral_content_row) .table_row .table_cell.col_1 p {
		width: auto;
		text-align: left;
		padding: 8px 30px 16px 0 !important;
		font-size: 14px;
	}

	/* ---- Content rows: four policy columns side by side beneath ----
	   The page script adds .hide_col to the columns for the policies that are
	   not selected. On a phone we want all four, so the display is forced back
	   on with matching !important weight. */
	.legal_plans .table_content_row:not(.funeral_content_row) .table_row .table_cell:not(.col_1):not(.button_col),
	.legal_plans .table_content_row:not(.funeral_content_row) .table_row .table_cell:not(.col_1):not(.button_col).hide_col {
		display: block !important;
		float: left;
		width: 25%;
		height: auto;
		padding: 0 0 12px 0;
	}

	.legal_plans .table_content_row:not(.funeral_content_row) .table_row .table_cell:not(.col_1):not(.button_col) p {
		width: auto;
		padding: 0 2px !important;
		text-align: center;
		font-size: 13px;
	}

	/* ---- Extender detail rows ---- */
	.legal_plans .drop_row .cmp_detail_row .cmp_detail_label p {
		font-size: 14px;
		font-weight: 400;
		padding: 4px 30px 8px 0 !important;
	}

	.legal_plans .drop_row .cmp_detail_row .cmp_detail_value p .cmp_value_amount {
		font-size: 11px;
	}

	.legal_plans .drop_row .cmp_detail_row .cmp_detail_value p .cmp_value_note {
		font-size: 10px;
	}

	.legal_plans .drop_row .cmp_detail_row .cmp_detail_value p .cmp_value_empty {
		font-size: 11px;
	}

	.legal_plans .drop_row .cmp_detail_row:last-child {
		padding-bottom: 8px;
	}

	.legal_plans .drop_row ul.cmp_drop_list li {
		font-size: 13px !important;
	}
}

/* --------------------------------------------------------------------------
   Small phones - tighten the type so four columns still fit comfortably
   -------------------------------------------------------------------------- */
@media screen and (max-width: 568px) {

	.legal_plans .table_content_row:not(.funeral_content_row) .table_row .table_cell.col_1 p {
		font-size: 13px;
	}

	.legal_plans .table_content_row:not(.funeral_content_row) .table_row .table_cell:not(.col_1):not(.button_col) p {
		font-size: 11px;
	}

	.legal_plans .section_head_row.expanded_row .row-header-col p {
		font-size: 9px;
	}

	.legal_plans .drop_row .cmp_detail_row .cmp_detail_label p {
		font-size: 13px;
	}

	.legal_plans .drop_row .cmp_detail_row .cmp_detail_value p .cmp_value_amount,
	.legal_plans .drop_row .cmp_detail_row .cmp_detail_value p .cmp_value_empty {
		font-size: 10px;
	}

	.legal_plans .drop_row .cmp_detail_row .cmp_detail_value p .cmp_value_note {
		font-size: 9px;
		line-height: 1.25;
	}

	.legal_plans .drop_row ul.cmp_drop_list li {
		font-size: 12px !important;
	}
}