/*
Theme Name: Leisure Productions
Author: Rohan T George
Author URI: https://rohantgeorge.ca/
Description: One-page theme for Leisure Productions, an event and wedding planner from Kerala. Built from the Picman HTML template. Content for packages, services, testimonials and the portfolio comes from the Leisure Productions Core plugin; section text and images are edited under Appearance > Customize; the booking and newsletter forms come from Contact Form 7.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: leisure-productions
Tags: one-column, custom-logo, custom-menu, featured-images, translation-ready
*/

/*
 * The template's own styles live in assets/css/main.css and assets/css/plugins.css.
 * This file only holds what WordPress adds on top of the static template:
 * accessibility helpers, the admin bar offset, inner pages and Contact Form 7.
 */

/* ---------- Accessibility ---------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #34444c;
	display: block;
	font-size: 16px;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ---------- Main landmark (floats like the template's sections) ---------- */

.lp-main {
	clear: both;
	float: left;
	width: 100%;
}

/* ---------- Keyboard focus ---------- */

/* Shown for keyboard users only; mouse and touch users see no change. */
:focus-visible {
	outline: 3px solid var(--main-color) !important;
	outline-offset: 3px !important;
}

/* On dark or red backgrounds a white outline stays visible. */
.picman_tm_header :focus-visible,
.picman_tm_hero :focus-visible,
.picman_tm_pricing .popular :focus-visible {
	outline-color: #fff !important;
}

/* ---------- Mobile menu button (a real <button>) ---------- */

.picman_tm_mobile_menu button.hamburger {
	background: none;
	border: 0;
	line-height: 0;
}

/* ---------- Readable form hints ---------- */

.picman_tm_cform input::placeholder,
.picman_tm_cform textarea::placeholder,
.picman_tm_subscribe input::placeholder {
	color: #767676;
	opacity: 1;
}

/* ---------- Portfolio and testimonial photos as real images ---------- */

/* The template hides every img in these blocks (they were only spacers) and used
   CSS backgrounds for the photos; the photos are now real <img> tags. */
.picman_tm_portfolio img.main,
.image-slider img.main {
	height: 100%;
	min-width: 0;
	object-fit: cover;
	object-position: center;
	opacity: 1;
	width: 100%;
}

/* ---------- Portfolio strip: pause on hover, focus or button ---------- */

.picman_tm_portfolio:hover,
.picman_tm_portfolio:focus-within,
.picman_tm_portfolio.is-paused {
	animation-play-state: paused;
}

.lp-portfolio-controls {
	clear: both;
	margin-top: 30px;
	text-align: center;
}

.lp-portfolio-toggle {
	align-items: center;
	background: transparent;
	border: 2px solid #34444c;
	border-radius: 999px;
	color: #34444c;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	gap: 10px;
	line-height: 1;
	padding: 10px 20px;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.lp-portfolio-toggle:hover {
	background-color: #34444c;
	color: #fff;
}

.lp-portfolio-toggle .lp-icon {
	display: inline-block;
	height: 12px;
	position: relative;
	width: 10px;
}

/* Pause icon: two bars. */
.lp-portfolio-toggle .lp-icon::before,
.lp-portfolio-toggle .lp-icon::after {
	background-color: currentColor;
	content: "";
	height: 12px;
	position: absolute;
	top: 0;
	width: 3px;
}

.lp-portfolio-toggle .lp-icon::before {
	left: 0;
}

.lp-portfolio-toggle .lp-icon::after {
	right: 0;
}

/* Play icon: a triangle, shown while paused. */
.lp-portfolio-toggle[aria-pressed="true"] .lp-icon::before {
	background: none;
	border-bottom: 6px solid transparent;
	border-left: 10px solid currentColor;
	border-top: 6px solid transparent;
	height: 0;
	width: 0;
}

.lp-portfolio-toggle[aria-pressed="true"] .lp-icon::after {
	display: none;
}

/* ---------- Visitors who ask their device to reduce motion ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.picman_tm_portfolio {
		animation: none !important;
	}

	.lp-portfolio-controls {
		display: none;
	}
}

/* ---------- Admin bar offset for the fixed header ---------- */

.admin-bar .picman_tm_header,
.admin-bar .picman_tm_mobile_menu {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .picman_tm_header,
	.admin-bar .picman_tm_mobile_menu {
		top: 46px;
	}
}

/* ---------- Template details moved out of inline styles ---------- */

.picman_tm_feature .acc_content_in p {
	font-size: 20px;
}

.picman_tm_feature .desc h3 a,
.picman_tm_feature .desc .lp-h3 a {
	text-decoration: none;
}

/* ---------- FAQ section (below testimonials) ---------- */

#faq {
	padding: 0 0 200px;
}

