/*
Theme Name: Taam Studio
Theme URI: http://localhost/taam-studio
Author: Taam Studio
Description: Landing theme for Taam Studio, built from the Figma design "Taam web". The front page is fully editable with WPBakery Page Builder; the hero slideshow is driven by Slider Revolution.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taam-studio
Tags: one-column, custom-menu, featured-images, translation-ready, rtl-language-support
*/

/* ==========================================================================
   1. Design tokens  (extracted from Figma frame "Desktop - 6", 1440x1999)
   ========================================================================== */

:root {
	/* Colour */
	--taam-sand:            #AF9D70;  /* page background    */
	--taam-ink:             #4D4D4F;  /* card hover overlay */
	--taam-white:           #FFFFFF;
	--taam-glass-bg:        rgba(255, 255, 255, 0.20);
	--taam-glass-border:    rgba(255, 255, 255, 1);
	--taam-glass-blur:      10px;
	--taam-play-bg:         rgba(255, 255, 255, 0.30);

	/* Type — the design uses "Obviously Demo"; Outfit is the fallback.
	   Drop Obviously .woff2 files into assets/fonts/ and the theme picks
	   them up automatically (see functions.php). */
	--taam-font:            "Obviously", "Outfit", "Helvetica Neue", Arial, sans-serif;
	--taam-w-nav:           450;
	--taam-w-body:          540;
	--taam-w-card-title:    560;
	--taam-w-heading:       650;

	/* Metrics */
	--taam-page-w:          1440px;
	--taam-gutter:          120px;  /* header side margin */
	--taam-content-w:       1148px; /* 3 x 356 + 2 x 40   */
	--taam-header-h:        88px;
	--taam-hero-h:          810px;
	--taam-radius-card:     30px;
	--taam-radius-pill:     22px;
	--taam-grid-gap:        40px;
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--taam-sand);
	color: var(--taam-white);
	font-family: var(--taam-font);
	font-size: 18px;
	line-height: 28px;
	font-weight: var(--taam-w-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--taam-w-heading); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.taam-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.taam-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	padding: 12px 20px; background: var(--taam-ink); color: #fff;
}
.taam-skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--taam-white); outline-offset: 3px; }

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.taam-container {
	width: 100%;
	max-width: calc(var(--taam-content-w) + 40px);
	margin: 0 auto;
	padding: 0 20px;
}

.taam-container--wide {
	max-width: var(--taam-page-w);
	padding: 0 var(--taam-gutter);
}

/* The frosted-glass treatment shared by the search field, the pill buttons
   and the play badge on each card. */
.taam-glass {
	background: var(--taam-glass-bg);
	border: 1px solid var(--taam-glass-border);
	-webkit-backdrop-filter: blur(var(--taam-glass-blur));
	backdrop-filter: blur(var(--taam-glass-blur));
}

/* ==========================================================================
   4. Header  (Figma "Group 4" — 1440x88, overlaid on the hero)
   ========================================================================== */

.taam-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 50;
	height: var(--taam-header-h);
	display: flex;
	align-items: center;
}

.taam-header__inner {
	width: 100%;
	max-width: var(--taam-page-w);
	margin: 0 auto;
	padding: 0 var(--taam-gutter);
	display: flex;
	align-items: center;
	gap: 60px;
}

/* The mark sits 4px below the optical centre of the bar in the design. */
.taam-logo { flex: 0 0 auto; padding-top: 8px; }
.taam-logo img, .taam-logo svg { width: 54px; height: 44px; }

.taam-nav ul {
	display: flex;
	align-items: center;
	gap: 60px;
	margin: 0; padding: 0;
	list-style: none;
}

.taam-nav a {
	font-size: 16px;
	line-height: 25px;
	font-weight: var(--taam-w-nav);
	color: var(--taam-white);
	position: relative;
	display: inline-block;
	padding-bottom: 2px;
}

