/**
 * Styling for the logger module.
 *
 * The public pages reuse the child theme's existing custom-style.css classes
 * so the appearance is unchanged. Only the printable view and a few small
 * additions live here.
 */

.pa-sfi-print {
	margin: 0;
	padding: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	background: #fff;
}

.pa-sfi-print-inner {
	max-width: 1000px;
	margin: 0 auto;
}

.pa-sfi-print .search-results-table table {
	width: 100%;
	border-collapse: collapse;
}

.pa-sfi-print .search-results-table td {
	border: 1px solid #999;
	padding: 4px 6px;
	vertical-align: top;
}

.pa-sfi-print .style1 {
	color: #fff;
	font-weight: bold;
}

.pa-sfi-print .back-to-search,
.pa-sfi-print .print-button {
	display: none;
}

@media print {
	.pa-sfi-print {
		padding: 0;
	}

	.search-results-table {
		page-break-inside: auto;
	}

	.search-results-table tr {
		page-break-inside: avoid;
	}
}

/*
 * Long result sets render as one table, matching the existing behaviour of
 * listing every participant on a single page. Horizontal scrolling keeps that
 * usable on a phone without changing the layout on desktop.
 */
.search-results-table {
	overflow-x: auto;
}

/**
 * Course list headings.
 *
 * Two lists on one page need naming, and the naming has to look deliberate
 * rather than like a stray heading. The rule underneath picks up the green
 * already used on every table header.
 */
.sfi-course-heading {
	margin: 26px 0 10px;
	padding-bottom: 6px;
	border-bottom: 2px solid #15865e;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #483c1a;
}

.sfi-course-heading:first-child { margin-top: 0; }

.sfi-course-note {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #5b6157;
}

/* ---------------------------------------------------------------------------
   Running inside the theme's content area

   The old pages were page templates and rendered outside the post content, so
   the theme's form and link styling never reached them. These shortcodes
   render inside it, where OceanWP sets every text input to full width and
   underlines every link. Both of those undo the layout the pages have always
   had, so they are put back here rather than by editing the theme.
   ------------------------------------------------------------------------- */

/* Buttons are anchors on these pages, and the content area underlines
   anchors. The theme's own rule is more specific than anything reasonable
   written here, so this is one of the few places where !important is the
   right tool: these elements belong to the plugin, and the underline is
   never wanted on any of them. */
.search-result-box-container a.button,
.search-result-box-container a.button:link,
.search-result-box-container a.button:visited,
.search-result-box-container a.button:hover,
.search-result-box-container a.button:focus,
.search-result-box-container a.button:active,
.search-box-container a.button,
.search-box-container a.button:hover,
.search-box-container a.button:focus,
.print-button a,
.print-button a:hover,
.print-button a:focus,
.back-to-search a.button,
.back-to-search a.button:hover,
.back-to-search a.button:focus {
	/* An underline set on a block ancestor is propagated to every inline
	   descendant, and a descendant cannot switch it off: text-decoration
	   deliberately does not work that way. Making the button inline-block is
	   the only reliable cure, because a propagated decoration does not cross
	   into one. The !important handles the separate case of a theme rule with
	   higher specificity. */
	display: inline-block !important;
	text-decoration: none !important;
	box-shadow: none !important;
	border-bottom: 0 !important;
}

/* Links that are not buttons keep their underline, which is correct for a
   name or a course title. */

/* The remove cross and the print link are icons, not words, so an underline
   under them looks like a mistake. */
.search-results-table a[title],
.search-result-box-container a[title] {
	display: inline-block;
	text-decoration: none !important;
}

/* ---------------------------------------------------------------------------
   The contact form

   Laid out as the original page had it: a narrow label column on the left, the
   field filling the column on the right, and the asterisk beside the field.

   The theme sets every input in the content area to full width with a selector
   more specific than anything sensible written here, so the widths below are
   marked important. That is deliberate and limited to this one table.
   ------------------------------------------------------------------------- */

#new_course_form {
	width: 100%;
	max-width: 560px;
	table-layout: fixed;
}

