/* =====================
   Variables
   ===================== */
:root {
  --color-gold: #ffc136;
  --color-gold-hover: #dbb168;
  --color-gold-dark: #bf9340;
  --color-cream: #fff3d7;

  --font-size-xsm: 12px;
  --font-size-sm: 16px;
  --font-size-md: 20px;
  --font-size-lg: 24px;
  --font-size-xl: 32px;
}

html {
  background-color: #000000;
}

.App {
  min-height: 100vh;
}

.App__main {
  flex: 1;
}

/* =====================
   Global / Header
   ===================== */
.App .PageHeader {
  justify-content: flex-start;
}

.App .PageHeader .PageHeader__rightGroup {
  margin-left: 0;
}

.App .PageHeader__siteNameWrapper {
  display: none;
}

.NavigationLinks__link {
  border: none;
  padding: 0;
  margin-left: 40px;
}

.NavigationLinks.PageHeader__navigationLinks
  .Link.NavLink.NavigationLinks__link.NavLink--active.NavigationLinks__link--active,
.NavigationLinks.PageHeader__navigationLinks
  .Link.NavLink.NavigationLinks__link:hover,
.NavigationLinks.PageHeader__navigationLinks
  .Link.NavLink.NavigationLinks__link:focus,
.NavigationLinks.PageHeader__navigationLinks
  .Link.NavLink.NavigationLinks__link:active,
.NavigationLinks.PageHeader__navigationLinks
  .Link.NavLink.NavigationLinks__link:focus-visible {
  color: var(--color-gold);
  background: none;
  border: none;
  outline: none;
}

/* =====================
   Main / Home Page
   ===================== */
.gt-home-header-image {
  display: block;
  width: 100%;
}

.Embed.PageLayout__section:has(.gt-home-header-image) {
  padding: 0;
}

.Embed.PageLayout__section:has(.gt-home-header-image),
.Embed.PageLayout__section:has(.gt-divider-image) {
  height: auto !important;
}

.HeroUnit .swiper .HeroUnit__paginationContainer {
  display: none;
}

.HeroUnit .HeroUnitSlideInfo--isOverlay .HeroUnitSlideInfo__playButton {
  background: var(--color-gold);
  border-radius: 2px;
  font-size: var(--font-size-lg);
}

.HeroUnit .HeroUnitSlideInfo--isOverlay .HeroUnitSlideInfo__playButton:hover {
  background: var(--color-gold-hover);
}

.VideoCarousel .Thumbnail:hover .Thumbnail__gradient {
  height: 70%;
}

.VideoCarousel .Thumbnail:hover .Thumbnail__image {
  filter: brightness(70%);
  transition: filter .1s ease-out;
}

.VideoCarousel__header .VideoCarousel__title {
  font-size: var(--font-size-lg);
}

.Link.Button.Button--is-link.VideoCarousel__watchAll {
  border: 1px solid var(--color-gold);
  border-radius: 0;
  font-size: var(--font-size-sm);
  margin-left: 20px;
}

.Link.Button.Button--is-link.VideoCarousel__watchAll:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-hover);
}

.Link.Button.Button--is-link.VideoCarousel__watchAll svg {
  display: none;
}

/* =====================
   Collection Page
   ===================== */
.App__main:has(.VideoDetailPage),
.App__main:has(.CollectionPage) {
  background-image: url("https://dccr.disney.com/d23/gold-theater/gt-background.jpg");
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

.Thumbnail .Thumbnail__imageWrapper {
  border-radius: 0;
}

.Thumbnail .Thumbnail__imageWrapper .Thumbnail__info {
  position: relative;
  color: var(--color-cream);
}

.Thumbnail .Thumbnail__imageWrapper .Thumbnail__info .Thumbnail__title {
  font-size: var(--font-size-md);
  line-height: 1.5;
  margin-top: 12px;
}

.Thumbnail .Thumbnail__imageWrapper .Thumbnail__playButton {
  bottom: 45%;
  top: unset;
  transform: translateX(-50%);
}

.CollectionPage .Thumbnail--titleUnderImage:hover .Thumbnail__info {
  background: none;
}

.CollectionPage .Thumbnail--titleUnderImage:hover .Thumbnail__image {
  filter: brightness(70%);
  transition: filter .1s ease-out;
}

.CollectionPage .Thumbnail--titleUnderImage .Thumbnail__duration {
  margin: 8px 0 0;
}

/* =====================
   Video Player Page
   ===================== */
.gt-divider-image,
.gt-divider-image img {
  display: block;
  width: 100%;
}

.Embed.PageLayout__section:has(.gt-divider-image) {
  width: 85%;
  max-width: 1224px;
}

.PlayerContainer.SingleVideoFromCollection__playerContainer {
  outline: 6px solid var(--color-gold-dark);
}

.VideoDetailPage .SingleVideoDetails__duration {
  padding: 0;
}

.VideoDetailPage
  .SuggestedVideos.SingleVideoFromCollection__suggestedVideosColumn,
.SuggestedVideos.SingleVideoFromCollection__suggestedVideosCarousel {
  display: none;
}

.VideoDetailPage
  .SingleVideoFromCollection__content
  .SingleVideoDetails__title {
  font-size: var(--font-size-xl);
  line-height: 1.4;
  margin-bottom: 12px;
}

.VideoDetailPage
  .SingleVideoFromCollection__content
  .SingleVideoDetails__description {
  color: var(--color-cream);
  font-size: var(--font-size-md);
  line-height: 1.4;
  margin-bottom: 28px;
}

.VideoDetailPage
  .SingleVideoFromCollection__content
  .SingleVideoDetails__duration {
  background: none;
  color: var(--color-gold-dark);
  font-size: var(--font-size-md);
  line-height: 1.4;
  font-weight: normal;
}

/* =====================
   Footer
   ===================== */
.gc-footer-logo {
  display: flex;
  justify-content: center;
  margin: 40px 0 20px;
}

.gc-footer-logo img {
  height: 40px;
}

.gt-footer-links {
  background: #000000;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 20px;
}

.gt-footer-item a,
.gt-footer-item button {
  background: none;
  border: none;
  color: var(--color-cream);
  cursor: pointer;
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.gt-footer-item a:hover,
.gt-footer-item button:hover {
  text-decoration: underline;
}

.gt-footer-copyright {
  color: var(--color-cream);
  font-size: var(--font-size-xsm);
  margin-bottom: 50px;
  text-align: center;
}