.lp-faq {
	margin: 70px auto 0;
	max-width: 920px;
}

.lp-faq__item {
	border-bottom: 1px solid rgba(52, 68, 76, 0.12);
}

.lp-faq__item:first-child {
	border-top: 1px solid rgba(52, 68, 76, 0.12);
}

.lp-faq__question {
	color: #000;
	cursor: pointer;
	display: block;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
	padding: 24px 0 24px 50px;
	position: relative;
}

.lp-faq__question::-webkit-details-marker {
	display: none;
}

.lp-faq__question:hover {
	color: var(--main-color);
}

.lp-faq__question:focus-visible {
	outline: 3px solid var(--main-color) !important;
	outline-offset: 4px;
}

/* The template's plus sign, turning into a minus when open. */
.lp-faq .plus {
	display: block;
	height: 18px;
	left: 0;
	margin-top: -9px;
	position: absolute;
	top: 50%;
	width: 18px;
}

.lp-faq .plus::before,
.lp-faq .plus::after {
	background-color: currentColor;
	content: "";
	display: block;
	position: absolute;
	transition: transform 0.3s ease;
}

.lp-faq .plus::before {
	height: 4px;
	left: 0;
	margin-top: -2px;
	top: 50%;
	width: 18px;
}

.lp-faq .plus::after {
	height: 18px;
	left: 50%;
	margin: -9px 0 0 -2px;
	top: 50%;
	width: 4px;
}

.lp-faq__item[open] .plus::before {
	transform: rotate(180deg);
}

.lp-faq__item[open] .plus::after {
	transform: rotate(-90deg);
}

.lp-faq__answer {
	padding: 0 0 26px 50px;
}

.lp-faq__answer p {
	font-size: 18px;
	margin: 0 0 12px;
}

.lp-faq__answer p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.lp-faq .plus::before,
	.lp-faq .plus::after {
		transition: none;
	}
}

@media (max-width: 1040px) {
	#faq {
		padding-bottom: 150px;
	}

	.lp-faq {
		margin-top: 50px;
	}

	.lp-faq__question {
		font-size: 19px;
		padding-left: 40px;
	}

	.lp-faq__answer {
		padding-left: 40px;
	}
}

/* ---------- Booking form privacy note ---------- */

.picman_tm_cform .lp-form-note {
	clear: both;
	color: #5a5554;
	font-size: 15px;
	line-height: 1.5;
	margin: 16px 0 0;
}

.picman_tm_cform .lp-form-note a {
	color: #34444c;
	font-weight: 600;
}

/* ---------- Footer bottom bar: copyright left, privacy centre, credit right ---------- */

.picman_tm_footer .footer_top {
	border-bottom: 1px solid rgba(52, 68, 76, 0.1);
	margin-bottom: 30px;
}

/* Three columns with a truly centred middle; replaces the template's two-column flex row. */
.picman_tm_footer .footer_bottom {
	align-items: center;
	display: grid;
	gap: 12px 30px;
	grid-template-columns: 1fr auto 1fr;
	margin-left: 0;
}

.picman_tm_footer .footer_bottom > * {
	margin: 0;
	padding-left: 0;
	width: auto;
}

.picman_tm_footer .footer_bottom .copyright {
	grid-column: 1;
	text-align: left;
}