#new_course_form,
#new_course_form tr,
#new_course_form td {
	border: none;
	background: none;
}

#new_course_form td {
	padding: 6px 4px;
	line-height: 1.5;
	/* Top aligned, not centred. The e-mail row carries a paragraph of
	   explanation below its box, and centring put its label halfway down that
	   paragraph instead of beside the box it names. */
	vertical-align: top;
}

/* The label column. The extra top padding sits the label level with its field
   rather than with the top edge of the cell; every field is the same height,
   so one value lines them all up. */
#new_course_form td.black {
	width: 38%;
	white-space: normal;
	padding-top: 13px;
}

/* Fields fill their cell, as they do on the original page. */
#new_course_form input[type="text"],
#new_course_form input[type="email"],
#new_course_form select {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box;
	display: inline-block;
}

/* Telephone is three boxes on one line, sharing the width of the cell. */
#new_course_form .sfi-phone {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: nowrap;
	width: 100%;
}

#new_course_form .sfi-phone input {
	width: auto !important;
	min-width: 0 !important;
	flex: 1 1 0;
	text-align: center;
}

#new_course_form .sfi-phone > span {
	flex: 0 0 auto;
	color: #5b6157;
}

/* The asterisk sits beside the field rather than dropping below it. */
#new_course_form td.reg-txt > .brown {
	display: flex;
	align-items: center;
	gap: 6px;
}

#new_course_form .brown_small {
	display: block;
	margin: 6px 0 0;
	line-height: 1.45;
}

#new_course_form #sfi-other-wrap {
	display: block;
	margin-top: 6px;
}

/* The code box is short. */
.search-result-box-container input#sfi_code {
	width: 8em !important;
	min-width: 0 !important;
	display: inline-block;
}

@media screen and (max-width: 600px) {
	#new_course_form,
	#new_course_form tbody,
	#new_course_form tr,
	#new_course_form td { display: block; width: auto; }

	#new_course_form td.black { padding-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   Long result lists

   "View all training participants" renders every one of the 5,344 records, so
   the table can carry more than thirty thousand cells. With the default
   automatic layout the browser has to measure all of them before it knows how
   wide each column should be, so it paints once with provisional widths and
   again a second or two later once the measuring finishes. That is the flash
   of a broken looking table on first load.

   The column widths are already declared on the header row, so nothing needs
   measuring: fixed layout uses that first row and paints once.
   ------------------------------------------------------------------------- */

.search-results-table > table {
	table-layout: fixed;
	width: 100%;
}

.search-results-table > table td {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Rows below the fold are laid out only when they come near the viewport.
   Find-in-page and anchor links still reach them. */
.search-results-table > table tbody tr {
	content-visibility: auto;
	contain-intrinsic-size: auto 46px;
}

/* ---------------------------------------------------------------------------
   Page width

   The pages these shortcodes replace were custom templates that ran the full
   width of the content area; custom-style.css has always widened
   .content-area for exactly that reason. A page created through the admin
   gets the theme's default layout instead, which reserves room for a sidebar
   and leaves the tables narrower than they have always been.

   Scoped to the plugin's own pages by the body class, so nothing else on the
   site is affected.
   ------------------------------------------------------------------------- */

body.pa-sfi-page .content-area,
body.pa-sfi-page #primary,
body.pa-sfi-page #content-wrap > .content-area {
	width: 100%;
	max-width: 100%;
	float: none;
	border: none;
}

body.pa-sfi-page #right-sidebar,
body.pa-sfi-page #left-sidebar {
	display: none;
}

body.pa-sfi-page .search-result-box-container,
body.pa-sfi-page .search-box-container {
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
   The courses table on a profile

   The date column was narrow enough that "12/15/2024" broke across two lines.
   Holding it on one line and letting the course title take the slack reads
   better, on screen and on paper.
   ------------------------------------------------------------------------- */

.profile-courses td:first-child,
.profile-courses th:first-child {
	white-space: nowrap;
	width: 14%;
}

.profile-courses td {
	font-size: 13px;
}