/* Custom Styles */
:root {
	--primary: hsl(332.31, 100%, 43%);
	--secondary: hsl(332.31, 100%, 33%);
	--color-light: hsl(0, 0%, 100%);
	--color-light-4: hsl(0, 0%, 95%);
	--color-light-3: hsl(0, 0%, 90%);
	--color-light-2: hsl(0, 0%, 85%);
	--color-light-1: hsl(0, 0%, 80%);
	--color-dark: hsl(0, 0%, 0%);
	--color-dark-4: hsl(0, 0%, 5%);
	--color-dark-3: hsl(0, 0%, 10%);
	--color-dark-2: hsl(0, 0%, 15%);
	--color-dark-1: hsl(0, 0%, 20%);
	--color-border: #2a2a2a;
	--color-divider: #444444;
	--font-primary: 'Manrope', sans-serif;
	--font-brand: 'Permanent Marker', sans-serif;
	--font-special: 'monument_extendedregular', sans-serif;
	--text-size-xs: clamp(0.79rem, -0.01vw + 0.79rem, 0.78rem);
    --text-size-s: clamp(0.89rem, 0.08vw + 0.87rem, 0.94rem);
    --text-size-m: clamp(1rem, 0.21vw + 0.96rem, 1.13rem);
    --text-size-l: clamp(1.13rem, 0.37vw + 1.05rem, 1.35rem);
    --text-size-xl: clamp(1.27rem, 0.59vw + 1.15rem, 1.62rem);
	/* Spacing */
	--space-xs: 0.5rem;
	--space-s: 0.75rem;
	--space-m: 1rem;
	--space-l: 1.5rem;
	--space-xl: 2rem;
	/* Transitions */
	--transition-fast: 0.15s ease-in-out;
	--transition-normal: 0.3s ease-in-out;
	/* Border Radius */
	--radius-sm: 0.25rem;
	--radius-md: 0.375rem;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: block;
  src: url('../assets/fonts/manrope.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-display: block;
	font-family: 'Permanent Marker';
	font-style: normal;
	font-weight: 400;
	src: url('../assets/fonts/permanent-marker-v16-latin-regular.woff2') format('woff2');
}  
@font-face {
	font-display: block;
	font-family: 'monument_extendedregular';
	src: url('assets/fonts/monumentextended-regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.padding-4xs {padding: var(--space-4xs);}
.padding-3xs {padding: var(--space-3xs);}
.padding-2xs {padding: var(--space-2xs);}
.padding-xs {padding: var(--space-xs);}
.padding-s {padding: var(--space-s);}
.padding-m {padding: var(--space-m);}
.padding-l {padding: var(--space-l);}
.padding-xl {padding: var(--space-xl);}
.padding-2xl {padding: var(--space-2xl);}
.padding-3xl {padding: var(--space-3xl);}
.padding-4xl {padding: var(--space-4xl);}
.padding-horizontal-4xs {padding-left: var(--space-4xs); padding-right: var(--space-4xs);}
.padding-horizontal-3xs {padding-left: var(--space-3xs); padding-right: var(--space-3xs);}
.padding-horizontal-2xs {padding-left: var(--space-2xs); padding-right: var(--space-2xs);}
.padding-horizontal-xs {padding-left: var(--space-xs); padding-right: var(--space-xs);}
.padding-horizontal-s {padding-left: var(--space-s); padding-right: var(--space-s);}
.padding-horizontal-m {padding-left: var(--space-m); padding-right: var(--space-m);}
.padding-horizontal-l {padding-left: var(--space-l); padding-right: var(--space-l);}
.padding-horizontal-xl {padding-left: var(--space-xl); padding-right: var(--space-xl);}
.padding-horizontal-2xl {padding-left: var(--space-2xl); padding-right: var(--space-2xl);}
.padding-horizontal-3xl {padding-left: var(--space-3xl); padding-right: var(--space-3xl);}
.padding-horizontal-4xl {padding-left: var(--space-4xl); padding-right: var(--space-4xl);}
.padding-vertical-4xs {padding-top: var(--space-4xs); padding-bottom: var(--space-4xs);}
.padding-vertical-3xs {padding-top: var(--space-3xs); padding-bottom: var(--space-3xs);}
.padding-vertical-2xs {padding-top: var(--space-2xs); padding-bottom: var(--space-2xs);}
.padding-vertical-xs {padding-top: var(--space-xs); padding-bottom: var(--space-xs);}
.padding-vertical-s {padding-top: var(--space-s); padding-bottom: var(--space-s);}
.padding-vertical-m {padding-top: var(--space-m); padding-bottom: var(--space-m);}
.padding-vertical-l {padding-top: var(--space-l); padding-bottom: var(--space-l);}
.padding-vertical-xl {padding-top: var(--space-xl); padding-bottom: var(--space-xl);}
.padding-vertical-2xl {padding-top: var(--space-2xl); padding-bottom: var(--space-2xl);}
.padding-vertical-3xl {padding-top: var(--space-3xl); padding-bottom: var(--space-3xl);}
.padding-vertical-4xl {padding-top: var(--space-4xl); padding-bottom: var(--space-4xl);}

.text-size-xl {
    font-size: var(--text-size-xl);
    line-height: 1.4;
}
.text-size-l {
    font-size: var(--text-size-l);
    line-height: 1.5;
}
.text-size-m {
    font-size: var(--text-size-m);
    line-height: 1.5;
}
.text-size-s {
    font-size: var(--text-size-s);
    line-height: 1.6;
}
.text-size-xs {
    font-size: var(--text-size-xs);
    line-height: 1.7;
}
.brand-color {color: var(--primary);}
.font-bold {font-weight: 600;}

body {
	font-family: var(--font-primary);	
	color: var(--color-light);
    font-size: var(--text-size-m);
	background-color: var(--color-dark) !important;
}
a.hilite {
    opacity: 1;
    border-bottom: 1px solid var(--primary);
    font-weight: 600;
}
/* Navigation */
nav ul li {font-size: var(--text-size-m);}
.nav_link_global:hover, .nav_btn_global.active, .dropbtn:hover, .subOption a i:hover, .subOption a svg:hover {color: var(--primary);}

.pagesBlock a, .cookiesL p a, .pagesDetails a, .header_welcome a, .banner-text, .filterbyTags i, .filterbyTags svg, .cptreg i, .faqArea a, .vitalStats a, .messages_popup a {
    color: var(--primary) !important;
}
.bg-ultra-dark {background-color: hsl(0, 0%, 5%);}
.bg_dark, .bodyArea {
    background-color: hsl(0, 0%, 10%);
}
.bodyArea {
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
}
.lightBg, .bg_light, .ui-menu-item div {
    background-color: hsl(0, 0%, 15%);
}
.latest_dvds_custom, .most_popular_updates_custom, .whatshot, .most_popular_models_custom, .upcoming_updates_custom, .latest_updates_custom {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-s);
}
.title {
    margin-bottom: var(--space-xs);
    margin-top: var(--space-xs);
}
.title h2 {
    font-size: var(--text-size-xl);
    font-weight: 600;
}
.latestUpdateB h4 {
    font-size: var(--text-size-m);
    font-weight: 600;
}
.latestUpdateBinfo {
    background-color: var(--color-dark-1);
    border-radius: 0 0 .5em .5em;
    padding: var(--space-xs) !important;
    line-height: 1.6 !important;
    margin-top: -5px;
}
.modelBlock h4, .iModels h4 {
    font-size: var(--text-size-l);
    font-weight: 600;
}

/* Buttons */
.buttons_light, .buttons_light a, .pagesDetails p .buttons_light, .newmessage i {background-color: var(--primary);}
.buttons_med {background-color: var(--primary);}
.buttons_med:hover {background-color: var(--secondary);}
.border_btn, .modal_row, ul .border_btn a {
    color: var(--primary);
    border: 2px solid var(--primary) !important;
    background-color: transparent !important;
    font-weight: 600;
}
.border_btn:hover, .modal_row:hover, .allFilter li label.active, .allFiltersearch li label.active, .pagination a.active, ul .border_btn a:hover, .taggedU ul li a:hover, .taggedU ul li:hover a {
    background-color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}
.buttons_light, .border_btn {
    font-family: inherit !important;
}

.btn {font-weight: 600; text-transform: uppercase; padding: 0.3em 0.5em; border-radius: 4px;}
.btn.focus, .btn:focus {outline: 0; box-shadow: none;}
.btn-primary, .btn-primary.disabled, .btn-primary:disabled,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show>.btn-primary.dropdown-toggle{
	background-color: var(--primary);
	border-color: var(--primary);
	font-weight: 600;
}
.btn-primary {background-color: var(--primary); color: var(--color-light); border: none;}
.btn-primary:hover {color: var(--color-light);
	background: var(--secondary);
	border: none;
}
.btn-primary.focus, .btn-primary:focus {
    color: var(--color-light);
    background-color: var(--secondary);
    border-color: var(--secondary);
    box-shadow: none !important;
}
.btn-join {background-color: var(--primary); color: var(--color-light);
	background: var(--secondary);
	background: linear-gradient(100deg, rgb(221, 0, 102) 100%, rgb(162, 4, 77) 42%);
	text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
    margin: .5em;}
.btn-join:hover {color: var(--color-light);
	background: var(--secondary);
	background: linear-gradient(100deg, rgb(162, 4, 77) 42%, rgb(221, 0, 102) 100%);
	border: none;
}

/* Identity */
.identity{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.identity__heading{
	font-size: clamp(2rem, 2rem + 1.1vw, 4.5rem);
	font-weight: 600;
	text-transform: uppercase;
    text-wrap: balance;
}
.identity__subheading {
	font-style: normal;
	font-size: var(--text-size-s);
	font-weight: 300;
	letter-spacing: 6px;
	text-transform: uppercase;
    text-wrap: balance;
}
.identity__intro{
	font-size: var(--text-size-l);
    text-wrap: balance;
}
.marker-font{
	font-family: 'Permanent Marker';
	text-shadow: 2px 3px #e038ff;
}

/* Models // models.tpl, models-bio.tpl */
.model-bio{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: .25rem; /* spacing between items */
}
.model-bio__image{
    grid-column: span 1; /* spans columns 1 and 2 */
    padding: .25rem;
}
.model-bio__info{
    grid-column: span 2; /* takes up the 3rd column */
    padding: .5rem;    
}
.model_bio_thumb{
    width: 100%;
    height: auto;
    aspect-ratio: 1.2/1;
    object-fit: fill;
    border-radius: .25rem;
}
.vitalStats li {
    font-size: var(--text-size-m);
    color: var(--color-light) !important;
}

@media (max-width: 768px) {
.model-bio {
    grid-template-columns: 1fr; /* stack on small screens */
}
.model-bio__image,
.model-bio__info {
    grid-column: auto; /* remove explicit span */
}
}

.modelBioDetails h1 {
    font-size: var(--text-size-xl);
    font-weight: 600;
    text-transform: none;
}
.modelPic img {
    width: 100%;
    height: auto;
    aspect-ratio: 1.2/1;
    object-fit: fill;
    border-radius: .25rem;
}

/* Read More Function */
.vidImgContent .description.hidden,
.vidImgContent .descriptionFull.hidden {
  display: none;
}
.vidImgContent .description .read-more,
.vidImgContent .descriptionFull .read-less {
  color: var(--primary);
  font-weight: bold;
  font-style: italic;
  cursor: pointer;
  transition: max-height 0.3s ease;
}

/* Scene Page // gallery.tpl */
.scene{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 1rem; /* spacing between items */
}
.scene__join-container {
    grid-column: span 1; /* spans columns 1 and 2 */
    padding: 1rem 0;
}

.scene__info-container {
    grid-column: span 2; /* takes up the 3rd column */
    padding: 1rem 0;
}
@media (max-width: 768px) {
  .scene {
    grid-template-columns: 1fr; /* stack on small screens */
    padding: 0;
  }

  .scene__join-container,
  .second-info-container {
    grid-column: auto; /* remove explicit span */
    padding: 0;
    order: -1;
  }
}
.notrailerimg {max-width: fit-content;}
.vidImgContent p {
    font-size: var(--text-size-m);
    line-height: 1.5;
}
.videoInfo li {font-size: var(--text-size-xs);}
.infolink {font-size: var(--text-size-m); font-weight: 600;}

/* Commented out so that buttons show */
/* .vidImgButtons {display: none;} */

/* Register */
.ui-widget input[type="submit"]:hover, .ui-widget input[type="button"]:hover, .ui-widget button:hover, .ui-widget input[type="button"]:hover.btn-green {
    background-color: var(--color-light);
    color: var(--primary) !important;
}
.storeSignup {
    padding-top: var(--space-s) !important;
}
.storeHeader {
    background: hsl(0, 0%, 0%) !important;
}
.unliAccess {
    font-size: var(--space-s) !important;
    font-weight: 600 !important;
    text-transform: capitalize;
}
.cAccount h3 {text-transform: none;}
.storeAccount {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    align-items: center;
}
.vod_reg .createAccount {
    border: 1px solid;
    border-color: var(--color-dark-1);
    background-color: black;
    padding: 1em;
    border-radius: .5em;
}
.signup input, .wantJoin button {
    font-size: var(--text-size-m);
    padding: .5em 1em;

}

.register_cta {
    background-color: var(--color-dark-1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-l);
    text-align: center;
    gap: 1rem;
}
.register_cta-button {
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    background: #3ba32a;
    background: -moz-linear-gradient(top, #3ba32a 1%, #348726 100%);
    background: -webkit-linear-gradient(top, #3ba32a 1%, #348726 100%);
    background: linear-gradient(to bottom, #3ba32a 1%, #348726 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ba32a', endColorstr='#348726',GradientType=0 );
    margin: auto;
    max-width: 30ch;
}


/* Footer // custom_footer.tpl */
footer {
	background-color: hsl(0, 0%, 5%);
	font-size: var(--text-size-xs);
	line-height: 1.4em;
	color: #8a8a8a;
}
.site-footer__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-l);
	padding: var(--space-xl) var(--space-m);
	max-width: 1200px;
	margin: 0 auto;
}

/* FOOTER SECTIONS */
.footer-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-m);
	text-align: center;
	width: 100%;
}

.footer-section__logo {
	width: 275px;
	height: auto;
	max-width: 100%;
}

.footer-section__text {
	margin: 0;
	line-height: 1.6;
	color: var(--color-light-1);
}

.footer-section__text em {
	font-style: italic;
	color: var(--color-light-1);
}

/* FOOTER LINKS */

/* These 'unset' settings from header NAV */
footer nav ul li {padding: 0;}
.footer-nav__item::before {
    content: none;
}

.footer-link {
	color: var(--primary);
	text-decoration: none;
	transition: color var(--transition-fast);
	border-bottom: 1px solid transparent;
}

.footer-link:hover {
	color: var(--secondary);
}

.footer-link:focus-visible {
	outline: 2px solid var(--secondary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* FOOTER NAVIGATION */
.footer-nav {
	width: 100%;
	padding: var(--space-xs) 0;
}

.footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.footer-nav__item:not(:last-child)::after {
	content: '';
	width: 1px;
	height: 1.25rem;
	background-color: var(--color-divider);
	margin: 0 var(--space-xs);
}

.footer-nav__link {
	color: var(--primary);
	font-size: var(--text-size-s);
	text-decoration: none;
	padding: var(--space-s);
	transition: color var(--transition-fast);
	white-space: nowrap;
}

.footer-nav__link:hover {
	color: var(--secondary);
	text-decoration: underline;
}

.footer-nav__link:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* COPYRIGHT SECTION */
.copyright {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--space-m) var(--space-s);
	background-color: var(--color-dark-3);
	font-size: var(--text-size-xs);
	color: var(--color-light-1);
	text-align: center;
	border-top: 1px solid var(--color-border);
}

/* 
	RESPONSIVE DESIGN
	 */
@media (max-width: 768px) {
	.site-footer__container {
		padding: var(--space-l) var(--space-m);
		gap: var(--space-m);
	}

	.footer-section {
		gap: var(--space-s);
	}

	.footer-section__logo {
		width: 150px;
	}

	.footer-nav__list {
		flex-direction: column;
		gap: var(--space-xs);
	}

	.footer-nav__item:not(:last-child)::after {
		display: none;
	}

	.footer-nav__link {
		padding: var(--space-xs) var(--space-s);
	}
}

@media (max-width: 480px) {
	.footer-section__text {
		font-size: var(--text-size-xs);
	}

	.footer-section__logo {
		width: 120px;
	}
}