/*
Theme Name: CastingHoward_pk
Author: Production Kompany, Inc.
Author URI: http://working.pk
Description: Custom Theme for CastingHoward by Production Kompany, Inc. based on BlankSlate by TidyThemes.
Version: 1.0
*/

@font-face {
    font-family: 'Trade Gothic LT Std';
    src: url('./template/fonts/TradeGothicLTStd-BdCn20.woff') format('woff'),
        url('./template/fonts/TradeGothicLTStd-BdCn20.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* HTMl */

html {
	background-image: url('./template/img/bg-pattern.png'); /* rebuild fix F1: stray ")" removed from URL */
	background-repeat: repeat;
	font-family: 'Trade Gothic LT Std';
	padding: 0;
}

body {
	padding: 0;
	margin: 50px 50px 50px 100px;
}

html a:link,
html a:visited {
	color: #2a3b6f;
	text-decoration: none;
}

html a:hover,
html a:active {
	text-decoration: underline;
}

#wrapper {
	width: 1060px;
	position: relative;
	margin: 0 auto;
}


/* HEADER */

#site-title {
	width: 785px;
	display: block;
	margin-left: 50px;
	background: #2a3b6f;
	color: #000;
	white-space: nowrap;
	
}

#site-title h1 {
	margin: 0;
	padding-top: 10px;
	font-size: 75px;
	text-align: center;
	line-height: 120px;
}

#site-title a {
	color: #fff;
}

#site-title a:hover,
#site-title a:active {
	text-decoration: none;
}


/* SIDEBAR */

#menu {
	display: block;
	float: left;
	height: 100%;
	margin-left: -60px;
	margin-top: 55px;
}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

#menu ul li {
	font-size: 19px;
}

/* rebuild fix F2: group separators are now class-based (set on the last
   item of each menu group) instead of hardcoded nth-of-type positions */
#menu ul li.menu-group-last {
	margin-bottom: 20px;
}

#menu ul li.current-menu-item a {
	pointer-events: none;
	cursor: default;
	color: #545454;
}

#menu ul li.current-menu-item a:hover,
#menu ul li.current-menu-item a:active {
	text-decoration: none;
}

/* CONTAINER */

.category-grid .header {
	/* rebuild R8: was 17px — now matches article.page's 4px so section
	   titles and page text share one left edge everywhere */
	padding-left: 4px;
	margin-bottom: 30px;
}

#container {
	width: 780px;
	margin-left: 180px;
	margin-top: 55px;
}


/* CATEGORY GRID */

.category-grid a:link, 
.category-grid a:active,
.category-grid a:visited,
.category-grid a:hover {
	font-size: 19px;
	text-decoration: none;
	display: block;
	width: 175px;
	height: 270px;
	float: left;
	margin-bottom: 55px;
/* 	overflow: hidden; */
}

.category-grid a:hover {
	opacity: 0.8;
	transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
}

.category-grid a:nth-of-type(4n) {
	margin-right: 0px;
}

.category-grid a { 
	margin-right: 25px;
}

.category-grid a.no-link {
	cursor: default;
	pointer-events: none;
}

.category-grid a span {
/* 	white-space: nowrap; */
	display: block;
	width: 175px;
	text-align: center;
	padding-top: 15px;
}

.second-line {
	padding-top: 0px !important;
    font-size: 16px;
    color: #555555;
}

.category-grid a:hover span {
	opacity: 0.8;
}


.category-grid a img {
	display: block;
	margin: 0 auto;
	max-height: 200px;
	min-height: 200px;
	width: auto;
	height: auto;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.2);
}

.category-grid a img:hover {
	box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    border: 1px solid rgba(0,0,0,0.2);
    transition: box-shadow 0.5s ease-in-out;
    -webkit-transition: box-shadow 0.5s ease-in-out;
    -moz-transition: box-shadow 0.5s ease-in-out;
}


/* PAGE */

h1.entry-title {
	font-size: 28px;
	margin: 0;
}

article.page {
	padding-left: 4px;
}


.entry-content p {
	font-size: 18px;
}



/* rebuild R2: breathing room between a trailer page's title and the
   video (or the optional text above it) */
article.page .entry-content > .media-text {
	margin-top: 24px;
}

/* FOOTER */

#footer {
	display: none;
	width: auto;
	margin-left: 180px;
}


/* =========================================================
   MICRODRAMAS — thumbnails are near-square and wider than the
   standard 175px card, which made adjacent cards overlap on
   desktop. Let the card grow to the image on desktop, and
   scale the image down on smaller screens.
   ========================================================= */