.picman_tm_footer .footer_bottom .lp-privacy-link {
	grid-column: 2;
	text-align: center;
}

.picman_tm_footer .footer_bottom .lp-credit {
	grid-column: 3;
	text-align: right;
}

.picman_tm_footer .copyright p,
.picman_tm_footer .lp-privacy-link p,
.picman_tm_footer .lp-credit p {
	font-size: 12px;
	line-height: 1.8;
	margin: 0;
}

.picman_tm_footer .lp-credit p {
	color: #6b6564; /* 5.2:1 on the footer background. */
	letter-spacing: 0.2px;
}

.picman_tm_footer .lp-privacy-link a,
.picman_tm_footer .lp-credit a {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	color: #34444c;
	display: inline;
	font-size: inherit;
	font-weight: 600;
	margin-left: 2px;
	transition: color 0.3s ease, background-size 0.3s ease;
}

.picman_tm_footer .lp-privacy-link a {
	margin-left: 0;
	text-decoration: none;
}

.picman_tm_footer .lp-privacy-link a:hover,
.picman_tm_footer .lp-privacy-link a:focus,
.picman_tm_footer .lp-credit a:hover,
.picman_tm_footer .lp-credit a:focus {
	background-size: 100% 1px;
	color: var(--main-color);
}

/* Tablets and phones: one column, everything left-aligned. */
@media (max-width: 1040px) {
	.picman_tm_footer .footer_bottom {
		gap: 10px;
		grid-template-columns: 1fr;
	}

	.picman_tm_footer .footer_bottom .copyright,
	.picman_tm_footer .footer_bottom .lp-privacy-link,
	.picman_tm_footer .footer_bottom .lp-credit {
		grid-column: 1;
		text-align: left;
	}
}

/* ---------- Inner pages (posts, pages, 404, search) ---------- */

.lp-inner-page .picman_tm_header {
	background-color: #34444c;
	padding: 15px 0;
}

.lp-inner-page .picman_tm_header .logo img {
	max-height: 50px;
}

.lp-page {
	padding: 180px 0 120px;
}

.lp-page .page-title,
.lp-page .entry-title {
	font-size: 48px;
	line-height: 1.2;
	margin-bottom: 30px;
}

.lp-page .entry-title a {
	color: inherit;
	text-decoration: none;
}

.lp-page article {
	margin-bottom: 70px;
}

.lp-page .entry-meta {
	font-size: 15px;
	margin-bottom: 20px;
	opacity: 0.8;
}

.lp-page .entry-content > * {
	margin-bottom: 20px;
}

.lp-page .entry-content a {
	color: var(--main-color);
}

.lp-page .entry-content ul,
.lp-page .entry-content ol {
	margin-left: 20px;
}

.lp-page .post-thumbnail img,
.lp-page .entry-content img {
	height: auto;
	max-width: 100%;
}

.lp-page .navigation {
	margin-top: 40px;
}

.lp-page .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.lp-page .page-numbers {
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 6px 14px;
	text-decoration: none;
}

.lp-page .page-numbers.current {
	background-color: var(--main-color);
	border-color: var(--main-color);
	color: #fff;
}

.lp-page .post-password-form p:last-child {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 520px;
}

.lp-page .post-password-form label {
	display: flex;
	flex: 1 1 260px;
	flex-direction: column;
	font-weight: 600;
	gap: 6px;
}

.lp-page .post-password-form input[type="password"] {
	border: 1px solid #cfd4dc;
	border-radius: 5px;
	height: 50px;
	padding: 0 15px;
	width: 100%;
}

.lp-page .post-password-form input[type="password"]:focus {
	border-color: #34444c;
	outline: 2px solid #34444c !important;
	outline-offset: 1px;
}

.lp-page .post-password-form input[type="submit"] {
	background-color: var(--main-color);
	border-radius: 5px;
	height: 50px;
	padding: 0 28px;
	text-transform: none;
}

.lp-page .post-password-form input[type="submit"]:hover {
	background-color: #34444c;
}

