/*
Theme Name:   Uoc Child (SRGPGPI)
Template:     uoc
Description:  Child theme of Uoc for srgpgpi.in. Holds site fixes so a parent theme update cannot erase them.
Version:      1.0.17
Text Domain:  uoc-child
*/

/* Site CSS overrides go here. The parent style.css is loaded by functions.php. */

/*
 * Header top menu (Group Institutions, Student Resources, ...).
 * Parent: links are 11px and the drop-down is 100px wide, so
 * "Assignments 2026" wraps onto two lines. Bigger text; the drop-down
 * grows with its longest item and keeps each item on one line.
 */
#main-header .top-nav ul li a {
	font-size: 14px;
	line-height: 20px;
}

/* "Student Resources" (top menu item 1807) in bold so it stands out (user 2026-10-22). Sub-items stay normal. */
#main-header .top-nav #menu-item-1807 > a {
	font-weight: 700;
}

#main-header .top-nav ul li a:before {
	top: 11px;
}

#main-header .top-nav ul li ul.sub-dropdown {
	width: auto;
	min-width: 180px;
	padding: 6px 0;
}

#main-header .top-nav ul li ul.sub-dropdown li {
	display: block;
	width: 100%;
	margin-bottom: 0;
}

#main-header .top-nav ul li ul.sub-dropdown li a {
	float: none;
	display: block;
	font-size: 14px;
	padding: 6px 15px;
	white-space: nowrap;
}

/*
 * Question Bank course pages (question-bank/bba, /bca, /bcom).
 * Tables have the class "qb-table". Fixed column widths, so the Download
 * column is at the same place in every year table.
 */
.wp-block-table.qb-table table {
	table-layout: fixed;
	width: 100%;
}

.wp-block-table.qb-table td:first-child {
	width: 70px;
}

.wp-block-table.qb-table td:last-child {
	width: 130px;
}

@media (max-width: 600px) {
	.wp-block-table.qb-table td:first-child {
		width: 44px;
	}

	.wp-block-table.qb-table td:last-child {
		width: 104px;
	}

	/* Parent theme line height is 35 px: rows get very tall when the subject wraps. */
	.wp-block-table.qb-table td {
		line-height: 1.5;
	}
}

/*
 * PDF download links in tables (Assignments pages, Question Bank course pages):
 * PDF icon before "Click Here", on the same line, centred with the text.
 * Icon: assets/img/download-pdf-icon.svg (572 x 738, so 17 x 22 px here).
 */
.wp-block-table a[href$=".pdf" i] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	vertical-align: middle;
}

.wp-block-table a[href$=".pdf" i]::before {
	content: "";
	flex: 0 0 auto;
	width: 17px;
	height: 22px;
	background: url("assets/img/download-pdf-icon.svg") no-repeat center / contain;
}

/*
 * Question Bank course pages (children of the Question Bank page, ID 1821) and
 * Study Material (ID 1690, same layout since 2026-10-22):
 * - table max 840 px wide and centred (Subject column about 60% of the old width);
 *   below 840 px it is full width as before;
 * - year headings aligned with the table;
 * - 3 x the space between year sections (table bottom to next heading: 22 -> 66 px).
 */
body.parent-pageid-1821 .wp-block-table.qb-table,
body.parent-pageid-1821 .wp-block-heading[id$="-year"],
body.page-id-1690 .wp-block-table.qb-table,
body.page-id-1690 .wp-block-heading[id$="-year"] {
	max-width: 840px;
	margin-left: auto;
	margin-right: auto;
}

body.parent-pageid-1821 .wp-block-table.qb-table,
body.page-id-1690 .wp-block-table.qb-table {
	margin-bottom: 50px;
}

/*
 * "Jump to:" bar with one button per section: Question Bank course pages (anchors #<course>-<year>-year)
 * and Assignments 2026 (ID 1803, anchors #<course>-assignments).
 * On the course pages: same width and centring as the tables.
 * Phones (<= 600 px): "Jump to:" on its own line, the 3 buttons in one row of equal width.
 */