@media (min-width: 1025px) {
	body.category-shortform-verticalseries .category-grid a,
	body.category-shortform-verticalseries .category-grid a:link,
	body.category-shortform-verticalseries .category-grid a:visited,
	body.category-shortform-verticalseries .category-grid a:active,
	body.category-shortform-verticalseries .category-grid a:hover {
		width: auto;
		height: auto;
		margin-right: 35px;
	}
	body.category-shortform-verticalseries .category-grid a:nth-of-type(4n) {
		margin-right: 35px;
	}
	body.category-shortform-verticalseries .category-grid a span {
		width: auto;
		max-width: 100%;
	}
}

@media (max-width: 1024px) {
	body.category-shortform-verticalseries .category-grid a img {
		max-width: 100%;
		min-height: 0;
		max-height: none;
		height: auto;
		width: auto;
	}
}


/* =========================================================
   RESPONSIVE — preserve desktop look untouched above 1100px
   ========================================================= */

/* Large tablet / small desktop: shrink the fixed widths so
   nothing overflows the viewport. */
@media (max-width: 1199px) {
	body {
		/* rebuild R2: left margin widened (was 60px) so the floated menu,
		   pulled -60px, never touches the window edge at this width */
		margin: 30px 30px 30px 90px;
	}
	#wrapper {
		width: auto;
		max-width: 1060px;
	}
	#site-title {
		width: auto;
		max-width: 785px;
	}
	#container {
		width: auto;
		max-width: 780px;
	}
}

/* Tablet: stack the menu above the content and let the
   category grid recentre itself instead of left-floating. */
@media (max-width: 1024px) {
	body {
		margin: 25px 25px 40px 25px;
	}

	#site-title {
		margin: 0 auto; /* rebuild R2: center the banner once the menu stacks (was margin-left: 0) */
		white-space: normal;
	}
	#site-title h1 {
		font-size: 56px;
		line-height: 1.2;
		padding: 15px 10px;
	}

	#menu {
		float: none;
		clear: both;
		height: auto;
		width: 100%;
		margin: 25px 0 10px 0;
	}
	#menu ul {
		text-align: center;
	}
	#menu ul li {
		display: inline-block;
		margin: 4px 12px;
		font-size: 18px;
	}
	#menu ul li.menu-group-last {
		margin-bottom: 4px;
	}

	#container {
		width: auto;
		max-width: 100%;
		margin: 25px 0 0 0;
	}

	.category-grid {
		text-align: center;
	}
	.category-grid a,
	.category-grid a:link,
	.category-grid a:visited,
	.category-grid a:active,
	.category-grid a:hover {
		float: none;
		display: inline-block;
		vertical-align: top;
		width: 175px;
		margin: 0 12px 40px 12px;
		/* rebuild R7: grow past the desktop's fixed 270px when the content
		   needs it — taller posters + two-line subtitles were spilling under
		   the next row on phones (visible on Short Form) */
		height: auto;
		min-height: 270px;
	}
	.category-grid a:nth-of-type(4n) {
		margin-right: 12px;
	}

	.category-grid .header {
		padding-left: 0;
		text-align: center;
	}
}

/* Phones (large): single-column-ish grid with two cards per
   row on most devices, plus a smaller, wrappable site title. */
@media (max-width: 767px) {
	body {
		margin: 15px 12px 30px 12px;
	}

	#site-title h1 {
		font-size: 30px;
		line-height: 1.25;
		padding: 12px 8px;
	}

	#menu {
		margin: 18px 0 5px 0;
	}
	#menu ul li {
		font-size: 17px;
		margin: 3px 8px;
	}

	#container {
		margin-top: 18px;
	}

	.category-grid a,
	.category-grid a:link,
	.category-grid a:visited,
	.category-grid a:active,
	.category-grid a:hover {
		width: 45%;
		max-width: 175px;
		margin: 0 2% 30px 2%;
	}
	.category-grid a:nth-of-type(4n) {
		margin-right: 2%;
	}
	.category-grid a span {
		width: 100%;
		font-size: 17px;
	}
	.category-grid a img {
		max-height: 180px;
		min-height: 0;
		max-width: 100%;
	}

	h1.entry-title {
		font-size: 22px;
	}
	.entry-content p {
		font-size: 16px;
		line-height: 1.5;
	}
	.entry-content img,
	article.page img {
		max-width: 100%;
		height: auto;
	}
}

/* Small phones: tighter spacing and slightly smaller cards. */
@media (max-width: 420px) {
	body {
		margin: 10px 8px 25px 8px;
	}

	#site-title h1 {
		font-size: 24px;
		padding: 10px 6px;
	}

	#menu ul li {
		font-size: 16px;
		margin: 3px 6px;
	}

	.category-grid a,
	.category-grid a:link,
	.category-grid a:visited,
	.category-grid a:active,
	.category-grid a:hover {
		width: 46%;
		margin: 0 2% 24px 2%;
	}
	.category-grid a img {
		max-height: 150px;
	}
	.category-grid a span {
		font-size: 15px;
		padding-top: 10px;
	}
	.second-line {
		font-size: 13px;
	}
}