.taam-nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}
.taam-nav a:hover::after,
.taam-nav li.current-menu-item > a::after { transform: scaleX(1); }

/* Search pill — Figma "Group 3", 138x32, radius 16 */
.taam-search { margin-inline-start: auto; flex: 0 0 auto; }

.taam-search form {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 138px;
	height: 32px;
	padding: 0 12px;
	border-radius: 16px;
}

.taam-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	background: none;
	border: 0;
	padding: 0;
	color: var(--taam-white);
	font-family: inherit;
	font-size: 16px;
	line-height: 25px;
	font-weight: var(--taam-w-nav);
}
.taam-search input[type="search"]::placeholder { color: var(--taam-white); opacity: 1; }
.taam-search input[type="search"]:focus { outline: none; }
.taam-search button {
	flex: 0 0 12px;
	width: 12px; height: 12px;
	padding: 0; border: 0; background: none;
	cursor: pointer; color: var(--taam-white);
}
.taam-search button svg { width: 12px; height: 12px; fill: currentColor; }

/* Burger — only shown on small screens */
.taam-burger {
	display: none;
	margin-inline-start: auto;
	width: 40px; height: 40px;
	padding: 8px;
	border: 0; background: none;
	color: var(--taam-white);
	cursor: pointer;
}
.taam-burger span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .3s ease, opacity .3s ease;
}
.taam-burger span + span { margin-top: 5px; }
.taam-header.is-open .taam-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.taam-header.is-open .taam-burger span:nth-child(2) { opacity: 0; }
.taam-header.is-open .taam-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   5. Buttons  (Figma "Group 5" / "Group 9" — 222x44, radius 22)
   ========================================================================== */

.taam-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 222px;
	height: 44px;
	padding: 0 24px;
	border-radius: var(--taam-radius-pill);
	color: var(--taam-white);
	font-size: 12px;
	line-height: 19px;
	font-weight: var(--taam-w-heading);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s ease, transform .25s ease;
}
.taam-btn:hover { background: rgba(255, 255, 255, 0.32); }
.taam-btn:active { transform: translateY(1px); }

.taam-btn-wrap { text-align: center; }

/* ==========================================================================
   6. Hero  (Slider Revolution mounts here)
   ========================================================================== */

/* Three stacked layers: the Slider Revolution slideshow (1), the sand
   gradient that blends it into the page (2), and the static overlay with the
   logotype and the call to action (3). */
.taam-hero {
	position: relative;
	background: var(--taam-sand);
}

.taam-hero__slider { position: relative; z-index: 1; }

/* Figma "Rectangle 5": transparent at 26%, solid --taam-sand at 87%. */
.taam-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(
		180deg,
		rgba(175, 157, 112, 0) 26%,
		rgba(175, 157, 112, 1) 87%
	);
}

/* Fallback, used when Slider Revolution is unavailable. */
.taam-hero--static {
	background-size: cover;
	background-position: center;
}

/* The overlay is positioned in percentages so it keeps its place in the
   composition as the slider height changes: in the 1440x810 frame the
   logotype sits at y 496 (61.2%) and the pill at y 616 (76.05%). */
.taam-hero__inner {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}
.taam-hero__inner > * { pointer-events: auto; }

.taam-hero__logotype,
.taam-hero__cta {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.taam-hero__logotype {
	top: 61.2%;
	width: min(824px, 57.2%);
}
.taam-hero__logotype svg,
.taam-hero__logotype img { width: 100%; height: auto; }

.taam-hero__cta { top: 76.05%; }

/* ==========================================================================
   7. Sections
   ========================================================================== */

.taam-main { position: relative; z-index: 7; }

.taam-section { position: relative; }

.taam-section-title {
	font-size: 24px;
	line-height: 38px;
	font-weight: var(--taam-w-heading);
	color: var(--taam-white);
	text-align: center;
	margin: 0;
}

/* ==========================================================================
   8. Video grid  (Figma cards — 356x200, radius 30, 40px gutters)
   ========================================================================== */

.taam-video-grid {
	display: grid;
	grid-template-columns: repeat(var(--taam-grid-cols, 3), minmax(0, 1fr));
	gap: var(--taam-grid-gap);
	width: min(var(--taam-content-w), 100% - 40px);
	margin-inline: auto;
}

.taam-video-card {
	position: relative;
	display: block;
	aspect-ratio: 356 / 200;
	border-radius: var(--taam-radius-card);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.15);
	isolation: isolate;
}