.lp-page .search-form {
	display: flex;
	gap: 10px;
	margin-top: 30px;
	max-width: 500px;
}

.lp-page .search-form label {
	flex: 1;
}

.lp-page .search-field,
.lp-page .comment-form input[type="text"],
.lp-page .comment-form input[type="email"],
.lp-page .comment-form input[type="url"],
.lp-page .comment-form textarea {
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 10px 15px;
	width: 100%;
}

.lp-page .search-submit,
.lp-page .comment-form .submit {
	background-color: var(--main-color);
	border: none;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	padding: 10px 25px;
}

.lp-page .comments-area {
	margin-top: 60px;
}

.lp-page .comment-list {
	list-style: none;
	margin: 0 0 40px;
}

.lp-page .comment-list .children {
	list-style: none;
	margin-left: 30px;
}

.lp-page .comment-body {
	border-bottom: 1px solid #eee;
	padding: 20px 0;
}

/* ---------- Core content alignment and captions ---------- */

.alignleft {
	float: left;
	margin: 0 20px 20px 0;
}

.alignright {
	float: right;
	margin: 0 0 20px 20px;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.wp-element-caption {
	font-size: 14px;
	margin-top: 8px;
	text-align: center;
}

.sticky,
.bypostauthor,
.gallery-caption {
	display: block;
}

/* ---------- Contact Form 7: booking form ---------- */

.picman_tm_cform .wpcf7-form-control-wrap {
	display: block;
}

.picman_tm_cform label {
	display: block;
	margin: 0;
}

.picman_tm_cform input[type="text"],
.picman_tm_cform input[type="email"],
.picman_tm_cform input[type="tel"] {
	display: block;
}

.picman_tm_cform .button {
	clear: both;
	position: relative;
}

.picman_tm_cform .button .wpcf7-submit {
	background-color: var(--main-color);
	border: 2px solid var(--main-color);
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	display: block;
	font-family: inherit;
	font-size: 18px;
	height: auto;
	letter-spacing: -0.1px;
	line-height: 1;
	padding: 21px 35px 17px;
	text-align: center;
	text-transform: none;
	transition: all 0.3s ease;
	width: 100%;
}

.picman_tm_cform .button .wpcf7-submit:hover,
.picman_tm_cform .button .wpcf7-submit:focus {
	background-color: transparent;
	border-color: #34444c;
	color: #34444c;
}

.picman_tm_cform .button .wpcf7-spinner {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.picman_tm_cform .wpcf7-not-valid-tip,
.picman_tm_subscribe .wpcf7-not-valid-tip {
	color: #f52225;
	font-size: 15px;
	font-weight: 500;
	margin-top: 6px;
	text-align: left;
}

.picman_tm_cform .wpcf7 form .wpcf7-response-output,
.picman_tm_subscribe .wpcf7 form .wpcf7-response-output {
	border-radius: 5px;
	clear: both;
	font-weight: 500;
	margin: 20px 0 0;
	padding: 12px 18px;
}

/* ---------- Contact Form 7: newsletter form ---------- */

.picman_tm_subscribe .sub_form .wpcf7-form-control-wrap {
	display: block;
}

.picman_tm_subscribe .sub_form .wpcf7-submit {
	/* The template's mail icon, filled with the brand colour. */
	background-color: var(--main-color);
	-webkit-mask: url("assets/img/svg/mail.svg") no-repeat center / 28px 28px;
	mask: url("assets/img/svg/mail.svg") no-repeat center / 28px 28px;
	border: none;
	border-radius: 0 5px 5px 0;
	bottom: 0;
	cursor: pointer;
	box-shadow: none;
	font-size: 0;
	height: 60px;
	left: auto;
	line-height: normal;
	min-width: 0; /* The template's ".picman_tm_subscribe input" rule sets min-width: 100%. */
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 68px;
}

.picman_tm_subscribe .sub_form .wpcf7-spinner {
	position: absolute;
	right: 70px;
	top: 18px;
}