/* =========================================================
   Astor Films — Effects & Design Tokens
   Consolidated from the original Entropia theme CSS.
   ========================================================= */

   /* Global Styles for Astor Films */
:root {
	--astor-bg: #0a0501;
	--astor-white: #ffffff;
	--astor-mint: #8ef8d2;
	--astor-red: #ff0000;
	--astor-dark-gray: #383838;
	--astor-font: 'Barlow', sans-serif;
}

/* ---------------------------------------------------------
   1. Buttons — the offset shadow-glow "3D" button.
   Markup expected:
   <button class="astor-btn astor-btn-sound">
     <span class="astor-btn__accent"></span>
     <span class="astor-btn__bg"></span>
     <span class="astor-btn__text">View More</span>
   </button>
   --------------------------------------------------------- */
.astor-btn {
	position: relative;
	display: inline-block;
	background: none;
	border: none;
	padding: 17px 50px;
	font-family: var(--astor-font);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 2em;
	cursor: pointer;
}

.astor-btn--small { padding: 14px 40px; }
.astor-btn--large { padding: 22px 66px; }

.astor-btn__bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: -6px;
	left: -6px;
	background: var(--astor-white);
	z-index: 1;
	box-shadow: -5px -5px 20px rgba(255, 0, 0, 0.15);
	transition: left 0.2s ease-in-out, top 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.astor-btn__accent {
	position: absolute;
	inset: 0;
	background: var(--astor-mint);
	z-index: 0;
	box-shadow: 5px 5px 20px rgba(142, 248, 210, 0.15);
	transition: box-shadow 0.2s ease-in-out;
}

.astor-btn__text {
	position: relative;
	z-index: 2;
	top: -6px;
	left: -6px;
	color: var(--astor-red);
	transition: left 0.2s ease-in-out, top 0.2s ease-in-out;
}

.astor-btn:hover .astor-btn__bg {
	top: 0;
	left: 0;
	box-shadow: 0 0 40px 4px rgba(0, 0, 0, 0.75);
}

.astor-btn:hover .astor-btn__accent {
	box-shadow: 0 0 40px 4px rgba(255, 255, 255, 0.75);
}

.astor-btn:hover .astor-btn__text {
	top: 0;
	left: 0;
}

/* ---------------------------------------------------------
   2. Back-to-top button — same offset mechanic, circular,
   with a CSS-triangle arrow instead of text.
   Markup: see template-parts/back-to-top.php
   --------------------------------------------------------- */
#astor-back-to-top {
	position: fixed;
	width: 50px;
	height: 50px;
	right: 25px;
	bottom: 25px;
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
}

#astor-back-to-top.is-off {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0s 0.15s;
}

#astor-back-to-top.is-on {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

#astor-back-to-top .btt-arrow-holder {
	position: absolute;
	width: 100%;
	height: 100%;
	top: -6px;
	left: -6px;
	background: var(--astor-white);
	z-index: 2;
	box-shadow: -5px -5px 20px rgba(255, 0, 0, 0.15);
	transition: left 0.2s ease-in-out, top 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#astor-back-to-top .btt-arrow-holder::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-width: 0 15px 15px;
	border-style: solid;
	border-color: transparent transparent var(--astor-red);
	transform: translate(-50%, -50%);
}

#astor-back-to-top .btt-base {
	position: absolute;
	inset: 0;
	background: var(--astor-mint);
	z-index: 1;
	box-shadow: 5px 5px 20px rgba(142, 248, 210, 0.15);
	transition: box-shadow 0.2s ease-in-out;
}

#astor-back-to-top .btt-base {
	position: absolute;
	inset: 0;
	background: var(--astor-mint);
	z-index: 1;
	box-shadow: 5px 5px 20px rgba(142, 248, 210, 0.15);
	transition: box-shadow 0.2s ease-in-out;
}
 
#astor-back-to-top:hover .btt-arrow-holder {
	top: 0;
	left: 0;
	box-shadow: 0 0 40px 4px rgba(0, 0, 0, 0.75);
}
 
