/* Ileana Citaristi: what WordPress needs on top of the old style sheets (dnn.css), and the
   adjustments that let the old fixed-width design fit a phone, following the old site's
   DarkKnightMobile design there. Every phone adjustment is listed in CLAUDE.md. */

/* ------------------------------------------------------------ WordPress's wrappers */

.wp-site-blocks, .wp-block-post-content { margin: 0; padding: 0; }
/* WordPress makes the content its own box (flow-root); the old page was not, so the footer
   cleared the home page's floating columns itself and lost its top margin. */
.wp-block-post-content { display: block; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.il .wp-block-group { box-sizing: content-box; }

/* The module titles: WordPress headings carry the class DNN put on an inner <span>. */
.DNNContainer_Title_h2 h2.TitleH2 { margin-bottom: 25px; }

/* The search button was a link with a picture; it is a real button now, drawn the same. */
#search button.SearchButton {
	display: inline-block; float: right; height: 32px; width: 32px; margin: 0; padding: 0; border: 0;
	background: #FF0000 url('../images/search.png') no-repeat center center;
	text-indent: -9999px; overflow: hidden; cursor: pointer;
}
#search button.SearchButton:hover { background: url('../images/search.png') no-repeat center center, linear-gradient(to bottom, rgba(45,45,45,1) 0%, rgba(86,86,86,1) 100%); }
#search #dnn_dnnSearch_txtSearch { box-sizing: content-box; }

.il-menu-toggle, #dnn_pnav .il-sub-toggle { display: none; }
/* The drop-downs also open from the keyboard. */
#dnn_pnav li:focus-within > ul { display: block; }

/* The home page's slider (old: WillStrohl ContentSlider, jQuery Cycle "curtainX"). */
.wns-slideshow-wrapper.il-slider { overflow: hidden; }
.wns-slideshow-wrapper.il-slider img { position: absolute; top: 0; left: 0; display: block; transform-origin: 50% 50%; }
.wns-slideshow-wrapper.il-slider img.il-hidden { visibility: hidden; }

/* Search results and "page not found", written for the new site. */
.il-search-again { margin: 0 0 15px; }
.il-search-again input { padding: 4px 6px; margin: 0; width: 220px; }
.il-results { margin-left: 25px; }
.il-results li { list-style: decimal; margin-bottom: 12px; color: #fff; }

/* ------------------------------------------------------------ phones and tablets

   The old design is 980 pixels wide and doesn't fit a phone (the old site showed a phone
   the whole desktop page, shrunk). Below 1000 pixels the same design is laid out to the
   screen's width; on phones (below 768 pixels) the module titles take the old site's
   DarkKnightMobile look. Colours, fonts, pictures and text stay as they were. */
@media (max-width: 999px) {
	/* 1. The fixed 980-pixel width becomes the screen's width, with a 10-pixel margin. */
	.wrapper { width: auto; max-width: 980px; padding-left: 10px; padding-right: 10px; }

	/* 2. The menu: a "Menu" button in the menu's own style beside the logo; the menu opens
	   under the logo as a list in the drop-downs' colours; a drop-down opens with the arrow. */
	#siteHeadinner { position: relative; }
	#logo img { max-width: 100%; height: auto; }
	.il-menu-toggle {
		display: block; float: right; margin-top: 15px; padding: 5px 10px 5px 28px; border: 0; cursor: pointer;
		font: bold 14px Arial, Helvetica, sans-serif; color: #666;
		background: linear-gradient(#666, #666) 8px 9px / 14px 2px no-repeat, linear-gradient(#666, #666) 8px 14px / 14px 2px no-repeat, linear-gradient(#666, #666) 8px 19px / 14px 2px no-repeat;
	}
	.il-menu-toggle:hover, .il-menu-toggle[aria-expanded="true"] { color: #3B96B6; }
	#siteHeadinner .right { float: none; clear: both; }
	#nav { display: none; float: none; top: 0; padding-top: 10px; }
	.il-menu-open #nav { display: block; }
	#dnn_pnav > li { float: none; height: auto; padding-top: 0; margin-right: 0; border-top: 1px solid #e5e5e5; }
	#dnn_pnav > li > a, #dnn_pnav > li > span { padding: 10px 50px 10px 5px; }
	#dnn_pnav li:hover > ul, #dnn_pnav li:focus-within > ul { display: none; }
	#dnn_pnav li ul, #dnn_pnav li ul li ul, #dnn_pnav > li > ul {
		position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 8px 10px; margin: 0;
	}
	#dnn_pnav > li > ul:after { display: none; }
	#dnn_pnav li.il-open > ul { display: block; }
	#dnn_pnav li ul a { padding: 8px 50px 8px 15px; }
	#dnn_pnav li { position: relative; }
	#dnn_pnav .il-sub-toggle {
		display: block; position: absolute; top: 0; right: 0; width: 44px; height: 38px; border: 0; cursor: pointer;
		background: transparent url(../images/plus-icn.png) no-repeat center center;
	}
	#dnn_pnav li.il-open > .il-sub-toggle { background-image: url(../images/minus-icn.png); }
	#dnn_pnav li ul .il-sub-toggle { height: 33px; }

	/* 3. Pictures, tables and videos are never wider than the screen (pictures keep their shape). */
	#contentWrapper img { max-width: calc(100% - 15px) !important; height: auto !important; }
	#contentWrapper table { max-width: 100%; }
	#contentWrapper iframe { max-width: 100%; height: auto; }
	#contentWrapper .Normal { overflow-x: auto; }

	/* 4. The home page: the slider, then the quotation, one under the other. */
	.twoColRightPane, .twoColLeftPane, .leftPane { float: none; width: auto; margin-right: 0; }
	.twoColRightPane .wns-slideshow-wrapper { margin: 0 auto 20px; }
	.twoColLeftPane table { float: none; width: auto !important; }
}

@media (max-width: 600px) {
	/* Pictures that had text flowing beside them keep it, at most half the screen wide (a
	   picture standing alone would cut a sentence in two). */
	#contentWrapper img[style*="float: left"], #contentWrapper img[style*="float:left"], #contentWrapper img[align="left"] { max-width: 45% !important; margin: 0 10px 8px 0 !important; }
	#contentWrapper img[style*="float: right"], #contentWrapper img[style*="float:right"], #contentWrapper img[align="right"] { max-width: 45% !important; margin: 0 0 8px 10px !important; }
	/* Justified text on a narrow screen opens wide gaps between words: left-aligned there. */
	#contentWrapper [style*="justify"], #contentWrapper [align="justify"] { text-align: left !important; }
}
@media (max-width: 767px) {
	/* 5. DarkKnightMobile: a module's title is a grey bar with a minus sign; tapping it hides
	   the text below (plus sign) and shows it again. */
	.DNNContainer_Title_h2 > h2.TitleH2:not(:empty) {
		font-family: Helvetica, Arial, sans-serif; font-size: 24px; margin: 0 0 15px; padding: 10px 40px 10px 15px; line-height: 1;
		color: #4c4c4c; text-shadow: 1px 1px 0 #fff; cursor: pointer;
		background: url(../images/minus-icn.png) no-repeat right 12px center, linear-gradient(to bottom, #d9d9d9 0%, #c2c2c2 100%);
		border-radius: 3px; box-shadow: 0 1px 0 1px #a8a8a8;
	}
	.il-collapsed > h2.TitleH2 { background-image: url(../images/plus-icn.png), linear-gradient(to bottom, #d9d9d9 0%, #c2c2c2 100%); }
	.il-collapsed > :not(h2) { display: none; }
	#footer { height: auto; margin-top: 40px; }
}