/* Art Vision: 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 without changing its look.
   Every phone adjustment is listed in CLAUDE.md. */

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

/* WordPress wraps the header, the content and the footer in elements of its own: neutral. */
.wp-site-blocks, .av-main, .wp-block-post-content, .wp-block-template-part { margin: 0; padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
/* WordPress's groups use border-box; the old design measured as browsers do by default. */
.av .wp-block-group { box-sizing: content-box; }
.av .wp-block-group:empty { min-height: 0; }

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

/* The old menu was a list of links; the search button was a link with a picture. */
#charcoolNav .av-sub-toggle, .av-menu-toggle { display: none; }
.Search button.SearchField { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; vertical-align: top; }
.Search button.SearchField img { vertical-align: top; margin-top: 1px; }

/* The drop-downs fade in and out as the old menu's script made them (jQuery's 0.4 s). */
#charcoolNav ul li ul { display: block; visibility: hidden; opacity: 0; transition: opacity .4s, visibility 0s linear .4s; }
#charcoolNav ul li.av-open > ul,
#charcoolNav ul li:focus-within > ul { visibility: visible; opacity: 1; transition: opacity .4s, visibility 0s; }

/* Search results and "page not found", written for the new site. */
.av-search-again { margin: 0 0 15px; }
.av-search-again .NormalTextBox { width: 220px; padding: 3px 4px; border: 1px solid #999; font-size: 1em; }
.av-results li { margin-bottom: 12px; list-style: decimal; }
.av-results { margin-left: 25px; }

/* A page added later in the editor (template "Festival year or production"): its pictures,
   text and table look like those of the old pages (Kalinga Mahotsav 2026). */
.av-year .wp-block-image { margin: 0; text-align: center; }
.av-year .wp-block-image img { max-width: 100%; height: auto; }
.av-year .wp-block-gallery.av-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 0 0 10px; }
.av-year .wp-block-gallery.av-pair > .wp-block-image { width: auto !important; flex: 0 0 auto !important; margin: 5px !important; }
.av-year .wp-block-gallery.av-pair img { height: 250px !important; width: auto !important; max-width: 100%; }
.av-year .wp-block-paragraph, .av-year p { margin: 0 0 10px 0; text-align: left; }
.av-year .wp-block-table { margin: 20px 0 10px; }
.av-year .wp-block-table.av-days table { border: 1px solid #CCC; width: 100%; border-collapse: separate; border-spacing: 2px; font-weight: bold; }
.av-year .wp-block-table.av-days td { padding: 4px; border: 1px solid #ccc; background: #fff; vertical-align: middle; }
.av-year .wp-block-table.av-days td:first-child { width: 150px; }

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

   The old design is 960 pixels wide and doesn't fit a phone (the old site showed a phone
   the whole desktop page, shrunk). Below 980 pixels the same design is laid out in one
   column; colours, fonts, pictures and text stay as they were. */
@media (max-width: 979px) {
	/* 1. The fixed 960-pixel widths become the screen's width, with a 10-pixel margin. */
	.header, .pageWidth, .pageTitleWidth, .charcoolFooterContent, .charcoolFooter, div.language-object {
		width: auto; max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px;
	}
	.FooterPane { width: auto; float: none; }

	/* 2. The menu: a "MENU" button in the menu's own style at the top right; the menu opens
	   below the logo as a list in the drop-downs' colours; a drop-down opens with the arrow. */
	.av-menu-toggle {
		display: block; position: absolute; top: 1px; right: 10px; z-index: 1001;
		background: none; border: 0; color: #AAA; font: normal 12px/26px Verdana, Geneva, sans-serif;
		text-transform: uppercase; padding: 0 10px 0 22px; cursor: pointer;
		background: linear-gradient(#AAA, #AAA) 0 8px / 12px 2px no-repeat, linear-gradient(#AAA, #AAA) 0 12px / 12px 2px no-repeat, linear-gradient(#AAA, #AAA) 0 16px / 12px 2px no-repeat;
	}
	.av-menu-toggle:hover, .av-menu-toggle[aria-expanded="true"] { background-color: #3A3A3A; }
	.header { min-height: 150px; }
	.dnnLogo img { max-width: 100%; height: auto; }
	.menu { display: none; position: static; width: auto; float: none; }
	.av-menu-open .menu { display: block; padding-bottom: 10px; }
	#charcoolNav ul li { float: none; position: relative; }
	#charcoolNav ul li a { text-align: left; padding: 8px 44px 8px 10px; line-height: 18px; border-bottom: #1C1C1C 1px solid; }
	#charcoolNav ul li ul, #charcoolNav ul li ul li ul {
		position: static; width: auto; padding: 0; background: none; display: none; visibility: visible; opacity: 1; transition: none;
	}
	#charcoolNav ul li.av-open > ul { display: block; }
	#charcoolNav ul li ul li a { width: auto; padding-left: 25px; }
	#charcoolNav ul li ul li ul li a { padding-left: 40px; }
	#charcoolNav .av-sub-toggle {
		display: block; position: absolute; top: 0; right: 0; width: 44px; height: 35px; border: 0; cursor: pointer;
		background: transparent url(../graphics/charcool_menu_sub_arrow.gif) no-repeat right 12px center;
	}
	#charcoolNav li.av-open > .av-sub-toggle { transform: rotate(90deg); }

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

	/* 4. The list of years (or productions) and the page's text: one under the other, the
	   page's text first; the shaded column behind the list is left out. */
	.subPageContent, .subPageBottom, .subPageTop { background: none; }
	.subPageTop { display: flex; flex-direction: column; }
	.subPageLeftDiv, .subPageContentDiv { float: none; width: auto; }
	.subPageContentDiv { order: -1; }
	.subPageTop::after { display: none; }

	/* 5. The footer: Contact Us, then the search box under it. */
	.charcoolFooterContent .Search { float: none; clear: both; padding: 0 0 10px; }
	.charcoolFooter .termsdiv { float: none; }
}
@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). */
	.pageContent img[style*="float: left"], .pageContent img[style*="float:left"], .pageContent img[align="left"] { max-width: 45% !important; margin: 0 10px 8px 0 !important; }
	.pageContent img[style*="float: right"], .pageContent img[style*="float:right"], .pageContent 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. */
	.pageContent [style*="justify"], .pageContent [align="justify"] { text-align: left !important; }
}
@media (min-width: 980px) {
	.av-menu-toggle { display: none; }
}