.taam-video-card__media,
.taam-video-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.taam-video-card__media img { transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.taam-video-card:hover .taam-video-card__media img { transform: scale(1.04); }

/* Shown when a video post has no featured image yet. */
.taam-video-card__placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(77, 77, 79, .35), rgba(77, 77, 79, .1));
}

/* Inline player on a single video page */
.taam-video-player {
	position: relative;
	border-radius: var(--taam-radius-card);
	overflow: hidden;
	background: #000;
	margin-bottom: 32px;
}
.taam-video-player iframe,
.taam-video-player video,
.taam-video-player .wp-video,
.taam-video-player .mejs-container { width: 100% !important; height: auto; display: block; }
.taam-video-player iframe { aspect-ratio: 16 / 9; height: auto; }

/* Play badge — 48x47 glass ellipse, 28px from the top, 29px from the end */
.taam-video-card__play {
	position: absolute;
	top: 28px;
	inset-inline-end: 29px;
	z-index: 3;
	width: 48px;
	height: 47px;
	border-radius: 50%;
	background: var(--taam-play-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .25s ease;
}
.taam-video-card:hover .taam-video-card__play { background: rgba(255, 255, 255, 0.45); }
.taam-video-card__play svg,
.taam-video-card__play img { width: 21px; height: 21px; }

/* Hover overlay — Figma "Rectangle 8568": #4D4D4F, transparent at 13%,
   solid at the bottom edge. Hidden until hover. */
.taam-video-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px;
	opacity: 0;
	transition: opacity .35s ease;
	background: linear-gradient(
		180deg,
		rgba(77, 77, 79, 0) 13%,
		rgba(77, 77, 79, 1) 100%
	);
}
.taam-video-card:hover .taam-video-card__overlay,
.taam-video-card:focus-visible .taam-video-card__overlay { opacity: 1; }

.taam-video-card__kicker {
	font-size: 24px;
	line-height: 38px;
	font-weight: var(--taam-w-card-title);
	margin: 0;
}
.taam-video-card__title {
	font-size: 20px;
	line-height: 31px;
	font-weight: var(--taam-w-body);
	margin: 0;
}

/* Touch devices have no hover — always show the caption there. */
@media (hover: none) {
	.taam-video-card__overlay { opacity: 1; }
}

/* Lightbox for the card videos */
.taam-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(31, 28, 21, 0.88);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.taam-lightbox.is-open { display: flex; }
.taam-lightbox__inner { width: min(1100px, 100%); }
.taam-lightbox__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	overflow: hidden;
	background: #000;
}
.taam-lightbox__caption {
	margin: 16px 0 0;
	text-align: center;
	font-size: 20px;
	line-height: 31px;
	font-weight: var(--taam-w-card-title);
	color: var(--taam-white);
}
.taam-lightbox__frame iframe,
.taam-lightbox__frame video { width: 100%; height: 100%; border: 0; display: block; }
.taam-lightbox__close {
	position: absolute;
	top: 24px; inset-inline-end: 24px;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .6);
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

/* ==========================================================================
   9. About + socials
   ========================================================================== */

.taam-about {
	width: min(760px, 100% - 40px);
	margin-inline: auto;
	text-align: center;
	font-size: 18px;
	line-height: 28px;
	font-weight: var(--taam-w-body);
}