#astor-back-to-top:hover .btt-base {
	box-shadow: 0 0 40px 4px rgba(142, 248, 210, 0.75);
}

/* ---------------------------------------------------------
   Off-canvas nav list: link styling + hover glow, and the
   submenu accordion (caret toggle, slow slide-down).
   Markup for the caret is injected by JS — see astor-effects.js
   initSubmenuAccordion(). Wraps standard wp_nav_menu() output,
   so the client can still edit menu items normally.
   --------------------------------------------------------- */
.astor-off-canvas-nav-list {
	list-style: none;
	margin: 0;
	padding: 80px 32px 32px;
}

.astor-off-canvas-nav-list li {
    position: relative;
}

.astor-off-canvas-nav-list a {
	display: inline-block;
	padding: 20px 0;
	color: var(--astor-white);
	font-family: var(--astor-font);
	font-size: 2em;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Same glow recipe as .astor-glow-pulse, but triggered on
   hover/focus rather than looping — a nav full of simultaneously
   pulsing links would be too busy, this keeps it to one at a time. */
.astor-off-canvas-nav-list a:hover,
.astor-off-canvas-nav-list a:focus {
	color: var(--astor-white);
	text-shadow: 3px 3px 23px rgba(142, 248, 210, 0.85),
		-3px -3px 23px rgba(142, 248, 210, 0.85),
		1px -3px 35px rgba(142, 248, 210, 0.85),
		-3px 3px 35px rgba(142, 248, 210, 0.85);
}

/* Caret toggle — injected next to any menu item that has children */
.astor-menu-caret {
	position: absolute;
	right: 0;
	top: 34px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.astor-menu-caret::before {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--astor-white);
	border-bottom: 2px solid var(--astor-white);
	transform: rotate(45deg);
	transition: transform 0.3s ease-in-out;
}

.astor-menu-caret.is-open::before {
	transform: rotate(-135deg);
}

/* Submenu itself: starts collapsed, slides open via max-height.
   JS sets the explicit max-height (to scrollHeight) on open since
   CSS alone can't transition to an unknown content height. */
.astor-off-canvas-nav-list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 4px 16px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease-in-out;
}

.astor-off-canvas-nav-list .sub-menu a {
	font-size: 1.3em;
	font-weight: 400;
}


/* ---------------------------------------------------------
   4. Text glow-pulse — apply .astor-glow-pulse to any heading,
   underline bar, or small accent element that should breathe.
   --------------------------------------------------------- */
@keyframes astor-glow-pulse {
	to {
		text-shadow: 3px 3px 23px rgba(142, 248, 210, 0.85),
			-3px -3px 23px rgba(142, 248, 210, 0.85),
			1px -3px 35px rgba(142, 248, 210, 0.85),
			-3px 3px 35px rgba(142, 248, 210, 0.85);
	}
}

@keyframes astor-arrow-glow-pulse {
	to {
		text-shadow: 0 0 30px var(--astor-red), 0 0 30px var(--astor-red),
			-1px -1px 37px var(--astor-red), 2px 2px 37px var(--astor-red);
	}
}

.astor-glow-pulse {
	animation: astor-glow-pulse 1.5s ease-in-out infinite alternate;
}

.astor-glow-pulse--red {
	animation-name: astor-arrow-glow-pulse;
}

/* div/hr used as the small underline bar beneath section headings */
.astor-underline-bar {
	width: 60px;
	height: 3px;
	background: var(--astor-mint);
	margin: 16px 0 24px;
}

/* Hamburger toggle button (opens/closes the off-canvas panel) */
.astor-off-canvas-toggle {
	position: relative;
	width: 30px;
	height: 20px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
	-webkit-user-select: none;
	user-select: none;
}

.astor-off-canvas-toggle .hamburger-line {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--astor-white);
	transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}

