@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	.light-theme-coral {
		/* --orange-500: hsla(7, 100%, 64%, 1); */
		--orange-500: lch(63% 77 40);

		--section-fg: #131313;

		--heading-accent-color: #ffbdb5;
		--section-bg: linear-gradient(0deg, #ff6445, #ff6445),
			linear-gradient(0deg, #ff6445, #ff6445), #ffffff;
	}

	.light-theme-green {
		--section-fg: #fff;
		--section-fg-accent-1: #68f7f7;

		--subheading-fg: #68f7f7;
		--heading-accent-color: #00dede;
		--section-bg: linear-gradient(180deg, #069191 0%, #015555 100%);
	}

	.light-theme-yellow {
		--seciton-fg: #000;
		--section-fg-accent-1: #d93823;
		--section-fg-accent-2: #661105;
		--heading-accent-color: #ffd899;
		--subheading-fg: #b22614;
		--section-bg: linear-gradient(180deg, #fa9a00 0%, #f7f72a 100%);

		--button-disabled-border-color: #b22614;
		--button-disabled-fg: #b22614;
	}

	.light-theme-purple {
		--section-fg-accent-1: #c690ff;

		--section-fg: #fff;
		--heading-accent-color: #c690ff;
		--section-bg: linear-gradient(180deg, #922dff 0%, #5308a3 100%);
		--subheading-fg: #d7b2ff;

		--button-disabled-border-color: #d7b2ff;
		--button-disabled-fg: #d7b2ff;
	}

	.light-theme-dark-gray {
		--heading-accent-color: #d0d0d0;
		--section-bg: #161616;
		--subheading-fg: #aeaeae;

		--button-disabled-border-color: #2681ff;
		--button-disabled-fg: #2681ff;
	}

	.light-theme-black {
		--heading-accent-color: #d0d0d0;
		--section-bg: #000;
		--subheading-fg: #aeaeae;
	}

	@supports (color: color(display-p3 1 1 1)) {
		.light-theme {
			--orange-500: color(display-p3 0.95682 0.49211 0.37717);
		}
	}
}

@layer utilities {
	.text-shadow-heading-5xl {
		text-shadow: 0px 2px 0px var(--heading-accent-color),
			0px 8px 8px rgba(0, 0, 0, 0.15);
	}

	.text-shadow-heading-7xl {
		text-shadow: 0px 4px 0px var(--heading-accent-color),
			0px 8px 8px rgba(0, 0, 0, 0.15);
	}

	.box-shadow-button {
		box-shadow: 0px 4px 0px #ffbdb5, 0px 8px 8px rgba(0, 0, 0, 0.15);
	}

	/* box-shadow-button:active {
    box-shadow: none;
    transform: translateY(4px);
    transition: transform 60ms ease-in-out;
  } */

	.section-bg {
		background: var(--section-bg);
	}

	.section-fg {
		color: var(--section-fg);
	}

	.section-fg-accent-1 {
		color: var(--section-fg-accent-1);
	}

	.section-fg-accent-2 {
		color: var(--section-fg-accent-2);
	}

	.subheading-fg {
		color: var(--subheading-fg);
	}

	.overflow-unset {
		overflow: unset;
	}
}

/* Tailwind provides a custom border color styling that can't be overridden within utilities layer. */
.button-disabled-border-color {
	border-color: var(--button-disabled-border-color);
}

.button-disabled-fg {
	color: var(--button-disabled-fg);
}

/* .landing-section {
  display: flex;
  flex-direction: column;
} */

.landing-section .section-heading + .subheading,
.landing-section .section-heading + .shift-up {
	order: -1;
}

.landing-section {
	display: grid;
	grid-template-columns: 1fr min(1175px, calc(100% - 4rem)) 1fr;
	grid-column-gap: 32px;
}

:where(.landing-section) > * {
	grid-column: 2;
}

.accented-terms dt {
	color: var(--section-fg-accent-1);
}

/** 
 * Achieving the overlap effect requires these styles apply to the 
 * elment that comes first in the DOM:
 *   div[class=city-3d-a]
 *   div // 👈 Knows nothing about city-3d-a
 * This allows a single class to target the following sibling to apply required 
 * whitespace for the negative margin/overlap of the graphic asset.
 * In figma the asset is attached to the 2nd section or trailing sibling, but 
 * we can't target a previous sibling in CSS without :has which doesn't 
 * have broad enough support for our target audience yet.
 */
.city-3d-a:after {
	content: '';
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: contain;
	/* max-width: 506px; */
	/* width: 100%; */
	aspect-ratio: 1.66;
	/* height: 50vw; */
	/* grid-column-end: -1; */
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
}

.city-3d-a {
	/* padding-bottom: 25rem; */
	position: relative;
}

.city-3d-a + article {
	padding-top: 12rem;
}

.city-3d-b:after {
	content: '';
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: contain;
	aspect-ratio: 1.66;
	/* max-width: 506px; */
	/* width: 100%; */
	/* height: 303.6px; */
	/* grid-column-start: 1; */
	position: absolute;
	bottom: 0;
	/* margin-bottom: -124px; */
	left: 0;
}

.city-3d-b {
	padding-bottom: 16rem;
	position: relative;
}

.city-3d-b + article {
	padding-top: 16rem;
}

/*
 * We're reversing the order here to get desired overlapping without 
 * introducing z-index.
 */
.shift-up {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	grid-column: 2/-1;
}

.shift-up :not(:last-child) {
	margin-left: -80px;
}

.shift-up > div {
	aspect-ratio: 1;
	height: 192px;
	min-width: 192px;
	filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.15));
	border-radius: 32px;
	position: relative;
}

.shift-up > div img {
	max-width: 100%;
	z-index: -1;
}

.shift-up > div:after {
	content: '';
	box-shadow: inset 0px -4px 0px rgba(0, 0, 0, 0.1),
		inset 0px 1px 0px rgba(255, 255, 255, 0.25);
	border-radius: 32px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.hey {
	grid-column: 1/-1;
	overflow-x: hidden;
	display: grid;
	justify-content: center;
}

.hey > div {
	display: grid;
	grid-auto-flow: column;
	/* grid-auto-columns: 8rem; ~80px */
	gap: 1rem;
	justify-content: center;
}

.hey img {
	aspect-ratio: 1;
	/* object-fit: cover; */
	max-width: 110%;
}

.ipad {
	box-shadow: 4px 4px 0px #000000;
	grid-column: 2;
}

.feature-header {
	grid-template-columns: 1fr min(60ch, calc(100% - 4rem)) 1fr;
}

.feature-header > div {
	grid-column: 2;
}

:where(.feature-slider-wrapper) {
	grid-column: 1 / -1;
	display: block;
	/* grid-auto-flow: column; */
	grid-template-columns: 1fr min(1175px, calc(100% - 4rem)) 1fr;
	grid-column-gap: 32px;
	scroll-behavior: smooth;
	/* scroll-snap-type: x mandatory; */
}

:where(.feature-slider) {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: repeat(4, 1fr);
	grid-column: 2/-1;
	gap: 4rem;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 2rem;
}

.feature-slider > div {
	scroll-snap-align: start;
}

.feature-slider .iphone {
	border-radius: 36px;
	background-color: #fa9a00;
	padding: 0.5rem;
}

.full-bleed {
	grid-column: 1/-1;
}

.dang {
	grid-column: 1 / -1;
	display: grid;
	/* grid-auto-flow: column; */
	grid-template-columns: 1fr min(60ch, calc(100% - 64px)) 1fr;
	overflow-x: hidden;
	justify-items: center;
}

.wrapper-wrapper {
	grid-template-columns: 1fr min(1175px, calc(100% - 4rem)) 1fr;
}

:where(.pfp-bubbles) {
	display: grid;
	align-items: center;
	justify-items: start;
	position: absolute;
	/* background-color: lightblue; */
	width: 50%;
	grid-row: 1;
	aspect-ratio: 1;
}

.pfp-bubbles > div {
	position: absolute;
	aspect-ratio: 1;
	/* border: 1px solid white; */
	border-radius: 100%;
	box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.3), -4px 4px 20px rgba(0, 0, 0, 0.2);
	isolation: isolate;
}

.pfp-bubbles > div:after {
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 100%;
	position: absolute;
	background-color: var(--pfp-shadow-color);
	/* margin-left: -20px;
  margin-bottom: -20px;  */
	/* bottom: -10px;
  left: -10px; */
	inset: 0 0 var(--pfp-shadow-offset);
}

.pfp-bubbles > div img {
	border-radius: 100%;
	max-width: 100%;
	width: 100%;
	z-index: 1;
	display: block;
	position: relative;
	object-fit: cover;
}

.pfp-bubbles div:nth-child(5) {
	/* width: 170px; */
	width: 25%;
	border-color: red;
	/* margin-right: -450px;
 margin-top: -530px; */
	top: 20px;
	left: 200px;
	--pfp-shadow-offset: 3px -3px;
}

.pfp-bubbles div:nth-child(4) {
	/* width: 267px; */
	width: 33%;
	border-color: greenyellow;
	/* margin-right: -300px;
 margin-bottom: -400px; */
	--pfp-shadow-offset: 4px -4px;
}

.pfp-bubbles div:nth-child(3) {
	/* width: 133px;  */
	width: 18%;
	border-color: hotpink;
	/* margin-left: -200px;
 margin-bottom: -620px; */
	--pfp-shadow-offset: 2px -2px;
}

.pfp-bubbles div:nth-child(2) {
	/* width: 356px;  */
	width: 45%;
	border-color: blue;
	/* margin-left: -210px;
  margin-bottom: -230px; */
	--pfp-shadow-offset: 5px -5px;
}

.pfp-bubbles div:nth-child(1) {
	/* width: 445px;   */
	width: 60%;
	border-color: blueviolet;
	/* margin-left: -50px;
  margin-top: -290px; */
	top: -20px;
	left: 10px;
	--pfp-shadow-offset: 7px -7px;
}

.places-heading {
	position: relative;
}

.places-heading span {
	position: relative;
}

.places-heading:before {
	content: '';
	background-image: url('places__marker.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: calc(100% + 2rem);
	height: calc(100% + 2.6rem);
	position: absolute;
	z-index: 0;
	left: -1rem;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}