.taam-socials {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0; padding: 0;
	list-style: none;
}
.taam-socials a {
	display: block;
	width: 36px;
	height: 36px;
	transition: opacity .25s ease, transform .25s ease;
}
.taam-socials a:hover { opacity: .75; transform: translateY(-2px); }
.taam-socials img, .taam-socials svg { width: 36px; height: 36px; }

.taam-footer { padding-bottom: 60px; }

/* ==========================================================================
   9b. Contact Form 7
   ========================================================================== */

.taam-main .wpcf7 {
	width: min(760px, 100% - 40px);
	margin-inline: auto;
}

.taam-form-block { margin-top: 52px; }

.taam-main .wpcf7-form p { margin: 0 0 20px; }

.taam-main .wpcf7-form label {
	display: block;
	font-size: 14px;
	line-height: 22px;
	font-weight: var(--taam-w-body);
	color: var(--taam-white);
	margin-bottom: 20px;
}

.taam-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 20px;
}

.taam-main .wpcf7-form input[type="text"],
.taam-main .wpcf7-form input[type="email"],
.taam-main .wpcf7-form input[type="tel"],
.taam-main .wpcf7-form input[type="url"],
.taam-main .wpcf7-form select,
.taam-main .wpcf7-form textarea {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 14px 18px;
	background: var(--taam-glass-bg);
	border: 1px solid var(--taam-glass-border);
	-webkit-backdrop-filter: blur(var(--taam-glass-blur));
	backdrop-filter: blur(var(--taam-glass-blur));
	border-radius: 16px;
	color: var(--taam-white);
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	font-weight: var(--taam-w-body);
	transition: background-color .25s ease, border-color .25s ease;
}

.taam-main .wpcf7-form textarea {
	min-height: 160px;
	border-radius: 20px;
	resize: vertical;
}

.taam-main .wpcf7-form ::placeholder { color: rgba(255, 255, 255, .7); opacity: 1; }

.taam-main .wpcf7-form input:focus,
.taam-main .wpcf7-form select:focus,
.taam-main .wpcf7-form textarea:focus {
	outline: none;
	background: rgba(255, 255, 255, .3);
	border-color: #fff;
}

/* Submit reuses the pill from the design. */
.taam-main .wpcf7-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 222px;
	height: 44px;
	padding: 0 24px;
	border-radius: var(--taam-radius-pill);
	background: var(--taam-glass-bg);
	border: 1px solid var(--taam-glass-border);
	-webkit-backdrop-filter: blur(var(--taam-glass-blur));
	backdrop-filter: blur(var(--taam-glass-blur));
	color: var(--taam-white);
	font-family: inherit;
	font-size: 12px;
	line-height: 19px;
	font-weight: var(--taam-w-heading);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s ease, transform .25s ease;
}
.taam-main .wpcf7-form input[type="submit"]:hover { background: rgba(255, 255, 255, .32); }
.taam-main .wpcf7-form input[type="submit"]:active { transform: translateY(1px); }

/* The spinner is taken out of flow, otherwise it sits inside the centred
   line box and pushes the submit button off centre. */
.taam-form-actions {
	position: relative;
	text-align: center;
	margin-top: 8px;
}
.taam-main .wpcf7-form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	left: calc(50% + 130px);
	transform: translateY(-50%);
	margin: 0;
}