.astor-off-canvas-toggle .hamburger-line:nth-child(1) { top: 0; }
.astor-off-canvas-toggle .hamburger-line:nth-child(2) { top: 9px; }
.astor-off-canvas-toggle .hamburger-line:nth-child(3) { top: 18px; }

/* Morph to an × when open */
.astor-off-canvas-toggle.is-open .hamburger-line:nth-child(1) {
	top: 30px;
	transform: rotate(45deg);
}
.astor-off-canvas-toggle.is-open .hamburger-line:nth-child(2) {
	opacity: 0;
}
.astor-off-canvas-toggle.is-open .hamburger-line:nth-child(3) {
	top: 30px;
	transform: rotate(-45deg);
}

/* ---------------------------------------------------------
   4. Off-canvas nav — scrim + sliding panel.
   Markup: see template-parts/off-canvas-menu.php
   --------------------------------------------------------- */
.astor-off-canvas-cover {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1002;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out;
}

body.astor-menu-open .astor-off-canvas-cover {
	opacity: 1;
	pointer-events: auto;
}

.astor-off-canvas-panel {
	position: fixed;
	top: 0;
	right: -605px;
	width: 605px;
	max-width: 85vw;
	height: 100vh;
	background: var(--astor-bg);
	z-index: 1003;
	overflow-y: auto;
	visibility: hidden;
	transition: right 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

body.astor-menu-open .astor-off-canvas-panel {
	right: 0;
	visibility: visible;
}

/* The whole page wrapper shifts with the same easing curve — that
   specific bezier is what gives the slide its slight "settle" feel.
   Wrap your Elementor page output in an element with this class,
   or apply it to <body>/#page if your theme structure allows. */
.astor-page-wrapper {
	transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

/* sticky header */
.astor-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1010;
	padding: 42px 54px;
	background-color: transparent;
	pointer-events: none;
	transition: background-color 0.3s ease-in-out, padding 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
 
.astor-header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: auto;
}
 
.astor-header.is-sticky {
	padding: 18px 54px;
	background-color: rgba(10, 5, 1, 0.92);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
 
.astor-logo img,
.astor-logo svg {
	width: 42px;
	transition: width 0.3s ease-in-out;
}
 
.astor-header.is-sticky .astor-logo img,
.astor-header.is-sticky .astor-logo svg {
	width: 32px;
}


/* ---------------------------------------------------------
   5. Card hover — "Film & Television" grid and similar.
   Apply to the image + caption wrapper.
   --------------------------------------------------------- */
.astor-card {
	position: relative;
	overflow: hidden;
}

.astor-card img {
	display: block;
	width: 100%;
	position: relative;
	z-index: 1;
	transition: transform 0.4s ease, filter 0.4s ease;
}

.astor-card:hover img {
	transform: scale(1.05);
	filter: brightness(0.7);
}

.astor-card__caption {
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 16px;
	opacity: 0 !important;
	transform: translateY(20px) !important;
	transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
	color: var(--astor-white);
	font-family: var(--astor-font);
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	text-align: center;
}
 
.astor-card:hover .astor-card__caption,
.astor-card.is-active .astor-card__caption {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* Network/platform badge on Film & TV cards (from ACF field) */
.astor-card__badge {
	position: absolute !important;
	top: 12px;
	left: 12px;
	z-index: 3;
	padding: 4px 10px;
	background: rgba(10, 5, 1, 0.75);
	color: var(--astor-mint);
	font-family: var(--astor-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------
   6. Contact form inputs (from original theme CSS)
   --------------------------------------------------------- */
.astor-input,
input[type="text"].astor-input,
input[type="email"].astor-input,
textarea.astor-input {
	background-color: transparent;
	border: 2px solid var(--astor-white);
	border-radius: 0;
	color: var(--astor-white);
	font-family: var(--astor-font);
	font-size: 16px;
	padding: 22px 26px;
	width: 100%;
	transition: border-color 0.2s ease-in-out;
}

.astor-input:focus {
	border-color: var(--astor-white);
	outline: none;
}