/*
 Theme Name:     Plexx Child
 Theme URI:      https://www.tyronseeto.com
 Description:    Child theme for Plexx, holding all customisations for tyronseeto.com so the parent theme can be updated safely.
 Author:         Tyron Seeto
 Template:       plexx
 Version:        1.0.0
 Tags:           translation-ready, theme-options, custom-menu
*/

/* ===================================================================
   Everything below was previously edited directly into the Plexx
   parent stylesheet. It lives here now so a Plexx update can't wipe it.

   Two kinds of rule appear here:
     - OVERRIDE: restates a parent rule with a different value. The
       selector matches the parent's exactly, and this file loads after
       the parent, so it wins on cascade order.
     - ADDITION: new rules that have no parent equivalent.
   =================================================================== */


/* ------------------------------------------------ */
/* Typography                                       */
/* ------------------------------------------------ */

/* OVERRIDE — parent: margin: 0 0 40px 0 */
p {
	margin: 0 5px 40px 5px;
}


/* ------------------------------------------------ */
/* Portfolio grid                                   */
/* ------------------------------------------------ */

/* OVERRIDE — parent: width: auto; max-width: 100% */
.portfolio-item-slug .hover-webm {
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ADDITION — there is no hover on touch devices, so below the desktop
   breakpoint the hover video is revealed by the .is-playing class instead.
   Only the item nearest the centre of the screen carries it, so only one
   plays at a time. The static .thumb stays underneath as the poster frame
   while the video buffers, and as the fallback when autoplay is blocked or
   there is no file. See plexx_mobileAutoplayHoverVideos() in custom.js. */
@media screen and (max-width: 959px) {

	.portfolio-item-slug.is-playing .hover-webm {
		opacity: 1;
		visibility: visible;
	}

}

/* ADDITION — hide the hover cross/plus icon on all portfolio grid items */
.portfolio-item-slug .thumb::before,
.portfolio-item-slug .thumb::after {
	content: none;
}


/* ------------------------------------------------ */
/* Project info + filters                           */
/* ------------------------------------------------ */

/* OVERRIDE — parent: padding: 30px 50px */
.portfolio-info {
	padding: 0 50px;
}

/* OVERRIDE — parent: padding: 50px 10px */
.filters-container {
	padding: 15px 10px;
}

/* OVERRIDE — parent: opacity: .6 */
.filters-container span.active {
	opacity: 1;
	color: #000;
	font-weight: 700;
}


/* ------------------------------------------------ */
/* Page + fullscreen titles                         */
/* ------------------------------------------------ */

/* OVERRIDE — parent: padding: 55px 40px */
#page-title {
	padding: 27.5px 40px 55px;
}

/* ADDITION */
.fullscreen-title .subtitle p {
	margin-bottom: 0;
}

/* ADDITION — keep the fullscreen title centred at all viewport widths */
.fullscreen-slider {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}


/* ------------------------------------------------ */
/* Layout                                           */
/* ------------------------------------------------ */

/* ADDITION — hide the footer globally */
#footer {
	display: none;
}

/* ADDITION — remove spacing above and below homepage editor headings */
.portfolio-text h1,
.portfolio-text h3 {
	margin-top: 0;
	margin-bottom: 0;
}

/* ADDITION — constrain the site to a maximum width.
   The auto margins matter: without them .content-wrapper hugs the left edge on
   screens wider than 1280px, so the filters and the gallery sat off-centre while
   the header nav (which has its own auto margins) and the centred heading text
   stayed put. Everything inside .content-wrapper inherits its position, so
   centring this one element lines the whole page up. */
.content-wrapper,
.container {
	max-width: 1280px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}


/* ------------------------------------------------ */
/* Site person heading (added in header.php)        */
/* ------------------------------------------------ */

.site-person-heading {
	text-align: center;
	padding: 7px 20px 0;
}

.site-person-name,
.site-person-title {
	display: block;
	font-family: "Rubik", Helvetica, Arial, sans-serif;
	line-height: 1.25;
}

.site-person-name {
	font-weight: 700;
	font-size: 40px;
	color: #272B2F;
}

.site-person-title {
	font-weight: 400;
	font-size: 30px;
	color: #8d949e;
}


/* ------------------------------------------------ */
/* Individual project tweaks                        */
/* ------------------------------------------------ */