/* Validation and response messages */
.taam-main .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 20px;
	color: #ffdcd6;
}
.taam-main .wpcf7-form .wpcf7-not-valid { border-color: #ffdcd6; }

.taam-main .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 18px;
	border-radius: 16px;
	border: 1px solid var(--taam-glass-border);
	background: var(--taam-glass-bg);
	font-size: 15px;
	line-height: 23px;
	text-align: center;
}
.taam-main .wpcf7-form.sent .wpcf7-response-output { border-color: #d9f2e0; }
.taam-main .wpcf7-form.invalid .wpcf7-response-output,
.taam-main .wpcf7-form.failed .wpcf7-response-output { border-color: #ffdcd6; }

.taam-main .wpcf7-spinner { background-color: rgba(255, 255, 255, .6); }

@media (max-width: 640px) {
	.taam-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   10. Interior pages (anything that is not the WPBakery front page)
   ========================================================================== */

.taam-page { padding: calc(var(--taam-header-h) + 80px) 0 100px; }
.taam-page__title { font-size: 40px; line-height: 1.2; margin-bottom: 24px; }
.taam-entry a { text-decoration: underline; }
.taam-entry h2 { font-size: 28px; line-height: 1.3; margin: 1.4em 0 .5em; }
.taam-entry h3 { font-size: 22px; line-height: 1.3; margin: 1.4em 0 .5em; }
.taam-entry ul, .taam-entry ol { padding-inline-start: 1.4em; }
.taam-entry img { border-radius: 16px; margin: 1.5em 0; }

.taam-postlist { display: grid; gap: 48px; }
.taam-postcard__thumb { border-radius: var(--taam-radius-card); overflow: hidden; margin-bottom: 20px; }
.taam-postcard__title { font-size: 24px; line-height: 34px; margin-bottom: 8px; }
.taam-postcard__meta { font-size: 14px; opacity: .8; margin-bottom: 12px; }

.taam-pagination { margin-top: 60px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.taam-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border-radius: 20px;
}
.taam-pagination .page-numbers.current { background: var(--taam-glass-bg); }

/* ==========================================================================
   11. WPBakery bridge
   ========================================================================== */

/* WPBakery ships a 15px gutter system and its stylesheet is enqueued after
   this one, so these selectors are deliberately specific enough to win the
   cascade. The Taam elements size themselves, so the gutters go. */
.taam-main .vc_row,
.taam-main .vc_row.vc_row-fluid {
	margin-left: 0;
	margin-right: 0;
}
.taam-main .vc_row > .vc_column_container,
.taam-main .vc_row > .vc_column_container.vc_col-sm-12 {
	padding-left: 0;
	padding-right: 0;
}
.taam-main .vc_row > .vc_column_container > .vc_column-inner {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}
.taam-main .wpb_content_element,
.taam-main .wpb_text_column { margin-bottom: 0; }

/* The site locale is Persian, so WordPress and the Persian plugins set the
   document to RTL. The landing page reproduces an English left-to-right
   design, so it opts back out. Interior pages keep the site direction. */
body.taam-ltr {
	direction: ltr;
	text-align: left;
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 1280px) {
	:root { --taam-gutter: 60px; }
}

@media (max-width: 1100px) {
	:root { --taam-grid-gap: 28px; --taam-hero-h: 640px; }
	.taam-video-grid { --taam-grid-cols: 2; max-width: 760px; }
}

@media (max-width: 860px) {
	:root { --taam-gutter: 24px; --taam-header-h: 72px; }

	.taam-burger { display: block; }
	.taam-search { display: none; }

	.taam-nav {
		position: absolute;
		top: var(--taam-header-h);
		left: 0; right: 0;
		background: rgba(77, 77, 79, 0.92);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		padding: 24px var(--taam-gutter);
		display: none;
	}
	.taam-header.is-open .taam-nav { display: block; }
	.taam-nav ul { flex-direction: column; align-items: flex-start; gap: 18px; }

	.taam-header__inner { gap: 16px; }
}

@media (max-width: 640px) {
	:root { --taam-hero-h: 520px; --taam-radius-card: 22px; }
	body { font-size: 16px; line-height: 26px; }
	.taam-video-grid { --taam-grid-cols: 1; max-width: 400px; }
	.taam-video-card__kicker { font-size: 20px; line-height: 30px; }
	.taam-video-card__title { font-size: 17px; line-height: 26px; }
	.taam-about { font-size: 16px; line-height: 26px; }
	.taam-btn { min-width: 190px; }
	.taam-hero__logotype { width: min(824px, 78%); }
}

/* Users who prefer less motion get no transitions. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}