/*
    Theme Name: Altos
    Theme URI: https://example.com/
    Author: Prismatic
    Author URI: https://example.com/
    Description: Minimal theme with Tailwind.
    Version: 0.0.01
    Requires at least: 6.0
    Tested up to: 6.6
    Requires PHP: 7.4
    Text Domain: altos
*/

/* Local font faces */
@font-face {
  font-family: 'TradeGothicNextLTPro-BdCm';
  src: url('assets/fonts/TradeGothicNextLTPro-BdCm.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'VTCBayard-Rustin';
  src: url('assets/fonts/VTCBayard-Rustin.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TAYLana';
  src: url('assets/fonts/TAYLana.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Theme heading and fonts */
@font-face {
  font-family: 'TradeGothicNextLTPro-BdCm';
  src: url('assets/fonts/TradeGothicNextLTPro-BdCm.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VTCBayard-Rustin';
  src: url('assets/fonts/VTCBayard-Rustin.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Utilities and overrides */
/* Prevent DaisyUI active translate on specific buttons */
.btn.no-translate,
.btn.no-translate:active,
.btn.no-translate:focus {
  translate: none !important;
}

/* Utility: Funky heading font (same as heading-bracket) */
.font-funky {
	font-family: 'TAYLana', serif;
}

/* Header */
.site-logo img {
	max-width: 100%!important;
}

/* Style-2 mobile: make active item show hover effect by default */
@media (max-width: 767px) {
	/* Hide badge icon on mobile */
	.badge-icon { display: none !important; }
	.carousel[data-featured-mobile="true"][data-carousel-style="style-2"] .carousel-item .group {
		background-color: transparent;
		box-shadow: none;
		transition: background-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
	}
	.carousel[data-featured-mobile="true"][data-carousel-style="style-2"] .carousel-item.active .group {
		background-color: var(--color-teal-deep);
		box-shadow: inset 0 0 48px rgb(0 0 0 / 50%);
	}
	.carousel[data-featured-mobile="true"][data-carousel-style="style-2"] .carousel-item.active .group  a {
		color: var(--color-white);
	}
	.carousel[data-featured-mobile="true"][data-carousel-style="style-2"] .carousel-item.active .group  div {
		color: var(--color-cream);
	}
	/* Style-2 mobile: constrain title width for single-line ellipsis */
	.carousel[data-featured-mobile="true"][data-carousel-style="style-2"] h4 a {
		max-width: 190px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Mobile featured carousel emphasis */
@media (max-width: 767px) {
	.carousel[data-featured-mobile="true"] {
		/* ensure horizontal layout respects transforms */
		scroll-snap-type: x mandatory;
	}
	/* apply emphasis only if not style-2 */
	.carousel[data-featured-mobile="true"][data-carousel-style]:not([data-carousel-style="style-2"]) .carousel-item {
		transition: transform 200ms ease, opacity 200ms ease;
		opacity: 0.4;
	}
	.carousel[data-featured-mobile="true"][data-carousel-style]:not([data-carousel-style="style-2"]) .carousel-item.active {
		opacity: 1;
		transform: scale(1.0);
	}
	.carousel[data-featured-mobile="true"][data-carousel-style]:not([data-carousel-style="style-2"]) .carousel-item.is-left,
	.carousel[data-featured-mobile="true"][data-carousel-style]:not([data-carousel-style="style-2"]) .carousel-item.is-right {
		opacity: 0.4;
		/* transform: scale(0.9); */
	}
	/* style-2: keep fade but remove scaling */
	.carousel[data-featured-mobile="true"][data-carousel-style="style-2"] .carousel-item {
		transition: opacity 200ms ease;
	}
	.carousel[data-featured-mobile="true"][data-carousel-style="style-2"] .carousel-item.active {
		opacity: 1;
		transform: none;
	}
	.carousel[data-featured-mobile="true"][data-carousel-style="style-2"] .carousel-item.is-left,
	.carousel[data-featured-mobile="true"][data-carousel-style="style-2"] .carousel-item.is-right {
		opacity: 0.4;
		transform: none;
	}
}

/* Mobile featured carousel item width so neighbors peek */
@media (max-width: 767px) {
	.carousel[data-featured-mobile="true"] .carousel-item {
		flex: 0 0 65%;
		min-width: 65%;
	}
	
	/* Style-4: Single item mobile slider - full width items */
	.carousel[data-featured-mobile="true"][data-carousel-style="style-4"] .carousel-item {
		flex: 0 0 100%;
		min-width: 100%;
	}
}

/* Mobile arrow cursor styles */
@media (max-width: 767px) {
	button[aria-label="Previous"].md\:hidden,
	button[aria-label="Next"].md\:hidden {
		cursor: pointer;
	}
	button[aria-label="Previous"].md\:hidden[disabled],
	button[aria-label="Next"].md\:hidden[disabled] {
		cursor: not-allowed;
	}
}

/* Remove default bottom margin on wp-block-columns */
.wp-block-columns {
  margin-bottom: 0 !important;
}

/* Explicit hover behavior for style-2 carousel items */
.carousel[data-carousel-style="style-2"] .group:hover {
  color: var(--color-cream) !important;
}
.carousel[data-carousel-style="style-2"] .group:hover :where(p, span, div, h1, h2, h3, h4, h5, h6) {
  color: var(--color-cream) !important;
}
.carousel[data-carousel-style="style-2"] .group:hover h4 a {
  color: #ffffff !important;
}
.carousel[data-carousel-style="style-2"] .group:hover .btn-main {
  background-color: var(--color-cream) !important;
  color: var(--color-teal-deep) !important;
}

@media (max-width: 767px) {
	/* Style-2 mobile: active slide button becomes cream with teal-deep text */
	.carousel[data-featured-mobile="true"][data-carousel-style="style-2"] .carousel-item.active .group .btn-main {
		background-color: var(--color-cream) !important;
		color: var(--color-teal-deep) !important;
	}
}

/* Mobile carousel dots */
@media (max-width: 767px) {
	[data-dots-for] {
		display: flex;
		gap: 22px;
		align-items: center;
		justify-content: center;
	}
	/* Base size */
	.carousel-dot {
		width: 11px;
		height: 11px;
		border-radius: 9999px;
	}
	/* Style 1: default teal-deep, active red #CC1E26 */
	[data-dots-style="style-1"] .carousel-dot {
		background-color: var(--color-teal-deep);
		border: 1px solid rgba(0,0,0,0.15);
	}
	[data-dots-style="style-1"] .carousel-dot.active {
		background-color: #CC1E26;
		border-color: #CC1E26;
	}
	/* Style 2: default white, active cream */
	[data-dots-style="style-2"] .carousel-dot {
		background-color: var(--color-white);
		border: 1px solid rgba(0,0,0,0.15);
	}
	[data-dots-style="style-2"] .carousel-dot.active {
		background-color: var(--color-cream);
		border-color: var(--color-cream);
	}
}