/* VIVID – Artist Portfolio (post 1423): the hover video is a 16:9 file holding
   4:3 footage pillarboxed with WHITE bars, so the white caption disappeared
   against them. A 4:3 image fills the full height of a 16:9 frame and 3/4 of
   its width, which leaves a 12.5% bar on each side — so pulling the caption in
   by that much lands it inside the picture, where white text reads again.

   Scoped to this one project on purpose: every other tile is full-bleed and
   should keep using the whole width. If another 4:3-in-16:9 video is added
   later, add its post-NNNN class to this selector.

   Applied in both states rather than only while playing, so the caption doesn't
   jump sideways when the video starts. */
.portfolio-item-slug.post-1423 .item-description {
	left: 12.5%;
	right: 12.5%;
}

/* G.H. Mumm Champagne project: shrink the ghmumm-loop.mp4 video and centre it
   on desktop only. Mobile keeps its default full-width size. */
@media only screen and (min-width: 960px) {
	.wp-block-video video[src*="ghmumm-loop.mp4"] {
		max-width: 33%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}


/* ------------------------------------------------ */
/* Header navigation                                */
/* ------------------------------------------------ */

/* Match the "Home" logo-link's style to the top-navigation links (e.g. "About"),
   including the gradient underline that shows the current page. Scoped to the
   header nav only so the footer and preloader logos are unaffected. */
#site-navigation h1.logo,
#site-navigation h1.logo a {
	font-family: inherit;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: normal;
	color: #273140;
}

#site-navigation h1.logo a {
	position: relative;
	display: inline-block;
	padding-bottom: 12px;
}

#site-navigation h1.logo a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 70%;
	height: 2px;
	background: linear-gradient(90deg, #17ead9 0%, #6078ea 100%);
	-webkit-transform: scale3d(0, 1, 1) translateX(-50%);
	transform: scale3d(0, 1, 1) translateX(-50%);
	-webkit-transform-origin: center center;
	transform-origin: center center;
	-webkit-transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#site-navigation h1.logo a:hover::before,
#site-navigation h1.logo.current-menu-item a::before {
	-webkit-transform: scale3d(1, 1, 1) translateX(-50%);
	transform: scale3d(1, 1, 1) translateX(-50%);
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

/* Mobile only: the "Home" logo-link in the persistent header is redundant with
   the hamburger menu, so hide it there and show "Home" inside the hamburger
   menu instead (alongside "About"). Desktop is untouched.
   Specificity note: needs to beat ".top-navigation li { display: inline-block; }",
   so this can't be a bare class selector — hence the "li." and "#site-navigation". */
#site-navigation .nav-menu li.mobile-only-nav-item {
	display: none;
}


/* ------------------------------------------------ */
/* Mobile                                           */
/* ------------------------------------------------ */

@media only screen and (max-width: 959px) {

	#site-navigation h1.logo {
		display: none;
	}

	#site-navigation .nav-menu li.mobile-only-nav-item {
		display: list-item;
	}

	/* Tighten the top of the page on mobile. Both of #site-navigation's flex
	   children are empty here — the logo is hidden above and the desktop menu
	   collapses into the hamburger — so between them and the 20px padding they
	   were reserving 98px of blank height around a 20px icon. The hamburger is
	   absolutely positioned and centred on 50%, so it re-centres itself in
	   whatever height min-height sets, keeping a comfortable tap target. */
	#site-navigation {
		padding: 0 20px;
		min-height: 52px;
	}

	.site-person-heading {
		padding-top: 4px;
	}

	/* The gap directly below the heading. */
	.filters-container {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.site-person-name {
		font-size: 26.67px;
	}

	.site-person-title {
		font-size: 20px;
	}

	/* OVERRIDE — parent: padding: 35px 20px */
	.portfolio-text {
		padding: 0 20px 35px;
	}

	/* The rule above zeroes the top padding so the portfolio pages sit tight
	   under the heading. On the About page that leaves the body copy touching
	   "Director of Photography" with no gap at all, so give that one template
	   a little breathing room back. */
	.page-template-template-contact .portfolio-text {
		padding-top: 22px;
	}

	/* OVERRIDE — parent: padding: 20px 20px 60px 20px */
	#navigation .nav-menu {
		padding: 20px 20px 20px 20px;
	}

}