.qb-jump {
	margin: 0 0 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

body.parent-pageid-1821 .qb-jump,
body.page-id-1690 .qb-jump {
	max-width: 840px;
	margin: 0 auto 30px;
}

@media (max-width: 600px) {
	.qb-jump,
	body.parent-pageid-1821 .qb-jump,
	body.page-id-1690 .qb-jump {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: stretch;
		gap: 8px;
	}

	.qb-jump strong {
		grid-column: 1 / -1;
	}

	body .qb-jump a {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 6px 4px;
		font-size: 13px;
		text-align: center;
		white-space: normal;
	}
}

.qb-jump a {
	display: inline-block;
	padding: 6px 14px;
	background: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 3px;
	color: #222;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.qb-jump a:hover,
.qb-jump a:focus {
	background: #e2e2e2;
	border-color: #bbb;
}

html:has(body.parent-pageid-1821),
html:has(body.page-id-1803),
html:has(body.page-id-1690) {
	scroll-behavior: smooth;
}

/*
 * "Go to top" link at the right of each section heading after the first
 * (added by assets/js/section-nav.js). Red: a darker shade of the PDF icon red, so 13 px text has enough contrast (6:1).
 * The heading keeps its own layout; the link sits on the same line, at the right.
 */
.qb-head {
	position: relative;
}

body.parent-pageid-1821 .qb-head,
body.page-id-1690 .qb-head {
	max-width: 840px;
	margin-left: auto;
	margin-right: auto;
}

.qb-head > .wp-block-heading {
	padding-right: 100px;
}

body.page-id-1803 .qb-head > .wp-block-heading {
	padding-left: 100px;
}

/* Assignments 2026 with columns side by side (WordPress columns stack below 782 px): the page fits on
   one screen, so no "Go to top". */
@media (min-width: 782px) {
	body.page-id-1803 .qb-top {
		display: none;
	}

	body.page-id-1803 .qb-head > .wp-block-heading {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Assignments 2026 on phones: course headings left aligned, so heading + link fit on one line. */
@media (max-width: 600px) {
	body.page-id-1803 .wp-block-heading[id$="-assignments"] {
		text-align: left;
	}

	body.page-id-1803 .qb-head > .wp-block-heading {
		padding-left: 0;
	}

	body.page-id-1803 .wp-block-table td {
		line-height: 1.5;
	}
}

.qb-top {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	line-height: 1.2;
	color: #c4161c;
	white-space: nowrap;
	text-decoration: none;
}

/* The "Jump to:" bar gets focus (tabindex -1) after "Go to top"; no focus ring on the whole bar. */
.qb-jump:focus {
	outline: none;
}

.qb-top:hover,
.qb-top:focus {
	color: #9e1016;
	text-decoration: underline;
}

/*
 * Question Bank index page (ID 1821): "Visit Page" links to the course pages get the
 * visit icon before the text (assets/img/visit-link-icon.svg, square, 18 x 18 px).
 */
body.page-id-1821 .wp-block-table a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	vertical-align: middle;
}

body.page-id-1821 .wp-block-table a::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: url("assets/img/visit-link-icon.svg") no-repeat center / contain;
}

/*
 * Syllabus tables (TablePress, shown in the course-page accordions): links to the detailed
 * syllabus PDFs get the visit icon AFTER the text (assets/img/visit-link-icon.svg, 14 x 14 px).
 * Padding + background on the link itself (no extra box), so the icon stays on the line of the
 * last word and never wraps alone. Text, colour and row height do not change. Links from new
 * CSV uploads get it too (the rule matches any PDF link in a TablePress table).
 * 1.0.17: underlined too, so they look like links (user wish; syllabus tables only).
 */
.tablepress td a[href$=".pdf" i] {
	text-decoration: underline;
	text-underline-offset: 2px;
	padding-right: 20px;
	background: url("assets/img/visit-link-icon.svg") no-repeat right center / 14px 14px;
}